/* CLUG light/dark theme — override layer for Twenty (style.css). * Usage: set by js/theme.js (default follows OS). * * Why !important below: the skel framework re-injects its stylesheets * (style.css, style-wide/normal/narrow/...) AFTER this file at runtime, * so plain ties would lose. !important keeps the dark layer authoritative. * Light theme needs no overrides (it matches Twenty defaults). */ :root { color-scheme: light dark; --clug-bg: #f3f6fa; --clug-fg: #7c8081; --clug-header-bg: #ffffff; --clug-footer-bg: #e8eef4; --clug-card-bg: #ffffff; --clug-input-bg: #ffffff; --clug-controls-bg: #fafafa; --clug-border: rgba(124, 128, 129, 0.2); --clug-border-strong: #e5e5e5; --clug-link: #3fb1a3; --clug-muted: #666666; --clug-card2-bg: #808080; } html[data-theme="dark"] { color-scheme: dark; --clug-bg: #14171b; --clug-fg: #c3c9d1; --clug-header-bg: #1e2329; --clug-footer-bg: #1e2329; --clug-card-bg: #1e2329; --clug-input-bg: #242b32; --clug-controls-bg: #1e2329; --clug-border: rgba(255, 255, 255, 0.14); --clug-border-strong: #3a424b; --clug-link: #7fd8cc; --clug-muted: #9aa2ac; --clug-card2-bg: #2b3138; } /* ---- header: slimmer vertical padding + vertically centered nav (tall logo) ---- */ html[data-theme="light"] #header, html[data-theme="dark"] #header { padding: 0.4em 1.5em !important; } html[data-theme="light"] #header nav, html[data-theme="dark"] #header nav { top: 50% !important; transform: translateY(-50%) !important; } /* ---- page surfaces ---- */ html[data-theme="dark"] body, html[data-theme="dark"] #skel-layers-wrapper, html[data-theme="dark"] #main, html[data-theme="dark"] .page-content { background: var(--clug-bg) !important; color: var(--clug-fg) !important; } html[data-theme="dark"] body, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color: var(--clug-fg) !important; } html[data-theme="dark"] a { color: var(--clug-link) !important; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #e8ecf1 !important; } html[data-theme="dark"] .post-meta, html[data-theme="dark"] .post-categories { color: var(--clug-muted) !important; } /* ---- header / nav / dropdowns ---- */ html[data-theme="dark"] #header { background: var(--clug-header-bg) !important; color: var(--clug-fg) !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] #header.alt { background: transparent !important; color: #ffffff !important; } html[data-theme="dark"] #header nav ul li.active > a, html[data-theme="dark"] #header nav ul li:hover > a { background: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .dropotron { background: var(--clug-card-bg) !important; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6) !important; } /* ---- banner / cta / footer ---- */ html[data-theme="dark"] #banner .inner { background: rgba(15, 12, 16, 0.72) !important; } html[data-theme="dark"] #cta { background-color: #232a31 !important; } html[data-theme="dark"] #footer { background: var(--clug-footer-bg) !important; color: var(--clug-muted) !important; } /* ---- content cards ---- */ html[data-theme="dark"] .wrapper.style1 { background: transparent !important; color: var(--clug-fg) !important; } html[data-theme="dark"] .wrapper.style2 { background-color: var(--clug-card2-bg) !important; color: #e6eaef !important; } html[data-theme="dark"] .wrapper.style2 a { color: #8fe0d4 !important; } html[data-theme="dark"] .wrapper.style3, html[data-theme="dark"] .wrapper.style4 { background: var(--clug-card-bg) !important; color: var(--clug-fg) !important; } html[data-theme="dark"] .wrapper.style5 { background-color: #7a4d08 !important; color: #f5ede0 !important; } /* ---- forms ---- */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--clug-input-bg) !important; border-color: var(--clug-border-strong) !important; color: #e6eaef !important; } html[data-theme="dark"] select option { background: #242b32 !important; color: #e6eaef !important; } html[data-theme="dark"] ::placeholder { color: var(--clug-muted) !important; opacity: 1 !important; } /* ---- tables / code / quotes / rules ---- */ html[data-theme="dark"] table.default thead { background: #3a424b !important; color: #fff !important; } html[data-theme="dark"] table.default tbody tr { border-bottom-color: var(--clug-border) !important; } html[data-theme="dark"] code, html[data-theme="dark"] pre { background: var(--clug-input-bg) !important; border-color: var(--clug-border-strong) !important; color: #e6eaef !important; } html[data-theme="dark"] blockquote { border-left-color: var(--clug-border-strong) !important; } html[data-theme="dark"] hr { background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important; } html[data-theme="dark"] header.special:before, html[data-theme="dark"] header.special:after { opacity: 0.25 !important; } /* ---- buttons (keep teal .special; make plain ones readable) ---- */ html[data-theme="dark"] .button, html[data-theme="dark"] input[type="button"], html[data-theme="dark"] input[type="submit"], html[data-theme="dark"] input[type="reset"] { border-color: var(--clug-border-strong) !important; color: #e6eaef !important; } html[data-theme="dark"] .button:hover { background: rgba(255, 255, 255, 0.12) !important; } /* Accent (.special) buttons: Join, archive month pills, etc. * Original light teal (#83d3c9) with white text is 1.7:1 contrast — unreadable. * Unified #2b7f76 (4.8:1) in both modes so white text reads everywhere. */ html[data-theme="light"] .button.special, html[data-theme="light"] input[type="button"].special, html[data-theme="light"] input[type="submit"].special, html[data-theme="light"] input[type="reset"].special, html[data-theme="dark"] .button.special, html[data-theme="dark"] input[type="button"].special, html[data-theme="dark"] input[type="submit"].special, html[data-theme="dark"] input[type="reset"].special { background: #2b7f76 !important; border-color: #2b7f76 !important; color: #ffffff !important; } html[data-theme="light"] .button.special:hover, html[data-theme="light"] input[type="button"].special:hover, html[data-theme="light"] input[type="submit"].special:hover, html[data-theme="light"] input[type="reset"].special:hover, html[data-theme="dark"] .button.special:hover, html[data-theme="dark"] input[type="button"].special:hover, html[data-theme="dark"] input[type="submit"].special:hover, html[data-theme="dark"] input[type="reset"].special:hover { background: #256b63 !important; border-color: #256b63 !important; color: #ffffff !important; } /* White-background special buttons on gray cards — dark-teal text (6.3:1 on white) */ html[data-theme="light"] .wrapper.style2 .button.special, html[data-theme="dark"] .wrapper.style2 .button.special { background: white !important; border-color: white !important; color: #1f6b62 !important; } /* Current-page pill in /blog/all/ pagination (inline teal in markup) */ html[data-theme="light"] #all-pagination span[aria-current="page"], html[data-theme="dark"] #all-pagination span[aria-current="page"] { background: #2b7f76 !important; border-color: #2b7f76 !important; color: #ffffff !important; } /* ---- shared blog control bar ---- */ .blog-controls { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; align-items: center; margin-bottom: 1.5em; padding: 0.8em 1em; border: 1px solid var(--clug-border-strong); border-radius: 6px; background: var(--clug-controls-bg); } .blog-controls label { font-weight: bold; } .blog-controls select, .blog-controls input[type="search"] { padding: 0.4em; border-radius: 4px; border: 1px solid var(--clug-border-strong); background: var(--clug-input-bg); color: inherit; } .blog-controls input[type="search"] { flex: 1 1 200px; max-width: 320px; } .blog-controls .hint { font-size: 0.85em; color: var(--clug-muted); } .blog-controls .stat-line { width: 100%; text-align: center; font-size: 0.9em; color: var(--clug-muted); margin: 0; } html[data-theme="dark"] .blog-controls { background: var(--clug-controls-bg) !important; border-color: var(--clug-border-strong) !important; } /* ---- theme toggle buttons ---- */ .theme-toggle { background: none; border: solid 1px transparent; color: inherit; cursor: pointer; display: inline-block; line-height: 1em; padding: 0.6em 0.75em; font-size: 1em; letter-spacing: 0.075em; text-transform: uppercase; font-family: inherit; } .theme-toggle:hover { background: rgba(188, 202, 206, 0.15); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.12) !important; } .theme-toggle:focus-visible { outline: 2px solid var(--clug-link); outline-offset: 2px; } .theme-toggle .fa { margin-right: 0.4em; } /* ---- floating theme button (bottom-right, icon-only) ---- */ .theme-fab { position: fixed !important; right: 1.2em !important; bottom: 1.2em !important; z-index: 900 !important; width: 3em !important; height: 3em !important; padding: 0 !important; border-radius: 100% !important; border: 1px solid var(--clug-border-strong) !important; background: var(--clug-card-bg) !important; color: var(--clug-fg) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; font-size: 1.1em !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; letter-spacing: normal !important; text-transform: none !important; } .theme-fab:hover { background: var(--clug-controls-bg) !important; transform: translateY(-1px); } .theme-fab .fa { margin: 0 !important; } /* ---- theme toast popup (which mode just activated) ---- */ .theme-toast { position: fixed !important; right: 1.2em !important; bottom: 4.8em !important; z-index: 901 !important; background: #1e2329 !important; color: #e6eaef !important; border: 1px solid #3a424b !important; border-radius: 6px !important; padding: 0.45em 0.9em !important; font-size: 0.85em !important; letter-spacing: 0.05em !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; opacity: 0 !important; transform: translateY(6px) !important; transition: opacity 0.2s ease, transform 0.2s ease !important; pointer-events: none !important; } html[data-theme="light"] .theme-toast { background: #ffffff !important; color: #4a4f55 !important; border-color: #e5e5e5 !important; } .theme-toast.show { opacity: 1 !important; transform: translateY(0) !important; } /* Gentle transition on manual toggle only (JS adds .theme-anim briefly) */ html.theme-anim body, html.theme-anim #header, html.theme-anim #footer, html.theme-anim .wrapper { transition: background-color 0.25s ease, color 0.25s ease; }