Enjoy SWAR Portal forum in blue?

Aldenmar Odin · 2026-05-16T09:22:32+02:00

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

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

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

Enjoy SWAR Portal forum in blue?

Share

1 user wrote here

Users Online