/* * Reader settings on the learning pages. * * The state lives in classes on (set before paint by the inline script) * and on (set server-side). Both are matched, so the layout is right * whether or not the page came from a cache. */ /* -------------------------------------------------------------------------- * The gear * -------------------------------------------------------------------------- */ .mishnah-learn-settings { display: inline-flex; align-items: center; } .mishnah-learn-settings__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; line-height: 0; transition: color 0.2s ease-in-out; } .mishnah-learn-settings__toggle:hover, .mishnah-learn-settings__toggle:focus-visible { color: var(--accent, #0b6bcb); } /* -------------------------------------------------------------------------- * Layout * * The markup is authored in Bricks, so these rules target the classes that * markup already uses rather than anything the plugin controls. * -------------------------------------------------------------------------- */ .mishnah-layout-columns .mishnah-text__outer { flex-direction: row; } .mishnah-layout-columns .mishnah-text__column { width: calc(50% - 1em); } /* Stacked puts the Hebrew above the translation, so column-reverse - the Hebrew is second in the source order. */ .mishnah-layout-rows .mishnah-text__outer { flex-direction: column-reverse; } .mishnah-layout-rows .mishnah-text__column { width: 100%; } /* -------------------------------------------------------------------------- * Hiding the translation * * The whole column goes, not just the text inside it - otherwise an empty * half-width column is left holding the space. * * Three ways a column is recognised as the translation, in order of directness: * * 1. .mishnah-column--english, added by hand in Bricks. Cheapest and clearest; * if you are editing the template anyway, add this. * 2. :has(), which works it out from the content. Needs nothing of you. * 3. The same class added by JavaScript on load, for browsers without :has(). * * All three are supported at once, so a page works whether or not anyone has * touched the markup. * -------------------------------------------------------------------------- */ .mishnah-hide-english .mishnah-column--english, .mishnah-hide-english .mishnah-text__column--english, .mishnah-hide-english .mishnah-text__column:has(.translation-block):not(:has(.mishnah-hebrew)):not(:has(.commentary-hebrew)), .mishnah-hide-english .mishnah-text__column:has(.mishnah-english):not(:has(.mishnah-hebrew)), .mishnah-hide-english .mishnah-text__column:has(.commentary-english):not(:has(.commentary-hebrew)) { display: none; } /* * Whatever is left takes the full width. * * Same specificity as the side-by-side rule above (two classes each), so this * wins on source order alone - which is why it must stay below it in the file. */ .mishnah-hide-english .mishnah-text__column { width: 100%; } /* * A column holding both languages cannot be hidden - that would take the Hebrew * with it. Hide the translation inside it instead. */ .mishnah-hide-english .mishnah-text__column:has(.mishnah-hebrew) .translation-block, .mishnah-hide-english .mishnah-text__column:has(.commentary-hebrew) .translation-block, .mishnah-hide-english .mishnah-column--both .translation-block { display: none; } /* -------------------------------------------------------------------------- * Text size * * Scales the learning text only. Navigation, buttons and the rest of the page * are left alone - someone enlarging the Mishnah is not asking for a bigger * menu. * -------------------------------------------------------------------------- */ .mishnah-text-size-85 { --mishnah-text-scale: 0.85; } .mishnah-text-size-100 { --mishnah-text-scale: 1; } .mishnah-text-size-115 { --mishnah-text-scale: 1.15; } .mishnah-text-size-130 { --mishnah-text-scale: 1.3; } .mishnah-text-size-150 { --mishnah-text-scale: 1.5; } .mishnah-hebrew { font-size: calc(28px * var(--mishnah-text-scale, 1)); line-height: calc(36px * var(--mishnah-text-scale, 1)); } .mishnah-english, .commentary-english, .commentary-hebrew { font-size: calc(1em * var(--mishnah-text-scale, 1)); } /* -------------------------------------------------------------------------- * The modal * -------------------------------------------------------------------------- */ .mishnah-settings-modal { text-align: start; } .mishnah-settings-modal__group { margin-bottom: 1.5em; } .mishnah-settings-modal__group:last-child { margin-bottom: 0; } .mishnah-settings-modal__label { display: block; margin-bottom: 0.6em; font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #666; } .mishnah-settings-modal__choices { display: flex; gap: 8px; } .mishnah-settings-modal__choice { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 2px solid #dcdcde; border-radius: 6px; background: #fff; color: #1d2327; font-size: 0.9em; cursor: pointer; transition: border-color 0.15s ease-in-out, background 0.15s ease-in-out; } .mishnah-settings-modal__choice:hover { border-color: #b0b0b5; } .mishnah-settings-modal__choice[aria-pressed="true"] { border-color: var(--base, #1d2327); background: #f2f6fb; } .mishnah-settings-modal__choice svg { width: 30px; height: 30px; stroke: currentColor; } /* A switch row: label on one side, control on the other. Logical properties so it mirrors in Hebrew and Yiddish without a second rule. */ .mishnah-settings-modal__switch { display: flex; align-items: center; justify-content: space-between; gap: 1em; cursor: pointer; } .mishnah-settings-modal__switch input { flex: none; width: 18px; height: 18px; margin: 0; cursor: pointer; } .mishnah-settings-modal__hint { margin: 0.5em 0 0; font-size: 0.8em; color: #666; } /* Text size stepper */ .mishnah-settings-modal__stepper { display: flex; align-items: center; gap: 8px; } /* Flex centring rather than line-height: a button's default padding and the glyph's own vertical metrics both shift the character off-centre otherwise, and − and + do not sit at the same height as each other. */ .mishnah-settings-modal__step { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 2px solid #dcdcde; border-radius: 6px; background: #fff; color: #1d2327; font-family: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; } .mishnah-settings-modal__step:hover:not(:disabled) { border-color: #b0b0b5; } .mishnah-settings-modal__step:disabled { opacity: 0.4; cursor: default; } .mishnah-settings-modal__size { flex: 1; text-align: center; font-variant-numeric: tabular-nums; } .mishnah-settings-modal__preview { margin-top: 0.6em; padding: 0.5em 0.7em; border-radius: 4px; background: #f6f7f7; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mishnah-settings-modal__actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 1.5em; } .mishnah-settings-modal__reset { border: 0; background: none; color: #666; font-size: 0.9em; text-decoration: underline; cursor: pointer; } .mishnah-settings-modal__done { padding: 10px 24px; border: 0; border-radius: 4px; background: var(--base, #1d2327); color: #fff; font-weight: 600; cursor: pointer; } /* The bottom sheet has no padding of its own. */ .mishnah-settings-sheet { padding: 1.5em 1.25em 2em; }