MediaWiki:Common.css: Difference between revisions

(8 intermediate revisions by the same user not shown)

Line 30:

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;

/* ~~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 Kannada', 'Noto Sans Kannada',

Line 48:

Line 53:

/* 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', '~~AdishilaDev~~', '~~Adishila~~', serif;

--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 {

Line 62:

Line 75:

src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");

font-weight: bold; font-style: normal;

font-display: swap;

}

@font-face {

Line 67:

Line 81:

src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");

font-weight: bold; font-style: italic;

font-display: swap;

}

@font-face {

Line 72:

Line 87:

src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

Line 77:

Line 93:

src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");

font-weight: bold; font-style: normal;

font-display: swap;

}

@font-face {

Line 82:

Line 99:

src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");

font-weight: bold; font-style: normal;

font-display: swap;

}

@font-face {

Line 87:

Line 105:

src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

Line 92:

Line 111:

src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

Line 2,501:

Line 2,521:

vertical-align offsets by hand. */

.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 {

-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;

background: #fff; position: relative; flex-shrink: 0;

Line 2,517:

Line 2,555:

}

.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;

transform: rotate(45deg);

Line 2,739:

Line 2,779:

.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

Line 2,819:

Line 2,870:

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; }

@@ Line 30: / Line 30: @@
       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;
-   /* 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 Kannada', 'Noto Sans Kannada',
@@ Line 48: / Line 53: @@
    /* 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', 'AdishilaDev', 'Adishila', serif;
+   --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 {
@@ Line 62: / Line 75: @@
    src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 67: / Line 81: @@
    src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");
    font-weight: bold; font-style: italic;
+  font-display: swap;
 }
 @font-face {
@@ Line 72: / Line 87: @@
    src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 77: / Line 93: @@
    src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 82: / Line 99: @@
    src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 87: / Line 105: @@
    src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 92: / Line 111: @@
    src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
@@ Line 2,501: / Line 2,521: @@
     vertical-align offsets by hand. */
 .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 {
    -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;
+px 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
+px. 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;
@@ Line 2,517: / Line 2,555: @@
 }
 .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;
    transform: rotate(45deg);
@@ Line 2,739: / Line 2,779: @@
 .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
@@ Line 2,819: / Line 2,870: @@
    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 {
+%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }
+%    { 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; }