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: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif !important;
   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: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif !important;
   font-family: var(--font-indic) !important;
}
}
.vector-toc a, .vector-toc .vector-toc-link {
.vector-toc a, .vector-toc .vector-toc-link {
   font-size: 1rem !important;
   display: block;
   font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif !important;
   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-toc a:hover { color: var(--light-orange) !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: var(--light-orange) !important; font-weight: 700 !important;
.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: 'Adishila', 'Noto Serif Devanagari', serif;
   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: 'AdishilaDev'; text-align: center;
   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: 'AdishilaDev'; text-align: center;
   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: 'AdishilaDev';
   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;
  transition: box-shadow 0.18s, transform 0.18s;
}
}
.gr-home-card:hover { box-shadow: 0 8px 22px rgba(60, 20, 10, 0.10); transform: translateY(-2px); }
.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; }
}
}
@media (hover: none) { .gr-home-card:hover { transform: none; box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06); } }


/* ── 26. TOGGLE BUTTONS ────────────────────────────────────────── */
/* ── 26. TOGGLE BUTTONS ────────────────────────────────────────── */