MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 15: | Line 15: | ||
--brown: #a07040; | --brown: #a07040; | ||
--light-brown: #e8d4a0; | --light-brown: #e8d4a0; | ||
/* Font stacks. --font-indic is the one to use for anything the reader | |||
can transliterate: it keeps AdishilaDev for Devanagari and falls back | |||
to a matching Noto face for Tamil, Kannada, Telugu, Malayalam etc., | |||
so a transliterated heading or TOC entry keeps the same look instead | |||
of dropping to the browser's default font. */ | |||
--font-deva: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif; | |||
--font-indic: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', | |||
'Noto Serif Tamil', 'Noto Sans Tamil', | |||
'Noto Serif Kannada', 'Noto Sans Kannada', | |||
'Noto Serif Telugu', 'Noto Sans Telugu', | |||
'Noto Serif Malayalam', 'Noto Sans Malayalam', | |||
'Noto Serif Gujarati', 'Noto Sans Gujarati', | |||
'Noto Serif Bengali', 'Noto Sans Bengali', | |||
'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi', | |||
'Noto Serif Oriya', 'Noto Sans Oriya', serif; | |||
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; | |||
} | } | ||
| Line 228: | Line 245: | ||
/* ── 6. VECTOR TOC (desktop sidebar) ──────────────────────────── */ | /* ── 6. VECTOR TOC (desktop sidebar) ──────────────────────────── */ | ||
/* Levels are told apart by size, weight and colour; nesting is shown by | |||
indentation and a guide line. Every rule below uses the child | |||
combinator (>), so highlighting an entry never spills onto the | |||
sub-entries underneath it. */ | |||
.vector-toc .vector-toc-numb { display: none !important; } | .vector-toc .vector-toc-numb { display: none !important; } | ||
.vector-toc .vector-toc-title { | .vector-toc .vector-toc-title { | ||
| Line 233: | Line 254: | ||
text-transform: uppercase; letter-spacing: 0.08em; | text-transform: uppercase; letter-spacing: 0.08em; | ||
color: var(--text) !important; | color: var(--text) !important; | ||
font-family: | font-family: var(--font-indic) !important; | ||
} | } | ||
.vector-toc .vector-toc-text { | .vector-toc .vector-toc-text { | ||
white-space: normal !important; word-break: break-word !important; | white-space: normal !important; word-break: break-word !important; | ||
overflow-wrap: anywhere !important; display: inline !important; | overflow-wrap: anywhere !important; display: inline !important; | ||
font-family: | font-family: var(--font-indic) !important; | ||
} | } | ||
.vector-toc a, .vector-toc .vector-toc-link { | .vector-toc a, .vector-toc .vector-toc-link { | ||
display: block; | |||
font-family: | font-family: var(--font-indic) !important; | ||
color: var(--text) !important; text-decoration: none !important; | color: var(--text) !important; text-decoration: none !important; | ||
padding: 3px 8px; border-radius: 5px; line-height: 1.5; | |||
transition: background 0.12s, color 0.12s; | |||
} | |||
/* Level 1 = section heading, level 2+ = sub-sections */ | |||
.vector-toc .vector-toc-level-1 > .vector-toc-link { | |||
font-size: 1rem !important; font-weight: 600 !important; color: var(--text) !important; | |||
} | |||
.vector-toc .vector-toc-level-2 > .vector-toc-link { | |||
font-size: 0.92rem !important; font-weight: 400 !important; color: #4d4d4d !important; | |||
} | |||
.vector-toc .vector-toc-level-3 > .vector-toc-link, | |||
.vector-toc .vector-toc-level-4 > .vector-toc-link, | |||
.vector-toc .vector-toc-level-5 > .vector-toc-link { | |||
font-size: 0.86rem !important; font-weight: 400 !important; color: #6b6b6b !important; | |||
} | |||
/* Nesting: indent each level and run a guide line down it */ | |||
.vector-toc .vector-toc-contents, | |||
.vector-toc .vector-toc-list { list-style: none !important; } | |||
.vector-toc .vector-toc-contents { margin: 0 !important; padding: 0 !important; } | |||
.vector-toc .vector-toc-list-item .vector-toc-list { | |||
margin: 0 0 0 9px !important; padding-left: 10px !important; | |||
border-left: 1px solid #ece0da; | |||
} | |||
.vector-toc .vector-toc-list-item { margin: 1px 0 !important; list-style: none !important; } | |||
.vector-toc .vector-toc-link:hover { background: #fbf1ec; color: var(--orange) !important; } | |||
/* The one entry the reader is actually on */ | |||
.vector-toc .vector-toc-link.gr-toc-current, | |||
.vector-toc .vector-toc-link.gr-toc-current .vector-toc-text { | |||
color: var(--orange) !important; font-weight: 700 !important; | |||
} | |||
.vector-toc .vector-toc-link.gr-toc-current { | |||
background: #fdf1e9; box-shadow: inset 2px 0 0 var(--orange); | |||
} | |||
/* Its parent sections: darker text only, so the path is readable without | |||
the whole branch lighting up */ | |||
.vector-toc .vector-toc-list-item.gr-toc-in-path > .vector-toc-link { | |||
color: var(--text) !important; font-weight: 600 !important; | |||
} | } | ||
/* Vector's own active class can sit on a parent as well as the current | |||
.vector-toc .vector-toc-list-item-active .vector-toc-link, | item, which is what made whole branches highlight — neutralised here; | ||
.vector-toc .vector-toc-list-item-active .vector-toc-link * { | the gr-toc- classes above are the ones that carry the state. */ | ||
color: | .vector-toc .vector-toc-list-item-active > .vector-toc-link, | ||
.vector-toc .vector-toc-list-item-active > .vector-toc-link * { | |||
color: inherit; font-weight: inherit; | |||
} | } | ||
.vector-toc .cdx-button.vector-toc-toggle { | .vector-toc .cdx-button.vector-toc-toggle { | ||
| Line 259: | Line 323: | ||
.mw-parser-output .mw-heading h1, .mw-parser-output .mw-heading h2, | .mw-parser-output .mw-heading h1, .mw-parser-output .mw-heading h2, | ||
.mw-parser-output .mw-heading h3 { | .mw-parser-output .mw-heading h3 { | ||
font-family: | font-family: var(--font-indic); | ||
border: none !important; padding: 0 !important; background: none !important; | border: none !important; padding: 0 !important; background: none !important; | ||
} | } | ||
| Line 270: | Line 334: | ||
margin: 24px 0 4px !important; | margin: 24px 0 4px !important; | ||
border-bottom: 2px dotted var(--maroon) !important; | border-bottom: 2px dotted var(--maroon) !important; | ||
width: 75%; font-family: | width: 75%; font-family: var(--font-indic); text-align: center; | ||
} | } | ||
.mw-parser-output h3, .mw-parser-output .mw-heading3 h3 { | .mw-parser-output h3, .mw-parser-output .mw-heading3 h3 { | ||
| Line 277: | Line 341: | ||
margin: 24px 0 8px !important; | margin: 24px 0 8px !important; | ||
border-bottom: 1px dotted var(--orange) !important; | border-bottom: 1px dotted var(--orange) !important; | ||
width: 55%; font-family: | width: 55%; font-family: var(--font-indic); text-align: center; | ||
} | } | ||
| Line 287: | Line 351: | ||
font-size: 2em; font-weight: 500; color: var(--maroon); | font-size: 2em; font-weight: 500; color: var(--maroon); | ||
line-height: 1.4; margin: 0 0 16px; border: none !important; | line-height: 1.4; margin: 0 0 16px; border: none !important; | ||
text-align:center; font-family: | text-align:center; font-family: var(--font-indic); | ||
} | } | ||
| Line 490: | Line 554: | ||
border-radius: 6px; background: rgba(0,0,0,0.05); transition: background 0.15s; | border-radius: 6px; background: rgba(0,0,0,0.05); transition: background 0.15s; | ||
} | } | ||
.toc-main-link-item:hover { background: rgba(0,0,0,0.10) !important; } | .toc-main-link-item:hover { background: rgba(0,0,0,0.10) !important; opacity: 0.85; } | ||
/* ── 25. MAIN PAGE ─────────────────────────────────────────────── */ | /* ── 25. MAIN PAGE ─────────────────────────────────────────────── */ | ||
| Line 526: | Line 590: | ||
box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06); | box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06); | ||
padding: 0; min-width: 0; overflow: hidden; | padding: 0; min-width: 0; overflow: hidden; | ||
} | } | ||
.gr-home-card-title { | .gr-home-card-title { | ||
display: flex; align-items: center; justify-content: center; gap: 10px; | display: flex; align-items: center; justify-content: center; gap: 10px; | ||
| Line 571: | Line 633: | ||
.gr-home-card.gr-home-card-wide li { break-inside: avoid; } | .gr-home-card.gr-home-card-wide li { break-inside: avoid; } | ||
} | } | ||
/* ── 26. TOGGLE BUTTONS ────────────────────────────────────────── */ | /* ── 26. TOGGLE BUTTONS ────────────────────────────────────────── */ | ||