/* Dark Mode for prosilver All overrides scoped under [data-theme="dark"] on */ /* ------------------------------------------------------- Base colors ------------------------------------------------------- */ html[data-theme="dark"], html[data-theme="dark"] body { color: #d4d4d8; background-color: #1a1a2e; } [data-theme="dark"] h1 { color: #e4e4e7; } [data-theme="dark"] h2 { color: #e4e4e7; } [data-theme="dark"] h3 { border-bottom-color: #2a2a4a; color: #7cb3e0; } [data-theme="dark"] hr { border-color: #2a2a4a; border-top-color: #3a3a5a; } /* ------------------------------------------------------- Links ------------------------------------------------------- */ [data-theme="dark"] a { color: #7cb3e0; } [data-theme="dark"] a:hover { color: #f0a0b8; } [data-theme="dark"] .forumbg .header a, [data-theme="dark"] .forabg .header a, [data-theme="dark"] th a { color: #e4e4e7; } [data-theme="dark"] .forumbg .header a:hover, [data-theme="dark"] .forabg .header a:hover, [data-theme="dark"] th a:hover { color: #a8d8ff; } [data-theme="dark"] .dropdown-extended a.mark_read { background-color: #16213e; } [data-theme="dark"] .postlink { border-bottom-color: #5a9fd4; color: #5a9fd4; } [data-theme="dark"] .postlink:visited { border-bottom-color: #8a7cb8; color: #8a7cb8; } [data-theme="dark"] .postlink:hover { background-color: #1e2d4a; color: #a8d8ff; } [data-theme="dark"] .top i { color: #666680; } [data-theme="dark"] .arrow-left:hover, [data-theme="dark"] .arrow-right:hover { color: #5a9fd4; } /* ------------------------------------------------------- Layout boxes and backgrounds ------------------------------------------------------- */ [data-theme="dark"] .wrap { background-color: #16213e; border-color: #2a2a4a; } [data-theme="dark"] .headerbar { color: #e4e4e7; } [data-theme="dark"] .headerbar, [data-theme="dark"] .forumbg { background-color: #0f3460; background-image: linear-gradient(to bottom, #1a4a7a 0%, #0a2a50 2px, #0f3460 92px, #0f3460 100%); } [data-theme="dark"] .forabg { background-color: #0a2a50; background-image: linear-gradient(to bottom, #1a4a7a 0%, #0f3460 2px, #0a2a50 92px, #0a2a50 100%); } [data-theme="dark"] .navbar { background-color: #1e2d4a; } [data-theme="dark"] .panel { background-color: #1a2540; color: #d4d4d8; } [data-theme="dark"] .post:target .content { color: #e4e4e7; } [data-theme="dark"] .post h3 a.first-unread, [data-theme="dark"] .post:target h3 a { color: #e4e4e7; } [data-theme="dark"] .bg1 { background-color: #1a2540; } [data-theme="dark"] table.zebra-list tr:nth-child(odd) td, [data-theme="dark"] ul.zebra-list li:nth-child(odd) { background-color: #1a2540; } [data-theme="dark"] .bg2 { background-color: #1e2d4a; } [data-theme="dark"] table.zebra-list tr:nth-child(even) td, [data-theme="dark"] ul.zebra-list li:nth-child(even) { background-color: #1e2d4a; } [data-theme="dark"] .bg3 { background-color: #1e2d4a; } [data-theme="dark"] .ucprowbg { background-color: #1a2540; } [data-theme="dark"] .fieldsbg { background-color: #1e2540; } [data-theme="dark"] ul.navlinks { border-top-color: #2a2a4a; } /* ------------------------------------------------------- Tables ------------------------------------------------------- */ [data-theme="dark"] table.table1 thead th { color: #e4e4e7; } [data-theme="dark"] table.table1 tbody tr { border-color: #2a2a4a; } [data-theme="dark"] table.table1 tbody tr:hover, [data-theme="dark"] table.table1 tbody tr.hover { background-color: #1e2d4a; color: #e4e4e7; } [data-theme="dark"] table.table1 td { color: #d4d4d8; } [data-theme="dark"] table.table1 tbody td { border-top-color: #2a2a4a; } [data-theme="dark"] table.table1 tbody th { border-bottom-color: #3a3a5a; color: #d4d4d8; background-color: #16213e; } [data-theme="dark"] table.info tbody th { color: #e4e4e7; } [data-theme="dark"] dl.details dt { color: #e4e4e7; } [data-theme="dark"] dl.details dd { color: #d4d4d8; } [data-theme="dark"] .sep { color: #5a9fd4; } /* ------------------------------------------------------- Icons ------------------------------------------------------- */ [data-theme="dark"] .icon.icon-blue, [data-theme="dark"] a:hover .icon.icon-blue { color: #5a9fd4; } [data-theme="dark"] .icon.icon-green, [data-theme="dark"] a:hover .icon.icon-green { color: #4aba4a; } [data-theme="dark"] .icon.icon-red, [data-theme="dark"] a:hover .icon.icon-red { color: #e06080; } [data-theme="dark"] .icon.icon-orange, [data-theme="dark"] a:hover .icon.icon-orange { color: #ff8844; } [data-theme="dark"] .icon.icon-bluegray, [data-theme="dark"] a:hover .icon.icon-bluegray { color: #8899aa; } [data-theme="dark"] .icon.icon-gray, [data-theme="dark"] a:hover .icon.icon-gray { color: #888899; } [data-theme="dark"] .icon.icon-lightgray, [data-theme="dark"] a:hover .icon.icon-lightgray { color: #666680; } [data-theme="dark"] .icon.icon-black, [data-theme="dark"] a:hover .icon.icon-black { color: #d4d4d8; } [data-theme="dark"] .alert_close .icon:before { background-color: #16213e; } /* Jumpbox */ [data-theme="dark"] .jumpbox .dropdown li { border-top-color: #2a2a4a; } [data-theme="dark"] .jumpbox-cat-link { background-color: #0a2a50; border-top-color: #0a2a50; color: #e4e4e7; } [data-theme="dark"] .jumpbox-cat-link:hover { background-color: #0f3460; border-top-color: #0f3460; color: #e4e4e7; } [data-theme="dark"] .jumpbox-forum-link { background-color: #1e2d4a; } [data-theme="dark"] .jumpbox-forum-link:hover { background-color: #2a3a5a; } [data-theme="dark"] .jumpbox .dropdown .pointer-inner { border-color: #1e2d4a transparent; } [data-theme="dark"] .jumpbox-sub-link { background-color: #1e2d4a; } [data-theme="dark"] .jumpbox-sub-link:hover { background-color: #2a3a5a; } /* ------------------------------------------------------- Misc ------------------------------------------------------- */ [data-theme="dark"] .copyright { color: #8888aa; } [data-theme="dark"] .error { color: #e06080; } [data-theme="dark"] .reported { background-color: #2a1a2a; } [data-theme="dark"] li.reported:hover { background-color: #3a2a3a !important; } [data-theme="dark"] div.rules { background-color: #2a1a2a; color: #e06080; } [data-theme="dark"] p.post-notice { background-color: #2a1a2a; background-image: none; } /* ------------------------------------------------------- Content: forum lists, topics, posts ------------------------------------------------------- */ [data-theme="dark"] ul.forums { background-color: #1a2540; background-image: linear-gradient(to bottom, #1e2d4a 0%, #1a2540 100%); filter: none; } [data-theme="dark"] ul.topiclist li { color: #b0b0c8; } [data-theme="dark"] ul.topiclist dd { border-left-color: #2a2a4a; } [data-theme="dark"] .rtl ul.topiclist dd { border-right-color: #2a2a4a; } [data-theme="dark"] li.row { border-top-color: #2a2a4a; border-bottom-color: #1a1a2e; } [data-theme="dark"] li.row strong { color: #e4e4e7; } [data-theme="dark"] li.row:hover { background-color: #1e2d4a; } [data-theme="dark"] li.row:hover dd { border-left-color: #3a3a5a; } [data-theme="dark"] .rtl li.row:hover dd { border-right-color: #3a3a5a; } [data-theme="dark"] li.header dt, [data-theme="dark"] li.header dd { color: #e4e4e7; } /* Post body */ [data-theme="dark"] .postbody { color: #d4d4d8; } [data-theme="dark"] .content { color: #d4d4d8; } [data-theme="dark"] .content h2, [data-theme="dark"] .panel h2 { color: #7cb3e0; border-bottom-color: #2a2a4a; } [data-theme="dark"] dl.faq dt { color: #e4e4e7; } [data-theme="dark"] .posthilit { background-color: #3a2040; color: #f0a0b8; } [data-theme="dark"] .signature { border-top-color: #2a2a4a; } [data-theme="dark"] .notice { border-top-color: #2a2a4a; } /* Quotes */ [data-theme="dark"] blockquote { background-color: #1a2030; border-color: #2a2a4a; } [data-theme="dark"] blockquote blockquote { background-color: #1e2438; } [data-theme="dark"] blockquote blockquote blockquote { background-color: #1a2030; } /* Code blocks */ [data-theme="dark"] .codebox { background-color: #12122a; border-color: #2a2a4a; } [data-theme="dark"] .codebox p { border-bottom-color: #2a2a4a; } [data-theme="dark"] .codebox code { color: #6abf6a; } /* Attachments */ [data-theme="dark"] .attachbox { background-color: #16213e; border-color: #2a2a4a; } [data-theme="dark"] .pm-message .attachbox { background-color: #1a2540; } [data-theme="dark"] .attachbox dd { border-top-color: #2a2a4a; } [data-theme="dark"] .attachbox p, [data-theme="dark"] .attachbox p.stats { color: #8888aa; } [data-theme="dark"] .attach-image img { border-color: #3a3a5a; } [data-theme="dark"] dl.file dd { color: #8888aa; } [data-theme="dark"] dl.thumbnail img { border-color: #3a3a5a; background-color: #16213e; } [data-theme="dark"] dl.thumbnail dd { color: #8888aa; } [data-theme="dark"] dl.thumbnail dt a:hover { background-color: #1e2d4a; } [data-theme="dark"] dl.thumbnail dt a:hover img { border-color: #5a9fd4; } /* Polls */ [data-theme="dark"] fieldset.polls dl { border-top-color: #2a2a4a; color: #8888aa; } [data-theme="dark"] fieldset.polls dl.voted { color: #e4e4e7; } /* Poster profile */ [data-theme="dark"] .postprofile { color: #8888aa; border-color: #2a2a4a; } [data-theme="dark"] .pm .postprofile { border-color: #2a2a4a; } [data-theme="dark"] .postprofile strong { color: #e4e4e7; } [data-theme="dark"] dd.profile-warnings { color: #e06080; } /* ------------------------------------------------------- Buttons ------------------------------------------------------- */ [data-theme="dark"] .button { border-color: #3a3a5a; background-color: #1e2d4a; background-image: linear-gradient(to bottom, #2a3a5a 0%, #1e2d4a 100%); filter: none; box-shadow: 0 0 0 1px #2a3a5a inset; -webkit-box-shadow: 0 0 0 1px #2a3a5a inset; color: #f0a0b8; } [data-theme="dark"] .button:hover, [data-theme="dark"] .button:focus { border-color: #5a9fd4; background-color: #2a3a5a; background-image: linear-gradient(to bottom, #1e2d4a 0%, #2a3a5a 100%); filter: none; text-shadow: none; } [data-theme="dark"] .button .icon, [data-theme="dark"] .button-secondary { color: #8888aa; } [data-theme="dark"] .button-secondary:focus, [data-theme="dark"] .button-secondary:hover, [data-theme="dark"] .button:focus .icon, [data-theme="dark"] .button:hover .icon { color: #5a9fd4; } [data-theme="dark"] .caret { border-color: #3a3a5a; } [data-theme="dark"] .contact-icons a { border-color: #3a3a5a; } [data-theme="dark"] .contact-icons a:hover { background-color: #1e2d4a; } /* Pagination */ [data-theme="dark"] .pagination li a { background: #1e2d4a; filter: none; border-color: #3a3a5a; box-shadow: none; color: #8899aa; } [data-theme="dark"] .pagination li.ellipsis span { background: transparent; color: #d4d4d8; } [data-theme="dark"] .pagination li.active span { background: #0f3460; border-color: #0f3460; color: #e4e4e7; } [data-theme="dark"] .pagination li a:hover, [data-theme="dark"] .pagination li a:hover .icon, [data-theme="dark"] .pagination .dropdown-visible a.dropdown-trigger, [data-theme="dark"] .nojs .pagination .dropdown-container:hover a.dropdown-trigger { background: #5a9fd4; border-color: #5a9fd4; filter: none; color: #e4e4e7; text-shadow: none; } /* Search box */ [data-theme="dark"] .search-box .inputbox, [data-theme="dark"] .search-box .inputbox:hover, [data-theme="dark"] .search-box .inputbox:focus { border-color: #3a3a5a; } [data-theme="dark"] .search-header { box-shadow: 0 0 10px #0a2a50; } [data-theme="dark"] .search-results li:hover, [data-theme="dark"] .search-results li.active { background-color: #1e2d4a; } /* ------------------------------------------------------- Control panel ------------------------------------------------------- */ [data-theme="dark"] .panel-container h3, [data-theme="dark"] .panel-container hr, [data-theme="dark"] .cp-menu hr { border-color: #2a2a4a; } [data-theme="dark"] .panel-container .panel li.row { border-bottom-color: #2a2a4a; border-top-color: #1a2540; } [data-theme="dark"] ul.cplist { border-top-color: #2a2a4a; } [data-theme="dark"] .panel-container .panel li.header dd, [data-theme="dark"] .panel-container .panel li.header dt { color: #e4e4e7; } [data-theme="dark"] .panel-container table.table1 thead th { color: #d4d4d8; border-bottom-color: #d4d4d8; } [data-theme="dark"] .cp-main .pm-message { border-color: #2a2a4a; background-color: #16213e; } /* CP tabs */ [data-theme="dark"] .tabs .tab > a { background: #1e2d4a; color: #d4d4d8; } [data-theme="dark"] .tabs .tab > a:hover { background: #2a3a5a; color: #f0a0b8; } [data-theme="dark"] .tabs .activetab > a, [data-theme="dark"] .tabs .activetab > a:hover { background-color: #1e2d4a; background-image: linear-gradient(to bottom, #2a3a5a 0%, #1e2d4a 100%); filter: none; border-color: #1e2d4a; box-shadow: 0 1px 1px #2a3a5a inset; color: #e4e4e7; } [data-theme="dark"] .tabs .activetab > a:hover { color: #e4e4e7; } [data-theme="dark"] .minitabs .tab > a { background-color: #1e2d4a; } [data-theme="dark"] .minitabs .activetab > a, [data-theme="dark"] .minitabs .activetab > a:hover { background-color: #16213e; color: #e4e4e7; } [data-theme="dark"] .responsive-tab .responsive-tab-link:before { border-color: #d4d4d8; } [data-theme="dark"] .responsive-tab .responsive-tab-link:hover:before { border-color: #f0a0b8; } /* UCP navigation */ [data-theme="dark"] .navigation a { color: #d4d4d8; background: #1e2d4a; filter: none; } [data-theme="dark"] .rtl .navigation a { background: #1e2d4a; filter: none; } [data-theme="dark"] .navigation a:hover { background: #2a3a5a; color: #f0a0b8; filter: none; } [data-theme="dark"] .navigation .active-subsection a { background: #16213e; color: #f0a0b8; filter: none; } [data-theme="dark"] .panel-container h2 { color: #e4e4e7; } [data-theme="dark"] .panel-container .panel { background-color: #16213e; } [data-theme="dark"] .cp-main .pm { background-color: #16213e; } [data-theme="dark"] .cp-mini { background-color: #1a2540; } [data-theme="dark"] dl.mini dt { color: #8899aa; } /* PM colors */ [data-theme="dark"] .current { color: #e4e4e7 !important; } [data-theme="dark"] .gallery label { background: #16213e; border-color: #2a2a4a; } [data-theme="dark"] .gallery label:hover { background-color: #1e2d4a; } /* ------------------------------------------------------- Forms ------------------------------------------------------- */ [data-theme="dark"] select { border-color: #3a3a5a; background-color: #1e1e3a; color: #d4d4d8; } [data-theme="dark"] label { color: #b0b0c8; } [data-theme="dark"] dd label { color: #d4d4d8; } [data-theme="dark"] fieldset dl:hover dt label { color: #e4e4e7; } [data-theme="dark"] fieldset.quick-login input.inputbox { background-color: #1e1e3a; } [data-theme="dark"] .message-box textarea { color: #d4d4d8; } [data-theme="dark"] .inputbox { background-color: #1e1e3a; border-color: #3a3a5a; color: #d4d4d8; } [data-theme="dark"] .inputbox:hover { border-color: #5a9fd4; } [data-theme="dark"] .inputbox:focus { border-color: #5a9fd4; } /* Form buttons */ [data-theme="dark"] a.button1, [data-theme="dark"] input.button1, [data-theme="dark"] input.button3, [data-theme="dark"] a.button2, [data-theme="dark"] input.button2 { color: #d4d4d8; background-color: #1e2d4a; background-image: linear-gradient(to bottom, #2a3a5a 0%, #1e2d4a 100%); filter: none; } [data-theme="dark"] a.button1, [data-theme="dark"] input.button1 { border-color: #3a3a5a; } [data-theme="dark"] a.button2, [data-theme="dark"] input.button2, [data-theme="dark"] input.button3 { border-color: #3a3a5a; } [data-theme="dark"] a.button1:hover, [data-theme="dark"] input.button1:hover, [data-theme="dark"] a.button2:hover, [data-theme="dark"] input.button2:hover, [data-theme="dark"] input.button3:hover { border-color: #f0a0b8; color: #f0a0b8; background-color: #2a3a5a; background-image: linear-gradient(to bottom, #1e2d4a 0%, #2a3a5a 100%); filter: none; } [data-theme="dark"] input.button1:focus, [data-theme="dark"] input.button2:focus, [data-theme="dark"] input.button3:focus { border-color: #5a9fd4; color: #7cb3e0; } [data-theme="dark"] input.disabled { color: #666680; } /* ------------------------------------------------------- Dropdowns and popups ------------------------------------------------------- */ [data-theme="dark"] .phpbb_alert { background-color: #16213e; border-color: #3a3a5a; } [data-theme="dark"] .dropdown-extended ul li { border-top-color: #2a2a4a; } [data-theme="dark"] .dropdown-extended ul li:hover { background-color: #1e2d4a; color: #e4e4e7; } [data-theme="dark"] .dropdown-extended .header, [data-theme="dark"] .dropdown-extended .footer { border-color: #2a2a4a; color: #e4e4e7; } [data-theme="dark"] .dropdown-extended .header { background-color: #1e2d4a; background-image: linear-gradient(to bottom, #2a3a5a 0%, #1e2d4a 100%); filter: none; } [data-theme="dark"] .dropdown .pointer { border-color: #3a3a5a transparent; } [data-theme="dark"] .dropdown .pointer-inner { border-color: #16213e transparent; } [data-theme="dark"] .dropdown-extended .pointer-inner { border-color: #2a3a5a transparent; } [data-theme="dark"] .dropdown .dropdown-contents { background: #16213e; border-color: #3a3a5a; box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .dropdown-up .dropdown-contents { box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .dropdown li, [data-theme="dark"] .dropdown li li { border-color: #2a2a4a; } [data-theme="dark"] .dropdown li.separator { border-color: #2a2a4a; } /* Notifications */ [data-theme="dark"] .notification_list p.notification-time { color: #8899aa; } [data-theme="dark"] li.notification-reported strong, [data-theme="dark"] li.notification-disapproved strong { color: #f0a0b8; } [data-theme="dark"] .badge { background-color: #d31141; color: #ffffff; } /* ------------------------------------------------------- Spoilers (alfredoramos/simplespoiler) ------------------------------------------------------- */ [data-theme="dark"] details.spoiler { background-color: #1a2030; border-color: #2a2a4a; } [data-theme="dark"] details.spoiler, [data-theme="dark"] .spoiler-header { border-color: #2a2a4a; } [data-theme="dark"] .spoiler-header { background-color: #1e2d4a; color: #d4d4d8; } [data-theme="dark"] details.spoiler[open] > .spoiler-header { border-bottom-color: #2a2a4a; } /* ------------------------------------------------------- Toggle button ------------------------------------------------------- */ .darkmode-toggle { cursor: pointer; background: none; border: none; color: inherit; font-size: 1.2em; padding: 4px 8px; vertical-align: middle; line-height: 1; } .darkmode-toggle:hover { opacity: 0.8; }