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 174: | Line 174: | ||
/* ---------------------------------------------------------------------------- | /* ---------------------------------------------------------------------------- | ||
SV utility: hover lift (micro-interaction) | SV utility: hover lift (micro-interaction) | ||
---------------------------------------------------------------------------- */ | ---------------------------------------------------------------------------- */ | ||
.sv-hover-lift{ | .sv-hover-lift{ | ||
transition:transform 0.15s ease-in-out; | |||
will-change:transform; | |||
} | } | ||
.sv-hover-lift:hover{ | .sv-hover-lift:hover{ | ||
transform:translateY(-2px); | |||
} | } | ||
@media (prefers-reduced-motion: reduce){ | @media (prefers-reduced-motion: reduce){ | ||
.sv-hover-lift{transition:none;} | |||
.sv-hover-lift:hover{transform:none;} | |||
} | } | ||
| Line 211: | Line 206: | ||
} | } | ||
/* Optional size modifiers | /* Optional size modifiers */ | ||
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;} | .sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;} | ||
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;} | .sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;} | ||
| Line 261: | Line 256: | ||
/* ---------------------------------------------------------------------------- | /* ---------------------------------------------------------------------------- | ||
4) Legacy safety blocks (kept, | 4) Legacy safety blocks (kept, unified to tokens) | ||
---------------------------------------------------------------------------- */ | ---------------------------------------------------------------------------- */ | ||
| Line 611: | Line 606: | ||
} | } | ||
/* Notes button: solid | /* Notes button: solid */ | ||
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes{ | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes{ | ||
display:inline-flex; | display:inline-flex; | ||
| Line 852: | Line 847: | ||
/* --------------------------------------------------------------------------- | /* --------------------------------------------------------------------------- | ||
SV Shared Utilities (global) | SV Shared Utilities (global) | ||
- Used by GameInfo + | - Used by GameInfo + bot-rendered modules | ||
--------------------------------------------------------------------------- */ | --------------------------------------------------------------------------- */ | ||
/* | /* Visibility contract (JS toggles these) */ | ||
.sv-hidden, | .sv-hidden, | ||
.mw-parser-output .sv-hidden { | .mw-parser-output .sv-hidden{ | ||
display:none !important; | |||
} | } | ||
[hidden] { | [hidden]{display:none !important;} | ||
} | |||
/* Missing icon fallback badge (“?”) */ | /* Missing icon fallback badge (“?”) */ | ||
.sv-miss, | .sv-miss, | ||
.mw-parser-output .sv-miss { | .mw-parser-output .sv-miss{ | ||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
width:18px; | |||
height:18px; | |||
border-radius:var(--sv-ui-rad-pill); | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg3); | |||
color:var(--sv-ui-text1); | |||
font-weight:900; | |||
font-size:12px; | |||
line-height:1; | |||
} | } | ||
/* Generic image wrapper | /* Generic image wrapper */ | ||
.sv-img, | .sv-img, | ||
.mw-parser-output .sv-img { | .mw-parser-output .sv-img{ | ||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
} | } | ||
.sv-img img, | .sv-img img, | ||
.mw-parser-output .sv-img img { | .mw-parser-output .sv-img img{ | ||
display:block; | |||
max-width:100%; | |||
height:auto; | |||
border-radius:var(--sv-ui-rad-sm); | |||
} | } | ||
/* Optional: shadow variant | /* Optional: shadow variant */ | ||
.sv-img--shadow img, | .sv-img--shadow img, | ||
.mw-parser-output .sv-img--shadow img { | .mw-parser-output .sv-img--shadow img{ | ||
box-shadow:0 10px 18px rgba(0,0,0,0.35); | |||
} | } | ||
/* --------------------------------------------------------------------------- | /* --------------------------------------------------------------------------- | ||
SV Tabs (shared component) | SV Tabs (shared component) | ||
--------------------------------------------------------------------------- */ | --------------------------------------------------------------------------- */ | ||
.sv-tabs, | .sv-tabs, | ||
.mw-parser-output .sv-tabs { | .mw-parser-output .sv-tabs{ | ||
margin:10px 0 0; | |||
} | } | ||
.sv-tabs-list, | .sv-tabs-list, | ||
.mw-parser-output .sv-tabs-list { | .mw-parser-output .sv-tabs-list{ | ||
display:flex; | |||
gap:8px; | |||
flex-wrap:wrap; | |||
margin:0 0 10px 0; | |||
padding:0; | |||
} | } | ||
.sv-tab, | .sv-tab, | ||
.mw-parser-output .sv-tab { | .mw-parser-output .sv-tab{ | ||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
border-radius:var(--sv-ui-rad-pill); | |||
padding:7px 10px; | |||
border:1px solid var(--sv-ui-line2); | |||
background:var(--sv-ui-bg2); | |||
color:var(--sv-ui-text1); | |||
font-weight:900; | |||
font-size:13px; | |||
cursor:pointer; | |||
user-select:none; | |||
} | } | ||
.sv-tab:hover, | .sv-tab:hover, | ||
.mw-parser-output .sv-tab:hover { | .mw-parser-output .sv-tab:hover{ | ||
background:var(--sv-ui-bg3); | |||
} | } | ||
.sv-tab[aria-selected="true"], | .sv-tab[aria-selected="true"], | ||
.mw-parser-output .sv-tab[aria-selected="true"] { | .mw-parser-output .sv-tab[aria-selected="true"]{ | ||
background:var(--sv-ui-bg3); | |||
border-color:var(--sv-ui-accent); | |||
} | } | ||
.sv-tabpanel, | .sv-tabpanel, | ||
.mw-parser-output .sv-tabpanel { | .mw-parser-output .sv-tabpanel{ | ||
padding:10px 12px; | |||
border-radius:var(--sv-ui-rad-md); | |||
border:1px solid var(--sv-ui-line1); | |||
background:var(--sv-ui-bg1); | |||
} | } | ||
/* --------------------------------------------------------------------------- | /* --------------------------------------------------------------------------- | ||
SV Disclosure (shared | SV Disclosure (shared source markup) | ||
- | - Hidden source popups live in the DOM; Universal Popups clones their content. | ||
--------------------------------------------------------------------------- */ | --------------------------------------------------------------------------- */ | ||
.sv-disclose, | .sv-disclose, | ||
.mw-parser-output .sv-disclose { | .mw-parser-output .sv-disclose{position:relative;} | ||
} | |||
.sv-disclose-btn, | .sv-disclose-btn, | ||
.mw-parser-output .sv-disclose-btn { | .mw-parser-output .sv-disclose-btn{ | ||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
gap:12px; | |||
width:100%; | |||
padding:10px 12px; | |||
border-radius:var(--sv-ui-rad-md); | |||
border:1px solid var(--sv-ui-line1); | |||
background:var(--sv-ui-bg1); | |||
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); | |||
background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)); | |||
color:var(--sv-ui-text1); | |||
font-weight:900; | |||
cursor:pointer; | |||
user-select:none; | |||
} | } | ||
.sv-disclose-btn:hover, | .sv-disclose-btn:hover, | ||
.mw-parser-output .sv-disclose-btn:hover { | .mw-parser-output .sv-disclose-btn:hover{ | ||
background:var(--sv-ui-bg2); | |||
} | } | ||
.sv-disclose-count, | .sv-disclose-count, | ||
.mw-parser-output .sv-disclose-count { | .mw-parser-output .sv-disclose-count{ | ||
font-weight:800; | |||
font-size:13px; | |||
color:var(--sv-ui-text3); | |||
white-space:nowrap; | |||
} | } | ||
/* | /* ====================================================================== */ | ||
/* LEGACY POPUP STYLES (deprecated) */ | |||
/* */ | |||
/* Kept temporarily for older markup patterns. Delete this section after */ | |||
/* migration if no pages rely on these classes. */ | |||
/* ====================================================================== */ | |||
/* Legacy tooltip shells (suppressed when Universal Popups is active) */ | |||
/* .sv-def-tip, .sv-pop-tip may still exist as leftover markup in content */ | |||
.sv- | |||
/* ============================================================================ | /* ============================================================================ | ||
SV Universal | SV Universal Popups v3.1 | ||
- Popup B aesthetic, site-wide | - Popup B aesthetic, site-wide | ||
- Compact width: popups grow vertically (mobile-friendly) | - Compact width: popups grow vertically (mobile-friendly) | ||
- Header centered + larger | - Header centered + larger | ||
- Linked definitions: header title can be a real link (Popups/PagePreviews-friendly) | - Linked definitions: header title can be a real link (Popups/PagePreviews-friendly) | ||
- JS adds .sv-uipop-v3 to <html> when enabled | - JS adds .sv-uipop-v3 to <html> when enabled | ||
| Line 1,082: | Line 1,011: | ||
.sv-uipop-v3 .sv-def-tip, | .sv-uipop-v3 .sv-def-tip, | ||
.sv-uipop-v3 .sv-pop-tip{ | .sv-uipop-v3 .sv-pop-tip{ | ||
display:none !important; | |||
} | } | ||
| Line 1,092: | Line 1,021: | ||
.sv-uipop-title, | .sv-uipop-title, | ||
.sv-uipop-title-link{ | .sv-uipop-title-link{ | ||
-webkit-touch-callout:none; | |||
-webkit-user-select:none; | |||
user-select:none; | |||
touch-action:manipulation; | |||
} | } | ||
| Line 1,101: | Line 1,030: | ||
.sv-disclose-btn *, | .sv-disclose-btn *, | ||
.sv-uipop-head *{ | .sv-uipop-head *{ | ||
-webkit-user-select:none; | |||
user-select:none; | |||
} | } | ||
| Line 1,108: | Line 1,037: | ||
.sv-uipop{ | .sv-uipop{ | ||
position:fixed; | |||
z-index:9000; /* stays above page UI; allows Popups/PagePreviews to overlay if needed */ | |||
top:0; | |||
left:0; | |||
box-sizing:border-box; | |||
border-radius:var(--sv-ui-rad-lg); | |||
border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2)); | |||
background:var(--sv-ui-pop-bg, var(--sv-ui-bg0)); | |||
background-image: | |||
radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%), | |||
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00)); | |||
color:var(--sv-ui-text1); | |||
box-shadow:var(--sv-ui-pop-shadow, 0 10px 30px rgba(0,0,0,0.35)), | |||
inset 0 1px 0 rgba(255,255,255,0.04); | |||
overflow:hidden; | |||
} | } | ||
.sv-uipop[aria-hidden="true"]{ display:none; } | .sv-uipop[aria-hidden="true"]{display:none;} | ||
/* | /* Compact width for all popups; height differs by mode */ | ||
.sv-uipop--sm, | .sv-uipop--sm, | ||
.sv-uipop--lg{ | .sv-uipop--lg{ | ||
width:240px; | |||
max-width:calc(100vw - 20px); | |||
} | } | ||
.sv-uipop--sm{max-height:min(45vh, 320px);} | |||
.sv-uipop--sm{ | .sv-uipop--lg{max-height:min(70vh, 560px);} | ||
} | |||
/* Header: centered title */ | |||
/* Header | |||
.sv-uipop-head{ | .sv-uipop-head{ | ||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
padding:12px 12px; | |||
border-bottom:1px solid var(--sv-ui-line1); | |||
background:var(--sv-ui-bg1); | |||
} | } | ||
.sv-uipop-head--clickable{ cursor:pointer; } | .sv-uipop-head--clickable{cursor:pointer;} | ||
.sv-uipop-title{ | .sv-uipop-title{ | ||
width:100%; | |||
text-align:center; | |||
font-weight:900; | |||
font-size:16px; | |||
letter-spacing:0.02em; | |||
color:var(--color-emphasized, var(--sv-ui-text1)); | |||
} | } | ||
/* Header title link (Definitions with data-sv-def-link) */ | /* Header title link (Definitions with data-sv-def-link) */ | ||
.sv-uipop-title a.sv-uipop-title-link{ | .sv-uipop-title a.sv-uipop-title-link{ | ||
color:inherit; | |||
text-decoration:none; | |||
} | } | ||
.sv-uipop-title a.sv-uipop-title-link:hover{ | .sv-uipop-title a.sv-uipop-title-link:hover{ | ||
text-decoration:underline; | |||
text-decoration-thickness:2px; | |||
text-underline-offset:2px; | |||
} | } | ||
/* Body */ | /* Body */ | ||
.sv-uipop-body{ | .sv-uipop-body{ | ||
padding:10px 12px 12px; | |||
font-size:13px; | |||
line-height:1.4; | |||
color:var(--sv-ui-text2); | |||
overflow:auto; | |||
overflow-wrap:anywhere; | |||
word-break:break-word; | |||
-webkit-user-select:text; | |||
user-select:text; | |||
} | } | ||
.sv-uipop-body--pre{ white-space:pre-line; } | .sv-uipop-body--pre{white-space:pre-line;} | ||
/* Normalize common blocks inside popup body | /* Normalize common blocks inside popup body */ | ||
.sv-uipop-body p, | .sv-uipop-body p, | ||
.sv-uipop-body ul, | .sv-uipop-body ul, | ||
.sv-uipop-body ol{ | .sv-uipop-body ol{margin:0;} | ||
} | |||
.sv-uipop-body ul, | .sv-uipop-body ul, | ||
.sv-uipop-body ol{ | .sv-uipop-body ol{padding-left:1.15em;} | ||
} | |||
.sv-uipop-body li{ | .sv-uipop-body li{margin:0;} | ||
} | |||
/* Links in popups */ | /* Links in popups */ | ||
.sv-uipop a{ | .sv-uipop a{ | ||
color:var(--color-link, var(--sv-ui-accent)); | |||
text-decoration:underline; | |||
text-decoration-thickness:2px; | |||
text-underline-offset:2px; | |||
} | } | ||
.sv-uipop a:hover{ text-decoration-thickness:3px; } | .sv-uipop a:hover{text-decoration-thickness:3px;} | ||
/* Normalize | /* Normalize list styling for Users/Requirements clones */ | ||
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){ | .sv-uipop :where(.sv-disclose-list, .sv-uipop-list){ | ||
margin:0; | |||
padding:0; | |||
list-style:none; | |||
} | } | ||
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{ | .sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{ | ||
padding:6px 0; | |||
border-top:1px solid var(--sv-ui-line1); | |||
font-size:13px; | |||
color:var(--sv-ui-text2); | |||
} | } | ||
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{ | .sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{ | ||
border-top:none; | |||
padding-top:0; | |||
} | } | ||
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){ | .sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){ | ||
padding-top:10px; | |||
font-weight:900; | |||
font-size:12px; | |||
letter-spacing:0.02em; | |||
color:var(--sv-ui-text1); | |||
} | } | ||