MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 2,916: | Line 2,916: | ||
.gra-bookmark-cite { | .gra-bookmark-cite { | ||
margin-top: 6px; | margin-top: 6px; | ||
font-family: var(--font- | /* --font-translit, not --font-indic. The reference is romanised - IAST | ||
author, IAST title, Latin site name and URL - and Gentium Book Plus | |||
is the only family here with a REAL italic face (Adishila, which | |||
--font-indic leads with, has none at this weight, so the italic title | |||
fell back to a synthetic slant or to nothing at all). Gentium's | |||
unicode-range covers Latin only, so a Devanagari fallback title still | |||
lands on Adishila further down the stack. */ | |||
font-family: var(--font-translit); | |||
font-synthesis: style; /* allow a slant for the Devanagari case */ | |||
font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px); | font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px); | ||
line-height: 1.5; color: #6b5b52; | line-height: 1.5; color: #6b5b52; | ||
| Line 2,936: | Line 2,944: | ||
} | } | ||
.gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; } | .gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; } | ||
.gra-bookmark-cite i { font-style: italic; } | .gra-bookmark-cite i, | ||
.gra-bookmark-cite em { font-style: italic; font-synthesis: style; } | |||
/* Where the bookmark sits in the text. A caption, not part of the | /* Where the bookmark sits in the text. A caption, not part of the | ||
Latest revision as of 12:07, 30 September 2026
/* ═══════════════════════════════════════════════════════════════════
MediaWiki:Common.css — Anandamakaranda
Clean rebuild — works on Vector (desktop) + Minerva (mobile)
═══════════════════════════════════════════════════════════════════ */
/* ── 1. CSS VARIABLES ──────────────────────────────────────────── */
:root {
--maroon: #be100e;
--orange: #e65100;
--light-orange: #f57c00;
--dark-gray: #555;
--light-gray: #eee;
--muted-gray: #888;
--text: #1a1a1a;
--brown: #a07040;
--light-brown: #e8d4a0;
/* Font stacks. --font-indic is the one to use for anything the reader
can transliterate. Every face in it is served from this site (§2a), so
a transliterated page looks the same on every machine instead of
falling back to whatever the visitor happens to have installed.
Order matters, not just membership: each face is limited by
unicode-range to the characters it should own, so the browser walks
the list and the first face that claims the character wins.
Gentium Book Plus → Latin only, i.e. the IAST reading
AdishilaDev → Devanagari, danda, and everything unclaimed
Noto Serif Tamil / Kannada / Telugu → their own blocks
Gentium sits first because IAST is Latin throughout: if Adishila led,
plain letters would come from Adishila and only the accented ones
(ā ī ṛ ṣ …) from Gentium, and the line would look patched together. */
/* The HEADING face - AdishilaDev. Used only by headings and the few
title-like labels listed further down, never by body text. */
--font-deva: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
/* The READING face. Adishila leads: this is what moola, bhashya, teeka
and every other run of body text is set in. AdishilaDev follows only
as a fallback, for the rare glyph the plain face lacks.
Gentium used to sit first here, so that IAST came out in one face -
but that also made it the first family asked for Devanagari, and any
locally-installed "Gentium Book Plus" answers for codepoints outside
the @font-face unicode-range, so the shlokas stopped being Adishila.
IAST now gets its Gentium from --font-translit, used only in that view.
Headings do NOT use this variable; they use --font-deva above. */
--font-indic: 'Adishila', 'AdishilaDev', '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;
/* Latin-first, for the IAST reading only: there plain letters and
accented ones must come from one face or the line looks patched. */
--font-translit: 'Gentium Book Plus', 'Adishila', 'AdishilaDev', serif;
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* ── 2. FONTS ──────────────────────────────────────────────────── */
/* font-display: swap on every face below. Without it the browser uses
`auto`, which in Chrome means a block period of up to three seconds
during which text in that font is INVISIBLE - the page has painted, the
layout is right, and the Sanskrit simply is not there yet. That reads as
a slow site even when the bytes arrive quickly. With swap the text is
painted immediately in the fallback and re-rendered when the face
arrives. */
@font-face {
font-family: "Adishila";
src: url("/resources/fonts/adishila/Adishila.ttf") format("truetype");
font-weight: normal; font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AdishilaBold";
src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");
font-weight: bold; font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AdishilaItalic";
src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");
font-weight: bold; font-style: italic;
font-display: swap;
}
@font-face {
font-family: "AdishilaDev";
src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
font-weight: normal; font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AdishilaDev";
src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
font-weight: bold; font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AdishilaDevGuru";
src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");
font-weight: bold; font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans Devanagari";
src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");
font-weight: normal; font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AdishilaVedic";
src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");
font-weight: normal; font-style: normal;
font-display: swap;
}
/* ── 2a. TRANSLITERATION FONTS ─────────────────────────────────── */
/* One face per script the reader can switch to, served from this site so
the page reads the same everywhere. Subset to the script's own block and
compressed to woff2, so each file is 30–110 KB and only the file for the
script actually on screen is ever downloaded.
Every face reports the same 105% above the baseline / 40% below, whatever
its own metrics say. That is what keeps the lines on one rhythm: without
it each script sat at its own height inside the line box, so a heading
jumped a few pixels the moment it was switched.
How large each script *draws* is handled separately, in §2b, by scaling
the text rather than the font file. Doing it there means it still works
when a font file is missing or slow — the text is scaled whatever face
ends up rendering it — and it leaves one number per script to tune
instead of three that have to be kept in proportion.
Install: put the nine .woff2 files in /resources/fonts/translit/ . */
/* Tamil — Noto Serif Tamil (SIL OFL) */
@font-face {
font-family: "Noto Serif Tamil";
src: url("/resources/fonts/translit/NotoSerifTamil-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0B80-0BFF, U+200C-200D;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
@font-face {
font-family: "Noto Serif Tamil";
src: url("/resources/fonts/translit/NotoSerifTamil-Bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
unicode-range: U+0B80-0BFF, U+200C-200D;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
/* Kannada — Noto Serif Kannada (SIL OFL) */
@font-face {
font-family: "Noto Serif Kannada";
src: url("/resources/fonts/translit/NotoSerifKannada-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0C80-0CFF, U+200C-200D;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
@font-face {
font-family: "Noto Serif Kannada";
src: url("/resources/fonts/translit/NotoSerifKannada-Bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
unicode-range: U+0C80-0CFF, U+200C-200D;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
/* Telugu — Noto Serif Telugu (SIL OFL) */
@font-face {
font-family: "Noto Serif Telugu";
src: url("/resources/fonts/translit/NotoSerifTelugu-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0C00-0C7F, U+200C-200D;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
@font-face {
font-family: "Noto Serif Telugu";
src: url("/resources/fonts/translit/NotoSerifTelugu-Bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
unicode-range: U+0C00-0C7F, U+200C-200D;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
/* IAST — Gentium Book Plus (SIL OFL). Chosen over a general-purpose serif
because it draws ṛ ṝ ḷ ḹ ṅ ñ ṭ ḍ ṇ ś ṣ ṃ ḥ m̐ as designed letters rather
than stacking a loose accent on a Latin one, which is what made the
romanised reading look ragged. The range stops short of U+0964-0965 on
purpose: the danda then always comes from the Devanagari face, so it is
one shape in every script. */
@font-face {
font-family: "Gentium Book Plus";
src: url("/resources/fonts/translit/GentiumBookPlus-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
@font-face {
font-family: "Gentium Book Plus";
src: url("/resources/fonts/translit/GentiumBookPlus-Bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
@font-face {
font-family: "Gentium Book Plus";
src: url("/resources/fonts/translit/GentiumBookPlus-Italic.woff2") format("woff2");
font-weight: 400; font-style: italic; font-display: swap;
unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
}
/* ── 2b. APPLYING THEM ─────────────────────────────────────────── */
/* Most rules below name an Adishila face directly, which is right for
Devanagari and useless for anything else: Adishila has no Tamil, Kannada
or Telugu letters, so a switched page fell through to the visitor's
default serif — a different font per machine, and often a different one
per line. common.js puts the chosen script on <html data-gr-script="…">,
so while a transliteration is showing, every span the switcher rewrote
moves onto --font-indic and picks up the faces above. Devanagari is the
no-attribute case and is left exactly as it was.
--gr-script-scale is how much smaller or larger that script has to be
drawn to read the same size as Devanagari. Kannada and Telugu draw taller
letters at the same font-size, Tamil wider and rounder, Gentium smaller;
left alone, switching script looked like the type size had changed.
THESE FOUR NUMBERS ARE THE KNOB: if a script still reads a shade large or
small next to Adishila on the live site, move its number a percent or two
and nothing else. It multiplies whatever size the reader has chosen with
A- / A+, so the two controls stay independent. */
:root { --gr-script-scale: 1; }
html[data-gr-script="ta"] { --gr-script-scale: 0.88; } /* தமிழ் */
html[data-gr-script="kn"] { --gr-script-scale: 0.86; } /* ಕನ್ನಡ */
html[data-gr-script="te"] { --gr-script-scale: 0.88; } /* తెలుగు */
html[data-gr-script="en"] { --gr-script-scale: 1.00; } /* IAST */
html[data-gr-script]:not([data-gr-script="deva"]) [data-deva],
html[data-gr-script]:not([data-gr-script="deva"]) .gr-sticky-title,
html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-section-title,
html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-snippet,
html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-group-name {
font-family: var(--font-indic) !important;
font-size: calc(1em * var(--gr-script-scale));
}
html[data-gr-script="en"] [data-deva],
html[data-gr-script="en"] .gr-sticky-title,
html[data-gr-script="en"] .gr-sr-section-title,
html[data-gr-script="en"] .gr-sr-snippet,
html[data-gr-script="en"] .gr-sr-group-name { font-family: var(--font-translit) !important; }
/* The bold and italic Adishila faces are separate families rather than
weights, so a transliterated prateeka or quotation has to ask for the
weight it wants instead. */
html[data-gr-script]:not([data-gr-script="deva"]) .gr-prateeka { font-weight: 700; }
html[data-gr-script]:not([data-gr-script="deva"]) .gr-mulaprateeka-block { font-style: italic; }
body {
background-color: #fff;
}
/* ── Icon base ──────────────────────────────────────────────────── */
.gra-icon {
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
/* comment.svg → Feedback (flag/report) */
.gra-icon-feedback { background-image: url('/images/feedback.svg'); }
/* notes.svg → Notes */
.gra-icon-note { background-image: url('/images/notes.svg'); }
.gra-icon-bookmark { background-image: url('/images/bookmark.svg'); }
.gra-icon-copy { background-image: url('/images/copy.svg'); }
.gra-icon-search { background-image: url('/images/search.svg'); }
.gra-icon-dismiss { background-image: url('/images/close.svg'); }
.gra-icon-prev { background-image: url('/images/prev.svg'); }
.gra-icon-next { background-image: url('/images/next.svg'); }
.gra-icon-footnote { background-image: url('/images/footnote.svg'); }
.gra-icon-sandarbha { background-image: url('/images/reference.svg'); }
#mw-content-text {
font-family: 'Adishila';
}
.mw-parser-output {
font-size: 22px;
line-height: 1.7;
color: #555;
max-width: 100%;
width: 100%;
margin: 0; padding: 0;
box-sizing: border-box;
}
// Danda marks wrap issue
.mw-parser-output { overflow-wrap: anywhere; }
/* ── 4. HIDE ELEMENTS (both skins) ────────────────────────────── */
/* Page title */
h1.firstHeading, #firstHeading, .mw-page-title-main { display: none !important; }
/* Footer */
#footer, .mw-footer, .vector-footer, .vector-footer-container,
footer, .minerva-footer { display: none !important; }
/* Categories */
.catlinks, #catlinks, .mw-normal-catlinks, .mw-hidden-catlinks { display: none !important; }
/* Edit section links */
.mw-editsection, .mw-editsection-bracket { display: none !important; }
/* Site notice */
#siteNotice { display: none !important; }
/* Watchlist */
li#pt-watchlist, li#pt-watchlist-kbd { display: none !important; }
/* Appearance panel */
#vector-appearance, #vector-appearance-pinned-container,
#vector-appearance-unpinned-container, .mw-portlet-appearance,
#p-appearance, [aria-controls="vector-appearance"] { display: none !important; }
/* Vector hamburger + sidebar */
#mw-sidebar-button, .vector-main-menu, .vector-main-menu-container,
.vector-main-menu-landmark, #vector-main-menu-dropdown { display: none !important; }
/* Vector search box (we use our own) */
#p-search, .vector-search-box, .vector-search-box-vue,
.vector-search-box-collapses { display: none !important; }
/* Vector page toolbar */
.vector-page-toolbar, .vector-page-toolbar-container { display: none !important; }
/* Vector page tools */
.vector-page-tools { display: none !important; }
/* Empty paragraphs */
.mw-parser-output p:empty,
.mw-parser-output > div > p:empty,
.mw-heading + p:empty,
.adhyaya-block + p:empty,
.verse-block + p:empty { display: none !important; margin: 0 !important; }
/* Empty divs */
.adhyaya-block:empty, .mw-parser-output div:empty { display: none !important; }
/* Cargo hidden */
.cargo-store-only { display: none !important; }
/* ── 5. VECTOR HEADER (desktop only) ──────────────────────────── */
.vector-header-container {
background: #b5451b !important;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.vector-header {
background: transparent !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.vector-header-start {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 12px;
}
.vector-header-end {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 16px;
margin-left: auto;
}
.mw-logo { display: flex !important; align-items: center; opacity: 1 !important; }
.mw-logo-icon { width: 24px; height: 24px; }
/* Site name */
.mw-logo-wordmark {
font-size: 0 !important;
white-space: nowrap;
display: flex !important;
flex-direction: column !important;
}
.mw-logo-wordmark::before {
content: 'Anandamakaranda';
font-size: 17px;
font-weight: 700;
color: #fff;
font-family: system-ui, -apple-system, sans-serif;
letter-spacing: -0.01em;
}
.mw-logo-wordmark::after {
content: "A Digital Archive of Dvaita Vedanta Literature";
display: block;
font-size: 11px;
font-weight: 400;
color: rgba(255,255,255,0.85);
letter-spacing: 0.3px;
margin-top: 1px;
font-family: sans-serif;
}
/* Header right links */
.vector-header-end > *:not(#p-search) { color: rgba(255,255,255,0.9) !important; }
.vector-user-links a { color: rgba(255,255,255,0.9) !important; }
/* User icon white */
.vector-user-menu-container .vector-icon svg,
.vector-user-menu-container .vector-icon svg path,
.vector-user-menu-container .vector-icon svg circle {
fill: #fff !important; stroke: #fff !important;
}
.vector-user-links .vector-user-menu-chevron .vector-icon svg,
.vector-user-links .vector-user-menu-chevron .vector-icon svg path {
fill: rgba(255,255,255,0.9) !important;
}
/* User dropdown — dark text on white card */
.vector-user-menu .mw-list-item a,
.vector-user-menu .vector-menu-content-list a,
#p-personal .vector-menu-content a,
.mw-portlet-personal .vector-menu-content a { color: #202122 !important; }
.vector-user-menu .mw-list-item a:hover { color: var(--light-orange) !important; }
/* Suppress Vector sticky header clone */
.vector-sticky-header { display: none !important; }
/* Suppress body top padding that Vector adds */
.mw-body { margin-top: 0 !important; padding-top: 0 !important; }
/* ── 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; }
/* The contents panel follows the reader toolbar's A- / A+ . The toolbar
publishes its size as --gr-font-size on <html>; everything below is a
ratio of it, so one click moves the body and the contents together. The
22px fallback is the toolbar's own default, for a page without one. */
.vector-toc {
--gr-toc: max(14px, calc(var(--gr-font-size, 22px) * 0.92));
}
.vector-toc .vector-toc-title {
font-size: 15px !important; font-weight: 700 !important;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text) !important;
font-family: var(--font-indic) !important;
}
.vector-toc .vector-toc-text {
white-space: normal !important; word-break: break-word !important;
overflow-wrap: anywhere !important; display: inline !important;
font-family: var(--font-indic) !important;
}
/* :not() keeps this off the मूलम् / उल्लेख buttons that sit in the same
panel — otherwise this rule reshaped them into flat contents links. */
.vector-toc a:not(.toc-main-link-item), .vector-toc .vector-toc-link {
display: block;
font-family: var(--font-indic) !important;
font-size: var(--gr-toc); color: var(--text) !important; text-decoration: none !important;
padding: 4px 8px; border-radius: 5px; line-height: 1.45;
transition: background 0.12s, color 0.12s;
}
/* Level 1 = section heading, level 2+ = sub-sections. Each is a ratio of
--gr-toc rather than a fixed px, so the levels keep their proportions at
every toolbar size; they are told apart by weight and colour as much as
by size. */
.vector-toc .vector-toc-level-1 > .vector-toc-link {
font-size: calc(var(--gr-toc) * 1.05) !important; font-weight: 600 !important; color: var(--text) !important;
}
.vector-toc .vector-toc-level-2 > .vector-toc-link {
font-size: calc(var(--gr-toc) * 0.95) !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: calc(var(--gr-toc) * 0.90) !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
item, which is what made whole branches highlight — neutralised here;
the gr-toc- classes above are the ones that carry the state. */
.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 {
background: none !important; border: none !important;
box-shadow: none !important; color: var(--text) !important;
}
/* ── 7. HEADINGS ───────────────────────────────────────────────── */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4,
.mw-parser-output .mw-heading h1, .mw-parser-output .mw-heading h2,
.mw-parser-output .mw-heading h3 {
font-family: var(--font-indic);
border: none !important; padding: 0 !important; background: none !important;
}
.mw-parser-output .mw-heading { border: none !important; margin: 0; padding: 0; }
.mw-heading, .mw-heading2, .mw-heading3 { text-align:center; }
.mw-parser-output h2, .mw-parser-output .mw-heading2 h2 {
font-size: 1.2em !important; font-weight: 500 !important;
color: var(--maroon) !important; line-height: 1.8;
margin: 24px 0 4px !important;
border-bottom: 2px dotted var(--maroon) !important;
width: 75%; font-family: var(--font-indic); text-align: center;
}
.mw-parser-output h3, .mw-parser-output .mw-heading3 h3 {
font-size: 1em !important; font-weight: 500 !important;
color: var(--orange) !important; line-height: 1.5;
margin: 24px 0 8px !important;
border-bottom: 1px dotted var(--orange) !important;
width: 55%; font-family: var(--font-indic); text-align: center;
}
/* ── 8. PARAGRAPHS ─────────────────────────────────────────────── */
.mw-parser-output p { margin: 0 0 0.35rem !important; }
/* ── 9. DOCUMENT TITLE ─────────────────────────────────────────── */
.gr-doc-title {
font-size: 2em; font-weight: 500; color: var(--maroon);
line-height: 1.4; margin: 0 0 16px; border: none !important;
text-align:center; font-family: var(--font-deva);
}
/* Headings take AdishilaDev (--font-deva) rather than the general Indic
stack, so the heading face is the same everywhere regardless of what
else a page mixes in. */
#mw-content-text h1, #mw-content-text h2, #mw-content-text h3,
#mw-content-text h4, #mw-content-text h5,
.mw-heading h1, .mw-heading h2, .mw-heading h3, .mw-heading h4,
.teeka-title, .gr-teeka-dropdown-header, .gr-sticky-title {
font-family: var(--font-deva);
}
/* ── 10. VERSE BLOCKS ──────────────────────────────────────────── */
.shloka-block { display: block; text-align: left; margin: 3px 0 0; padding-bottom: 0.5em; }
.shloka-line { display: block; font-style: normal; color: #333; line-height: 1.35; margin: 0;
font-family: var(--font-indic); }
.verse-block { display: block; margin: 6px 0 0; text-align: left; }
.verse-block .shloka-block { text-align: left; margin: 0; }
.verse-block .shloka-line {
display: block; font-weight: 500; line-height: 1.35; margin: 0; color: var(--maroon);
font-family: var(--font-indic);
}
.verse-block.normal .shloka-line { color: #555; }
.verse-block + p { display: none !important; margin: 0 !important; }
.mw-parser-output .verse-block,
.mw-parser-output .shloka-block { margin-top: 2px !important; margin-bottom: 2px !important; }
.gr-verse-text, .verse-line, .verse-text {
color: #b5451b; line-height: 1.5; display: block; margin: 0.1em 0;
}
.gr-verse-type-sutra .gr-verse-text,
.verse-block[data-type="sutra"] .verse-line { font-style: normal; font-weight: 600; color: #b5451b; }
/* ── 11. UVACHA ────────────────────────────────────────────────── */
.uvacha-block {
display: block; font-weight: bold; color: #c65;
margin: 0.5rem 0 0; padding: 2px 0 2px 12px;
border-left: 3px solid #c65; font-style: normal;
}
.uvacha-block + .verse-block { margin-top: 2px; }
.gr-uvaaca, .uvaaca {
color: #b5451b; font-weight: 600; font-size: 0.92em; margin: 0.5em 0 0.2em 0; display: block;
}
/* ── 12. BHASHYAM ──────────────────────────────────────────────── */
.bhashyam-block {
display: block; font-size: 1em; line-height: 1.6; color: #555;
padding: 0; border: none; background: transparent;
font-family: var(--font-indic);
}
.gr-bhashyam, .commentary-bhashyam {
color: #222; font-style: normal; line-height: 1.75; margin: 0.3em 0 0.5em 0;
}
.gr-leading-bhashya { color: #555; }
/* ── 13. PADYA ─────────────────────────────────────────────────── */
.padya-block {
display: block; font-size: 1em; line-height: 1.75; color: #c65 !important;
font-weight: 500; margin: 0.4em 0 0.6em 60px;
}
.gr-padapatha { font-size: 0.9em; color: #555; margin: 0.2em 0 0.3em 0.8em; }
/* ── 14. TEEKA ─────────────────────────────────────────────────── */
.teeka-block {
padding: 6px 10px 8px; margin: 0.3em 0; line-height: 1.6; color: #555; background: #fcf5f3;
border-radius: 12px;
font-family: var(--font-indic);
}
.teeka-title {
font-family: var(--font-indic) !important;
font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 4px; padding-bottom: 3px;
}
.teeka-body .shloka-block {
margin: 0.4em 0; padding: 0.3em 0.6em; font-family: var(--font-indic);
}
.teeka-body .shloka-line { font-size: 0.97em; font-family: var(--font-indic); }
/* ── 15. PRATEEKA / MOOLA ──────────────────────────────────────── */
.gr-prateeka { font-weight: bold; font-style: normal; color: #333; font-family: 'AdishilaBold' }
.gr-mulaprateeka-block {
font-family: 'AdishilaItalic';
text-align: center; color: #333; margin: 0.7em 0 0.3em; line-height: 1.5;
}
.gr-moola { font-weight: bold; color: #c65; }
/* ── 16. ADHYAYA ───────────────────────────────────────────────── */
.adhyaya-block { margin: 0 0 4px; }
.adhyaya-trans { font-size: 0.9em; color: #666; margin: 2px 0 0; }
.adhyaya-intro { margin-top: 8px; line-height: 1.75; color: #555; }
.introduction p { color: var(--dark-gray); font-weight: 400; margin: 0 !important; padding: 0 !important; }
.introduction { padding-bottom: 0.5em; text-align: justify; }
/* ── 17. NYAYA / PRASNA ────────────────────────────────────────── */
.nyaya-block { margin: 32px 0; padding-top: 12px; border-top: 1px solid #eee; }
.nyaya-title {
font-size: 1em; font-weight: 500; color: var(--orange);
margin-bottom: 0.4rem; border-bottom: 1px dotted var(--orange); width: 50%;
}
.nyaya-body { color: #555; line-height: 1.75; margin-top: 0.5rem; }
.prasna-block { margin: 32px 0; padding-top: 12px; border-top: 1px solid #eee; }
.prasna-title {
font-size: 1em; font-weight: 500; color: var(--orange);
margin-bottom: 0.4rem; border-bottom: 1px dotted var(--orange); width: 50%;
}
.prasna-question, .prasna-answer { color: #555; line-height: 1.75; margin-top: 0.5rem; }
.prasna-answer { margin-left: 60px; }
/* ── 18. VYAKHYA ELEMENTS ──────────────────────────────────────── */
.gr-vyakhya-head, .gr-section-head {
font-size: 0.9em; font-weight: 700; color: var(--orange);
margin: 0.35em 0 0.15em; font-family: inherit; border: none; padding: 0;
}
.gr-avataranika {
color: #444; margin: 0.2em 0 0.5em 0.5em;
padding-left: 0.6em; border-left: 2px solid #c9a96e; line-height: 1.6;
}
.gr-vyakhya-pada {
font-size: 0.88em; color: #555; background: #fafafa;
border: 1px solid #e8e0d0; border-radius: 4px; padding: 0.5em 0.8em;
margin: 0.5em 0; line-height: 1.5; white-space: pre-wrap;
}
.gr-vyakhya-gadya {
font-weight: bold;
}
.gr-vyakhya-para { margin: 0 0 0.5em 0; line-height: 1.65; color: #444; }
.gr-embedded-bhashya { margin: 0.2em 0 0.2em 1em; line-height: 1.6; }
.gr-gadya {
font-family: 'Adishila';font-weight: bold; display: block !important; margin-left: 0.2em;}
.gr-author-note {
font-style: italic; color: var(--maroon); text-align: center; font-size: 0.9em;
margin: 0.8em 0 0.4em 0; border-top: 1px solid #ddd; padding-top: 0.4em; font-family: var(--font-indic)
}
.gr-devatachandas {
font-size: 1em;
color: #f77628;
font-weight: 500;
margin-top: 10px;
text-align: center; }
.gr-vargikarana {
font-size: 1em;
color: #f77628;
font-weight: 500;
margin-top: 10px;
text-align: center; }
.gr-veda {
font-family: "AdishilaVedic";
}
/* ── 20. BHASHYA COLLECTION ────────────────────────────────────── */
.mw-parser-output .bhashya-collection { margin: 0; padding: 0; }
.mw-parser-output .bhashya + p:empty,
.mw-parser-output .verse + p:empty,
.mw-parser-output .bhashya-collection + p:empty,
.mw-parser-output .pramana + p:empty,
.mw-parser-output .author-note + p:empty { display: none !important; margin: 0 !important; height: 0 !important; }
/* ── 21. VERSE ACTIONS ─────────────────────────────────────────── */
.verse-actions {
display: flex; flex-direction: row; align-items: center;
gap: 6px; margin-top: 4px; justify-content: center;
}
.verse-action-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 4px; border-radius: 6px; cursor: pointer; opacity: 0.75; transition: all 0.2s;
}
.verse-action-btn:hover { opacity: 1; background-color: rgba(0,0,0,0.05); }
.icon { display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.icon-copy { background-image: url('/images/copy.svg'); }
.icon-commentary { background-image: url('/images/commentary.svg'); }
.copy-tooltip {
position: absolute; bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(4px);
white-space: nowrap; pointer-events: none; z-index: 9999;
display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
font-size: 0.75rem; font-weight: 500; background: rgba(30,30,30,0.82); color: #fff;
opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.copy-tooltip.copy-tooltip-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── 22. CODE / PRE ────────────────────────────────────────────── */
pre, code, .mw-code, tt, kbd {
font-family: 'Adishila', 'Noto Serif Devanagari', serif ;
background-color: transparent !important; border: none !important; padding: 0.3em 0 !important;
}
.mw-collapsible, .mw-collapsible-content, blockquote, .quotebox {
background-color: transparent !important; border: none !important;
font-style: normal !important; padding: 0 !important; margin-left: 0 !important;
}
/* ── 23. INLINE TOC BOX (wikitext __TOC__) ─────────────────────── */
.toc {
display: block !important; background: #fffdf5; border: 1px solid #e8c88a;
border-radius: 8px; padding: 12px 16px; margin: 0 0 24px 0;
width: fit-content; min-width: 220px; max-width: 420px;
font-size: 0.9em; line-height: 2;
}
.toc h2, .toc .toctitle {
font-size: 0.85em !important; font-weight: 600 !important; color: var(--text) !important;
border: none !important; margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: 0.05em;
}
.toc ul { margin: 0 !important; padding-left: 1.2em !important; list-style: none !important; }
.toc li { margin: 0; padding: 0; }
.toc a { color: var(--text) !important; text-decoration: none !important; }
.toc a:hover { color: var(--light-orange) !important; }
.toc .toclevel-1 > a { font-weight: 600; }
.tocnumber { display: none; }
/* ── 24. DOC TEEKAS + TOC NAV ──────────────────────────────────── */
.gr-doc-teekas { margin-bottom: 1em; }
.gr-doc-teekas + p:empty { display: none !important; margin: 0 !important; height: 0 !important; }
/* मूलम् / उल्लेख — real buttons, not grey chips: they are how a reader
moves between the text and its commentaries, so they read as actions.
Used by the desktop TOC and the mobile document nav alike. */
.toc-main-links {
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center;
margin: 6px 0 18px; padding: 0 0 16px; border-bottom: 1px solid #f1e3dc;
}
/* Sitting under the document title in the page, not in the panel */
#gr-toc-doc-nav.toc-main-links { margin: 10px auto 22px; max-width: 640px; }
.toc-main-link-item {
flex: 0 1 auto; min-width: 92px; text-align: center;
font-family: var(--font-indic); font-size: 18px; font-weight: 600; line-height: 1.4;
color: #fff !important; background: #b5451b; border: 0; border-radius: 999px;
padding: 9px 18px; text-decoration: none !important;
box-shadow: 0 1px 3px rgba(60, 20, 10, 0.22);
transition: background 0.15s, box-shadow 0.15s;
}
.toc-main-link-item:visited { color: #fff !important; }
.toc-main-link-item:hover,
.toc-main-link-item:focus-visible { background: #97370f !important; color: #fff !important; box-shadow: 0 2px 6px rgba(60, 20, 10, 0.26); }
/* Phone: the same buttons as a pill row under the document title, shaped
like the reader toolbar's controls. White on the brand colour, stated
with !important because the skin colours links on its own. */
.skin-minerva #gr-mob-doc-nav {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin: 4px 0 14px; padding: 0 12px 14px; border-bottom: 1px solid #f0e0d6;
}
.skin-minerva #gr-mob-doc-nav .toc-main-link-item { font-size: 17px; padding: 11px 26px; min-width: 116px; }
.skin-minerva .toc-main-link-item,
.skin-minerva .toc-main-link-item:visited,
.skin-minerva .toc-main-link-item:active { color: #fff !important; }
/* ── 25. MAIN PAGE ─────────────────────────────────────────────── */
body.page-Main_Page #mw-panel,
body.page-Main_Page .vector-sidebar-container { display: none !important; }
.gr-home { max-width: 1140px; margin: 0 auto; padding: 0 0 40px; }
.gr-home-page-title {
font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
text-align: center; font-size: 1.8em; font-weight: 500; color: #1a2e40; margin: 24px 0 32px;
}
/* Section label: centred, with a rule running out on each side */
.gr-home-group-label {
display: flex; align-items: center; gap: 16px;
font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
font-size: 1.1em; font-weight: 600; color: #1a2e40;
margin: 40px 0 18px; padding: 0; border: 0;
}
.gr-home-group-label::before,
.gr-home-group-label::after {
content: ""; flex: 1; height: 1px;
}
.gr-home-group-label::before { background: linear-gradient(90deg, transparent, #e2c3b9); }
.gr-home-group-label::after { background: linear-gradient(90deg, #e2c3b9, transparent); }
#gr-view-grantha > .gr-home-group-label:first-child { margin-top: 8px; }
/* Cards sit on a grid, so every row lines up */
.gr-home-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px; align-items: start; margin-bottom: 12px;
}
.gr-home-card {
background: #fff; border: 1px solid #efe4df; border-top: 3px solid #c0392b; border-radius: 10px;
box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06);
padding: 0; min-width: 0; overflow: hidden;
}
.gr-home-card-title {
display: flex; align-items: center; justify-content: center; gap: 10px;
font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
font-size: 1em; font-weight: 600; color: #1a2e40; text-align: center; line-height: 1.4;
margin: 0; padding: 12px 16px; background: #fcf6f3; border-bottom: 1px solid #f1e2dc;
}
.gr-home-card-count {
flex: none; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid #ecd3ca;
color: #c0392b; font: 600 11px/1.7 system-ui, sans-serif;
}
/* Numbered rows: number in a soft circle, a hairline between rows */
.gr-home-card ol { margin: 0; padding: 6px 0 8px; list-style: none; counter-reset: gr-item; }
/* Each row is a two-column grid: number | title. The number sits in the
title's own row and is centred on it, so it lines up whatever the font. */
.gr-home-card li {
counter-increment: gr-item; list-style: none;
display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center;
margin: 0; padding: 8px 16px; border-top: 1px solid #f6efec;
font-size: 0.95em; line-height: 1.6; color: #333; overflow-wrap: anywhere;
}
.gr-home-card li:first-child { border-top: 0; }
.gr-home-card li::before {
content: counter(gr-item);
grid-column: 1; grid-row: 1; justify-self: center;
min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px;
background: #fbece8; color: #c0392b; text-align: center; font: 600 11px/22px system-ui, sans-serif;
}
.gr-home-card li > * { grid-column: 2; }
.gr-home-card li > a:first-child, .gr-home-card li > a:first-of-type { grid-row: 1; }
.gr-home-card li:hover { background: #fdf8f6; }
.gr-home-card li a { color: #c0392b; text-decoration: none; }
.gr-home-card li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gr-home-card li a.new { color: #c08080; }
.gr-home-note { display: block; font-size: 0.82em; color: #888; line-height: 1.4; }
/* A card with a long list (Madhvacharya's 38 works) spans two columns */
@media (min-width: 900px) {
.gr-home-card.gr-home-card-wide { grid-column: span 2; }
.gr-home-card.gr-home-card-wide ol { column-count: 2; column-gap: 0; column-rule: 1px solid #f3e9e5; }
.gr-home-card.gr-home-card-wide li { break-inside: avoid; }
}
/* ── 26. TOGGLE BUTTONS ────────────────────────────────────────── */
/* One segmented control instead of two separate buttons */
.gr-home-toggle {
display: flex; gap: 4px; width: max-content; max-width: 100%; box-sizing: border-box;
margin: 4px auto 28px; padding: 4px;
background: #f7ece8; border: 1px solid #efd9d1; border-radius: 999px;
}
.gr-toggle-btn {
font-family: 'Adishila', 'Noto Serif Devanagari', serif;
font-size: 0.88em; padding: 7px 24px; border: 0; border-radius: 999px; text-align: center;
background: transparent; color: #a0402f; cursor: pointer; user-select: none;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.gr-toggle-btn:hover { background: rgba(255, 255, 255, 0.7); color: #c0392b; }
.gr-toggle-btn.gr-toggle-active { background: #c0392b; color: #fff; box-shadow: 0 1px 4px rgba(192, 57, 43, 0.35); }
.gr-toggle-btn:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }
/* ── 27. SCRIPT BAR ────────────────────────────────────────────── */
.gr-script-bar { margin: 0 0 20px; font-size: 0.8em; color: #888; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gr-script-label { font-family: system-ui, sans-serif; color: #aaa; }
.gr-script-btn { font-family: 'Adishila', 'Noto Serif Devanagari', serif; color: #c0392b !important; text-decoration: underline dotted !important; cursor: pointer; }
.gr-script-btn.active { color: #888 !important; text-decoration: none !important; cursor: default; }
/* ── 28. MODALS ────────────────────────────────────────────────── */
.grantha-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.grantha-modal-box { background: white; padding: 20px; border-radius: 10px; width: 300px; }
.gm-title { font-weight: bold; margin-bottom: 10px; }
.gm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
/* ── 29. LOGIN PAGE ────────────────────────────────────────────── */
body.page-Special_UserLogin .vector-search-box,
body.page-Special_UserLogin #p-search { display: none !important; }
body.page-Special_UserLogin #content { max-width: 420px; margin: 40px auto !important; }
/* ── 30. SPECIAL PAGES ─────────────────────────────────────────── */
body.ns-special #footer, body.ns-special .mw-footer,
body.ns-special .vector-footer { display: none !important; }
body.ns-special .vector-page-tools { display: none !important; }
/* ── 31. MINERVA (mobile) ──────────────────────────────────────── */
.skin-minerva .mw-parser-output {
font-size: 18px !important;
line-height: 1.8 !important;
}
.skin-minerva .mw-parser-output h2,
.skin-minerva .mw-parser-output .mw-heading2 h2 {
width: 100% !important;
}
.skin-minerva .mw-parser-output h3,
.skin-minerva .mw-parser-output .mw-heading3 h3 {
width: 100% !important;
}
/* Home grid single column on Minerva */
.skin-minerva .gr-home-grid { grid-template-columns: 1fr; gap: 14px; }
.skin-minerva .gr-home-toggle { width: 100%; margin: 4px 0 20px; }
.skin-minerva .gr-toggle-btn { flex: 1; padding: 8px 10px; }
.skin-minerva .gr-home-group-label { margin: 28px 0 14px; }
/* Hide things that should be hidden on mobile too */
.skin-minerva .catlinks,
.skin-minerva #catlinks { display: none !important; }
.skin-minerva .mw-editsection { display: none !important; }
/* Minerva already has its own TOC — hide our inline .toc */
.skin-minerva .toc { display: none !important; }
/* ReaderToolbar on Minerva */
.skin-minerva #gr-static-bar {
height: auto !important;
min-height: 52px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}
.skin-minerva #gr-static-bar::-webkit-scrollbar { display: none !important; }
.skin-minerva .gr-controls .gr-btn {
height: 44px !important;
min-width: 44px !important;
font-size: 14px !important;
}
.skin-minerva .gr-btn-staging { display: none !important; }
.skin-minerva .gr-controls .gr-sep { display: none !important; }
/* Minerva already shows page title — don't double-hide */
.skin-minerva h1.firstHeading { display: block !important; }
/* ── 32. PRINT ─────────────────────────────────────────────────── */
@media print {
#gr-static-bar, .gr-controls, .vector-header-container { display: none !important; }
.mw-parser-output { font-size: 11pt !important; }
}
/* ── 33. TYPOGRAPHY CLASSES ────────────────────────────────────── */
/* Heading — center, maroon, AdishilaDevGuru */
.gr-heading {
display: block;
text-align: center;
font-size: 1.09em;
font-weight: 500;
color: #be100e;
font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;
line-height: 1.4;
margin: 0.45em 0;
}
/* Sub-heading — center, orange, AdishilaDevGuru */
.gr-sub-heading {
display: block;
text-align: center;
font-size: 0.73em;
font-weight: 500;
color: #e65100;
font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;
line-height: 1.5;
margin: 0.5em 0;
}
/* Chapter Heading — center, maroon, AdishilaDevGuru */
.gr-chapter-heading {
display: block;
text-align: center;
font-size: 0.82em;
font-weight: 500;
color: #be100e;
font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;
line-height: 1.5;
margin: 0.5em 0;
}
/* M.Veda Shloka — left, bold, maroon, AdishilaVed, 5mm indent */
.gr-mv-shloka {
display: block;
text-align: left;
font-size: 0.82em;
font-weight: bold;
color: #be100e;
font-family: 'AdishilaVed', 'Adishila', 'Noto Serif Devanagari', serif;
padding-left: 0.86em;
margin: 0;
line-height: 1.75;
}
/* M.Veda Gadya — justify, bold, maroon, AdishilaVed */
.gr-mv-gadya {
display: block;
text-align: justify;
font-size: 0.82em;
font-weight: bold;
color: #be100e;
font-family: 'AdishilaVed', 'Adishila', 'Noto Serif Devanagari', serif;
text-indent: 1.18em;
padding-left: 0.36em;
margin: 0;
line-height: 1.75;
}
/* M.Shloka — left, bold, orange, AdishilaDev, 5mm indent */
.gr-m-shloka {
display: block;
text-align: left;
font-weight: bold;
color: var(--maroon);
font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
margin: 0;
}
/* B.Shloka / TK.Shloka / TP.Shloka — left, black, AdishilaDev */
.gr-b-shloka,
.gr-tp-shloka {
display: block;
text-align: left;
font-weight: normal;
color: #1a1a1a;
font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
margin: 0;
}
/* Reference — orange, AdishilaDev */
.gr-reference {
font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif; color: var(--maroon);
}
/* Custom tag span — subtle dashed underline only */
.gr-custom {
border-bottom: 1px dashed #b5451b;
padding-bottom: 1px;
}
.gr-crosslink {
color: #1a73e8;
text-decoration: underline;
cursor: pointer;
}
.gr-crosslink:hover {
color: #0b57cf;
}
/* ── 34. MINERVA HEADER — orange theme + sticky ────────────────── */
/* Kill space above header */
.skin-minerva body { margin-top: 0 !important; padding-top: 0 !important; }
.skin-minerva #mw-mf-viewport,
.skin-minerva #mw-mf-page-center { margin-top: 0 !important; padding-top: 0 !important; }
/* Header — orange, sticky */
.skin-minerva header.header-container {
background: #b5451b !important;
position: fixed !important;
top: 0 !important;
z-index: 200 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff;
}
.skin-minerva .minerva-header {
background: #b5451b !important;
display: flex !important;
align-items: center !important;
min-height: 54px !important;
padding: 0 12px !important;
margin: 0 !important;
}
.minerva-icon {
filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(1%) hue-rotate(296deg) brightness(104%) contrast(100%);
}
/* Site name text */
.skin-minerva .branding-box { background: transparent !important; }
.skin-minerva .branding-box a {
text-decoration: none !important;
display: flex !important;
align-items: center !important;
}
.skin-minerva .branding-box a span {
color: #fff !important;
font-size: 18px !important;
font-weight: 700 !important;
font-family: system-ui, -apple-system, sans-serif !important;
white-space: nowrap !important;
}
/* Hamburger + search icons — white */
.skin-minerva .minerva-header label,
.skin-minerva .minerva-header .search-toggle {
color: #fff !important;
}
.skin-minerva .minerva-header svg path,
.skin-minerva .minerva-header svg rect,
.skin-minerva .minerva-header svg circle {
fill: #fff !important;
}
.skin-minerva .minerva-header .mw-ui-icon:before {
color: #fff !important;
filter: brightness(10) !important;
}
/* Reader toolbar below Minerva header */
.skin-minerva #gr-static-bar {
position: sticky !important;
top: 54px !important;
z-index: 100 !important;
}
/* ── 35. MINERVA — auto-expand sections ────────────────────────── */
.skin-minerva .collapsible-block,
.skin-minerva .collapsible-heading + .collapsible-block {
display: block !important;
}
.skin-minerva .mf-section-0,
.skin-minerva .mf-section-1,
.skin-minerva .mf-section-2,
.skin-minerva .mf-section-3,
.skin-minerva .mf-section-4,
.skin-minerva .mf-section-5,
.skin-minerva .mf-section-6,
.skin-minerva .mf-section-7,
.skin-minerva .mf-section-8,
.skin-minerva .mf-section-9 {
display: block !important;
}
.skin-minerva .section-heading {
pointer-events: none !important;
}
.skin-minerva .section-heading .indicator {
display: none !important;
}
/* ── Hide MediaWiki default header user/account controls (desktop) ── */
#pt-userpage-2,
#p-vector-user-menu-userpage,
/* Hide the right-side person-icon dropdown */
#vector-user-links-dropdown,
.vector-user-links-dropdown,
#p-personal-more,
.vector-user-menu,
.mw-portlet-vector-user-menu-overflow,
#pt-watchlist-2, #pt-watchlist {
display: none !important;
}
/* Hide original userpage text link */
#p-vector-user-menu-userpage { display: none !important; }
/* Hide the right-side person-icon user menu dropdown */
#vector-user-links-dropdown { display: none !important; }
/* ── Custom username dropdown ── */
#gr-user-dropdown {
position: relative;
display: inline-block;
font-family: system-ui, sans-serif;
}
#gr-user-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.12);
border: none;
color: #fff;
font-size: 0.9em;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
}
#gr-user-trigger:hover { background: rgba(255,255,255,0.2); }
#gr-user-trigger .gr-caret { font-size: 0.7em; opacity: 0.8; }
#gr-user-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 180px;
background: #fff;
border: 1px solid #e0d8d2;
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0,0,0,0.14);
padding: 6px;
z-index: 1000;
display: none;
}
#gr-user-menu.gr-open { display: block; }
#gr-user-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
color: #2c1810;
text-decoration: none;
font-size: 0.92em;
border-radius: 6px;
white-space: nowrap;
}
#gr-user-menu a:hover { background: #f7f1ed; }
.vector-user-links a {
color: #1C1A17 !important;
}
.vector-user-links-main {
display: none !important;
}
.gr-phone-row { margin-bottom: 12px; }
.gr-phone-label {
display: block;
font-weight: 700;
font-size: 0.875rem;
margin-bottom: 6px;
}
.gr-phone-inputs {
display: flex;
gap: 8px;
align-items: stretch;
height: 48px;
position: relative;
font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.gr-phone-country { width: 101px; border-radius: 12px; padding: 12px; gap: 8px; border: 1px solid #CED4DA;}
.gr-phone-national { flex: 1; border-radius: 12px; padding: 12px; border: 1px solid #CED4DA;}
/* ── Country trigger button ── */
.gr-country-trigger {
display: flex;
align-items: center;
gap: 8px;
width: 101px;
border-radius: 12px;
padding: 12px;
border: 1px solid #CED4DA;
white-space: nowrap;
background: #fff;
}
.gr-country-trigger:hover { border-color: #72777d; }
.gr-trigger-flag { font-size: 1.3rem; line-height: 1; }
.gr-trigger-dial { font-size: 0.9rem; color: #54595d; }
.gr-trigger-caret { font-size: 0.7rem; color: #54595d; }
/* ── Dropdown ── */
.gr-country-dropdown {
position: absolute;
top: calc(100% + 4px); left: 0;
z-index: 9999;
width: 280px;
background: #fff;
border: 1px solid #a2a9b1;
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.gr-country-search {
width: 100%; box-sizing: border-box;
padding: 8px 12px;
border: none; border-bottom: 1px solid #eee;
font-size: 0.9rem; outline: none;
}
.gr-country-list { max-height: 240px; overflow-y: auto; }
.gr-country-option {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; cursor: pointer; font-size: 0.9rem;
}
.gr-country-option:hover { background: #f8f9fa; }
.gr-country-flag { font-size: 1.2rem; flex-shrink: 0; }
.gr-country-name { flex: 1; color: #202122; }
.gr-country-dial { color: #54595d; font-size: 0.85rem; }
.gr-phone-national:focus {
outline: none; border-color: #4A433A;
}
/* Search Results Bar styles */
.gr-search-hl-mobile {
position: fixed;
top: 105px;
left: 0px;
right: 0px;
z-index: 10200;
background: rgb(181, 69, 27);
color: rgb(255, 255, 255); display: flex;
align-items: center;
justify-content: space-around;
font-family: "Noto Sans Devanagari", system-ui, sans-serif;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
height: 52px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
padding: 5px 4px !important;
gap: 20px !important;
}
.gr-search-hl-mobile .gr-search-bar-btn {
height: 48px;
width: 48px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
transition: background 0.15s;
color: #fff;
font-size: 12px;
font-family: "Noto Sans Devanagari";
gap: 8px;
white-space: nowrap;
}
/* Hide Notes FAB, doc nav FAB and Reader toolbar on Updates/Help/About pages */
body.page-My_wiki_Updates #gra-toggle,
body.page-My_wiki_Updates #se-docnav-btn,
body.page-My_wiki_Updates #gr-static-bar,
body.page-My_wiki_Help #gra-toggle,
body.page-My_wiki_Help #se-docnav-btn,
body.page-My_wiki_Help #gr-static-bar,
body.page-My_wiki_About #gra-toggle,
body.page-My_wiki_About #se-docnav-btn,
body.page-My_wiki_About #gr-static-bar { display: none; }
/* Welcome Page */
/* Hide all chrome on Welcome */
body.page-Welcome #mw-navigation,
body.page-Welcome #mw-panel,
body.page-Welcome #footer,
body.page-Welcome .mw-footer,
body.page-Welcome #siteSub,
body.page-Welcome #contentSub,
body.page-Welcome #firstHeading,
body.page-Welcome .mw-page-title-main,
body.page-Welcome .mw-indicators,
body.page-Welcome .vector-header,
body.page-Welcome .vector-page-toolbar,
body.page-Welcome .vector-sticky-header,
body.page-Welcome .mw-page-container,
body.page-Welcome #gr-static-bar,
body.page-Welcome #se-docnav-btn,
body.page-Welcome #gra-toggle,
body.page-Welcome #se-scrolltop {
display: none !important;
}
body.page-Welcome .mw-page-container
/* Put the banner directly on the body of the Welcome page */
body.page-Welcome {
background-image: url('/images/banner.jpeg') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-attachment: fixed !important;
background-color: #3a0d0d !important;
cursor: pointer;
}
/* Make the content area transparent so the body banner shows through */
body.page-Welcome #content,
body.page-Welcome .mw-body,
body.page-Welcome #mw-content-text,
body.page-Welcome .mw-parser-output,
body.page-Welcome #bodyContent {
background: transparent !important;
border: none !important;
box-shadow: none !important;
min-height: 100vh;
}
/* Kill the white everywhere it's painted */
body.page-Welcome,
body.page-Welcome .mw-page-container,
body.page-Welcome .mw-page-container-inner,
body.page-Welcome .mw-content-container,
body.page-Welcome #content,
body.page-Welcome .mw-body,
body.page-Welcome #mw-content-text,
body.page-Welcome .mw-parser-output,
body.page-Welcome #bodyContent {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Put the banner on the body and force it full height */
body.page-Welcome {
background-image: url('/images/banner.jpeg') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-attachment: fixed !important;
background-color: #3a0d0d !important;
min-height: 100vh !important;
cursor: pointer;
}
/* ---- Minerva (mobile) splash for Welcome ---- */
/* Hide all chrome on Welcome */
body.skin-minerva.page-Welcome .header-container,
body.skin-minerva.page-Welcome .minerva-header,
body.skin-minerva.page-Welcome #mw-mf-page-center > .header-container,
body.skin-minerva.page-Welcome .banner-container,
body.skin-minerva.page-Welcome .pre-content,
body.skin-minerva.page-Welcome #page-actions,
body.skin-minerva.page-Welcome .page-actions-menu,
body.skin-minerva.page-Welcome .last-modified-bar,
body.skin-minerva.page-Welcome .post-content,
body.skin-minerva.page-Welcome #footer,
body.skin-minerva.page-Welcome .minerva-footer,
body.skin-minerva.page-Welcome .navigation-drawer,
body.skin-minerva.page-Welcome .mw-page-title-main,
body.skin-minerva.page-Welcome #section_0,
body.skin-minerva.page-Welcome .pre-content .mw-ui-icon,
body.skin-minerva.page-Welcome h1.mw-first-heading {
display: none !important;
}
/* Kill white on all Minerva container surfaces */
body.skin-minerva.page-Welcome,
body.skin-minerva.page-Welcome #mw-mf-viewport,
body.skin-minerva.page-Welcome #mw-mf-page-center,
body.skin-minerva.page-Welcome #content,
body.skin-minerva.page-Welcome .mw-body,
body.skin-minerva.page-Welcome #mw-content-text,
body.skin-minerva.page-Welcome .mw-parser-output,
body.skin-minerva.page-Welcome #bodyContent {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Put the banner on the body, full height */
body.skin-minerva.page-Welcome {
background-image: url('/images/banner.jpeg') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-color: #3a0d0d !important;
min-height: 100vh !important;
cursor: pointer;
}
/* from LocalSettings line 393 */
/* ===== HAMBURGER / SIDEBAR ===== */
#mw-sidebar-button,
.vector-main-menu,
.vector-main-menu-container,
.vector-main-menu-landmark,
#vector-main-menu-dropdown {
display:none !important;
}
/* ===== FOOTER ===== */
#footer,
.mw-footer,
footer {
display:none !important;
}
/* ===== LOGIN / SIGNUP PAGE CLEANUP ===== */
body.page-Special_UserLogin #mw-sidebar-button,
body.page-Special_UserLogin .vector-main-menu,
body.page-Special_UserLogin .vector-page-toolbar,
body.page-Special_UserLogin .vector-page-tools,
body.page-Special_CreateAccount #mw-sidebar-button,
body.page-Special_CreateAccount .vector-main-menu,
body.page-Special_CreateAccount .vector-page-toolbar,
body.page-Special_CreateAccount .vector-page-tools,
body.page-Special_PasswordReset #mw-sidebar-button,
body.page-Special_PasswordReset .vector-main-menu,
body.page-Special_PasswordReset .vector-page-toolbar,
body.page-Special_PasswordReset .vector-page-tools {
display:none !important;
}
/* from LocalSettings line 436 */
/* Kill every possible appearance container */
#vector-appearance,
#vector-appearance-dropdown,
#vector-appearance-pinned-container,
#vector-appearance-unpinned-container,
[id*="appearance-dropdown"],
[id*="appearance"][class*="vector"],
.vector-dropdown[title*="Appearance"],
.vector-dropdown[title*="appearance"] {
display:none !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
}
/* Remove empty slot in header */
.vector-page-tools,
.vector-page-toolbar,
.vector-header-end {
gap:0 !important;
}
/* from LocalSettings line 469 */
/* Login page only */
body.page-Special_UserLogin .vector-search-box,
body.page-Special_UserLogin #p-search,
body.page-Special_UserLogin .search-toggle,
body.page-Special_UserLogin .vector-search-box-vue {
display:none !important;
}
/* Show site wordmark/logo if hidden */
body.page-Special_UserLogin .mw-logo,
body.page-Special_UserLogin .vector-logo,
body.page-Special_UserLogin .vector-header-start {
display:flex !important;
visibility:visible !important;
}
/* Cleaner top bar */
body.page-Special_UserLogin .vector-header {
justify-content:space-between !important;
padding:0 16px !important;
}
/* Match Main_Page branded header bar */
body.page-Special_UserLogin .vector-header-container .mw-header {
background: #b5451b !important;
}
body.page-Special_UserLogin .mw-logo-wordmark,
body.page-Special_UserLogin .mw-logo-wordmark strong {
color: #fff !important;
}
body.page-Special_UserLogin .mw-logo-container {
color: #fff !important;
}
/* Single logo: favicon only (no quill gr-header-icon) */
body.page-Special_UserLogin .gr-header-icon {
display: none !important;
}
body.page-Special_UserLogin .mw-logo-icon {
display: inline-block !important;
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
}
/* Hide Create Account and Login Links in header starts */
body.page-Special_UserLogin .vector-header-end {
display: none !important;
}
/* Hide Create Account and Login Links in header end */
/* from LocalSettings line 530 */
body.page-Special_PasswordReset .vector-search-box,
body.page-Special_PasswordReset #p-search,
body.page-Special_PasswordReset .search-toggle,
body.page-Special_PasswordReset .vector-search-box-vue {
display:none !important;
}
body.page-Special_PasswordReset .mw-logo,
body.page-Special_PasswordReset .vector-logo,
body.page-Special_PasswordReset .vector-header-start {
display:flex !important;
visibility:visible !important;
}
body.page-Special_PasswordReset .vector-header {
justify-content:space-between !important;
padding:0 16px !important;
}
body.page-Special_PasswordReset .vector-header-container .mw-header {
background: #b5451b !important;
}
body.page-Special_PasswordReset .mw-logo-wordmark,
body.page-Special_PasswordReset .mw-logo-wordmark strong {
color: #fff !important;
}
body.page-Special_PasswordReset .mw-logo-container {
color: #fff !important;
}
body.page-Special_PasswordReset .gr-header-icon {
display: none !important;
}
body.page-Special_PasswordReset .mw-logo-icon {
display: inline-block !important;
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
}
body.page-Special_PasswordReset .vector-header-end {
display: none !important;
}
body.page-Special_PasswordReset .vector-page-toolbar {
display: none !important;
}
/* from LocalSettings line 584 */
body.page-Special_CreateAccount .vector-search-box,
body.page-Special_CreateAccount #p-search,
body.page-Special_CreateAccount .search-toggle,
body.page-Special_CreateAccount .vector-search-box-vue {
display:none !important;
}
body.page-Special_CreateAccount .mw-logo,
body.page-Special_CreateAccount .vector-logo,
body.page-Special_CreateAccount .vector-header-start {
display:flex !important;
visibility:visible !important;
}
body.page-Special_CreateAccount .vector-header {
justify-content:space-between !important;
padding:0 16px !important;
}
body.page-Special_CreateAccount .vector-header-container .mw-header {
background: #b5451b !important;
}
body.page-Special_CreateAccount .mw-logo-wordmark,
body.page-Special_CreateAccount .mw-logo-wordmark strong {
color: #fff !important;
}
body.page-Special_CreateAccount .mw-logo-container {
color: #fff !important;
}
body.page-Special_CreateAccount .gr-header-icon {
display: none !important;
}
body.page-Special_CreateAccount .mw-logo-icon {
display: inline-block !important;
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
}
body.page-Special_CreateAccount .vector-header-end {
display: none !important;
}
/* from LocalSettings line 635 */
body.page-Special_UserLogin {
background: #FAF6EE !important;
}
body.page-Special_UserLogin .mw-page-container,
body.page-Special_UserLogin .mw-page-container-inner,
body.page-Special_UserLogin .mw-body {
background: transparent !important;
}
body.page-Special_UserLogin .mw-body-header,
body.page-Special_UserLogin .vector-page-titlebar,
body.page-Special_UserLogin #firstHeading {
display: none !important;
}
body.page-Special_UserLogin #content {
max-width: 440px !important;
margin: 28px auto 48px !important;
padding: 0 16px !important;
float: none !important;
}
body.page-Special_UserLogin #bodyContent,
body.page-Special_UserLogin .mw-body-content {
margin: 0 !important;
padding: 0 !important;
}
body.page-Special_UserLogin #userloginprompt:empty {
display: none !important;
}
body.page-Special_UserLogin .mw-body-content > .mw-ui-container {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);
padding: 32px 32px 28px;
box-sizing: border-box;
}
body.page-Special_UserLogin .mw-body-content > .mw-ui-container::before {
content: "Login/Signup";
display: block;
text-align: center;
font-size: 24px;
color: #1C1A17;
margin-bottom: 22px;
font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body.page-Special_UserLogin #userloginForm,
body.page-Special_UserLogin #userloginForm form {
width: 100% !important;
max-width: 100% !important;
}
body.page-Special_UserLogin .mw-htmlform {
width: 100% !important;
max-width: 100% !important;
}
body.page-Special_UserLogin .mw-htmlform-field {
margin-bottom: 18px;
}
body.page-Special_UserLogin .cdx-label,
body.page-Special_UserLogin .mw-htmlform-field > label {
display: block;
font-size: 0.875rem;
color: #1C1A17;
margin-bottom: 6px;
font-family: Noto Sans Devanagari UI, system-ui, -apple-system, sans-serif;
}
/* Codex: border on wrapper only (inner input has its own border = double line) */
body.page-Special_UserLogin .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border-radius: 10px !important;
border: 1px solid #e5e7eb !important;
background: #fff !important;
min-height: 46px;
}
body.page-Special_UserLogin .cdx-text-input__input {
width: 100% !important;
box-sizing: border-box !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
padding: 12px 14px !important;
font-size: 1rem !important;
min-height: 44px;
}
body.page-Special_UserLogin .cdx-text-input:focus-within {
border-color: #ffffff !important;
box-shadow: rgba(177, 74, 46, 0.1) !important;
}
body.page-Special_UserLogin .cdx-text-input__input:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
/* Fallback if inputs are not wrapped in Codex */
body.page-Special_UserLogin input#wpName1,
body.page-Special_UserLogin input#wpPassword1 {
width: 100% !important;
box-sizing: border-box !important;
border-radius: 10px !important;
border: 1px solid #e5e7eb !important;
padding: 12px 14px !important;
font-size: 1rem !important;
min-height: 46px;
}
body.page-Special_UserLogin input#wpName1:focus,
body.page-Special_UserLogin input#wpPassword1:focus {
outline: none !important;
border-color: #b5451b !important;
box-shadow: rgba(177, 74, 46, 0.1) !important;
}
body.page-Special_UserLogin .mw-userlogin-rememberme {
display: none !important;
}
body.page-Special_UserLogin .gr-login-forgot-password {
text-align: left;
margin: 2px 0 14px;
padding: 0;
}
body.page-Special_UserLogin .gr-login-forgot-password a {
color: #b5451b !important;
font-weight: 600 !important;
font-size: 0.9rem;
text-decoration: none !important;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_UserLogin .gr-login-forgot-password a:hover {
text-decoration: underline !important;
}
body.page-Special_UserLogin .mw-htmlform-field:has(#wpLoginAttempt),
body.page-Special_UserLogin .mw-htmlform-submit {
margin-top: 8px;
margin-bottom: 0;
}
body.page-Special_UserLogin #wpLoginAttempt,
body.page-Special_UserLogin #wpLoginAttempt.cdx-button {
width: 100% !important;
display: flex !important;
justify-content: center;
align-items: center;
background: #b5451b !important;
border: none !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 1rem !important;
padding: 14px 20px !important;
min-height: 48px;
cursor: pointer;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_UserLogin #wpLoginAttempt:hover {
background: #A33C20 !important;
}
body.page-Special_UserLogin .mw-userlogin-help,
body.page-Special_UserLogin .mw-form-related-link-container,
body.page-Special_UserLogin #mw-createaccount,
body.page-Special_UserLogin #mw-createaccount-cta {
font-size: 0.9rem;
margin-top: 12px;
}
body.page-Special_UserLogin .mw-userlogin-help a,
body.page-Special_UserLogin .mw-form-related-link-container a,
body.page-Special_UserLogin #mw-createaccount a,
body.page-Special_UserLogin #mw-createaccount-cta a {
color: #b5451b !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.page-Special_UserLogin .mw-userlogin-help a:hover,
body.page-Special_UserLogin .mw-form-related-link-container a:hover,
body.page-Special_UserLogin #mw-createaccount a:hover,
body.page-Special_UserLogin #mw-createaccount-cta a:hover {
text-decoration: underline !important;
}
body.page-Special_UserLogin .cdx-message,
body.page-Special_UserLogin .mw-message-box {
border-radius: 10px;
margin-bottom: 16px;
}
body.page-Special_UserLogin .gr-google-login {
margin: 20px 0 4px;
padding: 0;
}
body.page-Special_UserLogin .gr-google-login-icon {
display: inline-flex;
flex-shrink: 0;
line-height: 0;
margin-top: -3px;
}
body.page-Special_UserLogin .gr-google-login-icon svg {
display: block;
}
body.page-Special_UserLogin .gr-google-login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
padding: 12px;
min-height: 44px;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #F3F4F6;
color: #1C1A17;
font-size: 14px;
text-decoration: none !important;
font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
}
body.page-Special_UserLogin .gr-google-login-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
}
body.page-Special_UserLogin .gr-google-login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0 16px;
color: #F4ECDF;
font-size: 14px;
font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
}
body.page-Special_UserLogin .gr-google-login-divider::before,
body.page-Special_UserLogin .gr-google-login-divider::after {
content: "";
flex: 1;
height: 1px;
background: #F4ECDF;
}
.gr-phone-row { margin-bottom: 12px; }
.gr-phone-label {
display: block;
font-weight: 700;
font-size: 0.875rem;
margin-bottom: 6px;
}
.gr-phone-inputs {
display: flex;
gap: 8px;
align-items: stretch;
height: 48px;
position: relative;
font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.gr-phone-country { width: 101px; border-radius: 12px; padding: 12px; gap: 8px; border: 1px solid #CED4DA;}
.gr-phone-national { flex: 1; border-radius: 12px; padding: 12px; border: 1px solid #CED4DA;}
/* ── Country trigger button ── */
.gr-country-trigger {
display: flex;
align-items: center;
gap: 8px;
width: 101px;
border-radius: 12px;
padding: 12px;
border: 1px solid #CED4DA;
white-space: nowrap;
background: #fff;
}
.gr-country-trigger:hover { border-color: #72777d; }
.gr-trigger-flag { font-size: 1.3rem; line-height: 1; }
.gr-trigger-dial { font-size: 0.9rem; color: #54595d; }
.gr-trigger-caret { font-size: 0.7rem; color: #54595d; }
/* ── Dropdown ── */
.gr-country-dropdown {
position: absolute;
top: calc(100% + 4px); left: 0;
z-index: 9999;
width: 280px;
background: #fff;
border: 1px solid #a2a9b1;
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.gr-country-search {
width: 100%; box-sizing: border-box;
padding: 8px 12px;
border: none; border-bottom: 1px solid #eee;
font-size: 0.9rem; outline: none;
}
.gr-country-list { max-height: 240px; overflow-y: auto; }
.gr-country-option {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; cursor: pointer; font-size: 0.9rem;
}
.gr-country-option:hover { background: #f8f9fa; }
.gr-country-flag { font-size: 1.2rem; flex-shrink: 0; }
.gr-country-name { flex: 1; color: #202122; }
.gr-country-dial { color: #54595d; font-size: 0.85rem; }
.gr-phone-national:focus {
outline: none; border-color: #4A433A;
}
/* OTP verification screen */
#gr-otp-screen { padding: 8px 0; }
.gr-otp-title { font-size: 24px; font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif; text-align: center; margin-bottom: 12px; color: #1C1A17}
.gr-otp-desc { font-size: 16px; text-align: center; color: #1C1A17; margin-bottom: 20px; line-height: 1.5; font-family: "Noto Sans Devanagari" }
.gr-otp-label { display: block; font-size: 16px; margin-bottom: 8px; font-family: "Noto Sans Devanagari"; color: #1C1A17}
.gr-otp-boxes {
display: flex;
gap: 8px;
margin-bottom: 20px;
justify-content: center;
}
.gr-otp-box {
flex: 1;
min-width: 0;
max-width: 52px;
width: 52px;
height: 52px;
text-align: center;
font-size: 20px;
font-weight: 500;
border: 1px solid #CED4DA;
border-radius: 12px;
outline: none;
padding: 0;
box-sizing: border-box;
}
.gr-otp-box:focus { border-color: #4A433A; }
.gr-continue-btn:not(:disabled):hover { background: #B14A2E; }
.gr-continue-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.gr-resend-row { text-align: center; font-size: 14px; color: #54595d; }
.gr-link-btn {
background: none; border: none; padding: 0;
color: #B14A2E; cursor: pointer; font-size: inherit;
text-decoration: none;
}
.gr-link-btn:hover { text-decoration: underline; }
/* Login button on phone screen */
.gr-login-btn, .gr-continue-btn {
width: 100%; padding: 16px 8px; border: none; gap: 8px;
border-radius: 12px; background: #B14A2E;
color: #fff; font-size: 16px; font-weight: 500;
cursor: pointer; font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
}
.gr-login-btn:hover { background: #993C1D; }
.gr-otp-hidden-field {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
}
.gr-otp-error {
background: #fce8e8;
border: 1px solid #e57373;
border-radius: 6px;
color: #b71c1c;
padding: 10px 14px;
margin-bottom: 12px;
font-size: 14px;
text-align: center;
}
.gr-login-checks{display:flex;justify-content: space-between; gap:8px;margin:12px 0;}
.gr-check-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#1C1A17;cursor:pointer; font-family: "Noto Sans Devanagari"}
.gr-check-label input{width:16px;height:16px;accent-color:#B14A2E;cursor:pointer; font-family: "Noto Sans Devanagari"}
@media (max-width: 480px) {
body.page-Special_UserLogin .mw-body-content > .mw-ui-container {
padding: 24px 20px 20px;
border-radius: 12px;
}
body.page-Special_UserLogin #content {
margin: 16px auto 32px !important;
padding: 0 12px !important;
}
}
/* from LocalSettings line 1021 */
body.page-Special_PasswordReset {
background: #FAF6EE !important;
}
body.page-Special_PasswordReset .mw-page-container,
body.page-Special_PasswordReset .mw-page-container-inner,
body.page-Special_PasswordReset .mw-body {
background: transparent !important;
}
body.page-Special_PasswordReset .mw-body-header,
body.page-Special_PasswordReset .vector-page-titlebar,
body.page-Special_PasswordReset #firstHeading {
display: none !important;
}
body.page-Special_PasswordReset #content {
max-width: 440px !important;
margin: 28px auto 48px !important;
padding: 0 16px !important;
float: none !important;
}
body.page-Special_PasswordReset #bodyContent,
body.page-Special_PasswordReset .mw-body-content {
margin: 0 !important;
padding: 0 !important;
}
body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);
padding: 32px 32px 28px;
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
}
body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper::before {
content: "Reset password";
display: block;
text-align: center;
font-size: 1.65rem;
font-weight: 700;
color: #2d2348;
margin-bottom: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body.page-Special_PasswordReset .mw-htmlform-ooui-header {
margin-bottom: 18px;
font-size: 0.9rem;
color: #6b7280;
line-height: 1.5;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_PasswordReset .mw-htmlform-ooui-header p {
margin: 0;
}
body.page-Special_PasswordReset .mw-htmlform-ooui-wrapper .oo-ui-fieldLayout {
margin-bottom: 18px;
}
body.page-Special_PasswordReset .oo-ui-fieldLayout-header .oo-ui-labelElement-label {
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_PasswordReset .oo-ui-textInputWidget .oo-ui-inputWidget-input {
width: 100% !important;
box-sizing: border-box !important;
border-radius: 10px !important;
border: 1px solid #e5e7eb !important;
padding: 12px 14px !important;
font-size: 1rem !important;
min-height: 46px;
background: #fff !important;
}
body.page-Special_PasswordReset .oo-ui-textInputWidget.oo-ui-widget-focus .oo-ui-inputWidget-input {
border-color: #b5451b !important;
box-shadow: rgba(177, 74, 46, 0.1) !important;
}
body.page-Special_PasswordReset .oo-ui-fieldLayout-field {
width: 100% !important;
}
body.page-Special_PasswordReset .oo-ui-textInputWidget {
width: 100% !important;
max-width: 100% !important;
}
body.page-Special_PasswordReset .mw-htmlform-submit-buttons {
margin-top: 8px;
width: 100% !important;
}
body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement,
body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonInputWidget {
width: 100% !important;
display: block !important;
}
body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement-button {
width: 100% !important;
justify-content: center;
background: #b5451b !important;
border-color: #b5451b !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 1rem !important;
padding: 14px 20px !important;
min-height: 48px;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement-button:hover {
background: #A33C20 !important;
border-color: #A33C20 !important;
}
body.page-Special_PasswordReset .gr-passwordreset-footer {
text-align: center;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #f0eef5;
font-size: 0.9rem;
color: #6b7280;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_PasswordReset .gr-passwordreset-footer a {
color: #b5451b !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.page-Special_PasswordReset .gr-passwordreset-footer a:hover {
text-decoration: underline !important;
}
body.page-Special_PasswordReset .cdx-message,
body.page-Special_PasswordReset .mw-message-box,
body.page-Special_PasswordReset .successbox,
body.page-Special_PasswordReset .warningbox,
body.page-Special_PasswordReset .errorbox {
border-radius: 10px;
margin-bottom: 16px;
}
@media (max-width: 480px) {
body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper {
padding: 24px 20px 20px;
border-radius: 12px;
}
body.page-Special_PasswordReset #content {
margin: 16px auto 32px !important;
padding: 0 12px !important;
}
}
/* from LocalSettings line 1197 */
body.page-Special_CreateAccount {
background: #FAF6EE !important;
}
body.page-Special_CreateAccount .mw-page-container,
body.page-Special_CreateAccount .mw-page-container-inner,
body.page-Special_CreateAccount .mw-body {
background: transparent !important;
}
body.page-Special_CreateAccount .mw-body-header,
body.page-Special_CreateAccount .vector-page-titlebar,
body.page-Special_CreateAccount #firstHeading {
display: none !important;
}
body.page-Special_CreateAccount #content {
max-width: 440px !important;
margin: 28px auto 48px !important;
padding: 0 16px !important;
float: none !important;
}
body.page-Special_CreateAccount #bodyContent,
body.page-Special_CreateAccount .mw-body-content {
margin: 0 !important;
padding: 0 !important;
}
body.page-Special_CreateAccount .vector-page-toolbar {
display: none !important;
}
body.page-Special_CreateAccount .mw-body-content > .mw-ui-container {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);
padding: 32px 32px 28px;
box-sizing: border-box;
}
body.page-Special_CreateAccount .mw-body-content > .mw-ui-container::before {
content: "Create account";
display: block;
text-align: center;
font-size: 1.65rem;
font-weight: 700;
color: #2d2348;
margin-bottom: 22px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body.page-Special_CreateAccount #signupstart {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 16px;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_CreateAccount .mw-createacct-benefits-container {
display: none !important;
}
body.page-Special_CreateAccount #userloginForm,
body.page-Special_CreateAccount #userloginForm form {
width: 100% !important;
max-width: 100% !important;
}
body.page-Special_CreateAccount .mw-htmlform {
width: 100% !important;
max-width: 100% !important;
}
body.page-Special_CreateAccount .mw-htmlform-field {
margin-bottom: 18px;
}
body.page-Special_CreateAccount .cdx-label,
body.page-Special_CreateAccount .mw-htmlform-field > label {
display: block;
font-size: 0.875rem;
color: #1C1A17;
margin-bottom: 6px;
font-family: Noto Sans Devanagari UI, system-ui, -apple-system, sans-serif;
}
body.page-Special_CreateAccount .cdx-text-input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border-radius: 10px !important;
border: 1px solid #e5e7eb !important;
background: #fff !important;
min-height: 46px;
}
body.page-Special_CreateAccount .cdx-text-input__input {
width: 100% !important;
box-sizing: border-box !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
padding: 12px 14px !important;
font-size: 1rem !important;
min-height: 44px;
}
body.page-Special_CreateAccount .cdx-field__help-text,
body.page-Special_CreateAccount .htmlform-tip {
font-size: 0.8rem;
color: #9ca3af;
margin-top: 6px;
line-height: 1.4;
}
body.page-Special_CreateAccount .cdx-text-input:focus-within {
border-color: #b5451b !important;
box-shadow: rgba(177, 74, 46, 0.1) !important;
}
body.page-Special_CreateAccount .cdx-text-input__input:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
body.page-Special_CreateAccount input#wpName2,
body.page-Special_CreateAccount input#wpPassword2,
body.page-Special_CreateAccount input#wpRetype,
body.page-Special_CreateAccount input#wpEmail {
width: 100% !important;
box-sizing: border-box !important;
border-radius: 10px !important;
border: 1px solid #e5e7eb !important;
padding: 12px 14px !important;
font-size: 1rem !important;
min-height: 46px;
}
body.page-Special_CreateAccount input#wpName2:focus,
body.page-Special_CreateAccount input#wpPassword2:focus,
body.page-Special_CreateAccount input#wpRetype:focus,
body.page-Special_CreateAccount input#wpEmail:focus {
outline: none !important;
border-color: #b5451b !important;
box-shadow: rgba(177, 74, 46, 0.1) !important;
}
body.page-Special_CreateAccount .mw-htmlform-field:has(#wpCreateaccount),
body.page-Special_CreateAccount .mw-htmlform-submit {
margin-top: 8px;
margin-bottom: 0;
}
body.page-Special_CreateAccount #wpCreateaccount,
body.page-Special_CreateAccount #wpCreateaccount.cdx-button {
width: 100% !important;
display: flex !important;
justify-content: center;
align-items: center;
background: #b5451b !important;
border: none !important;
border-radius: 10px !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 1rem !important;
padding: 14px 20px !important;
min-height: 48px;
cursor: pointer;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_CreateAccount #wpCreateaccount:hover {
background: #A33C20 !important;
}
body.page-Special_CreateAccount .gr-login-signup-footer {
text-align: center;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #f0eef5;
}
body.page-Special_CreateAccount .gr-login-signup-text {
font-size: 0.9rem;
color: #6b7280;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_CreateAccount .gr-login-signup-link {
color: #b5451b !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.page-Special_CreateAccount .gr-login-signup-link:hover {
text-decoration: underline !important;
}
body.page-Special_CreateAccount #signupend,
body.page-Special_CreateAccount .mw-form-related-link-container {
font-size: 0.9rem;
color: #6b7280;
margin-top: 14px;
line-height: 1.5;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_CreateAccount #signupend a,
body.page-Special_CreateAccount .mw-form-related-link-container a {
color: #b5451b !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.page-Special_CreateAccount #signupend a:hover,
body.page-Special_CreateAccount .mw-form-related-link-container a:hover {
text-decoration: underline !important;
}
body.page-Special_CreateAccount .cdx-message,
body.page-Special_CreateAccount .mw-message-box {
border-radius: 10px;
margin-bottom: 16px;
}
body.page-Special_CreateAccount .gr-google-login {
margin: 20px 0 4px;
padding: 0;
}
body.page-Special_CreateAccount .gr-google-login-icon {
display: inline-flex;
flex-shrink: 0;
line-height: 0;
}
body.page-Special_CreateAccount .gr-google-login-icon svg {
display: block;
}
body.page-Special_CreateAccount .gr-google-login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
min-height: 48px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
color: #2d2348;
font-weight: 600;
font-size: 1rem;
text-decoration: none !important;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_CreateAccount .gr-google-login-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
}
body.page-Special_CreateAccount .gr-google-login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0 16px;
color: #9ca3af;
font-size: 0.85rem;
font-family: system-ui, -apple-system, sans-serif;
}
body.page-Special_CreateAccount .gr-google-login-divider::before,
body.page-Special_CreateAccount .gr-google-login-divider::after {
content: "";
flex: 1;
height: 1px;
background: #e5e7eb;
}
.page-Special_UserLogin #mw-mf-page-center,
.page-Special_UserLogin .mw-mf-page-center {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 100vh !important;
padding: 16px !important;
box-sizing: border-box !important;
}
.page-Special_UserLogin .mw-ui-container {
width: 100% !important;
max-width: 400px !important;
margin: 0 auto !important;
}
@media (max-width: 480px) {
body.page-Special_CreateAccount .mw-body-content > .mw-ui-container {
padding: 24px 20px 20px;
border-radius: 12px;
}
body.page-Special_CreateAccount #content {
margin: 16px auto 32px !important;
padding: 0 12px !important;
}
}
/* from LocalSettings line 1484 */
.vector-page-toolbar,
.vector-page-toolbar-container,
.mw-page-container {
border-top: 0 !important;
box-shadow: none !important;
}
.vector-page-toolbar {
display:none !important;
}
.mw-body {
margin-top:0 !important;
padding-top:0 !important;
}
/* from LocalSettings line 1525 */
.mw-logo-wordmark,
.vector-header-start a.mw-wiki-title {
display: flex !important;
flex-direction: column !important;
}
.mw-logo-wordmark::after,
.vector-header-start a.mw-wiki-title::after {
content: "A Digital Archive of Dvaita Vedanta Literature";
display: block;
font-size: 11px;
font-weight: 400;
color: #ffffff;
letter-spacing: 0.3px;
margin-top: 1px;
font-family: sans-serif;
}
/* ===== namespace toolbar hiding (was BeforePageDisplay line 1484) =====
Original: hide top toolbar on all namespaces EXCEPT Special, Template, MediaWiki.
MediaWiki adds body classes ns-0, ns-10 (Template), ns-8 (MediaWiki), ns--1 (Special).
So: hide globally, then re-show on the allowed namespaces. */
.vector-page-toolbar,
.vector-page-toolbar-container,
.mw-page-container { border-top: 0 !important; box-shadow: none !important; }
.vector-page-toolbar { display: none !important; }
.mw-body { margin-top: 0 !important; padding-top: 0 !important; }
/* re-show toolbar on Special / Template / MediaWiki namespaces */
body.ns--1 .vector-page-toolbar,
body.ns-10 .vector-page-toolbar,
body.ns-8 .vector-page-toolbar { display: block !important; }
/* Style overrides for QuickEdit */
.mw-body-content[contenteditable="true"]:focus-visible {
outline: 0;
}
/* ── 36. COMMENTARY INTERLEAVING (Show/hide teeka in moola) ─────── */
.gr-injected-teeka-group { margin: 0 0 6px 0; }
/* Inline checkbox placed directly before an existing commentary link
wherever it appears on the page (e.g. a "वादावली" list) - same maroon
accent as the toolbar dropdown's own checkboxes, for visual
consistency between the two places a reader can toggle a commentary.
CHANGED: was relying on vertical-align + a plain width/height on the
bare <input> - confirmed directly (screenshot) this rendered
noticeably oversized and misaligned with the surrounding text, since
native checkbox rendering size/baseline varies significantly across
browsers/OS (especially mobile Safari) and isn't reliably constrained
by width/height alone without also resetting the native appearance.
Now wrapped in an inline-flex span the checkbox sits inside, which
centers it against the line's actual content height regardless of
the checkbox's own native box quirks - a more robust fix than tuning
vertical-align offsets by hand. */
.gr-teeka-cb-wrap {
/* CHANGED from inline-flex + vertical-align:middle. An inline-flex box
aligned "middle" is positioned by its own height against the parent's
x-height, so the whole control - checkbox AND label together - sat
progressively lower than the text beside it as the reader enlarged the
type (measured: 1.8px out at 16px, 3.6px at 30px). Left as plain
inline, the label is ordinary text and lines up with its neighbours by
definition; only the checkbox needs aligning, and it does that with an
em-based offset that holds at any size. */
display: inline;
}
.gr-teeka-inline-checkbox {
-webkit-appearance: none; appearance: none;
/* Sized in em so it keeps pace with A- / A+ rather than staying a fixed
15px box against text that grows; clamped so it stays a sensible
target at both extremes.
Alignment was measured rather than guessed. vertical-align:middle is
the only value that stays consistent as the type size changes (it is
computed from the font's x-height), but it sits about 2.5px low
against this line-height at every size - so that constant bias is
taken back with `top`, giving under a pixel of error from 16px to
30px. The element is already position:relative for its tick. */
width: clamp(13px, 0.8em, 24px) !important;
height: clamp(13px, 0.8em, 24px) !important;
min-width: 13px; min-height: 13px;
margin: 0 6px 0 0; padding: 0; cursor: pointer;
vertical-align: middle; top: -2.5px;
border: 1.5px solid #b5451b; border-radius: 3px;
background: #fff; position: relative; flex-shrink: 0;
box-sizing: border-box;
}
.gr-teeka-inline-checkbox:checked {
background: #b5451b; border-color: #b5451b;
}
.gr-teeka-inline-checkbox:checked::after {
/* Placed and sized in % of the box, so the tick follows the em-based
box instead of staying a 4x8px mark inside a checkbox that grew. */
content: ''; position: absolute; left: 32%; top: 8%;
width: 26%; height: 55%;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* CHANGED: bullets removed from any <li> this feature attaches a
checkbox to - the checkbox itself is now the visual marker, so the
original bullet point is redundant clutter, not a second marker. */
.gr-teeka-list-item { list-style: none !important; }
/* Toolbar "Commentaries" dropdown button - matches .gr-btn-edit /
.gr-btn-settings exactly (border #f0cfc4, maroon text, cream hover). */
/* CHANGED: pill shape + soft shadow, matching the toolbar-wide "soft
rounded pill" redesign - consistent with .gr-btn's own border-radius
and box-shadow treatment in readerToolbar.js rather than this one
button keeping the old sharp-cornered bordered look on its own. */
/* CHANGED: was styled for a text label + caret ("टीका ▾") - now an
icon-only eye.svg button, so font-size and the caret rule are no
longer relevant and removed; border-radius reduced to match the
toolbar-wide radius reduction (see readerToolbar.js). */
.gr-teeka-dropdown-btn { border: none; border-radius: 12px; box-shadow: 0 2px 6px rgba(181,69,27,0.22); transition: box-shadow .15s, transform .15s; }
.gr-teeka-dropdown-btn:hover { background: #fdf0eb; box-shadow: 0 4px 14px rgba(181,69,27,0.34); transform: translateY(-1px); }
.gr-teeka-dropdown-panel {
background: #fff; border: 1px solid #f0cfc4; border-radius: 10px;
box-shadow: 0 4px 16px rgba(181,69,27,0.16); max-height: 60vh; overflow-y: auto;
}
.gr-teeka-dropdown-header {
font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;
/* CHANGED: fixed 11px -> scales with the reader's text size. */
font-size: clamp(12px, calc(var(--gr-font-size, 22px) * 0.6), 17px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: #b5451b; padding: 10px 14px 6px; border-bottom: 1px solid #f7e4da; margin-bottom: 2px;
}
.gr-teeka-dropdown-list { padding: 4px 0; }
.gr-teeka-dropdown-item {
display: flex; align-items: center; gap: 9px; padding: 8px 14px;
/* CHANGED: fixed 14px -> scales with the reader's text size. */
font-size: clamp(15px, calc(var(--gr-font-size, 22px) * 0.82), 26px);
font-family: var(--font-indic);
color: #3a2a20; cursor: pointer; white-space: nowrap;
transition: background .12s;
}
.gr-teeka-dropdown-item:hover { background: #fdf0eb; }
/* CHANGED: matches the same robust custom-checkbox approach as
.gr-teeka-inline-checkbox above, rather than accent-color alone,
which doesn't reliably constrain native checkbox SIZE across
browsers even though it does control the checked-state color. */
.gr-teeka-dropdown-checkbox {
-webkit-appearance: none; appearance: none;
width: 16px !important; height: 16px !important;
min-width: 16px; min-height: 16px; flex-shrink: 0;
margin: 0; padding: 0; cursor: pointer;
border: 1.5px solid #b5451b; border-radius: 3px;
background: #fff; position: relative; box-sizing: border-box;
}
.gr-teeka-dropdown-checkbox:checked { background: #b5451b; border-color: #b5451b; }
.gr-teeka-dropdown-checkbox:checked::after {
content: ''; position: absolute; left: 4.5px; top: 1.5px;
width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Sub-commentaries (tippanis) nested under their parent teeka - shown
only once the parent is checked (see readerToolbar.js), indented to
read as a sub-category rather than a peer option. */
.gr-teeka-dropdown-subitem { padding-left: 34px !important; }
.gr-teeka-dropdown-sublist { display: none; }
.gr-teeka-dropdown-sublist.gr-open { display: block; }
.gr-teeka-dropdown-item-label {
overflow: hidden; text-overflow: ellipsis;
font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;
}
/* Toolbar control only needs to be shown as a fallback once the inline
checkbox list scrolls out of view - hidden by default, toggled by
readerToolbar.js listening to window.grTeekaInterleave.onVisibilityChange. */
.gr-teeka-dropdown-wrap { display: none; }
.gr-teeka-dropdown-wrap.gr-visible { display: inline-block; }
/* ── 37. HEADER LINKS + UPDATES PAGE ───────────────────────────── */
/* Desktop header links (Help, About, Login, Library, Updates) */
.gr-header-link {
display: inline-flex; align-items: center;
color: rgba(255, 255, 255, 0.88) !important; font-size: 0.88em; font-family: system-ui, sans-serif; font-weight: 500;
line-height: inherit; text-decoration: none !important; white-space: nowrap;
padding: 4px 10px; margin: 0 4px 0 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.gr-header-link:hover,
.gr-header-link:focus-visible,
.gr-header-link.is-current { color: #fff !important; background: rgba(255, 255, 255, 0.12); }
/* Mobile menu panel items (Library, Updates) — same look as Home/Help */
.gr-mob-item {
display: flex; align-items: center; width: 100%; box-sizing: border-box; margin: 0;
padding: 15px 20px; border-bottom: 1px solid #f0ebe6; border-left: 3px solid transparent; background: #fff;
font-size: 16px; font-family: system-ui, sans-serif; color: #2c1810 !important;
text-decoration: none !important;
}
.gr-mob-item.is-current { border-left-color: #c0392b; background: #fdf8f5; color: #c0392b !important; font-weight: 600; }
#gr-header-user-menu a.is-current { background: #f5efe9; font-weight: 600; }
/* Updates page (My_wiki:Updates) */
.gr-updates-page { max-width: 1140px; margin: 0 auto; padding: 0 0 40px; }
.gr-updates-intro { margin: 0 0 24px; font-family: system-ui, sans-serif; font-size: 15px; color: #666; line-height: 1.6; }
.gr-updates-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.gr-updates-layout.gr-no-bulletin { grid-template-columns: minmax(0, 1fr); }
.gr-updates-heading,
.gr-bulletin-heading {
font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: #b5451b;
}
.gr-updates-heading { margin: 0 0 6px; }
/* What's new: grouped list */
.gr-updates-feed { min-height: 120px; }
.gr-upd-group { margin: 22px 0 8px; font: 600 14px system-ui, sans-serif; color: #1a2e40; }
.gr-upd-group:first-child { margin-top: 8px; }
.gr-upd-list {
margin: 0; padding: 0;
background: #fff; border: 1px solid #efe4df; border-radius: 10px; overflow: hidden;
box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06);
}
.gr-upd-item {
display: flex; align-items: baseline; gap: 16px;
margin: 0; padding: 12px 18px; border-top: 1px solid #f6efec; border-left: 3px solid transparent;
}
.gr-upd-item:first-child { border-top: 0; }
.gr-upd-item:hover { background: #fdf8f6; }
.gr-upd-item.gr-upd-unseen { border-left-color: #c0392b; background: #fffaf8; }
.gr-upd-main { flex: 1; min-width: 0; }
.gr-upd-title {
font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 1em; font-weight: 600; line-height: 1.45;
color: #c0392b !important; text-decoration: none !important; overflow-wrap: anywhere;
}
.gr-upd-title:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.gr-upd-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 13px; color: #777; }
.gr-upd-work { font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 14px; }
.gr-upd-tag { flex: none; padding: 1px 8px; border-radius: 9px; font: 600 11px/1.6 system-ui, sans-serif; }
.gr-upd-tag.gr-upd-new { background: #fbece8; color: #c0392b; }
.gr-upd-tag.gr-upd-update { background: #eaf1fb; color: #2a5aa8; }
.gr-upd-date { flex: none; font: 13px system-ui, sans-serif; color: #888; white-space: nowrap; }
.gr-upd-empty { margin: 12px 0; padding: 24px; text-align: center; font: 14px system-ui, sans-serif; color: #888;
background: #fff; border: 1px dashed #e6d6cf; border-radius: 10px; }
/* Announcements & events card */
.gr-bulletin {
background: #fff; border: 1px solid #efe4df; border-top: 3px solid #c0392b; border-radius: 10px;
box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06); overflow: hidden;
}
.gr-bulletin.gr-bulletin-is-empty { display: none; }
.gr-bulletin-heading { padding: 12px 18px; background: #fcf6f3; border-bottom: 1px solid #f1e2dc; }
.gr-bulletin-item { padding: 14px 18px; border-top: 1px solid #f6efec; }
.gr-bulletin-item:first-child { border-top: 0; }
.gr-bulletin-item.gr-bulletin-expired { display: none; }
.gr-bulletin-item.gr-bulletin-past { opacity: 0.55; }
.gr-bulletin-meta { display: flex; align-items: center; gap: 8px; font: 12px system-ui, sans-serif; color: #888; }
.gr-bulletin-type { padding: 1px 8px; border-radius: 9px; font-weight: 600; font-size: 11px; background: #eaf1fb; color: #2a5aa8; }
.gr-bulletin-type::before { content: "Announcement"; }
.gr-bulletin-item[data-type="event"] .gr-bulletin-type { background: #fdf1dc; color: #9a5b00; }
.gr-bulletin-item[data-type="event"] .gr-bulletin-type::before { content: "Event"; }
.gr-bulletin-item.gr-bulletin-past .gr-bulletin-type::before { content: "Past event"; }
.gr-bulletin-item-title {
margin-top: 6px; font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 1.05em; font-weight: 600;
line-height: 1.45; color: #1a2e40;
}
.gr-bulletin-item-title a { color: #c0392b; }
.gr-bulletin-where { display: block; margin-top: 2px; font: 13px system-ui, sans-serif; color: #666; }
.gr-bulletin-item-text { margin-top: 4px; font-size: 0.92em; line-height: 1.6; color: #444; }
.gr-bulletin-item-text p { margin: 0; }
.gr-bulletin-where:empty, .gr-bulletin-item-text:empty, .gr-bulletin-date:empty { display: none; }
@media (max-width: 900px) {
.gr-updates-layout { grid-template-columns: minmax(0, 1fr); }
.gr-bulletin { order: -1; } /* announcements first on small screens */
}
/* Phones: title on its own line, tag + date underneath */
@media (max-width: 600px) {
.gr-updates-intro { font-size: 14px; margin-bottom: 18px; }
.gr-upd-item { flex-direction: column; align-items: stretch; gap: 2px; padding: 11px 14px; }
.gr-upd-title { font-size: 0.9em; }
.gr-upd-date { font-size: 12px; }
.gr-bulletin-heading { padding: 10px 14px; }
.gr-bulletin-item { padding: 12px 14px; }
}
/* Minerva menu panel: our list replaces the skin's; the skin's lists are
kept (hidden) because Minerva's own script looks them up. */
#mw-mf-page-left > .gr-mf-native-menu { display: none !important; }
.gr-mob-menu { width: 100%; margin-top: 8px; background: #fff; }
/* ── 38. FOOTNOTE MARKERS AND CARDS ────────────────────────────── */
/* QuickEdit writes the notes; common.js turns them into a superscript at the
point of reading and a card on click. The list it writes at the foot of the
document is taken off the screen but kept for print, where there is nothing
to click and the apparatus belongs at the end. */
/* The annotated words. QuickEdit marks them with a flat yellow highlight,
which is right while editing and shouts on a reading page — a dotted rule
says "there is a note here" without breaking the line of the text. */
#mw-content-text .gra-qe-footnote-highlight {
background: none;
border-bottom: 1px dotted #c9976b;
text-decoration: none;
cursor: pointer; /* the words open the note too, not only the marker */
}
#mw-content-text .gra-qe-footnote-highlight:hover { border-bottom-color: #b5451b; }
.gr-note-marker {
display: inline-block; vertical-align: super;
margin-left: 1px; padding: 0 3px;
font-family: var(--font-ui); font-weight: 600; line-height: 1.5;
/* Relative to the text, but capped: the reader's A+ goes to 30px and an
uncapped marker starts competing with the words it annotates. */
font-size: clamp(10px, 0.62em, 14px);
color: #8a5a2b; background: #fbf1e6; border: 1px solid #eddcc8; border-radius: 4px;
cursor: pointer; user-select: none; white-space: nowrap;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gr-note-marker:hover,
.gr-note-marker:focus-visible { background: #f3e0c9; color: #6d4318; border-color: #ddc3a3; }
.gr-note-marker:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.gr-note-marker-open { background: #b5451b; color: #fff !important; border-color: #b5451b; }
/* The open state for an annotated WORD - used when the card is anchored to
the words themselves, which is the case for a commentary's notes (they
carry no superscript). It must not reverse the text out, or the word it
is meant to point at becomes unreadable. */
#mw-content-text .gra-qe-footnote-highlight.gr-note-hl-open {
background: #fdefe6;
border-bottom: 1px solid #b5451b;
border-radius: 3px;
box-shadow: 0 0 0 2px #fdefe6;
}
/* The card. Fixed, because it is positioned against the marker's viewport
box and follows it on scroll. */
.gr-note-card {
/* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,
so the card opened underneath them. */
position: fixed; z-index: 10500; width: min(380px, calc(100vw - 20px));
background: #fff; border: 1px solid #e7dbd2; border-radius: 10px;
box-shadow: 0 10px 30px rgba(60, 20, 10, 0.16);
overflow: hidden;
}
.gr-note-card[hidden] { display: none; }
.gr-note-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 10px 9px 14px; border-bottom: 1px solid #f1e4db; background: #fdf8f4;
}
.gr-note-card-kind {
font-family: var(--font-indic); font-weight: 600; color: #b5451b;
/* CHANGED: fixed 14px -> scales with the reader's text size. */
font-size: clamp(14px, calc(var(--gr-font-size, 22px) * 0.72), 22px);
}
.gr-note-card-close {
flex: none; width: 26px; height: 26px; padding: 0;
font: 400 18px/1 var(--font-ui); color: #8b7d74;
background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.gr-note-card-close:hover { background: #f3e7df; color: #5a4a41; }
.gr-note-card-body {
padding: 13px 14px 15px;
font-family: var(--font-indic); line-height: 1.7; color: #2c1810;
/* CHANGED: fixed 17px against 22px body text -> scales with it. */
font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.94), 30px);
max-height: 46vh; overflow-y: auto; overflow-wrap: anywhere;
}
/* Phones: a sheet at the bottom reads better than a card floating over the
line, and there is no hover to fall back on. */
@media (max-width: 600px) {
.gr-note-card {
left: 0 !important; right: 0; top: auto !important; bottom: 0;
width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0;
box-shadow: 0 -8px 30px rgba(60, 20, 10, 0.2);
}
.gr-note-card-body { font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.9), 26px); max-height: 50vh; }
}
/* The list QuickEdit keeps at the foot of the document */
.gra-qe-footnotes.gr-notes-listed { display: none; }
@media print {
.gr-note-marker { background: none; border: 0; color: #000; }
.gr-note-card { display: none !important; }
.gra-qe-footnotes.gr-notes-listed { display: block; margin-top: 28px; padding-top: 12px; border-top: 1px solid #ccc; }
.gra-qe-footnote-quote { font-weight: 600; margin-right: 6px; }
.gra-qe-footnote-item,
.gra-qe-footnote-text { font-family: var(--font-indic); }
}
/* ── 39. LINE ALIGNMENT CARRIED FROM THE SOURCE DOCUMENT ──────────
A converted document puts one of these on a line whose source
paragraph carried an explicit alignment (Katha sets 288 paragraphs
CENTER - every invocation and colophon). New classes only: no existing
rule is overridden, and a line whose source set no alignment gets no
class and keeps whatever the site already gives it. */
.gr-align-center { text-align: center; }
/* The closing verse number is one unit - "॥ ४ ॥" is separated by ordinary
spaces, so without this a narrow column wraps between them and strands
the number on a line of its own. */
.gr-verse-num { white-space: nowrap; }
.gr-align-right { text-align: right; }
.gr-align-justify { text-align: justify; }
/* Footnotes belonging to an interleaved commentary, grouped under its name
in the right-hand panel. Shown only where that list is shown. */
.gr-teeka-notes-group { margin-top: 14px; }
.gr-teeka-notes-title {
font-family: var(--font-deva);
font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.68), 19px);
font-weight: 600; color: #b5451b;
padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid #f1e4db;
}
/* Footnote panel: one section per source document. The page's own notes
come first, then a section per commentary shown on the page. */
.gra-footnote-section-title {
font-family: var(--font-deva);
font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.66), 18px);
font-weight: 600; color: #b5451b;
margin: 14px 4px 6px; padding-bottom: 4px;
border-bottom: 1px solid #f1e4db;
}
.gra-footnote-section-title:first-child { margin-top: 2px; }
.gra-footnote-section-own { color: #7a6a60; }
/* Repeated on the card, for when the heading has scrolled out of view. */
.gra-footnote-source {
font-family: var(--font-deva);
font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
color: #b5451b; opacity: 0.85; margin-bottom: 2px;
}
/* The annotation count badge was removed (it was clipped by the round
toggle's own overflow). This keeps it hidden for anyone still served a
cached copy of the old gadget. */
#gra-toggle-badge { display: none !important; }
/* ── LINK LANDING ───────────────────────────────────────────────────
Where a copied id or a bookmark citation link lands. The flash used to
be injected by copyId.js; it lives here so the landing still reads when
only common.js is loaded. */
.gid-target {
animation: gid-target-flash 2.4s ease-out 1;
border-radius: 4px;
}
@keyframes gid-target-flash {
0%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }
100% { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
.gid-target { animation: none; background: rgba(181,69,27,0.14); }
}
/* ── BOOKMARK CITATION ──────────────────────────────────────────────
The reference a bookmark produces, shown on its card and copyable in
one click. Set small and in the UI face deliberately: it is apparatus
for the reader to take away, not part of the text. */
.gra-bookmark-cite {
margin-top: 6px;
/* --font-translit, not --font-indic. The reference is romanised - IAST
author, IAST title, Latin site name and URL - and Gentium Book Plus
is the only family here with a REAL italic face (Adishila, which
--font-indic leads with, has none at this weight, so the italic title
fell back to a synthetic slant or to nothing at all). Gentium's
unicode-range covers Latin only, so a Devanagari fallback title still
lands on Adishila further down the stack. */
font-family: var(--font-translit);
font-synthesis: style; /* allow a slant for the Devanagari case */
font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px);
line-height: 1.5; color: #6b5b52;
/* Ragged right and flush left. The hanging indent that was here reads
correctly in a printed reference LIST, where it separates one entry
from the next; on a single card it just looked like the lines had
slipped. Justification came in from the panel and stretched the word
gaps, which is what made the spacing look broken. */
text-align: left;
text-indent: 0;
padding-left: 0;
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
.gra-bookmark-cite a {
color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9;
overflow-wrap: anywhere; /* only the URL may break mid-token */
}
.gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; }
.gra-bookmark-cite i,
.gra-bookmark-cite em { font-style: italic; font-synthesis: style; }
/* Where the bookmark sits in the text. A caption, not part of the
citation - so it is set in the UI face and kept visually apart from
the reference below it. */
.gra-bookmark-locator {
margin-top: 5px;
font-family: var(--font-ui);
font-size: clamp(10px, calc(var(--gr-font-size, 22px) * 0.48), 13px);
font-weight: 600;
letter-spacing: .02em;
color: #8a7a70;
}
.gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gra-cite-copy {
margin-top: 6px; padding: 3px 10px;
font-family: var(--font-ui);
font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
font-weight: 600; color: #b5451b;
background: #fff5f2; border: 1px solid #f0cfc4; border-radius: 20px;
cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.gra-cite-copy:hover { background: #b5451b; color: #fff; border-color: #b5451b; }
.gra-cite-copy--done { background: #2e6e40; color: #fff; border-color: #2e6e40; }