/* Christian Atlas — Scripture Library All selectors are scoped under .sl so the module cannot restyle the host Atlas. Tokens: map --sl-* to the Atlas v0.3 theme variables at integration (see docs/INTEGRATION.md). */ @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-greek-400-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-greek-ext-400-normal.woff2) format("woff2"); unicode-range: U+1F00-1FFF; } @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/eb-garamond-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F; } @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/eb-garamond-greek-500-normal.woff2) format("woff2"); unicode-range: U+0370-03FF; } @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/eb-garamond-greek-ext-500-normal.woff2) format("woff2"); unicode-range: U+1F00-1FFF; } @font-face { font-family: "SL Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/eb-garamond-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F; } @font-face { font-family: "SL Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+2000-206F; } @font-face { font-family: "SL Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+1E00-1E9F; } @font-face { font-family: "SL Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-serif-hebrew-hebrew-400-normal.woff2) format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family: "SL Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/noto-serif-hebrew-hebrew-500-normal.woff2) format("woff2"); unicode-range: U+0590-05FF,U+FB1D-FB4F; } /* ---------- Tokens: Light, Bordeaux & gold (v0.4.1: the only light treatment; the Atlas's tokens.css values) ---------- */ .sl { --sl-page: #faf6ef; --sl-surface: #fdfaf5; --sl-sunk: #f4ecdf; --sl-ink: #2b2118; --sl-ink-soft: #4d3d32; --sl-ink-faint: #6d5c4e; --sl-rubric: #7a1e2b; /* rubrication: structure (verse numbers, initials) and the words of Jesus */ --sl-gold: #775a1d; /* gold for small text */ --sl-verdigris: #1f4a35; /* original-language and lexical material */ --sl-rule: #cbb894; --sl-focus: #8f2f42; --sl-text-differs: #7A3E8C; /* textual variation */ --sl-translation: #1f4a35; /* translation variation */ --sl-interpret: #7a1e2b; /* interpretive variation */ --sl-shadow: 0 1px 0 rgba(84, 60, 26, .18), 0 10px 30px -18px rgba(84, 60, 26, .55); --sl-font: "SL Garamond", "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sl-font-heb: "SL Hebrew", "SBL Hebrew", "Ezra SIL", "Noto Serif Hebrew", "Taamey Frank CLM", serif; --sl-size: 1.125rem; /* user-adjustable */ --sl-measure: 36em; color: var(--sl-ink); background: var(--sl-page); font-family: var(--sl-font); font-size: var(--sl-size); line-height: 1.6; font-variant-numeric: oldstyle-nums; font-kerning: normal; min-height: 100%; -webkit-text-size-adjust: 100%; } /* ---------- Dark: Charcoal & Parchment (v0.4.1: the only dark treatment; the Atlas's tokens.css values) ---------- */ .sl[data-sl-theme="dark"], :root[data-theme="dark"] .sl { --sl-page: #1c1a18; --sl-surface: #272421; --sl-sunk: #161412; --sl-ink: #ece2cc; --sl-ink-soft: #d7cdb7; --sl-ink-faint: #b3a995; --sl-rubric: #d48f94; /* the Atlas's dark burgundy derivation, color-mix(#c15f66 70%, white); 6.2:1 on #1c1a18 */ --sl-gold: #ccb07a; --sl-verdigris: #a9c99a; --sl-rule: #564f47; --sl-focus: #f0d69c; --sl-text-differs: #C9A0DA; --sl-translation: #a9c99a; --sl-interpret: #d48f94; --sl-shadow: 0 1px 0 rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.9); } .sl *, .sl *::before, .sl *::after { box-sizing: border-box; } :where(.sl) a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; } :where(.sl) a:hover { text-decoration-color: currentColor; } .sl :focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; border-radius: 2px; } :where(.sl) button { font: inherit; color: inherit; } .sl .sl-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sl [lang="grc"] { font-family: var(--sl-font); font-variant-numeric: normal; } .sl [lang="he"], .sl [lang="hbo"], .sl [lang="arc"] { font-family: var(--sl-font-heb); font-size: 1.22em; line-height: 2.1; } /* rc.14 (READ-11): Aramaic words inside a Hebrew line (and the reverse) keep the line's size, not a compounded one */ .sl :is([lang="he"], [lang="hbo"], [lang="arc"]) :is([lang="he"], [lang="hbo"], [lang="arc"]) { font-size: 1em; line-height: inherit; } /* ---------- Top bar (quiet) ---------- */ .sl-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem; padding: .5rem max(1rem, env(safe-area-inset-left)); background: color-mix(in srgb, var(--sl-page) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--sl-rule); } .sl-bar__home { display: inline-flex; align-items: center; gap: .28em; min-height: 2.5rem; font-weight: 500; text-decoration: none; letter-spacing: .01em; white-space: nowrap; } .sl-bar__home span:first-child { color: var(--sl-rubric); } @media (max-width: 30rem) { .sl-bar { gap: .25rem; padding-inline: .6rem; } .sl-bar__lib { display: none; } .sl-bar .sl-iconbtn { min-width: 2.25rem; padding: 0 .35rem; } .sl-search-inline { flex-basis: 8rem; } } .sl-bar__nav { display: flex; gap: .25rem; margin-left: auto; align-items: center; } .sl-iconbtn, .sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: 2.5rem; min-width: 2.5rem; padding: 0 .7rem; border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer; text-decoration: none; font-size: .95em; } .sl-iconbtn:hover, .sl-btn:hover { background: var(--sl-sunk); } .sl-btn--outline { border-color: var(--sl-rule); } .sl-btn--solid { background: var(--sl-ink); color: var(--sl-page); } .sl-btn--solid:hover { background: var(--sl-ink-soft); } .sl-btn[disabled] { opacity: .5; cursor: not-allowed; } .sl-svg { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .sl-search-inline { position: relative; flex: 1 1 14rem; max-width: 26rem; } .sl-search-inline input { width: 100%; min-height: 2.5rem; padding: .3rem .9rem .3rem 2.3rem; font: inherit; font-size: .95em; color: var(--sl-ink); background: var(--sl-surface); border: 1px solid var(--sl-rule); border-radius: 999px; } .sl-search-inline .sl-svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--sl-ink-faint); } /* ---------- Layout ---------- */ .sl-main { padding: 1.5rem 1rem 6rem; } .sl-page { max-width: var(--sl-measure); margin: 0 auto; } .sl-wide { max-width: 64rem; margin: 0 auto; } .sl h1, .sl h2, .sl h3 { font-weight: 500; line-height: 1.2; margin: 1.6em 0 .5em; } .sl h1 { font-size: 2.2em; margin-top: .4em; letter-spacing: -.005em; } .sl h2 { font-size: 1.45em; } .sl h3 { font-size: 1.15em; } .sl p { margin: 0 0 .8em; } .sl-lede { font-size: 1.15em; color: var(--sl-ink-soft); max-width: 34em; } .sl-muted { color: var(--sl-ink-faint); } .sl-small { font-size: .85em; } .sl hr { border: 0; border-top: 1px solid var(--sl-rule); margin: 2rem 0; } /* ---------- Reader ---------- */ .sl-reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 3rem; max-width: var(--sl-measure); margin: 0 auto; transition: max-width .25s ease; } .sl-reader.has-gloss { max-width: calc(var(--sl-measure) + 25rem); grid-template-columns: minmax(0, var(--sl-measure)) minmax(18rem, 22rem); } .sl-reader__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 1.25rem; } .sl-reader__title { margin: 0; font-size: 1.9em; } .sl-reader__title button { all: unset; cursor: pointer; border-bottom: 1px dashed var(--sl-rule); } .sl-reader__title button:focus-visible { outline: 2px solid var(--sl-focus); } .sl-reader__meta { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; } .sl-edition-chip { font-size: .85em; color: var(--sl-ink-soft); background: none; border: 1px solid var(--sl-rule); border-radius: 999px; padding: .15rem .65rem; cursor: pointer; } .sl-text { font-size: 1.06em; line-height: 1.75; hyphens: auto; -webkit-hyphens: auto; } .sl-chapter-title { font-style: italic; color: var(--sl-ink-soft); margin: 0 0 .8em; } .sl-intro { font-size: .95em; color: var(--sl-ink-soft); border-left: 2px solid var(--sl-rule); padding-left: 1rem; margin-bottom: 1.5rem; } .sl-para { margin: 0 0 .9em; text-align: left; } .sl-q1 { display: block; padding-left: 1.5em; text-indent: -1em; } .sl-q2 { display: block; padding-left: 2.6em; text-indent: -1em; } .sl-head { display: block; margin: 1.2em 0 .4em; font-style: italic; color: var(--sl-ink-soft); font-size: .92em; } .sl-head--d { font-style: normal; color: var(--sl-rubric); letter-spacing: .06em; font-variant-caps: small-caps; } .sl-v { scroll-margin-top: 5rem; border-radius: 3px; } .sl-v.is-target { background: color-mix(in srgb, var(--sl-gold) 22%, transparent); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--sl-gold) 22%, transparent); } .sl-vn { font-size: .62em; vertical-align: .55em; line-height: 0; color: var(--sl-rubric); font-variant-numeric: lining-nums; margin: 0 .25em 0 .1em; text-decoration: none; font-weight: 500; } .sl-wj { color: inherit; } .sl[data-wj="on"] .sl-wj { color: var(--sl-rubric); } /* v0.4.1: red letters inside a highlight stay legible (WCAG AA): in Dark the highlight grounds are mid-dark, so the words of Jesus take a lighter rose there (5.2:1 on the yellow and green highlights, 6:1 on pink); in Light the burgundy already reads at 7:1 or more on every highlight. */ .sl[data-wj="on"][data-sl-theme="dark"] .sl-wj .sl-w.sl-hl { color: #f4c4c8; } .sl-add { font-style: italic; } .sl-note-mark { font-size: .7em; vertical-align: .5em; line-height: 0; color: var(--sl-gold); background: none; border: 0; padding: 0 .1em; cursor: pointer; } /* Illuminated initial — the one ornament */ .sl-initial { float: left; font-size: 3.6em; line-height: .82; margin: .06em .12em 0 0; padding: .08em .1em .02em; color: var(--sl-rubric); background: linear-gradient(var(--sl-surface), var(--sl-surface)) padding-box, linear-gradient(135deg, var(--sl-gold), color-mix(in srgb, var(--sl-gold) 50%, var(--sl-page)) 55%, var(--sl-gold)) border-box; border: .06em solid transparent; box-shadow: inset 0 0 0 .05em color-mix(in srgb, var(--sl-gold) 45%, transparent); font-weight: 500; } .sl-chapter-num { color: var(--sl-rubric); font-variant-numeric: lining-nums; } /* Study mode: verse-by-verse with the original */ .sl-study .sl-vrow { display: grid; grid-template-columns: 2.2rem minmax(0,1fr); gap: 0 .5rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sl-rule) 55%, transparent); } .sl-study .sl-vrow:last-child { border-bottom: 0; } .sl-study .sl-vnum { color: var(--sl-rubric); font-variant-numeric: lining-nums; font-size: .85em; padding-top: .25em; text-decoration: none; } .sl-orig { margin-top: .35rem; color: var(--sl-ink); } .sl-orig[dir="rtl"] { text-align: right; } .sl-orig__label { display: block; font-size: .72em; color: var(--sl-verdigris); margin-bottom: .1rem; } .sl-orig__label[dir] { text-align: inherit; } .sl-tok { all: unset; cursor: pointer; border-radius: 3px; padding: 0 .06em; border-bottom: 1px solid color-mix(in srgb, var(--sl-verdigris) 35%, transparent); } .sl-tok:hover { background: color-mix(in srgb, var(--sl-verdigris) 14%, transparent); } .sl-tok:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 1px; } .sl-tok.is-selected { background: color-mix(in srgb, var(--sl-verdigris) 24%, transparent); border-bottom-color: var(--sl-verdigris); } .sl-tok.is-phrase { background: color-mix(in srgb, var(--sl-verdigris) 12%, transparent); } .sl-tok.is-curated { border-bottom: 2px solid var(--sl-gold); } .sl-tok-sep { white-space: pre-wrap; } .sl-aligned { background: color-mix(in srgb, var(--sl-verdigris) 22%, transparent); border-radius: 2px; } .sl-aligned--textual { background: color-mix(in srgb, var(--sl-text-differs) 22%, transparent); } .sl-app-mark { font-size: .7em; vertical-align: .45em; line-height: 0; color: var(--sl-text-differs); padding: 0 .05em; } .sl-ketiv { color: var(--sl-ink-faint); } /* Verse badges: three kinds of variation, never conflated */ .sl-badges { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: .3rem; margin-left: .4rem; vertical-align: .1em; } .sl-badge { text-decoration: none; display: inline-flex; align-items: center; gap: .3em; font-size: .7em; line-height: 1.3; padding: .1em .55em; border-radius: 999px; border: 1px solid currentColor; background: none; cursor: pointer; white-space: nowrap; } .sl-badge--text { color: var(--sl-text-differs); } .sl-badge--translation { color: var(--sl-translation); } .sl-badge--interpretation { color: var(--sl-interpret); } .sl-chapnav { display: flex; justify-content: space-between; gap: 1rem; margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--sl-rule); } /* ---------- Gloss (marginal on wide screens, drawer on narrow) ---------- */ .sl-gloss { position: fixed; top: 4.25rem; width: min(22rem, 34vw); max-height: calc(100vh - 5.5rem); overflow: auto; z-index: 15; padding: 1rem 1.1rem 1.5rem; background: var(--sl-surface); border-left: 3px double var(--sl-rule); box-shadow: var(--sl-shadow); border-radius: 2px 6px 6px 2px; font-size: .95em; overscroll-behavior: contain; } .sl-gloss__close { float: right; margin: -.4rem -.5rem 0 .5rem; } .sl-gloss__word { font-size: 2em; line-height: 1.25; margin: 0; color: var(--sl-verdigris); font-weight: 500; } .sl-gloss__word[lang="he"], .sl-gloss__word[lang="arc"] { font-size: 2.4em; line-height: 1.5; } .sl-gloss__translit { font-style: italic; color: var(--sl-ink-soft); margin: 0 0 .6rem; } .sl-gloss section { padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--sl-rule) 70%, transparent); } .sl-gloss section > h3 { font-size: .95em; margin: 0 0 .35rem; color: var(--sl-ink-soft); font-weight: 500; } .sl-gloss dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; } .sl-gloss dt { color: var(--sl-ink-faint); } .sl-gloss dd { margin: 0; } .sl-gloss ul { margin: .2rem 0; padding-left: 1.1rem; } .sl-gloss li { margin: .15rem 0; } .sl-source { display: block; font-size: .8em; color: var(--sl-ink-faint); margin-top: .35rem; } .sl-gloss .sl-editorial { border-left: 2px solid var(--sl-gold); padding-left: .8rem; margin-left: -.1rem; } .sl-gloss .sl-editorial h3 { margin-top: .6rem; } .sl-editorial__label { display: block; font-size: .78em; color: var(--sl-gold); margin-bottom: .2rem; } .sl-lexdef { font-size: .92em; } .sl-lexdef .sense { display: block; margin: .15em 0 0 .8em; } .sl-lexdef .stem { color: var(--sl-verdigris); } .sl-status { display: inline-block; font-size: .75em; padding: 0 .45em; border-radius: 3px; background: var(--sl-sunk); color: var(--sl-ink-soft); } .sl-occ { font-size: .9em; } .sl-occ li { list-style: none; margin-left: -1.1rem; } .sl-occ a { text-decoration: none; } .sl-occ .ref { color: var(--sl-rubric); font-variant-numeric: lining-nums; margin-right: .35em; } .sl-occ mark { background: color-mix(in srgb, var(--sl-verdigris) 22%, transparent); color: inherit; border-radius: 2px; } .sl-option { margin: .4rem 0; } .sl-option b { font-weight: 500; } .sl-preview { position: fixed; z-index: 40; pointer-events: none; max-width: 18rem; padding: .45rem .65rem; background: var(--sl-ink); color: var(--sl-page); border-radius: 6px; font-size: .85em; line-height: 1.35; box-shadow: var(--sl-shadow); } .sl-preview .w { font-size: 1.15em; } @media (max-width: 62rem) { .sl-reader.has-gloss { grid-template-columns: minmax(0,1fr); max-width: var(--sl-measure); } .sl-gloss { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto; width: auto; z-index: 30; max-height: min(72vh, 40rem); border-left: 0; border-top: 3px double var(--sl-rule); border-radius: 14px 14px 0 0; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); animation: sl-rise .22s ease-out; } .sl-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(20, 14, 6, .35); } } @keyframes sl-rise { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } } /* ---------- Sheets and menus ---------- */ .sl-sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding: 4rem 1rem 1rem; background: rgba(20, 14, 6, .4); } .sl-sheet__panel { width: min(46rem, 100%); max-height: calc(100vh - 6rem); overflow: auto; background: var(--sl-surface); border-radius: 10px; box-shadow: var(--sl-shadow); padding: 1rem 1.25rem 1.5rem; } .sl-sheet__panel h2 { margin-top: .2em; } .sl-filter { width: 100%; min-height: 2.75rem; padding: .4rem .9rem; font: inherit; background: var(--sl-page); color: var(--sl-ink); border: 1px solid var(--sl-rule); border-radius: 8px; } .sl-booklist { columns: 13rem; column-gap: 1.5rem; margin: .5rem 0 0; padding: 0; } .sl-booklist__group { break-inside: avoid; margin: 0 0 1rem; } .sl-booklist__group h3 { margin: .6rem 0 .25rem; font-size: .9em; color: var(--sl-ink-faint); font-weight: 500; } .sl-booklist ul { list-style: none; margin: 0; padding: 0; } .sl-booklist a { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .4rem; border-radius: 4px; text-decoration: none; } .sl-booklist a:hover, .sl-booklist a:focus-visible { background: var(--sl-sunk); } .sl-booklist .st { font-size: .75em; color: var(--sl-ink-faint); align-self: center; } .sl-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .3rem; } .sl-chapters a { display: grid; place-items: center; min-height: 2.75rem; border-radius: 6px; text-decoration: none; background: var(--sl-page); font-variant-numeric: lining-nums; } .sl-chapters a:hover, .sl-chapters a:focus-visible { background: var(--sl-sunk); } .sl-menu { display: grid; gap: .9rem; } .sl-menu label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sl-seg { display: inline-flex; border: 1px solid var(--sl-rule); border-radius: 999px; overflow: hidden; } .sl-seg button { border: 0; background: none; padding: .35rem .8rem; cursor: pointer; min-height: 2.25rem; } .sl-seg button[aria-pressed="true"] { background: var(--sl-ink); color: var(--sl-page); } /* ---------- Home ---------- */ .sl-hero { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; margin: 1rem 0 2.5rem; } .sl-hero h1 { font-size: 2.6em; margin: 0 0 .3em; } .sl-path { list-style: none; margin: 0; padding: 0; counter-reset: step; } .sl-path li { position: relative; padding: .3rem 0 .3rem 2rem; counter-increment: step; } .sl-path li::before { content: counter(step); position: absolute; left: 0; top: .35rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .75em; color: var(--sl-page); background: var(--sl-rubric); font-variant-numeric: lining-nums; } .sl-demo { display: block; padding: 1rem 1.1rem; background: var(--sl-surface); border-radius: 6px; box-shadow: var(--sl-shadow); text-decoration: none; margin-bottom: 1rem; border-left: 3px solid var(--sl-gold); } .sl-demo:hover { background: color-mix(in srgb, var(--sl-surface) 80%, var(--sl-gold)); } .sl-demo .orig { display: block; font-size: 1.5em; color: var(--sl-verdigris); } .sl-demo .ref { color: var(--sl-rubric); } .sl-sections { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .sl-list-plain { list-style: none; padding: 0; margin: 0; } .sl-list-plain li { padding: .45rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sl-rule) 55%, transparent); } .sl-list-plain a { text-decoration: none; } .sl-list-plain .desc { display: block; font-size: .85em; color: var(--sl-ink-faint); } @media (max-width: 48rem) { .sl-hero { grid-template-columns: 1fr; } .sl-hero h1 { font-size: 2.1em; } } /* ---------- Topics ---------- */ .sl-review { font-size: .85em; color: var(--sl-ink-soft); background: var(--sl-sunk); border-radius: 6px; padding: .6rem .9rem; margin: 1rem 0 1.5rem; } .sl-ei { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .sl-ei > div { padding: .9rem 1rem; border-radius: 6px; background: var(--sl-surface); } .sl-ei h3 { margin-top: 0; font-size: 1em; } .sl-ei ul { padding-left: 1.1rem; margin: 0; } .sl-ei li { margin: .35rem 0; } .sl-ei .est { border-top: 3px solid var(--sl-verdigris); } .sl-ei .inf { border-top: 3px solid var(--sl-rubric); } .sl-position { padding: 1rem 0 1.2rem; border-bottom: 1px solid var(--sl-rule); } .sl-position h3 { margin: 0 0 .4rem; } .sl-advocates { list-style: none; padding: 0; margin: .5rem 0; } .sl-advocates li { padding: .15rem 0; } .sl-advocates .date { color: var(--sl-ink-faint); font-variant-numeric: lining-nums; margin-left: .3em; } .sl-trads { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; } .sl-trad { font-size: .85em; border: 1px solid var(--sl-rule); border-radius: 6px; padding: .2rem .55rem; text-decoration: none; display: inline-block; } .sl-trad .q { display: block; font-size: .85em; color: var(--sl-ink-faint); max-width: 22rem; } .sl-cite { font-size: .9em; margin: .3rem 0; } .sl-verif { font-size: .72em; padding: .05em .45em; border-radius: 3px; margin-left: .4em; white-space: nowrap; vertical-align: .1em; } .sl-verif--checked { background: color-mix(in srgb, var(--sl-verdigris) 20%, transparent); color: var(--sl-verdigris); } .sl-verif--unchecked { background: color-mix(in srgb, var(--sl-rubric) 15%, transparent); color: var(--sl-rubric); } .sl-topic-proposed { opacity: .75; } /* ---------- Extracanonical works ---------- */ .sl-work .pg { font-size: .7em; color: var(--sl-rubric); border: 1px solid var(--sl-rule); border-radius: 3px; padding: 0 .3em; margin: 0 .2em; font-variant-numeric: lining-nums; vertical-align: .15em; } .sl-work .lacuna { color: var(--sl-ink-faint); letter-spacing: .1em; } .sl-work .restored { color: var(--sl-ink-soft); background: color-mix(in srgb, var(--sl-sunk) 70%, transparent); border-radius: 2px; } .sl-work .corr { text-decoration: underline wavy color-mix(in srgb, var(--sl-text-differs) 60%, transparent); } .sl-missing { text-align: center; font-style: italic; color: var(--sl-ink-faint); padding: 1.2rem; border: 1px dashed var(--sl-rule); border-radius: 6px; margin: 1.5rem 0; } .sl-saying { margin: 1.4rem 0; } .sl-saying h2 { font-size: 1.05em; margin: 0 0 .3rem; } .sl-saying h2 .n { color: var(--sl-rubric); margin-right: .4em; font-variant-numeric: lining-nums; } /* ---------- Search ---------- */ .sl-results { list-style: none; padding: 0; margin: 1rem 0; } .sl-results > li { padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sl-rule) 60%, transparent); } .sl-results a { text-decoration: none; } .sl-results .ref { color: var(--sl-rubric); font-variant-numeric: lining-nums; } .sl-results .ed { font-size: .78em; color: var(--sl-ink-faint); margin-left: .5em; } .sl-results mark { background: color-mix(in srgb, var(--sl-gold) 30%, transparent); color: inherit; border-radius: 2px; } .sl-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0; } .sl-tabs button { border: 1px solid var(--sl-rule); background: none; border-radius: 999px; padding: .25rem .8rem; cursor: pointer; min-height: 2.25rem; } .sl-tabs button[aria-selected="true"] { background: var(--sl-ink); color: var(--sl-page); border-color: var(--sl-ink); } /* ---------- Tables (sources, offline) ---------- */ .sl-table { width: 100%; border-collapse: collapse; font-size: .92em; } .sl-table th, .sl-table td { text-align: left; vertical-align: top; padding: .55rem .5rem; border-bottom: 1px solid var(--sl-rule); } .sl-table th { font-weight: 500; color: var(--sl-ink-soft); } /* Narrow screens: the offline table drops its Size column (each package states its size in its own cell). */ .sl-size-inline { display: none; } @media (max-width: 34rem) { .sl-table--packages th:nth-child(2), .sl-table--packages td:nth-child(2) { display: none; } .sl-size-inline { display: block; } .sl-table th, .sl-table td { padding-inline: .3rem; overflow-wrap: anywhere; } .sl-table--packages .sl-btn { padding: 0 .5rem; font-size: .88em; } } .sl-progress { height: 4px; background: var(--sl-sunk); border-radius: 4px; overflow: hidden; margin-top: .3rem; } .sl-progress > span { display: block; height: 100%; background: var(--sl-verdigris); width: 0; transition: width .2s; } .sl-alert { padding: .7rem 1rem; border-radius: 6px; background: var(--sl-sunk); margin: 1rem 0; } .sl-alert--warn { border-left: 3px solid var(--sl-rubric); } .sl-empty { text-align: center; color: var(--sl-ink-soft); padding: 2rem 1rem; } .sl-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 60; background: var(--sl-ink); color: var(--sl-page); padding: .6rem 1rem; border-radius: 8px; box-shadow: var(--sl-shadow); font-size: .92em; } @media (prefers-reduced-motion: reduce) { .sl *, .sl *::before, .sl *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media print { .sl-bar, .sl-gloss, .sl-chapnav, .sl-badges { display: none !important; } .sl { background: #fff; color: #000; } } /* ---- v0.4.0-rc.3: Library entry, guide, book selector, edition picker ---- */ .sl-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.25rem; } .sl-guide { border: 1px solid var(--sl-rule); border-radius: 8px; padding: .25rem .9rem; margin: 0 0 .5rem; } .sl-guide > summary { cursor: pointer; padding: .55rem 0; font-weight: 600; color: var(--sl-ink-soft); list-style-position: inside; min-height: 44px; box-sizing: border-box; display: list-item; } .sl-guide[open] > summary { margin-bottom: .25rem; } .sl-guide .sl-path { margin-bottom: .6rem; } .sl-bookcontrols { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .75rem; } .sl-bookcontrols .sl-book-finder { width: min(16rem, 100%); } .sl-current { margin: 0 0 .5rem; } .sl-bookgroups { display: grid; gap: .5rem; margin-top: .5rem; } .sl-bookgroup { border: 1px solid var(--sl-rule); border-radius: 8px; padding: 0 .9rem; } .sl-bookgroup > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; font-weight: 600; list-style: none; } .sl-bookgroup > summary::-webkit-details-marker { display: none; } .sl-bookgroup > summary::before { content: '▸'; color: var(--sl-ink-faint); margin-right: .5rem; transition: transform .15s; display: inline-block; } .sl-bookgroup[open] > summary::before { transform: rotate(90deg); } .sl-bookgroup > summary > span:first-child { flex: 1; } .sl-bookgroup__count { font-size: .8em; font-weight: 400; color: var(--sl-ink-faint); text-align: right; } .sl-bookgroup > .sl-booklist { columns: 13rem; column-gap: 1.5rem; list-style: none; margin: 0 0 .75rem; padding: 0; } .sl-bookgroup > .sl-booklist li { break-inside: avoid; } .sl-booklist a.is-active { background: var(--sl-sunk); font-weight: 600; } .sl-booklist .st--active { color: var(--sl-rubric); font-weight: 600; } .sl-edition { display: inline-flex; align-items: center; gap: .35rem; font-size: .85em; } .sl-edition__label { color: var(--sl-ink-faint); } .sl-edition-select { font: inherit; color: var(--sl-ink); background: var(--sl-page); border: 1px solid var(--sl-rule); border-radius: 999px; padding: .2rem .6rem; max-width: 100%; min-height: 32px; } .sl-edition-chip { display: inline-flex; align-items: center; gap: .25rem; } .sl-edition-chip svg { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .sl-bookgroup > summary::before { transition: none; } } .sl-bookcontrols select { max-width: 100%; min-width: 0; } .sl-reader__meta { min-width: 0; max-width: 100%; align-items: center; } .sl-edition { min-width: 0; max-width: 100%; } .sl-edition-select { min-width: 0; text-overflow: ellipsis; } @media (max-width: 26rem) { .sl-edition__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .sl-reader__meta { margin-left: 0; flex-basis: 100%; } /* ---- rc.4: search tools, Greek/Hebrew keypad, stories and ideas ---- */ .sl-search-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; } .sl-keypad { border: 1px solid var(--sl-rule); border-radius: 8px; padding: .6rem; margin: 0 0 1rem; background: var(--sl-page); } .sl-keypad__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .sl-keypad__hidekb { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; } .sl-keypad__keys, .sl-keypad__marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .3rem; margin-bottom: .4rem; } .sl-keypad__marks { grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr)); } .sl-key { min-height: 44px; min-width: 2.75rem; border: 1px solid var(--sl-rule); border-radius: 6px; background: var(--sl-surface, var(--sl-page)); color: var(--sl-ink); font-size: 1.25rem; line-height: 1; cursor: pointer; touch-action: manipulation; } .sl-keypad__keys[lang='grc'] .sl-key, .sl-keypad__marks[lang='grc'] .sl-key { font-family: 'EB Garamond', serif; } .sl-keypad__keys[lang='he'] .sl-key, .sl-keypad__marks[lang='he'] .sl-key { font-family: 'Noto Serif Hebrew', serif; } .sl-key--mark { font-size: 1.35rem; } .sl-key:hover, .sl-key:focus-visible { background: var(--sl-sunk); } .sl-key:focus-visible { outline: 2px solid var(--sl-rubric); outline-offset: 1px; } .sl-keypad__edit { display: flex; gap: .3rem; } .sl-key--wide { flex: 1; font-size: 1rem; } .sl-keypad__note { margin: .4rem 0 0; } .sl-concepts { margin: .25rem 0 1rem; } .sl-concept-label { font-size: .9em; } .sl-concept { border-left: 3px solid var(--sl-rubric); padding: .1rem 0 .1rem .9rem; margin: 1rem 0; } .sl-concept h3 { margin: 0 0 .2rem; } .sl-concept h4 { margin: .75rem 0 .2rem; font-size: 1em; } .sl-role { display: inline-block; font-size: .78em; padding: 0 .45em; border-radius: 3px; background: var(--sl-sunk); color: var(--sl-ink-soft); } .sl-role--later-biblical-interpretation { border: 1px dashed var(--sl-ink-faint); background: none; } .sl-translit { margin: 1.5rem 0; } .sl-key--mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .25rem .1rem; } .sl-key__glyph { font-size: 1.6rem; line-height: 1; } .sl-key__name { font-family: var(--f-ui, system-ui), sans-serif; font-size: .62rem; line-height: 1.1; color: var(--sl-ink-soft); } .sl-keypad__echo { display: block; min-height: 2.2rem; padding: .3rem .6rem; margin-bottom: .5rem; border-radius: 6px; background: var(--sl-sunk); font-size: 1.25rem; overflow-wrap: anywhere; } .sl-keypad__echo:empty::before { content: 'Your search appears here'; font-size: .85rem; color: var(--sl-ink-faint); } /* ---------- rc.6: English words, alignment, saved highlights ---------- */ .sl { --sl-hl-green: #b9dcb0; --sl-hl-green-ink: #2d5a25; --sl-hl-yellow: #f3df8a; --sl-hl-yellow-ink: #6b5408; --sl-hl-pink: #f2bfd2; --sl-hl-pink-ink: #8a2852; } .sl[data-sl-theme="dark"] { --sl-hl-green: #2f5a3a; --sl-hl-green-ink: #a9dfb2; --sl-hl-yellow: #5e5020; --sl-hl-yellow-ink: #f0dc8a; --sl-hl-pink: #5e2a40; --sl-hl-pink-ink: #f4b6cf; } .sl-w { border-radius: 2px; } .sl-w:focus { outline: 2px solid var(--sl-focus); outline-offset: 1px; } .sl-w:focus:not(:focus-visible) { outline: none; } @media (hover: hover) and (pointer: fine) { [data-ref] .sl-w { cursor: pointer; } [data-ref] .sl-w:hover { text-decoration: underline dotted color-mix(in srgb, var(--sl-verdigris) 70%, transparent); text-underline-offset: .2em; } } .sl-w.is-tapped { outline: 1.5px solid var(--sl-verdigris); outline-offset: 1px; } /* Saved highlights: a colour AND a distinct underline, so they differ without relying on colour alone. */ .sl-w.sl-hl { box-decoration-break: clone; -webkit-box-decoration-break: clone; color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1.5px; } .sl-w.sl-hl--green { background: var(--sl-hl-green); text-decoration: underline wavy var(--sl-hl-green-ink); } .sl-w.sl-hl--yellow { background: var(--sl-hl-yellow); text-decoration: underline dashed var(--sl-hl-yellow-ink); } .sl-w.sl-hl--pink { background: var(--sl-hl-pink); text-decoration: underline double var(--sl-hl-pink-ink); } .sl-w.sl-hl.sl-aligned { box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--sl-verdigris) 45%, transparent); } .sl-w.is-flash { animation: sl-flash 1.6s ease-out 2; } @keyframes sl-flash { 50% { box-shadow: 0 0 0 3px var(--sl-gold); } } @media (prefers-reduced-motion: reduce) { .sl-w.is-flash { animation: none; box-shadow: 0 0 0 2px var(--sl-gold); } } /* rc.11 (UX06): the "saved words changed" warning is a small labelled action, not a bare dot. */ .sl-savedmark { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .3rem; padding: .05rem .55rem; min-height: 28px; vertical-align: .1em; border: 1px dashed var(--sl-ink-faint); border-radius: 999px; background: var(--sl-surface); color: var(--sl-ink-soft); font: inherit; font-family: var(--f-ui, system-ui); font-size: .68em; line-height: 1.2; white-space: nowrap; cursor: pointer; } .sl-savedmark:hover { color: var(--sl-ink); border-style: solid; } .sl-savedmark__dot { width: .6rem; height: .6rem; border-radius: 50%; border: 1px solid var(--sl-ink-soft); flex: none; } .sl-savedmark--green .sl-savedmark__dot { background: var(--sl-hl-green); } .sl-savedmark--yellow .sl-savedmark__dot { background: var(--sl-hl-yellow); } .sl-savedmark--pink .sl-savedmark__dot { background: var(--sl-hl-pink); } .sl-savedmark:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; } .sl-chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .6em; border: 1px solid var(--sl-rule); border-radius: 999px; background: var(--sl-surface); color: var(--sl-ink); font: inherit; font-size: .88em; cursor: pointer; min-height: 2.1rem; } span.sl-chip { cursor: default; min-height: 0; } .sl-chip__dot { width: .8em; height: .8em; border-radius: 50%; border: 1px solid var(--sl-ink-soft); } .sl-chip--green .sl-chip__dot { background: var(--sl-hl-green); } .sl-chip--yellow .sl-chip__dot { background: var(--sl-hl-yellow); } .sl-chip--pink .sl-chip__dot { background: var(--sl-hl-pink); } button.sl-chip:hover { border-color: var(--sl-ink-soft); } button.sl-chip:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; } .sl-wordpop, .sl-selbar { z-index: 55; background: var(--sl-surface); color: var(--sl-ink); border: 1px solid var(--sl-rule); border-radius: 10px; box-shadow: var(--sl-shadow); font-size: .95rem; } .sl-wordpop { width: min(22rem, calc(100vw - 1rem)); max-height: min(70vh, 32rem); overflow: auto; padding: .7rem .9rem .5rem; } .sl-wordpop__close { float: right; margin: -.3rem -.4rem 0 0; } .sl-wordpop__head { margin: 0 2rem .3rem 0; } .sl-wordpop__orig { margin: .2rem 0; font-size: 1.45em; color: var(--sl-verdigris); } .sl-wordpop__orig[lang="he"], .sl-wordpop__orig[lang="arc"] { font-family: var(--sl-font-heb); } .sl-wordpop__lex { margin: 0 0 .5rem; padding-left: 1.1rem; } .sl-wordpop__alts { margin: .3rem 0 .5rem; padding-left: 1.1rem; } .sl-wordpop__save { border-top: 1px solid var(--sl-rule); margin-top: .4rem; padding-top: .3rem; } .sl-wordpop__chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .3rem 0; } .sl-selbar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .35rem .45rem; max-width: calc(100vw - 1rem); } .sl-selbar__label { font-size: .85em; color: var(--sl-ink-soft); margin: 0 .1rem 0 .3rem; } .sl-selbar__btn:not(.sl-chip) { font: inherit; font-size: .9em; padding: .35em .8em; min-height: 2.1rem; border: 1px solid var(--sl-verdigris); color: var(--sl-verdigris); background: transparent; border-radius: 999px; cursor: pointer; } .sl-notice__close { display: inline-flex; align-items: center; gap: .25em; margin-left: .3rem; padding: .25em .6em; min-height: 2rem; font: inherit; font-size: .85em; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; vertical-align: middle; } .sl-notice__close .sl-svg { width: 1em; height: 1em; } .sl-saved__labelrow { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .sl-saved__labelrow .sl-filter { max-width: 18rem; } .sl-saved__list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; } .sl-saved__item { position: relative; border: 1px solid var(--sl-rule); border-left: 4px solid var(--sl-rule); border-radius: 8px; padding: .6rem .8rem; background: var(--sl-surface); } .sl-saved__item--green { border-left-color: var(--sl-hl-green-ink); } .sl-saved__item--yellow { border-left-color: var(--sl-hl-yellow-ink); } .sl-saved__item--pink { border-left-color: var(--sl-hl-pink-ink); } .sl-saved__ref { margin: 0 0 .3rem; } .sl-saved__excerpt { margin: .2rem 0 .5rem; padding: 0 0 0 .8rem; border-left: 2px solid var(--sl-rule); font-style: italic; } .sl-saved__tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .sl-saved__colour { width: auto; } .sl-saved__note { width: 100%; margin-top: .4rem; font: inherit; font-size: .92em; } mark.sl-hlmark { color: inherit; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-underline-offset: .22em; text-decoration-thickness: 1.5px; cursor: pointer; } mark.sl-hlmark.sl-hl--green { background: var(--sl-hl-green); text-decoration: underline wavy var(--sl-hl-green-ink); } mark.sl-hlmark.sl-hl--yellow { background: var(--sl-hl-yellow); text-decoration: underline dashed var(--sl-hl-yellow-ink); } mark.sl-hlmark.sl-hl--pink { background: var(--sl-hl-pink); text-decoration: underline double var(--sl-hl-pink-ink); } .sl-worknav { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--sl-rule); } /* rc.6: About these texts — edition cards */ .sl-edcards { display: grid; gap: 1rem; } .sl-edcards--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); margin-bottom: 1.5rem; } .sl-edcard { background: var(--sl-surface); border: 1px solid var(--sl-rule); border-top: 3px solid var(--sl-gold); border-radius: 10px; padding: .9rem 1rem .6rem; } .sl-edcard__head { display: flex; gap: .8rem; align-items: center; margin-bottom: .5rem; } .sl-edcard__head h3 { margin: 0; } .sl-edcard__abbr { flex-shrink: 0; min-width: 3.2rem; padding: .35rem .5rem; text-align: center; font-weight: 600; letter-spacing: .04em; color: var(--sl-rubric); border: 1.5px solid var(--sl-rubric); border-radius: 6px; font-size: .9em; } .sl-edcard__kind { margin: .1rem 0 0; color: var(--sl-ink-soft); font-size: .9em; } .sl-edcard__facts { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: .35rem .9rem; margin: 0; font-size: .95em; } .sl-edcard__facts dt { font-weight: 600; color: var(--sl-ink-soft); } .sl-edcard__facts dd { margin: 0; } .sl-edcard__line { display: block; margin-top: .15rem; } @media (max-width: 34rem) { .sl-edcard__facts { grid-template-columns: 1fr; } .sl-edcard__facts dd { margin-bottom: .4rem; } } .sl-edcard__more { margin-top: .6rem; } /* ---- v0.4.0-rc.7 (F14): one-column opening; the worked examples sit inside "How this works" ---- */ .sl-hero.sl-hero--single { grid-template-columns: minmax(0, 46rem); margin-bottom: 2rem; } .sl-guide__demos { margin: .75rem 0 .6rem; padding-top: .6rem; border-top: 1px solid var(--sl-rule); } .sl-guide__demohead { margin: 0 0 .5rem; } .sl-guide .sl-demo { margin-bottom: .6rem; padding: .7rem .9rem; } .sl-guide .sl-demo .orig { font-size: 1.25em; } /* ---- v0.4.0-rc.7 (F11–F12): reading progress ---- */ .sl-readprog[data-progress-line] { max-width: 42rem; margin: 1.25rem auto 0; font-size: .85rem; color: var(--sl-ink-soft); font-family: var(--sl-ui-font, inherit); } .sl-readprog[data-progress-line] > summary { cursor: pointer; text-align: center; min-height: 2.75rem; display: flex; align-items: center; justify-content: center; gap: .25em; list-style: none; } .sl-readprog[data-progress-line] > summary::-webkit-details-marker { display: none; } .sl-readprog[data-progress-line] > summary::after { content: ' · Details'; color: var(--sl-rubric); text-decoration: underline; text-underline-offset: .2em; } .sl-readprog[data-progress-line][open] > summary::after { content: ' · Hide details'; } .sl-readprog__mark { color: var(--sl-verdigris); } .sl-readprog__panel { padding: .6rem .9rem .3rem; border: 1px solid var(--sl-rule); border-radius: 8px; background: var(--sl-surface); text-align: left; } .sl-readprog__panel p { margin: .35rem 0; } .sl-readprog__row { display: block; } .sl-readprog__about summary { cursor: pointer; min-height: 2.25rem; display: list-item; color: var(--sl-ink-soft); font-size: .9em; } .sl-readprog--sheet { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--sl-rule); } .sl-readprog--sheet h3 { margin: 0 0 .25rem; font-size: 1.05em; } .sl-btn.sl-btn--small { min-height: 2.25rem; padding: .2rem .7rem; font-size: .9em; } .sl-booklist .st.st--read { color: var(--sl-verdigris); border-color: currentColor; } /* Phones: the bottom line is replaced by the same details one tap away (Reading settings and progress; About this writing). */ @media (max-width: 40rem) { .sl-readprog[data-progress-line] { display: none; } } /* ---- v0.4.0-rc.7 (U03): compare two English translations ---- */ .sl-edition-group { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-width: 0; max-width: 100%; } .sl-compare-link { font-size: .85em; min-height: 32px; display: inline-flex; align-items: center; padding: 0 .35rem; color: var(--sl-ink-soft); text-decoration: underline; text-underline-offset: .2em; } .sl-compare-link:hover { color: var(--sl-rubric); } .sl-cmp-page { max-width: 64rem; margin: 0 auto; padding: 0 1rem 2rem; } .sl-cmp__head { margin: 1rem 0 .75rem; } .sl-cmp__kicker { margin: 0; letter-spacing: .06em; text-transform: uppercase; } .sl-cmp__title { margin: .1rem 0 .6rem; font-size: 2em; } .sl-cmp__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; } .sl-cmp__controls .sl-btn { margin-left: auto; } .sl-cmp__note { max-width: 46rem; margin: .7rem 0 0; } .sl-cmp__notices .sl-alert { margin: .5rem 0; } .sl-cmp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; margin-top: 1rem; border-top: 1px solid var(--sl-rule); } .sl-cmp__cols, .sl-cmp__row { display: contents; } .sl-cmp__cols > * { position: sticky; top: calc(var(--sl-header-h, 0px) + var(--sl-toolbar-h, 0px)); z-index: 2; background: var(--sl-page); padding: .55rem .2rem; border-bottom: 1px solid var(--sl-rule); font-size: .9em; } .sl-cmp__row > * { padding: .7rem .2rem; border-bottom: 1px solid color-mix(in srgb, var(--sl-rule) 60%, transparent); } /* Wide screens: each cell's own verse button carries the number, so the row header is for assistive technology only. */ .sl-cmp__vn, .sl-cmp__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0 !important; border: 0 !important; } .sl-cmp__row.is-target > * { background: color-mix(in srgb, var(--sl-gold) 12%, transparent); } .sl-cmp__cell { line-height: 1.6; max-width: 36rem; } .sl-cmp__text { display: inline; } .sl-cmp__cell.is-poetry .sl-cmp__text { display: block; padding-left: .6rem; } .sl-cmp__act { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; min-width: 32px; margin: -.2rem .35rem 0 -.3rem; padding: 0 .35rem; vertical-align: baseline; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--sl-rubric); font: inherit; font-size: .78em; cursor: pointer; } .sl-cmp__act:hover, .sl-cmp__act:focus-visible { border-color: var(--sl-rule); background: var(--sl-sunk); } .sl-cmp__ed { display: none; font-weight: 700; letter-spacing: .04em; color: var(--sl-ink-faint); } .sl-cmp__head-note { display: block; font-size: .8em; font-weight: 600; color: var(--sl-ink-soft); margin-bottom: .2rem; } .sl-cmp__notes { display: block; margin-top: .2rem; } .sl-cmp__cell--missing { color: var(--sl-ink-faint); font-style: italic; } .sl-cmp__cell--joined { font-style: italic; } .sl-cmp-pop { width: min(22rem, calc(100vw - 16px)); } /* Phones and narrow tablets: both named translations stacked under each verse number — no horizontal scrolling, no switching. */ @media (max-width: 48rem) { .sl-cmp { display: block; } .sl-cmp__cols { display: none; } .sl-cmp__row { display: block; padding: .55rem 0 .6rem; border-bottom: 1px solid var(--sl-rule); } .sl-cmp__row > * { display: block; padding: .25rem 0; border: 0; } .sl-cmp__vn { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; text-align: left; font-weight: 700; color: var(--sl-rubric); font-size: .85em; } .sl-cmp__vn::before { content: 'Verse '; font-weight: 400; } .sl-cmp__row[data-row='title'] .sl-cmp__vn::before { content: ''; } .sl-cmp__cell + .sl-cmp__cell { margin-top: .35rem; padding-top: .45rem; border-top: 1px dashed color-mix(in srgb, var(--sl-rule) 70%, transparent); } .sl-cmp__ed { display: inline; } .sl-cmp__act .sl-cmp__vnum { display: none; } .sl-cmp__cell--missing .sl-cmp__ed, .sl-cmp__cell--joined .sl-cmp__ed { display: inline-block; margin-right: .45rem; font-style: normal; } .sl-cmp__controls .sl-btn { margin-left: 0; } .sl-cmp__title { font-size: 1.6em; } } /* ---- v0.4.0-rc.7 (F15): concise topic opening ---- */ .sl-topic-glance { margin: 0 0 1.25rem; padding: .7rem .9rem; border-left: 3px solid var(--sl-interpret); background: var(--sl-surface); border-radius: 0 6px 6px 0; } .sl-topic-glance p { margin: .2rem 0; } .sl-topic-glance__pos { font-weight: 600; } .sl-topic-more { margin: 1rem 0; border-top: 1px solid var(--sl-rule); } .sl-topic-more > summary { cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; min-height: 44px; padding: .45rem 0 .2rem; list-style: none; } .sl-topic-more > summary::-webkit-details-marker { display: none; } .sl-topic-more > summary::before { content: '▸' / ''; color: var(--sl-rubric); font-size: .9em; width: 1em; } .sl-topic-more[open] > summary::before { content: '▾' / ''; } .sl-topic-more > summary h2 { display: inline; margin: 0; font-size: 1.25em; } .sl-topic-more__hint { font-size: .85em; color: var(--sl-ink-faint); } .sl-pos-more { margin-top: .4rem; } .sl-pos-more > summary { cursor: pointer; min-height: 2.5rem; display: list-item; color: var(--sl-rubric); font-size: .92em; } .sl-pos-h { margin: .5rem 0 .2rem; font-size: .95em; } /* rc.8 (A1): corrected-reference note and ambiguous-reference choices */ .sl-note { margin: .25rem 0 1rem; padding: .55rem .8rem; border-left: 3px solid var(--sl-gold); background: color-mix(in srgb, var(--sl-gold) 9%, transparent); border-radius: 0 6px 6px 0; } .sl-ref-choices { display: flex; flex-wrap: wrap; gap: .5rem; } .sl-ref-choices .sl-btn { min-height: 44px; } /* rc.8 (A2): shared sheet behaviour. A visible handle is the drag region on touch; on phones every sheet is a bottom sheet with safe-area padding; the drag translates the panel (no layout change behind). */ .sl-sheet__handle { display: block; width: 2.75rem; height: 5px; border-radius: 5px; background: var(--sl-rule); margin: -.35rem auto .75rem; cursor: grab; touch-action: none; position: relative; } .sl-sheet__handle::after { content: ""; position: absolute; inset: -14px -40px; } /* a generous, invisible hit area */ .sl-sheet__panel, .sl-gloss { transition: transform .18s ease-out; overscroll-behavior: contain; } .sl-sheet__panel.is-dragging, .sl-gloss.is-dragging { transition: none; } .sl-sheet__panel > h2[data-sheet-grab] { touch-action: pan-x pinch-zoom; } @media (hover: hover) and (pointer: fine) { .sl-sheet__panel > .sl-sheet__handle { display: none; } } @media (max-width: 40rem) { .sl-sheet { place-items: end stretch; padding: 3rem 0 0; } .sl-sheet__panel { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 3rem); border-radius: 16px 16px 0 0; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); animation: sl-rise .22s ease-out; } } @media (prefers-reduced-motion: reduce) { .sl-sheet__panel, .sl-gloss { transition: none; animation: none; } } /* ---------- rc.8 (B §3b, §4): the docked two-choice tray ---------- */ .sl-acts { position: fixed; z-index: 56; left: 0; right: 0; margin-inline: auto; bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + var(--kb, 0px)); width: min(30rem, calc(100vw - 1.25rem)); padding: .55rem .6rem .7rem .9rem; background: var(--sl-surface); color: var(--sl-ink); border: 1px solid var(--sl-rule); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(20, 14, 6, .55), 0 2px 6px rgba(20, 14, 6, .12); font-family: var(--f-ui, system-ui); font-size: .95rem; animation: sl-rise .18s ease-out; } .sl-acts__top { display: flex; align-items: center; gap: .4rem; } .sl-acts__ctx { flex: 1; min-width: 0; margin: 0; font-size: .85rem; color: var(--sl-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-acts__ctx b { color: var(--sl-ink); font-weight: 600; } .sl-acts__x { flex: none; } .sl-acts__body { margin-top: .35rem; display: grid; gap: .5rem; } .sl-acts__two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .sl-acts__btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 .9rem; border-radius: 12px; border: 1px solid var(--sl-rule); background: color-mix(in srgb, var(--sl-page) 60%, var(--sl-surface)); color: var(--sl-ink); font: inherit; font-weight: 600; cursor: pointer; } .sl-acts__btn:hover { border-color: var(--sl-gold); } .sl-acts__btn:focus-visible, .sl-acts__cat:focus-visible { outline: 2px solid var(--sl-gold); outline-offset: 2px; } .sl-acts__sw { width: 1.1rem; height: .7rem; border-radius: 3px; background: linear-gradient(90deg, var(--sl-hl-green), var(--sl-hl-yellow), var(--sl-hl-pink)); } .sl-acts__glyph { font-family: var(--sl-font-heb, serif); color: var(--sl-verdigris); letter-spacing: .05em; font-weight: 500; } .sl-acts__scope { justify-self: start; } /* The three categories stay together on ONE line at every width; long labels wrap inside their own button. */ .sl-acts__cats { display: flex; flex-wrap: nowrap; gap: .4rem; } .sl-acts__cat { flex: 1 1 0; min-width: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .3rem .45rem; border-radius: 12px; border: 1px solid transparent; font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; } .sl-acts__cat.sl-chip--green { background: var(--sl-hl-green); color: var(--sl-hl-green-ink); } .sl-acts__cat.sl-chip--yellow { background: var(--sl-hl-yellow); color: var(--sl-hl-yellow-ink); } .sl-acts__cat.sl-chip--pink { background: var(--sl-hl-pink); color: var(--sl-hl-pink-ink); } .sl-acts__cat .sl-chip__dot { flex: none; } .sl-acts__catlabel { overflow-wrap: anywhere; } .sl-acts__row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .sl-acts__note { margin: 0; font-size: .88rem; } .sl-toast--action { display: flex; gap: .6rem; align-items: center; } @media (max-width: 22rem) { .sl-acts__cat { font-size: .8rem; gap: .25rem; } } /* ---------- rc.8 (B §4a): Translations sheet ---------- */ .sl-trans__verse { padding: .5rem 0 .75rem; border-top: 1px solid color-mix(in srgb, var(--sl-rule) 70%, transparent); } .sl-trans__verse:first-of-type { border-top: 0; } .sl-trans__ref { font-size: .9em; margin: 0 0 .25rem; color: var(--sl-ink-soft); } .sl-trans__label { margin: .35rem 0 .1rem; font-family: var(--f-ui, system-ui); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-gold); } .sl-trans__orig { margin: 0 0 .35rem; font-size: 1.6em; line-height: 1.6; color: var(--sl-verdigris); } .sl-trans__orig[lang="he"], .sl-trans__orig[lang="arc"] { font-family: var(--sl-font-heb, serif); font-size: 1.85em; } .sl-trans__eng { margin: 0; font-size: 1.12em; line-height: 1.65; } .sl-trans__tok, .sl-trans__w { border-radius: 4px; padding: 0 .08em; cursor: default; transition: background-color .12s; } .sl-trans__tok.is-gap { opacity: .42; } .sl-trans__w.is-unlinked { color: var(--sl-ink-soft); } .sl-trans__tok.is-on, .sl-trans__w.is-on { background: color-mix(in srgb, var(--sl-gold) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-gold) 55%, transparent); } .sl-trans__tok:focus-visible, .sl-trans__w:focus-visible { outline: 2px solid var(--sl-gold); outline-offset: 1px; } .sl-trans__alt { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--sl-rule); } .sl-trans__alttext { margin: .2rem 0; } .sl-trans__more { margin: .6rem 0 0; } @media (prefers-reduced-motion: reduce) { .sl-acts { animation: none; } .sl-trans__tok, .sl-trans__w { transition: none; } } /* ---------- rc.8 (B §5b): continuous marker strokes ---------- */ .sl-hlgap.sl-hl--green { background: var(--sl-hl-green); } .sl-hlgap.sl-hl--yellow { background: var(--sl-hl-yellow); } .sl-hlgap.sl-hl--pink { background: var(--sl-hl-pink); } .sl-hlgap { box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* words meeting a bridge lose their inner rounding so the stroke reads as one */ .sl-w.sl-hl { border-radius: 2px; } .sl-hlgap { text-underline-offset: .22em; text-decoration-thickness: 1.5px; } .sl-hlgap.sl-hl--green { text-decoration: underline wavy var(--sl-hl-green-ink); } .sl-hlgap.sl-hl--yellow { text-decoration: underline dashed var(--sl-hl-yellow-ink); } .sl-hlgap.sl-hl--pink { text-decoration: underline double var(--sl-hl-pink-ink); } /* overlap by half a pixel so anti-aliased edges do not show a seam between word and gap */ .sl-hlgap { padding-inline: .5px; margin-inline: -.5px; position: relative; z-index: -0; } .sl.has-tray .sl-main { padding-bottom: 11rem; } /* ---------- rc.8 (B §5a): Highlight mode ---------- */ .sl-hlmode-toggle { display: inline-flex; align-items: center; gap: .45rem; } .sl-hlmode-toggle__pen { width: 1.05rem; height: 1.05rem; border-radius: 3px; background: linear-gradient(135deg, var(--sl-hl-yellow) 0 55%, transparent 55%), linear-gradient(135deg, transparent 0 62%, var(--sl-ink-soft) 62% 72%, transparent 72%); } .sl-hlmode-toggle[aria-pressed="true"] { background: var(--sl-ink); color: var(--sl-surface); border-color: var(--sl-ink); } .sl-text.is-hlmode [data-ref] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; } .sl-text.is-hlmode [data-ref] .sl-w { cursor: crosshair; } .sl-w.is-preview { border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-ink) 25%, transparent); } .sl-w.is-preview--green { background: color-mix(in srgb, var(--sl-hl-green) 75%, transparent); } .sl-w.is-preview--yellow { background: color-mix(in srgb, var(--sl-hl-yellow) 75%, transparent); } .sl-w.is-preview--pink { background: color-mix(in srgb, var(--sl-hl-pink) 75%, transparent); } .sl-hlbar .sl-acts__top { margin-bottom: .45rem; } .sl-hlbar__done { min-height: 40px; } .sl-acts__cat[aria-checked="true"] { outline: 2.5px solid var(--sl-ink); outline-offset: 1px; } /* ---------- rc.8 (§6b, §6c): sharing, Shared verses, reset ---------- */ .sl-chip--note { border: 1px dashed var(--sl-rule); background: transparent; color: var(--sl-ink-soft); padding: .05em .55em; border-radius: 999px; font-size: .85em; } .sl-saved__item--note { border-left-style: dashed; } .sl-saved__item--shared { border-left: 3px solid color-mix(in srgb, var(--sl-verdigris) 60%, transparent); } .sl-shared { margin-top: 2rem; } .sl-shared__pack { padding: .75rem 0; border-top: 1px solid var(--sl-rule); } .sl-share__btns { display: flex; flex-wrap: wrap; gap: .5rem; } .sl-share__short { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--sl-rule, rgba(0,0,0,.12)); } .sl-share__link code { overflow-wrap: anywhere; font-size: .85em; } .sl-share__preview { margin: .75rem 0; padding: .6rem .8rem; border: 1px solid var(--sl-rule); border-radius: 10px; background: color-mix(in srgb, var(--sl-page) 50%, var(--sl-surface)); } .sl-check { display: flex; align-items: center; gap: .4rem; min-height: 44px; margin: 0; } .sl-check input { width: 1.2rem; height: 1.2rem; } .sl-saved__reset { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--sl-rule); } .sl-btn--danger { background: #8e2323; color: #fff; border-color: #8e2323; } .sl-btn--danger:disabled { opacity: .45; cursor: not-allowed; } .sl-reset__keep { padding-left: 1.1rem; } .sl-reset__typed { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .sl-reset__typed .sl-filter { flex: 1 1 10rem; text-transform: uppercase; letter-spacing: .12em; } .sl-reset__label { display: block; font-size: .9em; margin: .5rem 0 .3rem; } .sl-reset__actions { margin-top: 1rem; } .sl-reset__alt { margin: .35rem 0 0; text-align: right; } .sl-reset__typeinstead { min-height: 44px; min-width: 44px; padding: 0 .5rem; font-size: .85em; } .sl-slide { position: relative; height: 56px; border-radius: 999px; background: color-mix(in srgb, #8e2323 12%, var(--sl-surface)); border: 1px solid color-mix(in srgb, #8e2323 45%, var(--sl-rule)); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; } .sl-slide:focus-visible { outline: 2px solid var(--sl-gold); outline-offset: 2px; } .sl-slide__text { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: .92em; color: #8e2323; pointer-events: none; } .sl-slide__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, #8e2323 28%, transparent); pointer-events: none; } .sl-slide__knob { position: absolute; left: 4px; top: 4px; width: 48px; height: 46px; border-radius: 999px; background: #8e2323; color: #fff; display: grid; place-items: center; font-size: 1.2em; cursor: grab; touch-action: none; } .sl-slide.is-returning .sl-slide__knob, .sl-slide.is-returning .sl-slide__fill { transition: transform .2s ease-out, width .2s ease-out; } @media (prefers-reduced-motion: reduce) { .sl-slide.is-returning .sl-slide__knob, .sl-slide.is-returning .sl-slide__fill { transition: none; } } /* ---------- rc.8 (§7c): Topics as cards ---------- */ .sl-tcards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin: 1.25rem 0 2rem; } .sl-tcard { position: relative; display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--sl-rule); border-radius: 14px; background: var(--sl-surface); box-shadow: 0 10px 24px -20px rgba(20, 14, 6, .5); } .sl-tcard__title { margin: 0 0 .25rem; font-size: 1.35em; line-height: 1.2; } .sl-tcard__title a { color: inherit; text-decoration: none; } .sl-tcard__title a:hover { color: var(--sl-rubric); } .sl-tcard__refs { margin: 0 0 .4rem; color: var(--sl-gold); font-variant-numeric: lining-nums; } /* The preview fade is presentation only: the full summary is in the page for assistive technology and for copying. */ /* rc.13: the first sentence is shown whole; the rest of the summary and the review status open with Expand. */ .sl-tcard__body { position: relative; } .sl-tcard:not(.is-open) .sl-tcard__rest, .sl-tcard:not(.is-open) .sl-tcard__status { display: none; } .sl-tcard__summary { margin: 0 0 .5rem; } .sl-tcard__status { color: var(--sl-ink-soft); margin: 0; } .sl-tcard__actions { margin: auto 0 0; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .sl-tcard__expand { min-height: 44px; } .sl-tcard--teaser { border-style: dashed; background: transparent; box-shadow: none; } .sl-tcard__flag { display: inline-block; margin: 0 0 .5rem; padding: .1em .6em; border-radius: 999px; border: 1px solid var(--sl-rule); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-ink-soft); font-family: var(--f-ui, system-ui); } .sl-topics__h { margin-top: 2rem; } .sl-topics__planned { margin: 1rem 0 2rem; } .sl-topics__planned > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; } /* ---------- rc.8 (owner): five highlight colours; each also has its own underline so colour is never the only cue ---------- */ .sl { --sl-hl-orange: #f6c39a; --sl-hl-orange-ink: #8a3b10; --sl-hl-blue: #b9d3f0; --sl-hl-blue-ink: #1f4a7a; } .sl[data-sl-theme="dark"] { --sl-hl-orange: #6a3a1c; --sl-hl-orange-ink: #f6c39a; --sl-hl-blue: #24405f; --sl-hl-blue-ink: #b9d3f0; } .sl-w.sl-hl--orange, mark.sl-hlmark.sl-hl--orange, .sl-hlgap.sl-hl--orange { background: var(--sl-hl-orange); text-decoration: underline dotted var(--sl-hl-orange-ink); } .sl-w.sl-hl--blue, mark.sl-hlmark.sl-hl--blue, .sl-hlgap.sl-hl--blue { background: var(--sl-hl-blue); text-decoration: underline solid var(--sl-hl-blue-ink); } .sl-chip--orange .sl-chip__dot { background: var(--sl-hl-orange); } .sl-chip--blue .sl-chip__dot { background: var(--sl-hl-blue); } .sl-acts__cat.sl-chip--orange { background: var(--sl-hl-orange); color: var(--sl-hl-orange-ink); } .sl-acts__cat.sl-chip--blue { background: var(--sl-hl-blue); color: var(--sl-hl-blue-ink); } .sl-w.is-preview--orange { background: color-mix(in srgb, var(--sl-hl-orange) 75%, transparent); } .sl-w.is-preview--blue { background: color-mix(in srgb, var(--sl-hl-blue) 75%, transparent); } .sl-savedmark--orange .sl-savedmark__dot { background: var(--sl-hl-orange); } .sl-savedmark--blue .sl-savedmark__dot { background: var(--sl-hl-blue); } .sl-saved__item--orange { border-left-color: var(--sl-hl-orange-ink); } .sl-saved__item--blue { border-left-color: var(--sl-hl-blue-ink); } .sl-acts__sw { background: linear-gradient(90deg, var(--sl-hl-green), var(--sl-hl-yellow), var(--sl-hl-pink), var(--sl-hl-orange), var(--sl-hl-blue)); } /* five categories still on ONE line: on narrow phones the dot sits above the label */ .sl-acts__cats { gap: .3rem; } .sl-acts__cat { padding: .3rem .25rem; font-size: .82rem; } @media (max-width: 30rem) { .sl-acts__cat { flex-direction: column; gap: .15rem; min-height: 52px; font-size: .74rem; } } /* Coloured buttons wherever a colour is chosen or filtered (owner: each button in its own colour, not black) */ .sl-chip.sl-chip--green[type], .sl-saved__filter [data-color="green"] { background: var(--sl-hl-green); color: var(--sl-hl-green-ink); } .sl-chip.sl-chip--yellow[type], .sl-saved__filter [data-color="yellow"] { background: var(--sl-hl-yellow); color: var(--sl-hl-yellow-ink); } .sl-chip.sl-chip--pink[type], .sl-saved__filter [data-color="pink"] { background: var(--sl-hl-pink); color: var(--sl-hl-pink-ink); } .sl-chip.sl-chip--orange[type], .sl-saved__filter [data-color="orange"] { background: var(--sl-hl-orange); color: var(--sl-hl-orange-ink); } .sl-chip.sl-chip--blue[type], .sl-saved__filter [data-color="blue"] { background: var(--sl-hl-blue); color: var(--sl-hl-blue-ink); } .sl-saved__filter [data-color][aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; font-weight: 700; } .sl-infonote { margin: .5rem 0 1rem; } .sl-infonote > summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; list-style: none; color: var(--sl-ink-soft); font-size: .9em; } .sl-infonote > summary::-webkit-details-marker { display: none; } .sl-infonote__i { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid currentColor; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: .85rem; } .sl-infonote[open] > summary .sl-infonote__s { font-weight: 600; } .sl-infonote > p { margin: .2rem 0 0; padding: .6rem .8rem; border-left: 3px solid var(--sl-rule); background: color-mix(in srgb, var(--sl-surface) 70%, transparent); border-radius: 0 8px 8px 0; } /* ---------- rc.8 (owner): reader header — passage + Read/Study, then translation + one More ---------- */ .sl-reader__head { display: grid; gap: .6rem; margin: .5rem 0 1.4rem; } .sl-reader__row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; } .sl-reader__row .sl-reader__title { margin: 0; } .sl-reader__mode { flex: none; } .sl-reader__head .sl-reader__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; flex-basis: auto; } .sl-edition-group { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; } .sl-reader__head .sl-edition-select { min-height: 40px; padding: .3rem .8rem; font-size: .9em; max-width: min(22rem, 100%); } .sl-edition-orig { font-size: .85em; color: var(--sl-verdigris); white-space: nowrap; } .sl-more__hint { display: block; font-size: .78em; color: var(--sl-ink-faint); font-weight: 400; } .sl-more__panel button[aria-pressed="true"]::after { content: "On"; margin-left: auto; font-size: .75em; font-weight: 700; color: var(--sl-verdigris); } .sl-reader__more { position: relative; } /* the shared More, in every view (hosted rules in atlas-host.css refine colours) */ .sl-more { position: relative; display: inline-block; } .sl-more__caret { display: inline-block; width: .45em; height: .45em; margin-left: .35em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); } .sl-more__btn[aria-expanded='true'] .sl-more__caret { transform: translateY(.1em) rotate(-135deg); } .sl-more__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 15rem; max-width: calc(100vw - 1.5rem); margin: 0; padding: .35rem; list-style: none; background: var(--sl-surface); border: 1px solid var(--sl-rule); border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(20, 14, 6, .5); } .sl-more__panel[hidden] { display: none; } .sl-more__panel a, .sl-more__panel button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 46px; padding: .35rem .75rem; border-radius: 8px; color: var(--sl-ink); font-weight: 600; cursor: pointer; flex-wrap: wrap; } .sl-more__panel a > span:first-child, .sl-more__panel button > span:first-child { flex: 1 1 auto; } .sl-more__panel .sl-more__hint { flex-basis: 100%; margin-top: -.15rem; } .sl-more__panel a:hover, .sl-more__panel button:hover { background: color-mix(in srgb, var(--sl-gold) 12%, transparent); } .sl-more__panel a:focus-visible, .sl-more__panel button:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: -2px; } .sl--host .sl-more__panel { background: var(--c-ivory); border-color: var(--c-rule-strong); } .sl-more__group { padding: .5rem .75rem .15rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-gold); } .sl-more__group + li { border-top: 0; } .sl-more__panel li.sl-more__group:not(:first-child) { margin-top: .3rem; border-top: 1px solid var(--sl-rule); padding-top: .55rem; } .sl--host .sl-more__panel { min-width: 16rem; } /* ---------- rc.8 (owner): Library home — essentials on screen, the rest in vertical folds ---------- */ .sl-home-top { padding-bottom: .5rem; } .sl-folds { display: grid; gap: 0; margin: 1rem 0 3rem; border-top: 1px solid var(--sl-rule); } .sl-fold { border-bottom: 1px solid var(--sl-rule); } .sl-fold > summary { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .4rem .25rem; cursor: pointer; list-style: none; } .sl-fold > summary::-webkit-details-marker { display: none; } .sl-fold > summary::after { content: ''; margin-left: auto; width: .55rem; height: .55rem; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: .55; transition: transform .15s; flex: none; } .sl-fold[open] > summary::after { transform: rotate(225deg) translateY(-3px); } .sl-fold__title { font-family: var(--sl-font-display, inherit); font-size: 1.3em; font-weight: 600; } .sl-fold__hint { font-size: .8em; color: var(--sl-ink-faint); } .sl-fold__body, .sl-guide.sl-fold > :not(summary) { padding: .25rem .25rem 1.25rem; } .sl-beyond__label { display: inline-block; margin-left: .5rem; font-size: .75em; font-weight: 600; letter-spacing: .04em; color: var(--sl-gold); } @media (prefers-reduced-motion: reduce) { .sl-fold > summary::after { transition: none; } } /* rc.8: edition cards collapse to identity + licence */ details.sl-edcard { padding: .7rem 1rem; } details.sl-edcard > summary { list-style: none; cursor: pointer; margin: 0; } details.sl-edcard > summary::-webkit-details-marker { display: none; } details.sl-edcard > summary::after { content: ''; margin-left: auto; align-self: center; width: .55rem; height: .55rem; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: .55; flex: none; } details.sl-edcard[open] > summary::after { transform: rotate(225deg) translateY(-3px); } details.sl-edcard[open] > summary { margin-bottom: .6rem; } .sl-edcard__lic { margin: .15rem 0 0; font-size: .8em; color: var(--sl-ink-faint); } .sl-edcards--grid { align-items: start; } .sl--host .sl-home-top { padding-top: .75rem; } .sl--host .sl-home-top .sl-lede { margin: 0 0 .75rem; font-size: 1.05em; } .sl-folds { grid-template-columns: minmax(0, 1fr); } .sl-fold, .sl-fold__body { min-width: 0; } .sl-fold select, .sl-fold .sl-filter { max-width: 100%; } /* ---------- rc.8 (§6a): passage-level carry-over from another translation ---------- */ .sl-carried { box-shadow: inset 3px 0 0 var(--sl-carry, var(--sl-rule)); padding-left: .35rem; } .sl-carried--green { --sl-carry: var(--sl-hl-green-ink); } .sl-carried--yellow { --sl-carry: var(--sl-hl-yellow-ink); } .sl-carried--pink { --sl-carry: var(--sl-hl-pink-ink); } .sl-carried--orange { --sl-carry: var(--sl-hl-orange-ink); } .sl-carried--blue { --sl-carry: var(--sl-hl-blue-ink); } .sl-carry { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .3rem; padding: .05rem .5rem; min-height: 28px; vertical-align: .1em; border: 1px dashed var(--sl-rule); border-radius: 999px; background: none; color: var(--sl-ink-soft); font: inherit; font-size: .68em; font-family: var(--f-ui, system-ui); cursor: pointer; white-space: nowrap; } .sl-carry:focus-visible { outline: 2px solid var(--sl-focus); } .sl-carry .sl-chip__dot { width: .6rem; height: .6rem; border-radius: 50%; } .sl-carry--green .sl-chip__dot { background: var(--sl-hl-green); } .sl-carry--yellow .sl-chip__dot { background: var(--sl-hl-yellow); } .sl-carry--pink .sl-chip__dot { background: var(--sl-hl-pink); } .sl-carry--orange .sl-chip__dot { background: var(--sl-hl-orange); } .sl-carry--blue .sl-chip__dot { background: var(--sl-hl-blue); } /* rc.9: Saved items: a corner ✕ (44px target, focus ring) and the note behind a Note / Add note button. */ .sl-saved__ref { padding-right: 2.6rem; } .sl-saved__remove { position: absolute; top: .1rem; right: .1rem; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .72; font-size: 1.45rem; line-height: 1; cursor: pointer; } .sl-saved__remove:hover { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; } .sl-saved__remove:focus-visible { outline: 2px solid var(--sl-focus, currentColor); outline-offset: -2px; } .sl-saved__notebtn[aria-expanded='true'] { background: color-mix(in srgb, currentColor 8%, transparent); } .sl-saved__note[hidden] { display: none; } /* ---------- rc.10: Saved — Passages / Words, calm cards, notes, utilities ---------- */ .sl-saved__types, .sl-saved__filter { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; border-radius: 0; overflow: visible; margin: .5rem 0; } .sl-saved__types button, .sl-saved__filter button { border: 1px solid var(--sl-rule); border-radius: 999px; min-height: 2.6rem; padding: .3rem .9rem; font: inherit; font-size: .9em; background: var(--sl-surface); color: var(--sl-ink); } .sl-saved__types button[aria-pressed="true"] { background: var(--sl-ink); color: var(--sl-page); border-color: var(--sl-ink); } .sl-saved__types button[aria-pressed="true"]::before, .sl-saved__filter button[aria-pressed="true"]::before { content: "✓ "; } .sl-saved__filter button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sl-ink); font-weight: 600; } .sl-saved__filter button:not([data-color])[aria-pressed="true"] { background: var(--sl-ink); color: var(--sl-page); } .sl-saved__count { font-size: 1.15em; margin: 1rem 0 .4rem; } .sl-saved-cards { gap: .9rem; } /* "Glass" with restraint: the card is nearly opaque (text contrast never depends on what is behind it), with a soft edge light and depth. Where backdrop blur is unsupported the card is simply the surface colour. */ .sl-saved__item { border: 1px solid color-mix(in srgb, var(--sl-rule) 80%, transparent); border-left-width: 5px; border-radius: 14px; padding: .85rem 3rem .8rem 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--sl-surface) 96%, white) 0%, color-mix(in srgb, var(--sl-surface) 92%, transparent) 100%); box-shadow: 0 1px 0 color-mix(in srgb, white 55%, transparent) inset, 0 10px 26px -20px rgba(40, 28, 10, .55); -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05); } .sl[data-sl-theme="dark"] .sl-saved__item { background: color-mix(in srgb, var(--sl-surface) 94%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -20px rgba(0,0,0,.9); } .sl-saved__ref { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; margin: 0 0 .4rem; } .sl-saved__where { font-weight: 600; } .sl-saved__excerpt { margin: .3rem 0 .35rem; padding: 0 0 0 .85rem; border-left: 2px solid var(--sl-rule); font-style: normal; line-height: 1.55; overflow-wrap: anywhere; } .sl-saved__excerpt[lang="grc"], .sl-saved__excerpt[lang="he"], .sl-saved__excerpt[lang="arc"] { font-style: normal; } .sl-saved__excerpt.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sl-saved__expand { font-size: .88em; min-height: 2rem; } .sl-saved__notepreview { margin: .2rem 0 .4rem; color: var(--sl-ink-soft); overflow-wrap: anywhere; } .sl-saved__main { margin-top: .45rem; } .sl-saved__main .sl-btn { min-height: 2.6rem; } .sl-saved__detbtn[aria-expanded="true"] { background: var(--sl-sunk); } .sl-saved__detbtn::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-.15em) rotate(45deg); } .sl-saved__detbtn[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); } .sl-saved__noterow { display: grid; gap: .2rem; } .sl-saved__note { min-height: 5.5rem; resize: vertical; border-radius: 10px; } .sl-saved__notestatus:empty { display: none; } .sl-saved__details { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--sl-rule); display: grid; gap: .45rem; } .sl-saved__details[hidden] { display: none; } .sl-saved__prov { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .15rem .8rem; margin: 0; } .sl-saved__prov dt { color: var(--sl-ink-faint); } .sl-saved__prov dd { margin: 0; overflow-wrap: anywhere; } .sl-saved__file { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; } .sl-saved__remove { position: absolute; top: .3rem; right: .3rem; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--sl-ink-soft); font-size: 1.35rem; line-height: 1; cursor: pointer; } .sl-saved__remove:hover { background: var(--sl-sunk); color: var(--sl-ink); } .sl-saved__resetfold { margin-top: 1.25rem; border: 1px solid var(--sl-rule); border-radius: 14px; padding: .2rem 1rem .6rem; background: color-mix(in srgb, var(--sl-surface) 70%, transparent); } .sl-saved__resetfold > summary { min-height: 2.9rem; display: flex; align-items: center; gap: .3rem; cursor: pointer; font-weight: 600; } .sl-saved__utils { margin-top: 2rem; border: 1px solid var(--sl-rule); border-radius: 14px; padding: .2rem 1rem .6rem; background: color-mix(in srgb, var(--sl-surface) 70%, transparent); } .sl-saved__utils > summary { min-height: 2.9rem; display: flex; align-items: center; gap: .3rem; cursor: pointer; font-weight: 600; } .sl-saved__utilgrid { display: grid; gap: 1rem 2rem; } .sl-saved__utilgrid > * { min-width: 0; margin-top: 0; } .sl-saved__utilgrid h2 { font-size: 1.15em; margin: .3rem 0 .4rem; } @media (min-width: 46rem) { .sl-saved__utilgrid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } .sl-saved__labels { margin-top: 1.25rem; } .sl-saved__labels > summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; } .sl-saved__labelrow { margin: .35rem 0; } .sl-saved__labelrow .sl-check { min-height: 2.75rem; } .sl-keepcopy__more { margin-top: 1rem; border-top: 1px solid var(--sl-rule); padding-top: .5rem; } .sl-keepcopy__more > summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; } .sl-resetc__group { border-top: 1px solid var(--sl-rule); padding: .2rem 0; } .sl-resetc__group > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .8rem; min-height: 2.9rem; padding: .5rem 0; cursor: pointer; } .sl-resetc__t { font-weight: 600; } .sl-resetc__choices { margin: .3rem 0; } @media (prefers-reduced-transparency: reduce) { .sl-saved__item { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sl-surface); } } /* rc.10: compact first layer on phones — one row each for the two choices (the colour row scrolls sideways inside itself). */ .sl-saved__types, .sl-saved__filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 4px; margin: .35rem -2px; overscroll-behavior-x: contain; } .sl-saved__types button, .sl-saved__filter button { flex: none; min-height: 2.75rem; padding: .2rem .8rem; font-size: .86em; white-space: nowrap; } .sl-saved .sl-lede { font-size: 1em; margin-bottom: .4rem; } .sl-saved h1 { margin-bottom: .2rem; } .sl-saved__item { padding: .8rem .9rem .75rem 1rem; } .sl-saved__ref { padding-right: 2.4rem; } .sl-saved__main { gap: .4rem; } .sl-saved__main .sl-btn { padding: .3rem .8rem; font-size: .88em; min-height: 2.75rem; } .sl-saved__item--green { border-left-color: var(--sl-hl-green-ink); } .sl-saved__item--yellow { border-left-color: var(--sl-hl-yellow-ink); } .sl-saved__item--pink { border-left-color: var(--sl-hl-pink-ink); } .sl-saved__item--orange { border-left-color: var(--sl-hl-orange-ink); } .sl-saved__item--blue { border-left-color: var(--sl-hl-blue-ink); } .sl-saved__item--note { border-left-color: var(--sl-ink-faint); border-left-style: dashed; } .sl-saved__main { flex-wrap: nowrap; } .sl-saved__main .sl-btn { padding: .2rem .65rem; font-size: .84em; white-space: nowrap; } @media (max-width: 21rem) { .sl-saved__main { flex-wrap: wrap; } } /* ---------- rc.10: Highlight mode bar, pen, quick note, tray additions ---------- */ .sl-pen { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sl-pen__ink { stroke: var(--sl-hl-yellow-ink); stroke-width: 2.4; } [aria-pressed="true"] > .sl-pen .sl-pen__ink { stroke: var(--sl-hl-yellow); } .sl-hlbar__row { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; margin-top: .35rem; } .sl-hlbar__row > .sl-btn { min-height: 2.6rem; padding: .2rem .7rem; font-size: .88rem; white-space: nowrap; } .sl-hlbar__colours { position: relative; } .sl-hlbar__cats { flex: 1; min-width: 0; } .sl-hlbar__all { flex: none; position: static; } .sl-hlbar__all > summary { list-style: none; min-height: 2.6rem; min-width: 2.75rem; display: grid; place-items: center; cursor: pointer; padding: 0 .5rem; } .sl-hlbar__all > summary::-webkit-details-marker { display: none; } .sl-hlbar__allpanel { position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 2; width: min(20rem, calc(100vw - 2rem)); padding: .6rem .7rem; background: var(--sl-surface); border: 1px solid var(--sl-rule); border-radius: 12px; box-shadow: var(--sl-shadow); display: grid; gap: .35rem; } .sl-hlbar__allrow { display: flex; align-items: center; gap: .5rem; } .sl-hlbar__allrow .sl-acts__cat { flex: 1; justify-content: flex-start; } .sl-hlbar__rename { flex: 1; min-width: 6rem; min-height: 2.6rem; } .sl-acts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .sl-acts__pick { width: 100%; text-align: left; display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem .5rem; border: 1px solid var(--sl-rule); border-radius: 10px; background: var(--sl-surface); color: var(--sl-ink); font: inherit; cursor: pointer; } .sl-acts__notebox { display: grid; gap: .3rem; } .sl-acts__notebox[hidden] { display: none; } .sl-acts__row .sl-btn { min-height: 2.6rem; } .sl-quicknote .sl-saved__note { width: 100%; } /* ---------- rc.10 (UX09): About these texts — bounded sheet, pinned title and Close, three tabs ---------- */ .sl-sheet--ei .sl-sheet__panel { display: flex; flex-direction: column; overflow: hidden; padding: 0; max-height: calc(100dvh - 4rem); } .sl-sheet--ei .sl-sheet__handle { margin: .55rem auto .2rem; flex: none; } .sl-ei__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .75rem 0 1.25rem; } .sl-ei__head h2 { margin: 0; font-size: 1.35em; } .sl-ei__tabs { flex: none; display: flex; gap: .25rem; padding: .35rem 1rem .5rem; border-bottom: 1px solid var(--sl-rule); overflow-x: auto; } .sl-ei__tabs [role="tab"] { min-height: 2.75rem; padding: 0 1rem; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--sl-ink-soft); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; } .sl-ei__tabs [role="tab"][aria-selected="true"] { border-color: var(--sl-ink); color: var(--sl-ink); background: var(--sl-sunk); } .sl-ei__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: .75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); } .sl-ei__body * { overflow-wrap: anywhere; } .sl-ei__pane[hidden] { display: none; } .sl-ei__card { padding: .4rem 0 .6rem; border-bottom: 1px solid color-mix(in srgb, var(--sl-rule) 60%, transparent); } .sl-ei__card h3 { margin: .3rem 0; font-size: 1.05em; } .sl-ei__id { display: flex; align-items: center; gap: .6rem; margin: .2rem 0; } .sl-ei .sl-edcard__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; margin: 0; } .sl-ei .sl-edcard__facts dt { font-weight: 600; font-size: .85em; color: var(--sl-ink-soft); margin-top: .45rem; } .sl-ei .sl-edcard__facts dd { margin: 0; } .sl .sl-sheet--ei .sl-ei__head h2 { margin: 0; line-height: 1.2; } .sl .sl-sheet--ei .sl-ei__head { min-height: 3rem; padding-top: 0; } .sl .sl-sheet--ei .sl-ei__tabs [role="tab"] { font-family: var(--f-ui, inherit); font-size: .95rem; } .sl .sl-sheet--ei .sl-ei__body p { margin: .35rem 0; } .sl .sl-sheet--ei .sl-sheet__handle { flex: 0 0 5px; height: 5px; margin: .6rem auto .3rem; } .sl .sl-sheet--ei .sl-ei__tabs { padding-top: .2rem; padding-bottom: .4rem; } /* rc.10: no double-tap zoom on Library controls (pinch-zoom and page zoom are kept). */ .sl :is(button, summary, select, label, .sl-btn, .sl-tool, .sl-chip, .sl-acts__cat) { touch-action: manipulation; } /* rc.10 (E05): saved Greek/Hebrew words, and the save row in word study. */ .sl-tok.sl-hl--green { background: var(--sl-hl-green); } .sl-tok.sl-hl--yellow { background: var(--sl-hl-yellow); } .sl-tok.sl-hl--pink { background: var(--sl-hl-pink); } .sl-tok.sl-hl--orange { background: var(--sl-hl-orange); } .sl-tok.sl-hl--blue { background: var(--sl-hl-blue); } .sl-tok.sl-hl { border-radius: 3px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--sl-ink) 35%, transparent); } .sl-gloss__save { margin: .4rem 0 .6rem; padding: .45rem 0; border-top: 1px dashed var(--sl-rule); border-bottom: 1px dashed var(--sl-rule); } .sl-gloss__save .sl-acts__cats { flex-wrap: wrap; } .sl-gloss__savelabel { margin: 0 0 .3rem; font-weight: 600; } /* rc.10 (owner): the device note is a small ⓘ beside the heading; its text opens below on request. */ .sl-saved__head { position: relative; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .sl-saved__head h1 { margin: 0; } .sl-infonote--quiet { position: static; } .sl-infonote--quiet > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; border-radius: 50%; } .sl-infonote--quiet > summary::-webkit-details-marker { display: none; } .sl-infonote--quiet .sl-infonote__i { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1.4px solid var(--sl-ink-faint); border-radius: 50%; font-style: italic; font-weight: 600; font-size: .8rem; color: var(--sl-ink-faint); } .sl-infonote--quiet[open] .sl-infonote__i { border-color: var(--sl-ink); color: var(--sl-ink); } .sl-infonote__pop { position: absolute; z-index: 5; left: 0; top: 100%; width: min(24rem, 100%); box-sizing: border-box; margin: 0; padding: .6rem .8rem; background: var(--sl-surface); border: 1px solid var(--sl-rule); border-radius: 10px; box-shadow: var(--sl-shadow); } .sl-acts__three { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; } .sl-acts__three .sl-acts__btn { padding-left: .3rem; padding-right: .3rem; } /* ---------------------------------------------------------------- rc.11 */ /* UX06: saved and current wording. Matched rows where there is room; stacked, labelled blocks on phones. Differences are struck through / underlined (and named for screen readers), never shown by colour alone. */ .sl-wc__lead { margin: .2rem 0 .7rem; } .sl-wc__lead--changed { padding: .5rem .75rem; border-left: 3px solid var(--sl-rubric); background: var(--sl-sunk); border-radius: 0 6px 6px 0; } .sl-wc__heads { display: none; } .sl-wc__grid { display: grid; gap: .75rem; margin: .4rem 0 .6rem; } .sl-wc__row { display: grid; gap: .35rem .9rem; padding: .6rem 0 .5rem; border-top: 1px solid var(--sl-rule); } .sl-wc__ref { margin: 0; font-family: var(--f-ui, system-ui); font-weight: 600; font-size: .9em; } .sl-wc__cell { min-width: 0; } .sl-wc__label { margin: 0 0 .15rem; font-family: var(--f-ui, system-ui); font-size: .78em; letter-spacing: .04em; text-transform: uppercase; color: var(--sl-ink-faint); } .sl-wc__cell blockquote { margin: 0; padding: .45rem .65rem; background: var(--sl-page); border-radius: 6px; line-height: 1.55; overflow-wrap: anywhere; } .sl-wc__cell--current blockquote { background: var(--sl-surface); border: 1px solid var(--sl-rule); } .sl-wc__note { margin: 0; color: var(--sl-ink-soft); } .sl-wc__del { text-decoration: line-through; text-decoration-thickness: 2px; background: var(--sl-sunk); color: var(--sl-ink); } .sl-wc__ins { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; font-weight: 600; background: var(--sl-sunk); color: var(--sl-ink); } .sl-wc__legend { margin: 0 0 .6rem; color: var(--sl-ink-soft); } .sl-wc__vn { color: var(--sl-rubric); font-family: var(--f-ui, system-ui); font-size: .72em; } .sl-wc__fold { margin: .5rem 0; border-top: 1px solid var(--sl-rule); } .sl-wc__fold > summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font-family: var(--f-ui, system-ui); font-weight: 600; } .sl-wc__actions { margin-top: 1rem; } @media (min-width: 40rem) { .sl-wc__heads { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 0; } .sl-wc__heads p { margin: 0; } .sl-wc__row { grid-template-columns: 1fr 1fr; } .sl-wc__ref, .sl-wc__note { grid-column: 1 / -1; } .sl-wc__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .sl-saved__wording { margin: .35rem 0 0; padding: .3rem .6rem; border-left: 3px solid var(--sl-rubric); background: var(--sl-sunk); border-radius: 0 6px 6px 0; } .sl-saved__wording[hidden] { display: none; } /* UX07: word study — a few clearly named folds below the essentials. */ .sl-gloss__fold { margin: .6rem 0 0; border-top: 1px solid var(--sl-rule); } .sl-gloss__fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; min-height: 44px; padding: .55rem 0 .3rem; cursor: pointer; list-style: none; font-family: var(--f-ui, system-ui); font-weight: 600; } .sl-gloss__fold > summary::-webkit-details-marker { display: none; } .sl-gloss__fold > summary::before { content: '▸' / ''; color: var(--sl-rubric); width: 1em; flex: none; } .sl-gloss__fold[open] > summary::before { content: '▾' / ''; } .sl-gloss__foldhint { font-weight: 400; } .sl-gloss__fold code { font-size: .92em; } /* P36/P104: the passage chooser — canon sections as disclosures; chapters open under the chosen book. */ .sl-picker__top { position: sticky; top: -1rem; z-index: 2; margin: -1rem -1.25rem 0; padding: 1rem 1.25rem .1rem; background: var(--sl-surface); border-bottom: 1px solid var(--sl-rule); } .sl-picker__top > h2 { margin-top: 0; } .sl-picker__controls { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; } .sl-picker__ed { margin: 0 0 .4rem; } .sl-booklist--groups { columns: auto; } .sl-booklist--groups .sl-booklist__group { margin: 0; border-top: 1px solid var(--sl-rule); } .sl-booklist--groups .sl-booklist__group > summary { display: flex; align-items: center; gap: .5rem; min-height: 46px; cursor: pointer; list-style: none; font-family: var(--f-ui, system-ui); font-weight: 600; } .sl-booklist--groups .sl-booklist__group > summary::-webkit-details-marker { display: none; } .sl-booklist--groups .sl-booklist__group > summary::before { content: '▸' / ''; color: var(--sl-rubric); width: 1em; } .sl-booklist--groups .sl-booklist__group[open] > summary::before { content: '▾' / ''; } .sl-booklist__count { margin-left: auto; font-weight: 400; font-size: .85em; color: var(--sl-ink-faint); } .sl-booklist__here, .sl-booklist__now { font-weight: 400; font-size: .82em; color: var(--sl-rubric); } .sl-booklist--groups ul { columns: 13rem; column-gap: 1.25rem; padding-bottom: .5rem; } .sl-booklist--groups li { break-inside: avoid; } .sl-booklist__book { display: flex; justify-content: space-between; gap: .5rem; width: 100%; min-height: 40px; padding: .3rem .4rem; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .sl-booklist__book:hover, .sl-booklist__book:focus-visible { background: var(--sl-sunk); } .sl-booklist__book[aria-current="true"] { font-weight: 600; } .sl-booklist__book[aria-expanded="true"] { background: var(--sl-sunk); } .sl-picker__chapters { padding: .35rem .2rem .7rem; break-inside: avoid; } .sl-picker__chhead { margin: .2rem 0 .35rem; } .sl-picker__fallback { display: block; color: var(--sl-ink-soft); } .sl-chapters a[aria-current="page"] { outline: 2px solid var(--sl-rubric); font-weight: 700; } /* rc.12: Arabic (Qur'an) — Amiri Quran (OFL), self-hosted like the Greek and Hebrew faces. */ @font-face { font-family: "SL Amiri Quran"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/amiri-quran-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFC; } .sl-ar, [lang="ar"] { font-family: "SL Amiri Quran", "Amiri Quran", "Noto Naskh Arabic", serif; } .sl-orig--ar { font-size: 1.45em; line-height: 2.1; } .sl-orig--ar .sl-tok { font-family: inherit; } .sl-basmala { font-size: 1.4em; text-align: center; } .sl-ar-sign { color: var(--sl-rubric); } .sl-gloss__word.sl-ar { font-size: 2rem; line-height: 1.8; } .sl-surah-title .sl-ar { font-size: 1.3em; } .sl-basmala-en { font-style: italic; text-align: center; margin: 0 0 var(--sl-s2, .5rem); } /* ---------- rc.13: Saved — filters, items, and your-data tools ---------- */ .sl-saved__sum { margin: 0; flex-basis: 100%; } .sl-saved__flabel { margin: .6rem 0 0; font-family: var(--f-ui, inherit); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-ink-faint); } .sl-saved__flabel:first-child { margin-top: .2rem; } .sl-saved__filters { margin: .4rem 0 0; } .sl-saved__side { margin-top: 2rem; } .sl-saved__sideh { font-size: 1em; margin: 0 0 .25rem; color: var(--sl-ink-soft); } .sl-saved__side > .sl-saved__labels, .sl-saved__side > .sl-saved__utils, .sl-saved__side > .sl-saved__resetfold { margin: 0; border: 0; border-bottom: 1px solid var(--sl-rule); border-radius: 0; padding: .1rem 0 .4rem; background: none; } .sl-saved__side > .sl-saved__labels > summary { font-weight: 600; } .sl-saved__side > :first-child + .sl-saved__labels, .sl-saved__side > .sl-saved__labels:first-child { border-top: 1px solid var(--sl-rule); } .sl-saved__side > .sl-saved__resetfold > summary { flex-wrap: wrap; } .sl-saved__side > .sl-saved__resetfold > summary > .sl-muted { flex-basis: 100%; order: 2; } @media (min-width: 64rem) { .sl-saved.sl-page { max-width: var(--wide, 80rem); } .sl-saved__layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; } .sl-saved__layout > .sl-saved__filters { grid-column: 1; grid-row: 1; margin-top: .9rem; } .sl-saved__layout > .sl-saved__listsec { grid-column: 2; grid-row: 1 / span 2; min-width: 0; } .sl-saved__layout > .sl-saved__side { grid-column: 1; grid-row: 2; margin-top: 1.75rem; } .sl-saved__layout.is-empty > .sl-saved__side { grid-row: 1; } .sl-saved__filters .sl-saved__types, .sl-saved__filters .sl-saved__filter { flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow: visible; margin: .3rem 0 0; } /* A quiet vertical list: the chosen entry is marked by a rule, weight and a tint (and its ✓), never colour alone. */ .sl-saved__filters .sl-saved__types button, .sl-saved__filters .sl-saved__filter button { text-align: left; border: 0; border-radius: 8px; min-height: 2.5rem; padding: .25rem .8rem; background: transparent; color: var(--sl-ink); box-shadow: none; font-weight: 400; } .sl-saved__filters .sl-saved__types button:hover, .sl-saved__filters .sl-saved__filter button:hover { background: color-mix(in srgb, var(--sl-sunk) 70%, transparent); } .sl-saved__filters .sl-saved__types button[aria-pressed="true"], .sl-saved__filters .sl-saved__filter button[aria-pressed="true"] { background: var(--sl-sunk); color: var(--sl-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--sl-ink); } .sl-saved__filters .sl-saved__filter button[data-color] { padding-left: 1.6rem; position: relative; } .sl-saved__filters .sl-saved__filter button[data-color]::after { content: ''; position: absolute; left: .65rem; top: 50%; width: .62rem; height: .62rem; margin-top: -.31rem; border-radius: 50%; background: var(--sw, currentColor); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-ink) 25%, transparent); } .sl-saved__filters .sl-saved__filter button[data-color="green"] { --sw: var(--sl-hl-green-ink); } .sl-saved__filters .sl-saved__filter button[data-color="yellow"] { --sw: var(--sl-hl-yellow-ink); } .sl-saved__filters .sl-saved__filter button[data-color="pink"] { --sw: var(--sl-hl-pink-ink); } .sl-saved__filters .sl-saved__filter button[data-color="orange"] { --sw: var(--sl-hl-orange-ink); } .sl-saved__filters .sl-saved__filter button[data-color="blue"] { --sw: var(--sl-hl-blue-ink); } .sl-saved__filters .sl-saved__filter button[data-color][aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--sw); } .sl-saved__count { margin-top: .9rem; } .sl-saved__utilgrid { grid-template-columns: 1fr; } .sl-saved__labelrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .5rem; align-items: center; } .sl-saved__labelrow .sl-check { grid-column: 2; min-height: 2rem; } } @media (min-width: 88rem) { .sl-saved-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } /* ---------- rc.13: the reader's side pane (word study, Translations) on wide screens ---------- */ @media (min-width: 75rem) { .sl-reader.has-gloss { max-width: calc(var(--sl-measure) + 30rem); grid-template-columns: minmax(0, var(--sl-measure)) minmax(22rem, 26rem); } .sl-gloss { width: min(26rem, 32vw); } .sl-gloss.sl-side { padding-top: .6rem; } .sl-gloss.sl-side .sl-sheet__close { margin: -.2rem -.4rem 0 .5rem; } .sl-gloss.sl-side h2 { font-size: 1.25em; margin: .2rem 0 .6rem; } } @media (min-width: 90rem) { .sl-reader.has-gloss { max-width: calc(var(--sl-measure) + 34rem); grid-template-columns: minmax(0, var(--sl-measure)) minmax(24rem, 30rem); } .sl-gloss { width: min(30rem, 32vw); } } /* rc.13: the word-study Save row sits after the answer, compact: whole colour names (never broken mid-word), smaller chips. */ .sl-gloss__save { border-bottom: 0; margin-bottom: .2rem; } .sl-gloss__save .sl-acts__cat { flex: 0 1 auto; min-height: 40px; padding: .2rem .7rem; font-size: .84rem; } .sl-gloss__save .sl-acts__catlabel { overflow-wrap: normal; white-space: nowrap; } /* ---------- rc.13: marking across a chapter boundary ---------- */ .sl-edge { display: none; align-items: center; flex-wrap: wrap; gap: .3rem .75rem; margin: 1rem 0; padding: .55rem .75rem; border: 1px dashed var(--sl-rule); border-radius: 10px; font-size: .9rem; } .sl-text.is-hlmode .sl-edge:not([hidden]) { display: flex; } .sl-edge--prev { margin-top: 0; } .sl-edge__btn { min-height: 2.5rem; } .sl-adjacent { margin: 1.25rem 0; padding: .5rem .9rem .2rem; border-left: 3px solid var(--sl-gold); background: color-mix(in srgb, var(--sl-surface) 55%, transparent); border-radius: 0 8px 8px 0; } .sl-adjacent__bar { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .4rem; font-family: var(--f-ui, inherit); } .sl-adjacent__title { font-size: 1.15em !important; margin: 0 !important; } .sl-adjacent__hide { margin-left: auto; min-height: 2.5rem; } .sl-acts__edge { margin: .5rem 0 0; } .sl-search-help { margin: .2rem 0 .8rem; } .sl-search-help > summary { cursor: pointer; min-height: 2.25rem; display: inline-flex; align-items: center; color: var(--sl-ink-soft); } .sl-search-help > p { margin: .2rem 0 0; } /* ---------- rc.13 (5C, E08): saved original words on the English — projection (published alignment) and your own link ---------- */ .sl-w.sl-proj { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: var(--pc, var(--sl-verdigris)); } .sl-w.sl-mlink { text-decoration: underline dashed; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: var(--pc, var(--sl-gold)); } .sl-w.sl-proj--green, .sl-w.sl-mlink--green { --pc: var(--sl-hl-green-ink); } .sl-w.sl-proj--yellow, .sl-w.sl-mlink--yellow { --pc: var(--sl-hl-yellow-ink); } .sl-w.sl-proj--pink, .sl-w.sl-mlink--pink { --pc: var(--sl-hl-pink-ink); } .sl-w.sl-proj--orange, .sl-w.sl-mlink--orange { --pc: var(--sl-hl-orange-ink); } .sl-w.sl-proj--blue, .sl-w.sl-mlink--blue { --pc: var(--sl-hl-blue-ink); } .sl-text.is-linkmode [data-ref]:not(.is-linktarget) { opacity: .55; } .sl-text.is-linkmode .is-linktarget .sl-w { cursor: pointer; border-radius: 3px; } .sl-text.is-linkmode .is-linktarget .sl-w:hover { background: color-mix(in srgb, var(--sl-gold) 18%, transparent); } .sl-w.is-linkpick { background: color-mix(in srgb, var(--sl-gold) 32%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-gold) 60%, transparent); } .sl-linkbar__orig { font-size: 1.1em; margin: 0 .2em; color: var(--sl-verdigris); } .sl-linkbar__chosen { margin: .25rem 0 .4rem; font-weight: 600; } .sl-saved__english { margin-top: .2rem; } .sl-saved__englist { list-style: none; padding: 0; margin: .2rem 0 .3rem; display: grid; gap: .3rem; } .sl-saved__linkkind { display: inline-block; font-family: var(--f-ui, inherit); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 0 .4em; border: 1px solid var(--sl-verdigris); color: var(--sl-verdigris); border-radius: 4px; } .sl-saved__linkkind--manual { border-style: dashed; border-color: var(--sl-gold); color: var(--sl-gold); } .sl-saved__relhint { margin: .1rem 0 .2rem; } .sl-saved__relhint[hidden] { display: none; } .sl-menu__h { margin: .4rem 0 -.3rem !important; font-size: .78rem !important; font-family: var(--f-ui, inherit); font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-ink-faint) !important; } /* ---------- rc.13: Library home and Topics on large screens ---------- */ @media (min-width: 64rem) { .sl--host .sl-wide { max-width: var(--wide, 64rem); } .sl-folds { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; } .sl-folds > [data-home-section="books"] { grid-column: 1; grid-row: 1 / span 8; } .sl-folds > :not([data-home-section="books"]) { grid-column: 2; } .sl-topics.sl-page { max-width: var(--wide, 64rem); } .sl-topics .sl-lede { max-width: 44rem; } } .sl-orig__label.is-repeat { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* rc.13: very large text — the book groups' summaries and long codes wrap instead of overflowing */ .sl-bookgroup > summary { flex-wrap: wrap; min-width: 0; } .sl-bookgroup { min-width: 0; } .sl code { overflow-wrap: anywhere; word-break: break-word; } /* ---------- rc.14 (UI-06): enlarged text (200%) on narrow phones — nothing wider than the screen ---------- */ /* Book list: a long name and its status tag ("apocrypha") wrap instead of pushing past the edge. */ .sl-booklist a { flex-wrap: wrap; } .sl-booklist a > * { min-width: 0; overflow-wrap: anywhere; } /* English verse text and comparison cells: an unusually long word may break rather than widen the page. */ .sl-eng, .sl-cmp__text, .sl-v { overflow-wrap: anywhere; } /* Sources tables: on narrow screens each row becomes a stacked block (headings repeated by position). */ @media (max-width: 40rem) { .sl-table:not(.sl-table--packages), .sl-table:not(.sl-table--packages) tbody, .sl-table:not(.sl-table--packages) tr, .sl-table:not(.sl-table--packages) td { display: block; width: auto; } .sl-table:not(.sl-table--packages) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sl-table:not(.sl-table--packages) tr { padding: .5rem 0; border-bottom: 1px solid var(--sl-rule); } .sl-table:not(.sl-table--packages) td { border-bottom: 0; padding: .15rem 0; overflow-wrap: anywhere; } .sl-record, .sl-record dd { margin-inline-start: 0; overflow-wrap: anywhere; } } @media (max-width: 34rem) { .sl-edcard__facts { grid-template-columns: minmax(0, 1fr); } } /* A single long word (a title, “researched”, a citation) breaks only if it cannot fit; ordinary layout is unchanged. */ @media (max-width: 30rem) { .sl { overflow-wrap: break-word; hyphens: auto; } } @media (max-width: 30rem) { .sl-fold > summary { flex-wrap: wrap; } .sl-fold__title, .sl-fold__hint { min-width: 0; } } @media (max-width: 30rem) { .sl-edcard__head { flex-wrap: wrap; } .sl-edcard__head > * { min-width: 0; } } /* ================================================================ rc.14 */ /* Compact palette: three shortcuts and More. Whole buttons wrap onto another row before any label breaks; a label wraps only between words (two lines at most, its full name stays the button's accessible name). Replaces the rc.8 overflow-wrap:anywhere rule that could leave "Gree n". */ .sl-pal { display: flex; flex-wrap: wrap; gap: .35rem; align-items: stretch; } .sl-pal > .sl-acts__cat, .sl-pal__more > .sl-acts__cat { flex: 1 1 5.5rem; min-width: min(5.5rem, 100%); max-width: 100%; flex-direction: row; min-height: 44px; font-size: .86rem; padding: .3rem .55rem; } .sl-pal .sl-acts__catlabel { overflow-wrap: normal; word-break: normal; hyphens: manual; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } .sl-pal__more { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 100%; } .sl-pal__more[hidden] { display: none; } .sl-pal__morebtn { background: transparent; color: var(--sl-ink); border: 1px dashed var(--sl-rule); flex: 0 1 auto !important; min-width: 0 !important; } .sl-pal__moreglyph { font-weight: 700; color: var(--sl-ink-soft); } .sl-acts__cat.is-current { outline: 2.5px solid var(--sl-ink); outline-offset: 1px; } .sl-acts__cat.is-current::after { content: "✓"; margin-left: .15rem; font-weight: 700; } .sl-gloss__save .sl-pal .sl-acts__cat { flex: 0 1 auto; min-width: 0; min-height: 40px; padding: .2rem .7rem; } .sl-hlbar__more { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; } @media (max-width: 22rem) { .sl-pal > .sl-acts__cat, .sl-pal__more > .sl-acts__cat { flex-basis: 4.5rem; font-size: .8rem; padding: .25rem .4rem; } } /* A tapped word answers first: the original word(s) and each translation's own linked words. */ .sl-wordans { display: grid; gap: .25rem; padding: .1rem 0 .35rem; border-bottom: 1px solid color-mix(in srgb, var(--sl-rule) 70%, transparent); } .sl-wordans__orig { margin: 0; font-size: 1rem; line-height: 1.4; } .sl-wordans__lab, .sl-wordans__head { font-family: var(--f-ui, system-ui); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sl-gold); margin: 0; } .sl-wordans__ow { font-size: 1.35em; color: var(--sl-verdigris); } .sl-wordans__ow[lang="he"], .sl-wordans__ow[lang="arc"] { font-family: var(--sl-font-heb, serif); font-size: 1.5em; } .sl-wordans__tr { color: var(--sl-ink-soft); } .sl-wordans__eds { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .sl-wordans__ed { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; font-size: .92rem; } .sl-wordans__edname { flex: 0 0 3.2rem; font-family: var(--f-ui, system-ui); font-size: .75rem; font-weight: 700; color: var(--sl-ink-soft); } .sl-wordans__ed.is-current .sl-wordans__edname { color: var(--sl-ink); } .sl-wordans__w { font-weight: 600; } .sl-wordans__none, .sl-wordans__qual { font-size: .85rem; } .sl-wordans .sl-source { margin: .1rem 0 0; } .sl-acts { max-height: calc(100dvh - 5rem - var(--kb, 0px)); overflow-y: auto; overscroll-behavior: contain; } /* The highlight-mode bar is short and its More panel opens above it: it must not be clipped by the tray's scrolling. */ .sl-acts.sl-hlbar { max-height: none; overflow: visible; } .sl-hlbar__allpanel { max-height: calc(100dvh - 12rem); overflow-y: auto; } /* A marked area: each highlight under the word, with direct routes to its colour and to all highlights. */ .sl-acts__marked { display: grid; gap: .3rem; } .sl-acts__marks { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .sl-acts__markrow { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; } .sl-acts__markrow .sl-acts__pick { flex: 1 1 12rem; width: auto; } .sl-acts__view { min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; } .sl-acts__count { font-weight: 400; color: var(--sl-ink-soft); } .sl-acts__pickw { overflow: hidden; text-overflow: ellipsis; } /* Saved: arriving from a highlight in the reader. */ .sl-saved__arrival { margin: 0 0 .75rem; padding: .55rem .75rem; border: 1px solid var(--sl-rule); border-left: 3px solid var(--sl-gold); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--sl-surface) 70%, transparent); } .sl-saved__arrival p { margin: .1rem 0; } .sl-saved__arrivalbtns { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .4rem !important; } .sl-saved__back { min-height: 2.75rem; } .sl-saved__item.is-focus { box-shadow: 0 0 0 2px var(--sl-gold); } .sl-saved__focustag { font-weight: 600; color: var(--sl-ink-soft); } /* Translations: the passage in each translation (cards; side by side where the panel is wide enough). */ .sl-trans__passage { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--sl-rule); } .sl-trans__ptitle { font-size: 1em; margin: 0 0 .2rem; } .sl-trans__basis { margin: 0 0 .5rem; } .sl-trans__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: .6rem; } .sl-trans__card { padding: .5rem .7rem .6rem; border: 1px solid color-mix(in srgb, var(--sl-rule) 80%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--sl-surface) 60%, transparent); min-width: 0; } .sl-trans__card.is-current { border-color: var(--sl-gold); } .sl-trans__edname { margin: 0 0 .3rem; font-size: .92em; } .sl-trans__ptext { line-height: 1.6; font-size: 1.02em; overflow-wrap: break-word; } .sl-trans__vn { font-family: var(--f-ui, system-ui); font-size: .68em; font-weight: 700; color: var(--sl-gold); margin-right: .1em; } .sl-trans__pbreak { color: var(--sl-ink-faint); margin: 0 .2em; } mark.sl-trans__sel { background: color-mix(in srgb, var(--sl-gold) 30%, transparent); color: inherit; border-radius: 3px; } mark.sl-trans__match { background: color-mix(in srgb, var(--sl-verdigris) 22%, transparent); color: inherit; border-radius: 3px; text-decoration: underline dotted; } .sl-trans__origctx { margin-top: .6rem; } .sl-trans__origctx > summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; font-weight: 600; } .sl-trans__origtext { font-size: 1.25em; line-height: 1.7; color: var(--sl-verdigris); } .sl-trans__origtext[lang="he"], .sl-trans__origtext[lang="arc"] { font-family: var(--sl-font-heb, serif); } /* The Highlight-mode bar keeps its one row of three, with labels that wrap only between words. */ .sl-hlbar__cats .sl-acts__catlabel, .sl-hlbar__allrow .sl-acts__catlabel { overflow-wrap: normal; word-break: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Shared language notes: a quiet marker distinct from the translators' own note marks (* and †). */ .sl-note-mark.sl-note-mark--shared { color: var(--sl-verdigris); font-size: .72em; line-height: 1; vertical-align: .45em; padding: .15em .3em; margin-left: .05em; } .sl-sharednote__item + .sl-sharednote__item { border-top: 1px solid var(--sl-rule); margin-top: .6rem; padding-top: .4rem; } .sl-sharednote__text { font-size: 1.08em; } .sl-gloss__acts { margin: .5rem 0 .25rem; } .sl-gloss__meaning { margin: .2rem 0 .5rem; } .sl-wordans--gloss { border-bottom: 0; } /* rc.14 (axe, found with the new Undo toasts): Undo inside the dark toast takes the toast's own text colour, underlined, so it meets contrast in light and dark (it used the page's link colour on the toast's ink background). */ .sl .sl-toast .sl-linkbtn, .sl-toast .sl-linkbtn { color: var(--sl-page); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; min-height: 2.25rem; } /* rc.14: three tray buttons on a phone — the decorative script glyph would stack above “Translations”; the word is enough. */ @media (max-width: 30rem) { .sl-acts__two:has(> :nth-child(3)) .sl-acts__glyph { display: none; } }