/* ===================================================================== Dark theme for geotag.guru --------------------------------------------------------------------- Token-based dark theme. Activates when . The light theme is left untouched in site.css — here we only remap surfaces, text, borders and accents through CSS custom properties. Modern dark-mode canon: no pure black base, elevation via lighter surfaces (not heavy shadows), dimmed text, desaturated/lightened accents for proper contrast. ===================================================================== */ :root { /* color tokens (consumed only under the dark scope below) */ --d-bg: #0f1115; /* page background */ --d-surface: #171a21; /* cards / blocks */ --d-surface-2: #1e222b; /* inputs, secondary panels */ --d-surface-3: #262b35; /* hover / raised chips */ --d-border: #2a2f3a; /* hairlines */ --d-border-strong: #3a414e; --d-text: #d8dce2; /* primary text */ --d-text-2: #9aa4b0; /* secondary / meta */ --d-text-muted: #6b7585; /* muted / disabled */ --d-accent: #4d9fff; /* links / primary */ --d-accent-hover: #7ab6ff; --d-green: #7bc043; --d-green-soft: #8fd455; --d-orange: #ffb049; --d-red: #ff6470; --d-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25); } /* Smooth the switch without janking layout */ html[data-theme="dark"] body, html[data-theme="dark"] .top-menu, html[data-theme="dark"] .under-top, html[data-theme="dark"] .footer, html[data-theme="dark"] .w-block, html[data-theme="dark"] .ask-view-content, html[data-theme="dark"] a { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ---- base ---------------------------------------------------------- */ html[data-theme="dark"], html[data-theme="dark"] body { background: var(--d-bg); color: var(--d-text); } 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"] .ask-view h1, html[data-theme="dark"] .ask-title, html[data-theme="dark"] a.ask-title, html[data-theme="dark"] .user-name, html[data-theme="dark"] .user-name a { color: var(--d-text); } /* ---- links --------------------------------------------------------- */ html[data-theme="dark"] a, html[data-theme="dark"] .action-link, html[data-theme="dark"] .add-link, html[data-theme="dark"] .geo-link, html[data-theme="dark"] .geo-link:hover, html[data-theme="dark"] .t-menu a, html[data-theme="dark"] .show-more-link, html[data-theme="dark"] .blue, html[data-theme="dark"] .booking-link, html[data-theme="dark"] .booking-button { color: var(--d-accent); } html[data-theme="dark"] a:hover, html[data-theme="dark"] .action-link:hover, html[data-theme="dark"] .add-link:hover, html[data-theme="dark"] .t-menu a:hover, html[data-theme="dark"] .show-more-link:hover { color: var(--d-accent-hover); } /* content links that intentionally read as body text */ html[data-theme="dark"] a.content-link, html[data-theme="dark"] a.content-link:hover, html[data-theme="dark"] .front-count a, html[data-theme="dark"] .user-count-value, html[data-theme="dark"] .user-count-value:hover, html[data-theme="dark"] a.ask-title:hover { color: var(--d-text); } /* ---- header / footer ---------------------------------------------- */ html[data-theme="dark"] .top-menu, html[data-theme="dark"] .under-top { background: var(--d-bg); border-bottom-color: var(--d-border); } html[data-theme="dark"] .footer { background: var(--d-surface); border-top-color: var(--d-border); } html[data-theme="dark"] .tag-tab { color: var(--d-accent); } html[data-theme="dark"] .tag-tab:hover { color: var(--d-green-soft); } /* ---- cards & surfaces --------------------------------------------- */ html[data-theme="dark"] .w-block, html[data-theme="dark"] .ask-view-content, html[data-theme="dark"] .ask-search-form, html[data-theme="dark"] .tag-search-form, html[data-theme="dark"] .single-tag-block, html[data-theme="dark"] .site-index .ask-list-view { background: var(--d-surface); box-shadow: var(--d-shadow); border-color: var(--d-border); } html[data-theme="dark"] a.single-tag-block:hover { box-shadow: 0 0 0 1px var(--d-green); } html[data-theme="dark"] .ta-search-form, html[data-theme="dark"] .the-title, html[data-theme="dark"] .front-tabs-mobile, html[data-theme="dark"] .ask-current-answer-block, html[data-theme="dark"] #aa-update, html[data-theme="dark"] .site-description, html[data-theme="dark"] #geo-result { background: var(--d-surface-2); color: var(--d-text); border-color: var(--d-border); } html[data-theme="dark"] .front-tabs a:hover { background-color: var(--d-surface-3); } /* ---- borders / dividers ------------------------------------------- */ html[data-theme="dark"] .info-block, html[data-theme="dark"] .user-info-block, html[data-theme="dark"] .aa-view, html[data-theme="dark"] .answers, html[data-theme="dark"] .ask-comments, html[data-theme="dark"] .t-review, html[data-theme="dark"] .w-search-block, html[data-theme="dark"] #ask-no-answers { border-color: var(--d-border) !important; } /* ---- muted / meta text -------------------------------------------- */ html[data-theme="dark"] .ask-date, html[data-theme="dark"] .time-ago, html[data-theme="dark"] .ask-city, html[data-theme="dark"] .ask-user-city, html[data-theme="dark"] .front-top-city, html[data-theme="dark"] .user-this-is-you, html[data-theme="dark"] .this-is-you, html[data-theme="dark"] .neutral-link, html[data-theme="dark"] .grey, html[data-theme="dark"] .location-stats { color: var(--d-text-2); } html[data-theme="dark"] .row-label, html[data-theme="dark"] .user-icon, html[data-theme="dark"] .ta-single .info-block .fa, html[data-theme="dark"] .ta-view .info-block .fa { color: var(--d-text-muted); } html[data-theme="dark"] .row-label:hover { color: var(--d-text); } html[data-theme="dark"] .ask-user-rate, html[data-theme="dark"] .front-top-rate, html[data-theme="dark"] .single-tag-subscribers, html[data-theme="dark"] .tag-icons, html[data-theme="dark"] .location-stats b { color: var(--d-text-2); } /* ---- accent color helpers ----------------------------------------- */ html[data-theme="dark"] .green, html[data-theme="dark"] .ask-author a, html[data-theme="dark"] .same-questions a.same-ask-title, html[data-theme="dark"] .rate-color, html[data-theme="dark"] .rating-plus, html[data-theme="dark"] .front-count-plus { color: var(--d-green) !important; } html[data-theme="dark"] .red, html[data-theme="dark"] .rating-minus, html[data-theme="dark"] .red-link { color: var(--d-red) !important; } /* tag chips */ html[data-theme="dark"] .tag { background: transparent; border-color: var(--d-green); color: var(--d-green-soft); } html[data-theme="dark"] a.tag:hover { background: var(--d-green); color: #0f1115; } html[data-theme="dark"] .green-link-baidge { border-color: var(--d-green); color: var(--d-green-soft); } /* vote chips */ html[data-theme="dark"] .ask-plus-vote, html[data-theme="dark"] .ask-minus-vote { background-color: var(--d-surface-3); } html[data-theme="dark"] .vote-message-in { background: var(--d-surface-3); color: var(--d-text); } /* ---- forms & inputs ----------------------------------------------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] #ask-current-answer { background-color: var(--d-surface-2); border-color: var(--d-border-strong); color: var(--d-text); } html[data-theme="dark"] .form-control:focus { border-color: var(--d-accent); box-shadow: 0 0 0 2px rgba(77, 159, 255, .25); } html[data-theme="dark"] ::placeholder { color: var(--d-text-muted); } html[data-theme="dark"] .input-for-file { background: var(--d-surface-3); color: var(--d-text); } /* select2 widget */ html[data-theme="dark"] .select2-container--krajee .select2-selection, html[data-theme="dark"] .select2-dropdown { background: var(--d-surface-2); border-color: var(--d-border-strong); color: var(--d-text); } html[data-theme="dark"] .select2-results__option { background: var(--d-surface-2); color: var(--d-text); } html[data-theme="dark"] .select2-results__option--highlighted { background: var(--d-accent) !important; color: #0f1115 !important; } /* ---- buttons ------------------------------------------------------ */ /* Shared button feel: a touch more radius/weight, smooth states, a clear focus ring, and a subtle press. Filled buttons use a bright accent with near-black text for strong contrast (modern dark canon). */ html[data-theme="dark"] .btn { border-radius: 8px; font-weight: 600; border-width: 1px; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .04s ease; } html[data-theme="dark"] .btn:focus, html[data-theme="dark"] .btn:active:focus { outline: none; box-shadow: 0 0 0 3px rgba(77, 159, 255, .35); } html[data-theme="dark"] .btn:active { transform: translateY(1px); } html[data-theme="dark"] .btn.disabled, html[data-theme="dark"] .btn[disabled] { opacity: .45; box-shadow: none; } /* primary action — bright blue */ html[data-theme="dark"] .btn-primary { background-color: var(--d-accent); border-color: var(--d-accent); color: #0f1115; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus { background-color: var(--d-accent-hover); border-color: var(--d-accent-hover); color: #0f1115; } /* main CTA in the header (Войти, Написать) */ html[data-theme="dark"] .btn-success { background-color: var(--d-green); border-color: var(--d-green); color: #0f1115; } html[data-theme="dark"] .btn-success:hover, html[data-theme="dark"] .btn-success:focus { background-color: var(--d-green-soft); border-color: var(--d-green-soft); color: #0f1115; } html[data-theme="dark"] .btn-success:focus { box-shadow: 0 0 0 3px rgba(123, 192, 67, .3); } /* neutral / secondary */ html[data-theme="dark"] .btn-default { background: var(--d-surface-2); border-color: var(--d-border-strong); color: var(--d-text); } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus { background: var(--d-surface-3); border-color: var(--d-border-strong); color: var(--d-text); } /* outline — fills in on hover */ html[data-theme="dark"] .btn-outline-primary { color: var(--d-accent); border-color: var(--d-accent); background: transparent; } html[data-theme="dark"] .btn-outline-primary:hover, html[data-theme="dark"] .btn-outline-primary:focus { color: #0f1115; background: var(--d-accent); border-color: var(--d-accent); } html[data-theme="dark"] .breadcrumb { background: transparent; } html[data-theme="dark"] .breadcrumb > .active, html[data-theme="dark"] .breadcrumb span[itemprop="name"] { color: var(--d-text-2); } html[data-theme="dark"] .alert-info { color: #cfe5ff; background-color: rgba(77, 159, 255, .12); border-color: rgba(77, 159, 255, .3); } html[data-theme="dark"] .error-summary { color: #ffb3b3; background: rgba(255, 100, 112, .08); border-left-color: var(--d-red); } html[data-theme="dark"] .error-summary a { color: var(--d-red); } /* ---- search ------------------------------------------------------- */ html[data-theme="dark"] #search-button { background: var(--d-orange); border-color: var(--d-orange); color: #0f1115; } html[data-theme="dark"] .search-clear { color: var(--d-text-muted); } /* ---- images ------------------------------------------------------- */ /* svg icons already inverted in site.css; nudge toward muted tone */ html[data-theme="dark"] img.svg-icon { filter: invert(72%) sepia(8%) saturate(180%) hue-rotate(180deg) brightness(95%) contrast(88%); } /* highlighted search substring */ html[data-theme="dark"] .sel-str { background: #5a4a1e; color: var(--d-text); }