Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Content deleted Content added
No edit summary Tag: Reverted |
Blanked the page Tags: Blanking Manual revert |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Font import */ |
|||
@font-face { |
|||
font-family: 'Afacad-Regular'; |
|||
src: url('/images/fonts/Afacad-Regular.ttf') format('truetype'); |
|||
} |
|||
/* Base theme variables */ |
|||
:root { |
|||
--font-family-base: 'Afacad-Regular', sans-serif; |
|||
--font-size-base: 1rem; |
|||
--tg-inscription-size: 8px; |
|||
--opacity-icon-base: 0.7; |
|||
--link-color: #f72a57; |
|||
} |
|||
/* ============================== |
|||
* 2. THEME COLOR VARIABLES |
|||
* ============================== */ |
|||
/* Light mode styles */ |
|||
:root.skin-theme-clientpref-light { |
|||
--tg-color-base: #333333; |
|||
--tg-color-emphasized: #0077cc; |
|||
--tg-color-subtle: #777777; |
|||
--tg-color-surface-0: #ffffff; |
|||
--tg-color-surface-1: #f8f9fa; |
|||
--tg-color-surface-2: #eaecf0; |
|||
--tg-color-surface-3: #c8ccd1; |
|||
--tg-color-surface-4: #a2a9b1; |
|||
--tg-border-color-base: rgba(0, 0, 0, 0.05); |
|||
--tg-border-color-subtle: rgba(0, 0, 0, 0.02); |
|||
--tg-border-color-interactive: rgba(0, 0, 0, 0.08); |
|||
--tg-opacity-pattern: 0.1; |
|||
--tg-color-inverted-progressive: #000; /* Ensure contrast */ |
|||
--color-primary: #0077cc !important; /* Consistent primary color */ |
|||
--color-primary--hover: #0055aa !important; |
|||
--color-primary--active: #003388 !important; |
|||
} |
|||
/* Dark theme */ |
|||
:root.skin-theme-clientpref-night { |
|||
--tg-color-base: #e0e0e0; |
|||
--tg-color-emphasized: #66ccff; |
|||
--tg-color-subtle: #999999; |
|||
--tg-color-inverted-progressive: #000; |
|||
--tg-color-surface-0: #02022b; /* Space theme dark blue */ |
|||
--tg-color-surface-1: #0a0a35; |
|||
--tg-color-surface-2: #13133e; |
|||
--tg-color-surface-3: #1c1c47; |
|||
--tg-color-surface-4: #252550; |
|||
--tg-color-surface-5: #2e2e59; |
|||
--tg-border-color-base: rgba(255, 255, 255, 0.05); |
|||
--tg-border-color-subtle: rgba(255, 255, 255, 0.02); |
|||
--tg-border-color-interactive: rgba(255, 255, 255, 0.08); |
|||
--tg-opacity-pattern: 0.05; |
|||
--color-primary: #66ccff !important; /* Consistent primary color */ |
|||
--color-primary--hover: #44aaff !important; |
|||
--color-primary--active: #2288dd !important; |
|||
} |
|||
/* Auto theme */ |
|||
@media screen and (prefers-color-scheme: dark) { |
|||
:root.skin-theme-clientpref-os { |
|||
--tg-color-base: #e0e0e0; |
|||
--tg-color-emphasized: #66ccff; |
|||
--tg-color-subtle: #999999; |
|||
--tg-border-color-base: rgba(255, 255, 255, 0.05); |
|||
--tg-border-color-subtle: rgba(255, 255, 255, 0.02); |
|||
--tg-border-color-interactive: rgba(255, 255, 255, 0.08); |
|||
--tg-color-base: #e0e0e0; |
|||
--tg-color-emphasized: #66ccff; |
|||
--tg-color-subtle: #999999; |
|||
--tg-color-inverted-progressive: #000; |
|||
--tg-color-surface-0: #02022b; /* Space theme dark blue */ |
|||
--tg-color-surface-1: #0a0a35; |
|||
--tg-color-surface-2: #13133e; |
|||
--tg-color-surface-3: #1c1c47; |
|||
--tg-color-surface-4: #252550; |
|||
--tg-color-surface-5: #2e2e59; |
|||
--tg-opacity-pattern: 0.05; |
|||
--color-primary: #66ccff !important; /* Consistent primary color */ |
|||
--color-primary--hover: #44aaff !important; |
|||
--color-primary--active: #2288dd !important; |
|||
} |
|||
} |
|||