Created
January 5, 2026 22:30
-
-
Save arinthros/8522374b90294b886af8d46a72ca1bd6 to your computer and use it in GitHub Desktop.
YVDom CSS Exhaustive Reference
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * ============================================================================= | |
| * YVDOM Complete Stylesheet - Generated by Claude Opus 4.5 | |
| * ============================================================================= | |
| * | |
| * YVDOM (YouVersion DOM) is the HTML structure used to represent Bible content | |
| * at YouVersion. It is derived from USX (Unified Scripture XML), which is the | |
| * standard XML format for scripture content. | |
| * | |
| * This stylesheet provides exhaustive documentation and styling for all YVDOM | |
| * node types and classes. | |
| * | |
| * ----------------------------------------------------------------------------- | |
| * Node Type Mapping (USX to YVDOM) | |
| * ----------------------------------------------------------------------------- | |
| * | |
| * | USX Element | YVDOM Node Type | HTML Rendering | | |
| * |--------------|-----------------|----------------| | |
| * | <para> | Block | <div> | | |
| * | <char> | Span | <span> | | |
| * | <note> | Span | <span> | | |
| * | <table> | Table | <table> | | |
| * | <row> | Row | <tr> | | |
| * | <cell> | Cell | <td>/<th> | | |
| * | text content | Text | text node | | |
| * | <verse> | Span (milestone)| <span> | | |
| * | <chapter> | Block (label) | <div> | | |
| * | |
| * ----------------------------------------------------------------------------- | |
| * YouVersion-Specific Classes (yv- prefix) | |
| * ----------------------------------------------------------------------------- | |
| * | |
| * Classes prefixed with "yv-" are YouVersion-specific additions not from USX: | |
| * - yv-h : Marks a Block as a heading | |
| * - yv-v : Marks a Span as a verse milestone | |
| * - yv-vlbl : Marks a Span as a verse label (display number) | |
| * - yv-clbl : Marks a Block as a chapter label | |
| * - yv-n : Marks a Span as a note (footnote/cross-reference) | |
| * | |
| * ============================================================================= | |
| */ | |
| /* ============================================================================= | |
| CSS CUSTOM PROPERTIES (Theming Variables) | |
| ============================================================================= */ | |
| :root { | |
| /* Text colors */ | |
| --yvdom-text-primary: #2b3031; | |
| --yvdom-text-secondary: #888888; | |
| --yvdom-text-muted: #aaaaaa; | |
| /* Words of Jesus */ | |
| --yvdom-wj-color: #ff3d4d; | |
| --yvdom-wj-color-dark: #f04c59; | |
| /* Interactive states */ | |
| --yvdom-highlight-bg: rgba(255, 255, 0, 0.3); | |
| --yvdom-selection-border: 3px dotted #888; | |
| /* Spacing */ | |
| --yvdom-line-height: 1.8em; | |
| --yvdom-indent-unit: 1em; | |
| --yvdom-poetry-indent: 2em; | |
| /* Font sizing */ | |
| --yvdom-font-size-base: 1em; | |
| --yvdom-font-size-heading-lg: 1.3em; | |
| --yvdom-font-size-heading-md: 1.1em; | |
| --yvdom-font-size-small: 0.75em; | |
| --yvdom-font-size-verse-label: 0.5em; | |
| } | |
| /* ============================================================================= | |
| 1. YOUVERSION-SPECIFIC CLASSES (yv- prefix) | |
| ============================================================================= */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * yv-h : Heading Marker | |
| * ----------------------------------------------------------------------------- | |
| * Used on Block elements to classify them as headings. Combined with USX | |
| * heading classes (s, s1, ms, etc.) to provide semantic meaning. | |
| */ | |
| .yv-h { | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 0 0.5em 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * yv-v : Verse Milestone | |
| * ----------------------------------------------------------------------------- | |
| * Empty Span marking the start of a verse. Contains attributes: | |
| * - v : Starting verse number (required) | |
| * - ev : Ending verse number (optional, for verse ranges) | |
| * | |
| * Used to identify verse boundaries. Content following this milestone until | |
| * the next yv-v belongs to this verse. | |
| */ | |
| .yv-v { | |
| /* Milestones are invisible markers */ | |
| display: none; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * yv-vlbl : Verse Label | |
| * ----------------------------------------------------------------------------- | |
| * Span containing the displayed verse number. Child text node contains the | |
| * verse number string (e.g., "16" or "16-18" for ranges). | |
| */ | |
| .yv-vlbl { | |
| display: inline; | |
| padding-right: 0.3em; | |
| font-size: var(--yvdom-font-size-verse-label); | |
| color: var(--yvdom-text-primary); | |
| line-height: 1em; | |
| vertical-align: baseline; | |
| position: relative; | |
| top: -0.6em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * yv-clbl : Chapter Label | |
| * ----------------------------------------------------------------------------- | |
| * Block containing the chapter label/number. Used when translations display | |
| * chapter divisions as headings rather than drop cap numerals. | |
| */ | |
| .yv-clbl { | |
| display: none; /* Often hidden, shown via specific version overrides */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * yv-n : Note Marker | |
| * ----------------------------------------------------------------------------- | |
| * Span marking a footnote or cross-reference. Combined with note type class: | |
| * - f : Footnote | |
| * - fe : Endnote | |
| * - ef : Extended/study footnote | |
| * - x : Cross-reference | |
| * - ex : Extended cross-reference | |
| */ | |
| .yv-n { | |
| text-indent: 0; | |
| display: none; /* Notes hidden by default, shown on interaction */ | |
| } | |
| .yv-n.f, | |
| .yv-n.fe, | |
| .yv-n.ef { | |
| /* Footnote-specific styling */ | |
| } | |
| .yv-n.x, | |
| .yv-n.ex { | |
| /* Cross-reference-specific styling */ | |
| } | |
| /* ============================================================================= | |
| 2. BLOCK ELEMENTS - PARAGRAPHS | |
| ============================================================================= */ | |
| /** | |
| * Paragraph styles from USX. All render as Block (div) elements in YVDOM. | |
| * Common properties: line-height, margins, indentation. | |
| */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * p : Normal Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Standard paragraph with first line indent. Most common paragraph style. | |
| */ | |
| .p { | |
| margin-bottom: 0; | |
| text-indent: var(--yvdom-indent-unit); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * m : Margin Paragraph (Paragraph Continuation) | |
| * ----------------------------------------------------------------------------- | |
| * Paragraph with no first line indent. Used to resume prose at margin after | |
| * poetry or OT quotation (continuation of previous paragraph). | |
| */ | |
| .m { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0; | |
| text-indent: 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * nb : No Break Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Paragraph with no break from previous paragraph text (at chapter boundary). | |
| */ | |
| .nb { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0; | |
| text-indent: 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * mi : Indented Margin Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Indented paragraph with no first line indent. Often used for discourse. | |
| */ | |
| .mi { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 var(--yvdom-indent-unit); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * pi, pi1, pi2, pi3 : Indented Paragraphs | |
| * ----------------------------------------------------------------------------- | |
| * Paragraph with level # indent and first line indent. | |
| * Often used for discourse sections. | |
| */ | |
| .pi, | |
| .pi1 { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 var(--yvdom-indent-unit); | |
| text-indent: var(--yvdom-indent-unit); | |
| } | |
| .pi2 { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 var(--yvdom-indent-unit); | |
| text-indent: calc(var(--yvdom-indent-unit) * 2); | |
| } | |
| .pi3 { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 var(--yvdom-indent-unit); | |
| text-indent: calc(var(--yvdom-indent-unit) * 3); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * pc : Centered Paragraph (Inscription) | |
| * ----------------------------------------------------------------------------- | |
| * Centered paragraph, typically used for inscriptions. | |
| */ | |
| .pc { | |
| text-align: center; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * pr : Right-Aligned Paragraph / Text Refrain | |
| * ----------------------------------------------------------------------------- | |
| * Right-aligned paragraph. Recommended use: text refrain. | |
| */ | |
| .pr { | |
| text-align: right; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * cls : Closure of an Epistle | |
| * ----------------------------------------------------------------------------- | |
| * Closing paragraph of an epistle/letter. | |
| */ | |
| .cls { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * po : Letter Opening | |
| * ----------------------------------------------------------------------------- | |
| * Opening paragraph of an epistle/letter. | |
| */ | |
| .po { | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * pmo, pm, pmc, pmr : Embedded Text Paragraphs | |
| * ----------------------------------------------------------------------------- | |
| * pmo : Embedded text opening | |
| * pm : Embedded text paragraph | |
| * pmc : Embedded text closing | |
| * pmr : Embedded text refrain (right-aligned) | |
| */ | |
| .pmo, | |
| .pm, | |
| .pmc { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 var(--yvdom-indent-unit); | |
| } | |
| .pmr { | |
| text-align: right; | |
| margin-right: 0.3em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ph, ph1, ph2, ph3 : Hanging Indent Paragraphs (DEPRECATED) | |
| * ----------------------------------------------------------------------------- | |
| * Paragraph with level # hanging indent. | |
| * DEPRECATED: Use li# (list) styles instead. | |
| */ | |
| .ph, | |
| .ph1 { | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| padding-left: var(--yvdom-poetry-indent); | |
| } | |
| .ph2 { | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| padding-left: calc(var(--yvdom-poetry-indent) * 2); | |
| } | |
| .ph3 { | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| padding-left: calc(var(--yvdom-poetry-indent) * 3); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * lit : Liturgical Note | |
| * ----------------------------------------------------------------------------- | |
| * Comment or note inserted for liturgical use (e.g., "Glory" in Psalms). | |
| */ | |
| .lit { | |
| font-style: italic; | |
| display: block; | |
| text-align: right; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * restore : Restored Text Comment | |
| * ----------------------------------------------------------------------------- | |
| * Comment about when text was restored. | |
| */ | |
| .restore { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * pb : Page Break | |
| * ----------------------------------------------------------------------------- | |
| * Page break marker. Used for new reader portions and children's bibles | |
| * where content is controlled by the page. | |
| */ | |
| .pb { | |
| page-break-after: always; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * b : Blank Line / Poetry Stanza Break | |
| * ----------------------------------------------------------------------------- | |
| * Explicit blank line for additional whitespace between paragraphs. | |
| * Common at poetry stanza breaks. Should always be empty. | |
| */ | |
| .b { | |
| height: 1em; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * rem : Remark | |
| * ----------------------------------------------------------------------------- | |
| * Editorial remark or comment. Usually not displayed. | |
| */ | |
| .rem { | |
| display: none; | |
| } | |
| /* ============================================================================= | |
| 3. BLOCK ELEMENTS - POETRY | |
| ============================================================================= */ | |
| /** | |
| * Poetry styles from USX. Render as Block elements with specific indentation. | |
| */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * q, q1, q2, q3, q4, q5 : Poetic Lines | |
| * ----------------------------------------------------------------------------- | |
| * Poetry text with level # indent. Hanging indent style. | |
| * q = q1 (level 1, if single level) | |
| * q1 = level 1 (if multiple levels) | |
| * q2 = level 2 | |
| * etc. | |
| */ | |
| .q, | |
| .q1 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .q2 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| margin-left: var(--yvdom-indent-unit); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .q3 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-indent-unit) * -1); | |
| margin-left: calc(var(--yvdom-indent-unit) * 2); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .q4 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-indent-unit) * -1); | |
| margin-left: calc(var(--yvdom-indent-unit) * 3); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .q5 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-indent-unit) * -1); | |
| margin-left: calc(var(--yvdom-indent-unit) * 4); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qc : Centered Poetic Line | |
| * ----------------------------------------------------------------------------- | |
| * Centered poetry text. | |
| */ | |
| .qc { | |
| text-align: center; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qr : Right-Aligned Poetic Line | |
| * ----------------------------------------------------------------------------- | |
| * Right-aligned poetry. Common use: poetic refrain. | |
| */ | |
| .qr { | |
| text-align: right; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qm, qm1, qm2, qm3 : Embedded Poetic Lines | |
| * ----------------------------------------------------------------------------- | |
| * Poetry text embedded within other content. | |
| * qm = qm1 (level 1, if single level) | |
| * qm1 = level 1 (if multiple levels) | |
| */ | |
| .qm, | |
| .qm1 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .qm2 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| margin-left: var(--yvdom-indent-unit); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .qm3 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-indent-unit) * -1); | |
| margin-left: calc(var(--yvdom-indent-unit) * 2); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qd : Hebrew Musical Performance Annotation | |
| * ----------------------------------------------------------------------------- | |
| * Similar to Hebrew descriptive title (d). Performance instructions at end | |
| * of poetic sections. | |
| */ | |
| .qd { | |
| font-style: italic; | |
| } | |
| /* ============================================================================= | |
| 4. BLOCK ELEMENTS - HEADINGS | |
| ============================================================================= */ | |
| /** | |
| * Heading styles. All require the yv-h class marker in YVDOM. | |
| * Format: <div class="s1 yv-h">Heading Text</div> | |
| */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * mt, mt1, mt2, mt3, mt4 : Main Titles | |
| * ----------------------------------------------------------------------------- | |
| * Main title of the book. | |
| * mt = mt1 (if single level) | |
| * mt1 = primary title (if multiple levels) | |
| * mt2 = secondary title (before or after main) | |
| * mt3 = tertiary title (after main) | |
| */ | |
| .mt, | |
| .mt1 { | |
| font-size: var(--yvdom-font-size-heading-lg); | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 1em 0 0; | |
| } | |
| .mt2, | |
| .mt3, | |
| .mt4 { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0.5em 0; | |
| font-weight: bold; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * mte, mte1, mte2 : Main Title at Book End | |
| * ----------------------------------------------------------------------------- | |
| * Main title repeated at the end of the book. | |
| */ | |
| .mte, | |
| .mte1, | |
| .mte2 { | |
| font-size: var(--yvdom-font-size-heading-lg); | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 1em 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ms, ms1, ms2, ms3, ms4 : Major Section Headings | |
| * ----------------------------------------------------------------------------- | |
| * Major section division heading. Broader than regular section (s#). | |
| */ | |
| .ms, | |
| .ms1 { | |
| font-size: var(--yvdom-font-size-heading-lg); | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 1em 0 0; | |
| } | |
| .ms2, | |
| .ms3, | |
| .ms4 { | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 1em 0 0.5em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * mr : Major Section Reference Range | |
| * ----------------------------------------------------------------------------- | |
| * Reference range listed under a major section heading. | |
| */ | |
| .mr { | |
| font-style: italic; | |
| font-weight: bold; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * s, s1, s2, s3, s4 : Section Headings | |
| * ----------------------------------------------------------------------------- | |
| * Typical section division heading. | |
| * s = s1 (if single level) | |
| * s1 = level 1 | |
| * s2 = level 2 (e.g., Proverbs subsections) | |
| * s3 = level 3 (e.g., Genesis "The First Day") | |
| */ | |
| .s, | |
| .s1 { | |
| font-size: var(--yvdom-font-size-heading-md); | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 0 0.5em; | |
| } | |
| .s2, | |
| .s3, | |
| .s4 { | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 1em 0 0.5em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * sr : Section Reference Range | |
| * ----------------------------------------------------------------------------- | |
| * Reference range listed under a section heading. | |
| * Not equivalent to r (parallel references). | |
| */ | |
| .sr { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * r : Parallel Passage References | |
| * ----------------------------------------------------------------------------- | |
| * Reference to parallel passage(s), usually under section heading. | |
| */ | |
| .r { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * d : Descriptive Title (Hebrew Subtitle) | |
| * ----------------------------------------------------------------------------- | |
| * Hebrew text heading providing description. Common in Psalms | |
| * (e.g., "For the director of Music"). | |
| */ | |
| .d { | |
| font-style: italic; | |
| margin-bottom: 1em; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * sp : Speaker Identification | |
| * ----------------------------------------------------------------------------- | |
| * Heading identifying the speaker (e.g., in Job, Song of Songs). | |
| */ | |
| .sp { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * sd, sd1, sd2, sd3, sd4 : Semantic Division | |
| * ----------------------------------------------------------------------------- | |
| * Vertical space to divide text into sections. Different from b (blank line) | |
| * as it indicates hierarchy/division, not just whitespace. | |
| */ | |
| .sd, | |
| .sd1 { | |
| margin: 1.5em 0; | |
| } | |
| .sd2 { | |
| margin: 1.2em 0; | |
| } | |
| .sd3 { | |
| margin: 1em 0; | |
| } | |
| .sd4 { | |
| margin: 0.8em 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qa : Acrostic Heading | |
| * ----------------------------------------------------------------------------- | |
| * Acrostic marker/heading for acrostic poetry (e.g., Psalm 119). | |
| */ | |
| .qa { | |
| font-size: var(--yvdom-font-size-base); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * cl : Chapter Label | |
| * ----------------------------------------------------------------------------- | |
| * Chapter label for translations that display chapter as heading text | |
| * (not drop cap numerals). Can be general (before ch 1) or specific (per chapter). | |
| */ | |
| .cl { | |
| display: none; /* Usually controlled by rendering context */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * cd : Chapter Description | |
| * ----------------------------------------------------------------------------- | |
| * Brief description of chapter content (Publishing option D, e.g., Russian Bibles). | |
| */ | |
| .cd { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * cp : Published Chapter Number | |
| * ----------------------------------------------------------------------------- | |
| * Published chapter number when different from sequential number. | |
| */ | |
| .cp { | |
| font-weight: bold; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ts : Translator's Section | |
| * ----------------------------------------------------------------------------- | |
| * Identifies chunks of text suitable for translating at one time. | |
| * Usually not displayed. | |
| */ | |
| .ts { | |
| display: none; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * my, my1, my2, my3, my4 : Legacy Heading Styles | |
| * ----------------------------------------------------------------------------- | |
| * No documentation found. Very old USX variants. Treat as generic headings. | |
| */ | |
| .my, | |
| .my1, | |
| .my2, | |
| .my3, | |
| .my4 { | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /* ============================================================================= | |
| 5. BLOCK ELEMENTS - LISTS | |
| ============================================================================= */ | |
| /** | |
| * List styles from USX. Render as Block elements. | |
| */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * lh : List Header | |
| * ----------------------------------------------------------------------------- | |
| * Introductory remark for a list. Not a list item itself. | |
| */ | |
| .lh { | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * li, li1, li2, li3, li4 : List Entries | |
| * ----------------------------------------------------------------------------- | |
| * List entry with level # indent. Out-dented paragraph style. | |
| * li = li1 (if single level) | |
| */ | |
| .li, | |
| .li1 { | |
| margin-left: var(--yvdom-poetry-indent); | |
| padding-left: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .li2 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 1.5); | |
| padding-left: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .li3 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 2); | |
| padding-left: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .li4 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 2.5); | |
| padding-left: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * lf : List Footer | |
| * ----------------------------------------------------------------------------- | |
| * Concluding remark for a list. Not a list item itself. | |
| */ | |
| .lf { | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * lim, lim1, lim2, lim3, lim4 : Embedded List Entries | |
| * ----------------------------------------------------------------------------- | |
| * Embedded list entry with level # indent. | |
| * lim = lim1 (if single level) | |
| */ | |
| .lim, | |
| .lim1 { | |
| margin-left: var(--yvdom-poetry-indent); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .lim2 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 1.5); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .lim3 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 2); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .lim4 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 2.5); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /* ============================================================================= | |
| 6. BLOCK ELEMENTS - INTRODUCTION | |
| ============================================================================= */ | |
| /** | |
| * Introduction styles from USX. Used in book introduction sections. | |
| */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * imt, imt1, imt2, imt3, imt4 : Introduction Major Title | |
| * ----------------------------------------------------------------------------- | |
| * Major title in book introduction. | |
| */ | |
| .imt, | |
| .imt1 { | |
| font-size: var(--yvdom-font-size-heading-lg); | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 1em 0 0; | |
| } | |
| .imt2, | |
| .imt3, | |
| .imt4 { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0.5em 0; | |
| font-weight: bold; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * imte, imte1, imte2 : Introduction Major Title at End | |
| * ----------------------------------------------------------------------------- | |
| * Major title at the end of the introduction. | |
| */ | |
| .imte, | |
| .imte1, | |
| .imte2 { | |
| font-size: var(--yvdom-font-size-heading-lg); | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * is, is1, is2 : Introduction Section Heading | |
| * ----------------------------------------------------------------------------- | |
| * Section heading within introduction. | |
| */ | |
| .is, | |
| .is1 { | |
| font-size: var(--yvdom-font-size-heading-md); | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 0 0 0.5em; | |
| } | |
| .is2 { | |
| font-weight: bold; | |
| line-height: var(--yvdom-line-height); | |
| margin: 0.5em 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ip : Introduction Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Standard introduction prose paragraph. | |
| */ | |
| .ip { | |
| margin-bottom: 0; | |
| text-indent: var(--yvdom-indent-unit); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ipi : Introduction Indented Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Indented introduction paragraph with first line indent. | |
| */ | |
| .ipi { | |
| text-indent: 1.5em; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * im : Introduction Margin Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Introduction paragraph flush left (no indent). | |
| */ | |
| .im { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * imi : Introduction Indented Margin Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Indented introduction paragraph with no first line indent. | |
| */ | |
| .imi { | |
| margin-left: 1.5em; | |
| text-indent: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ipq, imq : Introduction Quote Paragraphs | |
| * ----------------------------------------------------------------------------- | |
| * ipq : Quote from scripture text (with first line indent) | |
| * imq : Quote from scripture text (flush left) | |
| */ | |
| .ipq, | |
| .imq { | |
| font-style: italic; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ipr : Introduction Right-Aligned Paragraph | |
| * ----------------------------------------------------------------------------- | |
| * Right-aligned introduction paragraph. Often for quote references. | |
| */ | |
| .ipr { | |
| text-align: right; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * iq, iq1, iq2, iq3 : Introduction Poetry | |
| * ----------------------------------------------------------------------------- | |
| * Poetry within introduction. | |
| */ | |
| .iq, | |
| .iq1 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .iq2 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-poetry-indent) * -1); | |
| margin-left: var(--yvdom-indent-unit); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .iq3 { | |
| padding-left: var(--yvdom-poetry-indent); | |
| text-indent: calc(var(--yvdom-indent-unit) * -1); | |
| margin-left: calc(var(--yvdom-indent-unit) * 2); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ib : Introduction Blank Line | |
| * ----------------------------------------------------------------------------- | |
| * Explicit whitespace between introduction paragraphs. | |
| */ | |
| .ib { | |
| height: 1em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ie : Introduction End | |
| * ----------------------------------------------------------------------------- | |
| * Marks end of introduction material. Usually not displayed. | |
| */ | |
| .ie { | |
| display: none; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ili, ili1, ili2, ili3 : Introduction List Items | |
| * ----------------------------------------------------------------------------- | |
| * List entries within introduction. | |
| */ | |
| .ili, | |
| .ili1 { | |
| margin-left: var(--yvdom-poetry-indent); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .ili2 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 1.5); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .ili3 { | |
| margin-left: calc(var(--yvdom-poetry-indent) * 2); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * iot : Introduction Outline Title | |
| * ----------------------------------------------------------------------------- | |
| * Title for introduction outline section. | |
| */ | |
| .iot { | |
| font-size: var(--yvdom-font-size-heading-lg); | |
| font-weight: 700; | |
| line-height: var(--yvdom-line-height); | |
| margin: 0.5em 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * io, io1, io2, io3, io4 : Introduction Outline Entries | |
| * ----------------------------------------------------------------------------- | |
| * Outline entries, typically ending with reference ranges. | |
| */ | |
| .io, | |
| .io1 { | |
| list-style-type: disc; | |
| margin-left: var(--yvdom-indent-unit); | |
| display: list-item; | |
| } | |
| .io2, | |
| .io3, | |
| .io4 { | |
| list-style-type: disc; | |
| margin-left: calc(var(--yvdom-indent-unit) * 2); | |
| display: list-item; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * iex : Introduction Explanatory/Bridge Text | |
| * ----------------------------------------------------------------------------- | |
| * Explanation of missing book (Short OT) or attribution at end of epistles. | |
| * Also valid in chapter content. | |
| */ | |
| .iex { | |
| line-height: var(--yvdom-line-height); | |
| margin: 0; | |
| } | |
| /* ============================================================================= | |
| 7. TABLE ELEMENTS | |
| ============================================================================= */ | |
| /** | |
| * Table structure: table > row > cell | |
| * Cell styles indicate column position and alignment. | |
| */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * table : Table Container | |
| * ----------------------------------------------------------------------------- | |
| */ | |
| table, | |
| .table { | |
| font-size: inherit; | |
| color: inherit; | |
| border-bottom: 1em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * th, th1, th2, etc. : Table Header Cells | |
| * ----------------------------------------------------------------------------- | |
| * Header cells (left-aligned by default). | |
| */ | |
| .th, | |
| .th1, | |
| .th2, | |
| .th3, | |
| .th4, | |
| .th5 { | |
| background: #444; | |
| color: #fff; | |
| font-weight: bold; | |
| padding: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * thr, thr1, thr2, etc. : Table Header Cells (Right-Aligned) | |
| * ----------------------------------------------------------------------------- | |
| */ | |
| .thr, | |
| .thr1, | |
| .thr2, | |
| .thr3, | |
| .thr4, | |
| .thr5 { | |
| text-align: right; | |
| font-weight: bold; | |
| padding: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * tc, tc1, tc2, etc. : Table Content Cells | |
| * ----------------------------------------------------------------------------- | |
| * Regular content cells (left-aligned by default). | |
| */ | |
| .tc, | |
| .tc1, | |
| .tc2, | |
| .tc3, | |
| .tc4, | |
| .tc5 { | |
| padding: 0; | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * tcr, tcr1, tcr2, etc. : Table Content Cells (Right-Aligned) | |
| * ----------------------------------------------------------------------------- | |
| */ | |
| .tcr, | |
| .tcr1, | |
| .tcr2, | |
| .tcr3, | |
| .tcr4, | |
| .tcr5 { | |
| padding: 0; | |
| text-align: right; | |
| } | |
| /* Cell spacing */ | |
| td + td { | |
| padding-left: 1em !important; | |
| } | |
| /* ============================================================================= | |
| 8. SPAN ELEMENTS - CHARACTER STYLES | |
| ============================================================================= */ | |
| /** | |
| * Character styles from USX <char> elements. Render as Span in YVDOM. | |
| */ | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * add : Translator's Addition | |
| * ----------------------------------------------------------------------------- | |
| * Words added by translator for clarity, not literally in original. | |
| */ | |
| .add { | |
| padding: 0; | |
| margin: 0; | |
| line-height: var(--yvdom-line-height); | |
| text-indent: 0; | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * bk : Book Title | |
| * ----------------------------------------------------------------------------- | |
| * Quoted book title referenced in text. | |
| */ | |
| .bk { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * dc : Deuterocanonical Content | |
| * ----------------------------------------------------------------------------- | |
| * Deuterocanonical/LXX additions or insertions in Protocanonical text. | |
| */ | |
| .dc { | |
| padding: 0; | |
| margin: 0; | |
| line-height: var(--yvdom-line-height); | |
| text-indent: 0; | |
| font-weight: normal; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * k : Keyword / Keyterm | |
| * ----------------------------------------------------------------------------- | |
| */ | |
| .k { | |
| padding: 0; | |
| margin: 0; | |
| line-height: var(--yvdom-line-height); | |
| text-indent: 0; | |
| font-weight: normal; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * nd : Name of Deity | |
| * ----------------------------------------------------------------------------- | |
| * Divine name (e.g., LORD, God). Typically small caps. | |
| */ | |
| .nd { | |
| font-variant: small-caps; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ord : Ordinal Number Ending | |
| * ----------------------------------------------------------------------------- | |
| * Ordinal suffix (e.g., "st" in "1st"). Superscript. | |
| */ | |
| .ord { | |
| font-size: 0.75em; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| top: -0.5em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * pn : Proper Name | |
| * ----------------------------------------------------------------------------- | |
| * Proper name of a person. | |
| */ | |
| .pn { | |
| text-decoration: underline; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * png : Geographic Proper Name | |
| * ----------------------------------------------------------------------------- | |
| * Proper name of a geographic place. Used especially in CJK texts. | |
| */ | |
| .png { | |
| text-decoration: underline; | |
| text-decoration-style: double; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * addpn : Chinese Proper Name (DEPRECATED) | |
| * ----------------------------------------------------------------------------- | |
| * Chinese words with dot underline & underline. | |
| * DEPRECATED: Use nested char@style pn instead. | |
| */ | |
| .addpn { | |
| text-decoration: underline; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qt : Quoted Text | |
| * ----------------------------------------------------------------------------- | |
| * OT quotations in NT, or other quoted text. | |
| */ | |
| .qt { | |
| padding: 0; | |
| margin: 0; | |
| line-height: var(--yvdom-line-height); | |
| text-indent: 0; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * sig : Signature | |
| * ----------------------------------------------------------------------------- | |
| * Signature of the author of an epistle. | |
| */ | |
| .sig { | |
| padding: 0; | |
| margin: 0; | |
| line-height: var(--yvdom-line-height); | |
| text-indent: 0; | |
| font-weight: normal; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * sls : Secondary Language / Alternate Source | |
| * ----------------------------------------------------------------------------- | |
| * Text based on secondary language or alternate text source | |
| * (e.g., Aramaic sections in Ezra/Daniel). | |
| */ | |
| .sls { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * tl : Transliterated Words | |
| * ----------------------------------------------------------------------------- | |
| * Transliterated or foreign words. | |
| */ | |
| .tl { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * wj : Words of Jesus | |
| * ----------------------------------------------------------------------------- | |
| * Words spoken by Jesus. Often displayed in red. | |
| */ | |
| .wj { | |
| color: var(--yvdom-wj-color); | |
| } | |
| /* Dark mode Words of Jesus */ | |
| .dark .wj { | |
| color: var(--yvdom-wj-color-dark); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * rq : Inline Quotation Reference | |
| * ----------------------------------------------------------------------------- | |
| * Reference indicating source of preceding quotation. Formatted inline, | |
| * not extracted like cross-references. | |
| */ | |
| .rq { | |
| font-style: italic; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * va : Alternate Verse Number | |
| * ----------------------------------------------------------------------------- | |
| * Second/alternate verse number (e.g., dual numeration in Psalms). | |
| */ | |
| .va { | |
| font-size: var(--yvdom-font-size-small); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * vp : Published Verse Marker | |
| * ----------------------------------------------------------------------------- | |
| * Verse marking for published text (when different from sequential number). | |
| */ | |
| .vp { | |
| display: inline; | |
| font-size: var(--yvdom-font-size-verse-label); | |
| color: var(--yvdom-text-secondary); | |
| line-height: 1em; | |
| vertical-align: baseline; | |
| position: relative; | |
| top: -0.6em; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ca : Alternate Chapter Number | |
| * ----------------------------------------------------------------------------- | |
| * Second/alternate chapter number. | |
| */ | |
| .ca { | |
| font-size: var(--yvdom-font-size-small); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qac : Acrostic Letter | |
| * ----------------------------------------------------------------------------- | |
| * Acrostic letter markup (first character of acrostic poetry line). | |
| */ | |
| .qac { | |
| font-weight: bold; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * qs : Selah | |
| * ----------------------------------------------------------------------------- | |
| * "Selah" expression in Psalms and Habakkuk. | |
| * Typically right-aligned on same line as previous text. | |
| */ | |
| .qs { | |
| font-style: italic; | |
| display: block; | |
| text-align: right; | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * efm : Extended Footnote Marker Reference | |
| * ----------------------------------------------------------------------------- | |
| * Reference to caller of previous footnote (study Bible). | |
| */ | |
| .efm { | |
| vertical-align: super; | |
| font-size: var(--yvdom-font-size-small); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * fm : Footnote Marker Reference | |
| * ----------------------------------------------------------------------------- | |
| * Reference to caller of previous footnote. | |
| */ | |
| .fm { | |
| vertical-align: super; | |
| font-size: var(--yvdom-font-size-small); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * ndx : Subject Index Entry | |
| * ----------------------------------------------------------------------------- | |
| * Text item for subject index. | |
| */ | |
| .ndx { | |
| /* Usually not visually distinct */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * pro : Pronunciation (DEPRECATED) | |
| * ----------------------------------------------------------------------------- | |
| * Pronunciation information for CJK texts. | |
| * DEPRECATED: Use rb (ruby) instead. | |
| */ | |
| .pro { | |
| font-size: var(--yvdom-font-size-small); | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * wg : Greek Wordlist Entry | |
| * ----------------------------------------------------------------------------- | |
| */ | |
| .wg { | |
| /* Wordlist entries typically not visually distinct */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * wh : Hebrew Wordlist Entry | |
| * ----------------------------------------------------------------------------- | |
| */ | |
| .wh { | |
| /* Wordlist entries typically not visually distinct */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * wa : Aramaic Wordlist Entry | |
| * ----------------------------------------------------------------------------- | |
| */ | |
| .wa { | |
| /* Wordlist entries typically not visually distinct */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * xt : Target Reference (in body text) | |
| * ----------------------------------------------------------------------------- | |
| * Cross-reference target references in body text context. | |
| */ | |
| .xt { | |
| /* May be styled for linking */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * jmp : Jump/Link Span | |
| * ----------------------------------------------------------------------------- | |
| * For associating linking attributes to text when no other char element applies. | |
| */ | |
| .jmp { | |
| /* Styling depends on link context */ | |
| } | |
| /** | |
| * ----------------------------------------------------------------------------- | |
| * fig : Figure (DEPRECATED in char context) | |
| * ----------------------------------------------------------------------------- | |
| * Should not appear in char context. Bug in figure detection/removal. | |
| */ | |
| .fig { | |
| display: none; | |
| } | |
| /* ============================================================================= | |
| 9. SPAN ELEMENTS - CHARACTER FORMATTING | |
| ============================================================================= */ | |
| /** | |
| * Pure formatting styles (no semantic meaning). | |
| */ | |
| /** | |
| * no : Normal Text | |
| * Used when containing paragraph is alternate style and selection should be normal. | |
| */ | |
| .no { | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /** | |
| * it : Italic Text | |
| */ | |
| .it { | |
| font-style: italic; | |
| } | |
| /** | |
| * bd : Bold Text | |
| */ | |
| .bd { | |
| font-weight: bold; | |
| } | |
| /** | |
| * bdit : Bold Italic Text | |
| */ | |
| .bdit { | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| /** | |
| * em : Emphasized Text | |
| */ | |
| .em { | |
| font-weight: bold; | |
| } | |
| /** | |
| * sc : Small Caps | |
| */ | |
| .sc { | |
| font-variant: small-caps; | |
| } | |
| /** | |
| * sup : Superscript | |
| * Typically for critical edition footnotes. | |
| */ | |
| .sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| top: -0.25em; | |
| } | |
| /** | |
| * sub : Subscript (not in USX but common CSS) | |
| */ | |
| .sub { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| bottom: -0.1em; | |
| } | |
| /* ============================================================================= | |
| 10. SPAN ELEMENTS - FOOTNOTE CHARACTER STYLES | |
| ============================================================================= */ | |
| /** | |
| * Styles for content within footnotes (yv-n.f, yv-n.fe, yv-n.ef). | |
| */ | |
| /** | |
| * fr : Footnote Origin Reference | |
| * Chapter and verse that the footnote refers to. | |
| */ | |
| .fr { | |
| padding-right: 5px; | |
| } | |
| /** | |
| * ft : Footnote Text | |
| * Primary explanatory text of the footnote. | |
| */ | |
| .ft { | |
| /* Default text styling */ | |
| } | |
| /** | |
| * fk : Footnote Keyword | |
| * Specific keyword/term from text being annotated. | |
| */ | |
| .fk { | |
| font-style: italic; | |
| font-weight: bold; | |
| } | |
| /** | |
| * fq : Footnote Translation Quotation | |
| * Quote from current scripture translation. | |
| */ | |
| .fq { | |
| font-style: italic; | |
| } | |
| /** | |
| * fqa : Footnote Alternate Translation | |
| * Alternate translation (distinguished from current text quote). | |
| */ | |
| .fqa { | |
| font-style: italic; | |
| } | |
| /** | |
| * fl : Footnote Label Text | |
| * Labeling text (e.g., "Or", "Heb.", "LXX"). | |
| */ | |
| .fl { | |
| font-weight: bold; | |
| } | |
| /** | |
| * fw : Footnote Witness List | |
| * List of sigla representing witnesses (critical editions). | |
| */ | |
| .fw { | |
| font-family: monospace; | |
| } | |
| /** | |
| * fp : Footnote Additional Paragraph | |
| * Start of new paragraph within footnote. | |
| */ | |
| .fp { | |
| display: block; | |
| margin-top: 0.5em; | |
| } | |
| /** | |
| * fv : Footnote Verse Number | |
| * Verse number within footnote text. | |
| */ | |
| .fv { | |
| vertical-align: super; | |
| font-size: var(--yvdom-font-size-small); | |
| } | |
| /** | |
| * fdc : Footnote Deuterocanonical Content (DEPRECATED) | |
| * DC-only content in footnote. | |
| * DEPRECATED: Use dc instead. | |
| */ | |
| .fdc { | |
| /* Inherits from parent */ | |
| } | |
| /** | |
| * cat : Note Category (Study Bible) | |
| */ | |
| .cat { | |
| font-style: italic; | |
| } | |
| /* ============================================================================= | |
| 11. SPAN ELEMENTS - CROSS REFERENCE CHARACTER STYLES | |
| ============================================================================= */ | |
| /** | |
| * Styles for content within cross-references (yv-n.x, yv-n.ex). | |
| */ | |
| /** | |
| * xo : Cross Reference Origin Reference | |
| * Chapter and verse for which target references are provided. | |
| */ | |
| .xo { | |
| padding-right: 5px; | |
| } | |
| /** | |
| * xop : Published Cross Reference Origin | |
| * Published origin text when different from standard format. | |
| */ | |
| .xop { | |
| /* Same as xo typically */ | |
| } | |
| /** | |
| * xt : Cross Reference Target Reference(s) | |
| * List of target scripture passages for comparison. | |
| */ | |
| /* .xt defined in character styles section */ | |
| /** | |
| * xta : Cross Reference Added Text | |
| * Text to ignore when identifying/linking target references. | |
| */ | |
| .xta { | |
| font-style: italic; | |
| } | |
| /** | |
| * xk : Cross Reference Keyword | |
| * Keyword from translation that targets also reference. | |
| */ | |
| .xk { | |
| font-weight: bold; | |
| } | |
| /** | |
| * xq : Cross Reference Quotation | |
| * Quote from scripture text to clarify context. | |
| */ | |
| .xq { | |
| font-style: italic; | |
| } | |
| /** | |
| * xot : Cross Reference OT Only | |
| * References only for OT publications. | |
| */ | |
| .xot { | |
| /* Conditional display */ | |
| } | |
| /** | |
| * xnt : Cross Reference NT Only | |
| * References only for NT publications. | |
| */ | |
| .xnt { | |
| /* Conditional display */ | |
| } | |
| /** | |
| * xdc : Cross Reference DC Only (DEPRECATED) | |
| * References only for DC publications. | |
| * DEPRECATED: Use dc instead. | |
| */ | |
| .xdc { | |
| /* Conditional display */ | |
| } | |
| /* ============================================================================= | |
| 12. SPAN ELEMENTS - LIST CHARACTER STYLES | |
| ============================================================================= */ | |
| /** | |
| * Structured list entry styles within li# paragraphs. | |
| */ | |
| /** | |
| * litl : List Entry Total | |
| * Total component in "accounting" lists. | |
| */ | |
| .litl { | |
| float: right; | |
| } | |
| /** | |
| * lik : List Entry Key | |
| * Key content of key-value pair in structured lists. | |
| */ | |
| .lik { | |
| font-weight: bold; | |
| } | |
| /** | |
| * liv, liv1, liv2, liv3, liv4, liv5 : List Entry Value | |
| * Value content(s) in structured lists. | |
| */ | |
| .liv, | |
| .liv1, | |
| .liv2, | |
| .liv3, | |
| .liv4, | |
| .liv5 { | |
| /* Default styling */ | |
| } | |
| /* ============================================================================= | |
| 13. SPAN ELEMENTS - INTRODUCTION CHARACTER STYLES | |
| ============================================================================= */ | |
| /** | |
| * ior : Introduction Outline Reference Range | |
| * Reference range at end of introduction outline entry. | |
| */ | |
| .ior { | |
| font-style: italic; | |
| } | |
| /** | |
| * iqt : Introduction Quoted Text | |
| * Scripture quotation in introduction. | |
| */ | |
| .iqt { | |
| margin-left: var(--yvdom-indent-unit); | |
| font-style: italic; | |
| } | |
| /* ============================================================================= | |
| 14. SPAN ELEMENTS - RUBY TEXT | |
| ============================================================================= */ | |
| /** | |
| * Ruby characters for CJK texts (pronunciation glosses). | |
| * See: https://www.w3.org/TR/ruby/ | |
| */ | |
| /** | |
| * ruby : Ruby Container | |
| * Contains rb (base) and rt (annotation) elements. | |
| */ | |
| .ruby { | |
| display: ruby; | |
| } | |
| /** | |
| * rb : Ruby Base | |
| * Base text being annotated (Han characters). | |
| */ | |
| .rb { | |
| display: ruby-base; | |
| } | |
| /** | |
| * rt : Ruby Text | |
| * Phonetic annotation (e.g., hiragana). | |
| */ | |
| .rt { | |
| display: ruby-text; | |
| font-size: 0.5em; | |
| } | |
| /* Fallback for browsers without ruby support */ | |
| @supports not (display: ruby) { | |
| .ruby { | |
| display: inline; | |
| } | |
| .rb { | |
| display: inline; | |
| } | |
| .rt { | |
| display: inline; | |
| font-size: 0.6em; | |
| vertical-align: super; | |
| } | |
| .rt::before { | |
| content: "("; | |
| } | |
| .rt::after { | |
| content: ")"; | |
| } | |
| } | |
| /* ============================================================================= | |
| 15. SPAN ELEMENTS - WORDLIST | |
| ============================================================================= */ | |
| /** | |
| * w : Wordlist/Glossary Entry | |
| * Word(s) appearing in published glossary. | |
| * May have attributes: lemma, strong, srcloc | |
| */ | |
| .w { | |
| /* Typically not visually distinct unless interactive */ | |
| } | |
| /* Styling for wordlist with Strong's numbers (via attribute selectors) */ | |
| .w[data-strong] { | |
| /* May be styled for interactive lookup */ | |
| } | |
| /* ============================================================================= | |
| 16. SPAN ELEMENTS - REFERENCES | |
| ============================================================================= */ | |
| /** | |
| * ref : Scripture Reference | |
| * Contains parsed scripture reference with usfm attribute. | |
| * Example: <span class="ref" data-usfm="GEN.1.1">Gen 1:1</span> | |
| */ | |
| .ref { | |
| /* May be styled for linking */ | |
| } | |
| /* ============================================================================= | |
| 17. NOTE DISPLAY STATES | |
| ============================================================================= */ | |
| /** | |
| * Note visibility and interaction states. | |
| */ | |
| /* Note label/caller */ | |
| .yv-n > .label, | |
| .note > .label { | |
| vertical-align: baseline; | |
| cursor: pointer; | |
| display: inline-block; | |
| padding: 0 0.15em; | |
| } | |
| /* Note body (expanded state) */ | |
| .yv-n > .body, | |
| .note > .body { | |
| color: var(--yvdom-text-primary); | |
| padding: 10px; | |
| border-radius: 2px; | |
| margin-bottom: 1em; | |
| text-indent: 0; | |
| background: transparent; | |
| border: 1px solid #ccc; | |
| } | |
| /* Note close button */ | |
| .note_close { | |
| display: block; | |
| text-align: center; | |
| margin-top: 10px; | |
| padding: 5px 0; | |
| text-decoration: none; | |
| font-weight: normal; | |
| font-size: 14px; | |
| border-radius: 5px; | |
| color: var(--yvdom-text-secondary); | |
| background: transparent; | |
| } | |
| /* Notes within headings */ | |
| .s1 .yv-n, | |
| .s .yv-n, | |
| .ms1 .yv-n, | |
| .is .yv-n, | |
| .is1 .yv-n, | |
| .is2 .yv-n, | |
| .mr .yv-n { | |
| font-size: 0.9em; | |
| } | |
| /* ============================================================================= | |
| 18. RTL (RIGHT-TO-LEFT) SUPPORT | |
| ============================================================================= */ | |
| /** | |
| * Overrides for right-to-left text direction. | |
| * Applied via .rtl class on container element. | |
| */ | |
| .rtl { | |
| direction: rtl; | |
| } | |
| /* Poetry indentation for RTL */ | |
| .rtl .iq, | |
| .rtl .iq1, | |
| .rtl .q, | |
| .rtl .q1, | |
| .rtl .qm1, | |
| .rtl .li1, | |
| .rtl .iq2, | |
| .rtl .q2, | |
| .rtl .qm2, | |
| .rtl .li2 { | |
| padding-left: 0 !important; | |
| padding-right: var(--yvdom-poetry-indent) !important; | |
| text-indent: calc(var(--yvdom-indent-unit) * -1); | |
| } | |
| .rtl .iq3, | |
| .rtl .q3, | |
| .rtl .qm3, | |
| .rtl .q4 { | |
| padding-left: 0 !important; | |
| padding-right: var(--yvdom-poetry-indent) !important; | |
| text-indent: calc(var(--yvdom-indent-unit) * -1); | |
| } | |
| /* Selah alignment for RTL */ | |
| .rtl .qs, | |
| .rtl .lit { | |
| text-align: left; | |
| } | |
| /* ============================================================================= | |
| 19. INTERACTIVE STATES | |
| ============================================================================= */ | |
| /** | |
| * Highlighting and selection states for verses. | |
| */ | |
| /* Verse highlighting */ | |
| .verse.highlighted { | |
| background-color: var(--yvdom-highlight-bg); | |
| background-position-y: -2px; | |
| } | |
| /* Verse selection state */ | |
| .verse.selecting { | |
| /* Active selection styling */ | |
| } | |
| .verse.selecting.highlighted { | |
| background-image: none !important; | |
| background-color: transparent !important; | |
| } | |
| .verse.selecting.highlighted > .label { | |
| border-radius: 2px; | |
| padding: 0; | |
| margin-right: 0.2em; | |
| } | |
| /* Selected text */ | |
| .selected { | |
| border-bottom: var(--yvdom-selection-border); | |
| } | |
| .dark .selected { | |
| border-bottom: 3px dotted white; | |
| } | |
| /* ============================================================================= | |
| 20. DARK MODE SUPPORT | |
| ============================================================================= */ | |
| /** | |
| * Dark theme overrides. | |
| * Applied via .dark class on container element. | |
| */ | |
| .dark { | |
| --yvdom-text-primary: #bbbcbc; | |
| --yvdom-text-secondary: #999999; | |
| --yvdom-wj-color: var(--yvdom-wj-color-dark); | |
| } | |
| .dark .yv-n > .body, | |
| .dark .note > .body { | |
| color: #999; | |
| background: transparent; | |
| border: 1px solid #353535; | |
| } | |
| .dark .note_close { | |
| color: #eee; | |
| } | |
| .dark .yv-vlbl, | |
| .dark .verse > .label { | |
| color: #ffffff; | |
| } | |
| /* ============================================================================= | |
| 21. PARAGRAPH ADJACENCY RULES | |
| ============================================================================= */ | |
| /** | |
| * Margins for specific paragraph combinations. | |
| * Controls spacing when certain elements follow others. | |
| */ | |
| /* Section heading after body text */ | |
| .p + .s, | |
| .p + .s1, | |
| .p + .s2, | |
| .p + .ms, | |
| .p + .ms1, | |
| .p + .ms2, | |
| .m + .s, | |
| .m + .s1, | |
| .m + .s2 { | |
| margin-top: 1em; | |
| } | |
| /* Poetry after paragraph */ | |
| .p + .q, | |
| .p + .q1, | |
| .p + .q2, | |
| .p + .q3, | |
| .p + .q4 { | |
| margin-top: 0.5em; | |
| } | |
| /* Paragraph after poetry */ | |
| .q + .p, | |
| .q1 + .p, | |
| .q2 + .p, | |
| .q3 + .p { | |
| margin-top: 0.5em; | |
| } | |
| /* No indent after chapter label */ | |
| .yv-clbl + .p, | |
| .label + .p { | |
| text-indent: 0; | |
| } | |
| /* First child of chapter block */ | |
| .chapter div:first-child { | |
| margin-top: 0; | |
| } | |
| /* Consecutive descriptive titles */ | |
| .d + .d { | |
| margin-top: -1.25em; | |
| } | |
| /* Lists and poetry transitions */ | |
| .p + .li, | |
| .p + .li1, | |
| .li + .li2, | |
| .li1 + .li2, | |
| .li2 + .li, | |
| .li2 + .li1 { | |
| margin-top: 1em; | |
| } | |
| /* Table adjacency */ | |
| .table + .p, | |
| .p + .table { | |
| margin-top: 1em; | |
| } | |
| /* Embedded text transitions */ | |
| .p + .pm, | |
| .p + .pmo, | |
| .p + .pmc, | |
| .pm + .p, | |
| .pmo + .p, | |
| .pmc + .p { | |
| margin-top: 0.5em; | |
| } | |
| /* Poetry continuation after indented paragraph */ | |
| .pi + .p, | |
| .pi1 + .p { | |
| margin-top: 0.5em; | |
| text-indent: 0; | |
| } | |
| /* Margin continuation after poetry */ | |
| .q + .m, | |
| .q1 + .m, | |
| .q2 + .m, | |
| .q3 + .m { | |
| margin-top: 0.5em; | |
| text-indent: 0; | |
| } | |
| /* Major section heading sequences */ | |
| .ms1 + .s1, | |
| .ms1 + .s, | |
| .ms1 + .ms1, | |
| .ms2 + .s1, | |
| .ms2 + .s { | |
| margin-top: 0.5em; | |
| } | |
| /* ============================================================================= | |
| 22. DEPRECATED / HIDDEN ELEMENTS | |
| ============================================================================= */ | |
| /** | |
| * Elements typically hidden from display. | |
| */ | |
| .id, /* Book identification */ | |
| .ide, /* Encoding identification */ | |
| .sts, /* Status */ | |
| .toc1, /* Long table of contents */ | |
| .toc2, /* Short table of contents */ | |
| .toc3 /* Book abbreviation */ | |
| { | |
| display: none; | |
| } | |
| /* ============================================================================= | |
| 23. FRONT/BACK MATTER PARAGRAPHS | |
| ============================================================================= */ | |
| /** | |
| * Styles for front and back matter content. | |
| */ | |
| /** | |
| * p1, p2 : Front/Back Matter Paragraphs | |
| * Multi-level front/back matter text paragraphs. | |
| */ | |
| .p1 { | |
| line-height: var(--yvdom-line-height); | |
| } | |
| .p2 { | |
| margin-left: var(--yvdom-indent-unit); | |
| line-height: var(--yvdom-line-height); | |
| } | |
| /** | |
| * k1, k2 : Concordance Keyword | |
| * Main entry text or keyword in concordance. | |
| */ | |
| .k1 { | |
| font-weight: bold; | |
| } | |
| .k2 { | |
| font-weight: bold; | |
| margin-left: var(--yvdom-indent-unit); | |
| } | |
| /* ============================================================================= | |
| END OF YVDOM COMPLETE STYLESHEET | |
| ============================================================================= */ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment