@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap'); /* ========================================================== ADC — FULL DARK WINTER MODE (override) File: /css/adc-winter-dark.css Activate with: Load AFTER: adc.css ========================================================== */ html[data-theme="winter-dark"] { /* Core winter palette - metallic dark silver */ --wd-bg0: #3b3e42; /* metallic dark silver */ --wd-bg1: #4a4e54; /* brushed silver grey */ --wd-surface: #565b63; /* card/panel surface */ --wd-surface2: #626770; /* elevated silver surface */ --wd-surface3: #2f3136; /* deepest metallic surface */ --wd-border: #3f4247; /* matched grey sample border */ --wd-border2: rgba(63, 66, 71, 0.60); --wd-text: rgba(255,255,255,0.95); --wd-muted: rgba(255,255,255,0.75); --wd-link: #dbe2e9; /* light silver link */ --wd-link2: #ffffff; /* white hover link */ --wd-ice: #f0f3f6; /* bright silver highlight */ --wd-gold: #f3d38a; --wd-red: #b01214; /* festive red accent */ --wd-green: #1e7a4a; --wd-shadow: 0 12px 30px rgba(0,0,0,0.30); --wd-glow: 0 0 14px rgba(255,255,255,0.25); color-scheme: dark; } /* -------------------------- Base page -------------------------- */ html[data-theme="winter-dark"] body { font-weight: 500; /* Keep your font/size */ font-family: 'Inter', Helvetica, Arial, sans-serif !important; font-size: 12.1px; background: radial-gradient(1200px 700px at 15% -10%, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(1000px 700px at 95% 0%, rgba(255, 255, 255, 0.03), transparent 55%), radial-gradient(900px 600px at 50% 120%, rgba(243, 211, 138, 0.04), transparent 60%), linear-gradient(180deg, var(--wd-bg0) 0%, var(--wd-bg1) 100%); color: var(--wd-text); overflow-x: hidden; } /* Default text in common containers */ html[data-theme="winter-dark"] .outer, html[data-theme="winter-dark"] .fancy-container, html[data-theme="winter-dark"] div.news, html[data-theme="winter-dark"] div.news-body, html[data-theme="winter-dark"] div.pm, html[data-theme="winter-dark"] div.pm-container, html[data-theme="winter-dark"] div.box, html[data-theme="winter-dark"] div.comment, html[data-theme="winter-dark"] div.comment_div, html[data-theme="winter-dark"] #content_child, html[data-theme="winter-dark"] .forum, html[data-theme="winter-dark"] .forum_menu, html[data-theme="winter-dark"] .forum_main { color: var(--wd-text); } /* -------------------------- Links -------------------------- */ html[data-theme="winter-dark"] a:link, html[data-theme="winter-dark"] a:visited { color: var(--wd-link); } html[data-theme="winter-dark"] a:hover { color: var(--wd-link2); text-shadow: var(--wd-glow); } /* Keep your underline behavior where defined in adc.css */ html[data-theme="winter-dark"] a { outline: 0; } /* -------------------------- Borders / HR -------------------------- */ html[data-theme="winter-dark"] hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--wd-border), transparent); opacity: 0.9; } /* -------------------------- Logo header area (keeps your header image; darkens with overlay; adds lights + snowcap) -------------------------- */ html[data-theme="winter-dark"] div.logo { background: none !important; position: relative; overflow: hidden; height: 104px !important; } html[data-theme="winter-dark"] div.logo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; background: url(/images/adcheader_dark.png) top center no-repeat #3f4247 !important; z-index: 1; } html[data-theme="winter-dark"] div.logo::after { display: none !important; } /* logo text brighter + above overlays */ html[data-theme="winter-dark"] div.logo-text { position: absolute !important; bottom: 2px !important; top: auto !important; width: 100%; text-align: center; color: rgba(255,255,255,0.96); text-shadow: 0 2px 10px rgba(0,0,0,0.75); z-index: 3; } /* -------------------------- Navigation (your selector: div.navigation) -------------------------- */ html[data-theme="winter-dark"] div.navigation { position: relative; background: rgba(255,255,255,0.06); border-bottom: 1px solid var(--wd-border); } html[data-theme="winter-dark"] div.navigation a { color: rgba(255,255,255,0.90); } html[data-theme="winter-dark"] div.navigation a:hover { color: var(--wd-link2); text-shadow: var(--wd-glow); } /* subtle candy stripe accent under nav */ html[data-theme="winter-dark"] div.navigation::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; pointer-events: none; background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.75) 0 8px, rgba(255,255,255,0.75) 8px 10px, rgba(176,18,20,0.75) 10px 18px, rgba(176,18,20,0.75) 18px 20px ); opacity: 0.65; } /* -------------------------- Headers / table heads / “ADC red blocks” You use #840001 in: th, .header, table heads, etc. We replace with winter navy + icy edge glow. -------------------------- */ html[data-theme="winter-dark"] th, html[data-theme="winter-dark"] .header, html[data-theme="winter-dark"] .pages .currentpage, html[data-theme="winter-dark"] .pages a:hover, html[data-theme="winter-dark"] .torrenttable thead th, html[data-theme="winter-dark"] .requesttable thead th, html[data-theme="winter-dark"] #searchtable thead th, html[data-theme="winter-dark"] td.colhead, html[data-theme="winter-dark"] table.smalltable th, html[data-theme="winter-dark"] table.alternate th, html[data-theme="winter-dark"] .searchtable-container h4 { background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent 35%), linear-gradient(90deg, #484d54 0%, #5e646d 50%, #484d54 100%); color: #fff; border-color: rgba(255,255,255,0.22); text-shadow: 0 1px 0 rgba(0,0,0,0.45); } /* -------------------------- Core containers become dark surfaces -------------------------- */ html[data-theme="winter-dark"] .outer { background: rgba(74, 78, 84, 0.85); border: 1px solid var(--wd-border); box-shadow: var(--wd-shadow); } html[data-theme="winter-dark"] .fancy-container, html[data-theme="winter-dark"] div.news, html[data-theme="winter-dark"] div.pm, html[data-theme="winter-dark"] div.box, html[data-theme="winter-dark"] #preview_area fieldset, html[data-theme="winter-dark"] #simplemodal-container, html[data-theme="winter-dark"] div.alerts, html[data-theme="winter-dark"] div.spoiler div.spoilerbox { background: rgba(86, 91, 99, 0.80); border: 1px solid var(--wd-border); box-shadow: 0 8px 22px rgba(0,0,0,0.30); } html[data-theme="winter-dark"] div.news-body, html[data-theme="winter-dark"] div.pm-container, html[data-theme="winter-dark"] .forum_main, html[data-theme="winter-dark"] .forum_menu, html[data-theme="winter-dark"] div.comment, html[data-theme="winter-dark"] td.comm-avatar, html[data-theme="winter-dark"] td.comm-body, html[data-theme="winter-dark"] #content_child { background: rgba(47, 49, 54, 0.85); border: 1px solid var(--wd-border2); } /* Fancy rows separators */ html[data-theme="winter-dark"] .fancy-container .fancy-row { border-bottom: 1px solid var(--wd-border2); } /* -------------------------- Tables (global + specific variants you use) -------------------------- */ html[data-theme="winter-dark"] table { background: rgba(47, 49, 54, 0.85); color: var(--wd-text); border-color: var(--wd-border); } /* default cell borders */ html[data-theme="winter-dark"] td, html[data-theme="winter-dark"] th { border-color: var(--wd-border); } /* Torrent table zebra (you use odd background) */ html[data-theme="winter-dark"] .torrenttable tbody tr:nth-child(odd) { background: rgba(255,255,255,0.04); } html[data-theme="winter-dark"] .torrenttable tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); } html[data-theme="winter-dark"] .torrenttable tbody tr:hover td { background: rgba(255, 255, 255, 0.06); } /* Alternate tables */ html[data-theme="winter-dark"] table.alternate tr.rowA, html[data-theme="winter-dark"] table.alternate tr.rowB { background: rgba(255,255,255,0.03); } html[data-theme="winter-dark"] table.alternate tr td { color: var(--wd-text); border-bottom: 1px solid var(--wd-border2); } /* Small tables */ html[data-theme="winter-dark"] table.smalltable td { background: rgba(255,255,255,0.03); color: var(--wd-text); border-bottom: 1px solid var(--wd-border2); } /* Clean tables */ html[data-theme="winter-dark"] table.clean { border-color: var(--wd-border); } html[data-theme="winter-dark"] table.clean td, html[data-theme="winter-dark"] table.clean th { border-bottom: 1px solid var(--wd-border2); } /* Peers table (your peers-table forces color #000; override it) */ html[data-theme="winter-dark"] table.peers-table td, html[data-theme="winter-dark"] table.peers-table th { color: var(--wd-text) !important; background: none; } html[data-theme="winter-dark"] table.peers-table td { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; } html[data-theme="winter-dark"] table.peers-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; } html[data-theme="winter-dark"] table.peers-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.02) !important; } /* -------------------------- Search table container (you have strong red borders) -------------------------- */ html[data-theme="winter-dark"] .searchtable-container { background: rgba(86, 91, 99, 0.75); border-color: rgba(255, 255, 255, 0.20) !important; } html[data-theme="winter-dark"] .searchtable-container h4 { border-color: rgba(255, 255, 255, 0.20) !important; } html[data-theme="winter-dark"] .searchtable tr th { border-color: rgba(255, 255, 255, 0.15) !important; } /* -------------------------- Buttons + “modern” buttons/inputs -------------------------- */ html[data-theme="winter-dark"] .btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 16px rgba(0,0,0,0.25); } html[data-theme="winter-dark"] .btn:hover, html[data-theme="winter-dark"] .btn.active { background: rgba(255, 255, 255, 0.16); color: #ffffff !important; text-shadow: var(--wd-glow); } /* Modern buttons/inputs (your button.modern and input.modern) */ html[data-theme="winter-dark"] button.modern, html[data-theme="winter-dark"] input.modern { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: var(--wd-text); } html[data-theme="winter-dark"] button.modern:hover, html[data-theme="winter-dark"] input.modern:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } /* -------------------------- Inputs -------------------------- */ html[data-theme="winter-dark"] input, html[data-theme="winter-dark"] select, html[data-theme="winter-dark"] textarea { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--wd-text); } html[data-theme="winter-dark"] input::placeholder, html[data-theme="winter-dark"] textarea::placeholder { color: rgba(255,255,255,0.55); } html[data-theme="winter-dark"] input:focus, html[data-theme="winter-dark"] select:focus, html[data-theme="winter-dark"] textarea:focus { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 1px; border-color: rgba(255, 255, 255, 0.45); } /* -------------------------- Checkboxes / radios (you customized appearance) -------------------------- */ html[data-theme="winter-dark"] input[type='checkbox'], html[data-theme="winter-dark"] input[type='radio'] { filter: none; /* remove grayscale */ border: 1px solid rgba(255,255,255,0.30); background-color: rgba(255,255,255,0.08); } html[data-theme="winter-dark"] input[type='checkbox']:checked, html[data-theme="winter-dark"] input[type='radio']:checked { background: rgba(255, 255, 255, 0.60); border: 1px solid rgba(0,0,0,0.45); } /* -------------------------- Tooltip (your tooltip top uses light background) -------------------------- */ html[data-theme="winter-dark"] .tooltip .top { background-color: rgba(47, 49, 54, 0.95); color: var(--wd-text); border: 1px solid rgba(255,255,255,0.20); box-shadow: 0 12px 25px rgba(0,0,0,0.50); } html[data-theme="winter-dark"] .tooltip .top i::after { background-color: rgba(47, 49, 54, 0.95); } /* -------------------------- Blockquotes -------------------------- */ html[data-theme="winter-dark"] blockquote { background: rgba(255,255,255,0.06); border-left: 5px solid rgba(255, 255, 255, 0.30); color: var(--wd-text); } /* -------------------------- Footer -------------------------- */ html[data-theme="winter-dark"] div.footer { color: rgba(255,255,255,0.92); } html[data-theme="winter-dark"] div.footer a:link, html[data-theme="winter-dark"] div.footer a:visited { color: var(--wd-link2); } html[data-theme="winter-dark"] div.footer a:hover { color: var(--wd-ice); text-shadow: var(--wd-glow); } /* -------------------------- Optional: CSS-only snowfall overlay -------------------------- */ html[data-theme="winter-dark"] body { font-weight: 500; position: relative; } html[data-theme="winter-dark"] body::before, html[data-theme="winter-dark"] body::after { content: ""; pointer-events: none; position: fixed; inset: -20vh -10vw; z-index: 999999; opacity: 0.18; mix-blend-mode: screen; } /* small flakes */ html[data-theme="winter-dark"] body::before { background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.90) 0 1px, transparent 2px), radial-gradient(circle at 30% 80%, rgba(255,255,255,0.65) 0 1px, transparent 2px), radial-gradient(circle at 60% 40%, rgba(255,255,255,0.75) 0 1px, transparent 2px), radial-gradient(circle at 85% 60%, rgba(255,255,255,0.55) 0 1px, transparent 2px); background-size: 260px 260px; animation: adcSnowFall 16s linear infinite; } /* bigger flakes */ html[data-theme="winter-dark"] body::after { opacity: 0.12; background-image: radial-gradient(circle at 15% 30%, rgba(255,255,255,0.75) 0 2px, transparent 3px), radial-gradient(circle at 45% 10%, rgba(255,255,255,0.60) 0 2px, transparent 3px), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.65) 0 2px, transparent 3px), radial-gradient(circle at 90% 35%, rgba(255,255,255,0.55) 0 2px, transparent 3px); background-size: 420px 420px; animation: adcSnowFall 26s linear infinite; } @keyframes adcSnowFall { from { transform: translate3d(0, -8vh, 0); } to { transform: translate3d(0, 18vh, 0); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { html[data-theme="winter-dark"] body::before, html[data-theme="winter-dark"] body::after { animation: none !important; } } /* Revert Footer styling back to original Arial/Helvetica stack */ div.footer, .footer, div.footer span, .footer span { font-family: Helvetica, Arial, sans-serif !important; } /* User Custom Dark Mode Adjustments */ html[data-theme="winter-dark"] div.logo { filter: none !important; } html[data-theme="winter-dark"] div.logo-text, html[data-theme="winter-dark"] #theme-toggle-btn { position: relative; z-index: 2; filter: none !important; } html[data-theme="winter-dark"] body::before, html[data-theme="winter-dark"] body::after { animation: none !important; display: none !important; } html[data-theme="winter-dark"] .supporter-line, html[data-theme="winter-dark"] .supporter-line a, html[data-theme="winter-dark"] .supporter-line a b { color: #ffffff !important; } html[data-theme="winter-dark"] div.navigation::after { display: none !important; } html[data-theme="winter-dark"] div.navigation { border-bottom: 1px solid #ffffff !important; } html[data-theme="winter-dark"] hr { background: #ffffff !important; opacity: 0.8 !important; } html[data-theme="winter-dark"] table, html[data-theme="winter-dark"] td, html[data-theme="winter-dark"] th, html[data-theme="winter-dark"] .fancy-container, html[data-theme="winter-dark"] .fancy-container .fancy-row { border-color: #3f4247 !important; } html[data-theme="winter-dark"] .menu-left img, html[data-theme="winter-dark"] .menu-right img, html[data-theme="winter-dark"] .navigation img { filter: invert(1) brightness(2) !important; } html[data-theme="winter-dark"] img[class*="cat-"] { filter: grayscale(1) brightness(0.65) contrast(1.1) !important; } /* UHD and stream format icons to white, keep Blu-ray bd.svg original color */ html[data-theme="winter-dark"] td img[src*="uhd.svg"], html[data-theme="winter-dark"] td img[src*="stream.svg"] { filter: invert(1) brightness(2) !important; } html[data-theme="winter-dark"] td img[src*="bd.svg"] { filter: none !important; } /* Golden and Silver chest promo icons to original color */ html[data-theme="winter-dark"] td img[src*="golden.gif"], html[data-theme="winter-dark"] td img[src*="silver.gif"] { filter: none !important; } /* Pagination Overrides - Changing Red to Light Blue */ html[data-theme="winter-dark"] .pagination .no-decoration, html[data-theme="winter-dark"] .ip-pag .ip-nd { background-color: var(--wd-link) !important; color: var(--wd-bg0) !important; border-color: var(--wd-link) !important; } html[data-theme="winter-dark"] .pagination a.no-decoration:hover, html[data-theme="winter-dark"] .ip-pag a.ip-nd:hover { background-color: var(--wd-link2) !important; color: var(--wd-bg0) !important; border-color: var(--wd-link2) !important; } html[data-theme="winter-dark"] .ip-left a { background-color: transparent !important; border: 1px solid var(--wd-link) !important; color: var(--wd-link) !important; } html[data-theme="winter-dark"] .ip-left a[style*="background:#840001"], html[data-theme="winter-dark"] .ip-left a[style*="background-color:#840001"], html[data-theme="winter-dark"] .ip-left a[style*="background: #840001"] { background-color: var(--wd-link) !important; color: var(--wd-bg0) !important; border-color: var(--wd-link) !important; } html[data-theme="winter-dark"] .ip-left a:hover { background-color: var(--wd-link2) !important; color: var(--wd-bg0) !important; border-color: var(--wd-link2) !important; } html[data-theme="winter-dark"] table.statstable td.figure { background: rgba(0, 0, 0, 0.25) !important; } /* EasyMDE / CodeMirror dark theme styling overrides */ html[data-theme="winter-dark"] .editor-toolbar { background: rgba(86, 91, 99, 0.90) !important; border-color: rgba(255, 255, 255, 0.16) !important; } html[data-theme="winter-dark"] .editor-toolbar button { color: rgba(255, 255, 255, 0.90) !important; } html[data-theme="winter-dark"] .editor-toolbar button:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.25) !important; } html[data-theme="winter-dark"] .editor-toolbar button.active, html[data-theme="winter-dark"] .editor-toolbar button:active { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; } html[data-theme="winter-dark"] .editor-toolbar i.separator { border-left-color: rgba(255, 255, 255, 0.16) !important; } html[data-theme="winter-dark"] .CodeMirror, html[data-theme="winter-dark"] .CodeMirror-sided, html[data-theme="winter-dark"] .editor-preview-active-side { background: rgba(47, 49, 54, 0.90) !important; color: rgba(255, 255, 255, 0.90) !important; border-color: rgba(255, 255, 255, 0.16) !important; } html[data-theme="winter-dark"] .CodeMirror-cursor { border-left: 1px solid #ffffff !important; } html[data-theme="winter-dark"] .CodeMirror-selected { background: rgba(255, 255, 255, 0.15) !important; } html[data-theme="winter-dark"] .editor-preview { background: rgba(47, 49, 54, 0.95) !important; color: rgba(255, 255, 255, 0.90) !important; }