MediaWiki:Common.css: Difference between revisions

(2 intermediate revisions by the same user not shown)

Line 2,916:

.gra-bookmark-cite {

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

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

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 */

}

~~/* The reference hangs its continuation lines, the way a reference list~~

~~does on paper. The link inside it stays on the citation's own colour~~

~~until hovered - it is a citation, not a navigation control. */~~

~~.gra-bookmark-cite { padding-left: 1.4em; text-indent: -1.4em; }~~

~~.gra-bookmark-cite a { color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9; }~~

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

.gra-bookmark-~~intext~~ {

/* Where the bookmark sits in the text. A caption, not part of the

margin-top: ~~4px~~;

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;

~~overflow-wrap: anywhere;~~

}

~~.gra-cite-locator { color: #a08b7e; }~~

~~/* The in-text line copies on click, so it reads as something you can~~

~~press without adding another button to the card. */~~

~~.gra-bookmark-intext { cursor: pointer; border-radius: 4px; transition: background .15s, color .15s; }~~

@@ Line 2,916: / Line 2,916: @@
 .gra-bookmark-cite {
    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);
-   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
+     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 */
 }
-/* The reference hangs its continuation lines, the way a reference list
-   does on paper. The link inside it stays on the citation's own colour
-   until hovered - it is a citation, not a navigation control. */
-.gra-bookmark-cite { padding-left: 1.4em; text-indent: -1.4em; }
-.gra-bookmark-cite a { color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9; }
 .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; }
-.gra-bookmark-intext {
+/* Where the bookmark sits in the text. A caption, not part of the
-   margin-top: 4px;
+   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;
-  overflow-wrap: anywhere;
 }
-.gra-cite-locator { color: #a08b7e; }
-/* The in-text line copies on click, so it reads as something you can
-   press without adding another button to the card. */
-.gra-bookmark-intext { cursor: pointer; border-radius: 4px; transition: background .15s, color .15s; }
-.gra-bookmark-intext:hover { background: #fff5f2; color: #6b5b52; }
-.gra-intext--done { background: #e6f2ea; color: #2e6e40; }
-.gra-intext--done .gra-cite-locator { color: #2e6e40; }
 .gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }