MediaWiki:Common.css - Revision history

Vaishnavi at 12:07, 30 September 2026

2026-09-30T12:07:15Z

← Older revision		Revision as of 12:07, 30 September 2026
Line 2,916:		Line 2,916:
	.gra-bookmark-cite {		.gra-bookmark-cite {
	margin-top: 6px;		margin-top: 6px;
	font-family: var(--font-~~indic~~);		/* --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

Vaishnavi at 12:01, 30 September 2026

2026-09-30T12:01:31Z

@@ Line 2,918: / Line 2,918: @@
    font-family: var(--font-indic);
    font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px);
-   line-height: 1.45; color: #6b5b52;
+   line-height: 1.5; color: #6b5b52;
-   overflow-wrap: anywhere;
+  /* Ragged right and flush left. The hanging indent that was here reads
+}
 .gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; }
 .gra-bookmark-cite i { font-style: italic; }
 /* Where the bookmark sits in the text. A caption, not part of the

Vaishnavi at 11:59, 30 September 2026

2026-09-30T11:59:04Z

← Older revision		Revision as of 11:59, 30 September 2026
Line 2,939:		Line 2,939:
	.gra-cite-locator { color: #a08b7e; }		.gra-cite-locator { color: #a08b7e; }

	/* ~~The~~ in-text ~~line copies on click~~, so it ~~reads as something you can~~		/* Where the bookmark sits in the text. A caption, not part of the
	~~press without adding another button to~~ the ~~card~~. */		citation - so it is set in the UI face and kept visually apart from
	.gra-bookmark-~~intext~~ { ~~cursor~~: ~~pointer~~; ~~border~~-~~radius~~: ~~4px~~; ~~transition~~: ~~background~~ .~~15s~~, ~~color .15s~~; }		the reference below it. */
	~~.gra-bookmark~~-~~intext:hover { background: #fff5f2; color~~: ~~#6b5b52~~; }		.gra-bookmark-locator {
	~~.gra-intext-~~-~~done { background~~: ~~#e6f2ea~~; color: #~~2e6e40~~; }		margin-top: 5px;
	~~.gra-intext--done .gra-cite-locator { color: #2e6e40;~~ }		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-actions { display: flex; flex-wrap: wrap; gap: 6px; }

Vaishnavi at 11:05, 30 September 2026

2026-09-30T11:05:53Z

@@ Line 2,887: / Line 2,887: @@
    font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
    color: #b5451b; opacity: 0.85; margin-bottom: 2px;
+}
@@ Line 2,900: / Line 2,921: @@
    overflow-wrap: anywhere;
+}
 .gra-cite-copy {
    margin-top: 6px; padding: 3px 10px;

Vaishnavi at 11:07, 29 September 2026

2026-09-29T11:07:04Z

← Older revision		Revision as of 11:07, 29 September 2026
Line 2,888:		Line 2,888:
	color: #b5451b; opacity: 0.85; margin-bottom: 2px;		color: #b5451b; opacity: 0.85; margin-bottom: 2px;
	}		}

			/* ── 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-family: var(--font-indic);
			font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px);
			line-height: 1.45; color: #6b5b52;
			overflow-wrap: anywhere;
			}
			.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; }

Vaishnavi at 10:36, 29 September 2026

2026-09-29T10:36:32Z

← Older revision		Revision as of 10:36, 29 September 2026
Line 2,521:		Line 2,521:
	vertical-align offsets by hand. */		vertical-align offsets by hand. */
	.gr-teeka-cb-wrap {		.gr-teeka-cb-wrap {
	~~display~~: inline-flex~~; align~~-~~items: center; gap~~: 6px;		/* CHANGED from inline-flex + vertical-align:middle. An inline-flex box
	~~vertical-align~~: ~~middle~~;		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 {		.gr-teeka-inline-checkbox {
	-webkit-appearance: none; appearance: none;		-webkit-appearance: none; appearance: none;
	width: ~~15px~~ !important; height: ~~15px~~ !important;		/* Sized in em so it keeps pace with A- / A+ rather than staying a fixed
	min-width: ~~15px~~; min-height: ~~15px~~;		15px box against text that grows; clamped so it stays a sensible
	margin: 0; padding: 0; cursor: pointer;		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;		border: 1.5px solid #b5451b; border-radius: 3px;
	background: #fff; position: relative; flex-shrink: 0;		background: #fff; position: relative; flex-shrink: 0;
Line 2,537:		Line 2,555:
	}		}
	.gr-teeka-inline-checkbox:checked::after {		.gr-teeka-inline-checkbox:checked::after {
	content: ''; position: absolute; left: ~~4px~~; top: ~~1px~~;		/* Placed and sized in % of the box, so the tick follows the em-based
	width: ~~4px~~; height: ~~8px~~;		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;		border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);		transform: rotate(45deg);

Vaishnavi at 05:09, 29 September 2026

2026-09-29T05:09:29Z

← Older revision		Revision as of 05:09, 29 September 2026
Line 58:		Line 58:

	/* ── 2. FONTS ──────────────────────────────────────────────────── */		/* ── 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-face {
	font-family: "Adishila";		font-family: "Adishila";
	src: url("/resources/fonts/adishila/Adishila.ttf") format("truetype");		src: url("/resources/fonts/adishila/Adishila.ttf") format("truetype");
	font-weight: normal; font-style: normal;		font-weight: normal; font-style: normal;
			font-display: swap;
	}		}
	@font-face {		@font-face {
Line 67:		Line 75:
	src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");		src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");
	font-weight: bold; font-style: normal;		font-weight: bold; font-style: normal;
			font-display: swap;
	}		}
	@font-face {		@font-face {
Line 72:		Line 81:
	src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");		src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");
	font-weight: bold; font-style: italic;		font-weight: bold; font-style: italic;
			font-display: swap;
	}		}
	@font-face {		@font-face {
Line 77:		Line 87:
	src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");		src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
	font-weight: normal; font-style: normal;		font-weight: normal; font-style: normal;
			font-display: swap;
	}		}
	@font-face {		@font-face {
Line 82:		Line 93:
	src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");		src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
	font-weight: bold; font-style: normal;		font-weight: bold; font-style: normal;
			font-display: swap;
	}		}
	@font-face {		@font-face {
Line 87:		Line 99:
	src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");		src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");
	font-weight: bold; font-style: normal;		font-weight: bold; font-style: normal;
			font-display: swap;
	}		}
	@font-face {		@font-face {
Line 92:		Line 105:
	src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");		src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");
	font-weight: normal; font-style: normal;		font-weight: normal; font-style: normal;
			font-display: swap;
	}		}
	@font-face {		@font-face {
Line 97:		Line 111:
	src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");		src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");
	font-weight: normal; font-style: normal;		font-weight: normal; font-style: normal;
			font-display: swap;
	}		}

Vaishnavi at 10:40, 28 September 2026

2026-09-28T10:40:57Z

@@ Line 2,744: / Line 2,744: @@
 .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 card. Fixed, because it is positioned against the marker's viewport
@@ Line 2,823: / Line 2,834: @@
    font-weight: 600; color: #b5451b;
    padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid #f1e4db;
+}

Vaishnavi at 07:23, 28 September 2026

2026-09-28T07:23:06Z

← Older revision		Revision as of 07:23, 28 September 2026
Line 30:		Line 30:
	plain letters would come from Adishila and only the accented ones		plain letters would come from Adishila and only the accented ones
	(ā ī ṛ ṣ …) from Gentium, and the line would look patched together. */		(ā ī ṛ ṣ …) 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;		--font-deva: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
	/* ~~CHANGED~~: ~~Adishila now LEADS~~. Gentium used to sit first so that IAST		/* The READING face. Adishila leads: this is what moola, bhashya, teeka
	came out in one face, but that also made it the first family asked		and every other run of body text is set in. AdishilaDev follows only
	for Devanagari ~~text -~~ and any locally-installed "Gentium Book Plus"		as a fallback, for the rare glyph the plain face lacks.
	answers for codepoints outside the @font-face unicode-range, so the		Gentium used to sit first here, so that IAST came out in one face -
	shlokas stopped being Adishila. IAST ~~keeps~~ its Gentium ~~through~~		but that also made it the first family asked for Devanagari, and any
	--font-translit ~~below~~, ~~which is applied~~ only in that view. */		locally-installed "Gentium Book Plus" answers for codepoints outside
	--font-indic: '~~AdishilaDev~~', '~~Adishila~~', 'Noto Serif Devanagari',		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 Tamil', 'Noto Sans Tamil',
	'Noto Serif Kannada', 'Noto Sans Kannada',		'Noto Serif Kannada', 'Noto Sans Kannada',
Line 48:		Line 53:
	/* Latin-first, for the IAST reading only: there plain letters and		/* Latin-first, for the IAST reading only: there plain letters and
	accented ones must come from one face or the line looks patched. */		accented ones must come from one face or the line looks patched. */
	--font-translit: 'Gentium Book Plus', '~~AdishilaDev~~', '~~Adishila~~', serif;		--font-translit: 'Gentium Book Plus', 'Adishila', 'AdishilaDev', serif;
	--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;		--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
	}		}

Vaishnavi at 06:55, 28 September 2026

2026-09-28T06:55:28Z

@@ Line 31: / Line 31: @@
       (ā ī ṛ ṣ …) from Gentium, and the line would look patched together. */
    --font-deva:  'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
-   --font-indic: 'Gentium Book Plus',
+   /* CHANGED: Adishila now LEADS. Gentium used to sit first so that IAST
-                'AdishilaDev', 'Adishila', 'Noto Serif Devanagari',
+     came out in one face, but that also made it the first family asked
                  'Noto Serif Tamil', 'Noto Sans Tamil',
                  'Noto Serif Kannada', 'Noto Sans Kannada',
@@ Line 41: / Line 46: @@
                  'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi',
                  'Noto Serif Oriya', 'Noto Sans Oriya', serif;
    --font-ui:    system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
@@ Line 213: / Line 221: @@
    font-size: calc(1em * var(--gr-script-scale));
+}
 /* The bold and italic Adishila faces are separate families rather than
     weights, so a transliterated prateeka or quotation has to ask for the
@@ Line 506: / Line 519: @@
    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-indic);
+   text-align:center; font-family: var(--font-deva);
+}
@@ Line 2,720: / Line 2,743: @@
     box and follows it on scroll. */
 .gr-note-card {
-   position: fixed; z-index: 1200; width: min(380px, calc(100vw - 20px));
+  /* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,
    background: #fff; border: 1px solid #e7dbd2; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(60, 20, 10, 0.16);
@@ Line 2,784: / Line 2,809: @@
 .gr-align-right   { text-align: right; }
 .gr-align-justify { text-align: justify; }