MediaWiki:Common.css: Difference between revisions
mNo edit summary |
m theme toggle match with styling |
||
| Line 2: | Line 2: | ||
/* ===== OOO Tab Scroll — minimal, production-safe ===== */ | /* ===== OOO Tab Scroll — minimal, production-safe ===== */ | ||
/* | /* ========================================================= | ||
OOO THEME TOKENS (GLOBAL BASE) | |||
========================================================= */ | |||
:root { | :root { | ||
/* ===== OOO Tab System ===== */ | /* ===== OOO Tab System ===== */ | ||
--ooo-tab-arrow-size: 22px; | --ooo-tab-arrow-size: 22px; | ||
| Line 12: | Line 16: | ||
--ooo-tab-arrow-border: var(--border-color-base, #a2a9b1); | --ooo-tab-arrow-border: var(--border-color-base, #a2a9b1); | ||
--ooo-tab-arrow-shadow: none; | --ooo-tab-arrow-shadow: none; | ||
--ooo-tab-arrow-focus: 0 0 0 2px rgba( | --ooo-tab-arrow-focus: 0 0 0 2px rgba(245,196,0,.4); | ||
/* ===== OOO | /* ===== OOO Brand Accent (Default Fallback) ===== */ | ||
--ooo-accent: #f5c400; | --ooo-accent: #f5c400; | ||
/* ===== Structural Tokens ===== */ | |||
--ooo-border: var(--border-color-base, #a2a9b1); | --ooo-border: var(--border-color-base, #a2a9b1); | ||
--ooo-bg-block: var(--background-color-base, #ffffff); | --ooo-bg-block: var(--background-color-base, #ffffff); | ||
} | |||
/* ========================================================= | |||
BRAND ACCENT TUNING PER THEME | |||
========================================================= */ | |||
/* Light theme — deeper yellow for better contrast on white */ | |||
.skin-theme-clientpref-day { | |||
--ooo-accent: #c49a00; | |||
} | |||
/* Dark theme — brighter industrial yellow */ | |||
.skin-theme-clientpref-night { | |||
--ooo-accent: #f5c400; | |||
} | |||
/* OS-controlled dark mode */ | |||
@media (prefers-color-scheme: dark) { | |||
.skin-theme-clientpref-os { | |||
--ooo-accent: #f5c400; | |||
} | |||
} | } | ||
| Line 396: | Line 422: | ||
/* ========================================================= | /* ========================================================= | ||
OOO SECTION TITLE (Brand Industrial Clean) | OOO SECTION TITLE (Brand Yellow Industrial Clean) | ||
========================================================= */ | ========================================================= */ | ||
| Line 403: | Line 429: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
gap: 1. | gap: 1.25rem; | ||
font-size: 1. | font-size: 1.7rem; | ||
font-weight: | font-weight: 800; | ||
margin: 5rem 0 2.5rem 0; | margin: 5rem 0 2.5rem 0; | ||
letter-spacing: 0.6px; | letter-spacing: 0.6px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
color: | |||
/* Brand color, but theme-safe */ | |||
color: var(--ooo-accent); | |||
} | } | ||
| Line 418: | Line 446: | ||
flex: 1; | flex: 1; | ||
height: 2px; | height: 2px; | ||
/* Uses currentColor so it always matches the title */ | |||
background: linear-gradient( | background: linear-gradient( | ||
to right, | to right, | ||
transparent, | transparent, | ||
currentColor 50%, | |||
transparent | transparent | ||
); | ); | ||
opacity: 0. | opacity: 0.55; | ||
} | } | ||