/* * Wckediden Light Style * Shared component/layout rules come from the dark modernization layer; * this file supplies the light palette and contrast-safe component overrides. */ @import url("wckediden-modern.css?v=20261009squareicons2"); /* Profile columns: replace the legacy 256px negative-margin float reservation. */ html:has(#usercss) #spjpb { background: transparent !important; } @media (min-width: 901px) { html:has(#usercss) #spjpb { --wick-content-max: 1440px; width: calc(100% - 32px) !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } } #spjpb #usercss { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; width: 100%; min-width: 0; box-sizing: border-box; align-items: start; } #spjpb #usercss::before, #spjpb #usercss::after { display: none; } html:has(#usercss) #spjpb .page { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; } /* The page wrapper is not a card: let the gray canvas show between cards * and around their rounded corners, rather than exposing a white strip. */ html:has(#usercss) #spjpb div.page { background: transparent !important; border: 0 !important; box-shadow: none !important; } #spjpb #usercss > #content_container, #spjpb #usercss #content, #spjpb #usercss > #sidebar_container { float: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; } #spjpb #usercss #main_userinfo { min-width: 0; } #spjpb #usercss #link_bar > .block_title { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px !important; box-sizing: border-box; } #spjpb #usercss #last_online { padding: 8px 14px !important; } #spjpb #usercss #profile_tabs > ul.tab_list { display: flex !important; flex-wrap: wrap; gap: 7px; height: auto !important; box-sizing: border-box; } #spjpb #usercss #profile_tabs > ul.tab_list > li:not(.overflow_tab) { margin: 0 !important; } @media (max-width: 900px) { #spjpb #usercss { grid-template-columns: minmax(0, 1fr); gap: 18px; } } @media (max-width: 700px) { #spjpb #usercss #profile_tabs > ul.tab_list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Shared notices must not inherit the dark layer's amber/black callout. */ #spjpb #notices .navbar_notice { background: #f7f9fc !important; color: #344354 !important; border-color: #cbd5e1 !important; border-left-color: #a51b38 !important; box-shadow: none !important; overflow-wrap: anywhere; } #spjpb #notices .navbar_notice :is(h1, h2, h3, strong) { color: #8f1832 !important; text-shadow: none !important; } #spjpb #notices .navbar_notice :is(p, li, span) { color: #344354 !important; text-shadow: none !important; } #spjpb #notices .navbar_notice a { color: #961d38 !important; text-decoration: underline; } #spjpb #notices .navbar_notice a:is(:hover, :focus-visible) { color: #671329 !important; background: #edf1f6 !important; } /* Style 87 release: UI-only surfaces; never recolor uploaded media pixels. */ /* Maintenance notice retains its dark presentation in style 78; override * its legacy inline palette only in this light stylesheet. */ #spjpb #notices .wck-maintenance-notice > div { background: #f7f9fc !important; color: #344354 !important; border-color: #cbd5e1 !important; border-left-color: #a51b38 !important; box-shadow: none !important; box-sizing: border-box; max-width: 900px !important; overflow-wrap: anywhere; } #spjpb #notices .wck-maintenance-notice > div > div:first-child { background: #f3e7eb !important; color: #8f1832 !important; } #spjpb #notices .wck-maintenance-notice h2 { color: #344354 !important; } #spjpb #notices .wck-maintenance-notice p { color: #465569 !important; } @media (max-width: 480px) { #spjpb #notices .wck-maintenance-notice > div { margin: 8px auto !important; padding: 16px !important; } #spjpb #notices .wck-maintenance-notice h2 { font-size: 21px !important; } } html.wck-links-page img[src*="image.thum.io/"] { background: #eef1f5 !important; color: #344354 !important; box-shadow: 0 2px 6px rgba(24, 36, 51, .08) !important; } /* Shared edit/reply/new-thread forms also serve legacy plugins. */ #spjpb form input.bginput, #spjpb form textarea.bginput, #spjpb form select.bginput { background: #ffffff !important; color: #243244 !important; border-color: #bcc7d4 !important; } #spjpb form fieldset.fieldset, #spjpb form fieldset.fieldset table, #spjpb form fieldset.fieldset td { background: #f7f9fb !important; color: #344354 !important; border-color: #d2dae3 !important; } #spjpb form fieldset.fieldset legend, #spjpb form fieldset.fieldset label { color: #344354 !important; text-shadow: none !important; } #spjpb #posts #collapseobj_showthread_modinfo div[style*="width:175px"][style*="float:right"] { background: transparent !important; border: 0 !important; box-shadow: none !important; } :root { color-scheme: light; --wick-bg: #f3f5f8; --wick-surface: #ffffff; --wick-surface-raised: #eef1f5; --wick-surface-soft: #e3e8ef; --wick-border: #c7d0db; --wick-border-strong: #aab7c5; --wick-text: #1b2430; --wick-muted: #5b6673; --wick-red: #a91632; --wick-red-deep: #761024; --wick-accent: #b51e3b; --wick-focus: #d13a58; --wick-status-new-bg: #e4f3e9; --wick-status-new-text: #17643a; --wick-status-new-border: #7dbb94; --wick-shadow: 0 4px 16px rgba(24, 36, 51, .08); } html, body { background: var(--wick-bg) !important; color: var(--wick-text) !important; } body { background: radial-gradient(circle at 12% -10%, rgba(169, 22, 50, .08), transparent 34rem), linear-gradient(180deg, #f8fafc 0%, var(--wick-bg) 100%) !important; } a:link, a:visited, .page a:not(:has(img)):not([onclick*="toggle_collapse"]) { color: #8f1530 !important; } a:hover, a:focus-visible, .page a:not(:has(img)):not([onclick*="toggle_collapse"]):hover, .page a:not(:has(img)):not([onclick*="toggle_collapse"]):focus-visible { color: #c12849 !important; } #spjpb, .page, .tborder, table.tborder, #profile_tabs .content_block, #sidebar_container .content_block, .panel, .panelsurround, .vbmenu_popup { background: var(--wick-surface) !important; color: var(--wick-text) !important; border-color: var(--wick-border) !important; box-shadow: var(--wick-shadow); } #header, #catnav, #header > table:first-of-type, #profile_tabs > ul.tab_list, .thead, .tcat, .vbmenu_control { background: linear-gradient(135deg, #ffffff, #e9edf2) !important; color: var(--wick-text) !important; border-color: var(--wick-border) !important; } .thead, .tcat, .vbmenu_control, .thead a, .tcat a, .vbmenu_control a { color: #263342 !important; } .tfoot { background: #e7ebf0 !important; color: #465364 !important; border-color: var(--wick-border) !important; } .alt1, .alt1Active, .alt2, .panel, .panelsurround, .block_row, .content_block .block_row { background: #ffffff !important; color: var(--wick-text) !important; } .alt2, .content_block .block_row:nth-child(even), .statistics_group .shade { background: #f1f4f7 !important; } .alt1Active:hover, .alt2Active:hover, .block_row:hover, .content_block .block_row:hover { background: #e9eef4 !important; } .smallfont, .time, .navbar, .muted, .description { color: var(--wick-muted) !important; } input, select, textarea, .bginput, option, optgroup { background: #ffffff !important; color: var(--wick-text) !important; border-color: var(--wick-border-strong) !important; } input[type="submit"], input[type="button"], button, .button, #catnav .nav2 a { background: linear-gradient(135deg, var(--wick-red), var(--wick-red-deep)) !important; border-color: var(--wick-red) !important; color: #ffffff !important; box-shadow: 0 5px 12px rgba(118, 16, 36, .16); } input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover, #catnav .nav2 a:hover { background: linear-gradient(135deg, #c12849, #8f1530) !important; color: #ffffff !important; } .tborder td, .tborder tr + tr > td, .tborder tbody + tbody tr:first-child > td, .content_block .block_row, .statistics_group li { border-color: #d8dfe7 !important; } .postbit, .postbitlegacy, .bbcode_wrap, .bbcode_container, .quote_container, .codeblock, .editor_toolbar, .wysiwyg { background: #f6f8fa !important; color: var(--wick-text) !important; border-color: var(--wick-border) !important; } .notice, .warning, .error { background: #fff5f6 !important; color: #6f1727 !important; border-color: #e7a5b1 !important; } /* Forum-home last-post cards include legacy inline dark declarations. */ .drwave-lastpostby { background: #f5f7fa !important; border-color: var(--wick-border) !important; color: var(--wick-text) !important; } .drwave-lastpost-avatar { background: #ffffff !important; border-color: var(--wick-red) !important; } .drwave-lastpost-title a { color: #263342 !important; } .drwave-lastpost-title a:hover { color: var(--wick-accent) !important; } .drwave-lastpost-meta, .drwave-lastpostby-empty span { color: var(--wick-muted) !important; } .drwave-lastpost-go { background: var(--wick-red) !important; color: #ffffff !important; } /* Replace remaining dark-only chrome from the shared modernization layer. */ #catnav, #header > table:first-of-type, #header div.tborder[style*="border-top-width"] { background: linear-gradient(135deg, #ffffff, #e9edf2) !important; box-shadow: 0 8px 24px rgba(37, 51, 68, .12) !important; } #catnav .nav2 a { color: #8f1530 !important; } #catnav .nav2 a:hover, #catnav .nav2 a:focus-visible { background: #f1dfe4 !important; color: #761024 !important; } .tfoot, .vbmenu_control, #header div.tborder[style*="border-top-width"] .vbmenu_control { background: #e7ebf0 !important; color: #263342 !important; border-color: var(--wick-border) !important; } .tfoot a, .vbmenu_control a, #header div.tborder[style*="border-top-width"] .vbmenu_control a { color: #8f1530 !important; } #header div.tborder[style*="border-top-width"] .vbmenu_control a:hover, #header div.tborder[style*="border-top-width"] .vbmenu_control a:focus-visible { background: #f1dfe4 !important; color: #761024 !important; box-shadow: none !important; } /* Showthread posts, moderation panels, and plugin blocks. */ #spjpb table.tborder[id^="post"], #spjpb table.tborder[id^="post"] > tbody > tr:nth-child(2) > td.alt2, #spjpb #collapseobj_showthread_modinfo, #spjpb #collapseobj_showthread_modinfo > tr > td.alt1, #profile_tabs #modsystem, #profile_tabs #dl2modification, #profile_tabs #modsystem .block_content, #profile_tabs #dl2modification .block_content { background: #ffffff !important; color: var(--wick-text) !important; border-color: var(--wick-border) !important; } #spjpb table.tborder[id^="post"] > tbody > tr:nth-child(2) > td.alt2, #collapseobj_showthread_modinfo .navlist, #collapseobj_showthread_modinfo .navlist > div:not(.tcat), #collapseobj_showthread_modinfo #moddesc pre.alt2 { background: #f1f4f7 !important; color: var(--wick-text) !important; } #collapseobj_showthread_modinfo .navlist > div.tcat, #profile_tabs #modsystem .block_title, #profile_tabs #dl2modification .block_title { background: linear-gradient(105deg, #a91632, #761024) !important; color: #ffffff !important; } /* Quotes, code blocks, and editor previews remain readable on a white canvas. */ #spjpb .bbcode_wrap.bb_quote, #spjpb .bbcode_wrap.bb_quote > div, #spjpb .bbcode_wrap.bb_quote .bbcode_wrap.bb_quote, #spjpb .bbcode_wrap.bb_quote .bbcode_wrap.bb_quote > div, blockquote, .quote, .codeblock, pre, .editor_textbox, .vBulletin_editor textarea { background: #f6f8fa !important; color: var(--wick-text) !important; border-color: var(--wick-border) !important; } #spjpb .bbcode_wrap.bb_quote > h2, #spjpb .bbcode_wrap.bb_quote .bbcode_wrap.bb_quote > h2 { background: linear-gradient(105deg, #f1dfe4, #f8f3f5) !important; color: #761024 !important; border-bottom-color: #e2b5c0 !important; } #spjpb .bbcode_wrap.bb_quote > h2 strong, #spjpb .bbcode_wrap.bb_quote a { color: #8f1530 !important; } /* Forum-home statistics and plugin tiles. */ #spjpb #collapseobj_forumhome_activeusers > tr > td.alt2, #spjpb #collapseobj_forumhome_stats > tr > td.alt2, #spjpb #collapseobj_vietvbb_as > tr > td.alt2, #spjpb #collapseobj_forumhome_modstats > tr > td.alt2 { background: linear-gradient(145deg, #f1f4f7, #e5eaf0) !important; border-right-color: #d3dbe5 !important; } #spjpb #collapseobj_forumhome_activeusers > tr > td.alt2 > a::before, #spjpb #collapseobj_forumhome_stats > tr > td.alt2::before, #spjpb #collapseobj_vietvbb_as > tr > td.alt2::before, #spjpb #collapseobj_forumhome_modstats > tr > td.alt2 > a::before { background: linear-gradient(145deg, #f8dfe4, #f3eef0) !important; box-shadow: 0 6px 16px rgba(118, 16, 36, .12) !important; color: #a91632 !important; } /* Legacy plugin templates occasionally carry literal black inline colors. */ #spjpb [style*="background:#000"], #spjpb [style*="background: #000"], #spjpb [style*="background-color:#000"], #spjpb [style*="background-color: #000"], #spjpb [style*="background:#0"] { background: #f6f8fa !important; color: var(--wick-text) !important; border-color: var(--wick-border) !important; } @media (max-width: 760px) { html:has(#threadslist) #spjpb table:has(> tbody > tr > #forumtools) > tbody > tr { display: flex; flex-wrap: wrap; } html:has(#threadslist) #spjpb table:has(> tbody > tr > #forumtools) > tbody > tr > td { display: block; width: auto !important; box-sizing: border-box; } html:has(#threadslist) #spjpb table:has(> tbody > tr > #forumtools) > tbody > tr > td.tcat { flex: 1 1 100%; } html:has(#threadslist) #spjpb :is(#forumtools, #forumsearch) { flex: 1 1 45%; min-height: 44px; padding: 12px !important; } #spjpb #threadslist > tbody:not([id]) > tr:has(> td.thead) { display: flex; flex-wrap: wrap; } #spjpb #threadslist > tbody:not([id]) > tr > td.thead { display: block; flex: 1 1 100px; width: auto !important; white-space: normal !important; } #spjpb, #spjpb table, #header, #catnav { width: 100% !important; min-width: 0 !important; } #catnav .nav2 { flex-wrap: wrap !important; } } /* ======================================================================== * Light Style 87: plugin surfaces and discussion pages * * The shared modernization file is intentionally dark because Style 78 uses * it as its base. DownloadsII, vBadvanced Links, and PhotoPlog add their * own late, component-scoped dark rules, so the light sheet must explicitly * remap those surfaces after the import. These rules retain the legacy * markup and URLs while giving every page the same readable light canvas. * ====================================================================== */ html.wck-downloads-page, html.wck-links-page, html.wck-photoplog-page { --wck-plugin-surface: #ffffff; --wck-plugin-surface-raised: #f5f7fa; --wck-plugin-surface-soft: #e9edf2; --wck-plugin-border: #cbd4df; --wck-plugin-text: #202b38; --wck-plugin-muted: #5d6977; --wck-plugin-accent: #a91632; --wck-plugin-accent-soft: #f7e6ea; } html.wck-downloads-page #spjpb, html.wck-links-page #spjpb, html.wck-photoplog-page #spjpb { background: transparent !important; color: var(--wck-plugin-text) !important; } html.wck-downloads-page #spjpb table.tborder, html.wck-links-page #spjpb table.tborder, html.wck-photoplog-page #spjpb table.tborder { background: var(--wck-plugin-surface) !important; border-color: var(--wck-plugin-border) !important; box-shadow: 0 12px 28px rgba(39, 51, 65, .10) !important; } html.wck-downloads-page #spjpb .thead, html.wck-downloads-page #spjpb .tcat, html.wck-links-page #spjpb .thead, html.wck-links-page #spjpb .tcat, html.wck-photoplog-page #spjpb .thead, html.wck-photoplog-page #spjpb .tcat { background: linear-gradient(105deg, #b31c3b, #861329) !important; border-color: #9f1a35 !important; color: #ffffff !important; } html.wck-downloads-page #spjpb .thead a, html.wck-downloads-page #spjpb .tcat a, html.wck-links-page #spjpb .thead a, html.wck-links-page #spjpb .tcat a, html.wck-photoplog-page #spjpb .thead a, html.wck-photoplog-page #spjpb .tcat a { color: #ffffff !important; } html.wck-downloads-page #spjpb .alt1, html.wck-downloads-page #spjpb .alt2, html.wck-downloads-page #spjpb .panel, html.wck-downloads-page #spjpb .panelsurround, html.wck-links-page #spjpb .alt1, html.wck-links-page #spjpb .alt2, html.wck-links-page #spjpb .panel, html.wck-links-page #spjpb .panelsurround, html.wck-photoplog-page #spjpb .alt1, html.wck-photoplog-page #spjpb .alt2, html.wck-photoplog-page #spjpb .panel, html.wck-photoplog-page #spjpb .panelsurround { background: var(--wck-plugin-surface) !important; border-color: var(--wck-plugin-border) !important; color: var(--wck-plugin-text) !important; } html.wck-downloads-page #spjpb tr:nth-child(even) > .alt1, html.wck-downloads-page #spjpb tr:nth-child(even) > .alt2, html.wck-links-page #spjpb tr:nth-child(even) > .alt1, html.wck-links-page #spjpb tr:nth-child(even) > .alt2, html.wck-photoplog-page #spjpb tr:nth-child(even) > .alt1, html.wck-photoplog-page #spjpb tr:nth-child(even) > .alt2 { background: var(--wck-plugin-surface-raised) !important; } html.wck-downloads-page #spjpb tr:hover > td, html.wck-links-page #spjpb tr:hover > td, html.wck-links-page #spjpb tr:hover > .alt1, html.wck-links-page #spjpb tr:hover > .alt2, html.wck-photoplog-page #spjpb tr:hover > td, html.wck-photoplog-page #spjpb tr:hover > .alt1, html.wck-photoplog-page #spjpb tr:hover > .alt2 { background: #eef2f6 !important; color: var(--wck-plugin-text) !important; } html.wck-downloads-page #spjpb a, html.wck-links-page #spjpb a, html.wck-photoplog-page #spjpb a { color: #8f1530 !important; } html.wck-downloads-page #spjpb a:hover, html.wck-downloads-page #spjpb a:focus-visible, html.wck-links-page #spjpb a:hover, html.wck-links-page #spjpb a:focus-visible, html.wck-photoplog-page #spjpb a:hover, html.wck-photoplog-page #spjpb a:focus-visible { color: #c12849 !important; } html.wck-downloads-page #spjpb .smallfont, html.wck-downloads-page #spjpb .time, html.wck-downloads-page #spjpb font[size="1"], html.wck-links-page #spjpb .smallfont, html.wck-links-page #spjpb .time, html.wck-links-page #spjpb font[size="1"], html.wck-photoplog-page #spjpb .smallfont, html.wck-photoplog-page #spjpb .time, html.wck-photoplog-page #spjpb font[size="1"] { color: var(--wck-plugin-muted) !important; } html.wck-downloads-page #spjpb input, html.wck-downloads-page #spjpb select, html.wck-downloads-page #spjpb textarea, html.wck-links-page #spjpb input, html.wck-links-page #spjpb select, html.wck-links-page #spjpb textarea, html.wck-photoplog-page #spjpb input, html.wck-photoplog-page #spjpb select, html.wck-photoplog-page #spjpb textarea { background: #ffffff !important; border-color: #aebaca !important; color: var(--wck-plugin-text) !important; } html.wck-downloads-page #spjpb input[type="submit"], html.wck-downloads-page #spjpb input[type="button"], html.wck-downloads-page #spjpb button, html.wck-downloads-page #spjpb .button, html.wck-links-page #spjpb input[type="submit"], html.wck-links-page #spjpb input[type="button"], html.wck-links-page #spjpb button, html.wck-links-page #spjpb .button, html.wck-photoplog-page #spjpb input[type="submit"], html.wck-photoplog-page #spjpb input[type="button"], html.wck-photoplog-page #spjpb button, html.wck-photoplog-page #spjpb .button { background: linear-gradient(135deg, #b51e3b, #761024) !important; border-color: #a91632 !important; color: #ffffff !important; } /* DownloadsII has no page marker in its legacy controller; the marker added * by downloads.php lets the same light surface rules cover category, file, * search, comments, and management screens. */ html.wck-downloads-page #spjpb #wck-downloads, html.wck-downloads-page #spjpb #wck-downloads table, html.wck-downloads-page #spjpb #wck-downloads .alt1, html.wck-downloads-page #spjpb #wck-downloads .alt2 { background: var(--wck-plugin-surface) !important; color: var(--wck-plugin-text) !important; } /* Links and PhotoPlog define their own dark component tokens in the shared * sheet. Override the tokens as well as the common classes for selectors that * use literal component variables. */ html.wck-links-page { --links-surface: #ffffff; --links-surface-raised: #f5f7fa; --links-surface-soft: #e9edf2; --links-border: #cbd4df; --links-border-hot: #b51e3b; --links-muted: #5d6977; --links-accent: #b51e3b; } /* Links descriptions are fieldsets outside forms. The shared dark sheet uses * literal colors here, so overriding component tokens alone is not enough. */ html.wck-links-page #spjpb fieldset { background: #f7f9fb !important; background-image: none !important; color: #344354 !important; border-color: #d5dde7 !important; box-shadow: none !important; } html.wck-links-page #spjpb fieldset legend { color: #5d6977 !important; line-height: 1.5; } html.wck-links-page #spjpb .tcat .smallfont { color: #5d6977 !important; } /* Directory section headers use the same light surface at rest and on hover. * Explicit row selectors beat the generic plugin row-hover treatment. */ html.wck-links-page #spjpb .tcat, html.wck-links-page #spjpb tr:hover > .tcat, html.wck-links-page #spjpb .thead, html.wck-links-page #spjpb tr:hover > .thead, html.wck-photoplog-page #spjpb .tcat, html.wck-photoplog-page #spjpb tr:hover > .tcat, html.wck-photoplog-page #spjpb .thead, html.wck-photoplog-page #spjpb tr:hover > .thead { background: #eef2f6 !important; background-image: none !important; border-color: #d5dde7 !important; color: #344354 !important; } html.wck-links-page #spjpb .tcat a, html.wck-links-page #spjpb .tcat a:hover, html.wck-links-page #spjpb .tcat a:focus-visible, html.wck-links-page #spjpb .thead a, html.wck-links-page #spjpb .thead a:hover, html.wck-links-page #spjpb .thead a:focus-visible, html.wck-photoplog-page #spjpb .tcat a, html.wck-photoplog-page #spjpb .tcat a:hover, html.wck-photoplog-page #spjpb .tcat a:focus-visible, html.wck-photoplog-page #spjpb .thead a, html.wck-photoplog-page #spjpb .thead a:hover, html.wck-photoplog-page #spjpb .thead a:focus-visible { color: #761024 !important; } /* Replace the old dark raster navigation badges without changing targets. */ html.wck-links-page #spjpb a:has(img[src$="/lastpost.gif"]), html.wck-links-page #spjpb a:has(img[src$="/lastlink.gif"]) { display: inline-flex !important; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; margin-left: 4px; padding: 2px 4px !important; border: 1px solid #d5dde7 !important; border-radius: 5px; background: #e9edf2 !important; color: #761024 !important; box-shadow: none !important; } html.wck-links-page #spjpb a:has(img[src$="/lastpost.gif"])::after, html.wck-links-page #spjpb a:has(img[src$="/lastlink.gif"])::after { content: "\2192"; color: #761024 !important; } html.wck-links-page #spjpb a:has(img[src$="/lastpost.gif"])::before, html.wck-links-page #spjpb a:has(img[src$="/lastlink.gif"])::before { content: none !important; } html.wck-links-page #spjpb a:has(img[src$="/lastpost.gif"]) > img, html.wck-links-page #spjpb a:has(img[src$="/lastlink.gif"]) > img, #spjpb a > img[alt="Go Back"], #spjpb a > img[alt="Reload this Page"] { position: absolute !important; width: 1px !important; height: 1px !important; clip-path: inset(50%); } html.wck-links-page #spjpb a:has(img[src$="/lastpost.gif"]):hover, html.wck-links-page #spjpb a:has(img[src$="/lastlink.gif"]):hover { background: #dfe6ee !important; } /* Breadcrumb controls share this treatment across the light style. */ #spjpb a:has(img[alt="Go Back"]):hover, #spjpb a:has(img[alt="Go Back"]):focus-visible, #spjpb a:has(img[alt="Reload this Page"]):hover, #spjpb a:has(img[alt="Reload this Page"]):focus-visible { background: #e9edf2 !important; background-image: none !important; color: #761024 !important; box-shadow: none !important; } html.wck-photoplog-page { --plog-surface: #ffffff; --plog-surface-raised: #f5f7fa; --plog-surface-soft: #e9edf2; --plog-border: #cbd4df; --plog-muted: #5d6977; --plog-accent: #b51e3b; --plog-accent-dark: #761024; } html.wck-links-page #spjpb .vbmenu_control, html.wck-photoplog-page #spjpb .vbmenu_control { background: var(--wck-plugin-surface-raised) !important; border-color: var(--wck-plugin-border) !important; color: var(--wck-plugin-text) !important; } /* Discussion posts and editor/plugin panels must not retain Style 78's * charcoal post header when viewed with Style 87. */ body:has(#spjpb table.tborder[id^="post"]) #spjpb table.tborder[id^="post"], body:has(#spjpb table.tborder[id^="post"]) #spjpb table.tborder[id^="post"] > tbody > tr > td, body:has(#spjpb table.tborder[id^="post"]) #spjpb .postbit, body:has(#spjpb table.tborder[id^="post"]) #spjpb .postbitlegacy, body:has(#spjpb table.tborder[id^="post"]) #spjpb .postbody { background: #ffffff !important; border-color: #cbd4df !important; color: var(--wick-text) !important; } body:has(#spjpb table.tborder[id^="post"]) #spjpb table.tborder[id^="post"] .alt2, body:has(#spjpb table.tborder[id^="post"]) #spjpb table.tborder[id^="post"] .posthead, body:has(#spjpb table.tborder[id^="post"]) #spjpb table.tborder[id^="post"] .postfoot { background: #f1f4f7 !important; color: #334152 !important; border-color: #d8dfe7 !important; } body:has(#spjpb table.tborder[id^="post"]) #spjpb .bbcode_wrap, body:has(#spjpb table.tborder[id^="post"]) #spjpb .bbcode_container, body:has(#spjpb table.tborder[id^="post"]) #spjpb .quote_container, body:has(#spjpb table.tborder[id^="post"]) #spjpb .codeblock, body:has(#spjpb table.tborder[id^="post"]) #spjpb .editor_textbox { background: #f6f8fa !important; border-color: #cbd4df !important; color: var(--wick-text) !important; } /* Prevent legacy literal black plugin blocks from becoming unreadable on the * light canvas, while preserving media backgrounds and image transparency. */ html.wck-downloads-page #spjpb [style*="background:#000"], html.wck-downloads-page #spjpb [style*="background: #000"], html.wck-links-page #spjpb [style*="background:#000"], html.wck-links-page #spjpb [style*="background: #000"], html.wck-photoplog-page #spjpb [style*="background:#000"], html.wck-photoplog-page #spjpb [style*="background: #000"] { background: #f6f8fa !important; border-color: #cbd4df !important; color: var(--wick-text) !important; } /* Keep the primary red navigation readable. The shared light palette uses * burgundy links elsewhere, but these links sit on burgundy pills. */ #catnav .nav2 a, #catnav .nav2 a:visited, html.wck-links-page #spjpb #catnav .nav2 a, html.wck-downloads-page #spjpb #catnav .nav2 a, html.wck-photoplog-page #spjpb #catnav .nav2 a { color: #ffffff !important; text-decoration: none !important; } #catnav .nav2 a:hover, #catnav .nav2 a:focus-visible, html.wck-links-page #spjpb #catnav .nav2 a:hover, html.wck-links-page #spjpb #catnav .nav2 a:focus-visible, html.wck-downloads-page #spjpb #catnav .nav2 a:hover, html.wck-downloads-page #spjpb #catnav .nav2 a:focus-visible, html.wck-photoplog-page #spjpb #catnav .nav2 a:hover, html.wck-photoplog-page #spjpb #catnav .nav2 a:focus-visible { color: #ffffff !important; background: linear-gradient(135deg, #a91632, #761024) !important; } /* At tablet widths the legacy 12-item navigation must wrap instead of * compressing labels into overlapping pills. */ @media (max-width: 1100px) { #spjpb { width: calc(100% - 24px) !important; } #catnav .nav2 { display: flex !important; flex-wrap: wrap !important; align-items: stretch; justify-content: center; gap: 5px; height: auto !important; padding: 7px !important; } #catnav .nav2 li, #catnav .nav2 li.fr, #catnav .nav2 li.last { float: none !important; flex: 1 1 106px; min-width: 92px; max-width: 180px; margin: 0 !important; } #catnav .nav2 li > a { display: flex !important; min-height: 34px; align-items: center; justify-content: center; padding: 7px 9px !important; text-align: center; white-space: normal; } } /* Display Unread Posts / Reputation Comments plugin -------------------- * The plugin stylesheet is shared with the dark style and is loaded after * the base theme. Keep these rules ID-scoped so Style 87 wins without * changing the existing dark presentation. */ #spjpb .wk-activity .wk-activity-card { background: linear-gradient(135deg, #ffffff, #f3f6f9) !important; border-color: #cbd4df !important; color: #1b2430 !important; box-shadow: 0 2px 8px rgba(38, 52, 68, .12) !important; } #spjpb .wk-activity .wk-activity-card:hover, #spjpb .wk-activity .wk-activity-card:focus-visible { background: #ffffff !important; border-color: #b51e3b !important; color: #1b2430 !important; } #spjpb .wk-activity .wk-activity-label { color: #8f1530 !important; } #spjpb .wk-activity .wk-activity-detail { color: #5d6977 !important; } #spjpb .wk-activity .wk-activity-count { color: #b51e3b !important; } #spjpb .wk-activity .wk-activity-icon { border-color: #b51e3b !important; } #spjpb .wk-activity .wk-activity-icon:after { background: #b51e3b !important; box-shadow: 0 4px #b51e3b !important; } #spjpb .wk-activity .wk-activity-rep .wk-activity-icon:after { box-shadow: none !important; } #spjpb table:has(> tbody#collapseobj_usercp_reputation) { background: #ffffff !important; border-color: #cbd4df !important; color: #1b2430 !important; box-shadow: 0 2px 10px rgba(38, 52, 68, .10) !important; } #spjpb #collapseobj_usercp_reputation td { background: #f7f9fb !important; border-bottom-color: #d8dfe7 !important; color: #334152 !important; } #spjpb #collapseobj_usercp_reputation td.thead { background: #eef2f6 !important; color: #8f1530 !important; } #spjpb #collapseobj_usercp_reputation td a { color: #8f1530 !important; } #spjpb #collapseobj_usercp_reputation td:has(img[src*="reputation_"]):before { background: #e7edf3 !important; color: #526173 !important; } #spjpb #collapseobj_usercp_reputation td:has(img[src*="reputation_pos"]):before { background: #dff3ea !important; color: #14734f !important; } #spjpb #collapseobj_usercp_reputation td:has(img[src*="reputation_neg"]):before { background: #f9e2e7 !important; color: #a51f3d !important; } @media (max-width: 620px) { #spjpb .wk-activity .wk-activity-card { background: #ffffff !important; } } /* Keep the top forum tabs readable while hovered. Some legacy navbar rules * target the parent list item and otherwise replace the pill with white. */ #catnav .nav2 li:hover, #catnav .nav2 li:focus-within { background: transparent !important; } #catnav .nav2 li:hover > a, #catnav .nav2 li:focus-within > a, #catnav .nav2 a:hover, #catnav .nav2 a:focus-visible { background: linear-gradient(135deg, #c12849, #8f1530) !important; border-color: #a91632 !important; color: #ffffff !important; } /* Quick-reply editor and draft recovery are shared assets loaded after the * theme sheet. Override their legacy dark chrome for Style 87. */ #spjpb .wck-draft-bar { background: #ffffff !important; border-color: #cbd4df !important; border-left-color: #b51e3b !important; color: #1b2430 !important; box-shadow: 0 3px 12px rgba(38, 52, 68, .10) !important; } #spjpb .wck-draft-bar strong { color: #8f1530 !important; } #spjpb .wck-draft-bar .wck-draft-status { color: #334152 !important; } #spjpb .wck-draft-bar .wck-draft-note { color: #5d6977 !important; } #spjpb .wck-draft-bar button { background: linear-gradient(135deg, #b51e3b, #761024) !important; border-color: #a91632 !important; color: #ffffff !important; } #spjpb .wck-draft-bar button:hover, #spjpb .wck-draft-bar button:focus-visible { background: linear-gradient(135deg, #c12849, #8f1530) !important; color: #ffffff !important; } #spjpb .vBulletin_editor { background: #ffffff !important; border-color: #cbd4df !important; box-shadow: 0 4px 16px rgba(38, 52, 68, .10) !important; } #spjpb .vBulletin_editor #controlbar, #spjpb .vBulletin_editor .controlbar { background: linear-gradient(180deg, #eef2f6, #e2e8ee) !important; border-color: #cbd4df !important; color: #334152 !important; } #spjpb .vBulletin_editor #controlbar td, #spjpb .vBulletin_editor .controlbar td { border-color: #d8dfe7 !important; color: #334152 !important; } #spjpb .vBulletin_editor .imagebutton { background: #ffffff !important; border-color: #aebaca !important; color: #334152 !important; } #spjpb .vBulletin_editor .imagebutton:hover, #spjpb .vBulletin_editor .imagebutton:focus-visible { background: #f7e6ea !important; border-color: #b51e3b !important; } #spjpb .vBulletin_editor textarea, #spjpb .vBulletin_editor .editor_textbox, #spjpb #vB_Editor_QR_textarea { background: #ffffff !important; border-color: #aebaca !important; color: #1b2430 !important; } #spjpb #qrform #collapseobj_quickreply fieldset.fieldset:has(#qr_quickreply) { background: #f7f9fb !important; border-color: #cbd4df !important; } #spjpb #qrform #collapseobj_quickreply fieldset.fieldset:has(#qr_quickreply) legend, #spjpb #qrform #collapseobj_quickreply fieldset.fieldset:has(#qr_quickreply) label { color: #8f1530 !important; } /* Social Groups: replace the legacy dark cards with the Style 87 light * surface while preserving the existing markup and functionality. */ html:has(#sg_catcloud) #spjpb #sg_catcloud, html:has(#sg_catcloud) #spjpb #sg_randomgroup, html:has(#sg_catcloud) #spjpb #sg_mygroups, html:has(#sg_catcloud) #spjpb #sg_newgroups { color: #1b2430 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .tborder, html:has(#sg_catcloud) #spjpb #sg_randomgroup .tborder, html:has(#sg_catcloud) #spjpb #sg_mygroups .tborder, html:has(#sg_catcloud) #spjpb #sg_newgroups .tborder { background: #ffffff !important; border-color: #cbd4df !important; box-shadow: 0 9px 25px rgba(24, 36, 51, .12) !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .tborder td, html:has(#sg_catcloud) #spjpb #sg_randomgroup .tborder td, html:has(#sg_catcloud) #spjpb #sg_mygroups .tborder td, html:has(#sg_catcloud) #spjpb #sg_newgroups .tborder td { border-color: #d8dfe7 !important; color: #1b2430 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .tcat, html:has(#sg_catcloud) #spjpb #sg_randomgroup .tcat, html:has(#sg_catcloud) #spjpb #sg_mygroups .tcat, html:has(#sg_catcloud) #spjpb #sg_newgroups .tcat { background: linear-gradient(105deg, #a91632, #761024) !important; border-color: #a91632 !important; color: #ffffff !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .alt1, html:has(#sg_catcloud) #spjpb #sg_randomgroup .alt1, html:has(#sg_catcloud) #spjpb #sg_mygroups .alt1, html:has(#sg_catcloud) #spjpb #sg_newgroups .alt1, html:has(#sg_catcloud) #spjpb #sg_catcloud .alt2, html:has(#sg_catcloud) #spjpb #sg_randomgroup .alt2, html:has(#sg_catcloud) #spjpb #sg_mygroups .alt2, html:has(#sg_catcloud) #spjpb #sg_newgroups .alt2 { background: #ffffff !important; color: #1b2430 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .tfoot, html:has(#sg_catcloud) #spjpb #sg_randomgroup .tfoot, html:has(#sg_catcloud) #spjpb #sg_mygroups .tfoot, html:has(#sg_catcloud) #spjpb #sg_newgroups .tfoot { background: #f1f4f7 !important; border-color: #d8dfe7 !important; color: #5b6673 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud a, html:has(#sg_catcloud) #spjpb #sg_randomgroup a, html:has(#sg_catcloud) #spjpb #sg_mygroups a, html:has(#sg_catcloud) #spjpb #sg_newgroups a { color: #8f1530 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .sg_catcloudlink { background: #f7e8ec !important; border-color: #d59aaa !important; color: #8f1530 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .sg_catcloudlink:hover, html:has(#sg_catcloud) #spjpb #sg_catcloud .sg_catcloudlink:focus-visible { background: #f3d8df !important; border-color: #a91632 !important; color: #761024 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud input[type="text"] { background: #ffffff !important; border-color: #aebaca !important; color: #1b2430 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud input[type="submit"] { background: linear-gradient(135deg, #b51e3b, #761024) !important; border-color: #a91632 !important; color: #ffffff !important; } html:has(#sg_catcloud) #spjpb #sg_randomgroup .sgicon, html:has(#sg_catcloud) #spjpb #sg_newgroups .sgicon { background: #f5f7fa !important; border-color: #cbd4df !important; box-shadow: 0 4px 12px rgba(38, 52, 68, .10) !important; } html:has(#sg_catcloud) #spjpb #sg_randomgroup #sg_randomgroup_info td { background: #f7f9fb !important; border-color: #d8dfe7 !important; color: #5b6673 !important; } html:has(#sg_catcloud) #spjpb #sg_newgroups .sgicon .smallfont { color: #334152 !important; } html:has(#sg_catcloud) #spjpb .action_links { background: linear-gradient(135deg, #b51e3b, #761024) !important; border-color: #a91632 !important; box-shadow: 0 5px 12px rgba(38, 52, 68, .14) !important; } html:has(#sg_catcloud) #spjpb .action_links a, html:has(#sg_catcloud) #spjpb .action_links a:hover, html:has(#sg_catcloud) #spjpb .action_links a:focus-visible { color: #ffffff !important; } /* Legacy Style 78 compatibility guard. The imported style export contains * duplicate dark selectors after the Style 87 block; these final rules keep * menus and utility controls readable when that export is present. */ #spjpb .vbmenu_popup { background: #ffffff !important; border-color: var(--wick-border) !important; color: var(--wick-text) !important; } #spjpb .vbmenu_option, #spjpb .vbmenu_hilite, #spjpb .fjsel, #spjpb .fjdpth0 { background: #f1f4f7 !important; border-color: #d8dfe7 !important; color: var(--wick-text) !important; } #spjpb .vbmenu_option a, #spjpb .vbmenu_hilite a { color: #8f1530 !important; } #spjpb .vbmenu_option:hover, #spjpb .vbmenu_hilite:hover, #spjpb .vbmenu_option a:hover, #spjpb .vbmenu_hilite a:hover { background: #f7e6ea !important; color: #761024 !important; } #spjpb .pagenav a.disablelink, #spjpb .pagenav a.disablelink:hover { background: #ffffff !important; border-color: var(--wick-border-strong) !important; color: var(--wick-muted) !important; } /* Final pass for legacy templates that embed Style 78 colors inline. Keep * this scoped to the forum surface so dark media/previews outside the page * are not altered accidentally. */ #spjpb [style*="background:#191919"], #spjpb [style*="background: #191919"], #spjpb [style*="background-color:#191919"], #spjpb [style*="background-color: #191919"], #spjpb [style*="background:#444444"], #spjpb [style*="background: #444444"], #spjpb [style*="background-color:#444444"], #spjpb [style*="background-color: #444444"], #spjpb [style*="background:#4F0000"], #spjpb [style*="background: #4F0000"] { background: #ffffff !important; border-color: var(--wick-border) !important; color: var(--wick-text) !important; } /* Style 87 should advertise a light browser chrome as well as a light page. */ html { color-scheme: light; } /* Modification System showthread controls. These IDs are emitted by the * plugin templates and are intentionally scoped to Style 87's loaded sheet. */ #spjpb #mods_install_div, #spjpb #mods_nominate_div, #spjpb #mods_install_sidebar, #spjpb #mods_nominate_sidebar, #spjpb [id^="thread_installed_"], #spjpb [id^="thread_installcount_"], #spjpb .modsystem-panel, #spjpb .modsystem_block, #spjpb .modsystem_info { background: #ffffff !important; border: 1px solid #cbd4df !important; border-radius: 8px; color: #1b2430 !important; box-shadow: 0 3px 12px rgba(38, 52, 68, .10) !important; } #spjpb #mods_install_div a, #spjpb #mods_nominate_div a, #spjpb #mods_install_sidebar a, #spjpb #mods_nominate_sidebar a, #spjpb [id^="thread_installed_"] a { color: #8f1530 !important; } #spjpb #mods_install_div a:hover, #spjpb #mods_nominate_div a:hover, #spjpb #mods_install_sidebar a:hover, #spjpb #mods_nominate_sidebar a:hover, #spjpb [id^="thread_installed_"] a:hover { color: #c12849 !important; } #spjpb #mods_install_count, #spjpb [id^="thread_installcount_"], #spjpb .modsystem_count { background: #f7e6ea !important; border-color: #d59aaa !important; color: #8f1530 !important; font-weight: 700; } #spjpb .modsystem-panel input, #spjpb .modsystem-panel select, #spjpb .modsystem-panel textarea, #spjpb #modsystem input, #spjpb #modsystem select, #spjpb #modsystem textarea { background: #ffffff !important; border-color: #aebaca !important; color: #1b2430 !important; } #spjpb .modsystem-panel .thead, #spjpb .modsystem-panel .tcat, #spjpb #modsystem .thead, #spjpb #modsystem .tcat { background: linear-gradient(105deg, #a91632, #761024) !important; border-color: #a91632 !important; color: #ffffff !important; } /* The showthread template uses the post table itself as the ModSystem * container; it does not emit a .modsystem-panel class. These selectors * target only the post that contains #moddesc, leaving ordinary posts alone. */ #spjpb table.tborder:has(#moddesc), #spjpb table.tborder:has(#moddesc) > tbody > tr > td, #spjpb table.tborder:has(#moddesc) #moddesc, #spjpb table.tborder:has(#moddesc) #moddesc .alt1, #spjpb table.tborder:has(#moddesc) #moddesc .alt2 { background: #ffffff !important; border-color: #cbd4df !important; color: #1b2430 !important; } #spjpb table.tborder:has(#moddesc) #moddesc .alt2 { background: #f1f4f7 !important; } #spjpb table.tborder:has(#moddesc) #moddesc .navlist { background: #f7f9fb !important; border: 1px solid #cbd4df !important; border-radius: 8px; box-shadow: 0 3px 10px rgba(38, 52, 68, .10) !important; color: #1b2430 !important; overflow: hidden; } #spjpb table.tborder:has(#moddesc) #moddesc .navlist > div { background: #f7f9fb !important; border-bottom: 1px solid #d8dfe7 !important; color: #334152 !important; padding: 6px 8px; } #spjpb table.tborder:has(#moddesc) #moddesc .navlist > div.tcat { background: linear-gradient(105deg, #a91632, #761024) !important; border-color: #a91632 !important; color: #ffffff !important; } #spjpb table.tborder:has(#moddesc) #moddesc a { color: #8f1530 !important; } #spjpb table.tborder:has(#moddesc) #moddesc a:hover, #spjpb table.tborder:has(#moddesc) #moddesc a:focus-visible { color: #c12849 !important; } #spjpb table.tborder:has(#moddesc) #moddesc .bigusername, #spjpb table.tborder:has(#moddesc) #moddesc p.bigusername { color: #8f1530 !important; } #spjpb table.tborder:has(#moddesc) #moddesc #mods_install_div, #spjpb table.tborder:has(#moddesc) #moddesc #mods_nominate_div { background: #f7e6ea !important; border: 1px solid #d59aaa !important; border-radius: 6px; color: #334152 !important; margin: 5px 0; padding: 6px 8px; } #spjpb table.tborder:has(#moddesc) #moddesc #mods_install_div a, #spjpb table.tborder:has(#moddesc) #moddesc #mods_nominate_div a { font-weight: 700; } /* Replace the old dark decorative background used by the developer sidebar. */ #spjpb table.tborder:has(#moddesc) #moddesc [style*="gtbgb.gif"] { background: #f7f9fb !important; } #spjpb table.tborder:has(#moddesc) #moddesc table, #spjpb table.tborder:has(#moddesc) #moddesc table td { background: #ffffff !important; border-color: #d8dfe7 !important; color: #1b2430 !important; } /* modern.css contains a later dark-style rule for the ModSystem message * body. Match its structure explicitly so the actual description text is * not left at the near-white dark-theme color on a white canvas. */ #spjpb #collapseobj_showthread_modinfo #moddesc > div[id^="post_message_"], #spjpb table.tborder:has(#moddesc) #moddesc > div[id^="post_message_"] { color: #1b2430 !important; } #spjpb #collapseobj_showthread_modinfo #moddesc > div[id^="post_message_"] a, #spjpb table.tborder:has(#moddesc) #moddesc > div[id^="post_message_"] a { color: #8f1530 !important; } #spjpb #collapseobj_showthread_modinfo #moddesc > div[id^="post_message_"] a:hover, #spjpb #collapseobj_showthread_modinfo #moddesc > div[id^="post_message_"] a:focus-visible, #spjpb table.tborder:has(#moddesc) #moddesc > div[id^="post_message_"] a:hover, #spjpb table.tborder:has(#moddesc) #moddesc > div[id^="post_message_"] a:focus-visible { color: #c12849 !important; } /* Fallback selectors for legacy showthread markup. Some cached ModSystem * templates do not place the post inside #spjpb and older browsers do not * support :has(), which allowed the dark rules to leak into Style 87. */ #collapseobj_showthread_modinfo, #collapseobj_showthread_modinfo > tr > td, #moddesc, #moddesc .alt1, #moddesc .alt2, #moddesc table, #moddesc table td, #modsystem, #modsystem .alt1, #modsystem .alt2, #modsystem table, #modsystem table td, .modsystem-panel, .modsystem_block, .modsystem_info { background: #ffffff !important; border-color: #cbd4df !important; color: #1b2430 !important; } #moddesc .alt2 { background: #f1f4f7 !important; } #moddesc a, #modsystem a, .modsystem-panel a, .modsystem_block a, .modsystem_info a { color: #8f1530 !important; } #moddesc a:hover, #moddesc a:focus-visible, #modsystem a:hover, #modsystem a:focus-visible, .modsystem-panel a:hover, .modsystem-panel a:focus-visible { color: #c12849 !important; } #moddesc input, #moddesc select, #moddesc textarea, #modsystem input, #modsystem select, #modsystem textarea, .modsystem-panel input, .modsystem-panel select, .modsystem-panel textarea { background: #ffffff !important; border-color: #aebaca !important; color: #1b2430 !important; } /* The ModSystem supporter sidebar is rendered beside #moddesc in the same * post table. Its legacy template applies near-white text directly to the * action cells, so normalize those cells as well. */ #spjpb table.tborder:has(#moddesc) td, #spjpb table.tborder:has(#moddesc) td div, #spjpb table.tborder:has(#moddesc) td span, #spjpb table.tborder:has(#moddesc) td a { color: #1b2430 !important; } #spjpb table.tborder:has(#moddesc) td a { color: #8f1530 !important; } #spjpb table.tborder:has(#moddesc) td[style*="background"], #spjpb table.tborder:has(#moddesc) td div[style*="background"] { background: #ffffff !important; border-color: #cbd4df !important; } #spjpb table.tborder:has(#moddesc) .tcat, #spjpb table.tborder:has(#moddesc) .thead { background: linear-gradient(105deg, #a91632, #761024) !important; color: #ffffff !important; } #spjpb table.tborder:has(#moddesc) .tcat a, #spjpb table.tborder:has(#moddesc) .thead a { color: #ffffff !important; } /* The supporter controls are legacy .navlist siblings of #moddesc (not * descendants), so the narrower rules above do not reach them. In Style 87 * keep every ModSystem navigation row readable on the light canvas. */ #spjpb .navlist { background: #f7f9fb !important; border: 1px solid #cbd4df !important; color: #1b2430 !important; } #spjpb .navlist > div { background: #f7f9fb !important; border-bottom: 1px solid #d8dfe7 !important; color: #334152 !important; } #spjpb .navlist > div.tcat { background: linear-gradient(105deg, #a91632, #761024) !important; border-color: #a91632 !important; color: #ffffff !important; } #spjpb .navlist > div:not(.tcat) a, #spjpb .navlist > div:not(.tcat) a:visited { color: #8f1530 !important; opacity: 1 !important; } #spjpb .navlist > div:not(.tcat) a:hover, #spjpb .navlist > div:not(.tcat) a:focus-visible { color: #c12849 !important; } /* Match the dark base selectors exactly so the light rule wins even when * the imported stylesheet is cached or an older template adds !important. */ #collapseobj_showthread_modinfo .navlist, #collapseobj_showthread_modinfo .navlist > div:not(.tcat) { background: #f7f9fb !important; border-color: #d8dfe7 !important; color: #334152 !important; } #collapseobj_showthread_modinfo .navlist > div:not(.tcat) > a, #collapseobj_showthread_modinfo .navlist > div:not(.tcat) > a:link, #collapseobj_showthread_modinfo .navlist > div:not(.tcat) > a:visited { background: transparent !important; color: #8f1530 !important; opacity: 1 !important; } #collapseobj_showthread_modinfo .navlist > div:not(.tcat) > a:hover, #collapseobj_showthread_modinfo .navlist > div:not(.tcat) > a:focus-visible { background: #f7e6ea !important; color: #761024 !important; } #collapseobj_showthread_modinfo .navlist > div.tcat { background: linear-gradient(105deg, #a91632, #761024) !important; color: #ffffff !important; } #collapseobj_showthread_modinfo .navlist > div.tcat::before { color: #ffd6dc !important; } #collapseobj_showthread_modinfo .navlist > div:first-child { background: linear-gradient(105deg, #a91632, #761024) !important; color: #ffffff !important; } #collapseobj_showthread_modinfo .navlist > div[style*="gtbgb.gif"] { background: linear-gradient(105deg, #a91632, #761024) !important; color: #ffffff !important; } #spjpb #collapseobj_showthread_modinfo .navlist > div:first-child, #spjpb #collapseobj_showthread_modinfo .navlist > div.tcat { background: linear-gradient(105deg, #a91632, #761024) !important; color: #ffffff !important; } /* ModSystem metadata cards and capability pills sit before #moddesc, so they * need their own light-theme mapping rather than inheriting the dark base. */ #collapseobj_showthread_modinfo > tr > td.alt1 > div > table:first-of-type td.alt2 { background: #f1f4f7 !important; border-color: #cbd4df !important; color: #334152 !important; } #collapseobj_showthread_modinfo > tr > td.alt1 > div > table:first-of-type td.alt2 strong { color: #263342 !important; } #collapseobj_showthread_modinfo > tr > td.alt1 > div > table:first-of-type td.alt2 > span[style*="float:left"] { background: #eef3f7 !important; border-color: #b9c6d3 !important; color: #263342 !important; } #collapseobj_showthread_modinfo > tr > td.alt1 > div > table:first-of-type td.alt2 > span[style*="float:left"]::before { color: #16845b !important; } #collapseobj_showthread_modinfo span[style*="float:right"]:has(> img[src$="certified.gif"]), #collapseobj_showthread_modinfo span[style*="float:right"]:has(> img[src$="supported.gif"]) { background: #e8f6ef !important; border-color: #a8d8bd !important; color: #167247 !important; } /* Legacy templates can insert an extra table wrapper, making the structured * selector above miss the metadata cells. Keep the final fallback scoped to * the ModSystem details table so ordinary showthread posts are untouched. */ #collapseobj_showthread_modinfo td.alt2, #collapseobj_showthread_modinfo td.alt2 strong, #collapseobj_showthread_modinfo td.alt2 span { background: #f1f4f7 !important; color: #334152 !important; } #collapseobj_showthread_modinfo td.alt2 > span[style*="float:left"] { background: #eef3f7 !important; border-color: #b9c6d3 !important; color: #263342 !important; } /* Style 78's dark post-action treatment also reaches Style 87. Keep the * same actions, URLs, and icons, but give them the light theme's burgundy * control palette instead of charcoal surfaces. */ #spjpb .page a:has(img[src*="/buttons/"]) { background: linear-gradient(135deg, #a91632, #761024) !important; border-color: #a91632 !important; box-shadow: 0 4px 10px rgba(118, 16, 36, .16) !important; color: #ffffff !important; } #spjpb .page a:has(img[src*="/buttons/"]):hover, #spjpb .page a:has(img[src*="/buttons/"]):focus-visible { background: linear-gradient(135deg, #c12849, #8f1530) !important; border-color: #c12849 !important; color: #ffffff !important; } #spjpb .page a:has(img[src*="/buttons/"])::before { color: #ffd6dc !important; } #spjpb .page a:has(img[src*="/buttons/"])::after { color: #ffffff !important; opacity: 1 !important; } /* The modern showthread action controls use semantic .wick-action classes * and Font Awesome pseudo-icons rather than button images. */ #spjpb .wick-post-actions > a.wick-action, #spjpb .wick-post-actions > a[id^="post_thanks_button_"] { background: linear-gradient(135deg, #a91632, #761024) !important; border-color: #a91632 !important; box-shadow: 0 3px 8px rgba(118, 16, 36, .16) !important; color: #ffffff !important; } #spjpb .wick-post-actions > a.wick-action::before, #spjpb .wick-post-actions > a[id^="post_thanks_button_"]::before { color: #ffe0e5 !important; } #spjpb .wick-post-actions > a.wick-action:hover, #spjpb .wick-post-actions > a.wick-action:focus-visible, #spjpb .wick-post-actions > a[id^="post_thanks_button_"]:hover, #spjpb .wick-post-actions > a[id^="post_thanks_button_"]:focus-visible { background: linear-gradient(135deg, #c12849, #8f1530) !important; border-color: #c12849 !important; color: #ffffff !important; } #spjpb .wick-post-actions > a.wick-action:hover::before, #spjpb .wick-post-actions > a.wick-action:focus-visible::before, #spjpb .wick-post-actions > a[id^="post_thanks_button_"]:hover::before, #spjpb .wick-post-actions > a[id^="post_thanks_button_"]:focus-visible::before { color: #ffffff !important; } /* The no-avatar fallback is emitted by the plugin through the stock postbit * avatar markup. Keep it visible even when legacy avatar-hiding rules apply. */ #spjpb #posts img[src*="noavatar-neutral"] { display: inline-block !important; visibility: visible !important; width: 96px !important; height: 96px !important; max-width: none !important; object-fit: contain; } #spjpb #posts table.tborder[id^="post"] > tbody > tr:nth-child(2) > td.alt2 > table:first-of-type > tbody > tr > td:first-child:has(img[src*="noavatar-neutral"]) { box-sizing: border-box !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; text-align: center !important; } /* Style 87 finishing layer: target the actual legacy post/sidebar markup. * Keep neutral surfaces separate from primary actions, and never recolor * uploaded images, media players, or user-selected message text globally. */ #spjpb #posts #collapseobj_showthread_modinfo .navlist span[style*="text-align:center"] > a::before, #spjpb #posts #collapseobj_showthread_modinfo .navlist span[style*="text-align:center"] > a::after { content: none !important; display: none !important; } html body { background: #f3f5f7 !important; } #spjpb { background: transparent !important; box-shadow: none !important; } #spjpb #posts table.tborder[id^="post"], #collapseobj_showthread_modinfo .navlist { box-shadow: 0 3px 12px rgba(35, 48, 63, .09) !important; } #collapseobj_showthread_modinfo #moddesc .bigusername { background: #edf1f5 !important; color: #344354 !important; border: 1px solid #d2dae3 !important; border-left: 3px solid #96334a !important; box-shadow: none !important; } #spjpb #moddesc .bbcode_wrap > h2, #spjpb .bbcode_wrap > h2, #spjpb .bbcode_wrap.bb_quote > h2, #spjpb .bbcode_wrap.bb_quote .bbcode_wrap.bb_quote > h2 { background: #e9eef3 !important; color: #344354 !important; border-color: #cbd4df !important; text-shadow: none !important; } #spjpb .bbcode_wrap > h2 strong, #spjpb .bbcode_wrap > h2 a { color: #344354 !important; } #collapseobj_showthread_modinfo .navlist span[style*="text-align:center"] { background: #f3f5f7 !important; border-color: #d2dae3 !important; padding: 16px !important; } #collapseobj_showthread_modinfo .navlist span[style*="text-align:center"] img { background: #fff !important; border-color: #d2dae3 !important; box-shadow: none !important; } /* The sidebar avatar is an image link, not another bordered action card. */ #spjpb #posts #collapseobj_showthread_modinfo .navlist span[style*="text-align:center"], #spjpb #posts #collapseobj_showthread_modinfo .navlist span[style*="text-align:center"] > a, #spjpb #posts #collapseobj_showthread_modinfo .navlist span[style*="text-align:center"] > a > img { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } #spjpb #collapseobj_showthread_modinfo .navlist > div.tcat, #spjpb #collapseobj_showthread_modinfo .navlist > div.tcat::before { background: #e9eef3 !important; color: #344354 !important; border-color: #d2dae3 !important; } /* Match the author grid, including custom avatars, without hiding images. */ #spjpb #posts #collapseobj_showthread_modinfo #moddesc a[href^="attachment.php"], #spjpb #posts #collapseobj_showthread_modinfo #moddesc a[href^="attachment.php"]::before, #spjpb #posts #collapseobj_showthread_modinfo #moddesc a[href^="attachment.php"]::after { background: #edf1f5 !important; color: #703044 !important; border-color: #ccd5df !important; box-shadow: none !important; text-shadow: none !important; } #spjpb #posts #collapseobj_showthread_modinfo #moddesc a[href^="attachment.php"]:hover, #spjpb #posts #collapseobj_showthread_modinfo #moddesc a[href^="attachment.php"]:focus-visible { background: #e1e7ee !important; color: #512334 !important; } #spjpb #posts #collapseobj_showthread_modinfo strong.bigusername, #spjpb #collapseobj_showthread_modinfo #moddesc p.bigusername { color: #344354 !important; } #spjpb #posts a:has(img[src*="skype_addcontact"]), #spjpb #posts a:has(img[src*="skype_addcontact"])::before, #spjpb #posts a:has(img[src*="skype_addcontact"])::after { background: #edf1f5 !important; color: #703044 !important; border-color: #ccd5df !important; box-shadow: none !important; text-shadow: none !important; } #spjpb #posts table.tborder[id^="post"] > tbody > tr:nth-child(2) > td.alt2 > table:first-of-type > tbody > tr > td:first-child { background: transparent !important; padding: 8px !important; align-self: start !important; } #spjpb #posts table.tborder[id^="post"] > tbody > tr:nth-child(2) > td.alt2 > table:first-of-type > tbody > tr > td:first-child img { background: #f7f9fb !important; border-color: #d2dae3 !important; box-shadow: none !important; margin: 0 auto !important; } /* Footer controls: inset from card edges, wrap safely, use quieter secondary * buttons. Primary posting/navigation controls retain the burgundy identity. */ #spjpb #posts table.tborder[id^="post"] > tbody > tr:last-child > td:has(.wick-post-actions) { padding: 18px 22px !important; } #spjpb #posts .wick-post-actions { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end; gap: 8px !important; margin-top: 14px !important; } #spjpb #posts .wick-post-actions > a.wick-action, #spjpb #posts .wick-post-actions > a[id^="post_thanks_button_"], #spjpb #posts .page a:has(img[src*="/buttons/"]), #spjpb #posts a:has(img[src*="/buttons/"]) { background: #edf1f5 !important; color: #703044 !important; border: 1px solid #ccd5df !important; box-shadow: none !important; text-shadow: none !important; min-height: 34px; margin: 3px !important; } #spjpb #posts .wick-post-actions > a.wick-action::before, #spjpb #posts .wick-post-actions > a.wick-action::after, #spjpb #posts .wick-post-actions > a[id^="post_thanks_button_"]::before, #spjpb #posts .wick-post-actions > a[id^="post_thanks_button_"]::after, #spjpb #posts a:has(img[src*="/buttons/"])::before, #spjpb #posts a:has(img[src*="/buttons/"])::after { color: #703044 !important; text-shadow: none !important; } #spjpb #posts .wick-post-actions > a.wick-action:hover, #spjpb #posts .wick-post-actions > a.wick-action:focus-visible, #spjpb #posts a:has(img[src*="/buttons/"]):hover, #spjpb #posts a:has(img[src*="/buttons/"]):focus-visible { background: #e1e7ee !important; color: #512334 !important; border-color: #94a4b6 !important; transform: none !important; } #spjpb a:focus-visible, #spjpb button:focus-visible, #spjpb input:focus-visible, #spjpb select:focus-visible { outline: 2px solid #805269 !important; outline-offset: 3px; } @media (max-width: 900px) { #spjpb #posts table.tborder[id^="post"] > tbody > tr:last-child > td:has(.wick-post-actions) { padding: 14px !important; } #spjpb #posts .wick-post-actions { justify-content: flex-start; } #spjpb #posts .wick-post-actions > a.wick-action { width: auto !important; min-height: 42px; flex: 1 1 130px; } } /* Forum-home layout wrappers must not paint white strips between cards. * Keep the logo table, navigation, forum tables and statistic cards opaque; * only the enclosing layout canvas exposes the uniform body background. */ html:has(#collapseobj_forumbit_3) #spjpb #header, html:has(#collapseobj_forumbit_3) #spjpb #header div.page { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* Thread layout uses several separate .page wrappers. They are canvas, * not cards: expose the same background as the surrounding light page. */ html:has(#posts) #spjpb #header, html:has(#posts) #spjpb #header div.page { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* Inset both top/bottom New Thread + Reply rows without changing post * footer actions or stretching the buttons. Keep moderation aligned too. */ html:has(#posts) #spjpb form[action^="inlinemod.php?do=domovethread"] { padding: 0 16px !important; box-sizing: border-box; } html:has(#posts) #spjpb table:has(> tbody > tr > td.smallfont > a > img[src*="/buttons/newthread"]), html:has(#posts) #spjpb table:has(> tbody > tr > td.smallfont > a > img[src*="/buttons/reply"]) { background: transparent !important; box-shadow: none !important; margin: 12px 0 !important; } html:has(#posts) #spjpb table:has(> tbody > tr > td.smallfont > a > img[src*="/buttons/newthread"]) > tbody > tr > td, html:has(#posts) #spjpb table:has(> tbody > tr > td.smallfont > a > img[src*="/buttons/reply"]) > tbody > tr > td { padding: 12px 16px !important; vertical-align: middle !important; } html:has(#posts) #spjpb td.smallfont:has(> a > img[src*="/buttons/newthread"]) > a, html:has(#posts) #spjpb td.smallfont:has(> a > img[src*="/buttons/reply"]) > a { margin: 4px 8px 4px 0 !important; vertical-align: middle; } @media (max-width: 600px) { html:has(#posts) #spjpb td.smallfont:has(> a > img[src*="/buttons/newthread"]), html:has(#posts) #spjpb td.smallfont:has(> a > img[src*="/buttons/reply"]) { padding: 10px 12px !important; } } /* Release checks: explicit contrast for editor selectors and local drafts. */ #spjpb .ug_admin, #spjpb .ug_staff_1 { color: #98263f !important; } #spjpb .ug_staff_2 { color: #93432d !important; } #spjpb .ug_staff_3 { color: #226744 !important; } #spjpb .ug_staff_4 { color: #365b9a !important; } #spjpb .ug_staff_5 { color: #22667e !important; } #spjpb .ug_smember { color: #536171 !important; } #spjpb .ug_spiders { color: #596577 !important; } #spjpb .ug_newmember { color: #92526e !important; } #spjpb .ug_contributor { color: #72591b !important; } #spjpb .ug_oop, #spjpb .ug_spam { color: #93432d !important; } #spjpb .ug_mod { color: #226744 !important; } #spjpb .drwave-lastpost-go { background: #e8edf3 !important; color: #703044 !important; border-color: #c7d0db !important; } #spjpb .drwave-lastpost-go:hover, #spjpb .drwave-lastpost-go:focus-visible { background: #dce4ed !important; color: #512334 !important; } html.wck-photoplog-page #spjpb .smallfont > a[href*="index.php?v="], html.wck-photoplog-page #spjpb .smallfont > a[href*="upload.php"], html.wck-photoplog-page #spjpb .smallfont > a[href*="search.php"], html.wck-photoplog-page #spjpb .smallfont > a[href*="slideshow.php"], html.wck-photoplog-page #spjpb .smallfont > a[href*="album.php"], html.wck-photoplog-page #spjpb a.smallfont[href*="index.php?q="], html.wck-photoplog-page #spjpb .smallfont > a[href$="photoplog/index.php"] { background: #eef1f5 !important; color: #703044 !important; border-color: #c7d0db !important; text-shadow: none !important; } html #spjpb #header a[href="group.php?do=categorylist"], html #spjpb #header a[href="group.php?do=grouplist"], html #spjpb #header a[href="group.php?do=list"] { color: #703044 !important; text-shadow: none !important; } #spjpb #qrform .smallfont { color: #344354 !important; } html:has(#sg_catcloud) #spjpb #sg_catcloud .tfoot a, html:has(#sg_catcloud) #spjpb #sg_randomgroup .tfoot a, html:has(#sg_catcloud) #spjpb #sg_mygroups .tfoot a, html:has(#sg_catcloud) #spjpb #sg_newgroups .tfoot a { color: #703044 !important; } html.wck-photoplog-page #spjpb tbody#collapseobj_photoplog_subnavbar a:not([href="#top"]), html.wck-photoplog-page #spjpb tr#collapseobj_photoplog_letterbar a { color: #703044 !important; background: #eef1f5 !important; border-color: #c7d0db !important; text-shadow: none !important; } html.wck-photoplog-page #spjpb tbody#collapseobj_photoplog_subnavbar a:not([href="#top"]):hover, html.wck-photoplog-page #spjpb tr#collapseobj_photoplog_letterbar a:hover { color: #512334 !important; background: #dce4ed !important; } #catnav { scrollbar-color: #a76a7b #edf1f5 !important; } #catnav::-webkit-scrollbar-track { background: #edf1f5 !important; } #catnav::-webkit-scrollbar-thumb { background: #a76a7b !important; } #spjpb [id^="vB_Editor_"][id$="_font_out"], #spjpb [id^="vB_Editor_"][id$="_size_out"] { color: #344354 !important; background: transparent !important; } #spjpb .wck-draft-actions button { background: #edf1f5 !important; color: #703044 !important; border: 1px solid #bcc7d4 !important; text-shadow: none !important; } #spjpb .wck-draft-actions button:hover, #spjpb .wck-draft-actions button:focus-visible { background: #dfe6ee !important; color: #512334 !important; } #spjpb form[name="vbform"] fieldset.fieldset:has(input[name="iconid"]), #spjpb form[name="vbform"] fieldset.fieldset:has(input[name="iconid"]) td { background: #f7f9fb !important; color: #344354 !important; border-color: #d2dae3 !important; scrollbar-color: #aab7c5 #f7f9fb; } #spjpb form[name="vbform"] fieldset.fieldset:has(input[name="iconid"]) td:has(input:checked), #spjpb form[name="vbform"] fieldset.fieldset:has(input[name="iconid"]) td:has(input:checked) + td { background: #f6e9ed !important; border-color: #a76a7b !important; } /* PhotoPlog category cells and metrics have highly specific literal dark * backgrounds in the shared sheet. Match those components, including hover. */ html.wck-photoplog-page #spjpb table.tborder:has(#collapseobj_photoplog_letterbar) tr:has(> td:nth-child(7)):not(:has(> td.thead)) > td { background: #ffffff !important; border-color: #d5dde7 !important; color: #344354 !important; } html.wck-photoplog-page #spjpb table.tborder:has(#collapseobj_photoplog_letterbar) tr:has(> td:nth-child(7)):not(:has(> td.thead)) > td:first-child, html.wck-photoplog-page #spjpb table.tborder:has(#collapseobj_photoplog_letterbar) tr:has(> td:nth-child(7)):not(:has(> td.thead)) > td:last-child { border-color: #d5dde7 !important; } html.wck-photoplog-page #spjpb table.tborder:has(#collapseobj_photoplog_letterbar) tr:has(> td:nth-child(7)):not(:has(> td.thead)):nth-child(even) > td { background: #f5f7fa !important; } html.wck-photoplog-page #spjpb table.tborder:has(#collapseobj_photoplog_letterbar) tr:has(> td:nth-child(7)):not(:has(> td.thead)):hover > td { background: #eef2f6 !important; border-color: #cbd4df !important; color: #344354 !important; } html.wck-photoplog-page #spjpb tbody#collapseobj_photoplog_statbar > tr:nth-child(n) > td:nth-child(n) { background: #eef2f6 !important; border-color: #d5dde7 !important; color: #344354 !important; } html.wck-photoplog-page #spjpb tbody#collapseobj_photoplog_statbar > tr:nth-child(n):hover > td:nth-child(n) { background: #eef2f6 !important; color: #344354 !important; } html.wck-photoplog-page #spjpb a:has(img[src$="/lastpost.gif"]) { display: inline-flex !important; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; margin-left: 4px; padding: 2px 4px !important; border: 1px solid #d5dde7 !important; border-radius: 5px; background: #e9edf2 !important; color: #761024 !important; box-shadow: none !important; } html.wck-photoplog-page #spjpb a:has(img[src$="/lastpost.gif"])::before { content: none !important; } html.wck-photoplog-page #spjpb a:has(img[src$="/lastpost.gif"])::after { content: "\2192"; color: #761024 !important; } html.wck-photoplog-page #spjpb a:has(img[src$="/lastpost.gif"]) > img { position: absolute !important; width: 1px !important; height: 1px !important; clip-path: inset(50%); } html.wck-photoplog-page #spjpb a:has(img[src$="/lastpost.gif"]):hover, html.wck-photoplog-page #spjpb a:has(img[src$="/lastpost.gif"]):focus-visible { background: #dfe6ee !important; } /* Style 87 member profiles: cover legacy tab states and plugin panels. */ #usercss #profile_tabs > ul.tab_list { background: transparent !important; padding: 6px 0 !important; } #usercss #profile_tabs > ul.tab_list > li.thead { background: #eef2f6 !important; color: #344354 !important; border-color: #d5dde7 !important; box-shadow: none !important; } #usercss #profile_tabs > ul.tab_list > li.thead:hover, #usercss #profile_tabs > ul.tab_list > li.thead:focus-visible { background: #e3e9f0 !important; color: #761024 !important; border-color: #aab8c8 !important; transform: none !important; box-shadow: none !important; } #usercss #profile_tabs > ul.tab_list > li.tcat, #usercss #profile_tabs > ul.tab_list > li.tcat:hover { background: #f5e8ec !important; color: #761024 !important; border-color: #d5abb6 !important; box-shadow: inset 0 -3px 0 #981832 !important; } #usercss #profile_tabs .tab_header { background: transparent !important; border: 0 !important; box-shadow: none !important; } #usercss #profile_tabs .content_block, #usercss #sidebar_container .content_block { background: #fff !important; color: #344354 !important; border-color: #d5dde7 !important; box-shadow: 0 3px 10px rgba(40, 55, 75, .07) !important; } #usercss #profile_tabs .content_block > .block_title, #usercss #sidebar_container .content_block > .block_title { background: #eef2f6 !important; color: #344354 !important; padding: 10px 12px !important; } #usercss #profile_tabs .content_block .block_row, #usercss #profile_tabs #modsystem .block_row, #usercss #profile_tabs #dl2modification .block_row, #usercss #sidebar_container .content_block .block_row { background: #fff !important; color: #344354 !important; border-color: #e0e6ee !important; } #usercss #profile_tabs .content_block .block_footer, #usercss #sidebar_container .content_block .block_footer, #usercss #profile_tabs .statistics_group, #usercss #profile_tabs fieldset { background: #f7f9fb !important; color: #344354 !important; border-color: #d5dde7 !important; box-shadow: none !important; } #usercss #profile_tabs .statistics_group legend, #usercss #profile_tabs fieldset legend { color: #761024 !important; } #usercss #profile_tabs .statistics_group .shade, #usercss .profilefield_list .shade, #usercss #sidebar_container .shade { color: #5d6977 !important; } #usercss #profile_tabs #modsystem td, #usercss #profile_tabs #dl2modification td, #usercss #profile_tabs #modsystem tbody[id^="collapseobj_tab_modinfo"] > tr > td { background: #fff !important; color: #344354 !important; border-color: #d5dde7 !important; } #usercss #profile_tabs #modsystem tbody[id^="collapseobj_tab_modinfo"] > tr:hover > td, #usercss #profile_tabs #dl2modification tr:hover > td { background: #eef2f6 !important; color: #344354 !important; } #usercss #profile_tabs #modsystem td.tcat, #usercss #profile_tabs #modsystem td.thead, #usercss #profile_tabs #dl2modification td.tcat, #usercss #profile_tabs #dl2modification td.thead { background: #eef2f6 !important; color: #344354 !important; } #usercss #link_bar { padding: 0 !important; } #usercss #link_bar > .block_title { padding: 8px 12px !important; display: flex; flex-wrap: wrap; gap: 8px 16px; background: #f7f9fb !important; } #usercss #link_bar > .block_title > li { background: transparent !important; padding: 4px 0 !important; } #usercss #link_bar > .block_title > li:hover { background: transparent !important; color: #761024 !important; } #usercss #link_bar > .block_title a:hover { color: #761024 !important; text-decoration: underline !important; } /* Keep the identity column inset like the profile action/content rows. */ #usercss #main_userinfo #username_box { padding: 12px 14px 14px !important; box-sizing: border-box; } #usercss #main_userinfo #username_box h1 { margin: 0 0 4px !important; line-height: 1.3; } #usercss #main_userinfo #username_box h2 { margin: 0 !important; line-height: 1.5; color: #5d6977 !important; } /* Social-group overview: consistent insets and unclipped group names. */ html:has(#sg_catcloud) #spjpb :is(#sg_catcloud, #sg_randomgroup, #sg_mygroups, #sg_newgroups) { padding: 0 !important; } html:has(#sg_catcloud) #spjpb :is(#sg_catcloud, #sg_randomgroup, #sg_mygroups, #sg_newgroups) table.tborder { width: 100% !important; min-width: 100% !important; box-sizing: border-box; box-shadow: 0 3px 10px rgba(40, 55, 75, .07) !important; } html:has(#sg_catcloud) #spjpb :is(#sg_catcloud, #sg_randomgroup, #sg_mygroups, #sg_newgroups) table.tborder > tbody > tr > td { padding: 14px 16px !important; } html:has(#sg_catcloud) #spjpb :is(#sg_catcloud, #sg_randomgroup, #sg_mygroups, #sg_newgroups) table.tborder > tbody > tr > td.tcat { background: #eef2f6 !important; color: #344354 !important; border-color: #d5dde7 !important; } html:has(#sg_catcloud) #spjpb :is(#sg_catcloud, #sg_randomgroup, #sg_mygroups, #sg_newgroups) .tcat::after { content: none !important; } html:has(#sg_catcloud) #spjpb #sg_newgroups div.sgicon { width: auto !important; height: auto !important; min-height: 148px; float: none !important; margin: 0 !important; box-sizing: border-box; overflow: visible !important; background: #f7f9fb !important; box-shadow: none !important; } html:has(#sg_catcloud) #spjpb #sg_newgroups div.sgicon > a { display: flex; flex-direction: column; align-items: center; width: 100%; } html:has(#sg_catcloud) #spjpb #sg_newgroups div.sgicon img.sgicon { width: 100% !important; height: 92px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; box-shadow: none !important; border: 0 !important; background: transparent !important; } html:has(#sg_catcloud) #spjpb #sg_newgroups div.sgicon .smallfont { width: 100% !important; height: auto !important; white-space: normal !important; overflow-wrap: anywhere; color: #344354 !important; } html:has(#sg_catcloud) #spjpb #sg_newgroups div.sgicon:hover { background: #eef2f6 !important; border-color: #aab8c8 !important; transform: none !important; } html:has(#sg_catcloud) #spjpb #sg_randomgroup img.sgicon { margin: 0 !important; object-fit: contain !important; box-shadow: none !important; } html:has(#sg_catcloud) #spjpb .action_links { margin: 4px 8px 12px 0 !important; } /* Style 87: the attachment thanks gate must follow the light UI, even * when its plugin-wide palette is configured for the dark default style. */ #spjpb .vbm-thanks-download-panel { --vbm-thanks-border: #d5dde7 !important; --vbm-thanks-accent: #981832 !important; --vbm-thanks-title-start: #eef2f6 !important; --vbm-thanks-title-end: #eef2f6 !important; --vbm-thanks-title-text: #761024 !important; --vbm-thanks-surface: #f7f9fb !important; --vbm-thanks-message: #344354 !important; --vbm-thanks-message-hover: #761024 !important; --vbm-thanks-icon: #981832 !important; background: #f7f9fb !important; border-color: #d5dde7 !important; border-left-color: #981832 !important; } #spjpb .vbm-thanks-download-panel .vbm-thanks-download-title { background: #eef2f6 !important; color: #761024 !important; border-color: #d5dde7 !important; } #spjpb .vbm-thanks-download-panel .vbm-thanks-download-notice, #spjpb .vbm-thanks-download-panel .vbm-thanks-download-notice strong { background: #f7f9fb !important; color: #344354 !important; } #spjpb .vbm-thanks-download-panel .vbm-thanks-download-title__icon, #spjpb .vbm-thanks-download-panel .vbm-thanks-download-notice__icon { color: #981832 !important; } #spjpb .vbm-thanks-download-panel .vbm-thanks-download-notice a { color: #8f1530 !important; text-decoration: underline; } #spjpb .vbm-thanks-download-panel .vbm-thanks-download-notice a:hover, #spjpb .vbm-thanks-download-panel .vbm-thanks-download-notice a:focus-visible { color: #641027 !important; background: #f5e8ec !important; } /* Style 87 mobile/accessibility audit, 2026-10-06. Shared dark CSS unchanged. */ html:has(#threadslist) #spjpb .vbmenu_control { background: #eef1f5 !important; color: #344454 !important; } html:has(#threadslist) #spjpb .vbmenu_control:hover, html:has(#threadslist) #spjpb .vbmenu_control:focus-within { background: #e1e7ee !important; color: #512334 !important; } #catnav .nav2 li:has(> a[href=""]) { display: none !important; } #spjpb textarea:focus-visible, #spjpb [contenteditable="true"]:focus-visible, #spjpb [tabindex]:focus-visible { outline: 2px solid #805269 !important; outline-offset: 3px; } /* Dark-theme mobile labels need stronger contrast on light cards. */ html.wck-links-page #spjpb tbody[id^="collapseobj_catbit_"] > tr > td:nth-child(n+3)::before, html.wck-links-page #spjpb table.tborder:has(> thead .thead[width="4%"]) > tbody:not([id]) > tr:not(:has(> td.tcat)) > td:nth-child(n+2)::before, html.wck-links-page #spjpb tbody[id^="collapseobj_newlinks"] > tr:not(:first-child) > td:nth-child(n+4)::before, html.wck-links-page #spjpb tbody[id^="collapseobj_randlinks"] > tr:not(:first-child) > td:nth-child(n+4)::before, html.wck-photoplog-page #spjpb table.tborder:has(#collapseobj_photoplog_letterbar) > tbody > tr:has(> td:nth-child(7)):not(:has(> td.thead)) > td:nth-child(n+4)::before { color: #703044 !important; font-size: 11px; line-height: 1.4; } /* Legacy Downloads homepage has no #wck-downloads wrapper. */ html.wck-downloads-page #spjpb .thead, html.wck-downloads-page #spjpb .thead .smallfont { background: #eef1f5 !important; color: #344454 !important; } @media (max-width: 760px) { /* Legacy thread lists and pagination: contain controls without hiding * thread titles, last-post information, statistics or moderation fields. */ html:has(#threadslist) #spjpb table:has(> tbody > tr > td > .pagenav) > tbody > tr { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } html:has(#threadslist) #spjpb table:has(> tbody > tr > td > .pagenav) > tbody > tr > td { display: block; min-width: 0; max-width: 100%; } html:has(#threadslist) #spjpb .pagenav { max-width: 100%; overflow-x: auto; } html:has(#threadslist) #spjpb .tborder:has(> tbody > tr > td.vbmenu_control) { table-layout: fixed; } html:has(#threadslist) #spjpb .vbmenu_control { white-space: normal !important; overflow-wrap: anywhere; } #spjpb #threadslist { display: block !important; width: 100% !important; } #spjpb #threadslist > tbody[id^="threadbits_"] { display: grid; gap: 12px; padding: 10px; } #spjpb #threadslist > tbody[id^="threadbits_"] > tr { display: block; padding: 12px; border: 1px solid #c7d0db; border-radius: 10px; background: #f7f9fb; } #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td { display: block; width: auto !important; min-width: 0; padding: 6px !important; background: transparent !important; white-space: normal !important; overflow-wrap: anywhere; } #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td :is(div, span) { white-space: normal !important; } #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td[id^="td_threadstatusicon_"], #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td:has(> img), #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td[align="center"], #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td:has(> input[type="checkbox"]) { display: inline-block; vertical-align: middle; } #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td[align="center"]::before { color: #703044; font-size: 11px; padding-right: 4px; } #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td:nth-child(1 of [align="center"])::before { content: "Replies:"; } #spjpb #threadslist > tbody[id^="threadbits_"] > tr > td:nth-child(2 of [align="center"])::before { content: "Views:"; } html:has(#threadslist) #spjpb form:has(#sel_prefixid) > table > tbody > tr, html:has(#threadslist) #spjpb form:has(#sel_prefixid) > table > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; } html:has(#threadslist) #spjpb form:has(#sel_prefixid) table:has(select) { width: 100% !important; table-layout: fixed; } html:has(#threadslist) #spjpb form:has(#sel_prefixid) select { max-width: 100%; } /* Show every brand destination, not a tall empty horizontal scroll rail. */ #catnav { overflow: visible !important; height: auto !important; } #catnav .nav2 { width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; box-sizing: border-box; padding: 7px !important; } #catnav .nav2 li, #catnav .nav2 li.fr, #catnav .nav2 li.last { width: auto !important; min-width: 0 !important; max-width: none; } #catnav .nav2 li > a { min-height: 44px !important; box-sizing: border-box; padding: 7px 5px !important; font-size: 11px; line-height: 1.35; white-space: normal !important; overflow-wrap: anywhere; } #header div.tborder[style*="border-top-width"] .vbmenu_control { flex: 1 1 calc(33.333% - 5px) !important; min-width: 0; } #header div.tborder[style*="border-top-width"] .vbmenu_control a { min-height: 44px !important; padding: 8px 5px !important; font-size: 11px; line-height: 1.4; } #spjpb #usercss #profile_tabs { display: block !important; } #spjpb #usercss #profile_tabs > ul.tab_list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; height: auto !important; } #spjpb #usercss #profile_tabs > ul.tab_list > li:not(.overflow_tab) { width: auto !important; margin: 0 !important; min-height: 44px; box-sizing: border-box; } /* Single-cell social cards must not retain intrinsic desktop widths. */ html:has(#sg_catcloud) #spjpb :is(#sg_catcloud, #sg_randomgroup, #sg_mygroups) { width: 100% !important; min-width: 0 !important; box-sizing: border-box; } html:has(#sg_catcloud) #spjpb :is(#sg_catcloud, #sg_randomgroup, #sg_mygroups) :is(table.tborder, table.tborder > tbody, table.tborder > tbody > tr, table.tborder > tbody > tr > td) { display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box; } html:has(#sg_catcloud) #spjpb #sg_randomgroup .sgicon { float: none !important; margin: 0 0 12px !important; } /* Downloads: main content first, supporting sidebar below on phones. */ html.wck-downloads-page #spjpb table:has(> tbody > tr > td[width="225"]), html.wck-downloads-page #spjpb table:has(> tbody > tr > td[width="225"]) > tbody { display: block !important; width: 100% !important; min-width: 0 !important; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td[width="225"]) > tbody > tr { display: flex !important; flex-direction: column; gap: 16px; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td[width="225"]) > tbody > tr > td { display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box; } html.wck-downloads-page #spjpb td[width="225"] { order: 2; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) { display: block !important; width: 100% !important; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) > tbody { display: grid; gap: 12px; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) > tbody > tr:first-child { display: none; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) > tbody > tr:not(:first-child) { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid #c7d0db; border-radius: 10px; padding: 12px; background: #f7f9fb; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) > tbody > tr > td { width: auto !important; min-width: 0; padding: 6px !important; white-space: normal !important; background: transparent !important; overflow-wrap: anywhere; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) > tbody > tr > td:nth-child(3)::before { content: "Files"; display: block; color: #703044; font-size: 11px; font-weight: 700; } html.wck-downloads-page #spjpb table:has(> tbody > tr > td.thead[width="70%"]) img { max-width: 120px !important; max-height: 100px; object-fit: contain; } }