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 |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* |
|||
* Aurora Space Theme - MediaWiki Citizen Skin |
|||
* Organized CSS structure |
|||
*/ |
|||
/* ============================== |
|||
* 1. FONTS AND BASE SETUP |
|||
* ============================== */ |
|||
/* 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; |
|||
} |
|||
} |
|||
/* Black theme */ |
|||
:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 { |
|||
--tg-color-surface-0: #000; |
|||
--tg-color-surface-1: #111; |
|||
--tg-color-surface-2: #222; |
|||
--tg-color-surface-3: #333; |
|||
--tg-color-surface-4: #444; |
|||
--tg-color-surface-5: #555; |
|||
--delta-hover-state: 6%; |
|||
--shadow-strength: 0.04; |
|||
} |
|||
@media screen and (prefers-color-scheme: dark) { |
|||
:root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 { |
|||
--tg-color-surface-0: #000; |
|||
--tg-color-surface-1: #111; |
|||
--tg-color-surface-2: #222; |
|||
--tg-color-surface-3: #333; |
|||
--tg-color-surface-4: #444; |
|||
--tg-color-surface-5: #555; |
|||
--delta-hover-state: 6%; |
|||
--shadow-strength: 0.04; |
|||
} |
|||
} |
|||
/* ============================== |
|||
* 3. TYPOGRAPHY & TEXT STYLES |
|||
* ============================== */ |
|||
/* Base typography settings */ |
|||
* { |
|||
transition: color 0.3s; |
|||
} |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
font-family: var(--tg-font-family-heading); |
|||
} |
|||
/* Theme-specific content styling */ |
|||
.skin-theme-clientpref-night blockquote p { |
|||
color: #bbbbbb; |
|||
} |
|||
.skin-theme-clientpref-light blockquote p { |
|||
color: #555555; |
|||
} |
|||
.skin-theme-clientpref-night figure.mw-default-size figcaption { |
|||
color: #cccccc; |
|||
} |
|||
.skin-theme-clientpref-light figure.mw-default-size figcaption { |
|||
color: #aaaaaa; |
|||
} |
|||
@media screen and (prefers-color-scheme: dark) { |
|||
:root.skin-theme-clientpref-os figure.mw-default-size figcaption { |
|||
color: #cccccc; |
|||
} |
|||
} |
|||
/* Keep content area text readable with shadow */ |
|||
.citizen-body p, |
|||
.citizen-body li, |
|||
.citizen-body h1, |
|||
.citizen-body h2, |
|||
.citizen-body h3, |
|||
.citizen-body h4, |
|||
.citizen-body h5, |
|||
.citizen-body h6 { |
|||
color: var(--tg-color-base); |
|||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
|||
} |
|||
/* ============================== |
|||
* 4. LINK STYLING |
|||
* ============================== */ |
|||
/* Base link styling */ |
|||
a { |
|||
color: var(--link-color); |
|||
transition: color 0.3s; |
|||
} |
|||
a:visited { |
|||
color: var(--link-color); |
|||
} |
|||
a:hover { |
|||
color: var(--link-color); |
|||
} |
|||
a:active { |
|||
color: var(--link-color); |
|||
} |
|||
a.new { |
|||
color: #6a38b3 !important; /* Purple for new pages */ |
|||
} |
|||
/* External link icon */ |
|||
a.extiw::after { |
|||
display: inline-block; |
|||
width: 0.75em; |
|||
height: 0.75em; |
|||
margin-left: 0.125em; |
|||
content: ''; |
|||
background-color: currentcolor; |
|||
-webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+) |
|||
no-repeat 50% 50%; |
|||
mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+) |
|||
no-repeat 50% 50%; |
|||
-webkit-mask-size: contain; |
|||
mask-size: contain; |
|||
} |
|||
/* Don't show external link icon in plainlinks */ |
|||
.plainlinks a.external::after { |
|||
display: none; |
|||
} |
|||