/* ============================================================= proSilver Dark Mode — swiatpilki.com edition Użycie: ============================================================= */ /* ── Paleta (zmienne) ─────────────────────────────────────── */ body.darkmode { --dm-bg-page: #121212; --dm-bg-body: #1e1e1e; --dm-bg-content: #2a2a2a; --dm-bg-alt: #404040; --dm-bg-header: #0f2c3b; --dm-bg-navbar: #252525; --dm-bg-panel: #252525; --dm-bg-input: #2c2c2c; --dm-bg-input-focus: #3a3a3a; --dm-bg-button: #2c2c2c; --dm-bg-button-hover:#484848; --dm-bg-quote: #4a4a4a; --dm-bg-code: #111111; --dm-bg-footer: #1a1a1a; --dm-bg-thead: #0f2c3b; --dm-bg-sticky: #2f3b2a; --dm-bg-announce: #2a3a3a; --dm-bg-global-ann: #2c2e3a; --dm-bg-unread: #2a3a4a; --dm-bg-dropdown: #252525; --dm-bg-forabg: #252525; --dm-border: #626262; --dm-border-strong: #4a4a4a; --dm-border-header: #3e3e3e; --dm-border-forabg: #2c3e3e; --dm-border-post: #3f3f3f; --dm-border-profile: #3a3a3a; --dm-border-quote: #121212; --dm-border-footer: #2c2c2c; --dm-text-primary: #dddddd; --dm-text-body: #e0e0e0; --dm-text-post: #ececec; --dm-text-profile: #bbbbbb; --dm-text-header: #c4e0f4; --dm-text-muted: #888888; --dm-text-panel-h3: #f0f0f0; --dm-link: #83b149; --dm-link-hover: #e0e0e0; --dm-icon: #999999; --dm-accent: #3a6ea5; --dm-accent-border: #5a8ab5; --dm-success-text: #99cc99; --dm-error-text: #ffaa99; --dm-highlight-bg: #5a5a2a; --dm-highlight-text: #ffffbb; --dm-progress-bar: #2a6a6a; } /* ── Reset / body ─────────────────────────────────────────── */ body.darkmode, body.darkmode html { background-color: var(--dm-bg-page) !important; color: var(--dm-text-body) !important; } body.darkmode { background-color: var(--dm-bg-body); color: var(--dm-text-primary); } /* ── Wrapper ──────────────────────────────────────────────── */ body.darkmode .wrap, body.darkmode #wrap, body.darkmode .wrapper { /* background-color: var(--dm-bg-body); */ } /* ── Nagłówek ─────────────────────────────────────────────── */ body.darkmode .headerbar { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://swiatpilki.com/styles/sp4/theme/images/header-bg-1.jpg") no-repeat left center, url("https://swiatpilki.com/styles/sp4/theme/images/header-bg-3.jpg") no-repeat right center, url("https://swiatpilki.com/styles/sp4/theme/images/header-bg-2.jpg") repeat center center; background-color: var(--dm-bg-header); border-bottom: 1px solid var(--dm-border-header); color: var(--dm-text-header); } body.darkmode .headerbar a, body.darkmode .headerbar a:link, body.darkmode .headerbar a:visited { color: var(--dm-text-header); } body.darkmode .site-title a:visited { color: var(--dm-text-body); } /* ── Navbar ───────────────────────────────────────────────── */ body.darkmode .navbar { background-color: var(--dm-bg-navbar); border-color: var(--dm-border-header) !important; } body.darkmode .navbar a, body.darkmode .navbar a:link, body.darkmode .navbar a:visited { color: var(--dm-link); } body.darkmode .navbar a:hover { color: var(--dm-link-hover); } body.darkmode .navbar .sub-navbar-dropbtn { color: var(--dm-link); } body.darkmode .stat-block, body.darkmode #page-header .navbar, body.darkmode #page-footer .navbar { background-color: var(--dm-bg-navbar); border-color: var(--dm-border); } body.darkmode .navbar#main-nav2 { background-color: var(--dm-bg-page); } body.darkmode .navbar .badge { background: none; border-color: var(--dm-link); color: var(--dm-text-primary); } /* ── Forum / kategorie ────────────────────────────────────── */ body.darkmode .forabg, body.darkmode .forumbg { background-color: var(--dm-bg-forabg); border-color: var(--dm-border-forabg); } body.darkmode .forabg .inner, body.darkmode .forumbg .inner { background-color: var(--dm-bg-forabg); } body.darkmode .topiclist thead tr, body.darkmode .forabg thead tr, body.darkmode .forumbg thead tr { background-color: var(--dm-bg-thead); color: var(--dm-text-header); } body.darkmode .topiclist thead tr a, body.darkmode .forabg thead tr a, body.darkmode .forumbg thead tr a { color: var(--dm-text-header); } body.darkmode ul.topiclist li { border-color: var(--dm-border); color: var(--dm-text-primary); } body.darkmode ul.topiclist dd { border-left-color: var(--dm-border); color: var(--dm-text-primary); } body.darkmode .topiclist.forums, body.darkmode .topiclist.topics { border-top: var(--dm-bg-page); background-color: var(--dm-bg-page); } /* ── recent topics box ──────────────────────────────────────────────── */ body.darkmode #recent-topics-box li.row:hover { background: var(--dm-bg-alt); } body.darkmode #recent-topics-box li.row.rt_unread { background: var(--dm-bg-alt); } body.darkmode #recent-topics-box li.row.rt_unread:hover { background: var(--dm-bg-alt); } /* ── best comments ──────────────────────────────────────────────── */ body.darkmode .best_comments_tabs { background-color: var(--dm-bg-content); } body.darkmode .best_comments_tabs button.active { background-color: var(--dm-bg-alt); } body.darkmode .best_comments_tabs button:hover { background-color: var(--dm-bg-alt); } /* ── Wiersze ──────────────────────────────────────────────── */ body.darkmode .topiclist li.row { background-color: var(--dm-bg-forabg); border-bottom-color: var(--dm-border-forabg); border-top-color: var(--dm-border-forabg); } body.darkmode .topiclist li.row:hover { background-color: var(--dm-bg-alt); } body.darkmode .bg1, body.darkmode .post.bg1, body.darkmode .row.bg1 { background-color: var(--dm-bg-content); } body.darkmode .bg2, body.darkmode .post.bg2, body.darkmode .row.bg2 { /* background-color: var(--dm-bg-alt); */ } body.darkmode .bg3 { background-color: var(--dm-border); } body.darkmode .sticky { background-color: var(--dm-bg-sticky); } body.darkmode .announce, body.darkmode .announcement { background-color: var(--dm-bg-announce); } body.darkmode .global-announce { background-color: var(--dm-bg-global-ann); } body.darkmode .row.unread { background-color: var(--dm-bg-alt); } body.darkmode #livescore_wyn iframe { filter: invert(0.9) hue-rotate(.6turn); } /* ── Posty ────────────────────────────────────────────────── */ body.darkmode .post { background-color: var(--dm-bg-content); border-color: var(--dm-border-post) !important; } body.darkmode .postbody, body.darkmode .postbody .content { color: var(--dm-text-post); } body.darkmode .postbody p.author { color: var(--dm-text-post); } body.darkmode .postbody .signature { border-top-color: var(--dm-border); } body.darkmode .icon { color: var(--dm-icon); } body.darkmode .postprofile { color: var(--dm-text-profile); border-color: var(--dm-border); } body.darkmode .leftsided .bg1 .postprofile { border-right-color: var(--dm-border); } body.darkmode .leftsided .bg2 .postprofile { border-right-color: var(--dm-border); } body.darkmode .postprofile strong { color: var(--dm-text-post); } body.darkmode .postprofile .profile-best-comment { background: none; } body.darkmode .postprofile a, body.darkmode .postprofile a:link, body.darkmode .postprofile a:visited { color: var(--dm-link); } body.darkmode .signature img { /* filter: grayscale(1) brightness(100%) invert(1)!important; */ } /* ── Panel ────────────────────────────────────────────────── */ body.darkmode .panel { background-color: var(--dm-bg-panel); border-color: var(--dm-border); color: var(--dm-text-primary); } body.darkmode .panel h3 { color: var(--dm-text-panel-h3); } /* ── Przyciski ────────────────────────────────────────────── */ body.darkmode .button, body.darkmode .button1, body.darkmode .button2, body.darkmode .button3, body.darkmode input[type="submit"], body.darkmode input[type="button"], body.darkmode input[type="reset"], body.darkmode .button-search { background-color: var(--dm-bg-button) !important; border-color: var(--dm-border-strong) !important; color: var(--dm-text-body) !important; } body.darkmode .button:hover, body.darkmode .button1:hover, body.darkmode .button2:hover, body.darkmode .button3:hover, body.darkmode input[type="submit"]:hover { background-color: var(--dm-accent) !important; border-color: var(--dm-accent-border) !important; color: #ffffff !important; } body.darkmode a.button, body.darkmode input.button, body.darkmode a.button1, body.darkmode input.button1, body.darkmode a.button2, body.darkmode input.button2, body.darkmode a.button3, body.darkmode input.button3 { background-image: none; background-color: var(--dm-bg-button) !important; border-color: var(--dm-border-strong) !important; color: var(--dm-text-body) !important; } body.darkmode a.button:hover, body.darkmode input.button:hover, body.darkmode a.button1:hover, body.darkmode input.button1:hover, body.darkmode a.button2:hover, body.darkmode input.button2:hover, body.darkmode a.button3:hover, body.darkmode input.button3:hover { background-color: var(--dm-bg-button-hover) !important; border-color: var(--dm-border-strong) !important; color: var(--dm-text-body) !important; } /* ── Linki ────────────────────────────────────────────────── */ body.darkmode a:link, body.darkmode a:visited { color: var(--dm-link); } body.darkmode a:hover { color: var(--dm-link-hover); } body.darkmode .forumtitle a, body.darkmode .topictitle a { color: var(--dm-link); } body.darkmode .forumtitle a:hover, body.darkmode .topictitle a:hover { color: var(--dm-link-hover); } /* ── Formularze ───────────────────────────────────────────── */ body.darkmode input, body.darkmode textarea, body.darkmode select { background-color: var(--dm-bg-input) !important; color: var(--dm-text-post) !important; border-color: #555555 !important; } body.darkmode input:focus, body.darkmode textarea:focus, body.darkmode select:focus { background-color: var(--dm-bg-input-focus) !important; border-color: var(--dm-link) !important; } /* ── Paginacja ────────────────────────────────────────────── */ body.darkmode .pagination span a, body.darkmode .pagination span strong { background-color: var(--dm-bg-button); border-color: var(--dm-border-strong); color: var(--dm-text-profile); } body.darkmode .pagination span a:hover { background-color: var(--dm-accent); color: #ffffff; } body.darkmode .pagination span strong { background-color: var(--dm-accent); color: #ffffff; } /* ── Cytaty ───────────────────────────────────────────────── */ body.darkmode blockquote { background-color: var(--dm-bg-quote); border-color: var(--dm-border-quote); color: var(--dm-text-profile); } /* ── Kod ──────────────────────────────────────────────────── */ body.darkmode .codebox { background-color: var(--dm-bg-code); border-color: var(--dm-border); color: var(--dm-text-post); } /* ── Stopka ───────────────────────────────────────────────── */ body.darkmode .copyright { color: var(--dm-text-muted); background-color: var(--dm-bg-footer); border-top-color: var(--dm-border-footer); } /* ── Dropdown ─────────────────────────────────────────────── */ body.darkmode .dropdown .dropdown-contents { background-color: var(--dm-bg-dropdown); color: var(--dm-text-body); } body.darkmode .dropdown-contents { border-color: var(--dm-border-strong); } body.darkmode .dropdown-extended .header, body.darkmode .dropdown-extended .footer { background: var(--dm-bg); background-color: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); border-color: var(--dm-border-footer); } body.darkmode .dropdown a, body.darkmode .dropdown-contents a { color: var(--dm-link); } body.darkmode .dropdown .pointer-inner { border-color: var(--dm-bg-dropdown) transparent; } body.darkmode .dropdown-extended #notification_list li { background-color: var(--dm-bg); } body.darkmode #notification_list .bg2, body.darkmode .dropdown-extended .notification_list .bg2 { background-color: var(--dm-bg-alt); } body.darkmode .dropdown-extended ul li:hover, .dropdown-extended ul li.bg2:hover, .notification_list ul li.bg2:hover { background-color: var(--dm-bg-alt); } body.darkmode ul li { border-top-color: var(--dm-border); } /* ── Komunikaty ───────────────────────────────────────────── */ body.darkmode .error { color: var(--dm-error-text); } body.darkmode .success { color: var(--dm-success-text); } /* ── Highlight ────────────────────────────────────────────── */ body.darkmode .highlight { background-color: var(--dm-highlight-bg); color: var(--dm-highlight-text); } /* ── Progress bar ─────────────────────────────────────────── */ body.darkmode .progress-bar { background-color: var(--dm-progress-bar); } /* ── Edytor ───────────────────────────────────────────────── */ body.darkmode .editor-toolbar a { background-color: var(--dm-bg-button); border-color: var(--dm-border-strong); color: var(--dm-text-primary); } body.darkmode .editor-toolbar a:hover { background-color: var(--dm-accent); color: #ffffff; } body.darkmode .quick-reply { background-color: var(--dm-bg-panel); border-color: var(--dm-border); } /* ── UCP / MCP ────────────────────────────────────────────── */ body.darkmode .ucp-nav-list a, body.darkmode .mcp-nav-list a { color: var(--dm-link); } /* ── PM ───────────────────────────────────────────────────── */ body.darkmode .pm-message { background-color: var(--dm-bg-content); border-color: var(--dm-border); } /* ── Scrollbar ────────────────────────────────────────────── */ body.darkmode ::-webkit-scrollbar { width: 8px; height: 8px; } body.darkmode ::-webkit-scrollbar-track { background: var(--dm-bg-body); } body.darkmode ::-webkit-scrollbar-thumb { background-color: var(--dm-border); border-radius: 4px; } body.darkmode ::-webkit-scrollbar-thumb:hover { background-color: var(--dm-accent); } /* ── Obrazki ──────────────────────────────────────────────── */ body.darkmode img:not([src*=".gif"]):not(.avatar):not(.logo) { filter: brightness(0.85) contrast(1.05); } body.darkmode a.header-avatar img, body.darkmode .avatar_circle_container { background: var(--dm-text-primary); border-radius: 100%; } /* ── HR ───────────────────────────────────────────────────── */ body.darkmode hr { border-color: var(--dm-border); } /* ── Inne ───────────────────────────────────────────────────── */ body.darkmode .separator { border-color: var(--dm-border); } body.darkmode .birthdaybtn { color: var(--dm-text); }