Enjoy SWAT Portal forum in different colors / themes

Aldenmar Odin · May 16th 2026

Just install "Stylus" extension and use this CSS to change SWAT Portal to blue.

Just ask me to create other colours or themes.

pasted-from-clipboard.png

Code

/*
* SWAT Portal BlackOps: red-to-blue theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--swat-blue: #2f95ff;
--swat-blue-dark: #0d4f91;
--swat-blue-mid: #1976d2;
--swat-blue-soft: rgba(47, 149, 255, 0.22);
--swat-blue-glow: rgba(47, 149, 255, 0.55);
--swat-blue-border: rgba(47, 149, 255, 0.9);
--swat-input-blue: #071c33;
--swat-panel-blue: rgba(5, 27, 58, 0.96);
--swat-panel-blue-dark: rgba(1, 10, 24, 0.98);
}
html,
body {
background-color: #020712 !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(101, 181, 255, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(125, 205, 255, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(51, 147, 255, 0.44) 0%, rgba(17, 65, 137, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(75, 146, 255, 0.34) 0%, rgba(23, 58, 128, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(23, 86, 180, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #030815 0%, #071326 38%, #02050d 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(120, 205, 255, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(26, 106, 225, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(2, 9, 22, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(5, 13, 27, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(72, 155, 255, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(122, 204, 255, 0.42) 0%, rgba(23, 95, 170, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(9, 36, 88, 0.92) 0%, rgba(3, 12, 34, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(2, 8, 21, 0.9), rgba(4, 19, 48, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(117, 207, 255, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(43, 137, 255, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(10, 31, 72, 0.94) 0%, rgba(5, 14, 34, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(178deg) saturate(1.35) brightness(1.08) drop-shadow(0 0 10px rgba(47, 149, 255, 0.45)) !important;
}
::selection {
background: var(--swat-blue-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-blue-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--swat-blue) !important;
}
a:hover,
a:focus {
color: #8ec8ff !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-blue-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(4, 29, 66, 0.98), rgba(1, 12, 30, 0.98)) !important;
border-color: var(--swat-blue-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(141, 207, 255, 0.34) inset, 0 -2px 0 var(--swat-blue-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-blue-mid) !important;
border-color: var(--swat-blue-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-blue-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-blue-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
box-shadow: 0 0 8px var(--swat-blue-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #2f95ff 0%, #1267b8 48%, #07386e 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
box-shadow: 0 1px 0 rgba(189, 226, 255, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(47, 149, 255, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #dff1ff !important;
text-shadow: 0 0 8px rgba(47, 149, 255, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(11, 25, 45, 0.98), rgba(7, 17, 32, 0.98)) !important;
border-color: rgba(72, 155, 255, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(15, 38, 68, 0.98), rgba(8, 23, 44, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #2f95ff 0%, #1267b8 50%, #07386e 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(47, 149, 255, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(121, 193, 255, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
box-shadow: 0 0 5px var(--swat-blue-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-blue), var(--swat-blue-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-blue-dark), var(--swat-blue-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-blue-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-blue-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-blue) !important;
border-color: rgba(47, 149, 255, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-blue) !important;
box-shadow: 0 0 7px var(--swat-blue-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(47, 149, 255, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(3, 13, 31, 0.98), rgba(7, 35, 78, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(47, 149, 255, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(3, 13, 31, 0.98), rgba(7, 35, 78, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(47, 149, 255, 1), rgba(13, 79, 145, 1)) !important;
box-shadow: 0 1px 0 rgba(142, 200, 255, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(10, 22, 38, 0.98), rgba(6, 15, 28, 0.98)) !important;
border-color: rgba(47, 149, 255, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(47, 149, 255, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(8, 26, 48, 0.98), rgba(4, 13, 27, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(47, 149, 255, 0.18) !important;
background-color: rgba(5, 17, 34, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(7, 16, 29, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #8ec8ff !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(47, 149, 255, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(47, 149, 255, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #2f95ff 0%, #1267b8 48%, #07386e 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(47, 149, 255, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(72, 155, 255, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-blue) !important;
border-color: rgba(47, 149, 255, 0.35) !important;
color: rgba(220, 238, 255, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #0f1422;
--dash-panel: rgba(17, 24, 39, 0.96);
--dash-panel-2: rgba(13, 21, 36, 0.98);
--dash-card: rgba(19, 31, 49, 0.94);
--dash-card-hover: rgba(22, 43, 66, 0.96);
--dash-border: rgba(116, 142, 176, 0.22);
--dash-accent: #23b5e8;
--dash-accent-2: #38d4ff;
--dash-text: #eef6ff;
--dash-muted: #aebbd0;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(30, 94, 135, 0.18), transparent 46%),
linear-gradient(180deg, #101827 0%, #0f1422 42%, #0b1020 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(178deg) saturate(1.2) brightness(1.1) drop-shadow(0 0 12px rgba(56, 212, 255, 0.22)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(9, 34, 56, 0.98), rgba(17, 83, 105, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #c7d3e5 !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(35, 181, 232, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(56, 212, 255, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(15, 22, 35, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(13, 22, 37, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #b9efff !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(14, 70, 108, 0.98), rgba(22, 113, 141, 0.82)) !important;
border: 1px solid rgba(56, 212, 255, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #3abfff !important;
}
a:hover,
a:focus {
color: #9be8ff !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(35, 181, 232, 0.2) !important;
border: 1px solid rgba(56, 212, 255, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #ecfbff !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(35, 181, 232, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(12, 18, 31, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(72, 155, 255, 0.18) !important;
box-shadow: 0 1px 0 rgba(141, 207, 255, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(178, 194, 210, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: var(--swat-blue) !important;
text-shadow: 0 0 0.5em var(--swat-blue) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--swat-blue) !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(10, 16, 28, 0.88) !important;
border: 1px solid rgba(116, 142, 176, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(8, 14, 25, 0.96), rgba(13, 26, 42, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(116, 142, 176, 0.2) !important;
background: rgba(20, 56, 78, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #34cfff !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(207, 226, 241, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(13, 21, 36, 0.96) !important;
border-color: rgba(116, 142, 176, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(8, 18, 32, 0.94) !important;
border-color: rgba(35, 181, 232, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(35, 181, 232, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(35, 181, 232, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(35, 181, 232, 0.18) !important;
border-color: rgba(35, 181, 232, 0.55) !important;
color: #eafaff !important;
}

Display More

----------------------------------

Freelancer Theme

pasted-from-clipboard.png

Code

/*
* SWAT Portal BlackOps: Freelancer space HUD theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--swat-blue: #2f95ff;
--swat-blue-dark: #0d4f91;
--swat-blue-mid: #1976d2;
--swat-blue-soft: rgba(47, 149, 255, 0.22);
--swat-blue-glow: rgba(47, 149, 255, 0.55);
--swat-blue-border: rgba(47, 149, 255, 0.9);
--swat-input-blue: #071c33;
--swat-panel-blue: rgba(5, 27, 58, 0.96);
--swat-panel-blue-dark: rgba(1, 10, 24, 0.98);
}
html,
body {
background-color: #020712 !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(101, 181, 255, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(125, 205, 255, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(51, 147, 255, 0.44) 0%, rgba(17, 65, 137, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(75, 146, 255, 0.34) 0%, rgba(23, 58, 128, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(23, 86, 180, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #030815 0%, #071326 38%, #02050d 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(120, 205, 255, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(26, 106, 225, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(2, 9, 22, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(5, 13, 27, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(72, 155, 255, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(122, 204, 255, 0.42) 0%, rgba(23, 95, 170, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(9, 36, 88, 0.92) 0%, rgba(3, 12, 34, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(2, 8, 21, 0.9), rgba(4, 19, 48, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(117, 207, 255, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(43, 137, 255, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(10, 31, 72, 0.94) 0%, rgba(5, 14, 34, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(178deg) saturate(1.35) brightness(1.08) drop-shadow(0 0 10px rgba(47, 149, 255, 0.45)) !important;
}
::selection {
background: var(--swat-blue-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-blue-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--swat-blue) !important;
}
a:hover,
a:focus {
color: #8ec8ff !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-blue-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(4, 29, 66, 0.98), rgba(1, 12, 30, 0.98)) !important;
border-color: var(--swat-blue-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(141, 207, 255, 0.34) inset, 0 -2px 0 var(--swat-blue-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-blue-mid) !important;
border-color: var(--swat-blue-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-blue-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-blue-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
box-shadow: 0 0 8px var(--swat-blue-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #2f95ff 0%, #1267b8 48%, #07386e 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
box-shadow: 0 1px 0 rgba(189, 226, 255, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(47, 149, 255, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #dff1ff !important;
text-shadow: 0 0 8px rgba(47, 149, 255, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(11, 25, 45, 0.98), rgba(7, 17, 32, 0.98)) !important;
border-color: rgba(72, 155, 255, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(15, 38, 68, 0.98), rgba(8, 23, 44, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #2f95ff 0%, #1267b8 50%, #07386e 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(47, 149, 255, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(121, 193, 255, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
box-shadow: 0 0 5px var(--swat-blue-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-blue), var(--swat-blue-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-blue-dark), var(--swat-blue-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-blue-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-blue-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-blue) !important;
border-color: rgba(47, 149, 255, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-blue) !important;
box-shadow: 0 0 7px var(--swat-blue-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(47, 149, 255, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(3, 13, 31, 0.98), rgba(7, 35, 78, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(47, 149, 255, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(3, 13, 31, 0.98), rgba(7, 35, 78, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(47, 149, 255, 1), rgba(13, 79, 145, 1)) !important;
box-shadow: 0 1px 0 rgba(142, 200, 255, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(10, 22, 38, 0.98), rgba(6, 15, 28, 0.98)) !important;
border-color: rgba(47, 149, 255, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(47, 149, 255, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(8, 26, 48, 0.98), rgba(4, 13, 27, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(47, 149, 255, 0.18) !important;
background-color: rgba(5, 17, 34, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(7, 16, 29, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #8ec8ff !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(47, 149, 255, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(47, 149, 255, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #2f95ff 0%, #1267b8 48%, #07386e 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(47, 149, 255, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(72, 155, 255, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-blue) !important;
border-color: rgba(47, 149, 255, 0.35) !important;
color: rgba(220, 238, 255, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #0f1422;
--dash-panel: rgba(17, 24, 39, 0.96);
--dash-panel-2: rgba(13, 21, 36, 0.98);
--dash-card: rgba(19, 31, 49, 0.94);
--dash-card-hover: rgba(22, 43, 66, 0.96);
--dash-border: rgba(116, 142, 176, 0.22);
--dash-accent: #23b5e8;
--dash-accent-2: #38d4ff;
--dash-text: #eef6ff;
--dash-muted: #aebbd0;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(30, 94, 135, 0.18), transparent 46%),
linear-gradient(180deg, #101827 0%, #0f1422 42%, #0b1020 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(178deg) saturate(1.2) brightness(1.1) drop-shadow(0 0 12px rgba(56, 212, 255, 0.22)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(9, 34, 56, 0.98), rgba(17, 83, 105, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #c7d3e5 !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(35, 181, 232, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(56, 212, 255, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(15, 22, 35, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(13, 22, 37, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #b9efff !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(14, 70, 108, 0.98), rgba(22, 113, 141, 0.82)) !important;
border: 1px solid rgba(56, 212, 255, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #3abfff !important;
}
a:hover,
a:focus {
color: #9be8ff !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(35, 181, 232, 0.2) !important;
border: 1px solid rgba(56, 212, 255, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #ecfbff !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(35, 181, 232, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(12, 18, 31, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-blue) 0%, var(--swat-blue-dark) 100%) !important;
border-color: #79c1ff var(--swat-blue-mid) var(--swat-blue-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(72, 155, 255, 0.18) !important;
box-shadow: 0 1px 0 rgba(141, 207, 255, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(178, 194, 210, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: var(--swat-blue) !important;
text-shadow: 0 0 0.5em var(--swat-blue) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--swat-blue) !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(10, 16, 28, 0.88) !important;
border: 1px solid rgba(116, 142, 176, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(8, 14, 25, 0.96), rgba(13, 26, 42, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(116, 142, 176, 0.2) !important;
background: rgba(20, 56, 78, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #34cfff !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(207, 226, 241, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(13, 21, 36, 0.96) !important;
border-color: rgba(116, 142, 176, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(8, 18, 32, 0.94) !important;
border-color: rgba(35, 181, 232, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(35, 181, 232, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(35, 181, 232, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(35, 181, 232, 0.18) !important;
border-color: rgba(35, 181, 232, 0.55) !important;
color: #eafaff !important;
}
/*
* Freelancer main-menu inspired layer.
* References the local screenshot as visual direction, but keeps the theme CSS-only.
*/
:root {
--fl-space: #020515;
--fl-space-deep: #00020a;
--fl-panel: rgba(8, 13, 56, 0.82);
--fl-panel-dark: rgba(2, 5, 24, 0.94);
--fl-panel-hover: rgba(13, 28, 82, 0.9);
--fl-cyan: #04dcff;
--fl-cyan-2: #72efff;
--fl-cyan-soft: rgba(4, 220, 255, 0.22);
--fl-cyan-border: rgba(4, 220, 255, 0.72);
--fl-cyan-glow: rgba(4, 220, 255, 0.52);
--fl-purple: rgba(63, 16, 118, 0.34);
--fl-purple-strong: rgba(106, 28, 172, 0.42);
--fl-yellow: #f5ef62;
--fl-orange: #ff8a2a;
--fl-text: #dcfbff;
--fl-muted: #93a9c7;
--swat-blue: var(--fl-cyan);
--swat-blue-dark: #081147;
--swat-blue-mid: #087cc4;
--swat-blue-soft: var(--fl-cyan-soft);
--swat-blue-glow: var(--fl-cyan-glow);
--swat-blue-border: var(--fl-cyan-border);
--swat-input-blue: rgba(2, 6, 26, 0.92);
}
html,
body {
background-color: var(--fl-space-deep) !important;
background-image:
radial-gradient(circle at 24% 7%, rgba(255, 138, 42, 0.48) 0 3.4rem, rgba(122, 45, 17, 0.3) 3.5rem 5.2rem, transparent 5.3rem),
radial-gradient(circle at 25% 7%, rgba(255, 228, 156, 0.2), transparent 8rem),
radial-gradient(ellipse at 84% 30%, rgba(152, 190, 165, 0.18) 0%, transparent 34%),
radial-gradient(ellipse at 30% 100%, var(--fl-purple-strong) 0%, transparent 54%),
radial-gradient(ellipse at 8% 78%, rgba(0, 196, 255, 0.16) 0%, transparent 44%),
radial-gradient(circle at 16% 44%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
radial-gradient(circle at 37% 86%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.58) 0 1px, transparent 2px),
linear-gradient(112deg, #010713 0%, #04071b 30%, #100522 64%, #00020a 100%) !important;
background-attachment: fixed !important;
background-size:
cover,
cover,
cover,
cover,
cover,
280px 260px,
420px 360px,
520px 460px,
cover !important;
color: var(--fl-text) !important;
}
body::before {
background:
linear-gradient(180deg, transparent 0 20%, rgba(4, 220, 255, 0.16) 20.2%, rgba(255, 255, 255, 0.78) 20.6%, rgba(4, 220, 255, 0.12) 21%, transparent 21.8%),
linear-gradient(180deg, transparent 0 28%, rgba(4, 220, 255, 0.12) 28.1%, rgba(255, 255, 255, 0.72) 28.35%, transparent 29.1%),
radial-gradient(ellipse at 58% 14%, rgba(255, 255, 255, 0.18) 0%, transparent 34%),
linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 24%, transparent 75%, rgba(0, 0, 0, 0.66)) !important;
background-size: cover !important;
opacity: 0.86 !important;
}
body,
button,
input,
select,
textarea {
font-family: "Rajdhani", "Agency FB", "Bank Gothic", "Eurostile", "Arial Narrow", Arial, sans-serif !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel,
#pageContainer,
.pageWrapperContainer {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1700px !important;
}
#pageLogoContainer {
min-height: 128px !important;
padding: 24px 0 16px !important;
background-image:
linear-gradient(90deg, transparent 0 3%, rgba(255, 255, 255, 0.86) 12%, rgba(4, 220, 255, 0.38) 30%, transparent 43%),
linear-gradient(90deg, transparent 0 5%, rgba(255, 255, 255, 0.72) 16%, rgba(4, 220, 255, 0.28) 33%, transparent 46%),
radial-gradient(ellipse at 25% 38%, rgba(255, 255, 255, 0.22) 0%, transparent 40%) !important;
background-position: left 30px top 22px, left 40px top 104px, left top !important;
background-repeat: no-repeat !important;
background-size: 720px 5px, 640px 4px, 820px 140px !important;
}
#pageLogoContainer::before {
background:
radial-gradient(circle at 28% 38%, rgba(255, 138, 42, 0.44) 0 58px, rgba(89, 35, 18, 0.34) 59px 88px, transparent 90px),
radial-gradient(ellipse at 22% 46%, rgba(4, 220, 255, 0.22) 0%, transparent 45%),
linear-gradient(90deg, rgba(0, 3, 12, 0.72), transparent 55%) !important;
opacity: 0.72 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: saturate(0.85) brightness(1.18) drop-shadow(0 0 10px rgba(255, 255, 255, 0.68)) drop-shadow(0 0 24px var(--fl-cyan-glow)) !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before {
color: var(--fl-cyan-2) !important;
text-shadow: 0 0 8px rgba(4, 220, 255, 0.34) !important;
}
a:hover,
a:focus {
color: #ffffff !important;
text-shadow: 0 0 10px var(--fl-cyan-glow), 0 0 18px rgba(255, 255, 255, 0.3) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
background: rgba(2, 5, 22, 0.76) !important;
border: 1px solid rgba(4, 220, 255, 0.35) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 1px rgba(114, 239, 255, 0.12) inset, 0 0 24px rgba(4, 220, 255, 0.15) !important;
overflow: visible !important;
}
.mainMenu > .boxMenu,
.userPanelItems {
background: transparent !important;
border: 0 !important;
gap: 6px !important;
padding: 8px !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background:
linear-gradient(180deg, rgba(19, 35, 92, 0.72), rgba(4, 9, 39, 0.88)) !important;
border: 1px solid rgba(4, 220, 255, 0.48) !important;
border-radius: 0 !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 14px rgba(4, 220, 255, 0.2),
0 8px 20px rgba(0, 0, 0, 0.42) !important;
clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%) !important;
color: var(--fl-text) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
text-shadow: 0 0 8px rgba(4, 220, 255, 0.45), 0 1px 0 #000 !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.28), transparent 48%),
linear-gradient(180deg, rgba(15, 75, 118, 0.94), rgba(5, 18, 64, 0.96)) !important;
border-color: rgba(114, 239, 255, 0.92) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.2) inset,
0 0 18px var(--fl-cyan-glow),
0 0 34px rgba(4, 220, 255, 0.22) !important;
color: #ffffff !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink {
color: var(--fl-yellow) !important;
text-shadow: 0 0 9px rgba(245, 239, 98, 0.65), 0 0 18px var(--fl-cyan-glow) !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.dropdownMenu,
.dropdown,
.menuOverlay,
.interactiveDropdown,
.popover,
.dialogContainer {
background:
linear-gradient(180deg, rgba(8, 14, 54, 0.98), rgba(2, 5, 24, 0.98)) !important;
border: 1px solid var(--fl-cyan-border) !important;
border-radius: 0 !important;
box-shadow: 0 0 22px rgba(4, 220, 255, 0.24), 0 18px 42px rgba(0, 0, 0, 0.58) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
#pageHeaderSubMenu,
.pageHeaderSubMenu {
background:
linear-gradient(90deg, rgba(2, 6, 28, 0.92), rgba(11, 23, 75, 0.72), rgba(2, 6, 28, 0.92)) !important;
border: 1px solid rgba(4, 220, 255, 0.34) !important;
border-bottom: 3px solid rgba(4, 220, 255, 0.72) !important;
border-radius: 0 !important;
box-shadow: 0 0 16px rgba(4, 220, 255, 0.14) !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after,
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background:
linear-gradient(180deg, rgba(9, 15, 55, 0.84), rgba(2, 6, 28, 0.92)) !important;
border: 1px solid rgba(4, 220, 255, 0.28) !important;
border-radius: 2px !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 0 22px rgba(4, 220, 255, 0.1),
0 18px 42px rgba(0, 0, 0, 0.36) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background:
linear-gradient(180deg, rgba(10, 16, 58, 0.68), rgba(3, 7, 30, 0.88)) !important;
border-color: rgba(4, 220, 255, 0.22) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
radial-gradient(ellipse at 12% 50%, rgba(4, 220, 255, 0.16), transparent 42%),
linear-gradient(180deg, rgba(14, 34, 89, 0.84), rgba(5, 11, 42, 0.94)) !important;
border-color: rgba(114, 239, 255, 0.62) !important;
box-shadow: 0 0 24px rgba(4, 220, 255, 0.2), 0 18px 42px rgba(0, 0, 0, 0.42) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background:
linear-gradient(90deg, transparent, rgba(4, 220, 255, 0.18) 6%, rgba(6, 12, 50, 0.92) 18%, rgba(10, 18, 72, 0.9) 80%, transparent) !important;
border: 0 !important;
border-bottom: 1px solid rgba(4, 220, 255, 0.54) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 18px rgba(4, 220, 255, 0.16) !important;
color: var(--fl-text) !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
text-shadow: 0 0 10px rgba(4, 220, 255, 0.55), 0 1px 0 #000 !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: var(--fl-text) !important;
text-shadow: 0 0 10px rgba(4, 220, 255, 0.58), 0 1px 0 #000 !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background:
linear-gradient(180deg, rgba(18, 38, 102, 0.92), rgba(5, 12, 52, 0.96)) !important;
border: 1px solid rgba(4, 220, 255, 0.62) !important;
border-radius: 0 !important;
box-shadow: 0 0 18px rgba(4, 220, 255, 0.22), 0 1px 0 rgba(255, 255, 255, 0.16) inset !important;
color: var(--fl-yellow) !important;
letter-spacing: 2px !important;
text-shadow: 0 0 9px rgba(245, 239, 98, 0.5), 0 0 18px rgba(4, 220, 255, 0.34) !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a,
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.18), transparent 45%),
linear-gradient(180deg, rgba(17, 41, 101, 0.94), rgba(4, 10, 44, 0.96)) !important;
border: 1px solid rgba(4, 220, 255, 0.7) !important;
border-radius: 0 !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 14px rgba(4, 220, 255, 0.24) !important;
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%) !important;
color: var(--fl-text) !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-shadow: 0 0 8px rgba(4, 220, 255, 0.45), 0 1px 0 #000 !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover,
.messageFooterButtons a:hover,
.messageFooterButtons button:hover {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.3), transparent 44%),
linear-gradient(180deg, rgba(21, 85, 132, 0.96), rgba(5, 16, 70, 0.98)) !important;
border-color: rgba(114, 239, 255, 0.95) !important;
color: #ffffff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red,
[style*="background-color: red"],
[style*="background:red"],
.red {
background: rgba(245, 239, 98, 0.16) !important;
border-color: rgba(245, 239, 98, 0.6) !important;
color: var(--fl-yellow) !important;
text-shadow: 0 0 9px rgba(245, 239, 98, 0.45) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea,
#google_translate_element select {
background:
linear-gradient(180deg, rgba(5, 10, 39, 0.94), rgba(2, 5, 23, 0.96)) !important;
border: 1px solid rgba(4, 220, 255, 0.36) !important;
border-radius: 0 !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
color: var(--fl-text) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: rgba(114, 239, 255, 0.92) !important;
box-shadow: 0 0 14px rgba(4, 220, 255, 0.32) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--fl-muted) !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(4, 220, 255, 0.2) !important;
box-shadow: 0 1px 0 rgba(114, 239, 255, 0.1) inset !important;
}
.wcfLikeCounter.likeCounterDisliked,
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--fl-orange) !important;
text-shadow: 0 0 10px rgba(255, 138, 42, 0.52) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: rgba(1, 3, 14, 0.78) !important;
border-color: rgba(4, 220, 255, 0.24) !important;
box-shadow: 0 -1px 0 rgba(114, 239, 255, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.36) !important;
}
::selection {
background: var(--fl-cyan) !important;
color: #00101a !important;
}
::-moz-selection {
background: var(--fl-cyan) !important;
color: #00101a !important;
}
/* Keep the Freelancer HUD tabs above the next header row. */
#pageHeaderPanel,
.pageHeaderPanel {
margin-bottom: 16px !important;
overflow: visible !important;
position: relative !important;
z-index: 80 !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
overflow: visible !important;
position: relative !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
z-index: 82 !important;
}
.mainMenu,
.userPanel {
z-index: 84 !important;
}
.mainMenu > .boxMenu,
.userPanelItems {
padding-bottom: 14px !important;
z-index: 86 !important;
}
.mainMenu .boxMenu > li,
.userPanelItems > li {
position: relative !important;
z-index: 1 !important;
}
.mainMenu .boxMenu > li.active,
.mainMenu .boxMenu > li:hover,
.userPanelItems > li:hover {
z-index: 5 !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
margin-bottom: 2px !important;
min-height: 54px !important;
position: relative !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
position: relative !important;
z-index: 20 !important;
}
/* Cleaner header pass: compact tabs and restore the hidden utility bar. */
#pageHeaderPanel,
.pageHeaderPanel {
margin-bottom: 8px !important;
padding-bottom: 0 !important;
z-index: 60 !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
background:
linear-gradient(180deg, rgba(3, 8, 33, 0.94), rgba(1, 4, 19, 0.96)) !important;
border: 1px solid rgba(4, 220, 255, 0.48) !important;
box-shadow: 0 0 0 1px rgba(114, 239, 255, 0.12) inset, 0 0 18px rgba(4, 220, 255, 0.18) !important;
min-height: 0 !important;
overflow: visible !important;
padding: 8px 10px !important;
}
.mainMenu,
.userPanel {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.mainMenu > .boxMenu,
.userPanelItems {
align-items: center !important;
display: flex !important;
gap: 5px !important;
min-height: 44px !important;
overflow: visible !important;
padding: 0 !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background:
linear-gradient(180deg, rgba(13, 24, 76, 0.9), rgba(3, 8, 35, 0.96)) !important;
border: 1px solid rgba(4, 220, 255, 0.32) !important;
border-bottom-color: rgba(4, 220, 255, 0.66) !important;
box-shadow: 0 0 10px rgba(4, 220, 255, 0.12), 0 -1px 0 rgba(255, 255, 255, 0.08) inset !important;
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%) !important;
display: flex !important;
align-items: center !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 14px !important;
}
.userPanelItems > li > a {
justify-content: center !important;
min-width: 42px !important;
padding: 0 12px !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background:
linear-gradient(180deg, rgba(18, 45, 104, 0.98), rgba(4, 12, 48, 0.98)) !important;
border-color: rgba(114, 239, 255, 0.78) !important;
box-shadow: 0 0 16px rgba(4, 220, 255, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.14) inset !important;
transform: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
clear: both !important;
display: block !important;
height: auto !important;
line-height: 26px !important;
margin: 8px 0 0 !important;
min-height: 28px !important;
overflow: visible !important;
padding: 0 12px !important;
position: relative !important;
z-index: 30 !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs *,
.contentHeaderNavigation * {
line-height: 26px !important;
max-height: none !important;
overflow: visible !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
background:
linear-gradient(90deg, rgba(1, 6, 23, 0.96), rgba(5, 20, 52, 0.86), rgba(1, 6, 23, 0.96)) !important;
border: 1px solid rgba(4, 220, 255, 0.38) !important;
border-bottom: 3px solid #d61628 !important;
box-shadow: 0 0 12px rgba(4, 220, 255, 0.14) !important;
}
/* Restore the member status strip below the main navigation. */
#pageHeaderContent {
clear: both !important;
display: block !important;
height: auto !important;
margin: 8px auto 22px !important;
max-height: none !important;
min-height: 0 !important;
opacity: 1 !important;
overflow: visible !important;
position: relative !important;
visibility: visible !important;
z-index: 35 !important;
}
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
background:
linear-gradient(180deg, rgba(4, 9, 31, 0.96), rgba(1, 4, 17, 0.98)) !important;
border: 1px solid rgba(4, 220, 255, 0.32) !important;
border-radius: 2px !important;
box-shadow: 0 0 0 1px rgba(114, 239, 255, 0.08) inset, 0 0 18px rgba(4, 220, 255, 0.12) !important;
display: flex !important;
height: auto !important;
max-height: none !important;
min-height: 52px !important;
opacity: 1 !important;
overflow: visible !important;
position: relative !important;
visibility: visible !important;
}
#pageHeaderContent > .layoutBoundary {
align-items: center !important;
max-width: 1700px !important;
padding: 0 !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
align-items: stretch !important;
border: 0 !important;
flex: 1 1 auto !important;
gap: 0 !important;
padding: 0 14px !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList,
.userInformation {
align-items: stretch !important;
display: flex !important;
flex: 1 1 auto !important;
flex-wrap: wrap !important;
gap: 0 !important;
min-height: 52px !important;
opacity: 1 !important;
overflow: visible !important;
visibility: visible !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
align-items: center !important;
background: transparent !important;
border-right: 1px solid rgba(114, 239, 255, 0.14) !important;
box-shadow: none !important;
color: var(--fl-text) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-height: 52px !important;
min-width: 78px !important;
opacity: 1 !important;
padding: 7px 16px !important;
visibility: visible !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.headerContentVisitorItem:first-child,
.userInformation > *:first-child {
flex-direction: row !important;
gap: 12px !important;
min-width: 240px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.headerContentVisitorItem:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
}
.headerContentMessageGridBox a,
.headerContentMessageGridBox > a,
.headerContentVisitor a,
.userInformation a {
color: #ffffff !important;
font-size: 18px !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
line-height: 1.2 !important;
text-shadow: 0 0 10px rgba(4, 220, 255, 0.22) !important;
text-transform: none !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(220, 251, 255, 0.72) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.7px !important;
line-height: 1.2 !important;
text-transform: none !important;
}
.headerContent img,
.headerContentVisitor img,
.userInformation img {
border: 1px solid rgba(4, 220, 255, 0.55) !important;
border-radius: 50% !important;
box-shadow: 0 0 12px rgba(4, 220, 255, 0.24) !important;
max-height: 42px !important;
max-width: 42px !important;
}
/* Final header spacing: keep the member strip completely below the nav. */
#pageHeaderPanel,
.pageHeaderPanel {
margin-bottom: 18px !important;
z-index: 45 !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
padding-bottom: 10px !important;
}
.mainMenu > .boxMenu,
.userPanelItems {
min-height: 42px !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
height: 40px !important;
min-height: 40px !important;
}
#pageHeaderContent {
margin-top: 18px !important;
z-index: 70 !important;
}
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 64px !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList,
.userInformation {
min-height: 56px !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
min-height: 56px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Add breathing room between the nav tabs and the member status strip. */
#pageHeaderContent {
margin-top: 32px !important;
}
/* Cleaner thread/header title area. */
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background:
linear-gradient(180deg, rgba(7, 16, 54, 0.96), rgba(2, 7, 31, 0.98)) !important;
border: 1px solid rgba(4, 220, 255, 0.54) !important;
border-left: 3px solid rgba(4, 220, 255, 0.84) !important;
border-radius: 2px !important;
box-shadow: 0 0 16px rgba(4, 220, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
color: var(--fl-text) !important;
display: block !important;
font-size: 28px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
line-height: 1.18 !important;
padding: 14px 18px !important;
text-shadow: 0 0 10px rgba(4, 220, 255, 0.38), 0 1px 0 #000 !important;
text-transform: uppercase !important;
}
.threadTitle a,
.contentTitle a,
.messageGroupLink a,
.contentHeaderTitle a {
color: var(--fl-text) !important;
text-shadow: 0 0 10px rgba(4, 220, 255, 0.38), 0 1px 0 #000 !important;
}
.threadTitle::first-line,
.contentTitle::first-line,
.messageGroupLink::first-line,
.contentHeaderTitle::first-line {
color: #f6f779 !important;
}
.contentHeaderMetaData,
.contentHeaderDescription,
.messageGroupList .messageGroupMetaData,
.messageGroupMetaData {
background: rgba(2, 6, 24, 0.82) !important;
border: 1px solid rgba(4, 220, 255, 0.24) !important;
border-top: 0 !important;
color: rgba(220, 251, 255, 0.78) !important;
font-size: 15px !important;
line-height: 1.45 !important;
padding: 8px 14px !important;
}
/* Conversations dropdown: remove leftover red styling. */
.interactiveDropdownHeader,
.interactiveDropdownTitle,
.interactiveDropdown .boxTitle,
.interactiveDropdown > header,
.dropdownHeader,
.dropdownTitle,
.dialogTitlebar,
.conversationList .boxTitle,
.conversationList > header,
.conversationListHeader,
[id*="conversation"] .boxTitle,
[id*="Conversation"] .boxTitle,
[class*="conversation"] .boxTitle,
[class*="Conversation"] .boxTitle,
[class*="conversation"] > header,
[class*="Conversation"] > header {
background:
linear-gradient(180deg, rgba(8, 20, 65, 0.98), rgba(2, 7, 31, 0.98)) !important;
border: 1px solid rgba(4, 220, 255, 0.54) !important;
border-bottom: 2px solid rgba(4, 220, 255, 0.78) !important;
box-shadow: 0 0 16px rgba(4, 220, 255, 0.18), 0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
color: var(--fl-text) !important;
text-shadow: 0 0 9px rgba(4, 220, 255, 0.42), 0 1px 0 #000 !important;
}
.interactiveDropdownHeader *,
.interactiveDropdownTitle *,
.dropdownHeader *,
.dropdownTitle *,
.dialogTitlebar *,
.conversationList .boxTitle *,
.conversationListHeader *,
[id*="conversation"] .boxTitle *,
[id*="Conversation"] .boxTitle *,
[class*="conversation"] .boxTitle *,
[class*="Conversation"] .boxTitle * {
color: var(--fl-text) !important;
text-shadow: 0 0 9px rgba(4, 220, 255, 0.42), 0 1px 0 #000 !important;
}
.interactiveDropdown,
.conversationList,
[id*="conversation"],
[id*="Conversation"],
[class*="conversation"],
[class*="Conversation"] {
scrollbar-color: rgba(4, 220, 255, 0.72) rgba(2, 6, 24, 0.92) !important;
}
.interactiveDropdownContent,
.conversationList,
.conversationList > ul,
.conversationListItem,
[class*="conversation"] .containerList,
[class*="Conversation"] .containerList {
background:
linear-gradient(180deg, rgba(3, 8, 31, 0.96), rgba(1, 4, 18, 0.98)) !important;
border-color: rgba(4, 220, 255, 0.2) !important;
}
.conversationListItem:hover,
[class*="conversation"] .containerList > li:hover,
[class*="Conversation"] .containerList > li:hover {
background:
linear-gradient(180deg, rgba(10, 28, 78, 0.9), rgba(2, 8, 33, 0.96)) !important;
}
.interactiveDropdown [style*="background-color: #f"],
.interactiveDropdown [style*="background:#f"],
.interactiveDropdown [style*="background: #f"],
[class*="conversation"] [style*="background-color: #f"],
[class*="Conversation"] [style*="background-color: #f"],
[class*="conversation"] [style*="background:#f"],
[class*="Conversation"] [style*="background:#f"],
[class*="conversation"] [style*="background: #f"],
[class*="Conversation"] [style*="background: #f"] {
background:
linear-gradient(180deg, rgba(8, 20, 65, 0.98), rgba(2, 7, 31, 0.98)) !important;
border-color: rgba(4, 220, 255, 0.54) !important;
color: var(--fl-text) !important;
}
.interactiveDropdown input[type="search"],
.interactiveDropdown input[type="text"],
.conversationList input[type="search"],
.conversationList input[type="text"],
[class*="conversation"] input[type="search"],
[class*="Conversation"] input[type="search"],
[class*="conversation"] input[type="text"],
[class*="Conversation"] input[type="text"] {
background: rgba(2, 7, 31, 0.96) !important;
border: 1px solid rgba(4, 220, 255, 0.42) !important;
color: var(--fl-text) !important;
}
/* Compact topic list: calmer than the large yellow title panels. */
.messageGroupList .messageGroupLink,
.messageGroupLink {
background:
linear-gradient(180deg, rgba(5, 12, 42, 0.88), rgba(2, 6, 26, 0.94)) !important;
border: 1px solid rgba(4, 220, 255, 0.38) !important;
border-left: 3px solid rgba(4, 220, 255, 0.72) !important;
border-radius: 2px !important;
box-shadow: 0 0 12px rgba(4, 220, 255, 0.1) !important;
color: var(--fl-text) !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: 1.4px !important;
line-height: 1.2 !important;
padding: 12px 16px !important;
text-shadow: 0 0 8px rgba(4, 220, 255, 0.28), 0 1px 0 #000 !important;
text-transform: uppercase !important;
}
.messageGroupList .messageGroupLink a,
.messageGroupLink a {
color: var(--fl-text) !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-shadow: 0 0 8px rgba(4, 220, 255, 0.28), 0 1px 0 #000 !important;
}
.messageGroupList .messageGroupLink:hover,
.messageGroupLink:hover {
background:
linear-gradient(180deg, rgba(9, 26, 72, 0.94), rgba(3, 9, 35, 0.96)) !important;
border-color: rgba(114, 239, 255, 0.66) !important;
color: #ffffff !important;
}
.messageGroupList .messageGroupLink::first-line,
.messageGroupLink::first-line {
color: var(--fl-text) !important;
}
.messageGroupList .messageGroupMetaData,
.messageGroupMetaData {
background: transparent !important;
border: 0 !important;
color: rgba(220, 251, 255, 0.74) !important;
font-size: 14px !important;
padding: 4px 0 0 !important;
}
.messageGroupList .badge,
.messageGroupList .label,
.messageGroupLink .badge,
.messageGroupLink .label {
background: rgba(4, 220, 255, 0.14) !important;
border-color: rgba(4, 220, 255, 0.42) !important;
color: var(--fl-cyan-2) !important;
text-shadow: none !important;
}
/* Slight readability bump for forum content text only. */
.messageBody,
.messageText,
.messageContent,
.messageContent .htmlContent,
.messageContent .messageText,
.messageFooter,
.messageMeta,
.messageSignature,
.wbbBoardDescription,
.contentHeaderDescription,
.messageGroupMetaData {
font-size: 15px !important;
line-height: 1.55 !important;
}
.messageBody p,
.messageText p,
.messageContent p,
.messageContent li,
.htmlContent p,
.htmlContent li {
font-size: 15px !important;
line-height: 1.6 !important;
}

Display More

Jimilux · May 19th 2026

how do i make it completely black and grey? 👀

Aldenmar Odin · May 19th 2026

Quote from Jimilux

how do i make it completely black and grey? 👀

here is a black one:

Code

/*
* SWAT Portal BlackOps: black theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--swat-black: #2a2a2a;
--swat-black-dark: #050505;
--swat-black-mid: #3a3a3a;
--swat-black-soft: rgba(225, 225, 225, 0.16);
--swat-black-glow: rgba(225, 225, 225, 0.28);
--swat-black-border: rgba(210, 210, 210, 0.38);
--swat-input-black: #0a0a0a;
--swat-panel-black: rgba(10, 10, 10, 0.96);
--swat-panel-black-dark: rgba(3, 3, 3, 0.98);
}
html,
body {
background-color: #000000 !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(175, 175, 175, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(185, 185, 185, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(145, 145, 145, 0.44) 0%, rgba(40, 40, 40, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(135, 135, 135, 0.34) 0%, rgba(35, 35, 35, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(55, 55, 55, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #050505 0%, #101010 38%, #030303 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(190, 190, 190, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(95, 95, 95, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(5, 5, 5, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(8, 8, 8, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(200, 200, 200, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(190, 190, 190, 0.42) 0%, rgba(60, 60, 60, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(20, 20, 20, 0.92) 0%, rgba(8, 8, 8, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(6, 6, 6, 0.9), rgba(18, 18, 18, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(230, 230, 230, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(150, 150, 150, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(16, 16, 16, 0.94) 0%, rgba(7, 7, 7, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: grayscale(1) saturate(0.9) brightness(1.08) drop-shadow(0 0 10px rgba(225, 225, 225, 0.28)) !important;
}
::selection {
background: var(--swat-black-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-black-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: #d7d7d7 !important;
}
a:hover,
a:focus {
color: #f2f2f2 !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-black-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(12, 12, 12, 0.98), rgba(3, 3, 3, 0.98)) !important;
border-color: var(--swat-black-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(235, 235, 235, 0.34) inset, 0 -2px 0 var(--swat-black-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-black-mid) !important;
border-color: var(--swat-black-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-black-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-black-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-black) 0%, var(--swat-black-dark) 100%) !important;
border-color: #d8d8d8 var(--swat-black-mid) var(--swat-black-dark) !important;
box-shadow: 0 0 8px var(--swat-black-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #1f1f1f 0%, #161616 48%, #030303 100%) !important;
border-color: #d8d8d8 var(--swat-black-mid) var(--swat-black-dark) !important;
box-shadow: 0 1px 0 rgba(245, 245, 245, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(225, 225, 225, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #f4f4f4 !important;
text-shadow: 0 0 8px rgba(225, 225, 225, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(10, 10, 10, 0.98)) !important;
border-color: rgba(200, 200, 200, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(26, 26, 26, 0.98), rgba(14, 14, 14, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #1f1f1f 0%, #161616 50%, #030303 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(225, 225, 225, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(220, 220, 220, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-black) 0%, var(--swat-black-dark) 100%) !important;
border-color: #d8d8d8 var(--swat-black-mid) var(--swat-black-dark) !important;
box-shadow: 0 0 5px var(--swat-black-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-black), var(--swat-black-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-black-dark), var(--swat-black-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-black-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-black-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-black) !important;
border-color: rgba(225, 225, 225, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-black) !important;
box-shadow: 0 0 7px var(--swat-black-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(225, 225, 225, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(6, 6, 6, 0.98), rgba(18, 18, 18, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(225, 225, 225, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(6, 6, 6, 0.98), rgba(18, 18, 18, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(225, 225, 225, 1), rgba(18, 18, 18, 1)) !important;
box-shadow: 0 1px 0 rgba(238, 238, 238, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(9, 9, 9, 0.98)) !important;
border-color: rgba(225, 225, 225, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(225, 225, 225, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(14, 14, 14, 0.98), rgba(7, 7, 7, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(225, 225, 225, 0.18) !important;
background-color: rgba(10, 10, 10, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(11, 11, 11, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #f2f2f2 !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(225, 225, 225, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(225, 225, 225, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-black) 0%, var(--swat-black-dark) 100%) !important;
border-color: #d8d8d8 var(--swat-black-mid) var(--swat-black-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #1f1f1f 0%, #161616 48%, #030303 100%) !important;
border-color: #d8d8d8 var(--swat-black-mid) var(--swat-black-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(225, 225, 225, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(200, 200, 200, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-black) !important;
border-color: rgba(225, 225, 225, 0.35) !important;
color: rgba(235, 235, 235, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #050505;
--dash-panel: rgba(14, 14, 14, 0.96);
--dash-panel-2: rgba(10, 10, 10, 0.98);
--dash-card: rgba(18, 18, 18, 0.94);
--dash-card-hover: rgba(28, 28, 28, 0.96);
--dash-border: rgba(210, 210, 210, 0.22);
--dash-accent: #c9c9c9;
--dash-accent-2: #f0f0f0;
--dash-text: #f4f4f5;
--dash-muted: #a7a7a7;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(90, 90, 90, 0.18), transparent 46%),
linear-gradient(180deg, #0b0b0b 0%, #050505 42%, #000000 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: grayscale(1) saturate(0.9) brightness(1.1) drop-shadow(0 0 12px rgba(240, 240, 240, 0.18)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(12, 12, 12, 0.98), rgba(34, 34, 34, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #d8d8d8 !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(225, 225, 225, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(240, 240, 240, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(12, 12, 12, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(13, 13, 13, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #eeeeee !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(18, 18, 18, 0.98), rgba(45, 45, 45, 0.82)) !important;
border: 1px solid rgba(240, 240, 240, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #d7d7d7 !important;
}
a:hover,
a:focus {
color: #ffffff !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(225, 225, 225, 0.2) !important;
border: 1px solid rgba(240, 240, 240, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #f5f5f5 !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(225, 225, 225, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(9, 9, 9, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-black) 0%, var(--swat-black-dark) 100%) !important;
border-color: #d8d8d8 var(--swat-black-mid) var(--swat-black-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(200, 200, 200, 0.18) !important;
box-shadow: 0 1px 0 rgba(235, 235, 235, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(170, 170, 170, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: #d7d7d7 !important;
text-shadow: 0 0 0.5em rgba(225, 225, 225, 0.35) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: #d7d7d7 !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(8, 8, 8, 0.88) !important;
border: 1px solid rgba(210, 210, 210, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(7, 7, 7, 0.96), rgba(18, 18, 18, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(210, 210, 210, 0.2) !important;
background: rgba(32, 32, 32, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #e5e5e5 !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(210, 210, 210, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(10, 10, 10, 0.96) !important;
border-color: rgba(210, 210, 210, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(9, 9, 9, 0.94) !important;
border-color: rgba(225, 225, 225, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(225, 225, 225, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(225, 225, 225, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(225, 225, 225, 0.18) !important;
border-color: rgba(225, 225, 225, 0.55) !important;
color: #f2f2f2 !important;
}

Display More

Aldenmar Odin · Thursday, 1:48 pm

Dark Matter

pasted-from-clipboard.png

Code

/*
* SWAT Portal BlackOps: DarkMatter premium theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--bg: #07111f;
--bg-soft: rgba(12, 25, 44, 0.72);
--bg-strong: #0d1b2f;
--panel: rgba(14, 30, 52, 0.92);
--panel-border: rgba(132, 177, 255, 0.18);
--text: #edf3ff;
--muted: #9fb2cf;
--accent: #58c4ff;
--accent-strong: #89f0ff;
--accent-warm: #f59e0b;
--success: #34d399;
--shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
--radius-lg: 24px;
--radius-md: 18px;
--content-width: 1200px;
--swat-darkmatter: #94a3b8;
--swat-darkmatter-dark: #334155;
--swat-darkmatter-mid: #64748b;
--swat-darkmatter-soft: rgba(148, 163, 184, 0.18);
--swat-darkmatter-glow: rgba(148, 163, 184, 0.36);
--swat-darkmatter-border: rgba(226, 232, 240, 0.42);
--swat-input-darkmatter: #080c13;
--swat-panel-darkmatter: rgba(8, 12, 19, 0.98);
--swat-panel-darkmatter-dark: rgba(2, 4, 8, 0.99);
}
html,
body {
background-color: #050b0c !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(86, 186, 206, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(101, 192, 210, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(56, 171, 194, 0.44) 0%, rgba(36, 81, 90, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(69, 179, 201, 0.34) 0%, rgba(38, 78, 86, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(48, 107, 119, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #060d0e 0%, #0b1719 38%, #040809 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(98, 191, 209, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(58, 133, 148, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(5, 13, 14, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(8, 16, 18, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(68, 178, 201, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(99, 191, 210, 0.42) 0%, rgba(46, 101, 112, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(22, 52, 58, 0.92) 0%, rgba(8, 20, 22, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(5, 12, 14, 0.9), rgba(11, 28, 31, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(96, 190, 209, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(55, 167, 189, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(20, 43, 48, 0.94) 0%, rgba(9, 20, 23, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: grayscale(0.65) saturate(0.92) brightness(1.08) drop-shadow(0 0 10px rgba(56, 169, 192, 0.45)) !important;
}
::selection {
background: var(--swat-darkmatter-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-darkmatter-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--swat-darkmatter) !important;
}
a:hover,
a:focus {
color: #70c5d5 !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-darkmatter-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(15, 38, 43, 0.98), rgba(6, 17, 19, 0.98)) !important;
border-color: var(--swat-darkmatter-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(111, 196, 213, 0.34) inset, 0 -2px 0 var(--swat-darkmatter-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-darkmatter-mid) !important;
border-color: var(--swat-darkmatter-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-darkmatter-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-darkmatter-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-darkmatter) 0%, var(--swat-darkmatter-dark) 100%) !important;
border-color: #63bfd2 var(--swat-darkmatter-mid) var(--swat-darkmatter-dark) !important;
box-shadow: 0 0 8px var(--swat-darkmatter-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #38a9c0 0%, #2d6c78 48%, #193f47 100%) !important;
border-color: #63bfd2 var(--swat-darkmatter-mid) var(--swat-darkmatter-dark) !important;
box-shadow: 0 1px 0 rgba(142, 209, 222, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(56, 169, 192, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #a4dae4 !important;
text-shadow: 0 0 8px rgba(56, 169, 192, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(15, 28, 31, 0.98), rgba(10, 20, 22, 0.98)) !important;
border-color: rgba(68, 178, 201, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(22, 42, 46, 0.98), rgba(13, 27, 29, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #38a9c0 0%, #2d6c78 50%, #193f47 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(56, 169, 192, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(99, 191, 210, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-darkmatter) 0%, var(--swat-darkmatter-dark) 100%) !important;
border-color: #63bfd2 var(--swat-darkmatter-mid) var(--swat-darkmatter-dark) !important;
box-shadow: 0 0 5px var(--swat-darkmatter-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-darkmatter), var(--swat-darkmatter-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-darkmatter-dark), var(--swat-darkmatter-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-darkmatter-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-darkmatter-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-darkmatter) !important;
border-color: rgba(56, 169, 192, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-darkmatter) !important;
box-shadow: 0 0 7px var(--swat-darkmatter-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(56, 169, 192, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(8, 18, 20, 0.98), rgba(19, 46, 51, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(56, 169, 192, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(8, 18, 20, 0.98), rgba(19, 46, 51, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(56, 169, 192, 1), rgba(35, 85, 95, 1)) !important;
box-shadow: 0 1px 0 rgba(112, 197, 213, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(13, 24, 26, 0.98), rgba(9, 17, 19, 0.98)) !important;
border-color: rgba(56, 169, 192, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(56, 169, 192, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(14, 29, 32, 0.98), rgba(8, 16, 18, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(56, 169, 192, 0.18) !important;
background-color: rgba(9, 20, 23, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(10, 18, 20, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #70c5d5 !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(56, 169, 192, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(56, 169, 192, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-darkmatter) 0%, var(--swat-darkmatter-dark) 100%) !important;
border-color: #63bfd2 var(--swat-darkmatter-mid) var(--swat-darkmatter-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #38a9c0 0%, #2d6c78 48%, #193f47 100%) !important;
border-color: #63bfd2 var(--swat-darkmatter-mid) var(--swat-darkmatter-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(56, 169, 192, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(68, 178, 201, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-darkmatter) !important;
border-color: rgba(56, 169, 192, 0.35) !important;
color: rgba(162, 217, 228, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #101718;
--dash-panel: rgba(18, 26, 28, 0.96);
--dash-panel-2: rgba(15, 24, 25, 0.98);
--dash-card: rgba(21, 32, 35, 0.94);
--dash-card-hover: rgba(26, 43, 46, 0.96);
--dash-border: rgba(102, 132, 138, 0.22);
--dash-accent: #94a3b8;
--dash-accent-2: #e5e7eb;
--dash-text: #addee7;
--dash-muted: #8ea6ab;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(44, 83, 91, 0.18), transparent 46%),
linear-gradient(180deg, #111a1c 0%, #101718 42%, #0d1516 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: grayscale(0.72) saturate(0.88) brightness(1.1) drop-shadow(0 0 12px rgba(57, 174, 198, 0.22)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(16, 34, 37, 0.98), rgba(30, 63, 70, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #9fbabf !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(61, 142, 158, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(57, 174, 198, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(16, 24, 25, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(15, 24, 26, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #8bd0dd !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(29, 64, 71, 0.98), rgba(40, 85, 94, 0.82)) !important;
border: 1px solid rgba(57, 174, 198, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #3bafc6 !important;
}
a:hover,
a:focus {
color: #78c8d8 !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(61, 142, 158, 0.2) !important;
border: 1px solid rgba(57, 174, 198, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #acdde7 !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(61, 142, 158, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(13, 20, 22, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-darkmatter) 0%, var(--swat-darkmatter-dark) 100%) !important;
border-color: #63bfd2 var(--swat-darkmatter-mid) var(--swat-darkmatter-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(68, 178, 201, 0.18) !important;
box-shadow: 0 1px 0 rgba(111, 196, 213, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(145, 168, 173, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: var(--swat-darkmatter) !important;
text-shadow: 0 0 0.5em var(--swat-darkmatter) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--swat-darkmatter) !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(12, 18, 20, 0.88) !important;
border: 1px solid rgba(102, 132, 138, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(10, 16, 17, 0.96), rgba(16, 27, 29, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(102, 132, 138, 0.2) !important;
background: rgba(27, 49, 53, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #39acc3 !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(162, 198, 205, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(15, 24, 25, 0.96) !important;
border-color: rgba(102, 132, 138, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(11, 20, 22, 0.94) !important;
border-color: rgba(61, 142, 158, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(61, 142, 158, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(61, 142, 158, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(61, 142, 158, 0.18) !important;
border-color: rgba(61, 142, 158, 0.55) !important;
color: #abdce6 !important;
}
/* DarkMatter premium accents: obsidian depth, silver edges, cold quantum cyan */
:root {
--darkmatter-accent: #94a3b8;
--darkmatter-accent-2: #e5e7eb;
--darkmatter-accent-3: #22d3ee;
--darkmatter-accent-4: #7c3aed;
--darkmatter-deep: #03050a;
--darkmatter-panel: rgba(8, 12, 19, 0.96);
--darkmatter-border: rgba(226, 232, 240, 0.24);
--darkmatter-lux-gradient: linear-gradient(135deg, var(--darkmatter-accent) 0%, var(--darkmatter-accent-2) 38%, var(--darkmatter-accent-3) 72%, var(--darkmatter-accent-4) 100%);
--darkmatter-sheen: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
--darkmatter-aura: 0 0 22px color-mix(in srgb, var(--darkmatter-accent) 42%, transparent), 0 0 46px color-mix(in srgb, var(--darkmatter-accent-3) 22%, transparent);
}
html,
body {
background-color: var(--darkmatter-deep) !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList,
#pageHeaderContent .layoutBoundary > *,
#pageFooter .box {
background: var(--darkmatter-panel) !important;
border-color: var(--darkmatter-border) !important;
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36), var(--darkmatter-aura) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--darkmatter-accent) 34%, transparent) 0%, transparent 42%),
radial-gradient(ellipse at 72% 8%, color-mix(in srgb, var(--darkmatter-accent-3) 30%, transparent) 0%, transparent 44%),
linear-gradient(105deg, rgba(4, 8, 18, 0.92), color-mix(in srgb, var(--darkmatter-deep) 68%, transparent), rgba(0, 0, 0, 0.86)) !important;
}
#pageLogoContainer::before {
background:
linear-gradient(116deg, transparent 0 39%, color-mix(in srgb, var(--darkmatter-accent-2) 68%, transparent) 42%, rgba(255, 255, 255, 0.92) 44%, color-mix(in srgb, var(--darkmatter-accent-3) 64%, transparent) 47%, transparent 51%),
radial-gradient(ellipse at 64% 0%, color-mix(in srgb, var(--darkmatter-deep) 94%, transparent) 0%, rgba(5, 8, 18, 0.96) 48%, transparent 49%) !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: grayscale(0.65) saturate(0.92) brightness(1.08) drop-shadow(0 0 12px color-mix(in srgb, var(--darkmatter-accent) 48%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--darkmatter-accent-3) 28%, transparent)) !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--darkmatter-accent-2) !important;
text-shadow: 0 0 12px color-mix(in srgb, var(--darkmatter-accent-2) 28%, transparent) !important;
}
a:hover,
a:focus {
color: var(--darkmatter-accent-3) !important;
text-shadow: 0 0 16px color-mix(in srgb, var(--darkmatter-accent-3) 42%, transparent) !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.message .button,
.message a.button,
.messageFooterButtons button,
.messageFooterGroup > li > button,
.jsOnly.button,
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red,
.boxTitle,
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: var(--darkmatter-lux-gradient) !important;
background-size: 180% 100% !important;
border-color: color-mix(in srgb, var(--darkmatter-accent-2) 70%, white 18%) var(--darkmatter-accent) color-mix(in srgb, var(--darkmatter-accent-3) 72%, black 16%) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 -1px 0 rgba(0, 0, 0, 0.58) inset, 0 0 18px color-mix(in srgb, var(--darkmatter-accent) 28%, transparent), 0 12px 32px rgba(0, 0, 0, 0.38) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.78), 0 0 12px rgba(255, 255, 255, 0.16) !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.buttonGroup > li > button:hover,
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-position: 100% 0 !important;
transform: translateY(-1px) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 0 24px color-mix(in srgb, var(--darkmatter-accent-2) 36%, transparent), 0 16px 38px rgba(0, 0, 0, 0.42) !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background-image: linear-gradient(90deg, color-mix(in srgb, var(--darkmatter-accent) 24%, transparent), color-mix(in srgb, var(--darkmatter-accent-3) 18%, transparent), color-mix(in srgb, var(--darkmatter-accent-4) 20%, transparent)) !important;
border-color: var(--darkmatter-border) !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid var(--darkmatter-accent-2) !important;
box-shadow: 0 4px 0 color-mix(in srgb, var(--darkmatter-accent) 30%, transparent), 0 8px 0 color-mix(in srgb, var(--darkmatter-accent-3) 20%, transparent) !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--darkmatter-accent-2) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--darkmatter-accent) 18%, transparent), 0 0 14px color-mix(in srgb, var(--darkmatter-accent-3) 24%, transparent) !important;
}
/* DarkMatter premium motion */
body {
position: relative !important;
}
body::before {
animation: premium-star-drift 52s linear infinite, premium-aura-pulse 9s ease-in-out infinite alternate !important;
will-change: transform, opacity, background-position !important;
}
body::after {
animation: premium-nebula-orbit 42s ease-in-out infinite alternate, premium-spectrum-shimmer 18s linear infinite !important;
background:
radial-gradient(ellipse at 18% 20%, color-mix(in srgb, var(--darkmatter-accent) 18%, transparent) 0%, transparent 36%),
radial-gradient(ellipse at 78% 18%, color-mix(in srgb, var(--darkmatter-accent-3) 16%, transparent) 0%, transparent 34%),
radial-gradient(ellipse at 48% 82%, color-mix(in srgb, var(--darkmatter-accent-2) 14%, transparent) 0%, transparent 42%),
linear-gradient(115deg, transparent 0 38%, color-mix(in srgb, var(--darkmatter-accent-4) 10%, transparent) 48%, transparent 62%) !important;
background-size: 130% 130%, 140% 140%, 120% 120%, 180% 180% !important;
content: "" !important;
filter: saturate(1.2) blur(1px) !important;
inset: -18vh !important;
opacity: 0.72 !important;
pointer-events: none !important;
position: fixed !important;
transform: translate3d(0, 0, 0) scale(1.02) !important;
will-change: transform, opacity, background-position !important;
z-index: -1 !important;
}
#pageLogoContainer::before {
animation: premium-scan-sheen 11s ease-in-out infinite !important;
background-size: 180% 180%, cover !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.message .button,
.message a.button,
.messageFooterButtons button,
.messageFooterGroup > li > button,
.jsOnly.button,
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red,
.boxTitle,
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
animation: premium-gradient-flow 14s ease-in-out infinite !important;
transition: background-position 420ms ease, box-shadow 220ms ease, transform 180ms ease, filter 220ms ease !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.message,
.containerList > li,
#pageFooter .box,
#pageHeaderContent .layoutBoundary > * {
transition: border-color 220ms ease, box-shadow 220ms ease, transform 180ms ease, background-color 220ms ease !important;
}
.content > .section:hover,
.content > form:hover,
.sectionContainer:hover,
.tabularBox:hover,
.wbbBoardList:hover,
.message:hover,
.containerList > li:hover,
#pageFooter .box:hover,
#pageHeaderContent .layoutBoundary > *:hover {
border-color: color-mix(in srgb, var(--darkmatter-accent-2) 58%, transparent) !important;
box-shadow: 0 22px 62px rgba(0, 0, 0, 0.42), 0 0 24px color-mix(in srgb, var(--darkmatter-accent) 26%, transparent), 0 0 44px color-mix(in srgb, var(--darkmatter-accent-3) 16%, transparent) !important;
transform: translateY(-1px) !important;
}
@keyframes premium-star-drift {
0% { background-position: 0 0, 0 0, 0 0, 0 0, center, center, center, center; transform: translate3d(0, 0, 0); }
100% { background-position: 260px 220px, -310px 270px, 380px -330px, -470px -390px, center, center, center, center; transform: translate3d(1.5vw, -1vh, 0); }
}
@keyframes premium-nebula-orbit {
0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; transform: translate3d(-1.5vw, -1vh, 0) scale(1.02) rotate(0.001deg); }
50% { opacity: 0.88; }
100% { background-position: 100% 30%, 0% 70%, 60% 0%, 100% 50%; transform: translate3d(1.5vw, 1vh, 0) scale(1.07) rotate(0.001deg); }
}
@keyframes premium-spectrum-shimmer {
0% { filter: saturate(1.08) blur(1px); }
50% { filter: saturate(1.34) blur(1px); }
100% { filter: saturate(1.08) blur(1px); }
}
@keyframes premium-gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes premium-aura-pulse {
0% { opacity: 0.66; }
100% { opacity: 0.9; }
}
@keyframes premium-scan-sheen {
0%, 100% { opacity: 0.58; background-position: 0% 50%, center; }
45%, 55% { opacity: 0.86; }
100% { background-position: 100% 50%, center; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
body::after {
opacity: 0.46 !important;
transform: none !important;
}
}
/* DarkMatter void motion polish */
:root {
--darkmatter-ease: cubic-bezier(0.22, 1, 0.36, 1);
--darkmatter-void-glow: rgba(34, 211, 238, 0.18);
--darkmatter-silver-glow: rgba(226, 232, 240, 0.14);
}
body::before {
animation: darkmatter-star-drift 84s linear infinite, darkmatter-void-breathe 16s ease-in-out infinite alternate !important;
opacity: 0.62 !important;
}
body::after {
animation: darkmatter-void-orbit 76s ease-in-out infinite alternate, darkmatter-quantum-shimmer 28s linear infinite !important;
background:
radial-gradient(ellipse at 16% 22%, rgba(34, 211, 238, 0.11) 0%, transparent 38%),
radial-gradient(ellipse at 78% 18%, rgba(124, 58, 237, 0.12) 0%, transparent 34%),
radial-gradient(ellipse at 46% 82%, rgba(226, 232, 240, 0.08) 0%, transparent 44%),
linear-gradient(112deg, transparent 0 40%, rgba(34, 211, 238, 0.045) 49%, transparent 64%) !important;
opacity: 0.58 !important;
}
.button,
a.button,
button,
.buttonGroup > li > a,
.buttonGroup > li > button,
.message .button,
.message a.button,
.messageFooterButtons button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.jsOnly.button,
.badge,
a.badge,
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > span,
.userPanelItems > li > a {
backface-visibility: hidden !important;
transform: translate3d(0, 0, 0) !important;
transition:
background-color 340ms var(--darkmatter-ease),
background-position 900ms var(--darkmatter-ease),
border-color 340ms var(--darkmatter-ease),
box-shadow 360ms var(--darkmatter-ease),
color 260ms var(--darkmatter-ease),
filter 360ms var(--darkmatter-ease),
transform 300ms var(--darkmatter-ease) !important;
}
.button:hover,
a.button:hover,
button:hover,
.buttonGroup > li > a:hover,
.buttonGroup > li > button:hover,
.message .button:hover,
.message a.button:hover,
.messageFooterButtons button:hover,
.messageFooterGroup > li > a:hover,
.messageFooterGroup > li > button:hover,
.jsOnly.button:hover,
.badge:hover,
a.badge:hover {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 0 24px var(--darkmatter-void-glow), 0 18px 42px rgba(0, 0, 0, 0.48) !important;
filter: brightness(1.08) saturate(1.08) !important;
transform: translate3d(0, -2px, 0) !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.message,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.pageFooter .box,
#pageFooter .box,
.interactiveDropdown,
.popover,
.dialogContainer {
backface-visibility: hidden !important;
transform: translate3d(0, 0, 0) !important;
transition:
background 420ms var(--darkmatter-ease),
background-color 420ms var(--darkmatter-ease),
border-color 360ms var(--darkmatter-ease),
box-shadow 420ms var(--darkmatter-ease),
filter 420ms var(--darkmatter-ease),
transform 320ms var(--darkmatter-ease) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover,
.message:hover,
.sidebar .box:hover,
.boxesSidebarLeft .box:hover,
.boxesSidebarRight .box:hover,
.pageFooter .box:hover,
#pageFooter .box:hover {
border-color: rgba(226, 232, 240, 0.32) !important;
box-shadow: 0 28px 76px rgba(0, 0, 0, 0.56), 0 0 24px var(--darkmatter-void-glow), 0 0 52px rgba(124, 58, 237, 0.08) !important;
filter: brightness(1.045) contrast(1.02) !important;
transform: translate3d(0, -2px, 0) !important;
}
.wbbBoardList .wbbBoard:hover .wbbBoardTitle a,
.wbbBoardContainer:hover .wbbBoardTitle a,
.containerList > li:hover a,
.sidebar .box:hover a,
.boxesSidebarRight .box:hover a {
color: #e5e7eb !important;
text-shadow: 0 0 14px rgba(34, 211, 238, 0.28), 0 0 28px rgba(124, 58, 237, 0.16) !important;
}
.boxTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle,
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
transition:
border-color 420ms var(--darkmatter-ease),
box-shadow 420ms var(--darkmatter-ease),
color 300ms var(--darkmatter-ease),
filter 520ms var(--darkmatter-ease),
text-shadow 420ms var(--darkmatter-ease),
transform 520ms var(--darkmatter-ease) !important;
}
.wbbCategory:hover .boxTitle,
.wbbCategory:hover .wbbCategoryTitle,
.box:hover .boxTitle,
.sidebar .box:hover .boxTitle,
.boxesSidebarRight .box:hover .boxTitle {
color: #f8fafc !important;
filter: brightness(1.08) !important;
text-shadow: 0 0 16px rgba(34, 211, 238, 0.26), 0 1px 1px #000 !important;
}
.pageHeaderLogo:hover img,
.pageHeaderLogo:hover .pageHeaderLogoLarge,
.pageHeaderLogo:hover .pageHeaderLogoSmall {
filter: grayscale(0.55) saturate(1.06) brightness(1.14) drop-shadow(0 0 18px rgba(34, 211, 238, 0.34)) drop-shadow(0 0 30px rgba(124, 58, 237, 0.18)) !important;
transform: translate3d(0, -1px, 0) scale(1.01) !important;
}
@keyframes darkmatter-star-drift {
0% { background-position: 0 0, 0 0, 0 0, 0 0, center, center, center, center; transform: translate3d(0, 0, 0); }
100% { background-position: 520px 420px, -640px 560px, 760px -680px, -940px -780px, center, center, center, center; transform: translate3d(1vw, -0.75vh, 0); }
}
@keyframes darkmatter-void-orbit {
0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; transform: translate3d(-1vw, -0.75vh, 0) scale(1.02) rotate(0.001deg); }
50% { opacity: 0.72; }
100% { background-position: 100% 28%, 0% 72%, 58% 0%, 100% 50%; transform: translate3d(1vw, 0.9vh, 0) scale(1.065) rotate(0.001deg); }
}
@keyframes darkmatter-quantum-shimmer {
0% { filter: saturate(0.92) contrast(1.02) blur(1px); }
50% { filter: saturate(1.18) contrast(1.08) blur(1px); }
100% { filter: saturate(0.92) contrast(1.02) blur(1px); }
}
@keyframes darkmatter-void-breathe {
0% { opacity: 0.48; }
100% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
a,
.button,
a.button,
button,
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.message,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box {
transition-duration: 0.001ms !important;
transform: none !important;
}
}
/* DarkMatter borderless box polish */
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.containerList,
.containerList > li,
.tabularBox,
.tabularListRow,
.sectionContainer,
.content > .section,
.content > form,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent,
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
border: 0 !important;
border-color: transparent !important;
outline: 0 !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), 0 0 22px rgba(34, 211, 238, 0.07) !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.message,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.pageFooter .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(13, 20, 22, 0.96), rgba(7, 12, 14, 0.975)) !important;
}
.wbbBoardList .wbbBoard + .wbbBoard,
.containerList > li + li,
.messageList > li + li,
.tabularListRow + .tabularListRow {
box-shadow: 0 -1px 0 rgba(226, 232, 240, 0.045), 0 18px 52px rgba(0, 0, 0, 0.3) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
border: 0 !important;
border-color: transparent !important;
box-shadow: none !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover,
.message:hover,
.sidebar .box:hover,
.boxesSidebarLeft .box:hover,
.boxesSidebarRight .box:hover,
.pageFooter .box:hover,
#pageFooter .box:hover {
border: 0 !important;
border-color: transparent !important;
box-shadow: 0 28px 76px rgba(0, 0, 0, 0.56), 0 0 24px var(--darkmatter-void-glow), 0 0 52px rgba(124, 58, 237, 0.08) !important;
}
/* DarkMatter glass depth and animated void background */
:root {
--darkmatter-glass: rgba(8, 13, 18, 0.58);
--darkmatter-glass-strong: rgba(10, 16, 22, 0.72);
--darkmatter-glass-soft: rgba(15, 25, 32, 0.42);
--darkmatter-glass-highlight: rgba(226, 232, 240, 0.08);
--darkmatter-glass-shadow: 0 24px 72px rgba(0, 0, 0, 0.52), 0 0 34px rgba(34, 211, 238, 0.08), inset 0 1px 0 rgba(226, 232, 240, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.52);
}
html,
body {
background-color: #020407 !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(34, 211, 238, 0.12) 0 1px, transparent 2px),
radial-gradient(circle at 74% 22%, rgba(124, 58, 237, 0.12) 0 1px, transparent 2px),
radial-gradient(circle at 88% 68%, rgba(226, 232, 240, 0.08) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 72%, rgba(34, 211, 238, 0.12) 0%, transparent 58%),
radial-gradient(ellipse at 84% 18%, rgba(124, 58, 237, 0.14) 0%, transparent 62%),
radial-gradient(ellipse at 52% 108%, rgba(148, 163, 184, 0.1) 0%, transparent 54%),
linear-gradient(125deg, #020407 0%, #061016 38%, #03060a 72%, #000 100%) !important;
background-size: 280px 240px, 360px 310px, 520px 460px, cover, cover, cover, cover !important;
}
body::before {
animation: darkmatter-glass-stars 110s linear infinite, darkmatter-void-breathe 18s ease-in-out infinite alternate !important;
background:
radial-gradient(circle at 18% 22%, rgba(226, 232, 240, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.28) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(124, 58, 237, 0.24) 0 1px, transparent 2px),
radial-gradient(circle at 32% 58%, rgba(226, 232, 240, 0.16) 0 1px, transparent 2px),
linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.82)) !important;
background-size: 520px 420px, 680px 560px, 820px 700px, 940px 760px, cover !important;
opacity: 0.58 !important;
}
body::after {
animation: darkmatter-glass-aurora 92s ease-in-out infinite alternate, darkmatter-glass-shimmer 36s linear infinite !important;
background:
radial-gradient(ellipse at 14% 18%, rgba(34, 211, 238, 0.12) 0%, transparent 34%),
radial-gradient(ellipse at 82% 16%, rgba(124, 58, 237, 0.14) 0%, transparent 36%),
radial-gradient(ellipse at 50% 78%, rgba(226, 232, 240, 0.075) 0%, transparent 44%),
linear-gradient(118deg, transparent 0 36%, rgba(34, 211, 238, 0.05) 46%, rgba(124, 58, 237, 0.06) 54%, transparent 66%) !important;
background-size: 150% 150%, 160% 160%, 140% 140%, 220% 220% !important;
filter: blur(1.4px) saturate(1.12) !important;
opacity: 0.66 !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.containerList,
.containerList > li,
.tabularBox,
.tabularListRow,
.sectionContainer,
.content > .section,
.content > form,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent,
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
background:
linear-gradient(135deg, rgba(226, 232, 240, 0.045), transparent 32%, rgba(34, 211, 238, 0.035) 68%, rgba(124, 58, 237, 0.04)),
var(--darkmatter-glass) !important;
backdrop-filter: blur(24px) saturate(1.22) contrast(1.04) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.22) contrast(1.04) !important;
box-shadow: var(--darkmatter-glass-shadow) !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.message,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.pageFooter .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(226, 232, 240, 0.04), transparent 26%),
linear-gradient(135deg, rgba(34, 211, 238, 0.035), transparent 52%, rgba(124, 58, 237, 0.045)),
var(--darkmatter-glass-strong) !important;
}
.boxContent,
.wbbLastPost,
.wbbBoardStats,
.messageHeaderMetaData,
.messageFooterGroup,
.buttonGroup,
.dropdownMenu,
.menuOverlay,
.redactor-box,
.redactor-layer,
.inlineCode,
kbd {
background: rgba(5, 10, 14, 0.44) !important;
backdrop-filter: blur(18px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.055) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover,
.message:hover,
.sidebar .box:hover,
.boxesSidebarLeft .box:hover,
.boxesSidebarRight .box:hover,
.pageFooter .box:hover,
#pageFooter .box:hover {
background:
linear-gradient(180deg, rgba(226, 232, 240, 0.06), transparent 28%),
linear-gradient(135deg, rgba(34, 211, 238, 0.06), transparent 52%, rgba(124, 58, 237, 0.07)),
rgba(13, 21, 28, 0.78) !important;
box-shadow: 0 30px 86px rgba(0, 0, 0, 0.58), 0 0 28px rgba(34, 211, 238, 0.16), 0 0 58px rgba(124, 58, 237, 0.1), inset 0 1px 0 rgba(226, 232, 240, 0.1) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background:
linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(226, 232, 240, 0.08), rgba(124, 58, 237, 0.16)) 0 100% / 100% 1px no-repeat,
linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(4, 8, 12, 0.18)) !important;
backdrop-filter: blur(18px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}
@keyframes darkmatter-glass-stars {
0% { background-position: 0 0, 0 0, 0 0, 0 0, center; transform: translate3d(0, 0, 0); }
100% { background-position: 520px 420px, -680px 560px, 820px -700px, -940px 760px, center; transform: translate3d(1.2vw, -0.8vh, 0); }
}
@keyframes darkmatter-glass-aurora {
0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; transform: translate3d(-1.2vw, -0.9vh, 0) scale(1.02) rotate(0.001deg); }
50% { opacity: 0.78; }
100% { background-position: 100% 26%, 0% 72%, 58% 0%, 100% 50%; transform: translate3d(1.2vw, 0.9vh, 0) scale(1.07) rotate(0.001deg); }
}
@keyframes darkmatter-glass-shimmer {
0% { filter: blur(1.4px) saturate(1) contrast(1.02); }
50% { filter: blur(1.4px) saturate(1.28) contrast(1.08); }
100% { filter: blur(1.4px) saturate(1) contrast(1.02); }
}
@media (prefers-reduced-motion: reduce) {
body::before,
body::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
}
/* DarkMatter performance pass: keep the premium glass look, reduce repaint cost */
:root {
--darkmatter-glass-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 18px rgba(34, 211, 238, 0.055), inset 0 1px 0 rgba(226, 232, 240, 0.055);
}
body::before {
animation: darkmatter-glass-stars 140s linear infinite !important;
opacity: 0.46 !important;
will-change: background-position, transform !important;
}
body::after {
animation: darkmatter-glass-aurora 120s ease-in-out infinite alternate !important;
filter: none !important;
opacity: 0.42 !important;
will-change: background-position, opacity, transform !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.message,
.messageList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.pageFooter .box,
#pageFooter .box,
.boxContent,
.wbbLastPost,
.wbbBoardStats,
.messageHeaderMetaData,
.messageFooterGroup,
.buttonGroup,
.dropdownMenu,
.menuOverlay,
.redactor-box,
.redactor-layer,
.inlineCode,
kbd {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(226, 232, 240, 0.04) !important;
contain: paint !important;
}
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor,
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel,
.dialogContainer,
.popover,
.interactiveDropdown {
backdrop-filter: blur(10px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
}
.wbbCategory,
.wbbBoardList,
.containerList,
.tabularBox,
.sectionContainer,
.content > .section,
.content > form {
backdrop-filter: blur(8px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.message .button,
.message a.button,
.messageFooterButtons button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.jsOnly.button,
.badge,
a.badge,
.boxTitle,
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
animation: none !important;
background-position: 50% 50% !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover,
.message:hover,
.sidebar .box:hover,
.boxesSidebarLeft .box:hover,
.boxesSidebarRight .box:hover,
.pageFooter .box:hover,
#pageFooter .box:hover {
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42), 0 0 18px rgba(34, 211, 238, 0.1), inset 0 1px 0 rgba(226, 232, 240, 0.08) !important;
filter: brightness(1.025) !important;
transform: translate3d(0, -1px, 0) !important;
}
@media (prefers-reduced-motion: reduce), (update: slow) {
body::before,
body::after,
.button,
a.button,
button,
.badge,
a.badge,
.boxTitle,
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
animation: none !important;
transition-duration: 0.001ms !important;
}
body::before,
body::after {
opacity: 0.28 !important;
transform: none !important;
}
.wbbCategory,
.wbbBoardList,
.containerList,
.tabularBox,
.sectionContainer,
.content > .section,
.content > form,
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor,
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}

Display More

GOLD

Code

/*
* SWAT Portal BlackOps: gold theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--swat-gold: #f6c453;
--swat-gold-dark: #9a5b13;
--swat-gold-mid: #c88a22;
--swat-gold-soft: rgba(246, 196, 83, 0.22);
--swat-gold-glow: rgba(246, 196, 83, 0.52);
--swat-gold-border: rgba(246, 196, 83, 0.86);
--swat-input-gold: #241504;
--swat-panel-gold: rgba(41, 23, 6, 0.96);
--swat-panel-gold-dark: rgba(17, 9, 2, 0.98);
}
html,
body {
background-color: #110c03 !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(245, 198, 104, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(247, 206, 126, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(242, 181, 57, 0.44) 0%, rgba(127, 93, 24, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(244, 189, 80, 0.34) 0%, rgba(119, 89, 29, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(167, 122, 32, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #140e04 0%, #231b09 38%, #0c0903 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(246, 205, 121, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(209, 152, 37, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(20, 15, 3, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(25, 19, 6, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(244, 188, 77, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(247, 205, 123, 0.42) 0%, rgba(158, 116, 31, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(82, 59, 13, 0.92) 0%, rgba(31, 23, 5, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(19, 14, 3, 0.9), rgba(44, 32, 7, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(246, 204, 118, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(242, 178, 50, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(67, 49, 13, 0.94) 0%, rgba(32, 23, 7, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(236deg) saturate(1.12) brightness(1.07) drop-shadow(0 0 10px rgba(242, 179, 54, 0.45)) !important;
}
::selection {
background: var(--swat-gold-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-gold-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--swat-gold) !important;
}
a:hover,
a:focus {
color: #f8d48d !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-gold-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(61, 43, 8, 0.98), rgba(28, 19, 3, 0.98)) !important;
border-color: var(--swat-gold-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(248, 212, 140, 0.34) inset, 0 -2px 0 var(--swat-gold-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-gold-mid) !important;
border-color: var(--swat-gold-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-gold-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-gold-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-gold) 0%, var(--swat-gold-dark) 100%) !important;
border-color: #f7cd7a var(--swat-gold-mid) var(--swat-gold-dark) !important;
box-shadow: 0 0 8px var(--swat-gold-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #f2b336 0%, #ab7b1b 48%, #66480d 100%) !important;
border-color: #f7cd7a var(--swat-gold-mid) var(--swat-gold-dark) !important;
box-shadow: 0 1px 0 rgba(251, 229, 185, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(242, 179, 54, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #fdf0d8 !important;
text-shadow: 0 0 8px rgba(242, 179, 54, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(42, 32, 13, 0.98), rgba(30, 23, 8, 0.98)) !important;
border-color: rgba(244, 188, 77, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(64, 48, 18, 0.98), rgba(41, 31, 10, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #f2b336 0%, #ab7b1b 50%, #66480d 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(242, 179, 54, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(247, 205, 122, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-gold) 0%, var(--swat-gold-dark) 100%) !important;
border-color: #f7cd7a var(--swat-gold-mid) var(--swat-gold-dark) !important;
box-shadow: 0 0 5px var(--swat-gold-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-gold), var(--swat-gold-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-gold-dark), var(--swat-gold-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-gold-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-gold-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-gold) !important;
border-color: rgba(242, 179, 54, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-gold) !important;
box-shadow: 0 0 7px var(--swat-gold-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(242, 179, 54, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(29, 21, 5, 0.98), rgba(72, 52, 11, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(242, 179, 54, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(29, 21, 5, 0.98), rgba(72, 52, 11, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(242, 179, 54, 1), rgba(134, 96, 21, 1)) !important;
box-shadow: 0 1px 0 rgba(248, 212, 141, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(36, 28, 11, 0.98), rgba(26, 20, 7, 0.98)) !important;
border-color: rgba(242, 179, 54, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(242, 179, 54, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(45, 33, 10, 0.98), rgba(25, 18, 5, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(242, 179, 54, 0.18) !important;
background-color: rgba(32, 23, 7, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(27, 21, 8, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #f8d48d !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(242, 179, 54, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(242, 179, 54, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-gold) 0%, var(--swat-gold-dark) 100%) !important;
border-color: #f7cd7a var(--swat-gold-mid) var(--swat-gold-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #f2b336 0%, #ab7b1b 48%, #66480d 100%) !important;
border-color: #f7cd7a var(--swat-gold-mid) var(--swat-gold-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(242, 179, 54, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(244, 188, 77, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-gold) !important;
border-color: rgba(242, 179, 54, 0.35) !important;
color: rgba(252, 239, 213, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #201b10;
--dash-panel: rgba(37, 31, 18, 0.96);
--dash-panel-2: rgba(34, 27, 14, 0.98);
--dash-card: rgba(46, 38, 20, 0.94);
--dash-card-hover: rgba(62, 49, 24, 0.96);
--dash-border: rgba(170, 152, 116, 0.22);
--dash-accent: #dba02a;
--dash-accent-2: #f3b63e;
--dash-text: #fdf6e6;
--dash-muted: #cbc0ab;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(126, 96, 36, 0.18), transparent 46%),
linear-gradient(180deg, #251e11 0%, #201b10 42%, #1e180c 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(236deg) saturate(1.02) brightness(1.1) drop-shadow(0 0 12px rgba(243, 182, 62, 0.22)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(52, 39, 12, 0.98), rgba(98, 72, 22, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #e0d7c3 !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(219, 160, 42, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(243, 182, 62, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(33, 27, 16, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(35, 28, 14, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #fae3b5 !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(100, 73, 19, 0.98), rgba(131, 97, 29, 0.82)) !important;
border: 1px solid rgba(243, 182, 62, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #f3b740 !important;
}
a:hover,
a:focus {
color: #f9d999 !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(219, 160, 42, 0.2) !important;
border: 1px solid rgba(243, 182, 62, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #fdf5e4 !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(219, 160, 42, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(29, 24, 13, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-gold) 0%, var(--swat-gold-dark) 100%) !important;
border-color: #f7cd7a var(--swat-gold-mid) var(--swat-gold-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(244, 188, 77, 0.18) !important;
box-shadow: 0 1px 0 rgba(248, 212, 140, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(205, 195, 175, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: var(--swat-gold) !important;
text-shadow: 0 0 0.5em var(--swat-gold) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--swat-gold) !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(26, 21, 11, 0.88) !important;
border: 1px solid rgba(170, 152, 116, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(24, 19, 9, 0.96), rgba(39, 31, 14, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(170, 152, 116, 0.2) !important;
background: rgba(73, 56, 23, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #f2b53a !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(237, 225, 202, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(34, 27, 14, 0.96) !important;
border-color: rgba(170, 152, 116, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(30, 23, 9, 0.94) !important;
border-color: rgba(219, 160, 42, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(219, 160, 42, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(219, 160, 42, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(219, 160, 42, 0.18) !important;
border-color: rgba(219, 160, 42, 0.55) !important;
color: #fdf4e2 !important;
}

Display More

GREEN

Code

/*
* SWAT Portal BlackOps: green theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--swat-green: #34d399;
--swat-green-dark: #047857;
--swat-green-mid: #10a873;
--swat-green-soft: rgba(52, 211, 153, 0.22);
--swat-green-glow: rgba(52, 211, 153, 0.5);
--swat-green-border: rgba(52, 211, 153, 0.82);
--swat-input-green: #052219;
--swat-panel-green: rgba(6, 39, 28, 0.96);
--swat-panel-green-dark: rgba(2, 16, 12, 0.98);
}
html,
body {
background-color: #03100a !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(99, 243, 181, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(120, 245, 191, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(54, 240, 159, 0.44) 0%, rgba(24, 123, 81, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(75, 241, 169, 0.34) 0%, rgba(29, 116, 78, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(33, 162, 106, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #04130d 0%, #092217 38%, #030c08 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(116, 245, 189, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(38, 203, 131, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(3, 20, 13, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(6, 24, 17, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(73, 241, 168, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(117, 245, 189, 0.42) 0%, rgba(32, 153, 101, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(14, 79, 51, 0.92) 0%, rgba(5, 31, 19, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(3, 19, 12, 0.9), rgba(7, 43, 27, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(113, 244, 187, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(47, 239, 156, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(14, 65, 43, 0.94) 0%, rgba(7, 31, 20, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(276deg) saturate(1.12) brightness(1.06) drop-shadow(0 0 10px rgba(50, 240, 158, 0.45)) !important;
}
::selection {
background: var(--swat-green-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-green-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--swat-green) !important;
}
a:hover,
a:focus {
color: #87f6c6 !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-green-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(8, 59, 37, 0.98), rgba(3, 27, 16, 0.98)) !important;
border-color: var(--swat-green-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(134, 246, 198, 0.34) inset, 0 -2px 0 var(--swat-green-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-green-mid) !important;
border-color: var(--swat-green-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-green-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-green-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-green) 0%, var(--swat-green-dark) 100%) !important;
border-color: #74f5bd var(--swat-green-mid) var(--swat-green-dark) !important;
box-shadow: 0 0 8px var(--swat-green-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #32f09e 0%, #1ca56a 48%, #0e633e 100%) !important;
border-color: #74f5bd var(--swat-green-mid) var(--swat-green-dark) !important;
box-shadow: 0 1px 0 rgba(177, 249, 218, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(50, 240, 158, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #cffbe8 !important;
text-shadow: 0 0 8px rgba(50, 240, 158, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(13, 41, 29, 0.98), rgba(8, 29, 20, 0.98)) !important;
border-color: rgba(73, 241, 168, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(18, 62, 43, 0.98), rgba(10, 40, 27, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #32f09e 0%, #1ca56a 50%, #0e633e 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(50, 240, 158, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(116, 245, 189, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-green) 0%, var(--swat-green-dark) 100%) !important;
border-color: #74f5bd var(--swat-green-mid) var(--swat-green-dark) !important;
box-shadow: 0 0 5px var(--swat-green-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-green), var(--swat-green-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-green-dark), var(--swat-green-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-green-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-green-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-green) !important;
border-color: rgba(50, 240, 158, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-green) !important;
box-shadow: 0 0 7px var(--swat-green-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(50, 240, 158, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(5, 28, 18, 0.98), rgba(11, 70, 45, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(50, 240, 158, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(5, 28, 18, 0.98), rgba(11, 70, 45, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(50, 240, 158, 1), rgba(21, 130, 83, 1)) !important;
box-shadow: 0 1px 0 rgba(135, 246, 198, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(11, 35, 25, 0.98), rgba(7, 25, 18, 0.98)) !important;
border-color: rgba(50, 240, 158, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(50, 240, 158, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(10, 43, 29, 0.98), rgba(5, 24, 16, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(50, 240, 158, 0.18) !important;
background-color: rgba(7, 31, 20, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(8, 26, 18, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #87f6c6 !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(50, 240, 158, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(50, 240, 158, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-green) 0%, var(--swat-green-dark) 100%) !important;
border-color: #74f5bd var(--swat-green-mid) var(--swat-green-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #32f09e 0%, #1ca56a 48%, #0e633e 100%) !important;
border-color: #74f5bd var(--swat-green-mid) var(--swat-green-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(50, 240, 158, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(73, 241, 168, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-green) !important;
border-color: rgba(50, 240, 158, 0.35) !important;
color: rgba(205, 251, 231, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #101f19;
--dash-panel: rgba(18, 36, 28, 0.96);
--dash-panel-2: rgba(14, 33, 25, 0.98);
--dash-card: rgba(20, 45, 34, 0.94);
--dash-card-hover: rgba(24, 60, 45, 0.96);
--dash-border: rgba(113, 167, 144, 0.22);
--dash-accent: #28d98c;
--dash-accent-2: #3af0a1;
--dash-text: #ddfcef;
--dash-muted: #a7c8ba;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(36, 123, 85, 0.18), transparent 46%),
linear-gradient(180deg, #11241c 0%, #101f19 42%, #0c1d16 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(276deg) saturate(1.02) brightness(1.08) drop-shadow(0 0 12px rgba(58, 240, 161, 0.22)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(12, 51, 34, 0.98), rgba(22, 95, 63, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #beddd0 !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(40, 217, 140, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(58, 240, 161, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(16, 32, 25, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(14, 34, 25, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #aef9d8 !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(20, 97, 64, 0.98), rgba(29, 127, 85, 0.82)) !important;
border: 1px solid rgba(58, 240, 161, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #3cf0a2 !important;
}
a:hover,
a:focus {
color: #93f7cb !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(40, 217, 140, 0.2) !important;
border: 1px solid rgba(58, 240, 161, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #dbfcee !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(40, 217, 140, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(13, 28, 22, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-green) 0%, var(--swat-green-dark) 100%) !important;
border-color: #74f5bd var(--swat-green-mid) var(--swat-green-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(73, 241, 168, 0.18) !important;
box-shadow: 0 1px 0 rgba(134, 246, 198, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(171, 202, 188, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: var(--swat-green) !important;
text-shadow: 0 0 0.5em var(--swat-green) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--swat-green) !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(11, 26, 19, 0.88) !important;
border: 1px solid rgba(113, 167, 144, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(9, 23, 17, 0.96), rgba(14, 38, 28, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(113, 167, 144, 0.2) !important;
background: rgba(23, 71, 50, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #37f0a0 !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(196, 234, 218, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(14, 33, 25, 0.96) !important;
border-color: rgba(113, 167, 144, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(9, 29, 21, 0.94) !important;
border-color: rgba(40, 217, 140, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(40, 217, 140, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(40, 217, 140, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(40, 217, 140, 0.18) !important;
border-color: rgba(40, 217, 140, 0.55) !important;
color: #d9fced !important;
}

Display More

RED

Code

/*
* SWAT Portal BlackOps: red theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--swat-red: #ff4d5e;
--swat-red-dark: #8f1022;
--swat-red-mid: #d7263d;
--swat-red-soft: rgba(255, 77, 94, 0.22);
--swat-red-glow: rgba(255, 77, 94, 0.55);
--swat-red-border: rgba(255, 99, 112, 0.9);
--swat-input-red: #260710;
--swat-panel-red: rgba(45, 7, 18, 0.96);
--swat-panel-red-dark: rgba(18, 2, 8, 0.98);
}
html,
body {
background-color: #120204 !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(255, 101, 122, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(255, 125, 142, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(255, 51, 78, 0.44) 0%, rgba(137, 17, 33, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(255, 75, 99, 0.34) 0%, rgba(128, 23, 37, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(180, 23, 44, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #150305 0%, #26070b 38%, #0d0203 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(255, 120, 138, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(225, 26, 53, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(22, 2, 5, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(27, 5, 8, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(255, 72, 96, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(255, 122, 140, 0.42) 0%, rgba(170, 23, 43, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(88, 9, 20, 0.92) 0%, rgba(34, 3, 7, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(21, 2, 5, 0.9), rgba(48, 4, 10, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(255, 117, 135, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(255, 43, 71, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(72, 10, 18, 0.94) 0%, rgba(34, 5, 9, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(122deg) saturate(1.32) brightness(1.08) drop-shadow(0 0 10px rgba(255, 47, 75, 0.45)) !important;
}
::selection {
background: var(--swat-red-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-red-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--swat-red) !important;
}
a:hover,
a:focus {
color: #ff8e9d !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-red-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(66, 4, 12, 0.98), rgba(30, 1, 5, 0.98)) !important;
border-color: var(--swat-red-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(255, 141, 156, 0.34) inset, 0 -2px 0 var(--swat-red-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-red-mid) !important;
border-color: var(--swat-red-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-red-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-red-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-red) 0%, var(--swat-red-dark) 100%) !important;
border-color: #ff798b var(--swat-red-mid) var(--swat-red-dark) !important;
box-shadow: 0 0 8px var(--swat-red-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #ff2f4b 0%, #b81228 48%, #6e0715 100%) !important;
border-color: #ff798b var(--swat-red-mid) var(--swat-red-dark) !important;
box-shadow: 0 1px 0 rgba(255, 189, 198, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(255, 47, 75, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #ffdfe3 !important;
text-shadow: 0 0 8px rgba(255, 47, 75, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(45, 11, 16, 0.98), rgba(32, 7, 10, 0.98)) !important;
border-color: rgba(255, 72, 96, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(68, 15, 22, 0.98), rgba(44, 8, 13, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #ff2f4b 0%, #b81228 50%, #6e0715 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(255, 47, 75, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(255, 121, 139, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-red) 0%, var(--swat-red-dark) 100%) !important;
border-color: #ff798b var(--swat-red-mid) var(--swat-red-dark) !important;
box-shadow: 0 0 5px var(--swat-red-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-red), var(--swat-red-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-red-dark), var(--swat-red-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-red-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-red-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-red) !important;
border-color: rgba(255, 47, 75, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-red) !important;
box-shadow: 0 0 7px var(--swat-red-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(255, 47, 75, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(31, 3, 7, 0.98), rgba(78, 7, 16, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(255, 47, 75, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(31, 3, 7, 0.98), rgba(78, 7, 16, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(255, 47, 75, 1), rgba(145, 13, 31, 1)) !important;
box-shadow: 0 1px 0 rgba(255, 142, 157, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(38, 10, 14, 0.98), rgba(28, 6, 9, 0.98)) !important;
border-color: rgba(255, 47, 75, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 47, 75, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(48, 8, 13, 0.98), rgba(27, 4, 7, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(255, 47, 75, 0.18) !important;
background-color: rgba(34, 5, 9, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(29, 7, 10, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #ff8e9d !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(255, 47, 75, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(255, 47, 75, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-red) 0%, var(--swat-red-dark) 100%) !important;
border-color: #ff798b var(--swat-red-mid) var(--swat-red-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #ff2f4b 0%, #b81228 48%, #6e0715 100%) !important;
border-color: #ff798b var(--swat-red-mid) var(--swat-red-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(255, 47, 75, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(255, 72, 96, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-red) !important;
border-color: rgba(255, 47, 75, 0.35) !important;
color: rgba(255, 220, 225, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #220f12;
--dash-panel: rgba(39, 17, 20, 0.96);
--dash-panel-2: rgba(36, 13, 16, 0.98);
--dash-card: rgba(49, 19, 23, 0.94);
--dash-card-hover: rgba(66, 22, 28, 0.96);
--dash-border: rgba(176, 116, 124, 0.22);
--dash-accent: #e8233d;
--dash-accent-2: #ff3853;
--dash-text: #ffeef0;
--dash-muted: #d0aeb3;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(135, 30, 44, 0.18), transparent 46%),
linear-gradient(180deg, #271013 0%, #220f12 42%, #200b0e 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(122deg) saturate(1.18) brightness(1.1) drop-shadow(0 0 12px rgba(255, 56, 83, 0.22)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(56, 9, 15, 0.98), rgba(105, 17, 29, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #e5c7cb !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(232, 35, 61, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(255, 56, 83, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(35, 15, 18, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(37, 13, 16, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #ffb9c2 !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(108, 14, 27, 0.98), rgba(141, 22, 38, 0.82)) !important;
border: 1px solid rgba(255, 56, 83, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #ff3a54 !important;
}
a:hover,
a:focus {
color: #ff9ba8 !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(232, 35, 61, 0.2) !important;
border: 1px solid rgba(255, 56, 83, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #ffecef !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(232, 35, 61, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(31, 12, 15, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-red) 0%, var(--swat-red-dark) 100%) !important;
border-color: #ff798b var(--swat-red-mid) var(--swat-red-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(255, 72, 96, 0.18) !important;
box-shadow: 0 1px 0 rgba(255, 141, 156, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(210, 178, 182, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: var(--swat-red) !important;
text-shadow: 0 0 0.5em var(--swat-red) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--swat-red) !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(28, 10, 12, 0.88) !important;
border: 1px solid rgba(176, 116, 124, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(25, 8, 10, 0.96), rgba(42, 13, 17, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(176, 116, 124, 0.2) !important;
background: rgba(78, 20, 28, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #ff344f !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(241, 207, 212, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(36, 13, 16, 0.96) !important;
border-color: rgba(176, 116, 124, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(32, 8, 11, 0.94) !important;
border-color: rgba(232, 35, 61, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(232, 35, 61, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(232, 35, 61, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(232, 35, 61, 0.18) !important;
border-color: rgba(232, 35, 61, 0.55) !important;
color: #ffeaed !important;
}

Display More

YELLOW

Code

/*
* SWAT Portal BlackOps: yellow theme override
* Use after the original style-10.css, e.g. in Stylus or as custom WoltLab CSS.
*/
:root {
--swat-yellow: #ffe45c;
--swat-yellow-dark: #9f6f00;
--swat-yellow-mid: #d6a300;
--swat-yellow-soft: rgba(255, 228, 92, 0.22);
--swat-yellow-glow: rgba(255, 228, 92, 0.5);
--swat-yellow-border: rgba(255, 228, 92, 0.82);
--swat-input-yellow: #251b04;
--swat-panel-yellow: rgba(43, 31, 7, 0.96);
--swat-panel-yellow-dark: rgba(18, 12, 2, 0.98);
}
html,
body {
background-color: #121002 !important;
background-image:
radial-gradient(circle at 12% 18%, rgba(251, 233, 112, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(circle at 88% 64%, rgba(252, 236, 136, 0.32) 0 1px, transparent 2px),
radial-gradient(ellipse at 8% 70%, rgba(250, 225, 62, 0.44) 0%, rgba(137, 121, 20, 0.24) 26%, transparent 58%),
radial-gradient(ellipse at 84% 22%, rgba(251, 229, 86, 0.34) 0%, rgba(128, 114, 26, 0.26) 30%, transparent 62%),
radial-gradient(ellipse at 50% 105%, rgba(180, 159, 27, 0.38) 0%, transparent 52%),
linear-gradient(125deg, #151304 0%, #262208 38%, #0d0c02 72%, #000 100%) !important;
background-attachment: fixed !important;
background-size:
260px 220px,
310px 270px,
380px 330px,
470px 390px,
cover,
cover,
cover,
cover !important;
}
body::before {
background:
radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
radial-gradient(circle at 82% 18%, rgba(252, 236, 131, 0.45) 0 1px, transparent 2px),
radial-gradient(circle at 62% 76%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
radial-gradient(ellipse at 80% 8%, rgba(224, 198, 32, 0.34) 0%, transparent 42%),
linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55)) !important;
background-size: 520px 420px, 640px 560px, 760px 680px, cover, cover !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.8;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
#pageContainer,
#pageLogoContainer,
.pageWrapperContainer {
background-color: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
background-color: rgba(22, 19, 3, 0.94) !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer {
background-color: rgba(27, 24, 6, 0.96) !important;
}
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.wbbBoardList,
.messageList,
.containerList {
border-color: rgba(251, 228, 83, 0.14) !important;
}
#pageLogoContainer {
background-image:
radial-gradient(ellipse at 34% 0%, rgba(252, 236, 133, 0.42) 0%, rgba(170, 151, 27, 0.28) 22%, transparent 45%),
radial-gradient(ellipse at 78% 12%, rgba(88, 78, 11, 0.92) 0%, rgba(34, 30, 4, 0.82) 45%, transparent 70%),
linear-gradient(105deg, rgba(21, 18, 3, 0.9), rgba(48, 42, 5, 0.62), rgba(0, 0, 0, 0.82)) !important;
background-attachment: fixed !important;
background-blend-mode: screen, normal, normal !important;
}
#pageLogoContainer::before {
background:
linear-gradient(118deg, transparent 0 42%, rgba(252, 235, 128, 0.75) 44%, rgba(255, 255, 255, 0.95) 45%, rgba(250, 224, 54, 0.48) 47%, transparent 50%),
radial-gradient(ellipse at 66% 0%, rgba(72, 64, 12, 0.94) 0%, rgba(34, 30, 6, 0.96) 46%, transparent 47%) !important;
bottom: 0;
content: "";
left: 0;
opacity: 0.72;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
#pageLogoContainer {
position: relative;
}
#pageLogoContainer > div {
position: relative;
z-index: 1;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(248deg) saturate(1.18) brightness(1.08) drop-shadow(0 0 10px rgba(250, 224, 58, 0.45)) !important;
}
::selection {
background: var(--swat-yellow-mid) !important;
color: #fff !important;
}
::-moz-selection {
background: var(--swat-yellow-mid) !important;
color: #fff !important;
}
a,
.breadcrumbs > ol > li:last-child > a,
.breadcrumbs > ol > li:last-child::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::before,
.messageQuickReplyCollapsed .messageQuickReplyContent::after,
.commentListAddComment.collapsed::before,
.commentListAddComment.collapsed::after,
.icon.red,
.fa.red {
color: var(--swat-yellow) !important;
}
a:hover,
a:focus {
color: #fcef99 !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
.contentChrome,
.contentChromeGlow {
border-color: var(--swat-yellow-border) !important;
}
.pageNavigation,
.breadcrumbs,
.pageHeaderFacade,
#pageHeaderSubMenu,
.contentHeader,
.contentHeaderNavigation,
.messageGroupNavigation,
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4,
.userPanel,
.userPanelItems,
.userPanelItems > li,
.userPanelItems > li > a,
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes,
.footer,
.footerMenu,
.footerNavigation,
.footerLinks,
.copyright,
.pageFooterCopyright {
background: linear-gradient(180deg, rgba(66, 58, 6, 0.98), rgba(30, 26, 2, 0.98)) !important;
border-color: var(--swat-yellow-border) !important;
}
.pageNavigation,
.breadcrumbs {
box-shadow: 0 1px 0 rgba(252, 239, 152, 0.34) inset, 0 -2px 0 var(--swat-yellow-mid) inset !important;
}
.breadcrumbs::after,
.breadcrumbs::before,
.pageNavigation::after,
.pageNavigation::before {
background: var(--swat-yellow-mid) !important;
border-color: var(--swat-yellow-border) !important;
}
@media (max-width: 1024px) {
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary {
border-bottom-color: var(--swat-yellow-border) !important;
}
#pageWrapperContainer {
border-top-color: var(--swat-yellow-border) !important;
}
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.headerContentMessageGridBox > a,
.pagination > ul > li.active > a,
.pagination > ul > li > a:hover {
background-image: linear-gradient(180deg, var(--swat-yellow) 0%, var(--swat-yellow-dark) 100%) !important;
border-color: #fcec84 var(--swat-yellow-mid) var(--swat-yellow-dark) !important;
box-shadow: 0 0 8px var(--swat-yellow-glow), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbBoardList .wbbCategory > .wbbCategoryTitle,
.wbbCategory > header,
.wbbCategoryHeader,
.wbbCategoryTitle,
.boxTitle,
.contentHeaderTitle,
.sectionTitle {
background: linear-gradient(180deg, #fae03a 0%, #b7a217 48%, #6e600a 100%) !important;
border-color: #fcec84 var(--swat-yellow-mid) var(--swat-yellow-dark) !important;
box-shadow: 0 1px 0 rgba(254, 246, 199, 0.36) inset, 0 -1px 0 rgba(0, 0, 0, 0.72) inset, 0 0 14px rgba(250, 224, 58, 0.18) !important;
color: #fff !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65) !important;
}
.wbbBoardList .wbbCategory h2,
.wbbBoardList .wbbCategory h2 a,
.wbbCategoryTitle a,
.boxTitle a,
.sectionTitle a {
color: #fefce9 !important;
text-shadow: 0 0 8px rgba(250, 224, 58, 0.75), 0 1px 1px #000 !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li {
background:
linear-gradient(180deg, rgba(45, 41, 12, 0.98), rgba(32, 29, 8, 0.98)) !important;
border-color: rgba(251, 228, 83, 0.12) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background:
linear-gradient(180deg, rgba(68, 61, 17, 0.98), rgba(44, 39, 9, 0.98)) !important;
}
.contentHeaderTitle,
.messageGroupList .messageGroupLink,
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(180deg, #fae03a 0%, #b7a217 50%, #6e600a 100%) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(250, 224, 58, 0.75), 0 1px 1px #000 !important;
}
.messageGroupList .messageGroupLink,
.messageGroupLink {
border-color: rgba(252, 236, 132, 0.65) !important;
}
.tabMenuContainer > .menu ul li.ui-state-active a,
.tabMenuContainer > .menu ul li.ui-state-active a:hover:not([disabled]),
.tabmenu ul li.ui-state-active a,
.tabmenu ul li.ui-state-active a:hover:not([disabled]) {
background-image: linear-gradient(180deg, var(--swat-yellow) 0%, var(--swat-yellow-dark) 100%) !important;
border-color: #fcec84 var(--swat-yellow-mid) var(--swat-yellow-dark) !important;
box-shadow: 0 0 5px var(--swat-yellow-glow) inset, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
color: #fff !important;
}
.badge.badgeUpdate,
a.badge.badgeUpdate,
.badge.red,
a.badge.red {
background-image: linear-gradient(var(--swat-yellow), var(--swat-yellow-dark)) !important;
color: #fff !important;
}
a.badge:hover.badgeUpdate,
a.badge:hover.red {
background-image: linear-gradient(var(--swat-yellow-dark), var(--swat-yellow-dark)) !important;
}
.tagList .tag:hover {
background-color: var(--swat-yellow-mid) !important;
}
.tagList .tag:hover::before {
border-right-color: var(--swat-yellow-mid) !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background-color: var(--swat-input-yellow) !important;
border-color: rgba(250, 224, 58, 0.35) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--swat-yellow) !important;
box-shadow: 0 0 7px var(--swat-yellow-glow) !important;
}
.pageHeaderMobileMenu,
#pageHeaderSubMenu,
.userProfileUserWithCoverPhoto::before {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(250, 224, 58, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(31, 27, 4, 0.98), rgba(78, 69, 9, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
@media (max-width: 799px) {
#pageHeaderSubMenu,
.pageHeaderMobileMenu {
background-image:
radial-gradient(ellipse at 20% 45%, rgba(250, 224, 58, 0.26) 0%, transparent 52%),
linear-gradient(125deg, rgba(31, 27, 4, 0.98), rgba(78, 69, 9, 0.94), rgba(0, 0, 0, 0.98)) !important;
background-blend-mode: screen, normal !important;
}
}
.boxInfo,
.calendarFullMonthView .calendarEventLink {
background: linear-gradient(rgba(250, 224, 58, 1), rgba(145, 127, 17, 1)) !important;
box-shadow: 0 1px 0 rgba(252, 239, 153, 0.75) inset !important;
}
.messageSidebar,
.messageContent,
.message,
.messageHeader,
.messageBody,
.messageFooter,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
div.scToc,
.scToc,
.toc,
.tableOfContents,
.codeBox,
.spoilerBox > .spoilerBoxContent,
.tabMenuContainer,
.tabMenuContent,
.htmlContent blockquote,
.messageBody blockquote,
.messageText blockquote,
.boxesFooter .box,
.boxesFooterBoxes .box,
.footerBoxes .box,
.pageFooter .box,
.pageFooterContainer .box,
#pageFooter .box {
background:
linear-gradient(180deg, rgba(38, 34, 11, 0.98), rgba(28, 25, 7, 0.98)) !important;
border-color: rgba(250, 224, 58, 0.16) !important;
}
.messageSidebar {
background:
radial-gradient(ellipse at 50% 0%, rgba(250, 224, 58, 0.18) 0%, transparent 58%),
linear-gradient(180deg, rgba(48, 43, 9, 0.98), rgba(27, 24, 5, 0.98)) !important;
}
.messageSidebar::before,
.messageSidebar::after,
.messageContent::before,
.messageContent::after {
border-color: rgba(250, 224, 58, 0.18) !important;
background-color: rgba(34, 30, 6, 0.98) !important;
}
.wbbLastPost,
.wbbBoardStats,
.messageGroupList .columnLastPost,
.boxContent,
.interactiveDropdown,
.popover,
.dialogContainer,
.dropdownMenu,
.dropdown,
.dropdownOpen,
.menuOverlay,
.menuOverlayItemLink,
.menuOverlayItemLinkIcon,
.buttonGroup,
.messageFooterGroup,
.messageHeaderMetaData,
.messageQuickReply,
.messageQuickReplyContent,
.redactor-box,
.redactor-layer,
.quoteBox,
woltlab-quote,
.attachmentThumbnail,
.embeddedAttachmentLink,
.inlineCode,
kbd,
.boxesFooter .boxContent,
.boxesFooterBoxes .boxContent,
.footerBoxes .boxContent,
.pageFooter .boxContent,
.pageFooterContainer .boxContent,
#pageFooter .boxContent,
.footerMenu,
.footerNavigation,
.footerLinks,
.googleTranslateElement,
#google_translate_element,
.goog-te-gadget,
.socialBox,
#socialBox,
.shareButtons,
.shareButtonList,
.shareButtonList > li > a {
background-color: rgba(29, 26, 8, 0.98) !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
background: transparent !important;
color: #fcef99 !important;
}
.mainMenu .boxMenu .boxMenuDepth1 a:hover,
.mainMenu .boxMenu .boxMenuDepth2 a:hover,
.mainMenu .boxMenu .boxMenuDepth3 a:hover,
.mainMenu .boxMenu .boxMenuDepth4 a:hover {
background: rgba(250, 224, 58, 0.16) !important;
color: #fff !important;
}
div.scToc,
.scToc,
.toc,
.tableOfContents {
box-shadow: 0 0 0 1px rgba(250, 224, 58, 0.14), 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.userPanelItems > li > a:hover,
.shareButtons a,
.shareButtonList > li > a,
.boxesFooter a.button,
.pageFooter a.button,
#pageFooter a.button {
background-image: linear-gradient(180deg, var(--swat-yellow) 0%, var(--swat-yellow-dark) 100%) !important;
border-color: #fcec84 var(--swat-yellow-mid) var(--swat-yellow-dark) !important;
color: #fff !important;
}
.boxesFooter .boxTitle,
.boxesFooterBoxes .boxTitle,
.footerBoxes .boxTitle,
.pageFooter .boxTitle,
.pageFooterContainer .boxTitle,
#pageFooter .boxTitle {
background: linear-gradient(180deg, #fae03a 0%, #b7a217 48%, #6e600a 100%) !important;
border-color: #fcec84 var(--swat-yellow-mid) var(--swat-yellow-dark) !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(250, 224, 58, 0.75), 0 1px 1px #000 !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer {
box-shadow: 0 -1px 0 rgba(251, 228, 83, 0.16), 0 -18px 45px rgba(0, 0, 0, 0.22) !important;
}
#pageFooter select,
.pageFooter select,
.pageFooterContainer select,
#google_translate_element select {
background-color: var(--swat-input-yellow) !important;
border-color: rgba(250, 224, 58, 0.35) !important;
color: rgba(254, 251, 230, 0.92) !important;
}
/*
* Dashboard-style polish inspired by the supplied FLATHACKSWIKI screenshot.
* This block intentionally overrides the stronger BlackOps/space styling above.
*/
:root {
--dash-bg: #222010;
--dash-panel: rgba(39, 36, 18, 0.96);
--dash-panel-2: rgba(36, 33, 14, 0.98);
--dash-card: rgba(49, 45, 20, 0.94);
--dash-card-hover: rgba(66, 61, 24, 0.96);
--dash-border: rgba(177, 169, 121, 0.22);
--dash-accent: #e4cb2d;
--dash-accent-2: #fae243;
--dash-text: #fffef8;
--dash-muted: #d2ceb4;
}
html,
body {
background:
radial-gradient(ellipse at 24% 0%, rgba(135, 121, 33, 0.18), transparent 46%),
linear-gradient(180deg, #272411 0%, #222010 42%, #201d0c 100%) !important;
color: var(--dash-text) !important;
}
body,
button,
input,
select,
textarea {
font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif !important;
}
#pageContainer {
background: transparent !important;
}
#pageWrapperContainer,
#pageHeaderContainer #pageHeaderPanel > .layoutBoundary,
#pageLogoContainer,
#pageHeaderContent,
.baseHeaderContentVisitor,
.pageHeaderContainer,
.pageHeaderPanel {
background: transparent !important;
box-shadow: none !important;
}
#pageWrapperContainer > .layoutBoundary,
#pageHeaderContainer .layoutBoundary,
#pageLogoContainer .layoutBoundary,
#pageHeaderContent .layoutBoundary {
max-width: 1680px !important;
}
#pageLogoContainer {
padding: 22px 0 18px !important;
}
#pageLogoContainer::before {
opacity: 0.28 !important;
}
.pageHeaderLogo img,
.pageHeaderLogoLarge,
.pageHeaderLogoSmall {
filter: hue-rotate(248deg) saturate(1.08) brightness(1.1) drop-shadow(0 0 12px rgba(250, 226, 67, 0.22)) !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
#pageHeaderContent .layoutBoundary > * {
background:
linear-gradient(135deg, rgba(56, 50, 10, 0.98), rgba(105, 93, 20, 0.82)) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
.mainMenu,
.userPanel,
#topMenu,
#pageHeaderPanel,
.pageHeaderPanel {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
overflow: hidden !important;
}
.mainMenu .boxMenu > li > a,
.mainMenu .boxMenu > li > .boxMenuLink,
.userPanelItems > li > a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #e7e4ce !important;
font-weight: 700 !important;
text-transform: none !important;
}
.mainMenu .boxMenu > li.active > a,
.mainMenu .boxMenu > li.active > .boxMenuLink,
.mainMenu .boxMenu > li:hover > a,
.mainMenu .boxMenu > li:hover > .boxMenuLink,
.userPanelItems > li > a:hover {
background: rgba(228, 203, 45, 0.18) !important;
box-shadow: inset 0 0 0 1px rgba(250, 226, 67, 0.18) !important;
color: #fff !important;
}
.mainMenu .boxMenu .boxMenuDepth1,
.mainMenu .boxMenu .boxMenuDepth2,
.mainMenu .boxMenu .boxMenuDepth3,
.mainMenu .boxMenu .boxMenuDepth4 {
background: rgba(35, 33, 16, 0.98) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}
.breadcrumbs,
.pageNavigation,
.contentHeaderNavigation,
.messageGroupNavigation,
.footerMenu,
.footerNavigation,
.footerLinks {
background: rgba(37, 34, 14, 0.88) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.breadcrumbs::before,
.breadcrumbs::after,
.pageNavigation::before,
.pageNavigation::after {
display: none !important;
}
#content,
.content,
.content > .section,
.content > form,
.sectionContainer,
.tabularBox,
.messageList,
.wbbBoardList,
.containerList {
background: transparent !important;
border-color: transparent !important;
}
.wbbCategory,
.wbbBoardContainer,
.wbbBoardList .wbbBoard,
.message,
.messageList > li,
.sidebar .box,
.boxesSidebarLeft .box,
.boxesSidebarRight .box,
.boxesFooter .box,
.boxesFooterBoxes .box,
.pageFooter .box,
#pageFooter .box,
.dialogContainer,
.popover,
.interactiveDropdown,
div.scToc,
.scToc,
.tabMenuContainer,
.quoteBox,
woltlab-quote,
.codeBox,
.spoilerBox > .spoilerBoxContent {
background: var(--dash-panel) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
overflow: hidden !important;
}
.wbbBoardList .wbbBoard,
.wbbBoardContainer,
.tabularListRow,
.containerList > li,
.messageBody,
.messageContent,
.messageSidebar,
.messageHeader,
.messageFooter,
.wbbLastPost,
.wbbBoardStats,
.boxContent,
.boxesFooter .boxContent,
.pageFooter .boxContent,
#pageFooter .boxContent {
background: var(--dash-card) !important;
border-color: var(--dash-border) !important;
}
.wbbBoardList .wbbBoard:hover,
.wbbBoardContainer:hover,
.tabularListRow:hover,
.containerList > li:hover {
background: var(--dash-card-hover) !important;
}
.wbbBoardList .wbbCategory > header,
.wbbBoardList .wbbCategory .wbbCategoryTitle,
.wbbCategoryTitle,
.wbbCategoryHeader,
.boxTitle,
.sectionTitle,
.contentHeaderTitle,
.pageFooter .boxTitle,
#pageFooter .boxTitle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #fdf6c3 !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
.messageGroupLink,
.threadTitle,
.contentTitle {
background: linear-gradient(135deg, rgba(108, 96, 17, 0.98), rgba(141, 125, 25, 0.82)) !important;
border: 1px solid rgba(250, 226, 67, 0.24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
a,
.mainMenu .boxMenu .boxMenuDepth1 a,
.mainMenu .boxMenu .boxMenuDepth2 a,
.mainMenu .boxMenu .boxMenuDepth3 a,
.mainMenu .boxMenu .boxMenuDepth4 a {
color: #fae245 !important;
}
a:hover,
a:focus {
color: #fdf1a5 !important;
}
.button,
a.button,
button,
input[type="button"],
input[type="submit"],
.buttonGroup > li > a,
.buttonGroup > li > button,
.messageFooterGroup > li > a,
.messageFooterGroup > li > button,
.shareButtons a,
.shareButtonList > li > a {
background: rgba(228, 203, 45, 0.2) !important;
border: 1px solid rgba(250, 226, 67, 0.3) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #fffef6 !important;
}
.button:hover,
a.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.buttonGroup > li > a:hover,
.messageFooterGroup > li > a:hover {
background: rgba(228, 203, 45, 0.32) !important;
color: #fff !important;
}
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
background: rgba(31, 29, 13, 0.96) !important;
border: 1px solid var(--dash-border) !important;
border-radius: 8px !important;
color: var(--dash-text) !important;
}
.wbbBoardDescription,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: var(--dash-muted) !important;
}
#pageFooter,
.pageFooter,
.pageFooterContainer,
.boxesFooter,
.boxesFooterBoxes {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.message .button,
.message a.button,
.messageFooterButtons a,
.messageFooterButtons button,
.jsOnly.button,
.downloadButton,
a[href*="filebase/"],
a[href*="download"] {
background-image: linear-gradient(180deg, var(--swat-yellow) 0%, var(--swat-yellow-dark) 100%) !important;
border-color: #fcec84 var(--swat-yellow-mid) var(--swat-yellow-dark) !important;
color: #fff !important;
}
.messageSignature,
.signature,
.messageFooter,
.messageHeader {
border-color: rgba(251, 228, 83, 0.18) !important;
box-shadow: 0 1px 0 rgba(252, 239, 152, 0.08) inset !important;
}
.wbbBoardDescription,
.wbbBoardStats,
.messageMeta,
.messageFooter,
.messageSignature,
.userTitle,
.userCredits,
.dimmed,
small {
color: rgba(212, 208, 184, 0.86) !important;
}
.wcfLikeCounter.likeCounterDisliked {
color: var(--swat-yellow) !important;
text-shadow: 0 0 0.5em var(--swat-yellow) !important;
}
.codeBox .hlQuotes,
.codeBox .hlKeywords2,
.codeBox .hlKeywords5,
.diffHighlighter .hlRemoved {
color: var(--swat-yellow) !important;
}
/* WCF top cleanup: remove remaining header impurities */
#pageHeaderContent,
#pageHeaderContent > .layoutBoundary,
#pageHeaderContent .layoutBoundary > *,
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
width: 100% !important;
background: rgba(28, 26, 11, 0.88) !important;
border: 1px solid rgba(177, 169, 121, 0.22) !important;
border-radius: 8px !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}
#pageHeaderContent {
margin: 0 auto 28px !important;
}
#pageHeaderContent > .layoutBoundary {
max-width: 1680px !important;
min-height: 58px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
.headerContent,
.headerContentVisitor,
.headerContentInner,
.baseHeaderContentVisitor {
min-height: 58px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
background:
linear-gradient(90deg, rgba(25, 23, 9, 0.96), rgba(42, 38, 14, 0.86)) !important;
}
.headerContentMessage,
.headerContentMessageGrid,
.headerContentMessageGridBox,
.headerContentVisitor .box,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation,
.userInformation > * {
background: transparent !important;
box-shadow: none !important;
}
.headerContentMessageGrid,
.headerContentVisitor ul,
.headerContentVisitor .inlineList {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 0 !important;
}
.headerContentMessageGridBox,
.headerContentVisitor li,
.headerContentVisitorItem,
.userInformation > * {
padding: 8px 16px !important;
border-right: 1px solid rgba(177, 169, 121, 0.2) !important;
background: rgba(78, 71, 22, 0.42) !important;
}
.headerContentMessageGridBox:first-child,
.headerContentVisitor li:first-child,
.userInformation > *:first-child {
border-radius: 8px 0 0 8px !important;
}
.headerContentMessageGridBox:last-child,
.headerContentVisitor li:last-child,
.userInformation > *:last-child {
border-right: 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.headerContentMessageGridBox > a,
.headerContentMessageGridBox a,
.headerContentVisitor a,
.userInformation a {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #fae13f !important;
}
.headerContentMessageGridBox small,
.headerContentMessageGridBox .label,
.headerContentVisitor small,
.headerContentVisitor .label,
.userInformation small,
.userInformation .label {
color: rgba(242, 239, 215, 0.78) !important;
}
#pageHeaderPanel,
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel,
.pageHeaderPanel > .layoutBoundary,
.mainMenu,
.mainMenu > .boxMenu,
.userPanel,
.userPanelItems {
background: rgba(36, 33, 14, 0.96) !important;
border-color: rgba(177, 169, 121, 0.22) !important;
box-shadow: none !important;
}
#pageHeaderPanel > .layoutBoundary,
.pageHeaderPanel > .layoutBoundary {
max-width: 1680px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu,
.pageNavigation,
.breadcrumbs,
.contentHeaderNavigation {
background: rgba(32, 29, 9, 0.94) !important;
border-color: rgba(228, 203, 45, 0.28) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#pageHeaderSubMenu *,
.pageHeaderSubMenu *,
.pageNavigation *,
.breadcrumbs * {
border-color: rgba(228, 203, 45, 0.22) !important;
}
#pageHeaderSubMenu::before,
#pageHeaderSubMenu::after,
.pageHeaderSubMenu::before,
.pageHeaderSubMenu::after,
.pageNavigation::before,
.pageNavigation::after,
.breadcrumbs::before,
.breadcrumbs::after {
display: none !important;
}
#pageHeaderSubMenu,
.pageHeaderSubMenu {
border-bottom: 4px solid rgba(228, 203, 45, 0.9) !important;
}
[style*="background-color: #c"],
[style*="background-color:#c"],
[style*="background: #c"],
[style*="background:#c"],
[style*="border-color: #c"],
[style*="border-color:#c"],
[style*="background-color: red"],
[style*="background:red"],
.red,
.badge.red,
a.badge.red {
background: rgba(228, 203, 45, 0.18) !important;
border-color: rgba(228, 203, 45, 0.55) !important;
color: #fffdf4 !important;
}

Display More

Dear visitor, welcome! Create an account or sign in to comment

Enjoy SWAT Portal forum in different colors / themes

Aldenmar Odin May 19th 2026

Huor 4 hours ago

Share

2 user have posted here