/* ============================================================ Spokt dark mode A neutral, full-page charcoal canvas with softly elevated panels and a calm dusky-blue accent. Applied when is set by app/javascript/theme.js. ============================================================ */ html.dark { color-scheme: dark; --dk-canvas: #202327; --dk-surface: #292d32; --dk-surface-2: #31363c; --dk-inset: #191c20; --dk-header: #17191c; --dk-text: #edf0f3; --dk-muted: #abb1ba; --dk-faint: #7f8792; --dk-border: #41474f; --dk-border-soft: rgba(255, 255, 255, 0.08); --dk-accent: #8fa9bd; --dk-accent-hover: #b7cad8; background: var(--dk-canvas); } /* Theme toggle: a monochrome half-light / half-dark contrast icon. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin-left: 8px; border: 1px solid #aeb4ba; border-radius: 50%; background: transparent; color: #59636d; position: relative; line-height: 1; text-decoration: none; vertical-align: middle; cursor: pointer; } #header .inner .site-nav .theme-toggle { margin: 20px 15px 0 8px; } .theme-toggle:hover { border-color: currentColor; color: #303841; } .theme-toggle-glyph { display: block; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: none; } /* Full-page canvas. These layers are intentionally explicit: main.css gives #pageWrap a white background later in its cascade. */ html.dark body { background: var(--dk-canvas) !important; color: var(--dk-text) !important; } html.dark body.empty { background: var(--dk-canvas) !important; } html.dark #pageWrap { min-height: 100vh; background: var(--dk-canvas) !important; } html.dark .contentWrap { background: var(--dk-canvas); } html.dark #mainCol { background: var(--dk-canvas); } html.dark #pjax-container { background: var(--dk-canvas); } html.dark .content-wrap { background: var(--dk-canvas) !important; } html.dark .signup-flow-container { background: var(--dk-canvas) !important; } html.dark body.modal { background: var(--dk-canvas) !important; } /* Header and footer frame the charcoal canvas. */ html.dark #headerWrap { background: var(--dk-header) !important; border-bottom-color: var(--dk-border-soft) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03); } html.dark #header { background: var(--dk-header) !important; } html.dark #header .logo { opacity: 0.96; } html.dark .site-nav a { color: var(--dk-muted) !important; text-shadow: none !important; } html.dark .site-nav a:hover, html.dark .site-nav a.current { color: var(--dk-text) !important; } html.dark #footerWrap, html.dark #footerWrap .footerBottom { background: var(--dk-header) !important; } html.dark #footerWrap { border-top: 1px solid var(--dk-border-soft); } html.dark #footerWrap a { color: var(--dk-muted); } html.dark #footerWrap a:hover { color: var(--dk-accent-hover); } html.dark #footerWrap .footerColumn h3 { color: var(--dk-faint) !important; } /* Navigation is now a quiet charcoal surface, not a competing blue block. */ html.dark .leftNav { background: var(--dk-surface) !important; border-color: var(--dk-border-soft) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); } html.dark .leftNav a, html.dark .leftNav span { color: var(--dk-muted) !important; text-shadow: none !important; font-weight: 500; } html.dark .leftNav a:hover, html.dark .leftNav a.linkAdd:hover { color: var(--dk-accent-hover) !important; background: rgba(143, 169, 189, 0.08); } html.dark .leftNav a.linkAdd { color: var(--dk-accent) !important; } html.dark .leftNav li.hubAvatar { background: var(--dk-surface-2) !important; } html.dark .leftNav li.linkBorder { border-color: var(--dk-border-soft) !important; } /* Content panels are only slightly raised from the surrounding canvas. */ html.dark .contentBox { background: var(--dk-surface) !important; border-color: var(--dk-border-soft) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important; } html.dark .contentBoxHeader, html.dark .contentBoxHeaderLink1 { background: var(--dk-surface-2) !important; border-color: var(--dk-border-soft) !important; color: var(--dk-text) !important; } html.dark .contentBoxFooter { border-top-color: var(--dk-border-soft) !important; } html.dark .contentBox .hub-block-title.small-block, html.dark .contentBox .member-list-tools.hub-block-title.small-block { background: var(--dk-surface-2) !important; border-color: var(--dk-border-soft) !important; color: var(--dk-text) !important; } /* Typography and links. */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark strong { color: var(--dk-text); } html.dark p, html.dark label, html.dark li, html.dark td { color: var(--dk-muted); } html.dark a, html.dark .contentBox a { color: var(--dk-accent); } html.dark a:hover, html.dark .contentBox a:hover { color: var(--dk-accent-hover); } html.dark .summaryTitle a, html.dark .txt15 { color: var(--dk-text) !important; } html.dark .summaryTitle a:hover, html.dark .txt15:hover { color: var(--dk-accent-hover) !important; } /* Posts, menus and secondary surfaces. */ html.dark .rowItem, html.dark .buggybox { background: transparent; } html.dark .rowItem.alternateItem { background: rgb(255,255,255,0.1); } html.dark .replyPost, html.dark form.reply_form { border-color: var(--dk-border-soft) !important; } html.dark .postMeta ul.active { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html.dark .postMeta ul.active li { border-bottom-color: var(--dk-border-soft) !important; color: var(--dk-text) !important; } html.dark .postMeta ul.active li:hover { background: var(--dk-surface) !important; } /* Forms and controls use the darker inset tone. */ html.dark input[type=text], html.dark input[type=password], html.dark input[type=email], html.dark input[type=number], html.dark input[type=url], html.dark textarea, html.dark select { background: var(--dk-inset) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; box-shadow: none; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--dk-faint); } html.dark input[type=text]:focus, html.dark input[type=password]:focus, html.dark input[type=email]:focus, html.dark textarea:focus, html.dark select:focus { background: var(--dk-inset) !important; border-color: var(--dk-accent) !important; box-shadow: 0 0 0 2px rgba(143, 169, 189, 0.16); outline: none; } html.dark #mainCol .formHolder h2, html.dark form#login { background: var(--dk-surface) !important; border-color: var(--dk-border-soft) !important; color: var(--dk-text) !important; } html.dark .translucent-form textarea, html.dark .translucent-form input { color: var(--dk-text) !important; } /* Buttons retain semantic green states; neutral controls get charcoal. */ html.dark .big.button:not(.green), html.dark a.button:not(.green), html.dark button:not(.green) { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html.dark .big.button:not(.green):hover, html.dark a.button:not(.green):hover, html.dark button:not(.green):hover { background: #3a4047 !important; border-color: var(--dk-accent) !important; color: var(--dk-accent-hover) !important; } /* Tables, lists, avatars and notices. */ html.dark table th { background: var(--dk-surface-2); border-color: var(--dk-border-soft) !important; color: var(--dk-text) !important; } html.dark table td { border-color: var(--dk-border-soft) !important; } html.dark table tr:hover td { background: rgba(143, 169, 189, 0.06) !important; } html.dark .memberAvatar, html.dark a.remove-card { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-muted) !important; } html.dark .card-row { border-bottom-color: var(--dk-border-soft) !important; } html.dark #head-flash .flash { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html.dark #head-flash .flash .dismiss { color: var(--dk-muted); } html.dark .admin-tool .export-counts, html.dark #mayflower-import .export-counts { border-top-color: var(--dk-border-soft) !important; color: var(--dk-muted); } /* Modern component overrides are here because this file loads last. */ html.dark .tag-input-container, html.dark .tag-input-autocomplete, html.dark dialog.reveal-modal { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html.dark .tag-input-tag { background: rgba(143, 169, 189, 0.12); border-color: rgba(143, 169, 189, 0.32); color: var(--dk-text); } html.dark .tag-input-suggestion:hover, html.dark .tag-input-suggestion.active { background: var(--dk-surface-2); } html.dark dialog.reveal-modal::backdrop { background: rgba(8, 10, 12, 0.78); } html.dark dialog.reveal-modal .close-reveal-modal { color: var(--dk-muted); } html.dark dialog.reveal-modal .close-reveal-modal:hover { color: var(--dk-text); } /* Semantic alerts keep their meaning without introducing a light card. */ html.dark .payment-warning { background: #3a2527 !important; border-color: #82434a !important; } html.dark .payment-warning h1 { background: #8f3943 !important; color: #fff3f3 !important; } html.dark .payment-warning p { color: #e4b8bd !important; } html.dark .payment-warning p.pay-for-hub a { background: #b84a54; color: #fff3f3; } html.dark .payment-warning p.pay-for-hub a:hover { background: #cc5963; } /* Tabs and compact dashboard calendar. */ html.dark .toggleLink, html.dark .toggleLink.selected, html.dark .tab-link, html.dark .tab-link.selected { background: var(--dk-surface-2) !important; border-color: var(--dk-border-soft) !important; text-shadow: none !important; } html.dark .contentBox .toggleLink a, html.dark .contentBox a.tab-link { color: var(--dk-accent) !important; } html.dark .toggleLink.selected, html.dark .tab-link.selected { box-shadow: inset 0 -2px 0 var(--dk-accent); } html.dark body.calendar .contentBox { background: var(--dk-surface) !important; } html.dark .calendar-holder, html.dark .calendar-month, html.dark .small-calendar.calendar-month { background: var(--dk-surface) !important; border-color: var(--dk-border-soft) !important; } html.dark .day, html.dark .small-calendar.calendar-month .day { background: var(--dk-surface) !important; border-color: var(--dk-border-soft) !important; color: var(--dk-muted) !important; } html.dark .day:hover { background: var(--dk-surface-2) !important; } html.dark .day.next-month, html.dark .day.previous-month { background: #24282d !important; } html.dark .day.day-name { background: var(--dk-inset) !important; color: var(--dk-text) !important; } html.dark .day.day-name:hover { background: var(--dk-inset) !important; } html.dark .small-calendar .day-number { color: var(--dk-muted); } html.dark .day a.new-event { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-accent); } html.dark .year-month-picker { background: var(--dk-surface-2); border-color: var(--dk-border); } html.dark img { opacity: 0.96; } html.dark .theme-toggle { background: transparent; border-color: var(--dk-border) !important; color: var(--dk-muted); } html.dark .theme-toggle:hover { border-color: var(--dk-accent) !important; color: var(--dk-accent-hover); } html.dark ::-webkit-scrollbar { background: var(--dk-canvas); } html.dark ::-webkit-scrollbar-thumb { background: var(--dk-border); border: 2px solid var(--dk-canvas); border-radius: 8px; } html.dark ::-webkit-scrollbar-thumb:hover { background: var(--dk-faint); }