MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 2: | Line 2: | ||
/* Role: shared tokens, primitives, utilities, and interactive anatomy */ | /* Role: shared tokens, primitives, utilities, and interactive anatomy */ | ||
/* Scope: sitewide SpiritVale UI foundations only */ | /* Scope: sitewide SpiritVale UI foundations only */ | ||
/* -------------------------------------------------------------------------- */ | |||
/* Canonical ownership map */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* Common.css is the sitewide foundation layer. It owns: */ | |||
/* - canonical breakpoint definitions and responsive policy comments */ | |||
/* - shared design tokens and utility primitives */ | |||
/* - reusable interactive anatomy used by multiple modules/templates */ | |||
/* - global parser-output treatments that should behave the same everywhere */ | |||
/* */ | |||
/* Common.css does NOT own: */ | |||
/* - Citizen skin theme/chrome styling (Citizen.css) */ | |||
/* - module-specific card/layout rules (GameInfo, PatchHighlights, etc.) */ | |||
/* - template-specific presentation rules (Definitions, ClassInfobox, etc.) */ | |||
/* */ | |||
/* Responsive cleanup note: this file is the source of truth for breakpoint */ | |||
/* meaning. Its own responsive selectors should model the canonical ladder */ | |||
/* and shared UI should follow that ladder everywhere else. */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* Responsive policy (canonical) */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* SpiritVale uses a mobile-first six-viewpoint ladder aligned to Tailwind's */ | |||
/* defaults. */ | |||
/* */ | |||
/* Viewpoints */ | |||
/* - default: 0px-639px (phones / smallest layout) */ | |||
/* - sm: 640px-767px (large phones / small tablets) */ | |||
/* - md: 768px-1023px(tablets / narrow landscape) */ | |||
/* - lg: 1024px-1279px(laptop / desktop start) */ | |||
/* - xl: 1280px-1535px(wide desktop) */ | |||
/* - 2xl: 1536px+ (very wide desktop) */ | |||
/* */ | |||
/* Implementation rule: write defaults for the smallest layout whenever */ | |||
/* practical, then layer upward with canonical breakpoints. */ | |||
/* -------------------------------------------------------------------------- */ | |||
/* -------------------------------------------------------------------------- */ | /* -------------------------------------------------------------------------- */ | ||
| Line 303: | Line 338: | ||
display:inline-block; | display:inline-block; | ||
font-weight:900; | font-weight:900; | ||
font-size: | font-size:12px; | ||
line-height:1.25; | line-height:1.25; | ||
letter-spacing:0.15px; | letter-spacing:0.15px; | ||
| Line 314: | Line 349: | ||
display:inline-block; | display:inline-block; | ||
font-weight:900; | font-weight:900; | ||
font-size: | font-size:12px; | ||
line-height:1.25; | line-height:1.25; | ||
letter-spacing:0.15px; | letter-spacing:0.15px; | ||
| Line 350: | Line 385: | ||
flex:0 0 auto; | flex:0 0 auto; | ||
order:2; | order:2; | ||
min-width: | min-width:28px; | ||
padding: | padding:1px 7px; | ||
border-radius:var(--sv-ui-rad-pill); | border-radius:var(--sv-ui-rad-pill); | ||
border:1px solid var(--sv-ui-pill-line); | border:1px solid var(--sv-ui-pill-line); | ||
| Line 359: | Line 394: | ||
color:var(--sv-ui-text2); | color:var(--sv-ui-text2); | ||
font-weight:900; | font-weight:900; | ||
font-size: | font-size:12px; | ||
line-height:1.25; | line-height:1.25; | ||
letter-spacing:0.15px; | letter-spacing:0.15px; | ||
| Line 861: | Line 896: | ||
/* -------------------------------------------------------------------------- */ | /* -------------------------------------------------------------------------- */ | ||
/* 11) Responsive */ | /* 11) Responsive */ | ||
/* -------------------------------------------------------------------------- */ | /* -------------------------------------------------------------------------- */ | ||
/* default (<640px): compact end value and helper text. */ | |||
/* sm and up (>=640px): restore the standard control sizing. */ | |||
@media ( | @media (min-width:640px){ | ||
.sv-level-endvalue, | .sv-level-endvalue, | ||
.mw-parser-output .sv-level-endvalue{ | .mw-parser-output .sv-level-endvalue{ | ||
padding: | padding:2px 8px; | ||
min-width: | min-width:30px; | ||
font-size: | font-size:13px; | ||
line-height:1.25; | line-height:1.25; | ||
} | } | ||
| Line 877: | Line 914: | ||
.mw-parser-output .sv-level-label[data-sv-helper-text]::after, | .mw-parser-output .sv-level-label[data-sv-helper-text]::after, | ||
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{ | .mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{ | ||
font-size: | font-size:13px; | ||
} | } | ||
} | } | ||