/* Newsreader, the reading face, served from this origin so it works offline. The variable roman carries 400 to 600 and an optical size axis; the italic carries 400. Latin only: the corpus needs nothing wider, and Georgia takes the rest. */ @font-face { font-family: Newsreader; font-style: normal; font-weight: 400 600; font-display: swap; src: url(./fonts/newsreader-latin.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: Newsreader; font-style: italic; font-weight: 400; font-display: swap; src: url(./fonts/newsreader-italic-latin.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; } :root { color-scheme: light dark; --bg: #fff; --fg: #121212; --muted: #8a8a8a; --rule: #d9d9d9; --hover: #f3f3f3; /* The one highlight colour: notes, the note in hand, searched words. Strength varies, never the hue. */ --highlight: 245 197 24; --mark: rgb(var(--highlight) / .42); --mark-strong: rgb(var(--highlight) / .52); /* The words of Jesus, where a version marks them. Bright enough to read as red rather than brown, and still 4.5:1 on the page, under a note highlight, and under an open note's. */ --wj: #c1271d; --card: #fff; --card-rule: #e4e2dc; --card-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .06); --shadow: 0 2px 12px rgb(0 0 0 / .14); /* Four sizes, one to a role. Reading is the Bible's own words, wherever they are quoted. Regular is the interface around them: search results, note bodies, menus, buttons, inputs, dialogs. Small is what labels the interface: references, counts, chips, field labels, verse numbers, meta lines. Large is a heading. Scripture is the loudest text on the page; inside each role, text varies by weight and colour, never by size. */ --fs-read: 19px; --fs-sm: 13px; --fs-md: 16px; --fs-lg: 22px; --lh-read: 1.9; --lh-ui: 1.45; /* The reading measure: about 72 characters of 19px Newsreader, growing to about 80 in a wide Bible pane. */ --measure: clamp(600px, 46cqw, 664px); /* The Bible's own words. The interface keeps the system sans below. */ --font-read: Newsreader, Georgia, serif; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* One palette, three states. The bare :root above is the day. The media block below is the night, unless the reader chose Light outright; [data-theme="dark"] is the night chosen outright. Every colour that changes between them is a token set in both night blocks, so a chosen theme cannot half-apply: no rule may carry a colour of its own inside a media block. Settings, Reading sets data-theme on ; no theme means the system decides. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121212; --fg: #ececec; --muted: #8e8e8e; --rule: #3a3a3a; --hover: #222; --mark: rgb(var(--highlight) / .22); --mark-strong: rgb(var(--highlight) / .27); --wj: #ff9284; --card: #1f1f1e; --card-rule: #3a3936; --card-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); --shadow: 0 2px 12px rgb(0 0 0 / .6); } } :root[data-theme="dark"] { --bg: #121212; --fg: #ececec; --muted: #8e8e8e; --rule: #3a3a3a; --hover: #222; --mark: rgb(var(--highlight) / .22); --mark-strong: rgb(var(--highlight) / .27); --wj: #ff9284; --card: #1f1f1e; --card-rule: #3a3936; --card-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); --shadow: 0 2px 12px rgb(0 0 0 / .6); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-size: var(--fs-md); line-height: var(--lh-ui); -webkit-text-size-adjust: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; } /* Top bar: search at the left, over the search pane; the place between its arrows, alone in the middle; the version, settings, then notes, at the right. Near-black with a faint grain; in the dark theme a shade lighter than the page. What opens from it keeps the page's colours. */ .bar { --bar-top: #1a1a1a; --bar-bottom: #0e0e0e; --bar-line: rgb(255 255 255 / .08); --bar-shadow: none; --bar-fg: #f2f2f2; --bar-muted: #9a9a9a; --bar-edge: #141414; --bar-hover: rgb(255 255 255 / .1); --bar-pressed: rgb(255 255 255 / .18); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; color: var(--bar-fg); border-bottom: 1px solid var(--bar-line); box-shadow: var(--bar-shadow); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), linear-gradient(var(--bar-top), var(--bar-bottom)); } /* In the dark theme a shade above the page, with a firm edge under it, so the bar reads as a band. The band is tokens only, set in both night blocks, so choosing Dark by day brings the whole band and not half of it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar { --bar-top: #2c2c2b; --bar-bottom: #242423; --bar-edge: #282827; --bar-line: rgb(255 255 255 / .14); --bar-shadow: 0 1px 0 #000, 0 2px 8px rgb(0 0 0 / .4); } } :root[data-theme="dark"] .bar { --bar-top: #2c2c2b; --bar-bottom: #242423; --bar-edge: #282827; --bar-line: rgb(255 255 255 / .14); --bar-shadow: 0 1px 0 #000, 0 2px 8px rgb(0 0 0 / .4); } .bar-start { justify-self: start; display: flex; } .place { display: flex; align-items: center; gap: 2px; } .bar .select, .bar .icon, .bar .step { height: 34px; border: 0; border-radius: 8px; } .bar .select { padding: 0 10px; gap: 8px; white-space: nowrap; } .bar .icon, .bar .step { position: relative; flex: none; display: grid; place-items: center; width: 34px; padding: 0; color: inherit; } .bar .icon svg { width: 18px; height: 18px; } .bar .step svg { width: 16px; height: 16px; } .bar .select:hover, .bar .icon:hover, .bar a.step:hover { background: var(--bar-hover); } .bar .select[aria-expanded="true"], .bar .icon[aria-expanded="true"], .bar .icon[aria-pressed="true"] { background: var(--bar-pressed); } .bar .panel { color: var(--fg); } /* The version's list opens from the right edge, under it. */ .links .panel { left: auto; right: 8px; translate: none; } .select { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--rule); font-size: var(--fs-md); font-weight: 600; } .select:hover { border-color: var(--fg); } .caret { width: 10px; height: 7px; } svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .panel { position: absolute; top: 100%; left: 50%; translate: -50% 0; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; border-radius: 14px; background: var(--bg); box-shadow: var(--shadow); border: 1px solid var(--rule); } .list { list-style: none; margin: 0; padding: 0; } .list button, .back { width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; } .panel button:hover { background: var(--hover); } .panel [aria-current] { font-weight: 600; } .back { display: flex; align-items: center; gap: 10px; font-weight: 600; } .back svg { width: 8px; height: 12px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; padding: 4px; } .grid button { aspect-ratio: 1; border-radius: 8px; } .offline { margin: 0; padding: 2px 12px 10px; font-size: var(--fs-sm); color: var(--muted); } .offline progress { display: block; width: 100%; margin-bottom: 6px; accent-color: var(--fg); } .list .download { width: auto; margin: 0 12px 8px; padding: 6px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--rule); border-radius: 0; } /* Recent chapters and recent searches: a quiet label over a list of rows, the thing on the left and what it was on the right. The same shape in the book picker, in the empty search pane and in Settings. */ .group { margin: 4px 12px 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); } .list.recent button { display: flex; align-items: baseline; gap: 10px; font-weight: 400; } .list.recent .item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list.recent .count { flex: none; margin: 0; } .link { padding: 6px 2px; font-weight: 600; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .link:hover, .link[aria-current] { border-color: var(--fg); } /* Stories */ .page { max-width: 720px; margin: 0 auto; padding: 24px 20px 96px; font-size: var(--fs-md); line-height: var(--lh-ui); } .page .notice { margin: 32px 0; } .add { display: flex; align-items: center; gap: 12px; } .add input { flex: 1; margin: 0; } .add button:not(.primary) { font-size: var(--fs-sm); color: var(--muted); } .stories, .rows { list-style: none; margin: 16px 0 0; padding: 0; } .stories li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); } .stories .add { flex: 1; } .name { font-size: var(--fs-lg); font-weight: 600; color: inherit; text-decoration: none; } .name:hover { text-decoration: underline; } .count { font-size: var(--fs-sm); color: var(--muted); } .stories .actions { margin: 0 0 0 auto; } .share { margin: 0 0 8px; text-align: center; font-size: var(--fs-md); color: var(--muted); } .share p { margin: 10px 0; } .share .add, .share .actions { justify-content: center; color: var(--fg); } .share a.primary { text-decoration: none; } /* A shared story's offer to add it, above its notes */ .prompt { margin: 0 0 16px; padding: 12px 14px; background: var(--card); border: 1px solid var(--card-rule); border-radius: 10px; box-shadow: var(--card-shadow); } .prompt p { margin: 0 0 8px; } .prompt .actions { display: flex; gap: 8px; align-items: center; } .row.plain { padding-left: 0; } .row { position: relative; padding: 24px 0 24px 28px; border-bottom: 1px solid var(--rule); } .row.dragging { opacity: .4; } .row.drop-before { box-shadow: 0 -2px 0 var(--fg); } .row.drop-after { box-shadow: 0 2px 0 var(--fg); } .handle { position: absolute; left: 0; top: 26px; padding: 2px 6px 2px 0; cursor: grab; color: var(--muted); } /* A story's rows, one family with the margin cards: a meta line (the reference, then the quote cut to one line), then the body. A clip's meta line is the reference alone and the passage is its content; a note on no verse is its body alone. Soft rules between rows start where the text does. The handle and the actions show on hover or focus, and always on touch, level with the first line. */ .page .rows > .row { padding: 12px 36px 12px 28px; border: 0; } .page .rows > .row:not(:last-child, .adding)::after { content: ''; position: absolute; left: 28px; right: 0; bottom: 0; border-bottom: 1px solid var(--card-rule); } .page .row .meta { display: flex; align-items: baseline; min-width: 0; margin: 0 0 2px; font-size: var(--fs-sm); color: var(--muted); white-space: pre; } .page .row .meta .ref { flex: none; } /* Three steps down the row: the reference labels it, the verse it quotes stands a size above the label but stays grey, and the reader's own words are the only black text. The quote is cut to the line, so it is not set to read. */ .page .row .meta .quote { min-width: 0; margin: 0; padding: 0; border: 0; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; } /* A clip is scripture, so it keeps the reading size, and a note's own words sit a step under it. */ .page .row .passage { font-size: var(--fs-read); color: var(--fg); } .page .row .handle { top: 14px; } .page .row:not(:has(.meta)) .handle { top: 16px; } .page .row .note-menu { top: 6px; right: 0; } .page .row:not(:has(.meta)) .note-menu { top: 9px; } @media (hover: hover) and (min-width: 700px) { .page .row .handle { opacity: 0; } .page .row:hover .handle, .page .row:focus-within .handle { opacity: 1; } } .handle svg { display: block; width: 10px; height: 16px; } .handle path { stroke-width: 2.4; } .ref { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; } .ref:hover { color: var(--fg); } .quote { margin: 6px 0 12px; color: var(--muted); } .row .card-body { margin: 0; font-size: var(--fs-md); } /* Note actions menu */ .note-menu { position: absolute; top: 18px; right: -8px; } .note-menu-button { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 8px; color: var(--muted); opacity: 0; } .note-menu-button svg { width: 16px; height: 4px; overflow: visible; } .note-menu-button path { stroke-width: 3.4; } .note-menu-button:hover, .note-menu-button[aria-expanded="true"] { color: var(--fg); background: var(--hover); } .row:hover .note-menu-button, .row:focus-within .note-menu-button, .note-menu-button[aria-expanded="true"] { opacity: 1; } @media (hover: none), (max-width: 699px) { .note-menu-button { opacity: 1; } } .menu { position: fixed; z-index: 5; min-width: 190px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--rule); background: var(--bg); box-shadow: var(--shadow); font-size: var(--fs-md); line-height: var(--lh-ui); } .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 8px; text-align: left; } .menu button:hover, .menu button:focus-visible { background: var(--hover); outline: none; } .menu svg { flex: none; width: 7px; height: 11px; } .menu .sub { justify-content: space-between; } .menu [role="menuitemradio"] { position: relative; padding-left: 32px; } .menu [aria-checked="true"] { font-weight: 600; } .menu [aria-checked="true"]::before { content: "✓"; position: absolute; left: 12px; } .menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--rule); } .menu p { margin: 6px 12px 4px; color: var(--muted); } /* Sync */ .dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--rule); vertical-align: 1px; } .dot.idle { background: #2e9e5b; } .dot.syncing { background: #d9a400; animation: pulse 1s ease-in-out infinite alternate; } .dot.error { background: #c0392b; } .dot.story { background: var(--fg); } @keyframes pulse { to { opacity: .3; } } .status { text-align: center; color: var(--muted); } .error { color: #c0392b; } .fields { margin-top: 24px; } .fields label { display: block; margin-bottom: 14px; font-size: var(--fs-sm); color: var(--muted); } .fields label input, .fields label select { margin: 4px 0 0; font-size: var(--fs-md); color: var(--fg); } .hint { margin: 0 0 20px; color: var(--muted); } .help { margin-top: 40px; font-size: var(--fs-md); color: var(--muted); } .help h3 { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg); } .help p { margin: 0 0 12px; } button:disabled { opacity: .5; cursor: default; } .dialog { position: fixed; z-index: 5; top: 20vh; left: 50%; translate: -50% 0; width: min(380px, calc(100vw - 32px)); padding: 20px; border-radius: 16px; border: 1px solid var(--rule); background: var(--bg); box-shadow: var(--shadow); } .dialog p { margin: 0 0 12px; } .dialog.unlock { inset: auto; top: 20vh; left: 50%; margin: 0; color: var(--fg); } .dialog.unlock::backdrop { background: rgb(0 0 0 / .3); } /* Reader */ .reader { padding: 24px 20px 96px; } .chapter { max-width: var(--measure); margin: 0 auto; } .heading { margin: 24px 0 32px; text-align: center; font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-ui); } .text { position: relative; font-family: var(--font-read); font-optical-sizing: auto; font-size: var(--fs-read); line-height: var(--lh-read); } /* The Bible's own words wherever they are quoted: a card's passage, a clip, a story row's line, a psalm's title. They keep the reading face and the reading size, so scripture stays the loudest text in any pane. */ .card-quote, .quote, .passage, .psalm-title { font-family: var(--font-read); font-optical-sizing: auto; font-size: var(--fs-read); } /* A search result is interface: its quoted lines stay in the sans and the size of the list around them. */ .search-pane .card-quote, .search-pane .quote { font-family: inherit; font-size: var(--fs-md); } /* The words of Jesus, where a version marks them. Settings, Reading turns the colour off; the marks stay. */ .wj { color: var(--wj); } [data-red="off"] .wj { color: inherit; } .text p { margin: 0; text-indent: 1.5em; } .text > p:first-child, .text > h3 + p { text-indent: 0; } .text h3 { margin: 1.6em 0 .2em; font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-ui); } .text h3:first-child { margin-top: 0; } .text h3.title { text-align: center; font-size: var(--fs-md); font-weight: 400; color: var(--muted); margin-bottom: 1em; } /* A psalm's own title ("A Psalm of David."): part of the text, set quietly, not a heading. */ .text .psalm-title { margin: 0 0 .5em; text-indent: 0; font-style: italic; line-height: var(--lh-ui); color: var(--muted); } .text > .psalm-title + p { text-indent: 0; } .text .colophon { margin-top: 1.6em; text-indent: 0; font-size: var(--fs-sm); font-style: italic; line-height: var(--lh-ui); color: var(--muted); } /* Poetry: each line a block with a hanging indent (level 1 at 2em, level 2 at 3em, wrapped lines at 4em). A verse that opens on a line starts a line of its own, its number in the 2em gutter beside it. */ .text p:has(.line) { text-indent: 0; } .line { display: block; padding-left: 4em; text-indent: -2em; } .line.l2 { text-indent: -1em; } .poem-verse { position: relative; display: flex; align-items: flex-end; } .poem-verse > .verse { flex: 1; min-width: 0; } .poem-verse + .poem-verse { margin-top: .4em; } .poem-verse > .num { position: absolute; top: 0; left: 0; width: calc(var(--fs-read) * 2 - 8px); margin: 0; text-align: right; vertical-align: baseline; line-height: calc(var(--fs-read) * var(--lh-read)); } .poem-verse > .bubble { flex: none; height: calc(var(--fs-read) * var(--lh-read)); } /* Divine name as print KJVs set it: a capital, then small caps. */ .dn { display: inline-block; text-indent: 0; text-transform: lowercase; font-variant: small-caps; } .dn::first-letter { text-transform: uppercase; } .ins { font-variant: small-caps; } .fn { vertical-align: super; margin: 0 .15em; padding: 0 .25em; font-size: var(--fs-sm); font-style: italic; line-height: 1; color: var(--muted); } .fn[aria-expanded="true"] { color: var(--fg); font-weight: 600; } .note { display: block; margin: .4em 0 .6em; padding: .6em .9em; text-indent: 0; font-size: var(--fs-md); line-height: var(--lh-ui); border-left: 2px solid var(--rule); background: var(--hover); border-radius: 0 8px 8px 0; } .num { vertical-align: super; margin-right: .3em; font-size: var(--fs-sm); font-weight: 400; line-height: 1; color: var(--muted); user-select: none; } .num:hover { color: var(--fg); } .verse { scroll-margin-bottom: 65vh; border-radius: 4px; } .verse[aria-current] { background: var(--hover); -webkit-box-decoration-break: clone; box-decoration-break: clone; } ::highlight(note) { background-color: var(--mark); } ::highlight(note-active) { background-color: var(--mark-strong); } .bubble { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: .3em; font-size: var(--fs-sm); line-height: 1; color: var(--muted); } .bubble svg { width: 1.5em; height: 1.35em; } .notice { text-align: center; color: var(--muted); } /* A close control: a small x, where a surface has no other way to be put away (a dialog, a phone's bottom sheet). */ .close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); } .close:hover { background: var(--hover); color: var(--fg); } .close svg { width: 18px; height: 18px; } /* Round icon buttons: the composer's save. */ .round { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--card-rule); border-radius: 50%; background: var(--card); color: var(--fg); } .round svg { width: 18px; height: 18px; } .round path { stroke-width: 1.5; } .round:hover:not(:disabled) { border-color: var(--fg); } /* Selection toolbar: add a note on the selected text, or search for it. */ .selection-tools { position: absolute; z-index: 2; display: flex; padding: 2px; border: 1px solid var(--card-rule); border-radius: 99px; background: var(--card); color: var(--fg); box-shadow: var(--shadow); } .selection-tools button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; } .selection-tools button:hover { background: var(--hover); } .selection-tools svg { width: 18px; height: 18px; } .selection-tools path { stroke-width: 1.5; } .chapter { position: relative; } /* Which story a passage goes to, when none is current: a menu at the selection. */ .menu.chooser { position: absolute; width: 240px; } .menu.chooser svg { width: 12px; height: 12px; } .chooser .add { padding: 2px 6px 4px; } .chooser .add input { padding: 6px 10px; } /* "Added to · Undo", for a moment after a passage goes into a story. */ .toast { position: fixed; z-index: 6; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; max-width: calc(100% - 32px); padding: 10px 18px; border: 1px solid var(--card-rule); border-radius: 99px; background: var(--card); color: var(--fg); box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toast button { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Note cards. A bottom sheet here; margin columns where the Bible pane is wide enough (below). */ .margin { display: none; font-size: var(--fs-md); line-height: var(--lh-ui); } .margin.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; min-height: 0 !important; max-height: 60vh; overflow-y: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 24px rgb(0 0 0 / .25); } .sheet-close { margin: 0 -6px 4px auto; } .margin .card:not(.in-sheet) { display: none; } .card { margin-bottom: 12px; padding: 14px 16px 12px; cursor: pointer; border: 1px solid var(--card-rule); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); transition: border-color .15s, top .15s; } .card:hover, .card.active, .card:focus-within { border-color: var(--muted); } .card:focus-visible { outline-offset: 2px; border-radius: 16px; } .card.composer { cursor: auto; margin: 0; font-size: var(--fs-md); line-height: var(--lh-ui); transition: border-color .15s; } /* A card placed at the text: the composer, and Strong's word card. A bottom sheet on a phone; from 700px a popover at the words it is about (Reader places it), its arrow at --arrow. */ .card.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 60vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 18px 18px 0 0; box-shadow: 0 -4px 24px rgb(0 0 0 / .25); } .card.popover { position: absolute; z-index: 3; width: 380px; max-width: calc(100vw - 24px); box-shadow: var(--shadow); } .card.popover::before { content: ''; position: absolute; top: -7px; left: calc(var(--arrow) - 6px); width: 12px; height: 12px; rotate: 45deg; background: var(--card); border: 0 solid; border-color: inherit; border-width: 1px 0 0 1px; } .card.popover.above::before { top: auto; bottom: -7px; border-width: 0 1px 1px 0; } .card p { margin: 0; text-indent: 0; } .card-quote, .quote { padding-left: 10px; border-left: 3px solid var(--rule); color: var(--muted); } .card-quote { margin-bottom: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-body { white-space: pre-wrap; overflow-wrap: anywhere; } .card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); } .card-foot:empty, .card-foot:not(:has(:not(.sr))) { display: none; } .card-foot .chip { margin-right: auto; } .chip { display: inline-block; width: auto; max-width: 100%; margin: 0; padding: 3px 10px; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; border: 1px solid var(--card-rule); border-radius: 99px; background: transparent; } a.chip:hover, select.chip:hover { color: var(--fg); border-color: var(--muted); } .card-foot select.chip { max-width: 45%; text-overflow: ellipsis; } .card-foot input.chip { flex: 1; min-width: 6em; margin: 0 0 0 -6px; } .note-editor textarea { display: block; width: 100%; min-height: 1.5em; margin: 0; padding: 0; resize: none; overflow: hidden; border: 0; border-radius: 0; background: transparent; font: inherit; color: inherit; } .note-editor textarea:focus { outline: none; } .quiet { padding: 4px 0; color: var(--muted); } .quiet:hover { color: var(--fg); } .danger, .actions .danger { color: #c0392b; font-weight: 600; } .sr:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; font-size: var(--fs-md); color: var(--muted); } .actions button { padding: 4px 0; color: var(--muted); } .actions button:hover { color: var(--fg); } .primary, .actions .primary { padding: 6px 16px; border-radius: 99px; background: var(--fg); color: var(--bg); font-weight: 600; } .primary:hover, .actions .primary:hover { color: var(--bg); opacity: .85; } .actions select { display: inline-block; width: auto; max-width: 12em; margin: 0; padding: 3px 8px; color: var(--muted); } select, input { display: block; width: 100%; margin: 0 0 8px; padding: 9px 11px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule); border-radius: 8px; } select:focus, input:focus { outline: none; border-color: var(--fg); } ::placeholder { color: var(--muted); opacity: .7; } .row .note-editor { padding: 12px 14px; border: 1px solid var(--card-rule); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); font-size: var(--fs-md); } /* A new note in the notes pane: at the end, or in the gap between two rows, whose line and plus show on hover or focus. */ .row.adding { border-bottom: 0; } .add-note { display: block; width: 100%; padding: 12px 14px; text-align: left; font-size: var(--fs-md); color: var(--muted); border: 1px solid var(--rule); border-radius: 16px; } .add-note:hover { color: var(--fg); border-color: var(--muted); } .gap { position: absolute; left: 28px; right: 0; top: -10px; z-index: 1; display: grid; place-items: center; height: 20px; color: var(--muted); opacity: 0; } .gap::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid currentColor; } .gap svg { position: relative; width: 18px; height: 18px; padding: 3px; border: 1px solid currentColor; border-radius: 50%; background: var(--bg); } .gap:hover, .gap:focus-visible { opacity: 1; color: var(--fg); } @media (hover: none) { .gap { display: none; } } @media (min-width: 700px) { .reader { padding: 32px 40px 96px; } } /* From 1100px the Bible pane scrolls on its own, and its width, not the window's, sets the margins of notes. The chapter stays centred in the pane: note cards sit in a right margin from 1104px, with an equal empty one on the left, and use both from 1320px. Narrower, they are bubbles and a bottom sheet. */ @media (min-width: 1100px) { .content { height: calc(100vh - var(--bar)); } .pane.bible { container: bible / inline-size; position: relative; height: 100%; overflow: hidden; } .pane.bible > .reader { height: 100%; overflow-y: auto; scrollbar-gutter: stable both-edges; padding: 32px 40px 96px; } } @container bible (min-width: 1104px) { .chapter { max-width: none; display: grid; grid-template-columns: minmax(220px, 300px) var(--measure) minmax(220px, 300px); column-gap: 32px; justify-content: center; } .heading, .text { grid-column: 2; } .bubble, .sheet-close { display: none; } .margin.right, .margin.right.open { display: block; grid-column: 3; grid-row: 2; position: relative; z-index: auto; max-height: none; overflow: visible; padding: 0; border-radius: 0; box-shadow: none; background: none; } .margin .card, .margin .card:not(.in-sheet) { display: block; position: absolute; left: 0; right: 0; margin: 0; } } @container bible (min-width: 1320px) { .margin.left { display: block; grid-column: 1; grid-row: 2; position: relative; } } /* Settings dialog */ body:has(dialog.settings[open]) { overflow: hidden; } dialog.settings { width: min(880px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 64px)); max-width: none; max-height: none; padding: 0; overflow: hidden; color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); } dialog.settings[open] { display: grid; grid-template-columns: 220px minmax(0, 1fr); } dialog.settings::backdrop { background: rgb(0 0 0 / .35); } .settings-menu { padding: 20px 12px; overflow-y: auto; border-right: 1px solid var(--rule); } .settings-menu h2 { margin: 6px 12px 14px; font-size: var(--fs-lg); font-weight: 600; } .settings-menu button { display: flex; align-items: center; font-weight: 600; } .settings-menu button:hover, .settings-menu [aria-current] { background: var(--hover); } .settings-body { overflow-y: auto; padding: 22px 32px 48px; } .settings-body > h2 { margin: 0 40px 16px 0; font-size: var(--fs-lg); font-weight: 600; } .settings-body > h2:focus { outline: none; } .settings-body > .back { display: none; } .settings-body .name { font-size: var(--fs-md); } .settings-body .status { text-align: left; } .settings-body .fields { margin-top: 16px; } .settings-body .help { margin-top: 32px; } .settings .close { position: absolute; top: 14px; right: 14px; } /* A setting that is on or off: its switch, then its name. */ .toggle { display: flex; align-items: center; gap: 12px; padding: 6px 0; } .toggle .box { flex: none; width: 34px; height: 20px; border: 1px solid var(--rule); border-radius: 99px; background: var(--hover); } .toggle .box::after { content: ''; display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: var(--muted); transition: translate .15s; } .toggle[aria-checked="true"] .box { background: var(--fg); border-color: var(--fg); } .toggle[aria-checked="true"] .box::after { background: var(--bg); translate: 14px 0; } .versions h3, .about h3, .reading h3 { margin: 28px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); } .versions section:first-child h3 { margin-top: 0; } .versions .rows { margin-top: 0; } .versions .row { padding: 14px 0; } .versions .meta, .versions .state { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); } .versions .state progress { display: block; width: 100%; margin: 6px 0; accent-color: var(--fg); } .versions .add { margin-top: 12px; } .versions .error { margin: 8px 0 0; } /* Settings, History: a day at a time, every row a way back to what it names. */ .history-settings h3 { margin: 26px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); } .history-settings section:first-of-type h3 { margin-top: 12px; } .history-settings .rows { margin-top: 0; } .history-settings .rows li { border-bottom: 1px solid var(--rule); } .history-settings .rows a, .history-settings .rows button { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 12px 0; color: inherit; text-align: left; text-decoration: none; } .history-settings .rows a:hover, .history-settings .rows button:hover { color: var(--muted); } .history-settings .item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-settings .count { flex: none; margin: 0; } .history-settings .meta { margin: 18px 0 0; color: var(--muted); } .history-settings .actions button[disabled] { opacity: .5; } .about .rows { margin: 4px 0 20px; } .about .rows li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-md); } .about a { color: inherit; } .bar .icon .dot { position: absolute; top: 5px; right: 4px; width: 7px; height: 7px; margin: 0; box-shadow: 0 0 0 2px var(--bar-edge); } .bar .dot.off { background: var(--bar-muted); } .bar .dot.error { background: #ef5b4d; } .bar .dot.story { background: var(--bar-fg); } /* A phone: full screen, the menu first, then one section with a way back. */ @media (max-width: 639px) { dialog.settings { width: 100vw; height: 100dvh; margin: 0; inset: 0; border: 0; border-radius: 0; } dialog.settings[open] { grid-template-columns: minmax(0, 1fr); } .settings[data-screen="list"] .settings-body, .settings[data-screen="section"] .settings-menu { display: none; } .settings-menu { padding-top: calc(20px + env(safe-area-inset-top)); border: 0; } .settings-menu button { padding: 14px 12px; font-size: var(--fs-md); } .settings-menu [aria-current] { background: none; } .settings-body { padding: calc(14px + env(safe-area-inset-top)) 20px 48px; } .settings-body > .back { display: flex; width: auto; margin: 0 0 12px -12px; color: var(--muted); } .settings .close { top: calc(14px + env(safe-area-inset-top)); } } .panel .more { display: block; margin: 4px 12px 8px; font-size: var(--fs-md); } /* Shell: a fixed bar, measured into --bar by App, and the content under it. */ :root { --bar: 96px; } .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 3; } #app { padding-top: var(--bar); } .links { justify-self: end; display: flex; gap: 4px; } .verse, .row { scroll-margin-top: calc(var(--bar) + 24px); } .panel .add { margin: 8px 12px 4px; } .panel .add input { margin: 0; padding: 6px 10px; font-size: var(--fs-md); } .panel .add .primary { padding: 5px 12px; font-size: var(--fs-md); } .panel .count { margin-left: 6px; } /* The story dropdown: one menu of rows alike, as the note actions menu. The stories (the current one checked, on a soft background, its count muted at the right), then the current story's actions with icons, then New story and Import a story. Rename and New story turn their row into a field. */ .story-menu .item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 8px; text-align: left; font-weight: 400; } .story-menu .item:hover, .story-menu .item:focus-visible { background: var(--hover); outline: none; } .story-menu .list .item { padding-left: 38px; } .story-menu .item[aria-current] { font-weight: 400; background: var(--hover); } .story-menu .item[aria-current]::before { content: "✓"; position: absolute; left: 14px; } .story-menu .item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-menu .count { flex: none; margin: 0; } .story-menu .tag { flex: none; font-size: var(--fs-sm); color: var(--muted); } .story-menu svg { flex: none; width: 16px; height: 16px; } .story-menu svg path { stroke-width: 1.5; } .story-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--rule); } .story-menu .field { padding: 2px 4px; } .story-menu .field input { margin: 0; padding: 7px 10px; } .story-menu .confirm p { margin: 6px 12px 2px; color: var(--muted); } .story-menu .share .primary { padding: 5px 0; background: none; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } /* The current story's share link, in the dropdown under its actions. */ .panel .share { margin: 0 12px 10px; text-align: left; font-size: var(--fs-md); } .panel .share p { margin: 0 0 8px; } .panel .share .add { margin: 0; justify-content: flex-start; } .panel .share .add input { font-size: var(--fs-md); } .panel .share .add button { flex: none; width: auto; } .panel .share .add button:not(.primary) { padding: 5px 0; } /* Notes from a version numbered differently. */ .foreign { max-width: var(--measure); margin: 32px auto 0; font-size: var(--fs-md); color: var(--muted); } .foreign summary { cursor: pointer; } .foreign .row { padding: 14px 0; } .foreign .card-body { font-size: var(--fs-md); color: var(--fg); } /* Import dialog */ .dialog textarea { display: block; width: 100%; margin: 0 0 8px; padding: 9px 11px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule); border-radius: 8px; resize: vertical; } .dialog.import { top: 10vh; max-height: 80vh; overflow-y: auto; width: min(560px, calc(100vw - 32px)); } .dialog.import .page { padding: 12px 0 0; } .dialog.import > .close { position: absolute; top: 12px; right: 12px; } .dialog.import > p:first-of-type { margin-right: 32px; } /* Story view: the Bible on the left, the story on the right (App sets --story-w), each scrolling on its own. */ .tabs { display: none; } .split { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--story-w); height: calc(100vh - var(--bar)); } .split .pane { min-width: 0; position: relative; overflow: hidden; } .split .pane.bible > .reader, .split .pane.story { height: 100%; overflow-y: auto; } .split .reader { padding: 24px 40px 96px; } .split .chapter { display: block; max-width: var(--measure); margin: 0 auto; } .split .bubble { display: inline-flex; } .split .margin, .split .margin.right { display: none; } /* The story's column is at most 680px, its head (the dropdown) held at the top as it scrolls. */ .split .pane.story { max-width: none; margin: 0; padding: 0 max(32px, (100% - 680px) / 2) 96px; } .split .pane.story > .notice { text-align: left; } .pane-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 16px 0 12px; background: var(--bg); } .pane-head .picker { position: relative; min-width: 0; margin-right: auto; } .pane-head .select { max-width: 100%; font-size: var(--fs-lg); font-weight: 600; border-color: transparent; } .pane-head .select:hover, .pane-head .select[aria-expanded="true"] { border-color: var(--fg); } .pane-head .select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pane-head .panel { left: 0; translate: none; } .row:focus { outline: none; } .row:focus-visible, .row.active, .page .row:has(.note-menu-button[aria-expanded="true"], .note-editor) { box-shadow: -3px 0 0 var(--mark-strong); } @media (max-width: 1099px) { .tabs { display: flex; justify-content: center; gap: 24px; padding: 8px 0 0; } .tabs [role="tab"] { padding: 6px 2px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; } .tabs [aria-selected="true"] { color: var(--fg); border-color: var(--fg); } .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .split .pane.bible, .split > .divider { display: none; } .split .pane.story { padding: 0 20px 96px; } } /* A line between panes that drags, or moves with the arrow keys. */ .divider { position: relative; z-index: 2; flex: none; width: 1px; background: var(--rule); cursor: col-resize; touch-action: none; } .divider::before { content: ''; position: absolute; inset: 0 -6px; } .divider:hover, .divider:focus-visible, .divider.dragging { outline: none; background: var(--muted); box-shadow: 0 0 0 1px var(--muted); } /* Search pane: the left column (App sets --search-w), or over the Bible pane where three columns do not fit. */ .shell { display: flex; align-items: flex-start; } .shell-main { flex: 1; min-width: 0; } .search-pane { position: sticky; top: var(--bar); flex: none; width: var(--search-w); height: calc(100vh - var(--bar)); overflow-y: auto; padding: 12px 16px 48px; font-size: var(--fs-md); line-height: var(--lh-ui); background: var(--bg); } .shell > .divider { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); } .shell[data-search="overlay"] .search-pane { position: fixed; top: var(--bar); bottom: 0; left: 0; z-index: 3; height: auto; max-width: 100%; border-right: 1px solid var(--rule); box-shadow: var(--shadow); } .slide-enter-active, .slide-leave-active { transition: translate .2s ease; } .slide-enter-from, .slide-leave-to { translate: -100% 0; } /* The query and its controls stay at the top of the pane while the list scrolls under them. */ .search-top { position: sticky; top: -12px; z-index: 1; margin: -12px -16px 0; padding: 12px 16px 4px; background: var(--bg); } .search-top.scrolled { box-shadow: 0 1px 0 var(--rule); } .search-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .sort { display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 4px; border: 1px solid var(--rule); border-radius: 99px; font-size: var(--fs-sm); } .sort button { padding: 2px 10px; border-radius: 99px; color: var(--muted); } .sort button:hover { color: var(--fg); } .sort [aria-pressed="true"] { background: var(--hover); color: var(--fg); font-weight: 600; } .search-head input { margin: 0; } .search-pane .status, .search-pane .count { margin: 8px 0; font-size: var(--fs-sm); color: var(--muted); text-align: left; } .search-pane progress { display: block; width: 100%; margin-bottom: 6px; accent-color: var(--fg); } .search-empty { color: var(--muted); } .search-empty p { margin: 0 0 10px; } .search-empty .example { color: var(--fg); font-weight: 600; text-decoration: underline; } /* With searches behind it, the empty pane offers them instead of an explanation, and keeps one example. */ .search-empty .group { margin: 0 0 2px; } .search-empty .list.recent button { width: calc(100% + 16px); margin: 0 -8px; padding: 9px 8px; border-radius: 10px; color: var(--fg); } .search-empty .list.recent button:hover { background: var(--hover); } .search-empty .list.recent + p { margin-top: 16px; } .result { display: block; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; color: inherit; text-decoration: none; scroll-margin-top: calc(var(--head, 0px) + 8px); } .result:hover, .result.active { background: var(--hover); } .result.reference { font-weight: 600; } .result .ref { display: block; margin-bottom: 2px; } .result mark { background: var(--mark); color: inherit; border-radius: 2px; } .search-notes h2 { margin: 12px 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); } .result.note .card-body { display: block; } .result.note .card-quote { display: block; margin: 4px 0 !important; white-space: normal; } .result.note .chip { margin-top: 4px; } .scope { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: var(--fs-sm); } .search-pane .more { display: inline-block; margin: 12px 0; } /* In order, a book's results start under its name: a quiet label over the group, as "Your notes" is over the notes. */ .book-head { margin: 20px 0 2px; padding-bottom: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--rule); } .search-pane .end { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--muted); } .end-watch { height: 1px; } @media (max-width: 699px) { .shell[data-search="overlay"] .search-pane { width: 100%; border: 0; box-shadow: none; } } /* A phone: one row. Under 480px App shows the book short, and the gaps, pickers and buttons close up to fit "1 Macc 16" at 320px. No button goes under 30px. */ @media (max-width: 479px) { .bar { column-gap: 2px; padding-inline: 4px; } .place { gap: 0; } .links { gap: 0; } .bar .icon, .bar .step { width: 30px; } .bar .select { padding: 0 2px; gap: 3px; } } /* Settings, Reading: the theme choice. One of three, the one in hand filled in. */ .segmented { display: inline-flex; margin: 0 0 10px; padding: 2px; border: 1px solid var(--rule); border-radius: 99px; } .segmented button { padding: 6px 16px; border-radius: 99px; color: var(--muted); } .segmented button:hover { color: var(--fg); } .segmented button[aria-checked="true"] { background: var(--fg); color: var(--bg); font-weight: 600; } .segmented button[aria-checked="true"]:hover { color: var(--bg); } .strongs-settings .state { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: var(--fs-sm); color: var(--muted); } .strongs-settings .state progress { flex: none; width: 140px; accent-color: var(--fg); } .strongs-settings .meta { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); } /* Strong's word study. The affordance is the word under the pointer, underlined only while it is there: nothing in the text is decorated permanently. The verse DOM is untouched, so note offsets and the red letters are unharmed. */ ::highlight(word) { text-decoration: underline dotted; text-underline-offset: .2em; } .word-card { cursor: auto; margin: 0; font-size: var(--fs-md); line-height: var(--lh-ui); } .word-card hr { margin: 14px 0; border: 0; border-top: 1px solid var(--card-rule); } /* The Greek or Hebrew word itself is the Bible's own word, so it is set in the reading face. */ .word-card .original { font-family: var(--font-read); font-size: var(--fs-lg); line-height: var(--lh-ui); } .word-card .say { color: var(--muted); } .word-card .pos { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); } .word-card .strongs-def { margin-top: 10px; } .word-card .open-def { margin-top: 8px; color: var(--muted); } .word-card .word-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); } .word-card .source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .word-card .actions { justify-content: space-between; margin-top: 12px; }