/* ============================================================ Ospaces — Appearance preference styles Pref classes live on . Everything is scoped so nothing leaks when a pref is off. Reuses existing CSS variables. ============================================================ */ /* ---- Font family --------------------------------------------------------- The app applies `font-family: var(--font)` on body/buttons/inputs and `var(--font-mono)` on code. Overriding --font under the pref class recolors normal text everywhere while leaving code as mono. */ html.pref-serif { --font: Georgia, "Iowan Old Style", "Times New Roman", Times, serif; } html.pref-mono { --font: var(--font-mono); } /* ---- Full width ---------------------------------------------------------- #page-body is constrained by `max-width: var(--page-w)` (708px) and centered with `margin: 0 auto`. Widen it when the pref is on. */ html.pref-fullwidth #page-body { max-width: none; padding-left: 96px; padding-right: 96px; } @media (max-width: 800px) { html.pref-fullwidth #page-body { padding-left: 24px; padding-right: 24px; } } /* ---- Small text ---------------------------------------------------------- Block font sizes are declared in px, so nudge the key content selectors down a touch rather than relying on a root font-size cascade. */ html.pref-smalltext #page-title { font-size: 34px; } html.pref-smalltext .block-content { font-size: 15px; } html.pref-smalltext .b-h1 .block-content { font-size: 27px; } html.pref-smalltext .b-h2 .block-content { font-size: 22px; } html.pref-smalltext .b-h3 .block-content { font-size: 18px; } html.pref-smalltext .t-cell, html.pref-smalltext .col-cell { font-size: 14px; } html.pref-smalltext .b-quote .block-content { font-size: 15px; } html.pref-smalltext .b-code .block-content { font-size: 12.5px; } /* ============================================================ Appearance controls (rendered into the Settings modal) ============================================================ */ .appr-block { margin-top: 2px; } /* accent swatches */ .appr-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .appr-swatch { width: 26px; height: 26px; border-radius: 50%; padding: 0; border: none; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.12); transition: transform 0.08s ease; } .appr-swatch:hover { transform: scale(1.08); } .appr-swatch.active { box-shadow: 0 0 0 2px var(--bg-modal), 0 0 0 4px var(--text); } .appr-swatch.active::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); } /* custom color picker chip */ .appr-swatch-custom { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.12); } .appr-color-input { opacity: 0; width: 100%; height: 100%; border: none; padding: 0; cursor: pointer; background: transparent; } /* font segmented control tweaks (builds on .settings-seg) */ .appr-seg { margin-top: 2px; } /* toggle rows */ .appr-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); } .appr-toggle-row:first-of-type { border-top: none; } .appr-toggle-info { min-width: 0; } .appr-toggle-title { font-size: 14px; color: var(--text); font-weight: 500; } .appr-toggle-desc { font-size: 12.5px; color: var(--text-light); margin-top: 2px; } /* iOS-style switch */ .appr-switch { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 11px; background: var(--border-strong); border: none; cursor: pointer; transition: background 0.15s ease; } .appr-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; } .appr-switch.on { background: var(--accent); } .appr-switch.on::after { transform: translateX(16px); } /* ============================================================ Per-page overrides (classes on #page-body, set from the page ⋯ menu). Declared AFTER the html.pref-* rules with an html prefix so they win the specificity tie against global prefs. ============================================================ */ html #page-body.page-w-full { max-width: none; padding-left: 96px; padding-right: 96px; } html #page-body.page-w-narrow { max-width: 560px; padding-left: 24px; padding-right: 24px; } @media (max-width: 800px) { html #page-body.page-w-full { padding-left: 24px; padding-right: 24px; } } html #page-body.page-font-serif { --font: Georgia, "Iowan Old Style", "Times New Roman", Times, serif; font-family: var(--font); } html #page-body.page-font-mono { --font: var(--font-mono); font-family: var(--font); } /* ---- page ⋯ menu: width / font segmented rows ---- */ .pm-seg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px; } .pm-seg-label { font-size: 12.5px; color: var(--text-secondary, #787774); flex: 0 0 auto; } .pm-seg { display: inline-flex; } .pm-seg button { font-size: 12px; padding: 3px 8px; } /* ---- topbar lock badge ---- */ #lock-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg-secondary, rgba(120, 120, 120, 0.12)); color: var(--text-secondary, #787774); white-space: nowrap; user-select: none; } #lock-badge.hidden { display: none; } /* ---- settings additions (wave 5) ---- */ .settings-seg-wrap { flex-wrap: wrap; } .settings-seg-wrap button { flex: 0 0 auto; } .settings-export { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 12px; font-size: 13px; font-family: var(--font); color: var(--text, #37352f); background: transparent; border: 1px solid var(--border, #e3e2e0); border-radius: 6px; cursor: pointer; } .settings-export:hover { background: var(--bg-hover, rgba(120, 120, 120, 0.08)); }