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

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

/* ==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.13.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 requirments:
 * - prefers-color-scheme support is required to use Automatic theme
 */

ApplyDarkColors()
	:root
		--krendel-bg1: #1a1a1a
		--krendel-bg2: #242424
		--krendel-bg3: #343434
		--krendel-bg4: #404040

		--krendel-pgi: #292929

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

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

		--krendel-at1: #679cd04d
		--krendel-at2: #3673af4d
		--krendel-at3: #2855804d
		--krendel-at4: #1936524d

		--krendel-dg1: darken(#f66, 0%)
		--krendel-dg2: darken(#f66, 10%)
		--krendel-dg3: darken(#f66, 20%)
		--krendel-dg4: darken(#f66, 30%)

		--krendel-logo-filter: brightness(107%)

ApplyLightColors()
	:root
		--krendel-bg1: #eeeeee
		--krendel-bg2: #dadada
		--krendel-bg3: #c5c5c5
		--krendel-bg4: #b1b1b1

		--krendel-pgi: #ffffff

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

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


	/* icons */

	.green svg path
	.green path
	.btn-default path
		fill: rgb(108,248,216) /* override with default if custom.css is applied */


	/* progress bars */
	.progress
		background: var(--krendel-pgi)


	/* 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 enries 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 colorMode == light
		ApplyLightColors()

	if colorMode == auto
		@media (prefers-color-scheme: light)
			ApplyLightColors()
		@media (prefers-color-scheme: dark)
			ApplyDarkColors()

	ApplyStyle()

Reviews

No reviews yet.