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 |
||
| (27 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Citizen skin */ |
|||
/** |
|||
* Background images |
|||
*/ |
|||
@media screen { |
|||
/* Hero image */ |
|||
.citizen-page-container:before { |
|||
background-image: url(/images/Banner2.png); |
|||
background-position: 70% center; |
|||
} |
|||
/* Site header image */ |
|||
.citizen-header:before { |
|||
background-image: url(/images/Artboard_1.png); |
|||
} |
|||
} |
|||
/* A-Space */ |
|||
@media screen and (min-width: 1120px) { |
|||
.mw-body::before { |
|||
background-image: url(/w/images/f/f1/Middle_Earth_Map_-_Mapome_-_No_label.svg); |
|||
} |
|||
} |
|||
/* Font import */ |
|||
@font-face { |
|||
font-family: 'Afacad-Regular'; |
|||
src: url('/images/fonts/Afacad-Regular.ttf') format('truetype'); |
|||
} |
|||
/** |
|||
* 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; |
|||
} |
|||
/* 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; |
|||
--color-primary: #0077cc !important; |
|||
--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; |
|||
--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; |
|||
--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-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; |
|||
--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; |
|||
--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; |
|||
} |
|||
} |
|||
/* Typography and Transitions */ |
|||
* { |
|||
transition: color 0.3s; |
|||
} |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
font-family: var(--tg-font-family-heading); |
|||
} |
|||
/* 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 */ |
|||
} |
|||
/* 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; |
|||
} |
|||
/* Do not invert edit button icon in dark mode because of contrast */ |
|||
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before, |
|||
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before { |
|||
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; |
|||
} |
|||
} |
|||
/* Shift sticky header trigger point by 100px */ |
|||
#citizen-page-header-sticky-sentinel { |
|||
transform: translateY(100px); |
|||
} |
|||
/** |
|||
* Background image handling - CLEANED UP |
|||
*/ |
|||
/* First, clear any conflicting background styles */ |
|||
.citizen-page-container::before, |
|||
.citizen-page-container::after, |
|||
.citizen-body-container::after, |
|||
.mw-body::before { |
|||
content: none; /* Reset all pseudo-elements */ |
|||
} |
|||
/* Main container setup */ |
|||
.citizen-page-container { |
|||
position: relative; |
|||
min-height: 100vh; |
|||
z-index: 0; |
|||
} |
|||
/* Classic wiki background with fade effect */ |
|||
body { |
|||
position: relative; |
|||
background-color: var(--tg-color-surface-0); |
|||
background-image: url('/images/97kkmoki2rx21.png'); |
|||
background-position: center top; |
|||
background-repeat: no-repeat; |
|||
background-size: contain; /* Only as large as the image naturally is */ |
|||
background-attachment: fixed; /* Keep image in place when scrolling */ |
|||
} |
|||
/* Add the fade overlay at the bottom of the background image */ |
|||
body::after { |
|||
content: ''; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 100vh; |
|||
background: linear-gradient(to bottom, transparent 50%, var(--tg-color-surface-0) 100%); |
|||
z-index: -1; |
|||
pointer-events: none; |
|||
} |
|||
/* Banner at the top of pages */ |
|||
.citizen-header { |
|||
position: relative; |
|||
} |
|||
.citizen-header::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 100px; /* Adjust based on your banner height */ |
|||
background-image: url('/images/Banner2.png'); |
|||
background-position: center top; |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
z-index: -1; |
|||
} |
|||
/* Make glass effect work with the new background setup */ |
|||
.citizen-body { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
backdrop-filter: blur(12px); |
|||
-webkit-backdrop-filter: blur(12px); |
|||
border-radius: 10px; |
|||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15); |
|||
border: 1px solid rgba(255, 255, 255, 0.15); |
|||
margin: 0.5rem; |
|||
padding: 1rem; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
/* Dark mode adjustment */ |
|||
.skin-theme-clientpref-night .citizen-body { |
|||
background: rgba(10, 10, 53, 0.35); |
|||
border: 1px solid rgba(100, 100, 255, 0.1); |
|||
} |
|||
/* Move page header to the bottom for main page */ |
|||
.page-Main_Page .citizen-body-container { |
|||
grid-template-areas: |
|||
'content' |
|||
'header' |
|||
'afterHeader' |
|||
'footer'; |
|||
} |
|||
@media (hover: hover) { |
|||
/* |
|||
* Search button tooltip |
|||
* This is temporary until tooltip is fully implemented upstream at Citizen |
|||
*/ |
|||
.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 |
|||
* Rich format menu to have more hierarchy |
|||
*/ |
|||
/* Remove bottom spacing as it is handled in footer portlet */ |
|||
.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; |
|||
} |
|||
/* Label */ |
|||
.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; |
|||
} |
|||
/* 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); |
|||
} |
|||
.citizen-body__sidebar { |
|||
background: transparent; |
|||
backdrop-filter: none; |
|||
-webkit-backdrop-filter: none; |
|||
box-shadow: none; |
|||
border: none; |
|||
margin: 0; |
|||
} |
|||
/* Add blurred glass effect to the citizen-body class only */ |
|||
.citizen-body { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
backdrop-filter: blur(12px); |
|||
-webkit-backdrop-filter: blur(12px); |
|||
border-radius: 10px; |
|||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15); |
|||
border: 1px solid rgba(255, 255, 255, 0.15); |
|||
margin: 0.5rem; |
|||
padding: 1rem; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
/* Adjust for dark mode */ |
|||
.skin-theme-clientpref-night .citizen-body { |
|||
background: rgba(10, 10, 53, 0.35); |
|||
border: 1px solid rgba(100, 100, 255, 0.1); |
|||
} |
|||
/* Keep the content area text readable */ |
|||
.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); |
|||
} |
|||