/** * Reading controls — floating toolbar + reading themes. * * The toolbar is theme-neutral (its own colors) and is appended to * (a sibling of ) so the whole-site theme rules below — which are scoped * to `... body` — never touch the widget itself. * * The reading theme (light / sepia / dark) is applied to the WHOLE page: the * base surface color is put on /, in-page containers are made * transparent so that base shows through, and text colors are forced. The font * size is applied only to the article reading area (.prose). Light = no * override, so the default look is identical to before. */ /* --------------------------------------------------------------------------- * Reading area — font size (scoped to the article body only) * ------------------------------------------------------------------------- */ html[data-reading-fs] .prose p, html[data-reading-fs] .prose li, html[data-reading-fs] .prose blockquote { font-size: var(--reading-fs) !important; } /* --------------------------------------------------------------------------- * Whole-site reading theme — SEPIA * ------------------------------------------------------------------------- */ html[data-reading-theme="sepia"], html[data-reading-theme="sepia"] body { background-color: #f4ecd8 !important; } html[data-reading-theme="sepia"] body :is( section, article, aside, div, main, ul, ol, li, form, figure, table, thead, tbody, tr, td, th, dl, dd, dt, details, summary, blockquote ) { background-color: transparent !important; } /* Keep the page chrome opaque (sticky headers etc.). */ html[data-reading-theme="sepia"] body :is(header, nav, footer) { background-color: #f4ecd8 !important; } html[data-reading-theme="sepia"] body :is( h1, h2, h3, h4, h5, h6, p, li, span, a, strong, em, blockquote, td, th, figcaption, label, small, time, cite, dd, dt, address ) { color: #4a3f2f !important; } html[data-reading-theme="sepia"] body a:hover { color: #7a5c2e !important; } html[data-reading-theme="sepia"] body :is(input, textarea, select) { background-color: #fbf6e9 !important; color: #4a3f2f !important; border-color: #d8ccae !important; } html[data-reading-theme="sepia"] body :is(hr) { border-color: #d8ccae !important; } /* --------------------------------------------------------------------------- * Whole-site reading theme — DARK * ------------------------------------------------------------------------- */ html[data-reading-theme="dark"], html[data-reading-theme="dark"] body { background-color: #15171a !important; } html[data-reading-theme="dark"] body :is( section, article, aside, div, main, ul, ol, li, form, figure, table, thead, tbody, tr, td, th, dl, dd, dt, details, summary, blockquote ) { background-color: transparent !important; } html[data-reading-theme="dark"] body :is(header, nav, footer) { background-color: #15171a !important; } html[data-reading-theme="dark"] body :is( h1, h2, h3, h4, h5, h6, p, li, span, a, strong, em, blockquote, td, th, figcaption, label, small, time, cite, dd, dt, address ) { color: #d7d3cc !important; } html[data-reading-theme="dark"] body a { color: #8ab4f8 !important; } html[data-reading-theme="dark"] body :is(input, textarea, select) { background-color: #22262b !important; color: #d7d3cc !important; border-color: #3a3f45 !important; } html[data-reading-theme="dark"] body :is(hr) { border-color: #3a3f45 !important; } /* --------------------------------------------------------------------------- * Floating widget * ------------------------------------------------------------------------- */ .rc-root { position: fixed; left: 20px; bottom: 40vh; z-index: 2147483000; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .rc-fab { width: 52px; height: 52px; border-radius: 50%; border: none; background: #2b3440; color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); display: flex; align-items: baseline; justify-content: center; gap: 1px; transition: transform 0.15s ease, background 0.15s ease; } .rc-fab:hover { background: #1f2731; transform: translateY(-1px); } .rc-fab-a1 { font-size: 20px; font-weight: 700; } .rc-fab-a2 { font-size: 13px; font-weight: 700; } /* --------------------------------------------------------------------------- * Panel * ------------------------------------------------------------------------- */ .rc-panel { background: #eef0f2; border-radius: 18px; padding: 18px 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); display: none; flex-direction: column; gap: 16px; min-width: 260px; } .rc-panel.rc-open { display: flex; } .rc-row { display: flex; align-items: center; gap: 16px; } .rc-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7480; min-width: 92px; } /* Theme swatch buttons */ .rc-theme-group { display: flex; gap: 8px; background: #fff; padding: 6px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .rc-theme-btn { width: 44px; height: 44px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, transform 0.15s ease; } .rc-theme-btn:hover { transform: translateY(-1px); } .rc-theme-light { background: #ffffff; color: #2b3440; box-shadow: inset 0 0 0 1px #e2e5e9; } .rc-theme-sepia { background: #f4ecd8; color: #4a3f2f; } .rc-theme-dark { background: #2b3440; color: #eef0f2; } .rc-theme-light.is-active { border-color: #2b3440; } .rc-theme-sepia.is-active { border-color: #d9a800; } .rc-theme-dark.is-active { border-color: #2b3440; } /* Font-size stepper */ .rc-fs-group { display: flex; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); overflow: hidden; } .rc-fs-btn { border: none; background: transparent; cursor: pointer; color: #2b3440; font-weight: 700; padding: 10px 16px; display: flex; align-items: baseline; line-height: 1; transition: background 0.15s ease; } .rc-fs-minus { font-size: 15px; } .rc-fs-plus { font-size: 20px; } .rc-fs-sign { font-size: 0.7em; margin-left: 1px; } .rc-fs-btn:hover:not(:disabled) { background: #f2f4f6; } .rc-fs-btn:disabled { opacity: 0.35; cursor: default; } .rc-fs-value { min-width: 64px; text-align: center; font-size: 15px; font-weight: 700; color: #2b3440; padding: 0 4px; } @media (max-width: 480px) { .rc-panel { min-width: 0; width: calc(100vw - 40px); } .rc-label { min-width: 72px; } } /* --------------------------------------------------------------------------- * Inline bar (pinned after the post title) * ------------------------------------------------------------------------- */ .rc-inline { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px 20px; background: #eef0f2; border-radius: 14px; padding: 12px 20px; margin: 20px 0; overflow-x: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Keep each group intact on one row; scroll horizontally if too narrow rather * than wrapping THEME / FONT SIZE onto separate lines. */ .rc-inline .rc-row { flex-shrink: 0; } .rc-inline .rc-label { min-width: 0; white-space: nowrap; } /* Compact inline bar — slimmer than the floating panel (shorter buttons and * tight vertical padding) so it sits as a thin strip under the title. */ .rc-inline { padding: 5px 14px; border-radius: 10px; } .rc-inline .rc-row { gap: 12px; } .rc-inline .rc-label { font-size: 10px; } .rc-inline .rc-theme-group { padding: 3px; gap: 6px; border-radius: 8px; } .rc-inline .rc-theme-btn { width: 30px; height: 28px; font-size: 14px; border-radius: 7px; } .rc-inline .rc-fs-group { border-radius: 8px; } .rc-inline .rc-fs-btn { padding: 5px 12px; } .rc-inline .rc-fs-minus { font-size: 11px; } .rc-inline .rc-fs-plus { font-size: 15px; } .rc-inline .rc-fs-value { min-width: 48px; font-size: 12px; } /* The inline bar lives inside , so shield it from the whole-site theme * rules above (which force container backgrounds transparent and recolour text). * These selectors are more specific than those rules, so the bar keeps its own * look in every reading theme. */ html[data-reading-theme] .rc-inline { background-color: #eef0f2 !important; } html[data-reading-theme] .rc-inline .rc-theme-group, html[data-reading-theme] .rc-inline .rc-fs-group { background-color: #fff !important; } html[data-reading-theme] .rc-inline .rc-label { color: #6b7480 !important; } html[data-reading-theme] .rc-inline .rc-fs-value { color: #2b3440 !important; } html[data-reading-theme] .rc-inline .rc-fs-sign { color: inherit !important; } @media (max-width: 600px) { .rc-inline { gap: 8px 14px; padding: 5px 12px; } .rc-inline .rc-row { gap: 10px; } }