Skip to content

Weblate Modernized by 0ko

Imported and mirrored from https://codeberg.org/0ko/UserStyles/raw/main/Weblate/Modernized.user.css

Screenshot of Weblate Modernized
Homepage Write a review Install Get Stylus

Details

Author0ko

LicenseMIT

Categoryweblate

Created

Updated

Size10 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Theme that improves the look of Weblate

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.

Changelog · License · Feedback

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.17.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

		/* foreground */
		--krendel-fgi: #ffffff
		--krendel-fg1: #dddddd
		--krendel-fg2: #bebebe
		--krendel-fg3: #a0a0a0
		--krendel-fg4: #919191
		--krendel-fg5: #636363

		/* primary accent */
		--krendel-acp: rgb(139, 190, 255)
		--krendel-ac1: #679cd0
		--krendel-ac2: #3673af
		--krendel-ac3: #285580
		--krendel-ac4: #193652
		--krendel-ac5: #102133

		/* 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
		--krendel-bg1: #eeeeee
		--krendel-bg2: #dadada
		--krendel-bg3: #c5c5c5
		--krendel-bg4: #b1b1b1

		--krendel-pgi: #ffffff

		--krendel-sbg: #fff03021

		--krendel-fgi: #ffffff
		--krendel-fg1: #101010
		--krendel-fg2: #242424
		--krendel-fg3: #393939
		--krendel-fg4: #4d4d4d
		--krendel-fg5: #626262

		--krendel-acp: #1fa385 /* TODO: Weblate default, replace with blue */
		--krendel-ac1: #0b459b
		--krendel-ac2: #0e56c1
		--krendel-ac3: #1067e7
		--krendel-ac4: #307ef0
		--krendel-ac5: #a2c5f8

		--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: #2e3e5c

	.comment-resolved
		background-color: rgb(35, 47, 70)

	a
		color: var(--krendel-acp)

	.object-link
	.object-link a
		color: var(--krendel-fg1)

	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)
		.navbar-brand svg
			filter: var(--krendel-logo-filter)

	/* 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)


	/* 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: rgb(108,248,216) /* override with default if custom.css is applied */


	/* pagination*/

	.pagination
		> li > a
			color: rgb(108,248,216)

		.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: var(--krendel-bg2)
		border-color: var(--krendel-bg3)
		.pun
			color: var(--krendel-fg2)
		.pln
			color: var(--krendel-fg1)
		.str
			color: var(--krendel-str)
		.kwd
			color: var(--krendel-kwd)
		.lit
			color: var(--krendel-lit)

	/* fix for button gaps consistency in translation form */
	.translation-form
		.btn-primary
		.btn-spaced
			margin-right: 0

	/* consistency fix for Glossary */
	.source-info
		.panel > table
			margin: 5px 10px 5px 10px
		a[data-target="#add-glossary-form"]
			padding: 10px 15px 10px 15px
		/* TODO: width bug on long entries causing pencil to drift away */

	/* consistency fix for String information  */
	.string-info
		.list-group-item
			padding-bottom: 10px
		a[data-target="#add-screenshot-form"]
			padding-left: 0
			padding-bottom: 0
			svg
				margin-right: 5px


@-moz-document domain("hosted.weblate.org"),
domain("translations.documentfoundation.org"),
domain("translate.fedoraproject.org"),
domain("translate.element.io"),
domain("translate.codeberg.org"),
domain("weblate.framasoft.org"),
domain("translate.revolt.chat"),
domain("weblate.join-lemmy.org"),
domain("translations.metabrainz.org")

	if colorMode == dark
		ApplyDarkColors()

	if col...

Reviews

No reviews yet.