Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Content deleted Content added
Tag: Undo |
Blanked the page Tags: Blanking Manual revert |
||
| (7 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; |
|||
} |
|||
/* ============================== |
|||
* 5. BACKGROUND & CONTAINER STYLING |
|||
* ============================== */ |
|||
/* Base container structure */ |
|||
.citizen-page-container, |
|||
.citizen-body-container { |
|||
position: relative; |
|||
} |
|||
/* Background image handling - SIMPLIFIED APPROACH */ |
|||
@media screen { |
|||
/* Site header image - FIXED POSITION AT TOP LEFT */ |
|||
.citizen-header::before { |
|||
content: ''; |
|||
background-image: url(/images/Artboard_1.png); |
|||
background-position: top left; /* Position at top left corner */ |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 200px; /* Set specific width to avoid stretching */ |
|||
height: 100%; |
|||
opacity: 0.8; |
|||
z-index: 2; |
|||
pointer-events: none; |
|||
} |
|||
} |
|||
/* Setup main background container */ |
|||
.citizen-page-container { |
|||
background: none; /* Remove any default background */ |
|||
position: relative; |
|||
min-height: 100vh; |
|||
overflow-x: hidden; /* Prevent horizontal scroll */ |
|||
} |
|||
/* COMPLETE BACKGROUND IMAGE REWRITE */ |
|||
.citizen-page-container::before { |
|||
content: ''; |
|||
position: fixed; /* Fix to viewport */ |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
/* Background with gradient explicitly at bottom */ |
|||
background: url('/images/97kkmoki2rx21.png') center/cover no-repeat fixed; |
|||
z-index: -1; |
|||
pointer-events: none; |
|||
} |
|||
/* Separate gradient overlay on top of background */ |
|||
.citizen-page-container::after { |
|||
content: ''; |
|||
position: fixed; /* Fixed to viewport */ |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; /* Position at bottom */ |
|||
height: 50vh; /* Take up bottom half of viewport */ |
|||
background: linear-gradient(to bottom, transparent, rgba(2, 2, 43, 0.8) 100%); |
|||
z-index: -1; |
|||
pointer-events: none; |
|||
} |
|||
/* THEME-SPECIFIC ADJUSTMENTS */ |
|||
/* Light mode fixes */ |
|||
.skin-theme-clientpref-light .citizen-body { |
|||
background: rgba(255, 255, 255, 0.35); /* Increased opacity for light mode */ |
|||
border: 1px solid rgba(255, 255, 255, 0.25); |
|||
} |
|||
/* Dark mode glass effect */ |
|||
.skin-theme-clientpref-night .citizen-body { |
|||
background: rgba(10, 10, 53, 0.5); /* Increased opacity for dark mode */ |
|||
border: 1px solid rgba(100, 100, 255, 0.15); |
|||
} |
|||
/* Auto theme glass effect consistency */ |
|||
@media screen and (prefers-color-scheme: dark) { |
|||
:root.skin-theme-clientpref-os .citizen-body { |
|||
background: rgba(10, 10, 53, 0.5); |
|||
border: 1px solid rgba(100, 100, 255, 0.15); |
|||
} |
|||
} |
|||
@media screen and (prefers-color-scheme: light) { |
|||
:root.skin-theme-clientpref-os .citizen-body { |
|||
background: rgba(255, 255, 255, 0.35); |
|||
border: 1px solid rgba(255, 255, 255, 0.25); |
|||
} |
|||
} |
|||
/* Reset inner elements */ |
|||
.mw-body, |
|||
.citizen-body__sidebar { |
|||
background: transparent; |
|||
backdrop-filter: none; |
|||
-webkit-backdrop-filter: none; |
|||
box-shadow: none; |
|||
border: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
/* ============================== |
|||
* 7. HEADER & NAVIGATION |
|||
* ============================== */ |
|||
/* Wordmark sizing */ |
|||
img.mw-logo-wordmark { |
|||
height: 2rem; |
|||
} |
|||
/* Shift sticky header trigger point */ |
|||
#citizen-page-header-sticky-sentinel { |
|||
transform: translateY(100px); |
|||
} |
|||
/* Edit button icons in dark mode */ |
|||
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before, |
|||
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before { |
|||
filter: brightness(2); /* Make icons light in dark mode */ |
|||
opacity: 1; |
|||
} |
|||
@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: brightness(2); /* Make icons light in dark mode */ |
|||
opacity: 1; |
|||
} |
|||
} |
|||
/* Ensure edit buttons are the same height */ |
|||
#ca-edit, |
|||
#ca-ve-edit { |
|||
height: 2.5rem !important; /* Force consistent height */ |
|||
min-width: 2.5rem !important; /* Force consistent width */ |
|||
display: inline-flex !important; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
/* Make sure the icons inside buttons align properly */ |
|||
#ca-edit .citizen-ui-icon, |
|||
#ca-ve-edit .citizen-ui-icon { |
|||
height: 1.5rem !important; |
|||
width: 1.5rem !important; |
|||
display: flex !important; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
#ca-edit .citizen-ui-icon::before, |
|||
#ca-ve-edit .citizen-ui-icon::before { |
|||
height: 100% !important; |
|||
width: 100% !important; |
|||
} |
|||
/* Fix icons in both light and dark mode */ |
|||
/* Light mode icons (dark appearance) */ |
|||
.skin-theme-clientpref-light #ca-edit .citizen-ui-icon::before, |
|||
.skin-theme-clientpref-light #ca-ve-edit .citizen-ui-icon::before { |
|||
filter: none; /* No filter in light mode - icons are naturally dark */ |
|||
opacity: 0.8; |
|||
} |
|||
/* Dark mode icons (light appearance) */ |
|||
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before, |
|||
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before { |
|||
filter: invert(1); /* Proper inversion for dark mode - guaranteed white */ |
|||
opacity: 1; |
|||
} |
|||
/* Auto theme respecting OS preference */ |
|||
@media screen and (prefers-color-scheme: light) { |
|||
.skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before, |
|||
.skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before { |
|||
filter: none; |
|||
opacity: 0.8; |
|||
} |
|||
} |
|||
@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: invert(1); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
/* Search tooltip */ |
|||
@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; |
|||
} |
|||
} |
|||
/* ============================== |
|||
* 8. MENU & SIDEBAR STYLING |
|||
* ============================== */ |
|||
/* Drawer menu */ |
|||
.citizen-drawer__menu { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
/* External links portlet */ |
|||
.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; |
|||
} |
|||
.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; |
|||
} |
|||
/* Sidebar labels */ |
|||
.citizen-drawer__menu [id^='n-sidebar-label-'] a { |
|||
pointer-events: none; |
|||
margin-left: var(--space-xs); |
|||
padding-left: var(--space-md); |
|||
padding-right: var(--space-xs); |
|||
border-left: 1px solid var(--border-color-base); |
|||
border-radius: 0; |
|||
letter-spacing: 0.05em; |
|||
font-weight: var(--font-weight-normal); |
|||
color: var(--color-base--subtle) !important; |
|||
} |
|||
/* Sidebar icons */ |
|||
.citizen-drawer__menu [id^='n-sidebar-icon-'] a { |
|||
font-size: 0; |
|||
content-visibility: auto; |
|||
} |
|||
.citizen-drawer__menu [id^='n-sidebar-icon-'] a:before { |
|||
display: block; |
|||
content: ''; |
|||
width: var(--size-icon); |
|||
height: var(--size-icon); |
|||
background: transparent center/contain no-repeat; |
|||
opacity: var(--opacity-icon-base); |
|||
filter: var(--filter-invert); |
|||
} |
|||
/* Specific social icons */ |
|||
#n-sidebar-icon-discord a:before { |
|||
background-image: url(https://tolkiengateway.net/w/images/7/77/Discord_-_Simple_Icons.svg); |
|||
} |
|||
#n-sidebar-icon-bluesky a:before { |
|||
background-image: url(https://tolkiengateway.net/w/images/8/8b/Bluesky_-_Simple_Icons.svg); |
|||
} |
|||
#n-sidebar-icon-x a:before { |
|||
background-image: url(https://tolkiengateway.net/w/images/2/27/X_-_Simple_Icons.svg); |
|||
} |
|||
#n-sidebar-icon-facebook a:before { |
|||
background-image: url(https://tolkiengateway.net/w/images/c/c8/Facebook_-_Simple_Icons.svg); |
|||
} |
|||
#n-sidebar-icon-reddit a:before { |
|||
background-image: url(https://tolkiengateway.net/w/images/e/e8/Reddit_-_Simple_Icons.svg); |
|||
} |
|||
#n-sidebar-icon-instagram a:before { |
|||
background-image: url(https://tolkiengateway.net/w/images/b/b9/Instagram_-_Simple_Icons.svg); |
|||
} |
|||
#n-sidebar-icon-youtube a:before { |
|||
background-image: url(https://tolkiengateway.net/w/images/1/1f/YouTube_-_Simple_Icons.svg); |
|||
} |
|||
/* ============================== |
|||
* 9. PAGE LAYOUTS |
|||
* ============================== */ |
|||
/* Main page specific layout */ |
|||
.page-Main_Page .citizen-body-container { |
|||
grid-template-areas: |
|||
'content' |
|||
'header' |
|||
'afterHeader' |
|||
'footer'; |
|||
} |
|||
/* ============================== |
|||
* 10. RESPONSIVE DESIGN |
|||
* ============================== */ |
|||
/* Small screens (mobile) */ |
|||
@media screen and (max-width: 1024px) { |
|||
.citizen-page-container::after { |
|||
background-position: 60% center; |
|||
} |
|||
} |
|||
/* Medium screens */ |
|||
@media screen and (min-width: 640px) { |
|||
img.mw-logo-wordmark { |
|||
height: 2.5rem; |
|||
} |
|||
} |
|||
/* External portlet on small screens */ |
|||
@media screen and (min-width: 32.875rem) { |
|||
.mw-portlet-External { |
|||
grid-column-end: span 2; |
|||
} |
|||
} |
|||
/* Large screens (desktop) */ |
|||
@media screen and (min-width: 1120px) { |
|||
:root { |
|||
--tg-inscription-size: 32px; |
|||
} |
|||
/* Header adjustments */ |
|||
.citizen-header { |
|||
padding-top: 36px; |
|||
} |
|||
.citizen-header::before { |
|||
background-position: top center; |
|||
mask-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent 64px); |
|||
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent 64px); |
|||
} |
|||
/* Page layout adjustments */ |
|||
.citizen-page-header, |
|||
.citizen-body-container { |
|||
padding-left: calc(var(--tg-inscription-size) + var(--padding-page)); |
|||
} |
|||
/* Header image visibility on large screens */ |
|||
.citizen-header::before { |
|||
width: 300px; /* Wider on larger screens */ |
|||
background-position: top left; |
|||
opacity: 0.8; |
|||
z-index: 2; |
|||
mask-image: none; /* REMOVE ANY MASKING */ |
|||
-webkit-mask-image: none; |
|||
} |
|||
} |
|||
/* Extra large screens */ |
|||
@media screen and (min-width: 1680px) { |
|||
:root { |
|||
--tg-inscription-size: 3vw; |
|||
} |
|||
} |
|||