/* ========================================================================== Club 306 - Dark Mode Overrides Applied when has class "dark". Follows the same section order as colours.css. ========================================================================== */ /* ---------- Foundation ---------- */ html.dark { color-scheme: dark; } html.dark body { color: #9ca3af; background-color: #111827; } html.dark h2 { color: #e5e7eb; } html.dark h3 { border-bottom-color: #374151; color: #5a9fd9; } html.dark hr { border-color: #374151; border-top-color: #4b5563; } /* ---------- Links ---------- */ html.dark a { color: #5a9fd9; } html.dark a:hover { color: #e7475f; } html.dark .forumbg .header a, html.dark .forabg .header a, html.dark th a { color: #e5e7eb; } html.dark .forumbg .header a:hover, html.dark .forabg .header a:hover, html.dark th a:hover { color: #93c5fd; } html.dark .dropdown-extended a.mark_read { background-color: #1f2937; } html.dark .postlink { border-bottom-color: #3b82f6; color: #3b82f6; } html.dark .postlink:visited { border-bottom-color: #7da8d4; color: #7da8d4; } html.dark .postlink:hover { background-color: #1e3a5f; color: #93c5fd; } html.dark .top i { color: #6b7280; } html.dark .arrow-left:hover, html.dark .arrow-right:hover { color: #3b82f6; } /* ---------- Boxes & Backgrounds ---------- */ html.dark .wrap { background-color: #1f2937; border-color: #374151; } html.dark .forabg, html.dark .forumbg { background-color: #1a2736; box-shadow: 0 0 2px rgba(30, 58, 95, 0.5); } html.dark .navbar { background: #1f2937; } html.dark .navbar-header { border-bottom-color: #374151; } html.dark .panel { background-color: #1a2736; color: #d1d5db; } html.dark .post:target .content { color: #e5e7eb; } html.dark .post h3 a.first-unread, html.dark .post:target h3 a { color: #e5e7eb; } html.dark .bg1 { background-color: #1a2736; } html.dark table.zebra-list tr:nth-child(odd) td, html.dark ul.zebra-list li:nth-child(odd) { background-color: #1a2736; } html.dark .bg2 { background-color: #162230; } html.dark table.zebra-list tr:nth-child(even) td, html.dark ul.zebra-list li:nth-child(even) { background-color: #162230; } html.dark .bg3 { background-color: #1e3040; } html.dark .ucprowbg { background-color: #1e293b; } html.dark .fieldsbg { background-color: #1e293b; } /* ---------- Forum Headers ---------- */ html.dark li.header, html.dark thead { background: linear-gradient(0deg, rgba(0,14,36,1) 0%, rgba(0,30,70,1) 100%); border-bottom-color: #991025; border-top-color: #001e46; box-shadow: inset 0 1px 0 #1a3a6a; } html.dark li.header dl.row-item { background: linear-gradient(352deg, rgba(0,14,36,0) 0%, rgba(255,255,255,0) 81%, rgba(0,38,80,1) 100%); } html.dark li.header::after { border-bottom-color: #991025; } /* ---------- Content Rows ---------- */ html.dark ul.topiclist li { color: #6b7280; } html.dark ul.topiclist dd { border-left-color: #374151; } html.dark li.row { border-color: #2d3a4a; background: #1f2937; } html.dark ul.topiclist li.row:first-child { border-top-color: #2d3a4a; } html.dark li.row strong { color: #e5e7eb; } html.dark li.row:hover { background-color: #243347; } html.dark li.row:hover dd { border-left-color: #4b5563; } /* ---------- Tables ---------- */ html.dark table.table1 tbody tr { border-color: #374151; } html.dark table.table1 tbody tr:hover, html.dark table.table1 tbody tr.hover { background-color: #243347; color: #e5e7eb; } html.dark table.table1 td { color: #9ca3af; } html.dark table.table1 tbody td { border-top-color: #2d3a4a; } html.dark table.table1 tbody th { border-bottom-color: #374151; color: #d1d5db; background-color: #1f2937; } html.dark table.info tbody th { color: #e5e7eb; } /* ---------- Misc layout ---------- */ html.dark dl.details dt { color: #e5e7eb; } html.dark dl.details dd { color: #9ca3af; } html.dark .sep { color: #3b82f6; } /* ---------- Post body ---------- */ html.dark .postbody { color: #d1d5db; } html.dark .content { color: #d1d5db; } html.dark .content h2, html.dark .panel h2 { color: #5a9fd9; border-bottom-color: #374151; } html.dark dl.faq dt { color: #d1d5db; } html.dark .posthilit { background-color: #4a1525; color: #f9a8b8; } /* Post signature */ html.dark .signature { border-top-color: #374151; } html.dark .notice { border-top-color: #374151; } /* ---------- BB Code ---------- */ html.dark blockquote { background-color: #1e2736; border-color: #2d3a4a; } html.dark blockquote blockquote { background-color: #1a2230; } html.dark blockquote blockquote blockquote { background-color: #1e2736; } html.dark .codebox { background-color: #111827; border-color: #374151; } html.dark .codebox p { border-bottom-color: #374151; } html.dark .codebox code { color: #6ee7b7; } /* ---------- Attachments ---------- */ html.dark .attachbox { background-color: #1f2937; border-color: #374151; } html.dark .pm-message .attachbox { background-color: #1a2230; } html.dark .attachbox dd { border-top-color: #374151; } html.dark .attachbox p, html.dark .attachbox p.stats { color: #9ca3af; } html.dark .attach-image img { border-color: #4b5563; } html.dark dl.file dd { color: #9ca3af; } html.dark dl.thumbnail img { border-color: #4b5563; background-color: #111827; } html.dark dl.thumbnail dd { color: #9ca3af; } html.dark dl.thumbnail dt a:hover { background-color: #243347; } html.dark dl.thumbnail dt a:hover img { border-color: #3b82f6; } /* ---------- Polls ---------- */ html.dark fieldset.polls dl { border-top-color: #374151; color: #9ca3af; } html.dark fieldset.polls dl.voted { color: #e5e7eb; } /* ---------- Post profile ---------- */ html.dark .postprofile { color: #9ca3af; border-color: #374151; } html.dark .pm .postprofile { border-color: #374151; } html.dark .postprofile strong { color: #e5e7eb; } html.dark dd.profile-warnings { color: #f87171; } /* ---------- Buttons ---------- */ html.dark .button { border-color: #4b5563; background-color: #2d3a4a; background-image: linear-gradient(to bottom, #374151 0%, #2d3a4a 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset; color: #e7475f; } html.dark .button:hover, html.dark .button:focus { border-color: #3b82f6; background-color: #374151; background-image: linear-gradient(to bottom, #2d3a4a 0%, #374151 100%); text-shadow: none; } html.dark .button .icon, html.dark .button-secondary { color: #9ca3af; } html.dark .button-secondary:focus, html.dark .button-secondary:hover, html.dark .button:focus .icon, html.dark .button:hover .icon { color: #3b82f6; } html.dark .caret { border-color: #4b5563; } html.dark .contact-icons a { border-color: #374151; } html.dark .contact-icons a:hover { background-color: #243347; } /* ---------- Pagination ---------- */ html.dark .pagination li a { background: #2d3a4a; border-color: #4b5563; color: #9ca3af; } html.dark .pagination li.ellipsis span { background: transparent; color: #9ca3af; } html.dark .pagination li.active span { background: #3377c7; border-color: #3377c7; color: #ffffff; } html.dark .pagination li a:hover, html.dark .pagination li a:hover .icon, html.dark .pagination .dropdown-visible a.dropdown-trigger, html.dark .nojs .pagination .dropdown-container:hover a.dropdown-trigger { background: #3377c7; border-color: #3377c7; color: #ffffff; text-shadow: none; } /* ---------- Search box ---------- */ html.dark .search-box .inputbox, html.dark .search-box .inputbox:hover, html.dark .search-box .inputbox:focus { border-color: #4b5563; } html.dark .search-results li:hover, html.dark .search-results li.active { background-color: #243347; } /* ---------- Forms ---------- */ html.dark select { border-color: #4b5563; background-color: #111827; color: #d1d5db; } html.dark label { color: #9ca3af; } html.dark dd label { color: #d1d5db; } html.dark fieldset dl:hover dt label { color: #e5e7eb; } html.dark fieldset.quick-login input.inputbox { background-color: #111827; } html.dark .message-box textarea { color: #d1d5db; } html.dark .inputbox { background-color: #111827; border-color: #4b5563; color: #d1d5db; } html.dark .inputbox:-moz-placeholder { color: #6b7280; } html.dark .inputbox::-webkit-input-placeholder { color: #6b7280; } html.dark .inputbox::placeholder { color: #6b7280; } html.dark .inputbox:hover { border-color: #3b82f6; } html.dark .inputbox:focus { border-color: #3b82f6; } /* ---------- Form buttons ---------- */ html.dark a.button1, html.dark input.button1, html.dark input.button3, html.dark a.button2, html.dark input.button2 { color: #d1d5db; background-color: #2d3a4a; background-image: linear-gradient(to bottom, #374151 0%, #2d3a4a 100%); } html.dark a.button1, html.dark input.button1 { border-color: #4b5563; } html.dark a.button2, html.dark input.button2, html.dark input.button3 { border-color: #4b5563; } html.dark a.button1:hover, html.dark input.button1:hover, html.dark a.button2:hover, html.dark input.button2:hover, html.dark input.button3:hover { border-color: #e7475f; color: #e7475f; background-color: #374151; background-image: linear-gradient(to bottom, #2d3a4a 0%, #374151 100%); } html.dark input.button1:focus, html.dark input.button2:focus, html.dark input.button3:focus { border-color: #3b82f6; color: #93c5fd; } html.dark input.disabled { color: #4b5563; } /* ---------- Dropdowns ---------- */ html.dark .phpbb_alert { background-color: #1f2937; border-color: #4b5563; } html.dark .dropdown-extended ul li { border-top-color: #374151; } html.dark .dropdown-extended ul li:hover { background-color: #243347; color: #e5e7eb; } html.dark .dropdown-extended .header, html.dark .dropdown-extended .footer { border-color: #374151; color: #e5e7eb; } html.dark .dropdown-extended .header { background-color: #1a2736; background-image: linear-gradient(to bottom, #1f2937 0%, #1a2736 100%); } html.dark .dropdown .pointer { border-color: #4b5563 transparent; } html.dark .dropdown .pointer-inner { border-color: #1f2937 transparent; } html.dark .dropdown-extended .pointer-inner { border-color: #1f2937 transparent; } html.dark .dropdown .dropdown-contents { background: #1f2937; border-color: #4b5563; box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4); } html.dark .dropdown-up .dropdown-contents { box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4); } html.dark .dropdown li, html.dark .dropdown li li { border-color: #374151; } html.dark .dropdown li.separator { border-color: #374151; } /* ---------- Jumpbox ---------- */ html.dark .jumpbox .dropdown li { border-top-color: #374151; } html.dark .jumpbox-cat-link { background-color: #1a3a6a; border-top-color: #1a3a6a; color: #e5e7eb; } html.dark .jumpbox-cat-link:hover { background-color: #2454a0; border-top-color: #2454a0; color: #ffffff; } html.dark .jumpbox-forum-link { background-color: #1a2736; } html.dark .jumpbox-forum-link:hover { background-color: #243347; } html.dark .jumpbox .dropdown .pointer-inner { border-color: #1a2736 transparent; } html.dark .jumpbox-sub-link { background-color: #1a2736; } html.dark .jumpbox-sub-link:hover { background-color: #243347; } /* ---------- Notifications ---------- */ html.dark .notification_list p.notification-time { color: #6b7280; } html.dark li.notification-reported strong, html.dark li.notification-disapproved strong { color: #f87171; } /* ---------- Miscellaneous ---------- */ html.dark .copyright { color: #6b7280; } html.dark .error { color: #f87171; } html.dark .reported { background-color: #3b1520; } html.dark li.reported:hover { background-color: #4a1a28 !important; } html.dark div.rules { background-color: #3b1520; color: #f87171; } html.dark p.post-notice { background-color: #3b1520; } /* ---------- CP (Control Panel) ---------- */ html.dark .panel-container h3, html.dark .panel-container hr, html.dark .cp-menu hr { border-color: #374151; } html.dark .panel-container .panel li.row { border-bottom-color: #374151; border-top-color: #2d3a4a; } html.dark ul.cplist { border-top-color: #374151; } html.dark .panel-container table.table1 thead th { color: #d1d5db; border-bottom-color: #4b5563; } html.dark .cp-main .pm-message { border-color: #374151; background-color: #1f2937; } /* CP tabs */ html.dark .tabs .tab > a { background: #1e293b; color: #9ca3af; } html.dark .tabs .tab > a:hover { background: #243347; color: #e7475f; } html.dark .tabs .activetab > a, html.dark .tabs .activetab > a:hover { background-color: #2d3a4a; background-image: linear-gradient(to bottom, #374151 0%, #2d3a4a 100%); border-color: #374151; box-shadow: 0 1px 1px rgba(255,255,255,0.05) inset; color: #d1d5db; } html.dark .tabs .activetab > a:hover { color: #e5e7eb; } html.dark .minitabs .tab > a { background-color: #1e293b; } html.dark .minitabs .activetab > a, html.dark .minitabs .activetab > a:hover { background-color: #1f2937; color: #d1d5db; } /* Responsive tabs */ html.dark .responsive-tab .responsive-tab-link:before { border-color: #9ca3af; } html.dark .responsive-tab .responsive-tab-link:hover:before { border-color: #e7475f; } /* UCP navigation */ html.dark .navigation a { color: #d1d5db; background: #1e293b; background-image: linear-gradient(to right, #1a2230 50%, #1e293b 100%); } html.dark .navigation a:hover { background: #243347; color: #e7475f; } html.dark .navigation .active-subsection a { background: #1f2937; color: #e7475f; } html.dark .navigation .active-subsection a:hover { color: #e7475f; } /* Preferences pane */ html.dark .panel-container h2 { color: #d1d5db; } html.dark .panel-container .panel { background-color: #1f2937; } html.dark .cp-main .pm { background-color: #1f2937; } html.dark .cp-mini { background-color: #1a2230; } html.dark dl.mini dt { color: #9ca3af; } /* Avatar gallery */ html.dark .gallery label { background: #1f2937; border-color: #374151; } html.dark .gallery label:hover { background-color: #243347; } /* ---------- Icon overrides ---------- */ html.dark .icon.icon-gray, html.dark a:hover .icon.icon-gray { color: #9ca3af; } html.dark .icon.icon-lightgray, html.dark a:hover .icon.icon-lightgray { color: #6b7280; } html.dark .icon.icon-black, html.dark a:hover .icon.icon-black { color: #d1d5db; } html.dark .icon.icon-bluegray, html.dark a:hover .icon.icon-bluegray { color: #9ca3af; } html.dark .alert_close .icon:before { background-color: #1f2937; } /* ---------- Horizontal lists ---------- */ html.dark ul.navlinks { border-top-color: #374151; } /* ---------- Loading indicator ---------- */ html.dark .loading_indicator { background-color: rgba(0, 0, 0, 0.8); } /* ---------- Responsive navigation ---------- */ @media only screen and (max-width: 900px) { html.dark #navigation a { background: #1e293b; } }