Theme that improves the look of Weblate
Weblate Modernized by 0ko
Imported and mirrored from https://codeberg.org/0ko/UserStyles/raw/main/Weblate/Modernized.user.css
Details
Author0ko
LicenseMIT
Categoryweblate
Created
Updated
Size12 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Little design update for Weblate. Key features:
- color scheme, buttons and round corners from UserStyles.world
- many CSS fixes for text, icon positioning
- unifies the look of customized Weblate instances, so you will have a consistent expirience
- makes Codeberg Translate usable with dark theme
Light theme support is unfinished! I recommend to disable the style for light theme for now via Stylus properties.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Weblate Modernized
@author 0ko (https://userstyles.world/~0ko)
@description An unfinished theme to improve look of Weblate. Most aspects like colors, borders, radiuses are taken from userstyles.world CSS. ⚠️ Light theme support is WIP.
@version 0.19.0
@license MIT
@preprocessor stylus
@namespace 0ko userstyles
@homepageURL https://codeberg.org/0ko/UserStyles
@supportURL https://codeberg.org/0ko/UserStyles/issues
@var select colorMode "Color mode" {
"Automatic": "auto",
"Always Dark": "dark",
"Always Light": "light",
}
==/UserStyle== */
imp = !important
/* browser feature requirements:
* - prefers-color-scheme support is required to use Automatic theme
*/
ApplyDarkColors()
:root
/* background */
--krendel-bg1: #1a1a1a
--krendel-bg2: #242424
--krendel-bg3: #343434
--krendel-bg4: #404040
/* progress indicator background */
--krendel-pgi: #292929
/* selected entry background */
--krendel-sbg: #ffff3018
/* comments */
--krendel-com-bg: #2a3450
/* foreground */
--krendel-fgi: #ffffff
--krendel-fg1: #dddddd
--krendel-fg2: #bebebe
--krendel-fg3: #a0a0a0
--krendel-fg4: #919191
--krendel-fg5: #636363
--krendel-btn-fg1: var(--krendel-fg1)
--krendel-btn-fg2: var(--krendel-fgi)
/* primary accent */
--krendel-acp: rgb(139, 190, 255)
--krendel-ac1: #679cd0
--krendel-ac2: #3673af
--krendel-ac3: #285580
--krendel-ac4: #193652
--krendel-ac5: #102133
/* icons */
--krendel-ico1: rgb(108,248,216)
/* transparent primary accent */
--krendel-at1: #679cd04d
--krendel-at2: #3673af4d
--krendel-at3: #2855804d
--krendel-at4: #1936524d
/* dangerous */
--krendel-dg1: darken(#f66, 0%)
--krendel-dg2: darken(#f66, 10%)
--krendel-dg3: darken(#f66, 20%)
--krendel-dg4: darken(#f66, 30%)
/* syntax highlighting */
--krendel-str: #ff547f
--krendel-kwd: #759eff
--krendel-lit: #5db6f5
--krendel-logo-filter: brightness(107%)
ApplyLightColors()
:root
/* background */
--krendel-bg1: #eeeeee
--krendel-bg2: #dadada
--krendel-bg3: #c5c5c5
--krendel-bg4: #b1b1b1
/* progress indicator background */
--krendel-pgi: #ffffff
/* selected entry background */
--krendel-sbg: #fff03021
/* comments */
--krendel-com-bg: #b5ccf8
/* foreground */
--krendel-fgi: #000000
--krendel-fg1: #101010
--krendel-fg2: #242424
--krendel-fg3: #393939
--krendel-fg4: #4d4d4d
--krendel-fg5: #626262
--krendel-btn-fg1: #dddddd
--krendel-btn-fg2: #ffffff
/* primary accent */
--krendel-acp: #1fa385 /* TODO: Weblate default, replace with blue */
--krendel-ac1: #0b459b
--krendel-ac2: #0e56c1
--krendel-ac3: #1067e7
--krendel-ac4: #307ef0
--krendel-ac5: #a2c5f8
/* icons */
--krendel-ico1: #3e3e3e
/* dangerous */
--krendel-dg1: darken(#f00, 0%)
--krendel-dg2: darken(#f00, 10%)
--krendel-dg3: darken(#f00, 20%)
--krendel-dg4: darken(#f00, 30%)
/* transparent primary accent */
--krendel-at1: #0b459b4d
--krendel-at2: #0e56c14d
--krendel-at3: #1067e74d
--krendel-at4: #307ef04d
/* TODO: define all variables */
--krendel-logo-filter: brightness(15%)
ApplyStyle()
:root
--krendel-br1: 16px
--krendel-br2: 12px
--krendel-br3: 8px
html
background-color: var(--krendel-bg1) imp
body
.panel
.list-group-item
.sticky-header
background-color: var(--krendel-bg1)
body a
&
&:hover
color: var(--krendel-acp)
.dropdown-menu
background-color: var(--krendel-bg2)
li a:hover
li a:focus
background-color: var(--krendel-bg3)
.form-control
background-color: var(--krendel-bg3)
border-color: var(--krendel-bg4)
border-radius: 8px
.panel-default > .panel-heading
background-color: var(--krendel-bg3)
.panel
border-color: var(--krendel-bg4)
border-radius: calc(var(--krendel-br3) + 1px)
> .table:last-child
> .table-responsive:last-child > .table:last-child
border-bottom-right-radius: var(--krendel-br3)
border-bottom-left-radius: var(--krendel-br3)
overflow: hidden
> tbody:last-child
> tfoot:last-child
> tr:last-child
border-bottom-right-radius: var(--krendel-br3)
border-bottom-left-radius: var(--krendel-br3)
th
td
&:first-child
border-bottom-left-radius: var(--krendel-br3)
&:last-child
border-bottom-right-radius: var(--krendel-br3)
> .list-group:last-child .list-group-item:last-child
> .panel-collapse > .list-group:last-child .list-group-item:last-child
border-bottom-right-radius: var(--krendel-br3)
border-bottom-left-radius: var(--krendel-br3)
.panel-heading
border-bottom: none
border-top-left-radius: var(--krendel-br3)
border-top-right-radius: var(--krendel-br3)
.panel-footer
border-bottom-left-radius: var(--krendel-br3)
border-bottom-right-radius: var(--krendel-br3)
.thumbnail
background-color: var(--krendel-bg1)
border-color: var(--krendel-bg4)
border-radius: var(--krendel-br3)
pre
background-color: var(--krendel-bg2)
border-color: var(--krendel-bg4)
border-radius: var(--krendel-br3)
.table
> thead > tr > th
border-bottom: none
> thead > tr > th
> tbody > tr > th
> tfoot > tr > th
> thead > tr > td
> tbody > tr > td
> tfoot > tr > td
border-top-color: var(--krendel-bg4)
.table-striped tbody tr
&:nth-of-type(2n)
background-color: var(--krendel-bg1)
&:nth-of-type(2n+1)
background-color: var(--krendel-bg2)
td
th
border-top: 1px solid var(--krendel-bg4)
.badge.license
background-color: var(--krendel-bg4)
.comment-content
border-radius: 5px /* override `0 5px 5px 5px` to remove the weird unrounded corner */
background-color: var(--krendel-com-bg)
.comment-resolved
background-color: rgb(35, 47, 70)
a
color: var(--krendel-acp)
.object-link
.object-link a
color: var(--krendel-fg1)
footer li
color: var(--krendel-fg1)
.text-muted
color: var(--krendel-fg2)
code
background-color: rgb(51, 34, 50)
/* global navbar */
.navbar-inverse
background-color: var(--krendel-bg2)
border-bottom solid var(--krendel-bg3) 1px
.navbar-brand
.navbar-nav > li > a
color: var(--krendel-fg1)
&:hover
&:focus
color: var(--krendel-acp)
.navbar-brand svg
filter: var(--krendel-logo-filter)
.navbar a:hover path
fill: var(--krendel-acp)
/* buttons */
.btn
color: var(--krendel-fg1)
&:hover
&:focus
color: var(--krendel-fgi) imp
.btn-default
background-color: var(--krendel-bg1) imp
border: 1px solid var(--krendel-bg4)
&:hover
background: var(--krendel-bg2) imp
&:focus
background: var(--krendel-bg3) imp
.btn-primary
.nav-pills > li.active > a /* not a button but uses the same style */
background-color: var(--krendel-ac4) imp
border: 1px solid var(--krendel-ac3)
&:hover
border-color: var(--krendel-ac2)
&:focus
border-color: var(--krendel-ac2) imp
box-shadow: 0 0 0 0.25em var(--krendel-at3) imp /* TODO: should use rem actually */
.btn-info
border: 1px solid var(--krendel-ac2) imp
&:hover
background-color: var(--krendel-ac2)
&:focus
box-shadow: 0 0 0 0.25em var(--krendel-at2) imp /* TODO: should use rem actually */
&:active
background-color: var(--krendel-ac1) imp
.btn-warning
background-color: var(--krendel-ac2) imp
border: 1px solid var(--krendel-ac2)
&:hover
border-color: var(--krendel-ac4)
&:focus
border-color: var(--krendel-ac4) imp
box-shadow: 0 0 0 0.25em var(--krendel-at2) imp /* TODO: should use rem actually */
.btn-danger
background-color: var(--krendel-dg3)
border: 1px solid var(--krendel-dg2)
&:hover
background-color: var(--krendel-dg2)
border-color: var(--krendel-dg1)
&:focus
border-color: var(--krendel-dg1)
background-color: var(--krendel-dg4)
/* TODO: add box-shadow */
&:active
background-color: var(--krendel-dg4)
.btn-primary
.btn-info
.btn-warning
.btn-danger
color: var(--krendel-btn-fg1)
&:hover
&:focus
color: var(--krendel-btn-fg2) imp
.btn-link:hover path
fill: var(--krendel-acp)
/* dropdown buttons */
.nav-pills > li.active > a
background-color: rgb(28, 65, 92)
&:hover
&:focus
background-color: #214d6d
.nav-pills > li > a
color: var(--krendel-acp)
.nav-pills > li > a:hover
.sort-cell:hover
a:hover
a:focus
color: rgb(188, 218, 255)
.nav-pills > .active > a
.nav > .active > a:hover
border-color: rgb(94, 103, 126)
.nav-pills > li > a
&:focus
&:active
color: #f0f7ff
.nav-pills > .open > a
color: #f0f7ff imp
/* grouped inputs */
/* this includes a few border fixes for Weblate bugs */
.input-group
background-color: var(--krendel-bg1)
border-radius: var(--krendel-br3)
.input-group-addon
.form-control
background: transparent
border: 1px solid var(--krendel-bg4)
#is-exact
border-left: none
#highlighted-output
border: none
.editor-wrap > .highlighted-output
.form-control:last-child
border-radius: 0 var(--krendel-br3) var(--krendel-br3) 0
.input-group
.btn-group
.btn:first-child:not(.btn-primary)
border-radius: var(--krendel-br3) 0 0 var(--krendel-br3)
.btn:last-child:not(.btn-primary)
border-radius: 0 var(--krendel-br3) var(--krendel-br3) 0
/* icons */
.green svg path
.green path
.btn-default path
fill: var(--krendel-ico1) /* override with default if custom.css is applied */
a.green:hover path
fill: var(--krendel-fg1)
/* pagination*/
.pagination
> li > a
color: var(--krendel-ico1)
background: var(--krendel-bg2)
&:hover
color: var(--krendel-fg1)
background: var(--krendel-bg3)
.disabled a path
cursor: unset /* don't override cursor with `not-allowed`, it's enough to just not have a grabby hand */
fill: var(--krendel-fg1) /* make unusable buttons have gray icons */
/* progress bars */
.progress
background: var(--krendel-pgi)
/* search and replace */
table.replace-preview tr.warning td
background: var(--krendel-sbg)
/* /api */
.prettyprint
background:...