Draconia: fix light theme regression, lighten dark palette

2026-07-15T17:05:23Z

fix light theme regression, lighten dark palette

← Starší verze		Verze z 15. 7. 2026, 17:05
Řádek 1:		Řádek 1:
	/* All CSS here will be loaded for users of the Citizen skin */		/* All CSS here will be loaded for users of the Citizen skin */

	/* Draconia RP Wiki theme ~~- adapted from~~ the ~~Tolkien Gateway~~ theme		/* Draconia RP Wiki theme. Only the dark theme is styled - light mode is
	(~~CC BY-SA 4.0~~)~~, recolored~~ to ~~draconia~~.~~cz's palette and forced to a~~		intentionally left as stock Citizen (untouched) since the wiki always
	~~single dark theme (~~no light/toggle ~~variant~~ is maintained). */		defaults to dark ($wgCitizenThemeDefault = 'dark' in LocalSettings.php)
			and no light/toggle experience is maintained. */

	:root {		:root.skin-theme-clientpref-night {
	--color-surface-0: ~~var(--tg-color-surface-0)~~ !important;		--color-surface-0: #1e1e24 !important;
	--color-surface-1: ~~var(--tg-color-surface-1)~~ !important;		--color-surface-1: #24242b !important;
	--color-surface-2: ~~var(--tg-color-surface-2)~~ !important;		--color-surface-2: #292930 !important;
	--color-surface-3: ~~var(--tg-color-surface-3)~~ !important;		--color-surface-3: #2e2e36 !important;
	--color-surface-4: ~~var(~~-~~-tg~~-color-surface-4) !important;		--color-surface-4: #34343d !important;
	--color-base: ~~var(--tg-color-base)~~ !important;		--color-surface-5: #3a3a44 !important;
	--color~~-base-~~-emphasized: ~~var(--tg-color-emphasized)~~ !important;		--color-base: #d6d6db !important;
	--color~~-base-~~-subtle: ~~var(--tg-color-subtle)~~ !important;		--color-emphasized: #ffffff !important;
	~~--font-family-base: var(--tg-font-family-body)~~;		--color-subtle: #9a9aa4 !important;
	--color-primary: ~~var(--tg-color-progressive)~~ !important;		--color-primary: #f0801f !important;
	--color-primary--hover: ~~var(--tg-color-progressive--hover)~~ !important;		--color-primary--hover: #ff9438 !important;
	--color-primary--active: ~~var(~~-~~-tg~~-color-~~progressive~~-~~-active)~~ !important;		--color-primary--active: #d9720f !important;
	--color-~~inverted-primary~~: ~~var~~(--tg-color-~~inverted-progressive~~);		--color-inverted-primary: #141417 !important;
	--color-~~destructive~~: ~~#cc6958~~;		--border-color-base: rgba(255, 255, 255, 0.1);
			--border-color-subtle: rgba(255, 255, 255, 0.05);
			--border-color-interactive: rgba(255, 255, 255, 0.14);
	}		}

	~~/* Force dark palette unconditionally~~ - ~~the site only ships one theme, the~~		@media screen and (prefers-color-scheme: dark) {
	~~light/auto Citizen variants are never used regardless of user clientpref. */~~		:root.skin-theme-clientpref-os {
	:~~root,~~		--color-surface-0: #1e1e24 !important;
	~~:root.skin-theme-clientpref-night,~~		--color-surface-1: #24242b !important;
	:root.skin-theme-clientpref-os {		--color-surface-2: #292930 !important;
	--tg-~~border~~-~~color-base~~: ~~rgba(255, 255, 255, 0.08)~~;		--color-surface-3: #2e2e36 !important;
	--tg-~~border~~-~~color-subtle~~: ~~rgba(255, 255, 255, 0.04)~~;		--color-surface-4: #34343d !important;
	~~--tg~~-~~border~~-color-~~interactive: rgba(255, 255, 255, 0.14);~~		--color-surface-5: #3a3a44 !important;
	-~~-tg-color-base~~: #~~e5e5e8~~;		--color-base: #d6d6db !important;
	--tg-~~color~~-~~emphasized~~: #~~ffffff~~;		--color-emphasized: #ffffff !important;
	--tg-~~color~~-~~subtle~~: #~~9a9aa4~~;		--color-subtle: #9a9aa4 !important;
	-~~-tg~~-color-~~inverted~~-~~progressive~~: #~~141417~~;		--color-primary: #f0801f !important;
	--tg-color-~~surface-0~~: #~~141417~~;		--color-primary--hover: #ff9438 !important;
	--tg-color-~~surface-1~~: #~~17171b~~;		--color-primary--active: #d9720f !important;
	--tg-color-~~surface-2~~: #~~1c1c21~~;		--color-inverted-primary: #141417 !important;
	-~~-tg~~-color-~~surface-3~~: #~~212127~~;		--border-color-base: rgba(255, 255, 255, 0.1);
	--tg-~~color~~-~~surface~~-4: #~~26262e~~;		--border-color-subtle: rgba(255, 255, 255, 0.05);
	--tg-~~color~~-~~surface~~-5: #~~2b2b34~~;		--border-color-interactive: rgba(255, 255, 255, 0.14);
	--tg-~~color~~-~~progressive~~: #~~f0801f~~;		}
	--tg-color-~~progressive--hover~~: ~~#ff9438~~;
	--tg-color-~~progressive--active~~: ~~#d9720f~~;
	--tg-~~opacity~~-~~pattern~~: 0.05;
	}		}

	/* Do not invert edit button icon (contrast) ~~- always dark, so always apply~~ */		/* Do not invert edit button icon in dark mode (contrast) */
	#ca-edit .citizen-ui-icon::before,		.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before,
	#ca-ve-edit .citizen-ui-icon::before {		.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before {
	filter: none;		filter: none;
			}

			@media screen and (prefers-color-scheme: dark) {
			.skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before,
			.skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before {
			filter: none;
			}
	}		}

Řádek 72:		Řádek 79:
	}		}

	/* Move page header to the bottom ~~for~~ the main page~~, matching the reference~~		/* Move page header to the bottom on the main page */
	~~wiki's layout~~ */
	.page-Hlavní_strana .citizen-body-container {		.page-Hlavní_strana .citizen-body-container {
	grid-template-areas:		grid-template-areas:
Řádek 103:		Řádek 109:
	}		}

	/* Menu: richer format with more hierarchy~~, matching the reference wiki~~ */		/* Menu: richer format with more hierarchy */
	.citizen-drawer__menu {		.citizen-drawer__menu {
	margin-bottom: 0;		margin-bottom: 0;

Draconia: Draconia dark theme

2026-07-15T16:46:08Z

Draconia dark theme

Nová stránka

/* All CSS here will be loaded for users of the Citizen skin */

/* Draconia RP Wiki theme - adapted from the Tolkien Gateway theme
(CC BY-SA 4.0), recolored to draconia.cz's palette and forced to a
single dark theme (no light/toggle variant is maintained). */

:root {
--color-surface-0: var(--tg-color-surface-0) !important;
--color-surface-1: var(--tg-color-surface-1) !important;
--color-surface-2: var(--tg-color-surface-2) !important;
--color-surface-3: var(--tg-color-surface-3) !important;
--color-surface-4: var(--tg-color-surface-4) !important;
--color-base: var(--tg-color-base) !important;
--color-base--emphasized: var(--tg-color-emphasized) !important;
--color-base--subtle: var(--tg-color-subtle) !important;
--font-family-base: var(--tg-font-family-body);
--color-primary: var(--tg-color-progressive) !important;
--color-primary--hover: var(--tg-color-progressive--hover) !important;
--color-primary--active: var(--tg-color-progressive--active) !important;
--color-inverted-primary: var(--tg-color-inverted-progressive);
--color-destructive: #cc6958;
}

/* Force dark palette unconditionally - the site only ships one theme, the
light/auto Citizen variants are never used regardless of user clientpref. */
:root,
:root.skin-theme-clientpref-night,
:root.skin-theme-clientpref-os {
--tg-border-color-base: rgba(255, 255, 255, 0.08);
--tg-border-color-subtle: rgba(255, 255, 255, 0.04);
--tg-border-color-interactive: rgba(255, 255, 255, 0.14);
--tg-color-base: #e5e5e8;
--tg-color-emphasized: #ffffff;
--tg-color-subtle: #9a9aa4;
--tg-color-inverted-progressive: #141417;
--tg-color-surface-0: #141417;
--tg-color-surface-1: #17171b;
--tg-color-surface-2: #1c1c21;
--tg-color-surface-3: #212127;
--tg-color-surface-4: #26262e;
--tg-color-surface-5: #2b2b34;
--tg-color-progressive: #f0801f;
--tg-color-progressive--hover: #ff9438;
--tg-color-progressive--active: #d9720f;
--tg-opacity-pattern: 0.05;
}

/* Do not invert edit button icon (contrast) - always dark, so always apply */
#ca-edit .citizen-ui-icon::before,
#ca-ve-edit .citizen-ui-icon::before {
filter: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--tg-font-family-heading);
}

/* Wordmark size */
img.mw-logo-wordmark {
height: 2rem;
}

@media screen and (min-width: 640px) {
img.mw-logo-wordmark {
height: 2.5rem;
}
}

/* Move page header to the bottom for the main page, matching the reference
wiki's layout */
.page-Hlavní_strana .citizen-body-container {
grid-template-areas:
"content"
"header"
"afterHeader"
"footer";
}

@media (hover: hover) {
.citizen-search
.citizen-dropdown-details:not([open])
> .citizen-dropdown-summary:hover::after {
content: "/";
position: absolute;
border: 1px solid var(--border-color-interactive);
border-radius: var(--border-radius--small);
min-width: var(--size-icon);
min-height: var(--size-icon);
padding: 0 var(--space-xxs);
background: var(--color-surface-1);
font-size: 0.65rem;
font-weight: var(--font-weight-medium);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
}

/* Menu: richer format with more hierarchy, matching the reference wiki */
.citizen-drawer__menu {
margin-bottom: 0;
padding-bottom: 0;
}

.mw-portlet-External {
position: sticky;
bottom: 0;
margin-top: var(--space-md);
padding: var(--space-xs) 0;
border-top: 1px solid var(--border-color-base);
background: var(--color-surface-1);
font-size: var(--font-size-x-small);
grid-column-start: 1;
white-space: nowrap;
}

@media screen and (min-width: 32.875rem) {
.mw-portlet-External {
grid-column-end: span 2;
}
}

.mw-portlet-External .citizen-menu__heading {
display: none;
}

.mw-portlet-External ul {
display: flex;
overflow: auto;
}

.mw-portlet-External .mw-list-item a {
gap: 0;
}

#pt-logout a {
background: rgba(240, 128, 31, 0.12);
}

#pt-logout a:hover {
background: rgba(240, 128, 31, 0.2);
}

.catlinks li > a.new:hover,
.catlinks li > a.new:hover:visited {
background-color: #420e1f;
}

#footer-icons a {
border: none;
background: none;
}

MediaWiki:Citizen.css - Historie editací

Draconia: fix light theme regression, lighten dark palette

Draconia: Draconia dark theme