MediaWiki:Common.css: Difference between revisions
No edit summary |
m use css vars |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* TypeGG Design System */ | /* TypeGG Design System */ | ||
:root { | |||
--typegg-base: #00031B; | |||
--typegg-base-2: #05081F; | |||
--typegg-base-4: #0A0D24; | |||
--typegg-text: #CCCDD1; | |||
--typegg-text-emphasis: #FFFFFF; | |||
--typegg-text-subtle: #91939D; | |||
--typegg-cyan: #00B3E4; | |||
--typegg-cyan-hover: #33C5ED; | |||
--typegg-purple: #BC50F7; | |||
--typegg-red: #E40000; | |||
--typegg-green: #00E47D; | |||
--typegg-yellow: #E4E000; | |||
} | |||
html.skin-theme-clientpref-night { | html.skin-theme-clientpref-night { | ||
--background-color-base | --background-color-neutral-subtle: var(--typegg-base) !important; | ||
--background-color- | --background-color-base: var(--typegg-base-2) !important; | ||
--background-color-interactive-subtle: | --background-color-interactive-subtle: var(--typegg-base-4) !important; | ||
--color-base: | --color-base: var(--typegg-text) !important; | ||
--color-emphasized: | --color-emphasized: var(--typegg-text-emphasis) !important; | ||
--color-subtle: | --color-subtle: var(--typegg-text-subtle) !important; | ||
--color-placeholder: | --color-placeholder: var(--typegg-text-subtle) !important; | ||
--color-progressive: | --color-progressive: var(--typegg-cyan) !important; | ||
--color-progressive--hover: | --color-progressive--hover: var(--typegg-cyan-hover) !important; | ||
--color-visited: | --color-visited: var(--typegg-purple) !important; | ||
--color-destructive: | --color-destructive: var(--typegg-red) !important; | ||
--color-success: | --color-success: var(--typegg-green) !important; | ||
--color-warning: | --color-warning: var(--typegg-yellow) !important; | ||
} | } | ||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os { | html.skin-theme-clientpref-os { | ||
--background-color-base | --background-color-neutral-subtle: var(--typegg-base) !important; | ||
--background-color- | --background-color-base: var(--typegg-base-2) !important; | ||
--background-color-interactive-subtle: | --background-color-interactive-subtle: var(--typegg-base-4) !important; | ||
--color-base: | --color-base: var(--typegg-text) !important; | ||
--color-emphasized: | --color-emphasized: var(--typegg-text-emphasis) !important; | ||
--color-subtle: | --color-subtle: var(--typegg-text-subtle) !important; | ||
--color-placeholder: | --color-placeholder: var(--typegg-text-subtle) !important; | ||
--color-progressive: | --color-progressive: var(--typegg-cyan) !important; | ||
--color-progressive--hover: | --color-progressive--hover: var(--typegg-cyan-hover) !important; | ||
--color-visited: | --color-visited: var(--typegg-purple) !important; | ||
--color-destructive: | --color-destructive: var(--typegg-red) !important; | ||
--color-success: | --color-success: var(--typegg-green) !important; | ||
--color-warning: | --color-warning: var(--typegg-yellow) !important; | ||
} | } | ||
} | } | ||
Latest revision as of 14:44, 17 January 2026
/* TypeGG Design System */
:root {
--typegg-base: #00031B;
--typegg-base-2: #05081F;
--typegg-base-4: #0A0D24;
--typegg-text: #CCCDD1;
--typegg-text-emphasis: #FFFFFF;
--typegg-text-subtle: #91939D;
--typegg-cyan: #00B3E4;
--typegg-cyan-hover: #33C5ED;
--typegg-purple: #BC50F7;
--typegg-red: #E40000;
--typegg-green: #00E47D;
--typegg-yellow: #E4E000;
}
html.skin-theme-clientpref-night {
--background-color-neutral-subtle: var(--typegg-base) !important;
--background-color-base: var(--typegg-base-2) !important;
--background-color-interactive-subtle: var(--typegg-base-4) !important;
--color-base: var(--typegg-text) !important;
--color-emphasized: var(--typegg-text-emphasis) !important;
--color-subtle: var(--typegg-text-subtle) !important;
--color-placeholder: var(--typegg-text-subtle) !important;
--color-progressive: var(--typegg-cyan) !important;
--color-progressive--hover: var(--typegg-cyan-hover) !important;
--color-visited: var(--typegg-purple) !important;
--color-destructive: var(--typegg-red) !important;
--color-success: var(--typegg-green) !important;
--color-warning: var(--typegg-yellow) !important;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--background-color-neutral-subtle: var(--typegg-base) !important;
--background-color-base: var(--typegg-base-2) !important;
--background-color-interactive-subtle: var(--typegg-base-4) !important;
--color-base: var(--typegg-text) !important;
--color-emphasized: var(--typegg-text-emphasis) !important;
--color-subtle: var(--typegg-text-subtle) !important;
--color-placeholder: var(--typegg-text-subtle) !important;
--color-progressive: var(--typegg-cyan) !important;
--color-progressive--hover: var(--typegg-cyan-hover) !important;
--color-visited: var(--typegg-purple) !important;
--color-destructive: var(--typegg-red) !important;
--color-success: var(--typegg-green) !important;
--color-warning: var(--typegg-yellow) !important;
}
}