Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Content deleted Content added
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Citizen skin */ |
|||
/* |
|||
* Aurora Space Theme - MediaWiki Citizen Skin |
|||
* Organized CSS structure |
|||
*/ |
|||
/* ============================== |
|||
* 1. FONTS AND BASE SETUP |
|||
* ============================== */ |
|||
/* Font import */ |
/* Font import */ |
||
@font-face { |
@font-face { |
||
font-family: 'Afacad-Regular'; |
|||
src: url('https://wiki.arcitex.net/images/fonts/Afacad-Regular.ttf') format('truetype'); |
|||
} |
} |
||
/* Base theme variables */ |
|||
:root { |
: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/Dark Mode Support */ |
|||
/* ============================== |
|||
* 2. THEME COLOR VARIABLES |
|||
* ============================== */ |
|||
/* Dark mode styles */ |
|||
:root.skin-theme-clientpref-night { |
|||
--color-surface-0: #02022b; |
|||
--color-base: #e0e0e0; |
|||
--color-base--emphasized:#66ccff ; |
|||
--color-base--subtle: #999999; |
|||
} |
|||
/* Light mode styles */ |
/* Light mode styles */ |
||
:root.skin-theme-clientpref-light { |
:root.skin-theme-clientpref-light { |
||
--color-surface-0: #ffffff; |
|||
--color-base: #333333; |
|||
--color-base--emphasized: #0077cc; |
|||
--color-base--subtle: #777777; |
|||
--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; |
transition: color 0.3s; |
||
} |
} |
||
/* Normal links */ |
|||
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 { |
a { |
||
color: #f72a57; |
|||
transition: color 0.3s; |
|||
} |
} |
||
/* Visited links */ |
|||
a:visited { |
a:visited { |
||
color: #f72a57; |
|||
} |
} |
||
/* Links when hovered */ |
|||
a:hover { |
a:hover { |
||
color: #f72a57; |
|||
} |
} |
||
/* Active (clicked) links */ |
|||
a:active { |
a:active { |
||
color: #f72a57; |
|||
} |
} |
||
/* New page links */ |
|||
a.new { |
a.new { |
||
color: #6A38B3 !important; |
|||
} |
} |
||
.skin-theme-clientpref-night blockquote p { |
|||
/* Don't show external link icon in plainlinks */ |
|||
color: #bbbbbb; |
|||
.plainlinks a.external::after { |
|||
display: none; |
|||
} |
} |
||
.skin-theme-clientpref-light blockquote p { |
|||
/* ============================== |
|||
color: #555555; |
|||
* 5. BACKGROUND & CONTAINER STYLING |
|||
* ============================== */ |
|||
/* Base container structure */ |
|||
.citizen-page-container, |
|||
.citizen-body-container { |
|||
position: relative; |
|||
} |
} |
||
.skin-theme-clientpref-night figure.mw-default-size figcaption { |
|||
/* Setup main background container */ |
|||
color: #cccccc; |
|||
.citizen-page-container { |
|||
background: none; /* Remove any default background */ |
|||
position: relative; |
|||
min-height: 100vh; |
|||
overflow-x: hidden; /* Prevent horizontal scroll */ |
|||
} |
} |
||
.skin-theme-clientpref-light figure.mw-default-size figcaption { |
|||
/* Separate gradient overlay on top of background */ |
|||
color: #aaaaaa; |
|||
.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 |
|||
* ============================== */ |
|||
/* 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); |
|||
} |
|||
/* Main page specific layout */ |
|||
.page-Main_Page .citizen-body-container { |
|||
grid-template-areas: |
|||
'content' |
|||
'header' |
|||
'afterHeader' |
|||
'footer'; |
|||
} |
} |
||
Revision as of 19:09, 19 July 2025
/* All CSS here will be loaded for users of the Citizen skin */
/* Font import */
@font-face {
font-family: 'Afacad-Regular';
src: url('https://wiki.arcitex.net/images/fonts/Afacad-Regular.ttf') format('truetype');
}
:root {
--font-family-base: 'Afacad-Regular', sans-serif;
--font-size-base: 1rem;
}
/* Light/Dark Mode Support */
/* Dark mode styles */
:root.skin-theme-clientpref-night {
--color-surface-0: #02022b;
--color-base: #e0e0e0;
--color-base--emphasized:#66ccff ;
--color-base--subtle: #999999;
}
/* Light mode styles */
:root.skin-theme-clientpref-light {
--color-surface-0: #ffffff;
--color-base: #333333;
--color-base--emphasized: #0077cc;
--color-base--subtle: #777777;
}
* {
transition: color 0.3s;
}
/* Normal links */
a {
color: #f72a57;
transition: color 0.3s;
}
/* Visited links */
a:visited {
color: #f72a57;
}
/* Links when hovered */
a:hover {
color: #f72a57;
}
/* Active (clicked) links */
a:active {
color: #f72a57;
}
/* New page links */
a.new {
color: #6A38B3 !important;
}
.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;
}