MediaWiki:Common.css: Difference between revisions

(6 intermediate revisions by the same user not shown)

Line 58:

/* ── 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 67:

Line 75:

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

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

font-display: swap;

}

@font-face {

Line 72:

Line 81:

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

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

font-display: swap;

}

@font-face {

Line 77:

Line 87:

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

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

font-display: swap;

}

@font-face {

Line 82:

Line 93:

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

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

font-display: swap;

}

@font-face {

Line 87:

Line 99:

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

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

font-display: swap;

}

@font-face {

Line 92:

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 97:

Line 111:

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

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

font-display: swap;

}

Line 2,506:

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,522:

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,853:

Line 2,888:

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