/* ==UserStyle== @name VB Paradise 2.0 Dark Theme @namespace EaranMaleasi.vpbdark @author EaranMaleasi (https://github.com/EaranMaleasi) @homepageURL https://github.com/EaranMaleasi/VB-Paradise-dark-theme @supportURL https://github.com/EaranMaleasi/VB-Paradise-dark-theme/issues @updateURL https://raw.githubusercontent.com/EaranMaleasi/VB-Paradise-dark-theme/master/VBP_DarkTheme.user.css @version 0.2.7 @license CC-BY-NC-SA-4.0 ==/UserStyle== */ @-moz-document url-prefix("https://www.vb-paradise.de") { :root{ --backgroundColor: #202020; --backgroundColorElevated1:#292929; --backgroundColorElevated2:#303030; --backgroundColorElevated3:#393939; --backgroundColorElevated4:#404040; --backgroundColorElevated5:#494949; --textColorLight2:#fff; --textColorLight1:#ddd; --textColor:#bbb; --textColorDark1:#aaa; --textColorDark2:#999; --textColorDark3:#888; --accentColorBlue:#254c73; --accentColorCyan:#00494e; --accentColorYellow:#4c4b29; --linkColor:#00a7b3; --linkColorHover: var(--linkColor); --iconColor: #bbb; --borderColor:#888; --borderColorPostButton: #666; --threadPostProfilePanelStarter: var(--accentColorYellow); --threadPostProfilePanelReplier: var(--accentColorCyan); --badgeTextColor: var(--textColor); --badgeBackgroundColor: var(--backgroundColorElevated5); --breadcrumbsBackgroundColor: var(--backgroundColorElevated2); --breadcrumbsTextColor: var(--textColor); --containerHover: var(--backgroundColorElevated5); --textHeaderColor:var(--textColor); --quoteBackgroundColor: var(--backgroundColorElevated3); --inlineCodeBackground: var(--backgroundColorElevated5); --postButtonBackground: var(--backgroundColorElevated5); --noBorderWidth:0; --noBorderColor:transparent; --announcementColor:var(--accentColorYellow); --stickyColor:var(--accentColorCyan) } body { background-color: var(--accentColorBlue); color: var(--textColor); } #attachments, #settings, #smilies, #poll{ background-color:var(--backgroundColorElevated3); } #lbImage { border: 10px solid var(--backgroundColorElevated5); color: var(--textColor); } #lbBottom { border: 10px solid var(--backgroundColorElevated1); } #lbCenter, #lbBottomContainer { background-color: var(--backgroundColorElevated1); } #main { border-right: var(--noBorderWidth); } #main > div > div > .content { background-color: var(--backgroundColor); } #main.sidebarOrientationRight .sidebar { border-left: 1px solid var(--borderColor); } #main > div > div > .sidebar { background-color: var(--backgroundColor);; } #main > div > div > .sidebar > span > .collapsibleButton { background-color: var(--backgroundColor);; } #main > div > div > .sidebar > span > .collapsibleButton { border-color: var(--borderColor); } /*#main.sidebarOrientationLeft .sidebar { border-right: var(--noBorderWidth); }*/ #tplStatistics .containerList.doubleColumned > li { background-color: var(--backgroundColorElevated2) !important; } a { color: var(--linkColor); } a:hover{ color:var(--linkColorHover) } .attachmentThumbnail { background-color: var(--backgroundColorElevated3); } .badge { border-radius:var(--noBorderWidth); background-color: var(--badgeBackgroundColor); color: var(--textColorLight1); } .badge.label { border-radius: var(--noBorderWidth); } .badge.rankRegUser { background-color: var(--badgeBackgroundColor); color: var(--textColorLight1); } .breadcrumbs { border: var(--noBorderWidth);; border-radius: var(--noBorderWidth); } .breadcrumbs, .breadcrumbs > ul > li > a { background-color: var(--breadcrumbsBackgroundColor); color: var(--linkColor); text-shadow: none; } .breadcrumbs > ul > li > a { padding: 5px 5px 5px 18px; } .breadcrumbs > ul > li:first-child > a { border-radius: var(--noBorderWidth); padding-left: 9px; } .breadcrumbs > ul > li > .pointer { border-color: transparent transparent transparent transparent; } .breadcrumbs > ul > li > .pointer > span { border-color: transparent transparent transparent #ffffff; border-width: 12px; left: -15px; top: -12px; } .boxHeadline > p { color: #999; } .boxHeadline > h1 a, .boxSubHeadline > h2 a { color: #bbb; text-decoration: none; } .boxHeadline > h1, .boxSubHeadline > h2 { color: var(--textColor); text-shadow: none; } .button, input[type="reset"]:not([disabled]), input[type="submit"]:not([disabled]), input[type="button"]:not([disabled]), button:not([disabled]) { color: var(--textColor); border-radius:var(--noBorderWidth); border-color: var(--borderColorPostButton); box-shadow: none; background-color: var(--postButtonBackground); background-image: none; text-shadow: none; transition-property: none; transition-duration: 0s; transition-timing-function: linear; } .button.active, input[type="button"].active, button.active, .button.active:hover, input[type="button"].active:hover, button.active:hover { color: #fff; text-shadow: none; } .buttonGroup > li:first-child > .button { border-top-left-radius: var(--noBorderWidth); border-bottom-left-radius: var(--noBorderWidth); } .cke_chrome { display: block; border: 1; border-width: 10px; border-color: var(--backgroundColorElevated3); padding: var(--noBorderWidth); box-shadow: none; } .cke_bottom { padding: var(--noBorderWidth);; border: var(--noBorderWidth); box-shadow: none; background: var(--backgroundColorElevated3); background-image: none; } .cke_combo_button { margin: 0 6px 5px 0; border: var(--noBorderWidth); border-radius: var(--noBorderWidth); box-shadow: var(--noBorderWidth); background-image: none; } .cke_reset { background: var(--backgroundColor); } .cke_resizer { border-width: 15px 15px 0 0; } .cke_source { background-color: var(--backgroundColor); } .cke_top { border: var(--noBorderWidth); padding: var(--noBorderWidth); box-shadow: none; background: var(--backgroundColorElevated3); background-image:none; } .cke_toolgroup { margin: 0 0px 5px 0; border: var(--noBorderWidth); border-radius: var(--noBorderWidth); box-shadow: none; background-image: none; } .cke_button_label { padding-left: 3px; margin-top: 1px; line-height: 17px; vertical-align: middle; cursor: default; text-shadow: none; } .codeBox{ background-color:var(--backgroundColorElevated4) !important; } .codeBox > div { border-radius: var(--noBorderWidth); padding:5px 0px 0px 0px; box-shadow: inset 3em 0 0 var(--backgroundColorElevated4); } .codeBox > div > div{ color : var(--linkColor); background-color: var(--backgroundColorElevated4); } .codeBox > div > ol{ background-color: var(--backgroundColorElevated3); } .codeBox > div > div > h3 > span.icon { position: absolute; right: 10px; top: 5px; } .collapsibleButton::before { text-shadow: var(--noBorderWidth); } .container { background-color: var(--backgroundColorElevated1); border: var(--noBorderWidth); } .container, div.tabularBox, .wbbBoardList > li.tabularBox, .message { box-shadow: var(--noBorderWidth); } .containerHeadline > h3, .containerHeadline > h3 > a { text-shadow: none; } .containerHeadline > h3 > small { color: #bbb; } .containerList > li:nth-child(2n) { background-color: var(--backgroundColorElevated2); } .containerList > li:nth-child(2n+1) { background-color: var(--backgroundColorElevated1); } .containerList > li:hover { background-color: var(--containerHover); } .containerList.doubleColumned > li:hover { background-color: var(--containerHover); } .container, .message, .dropdownMenu, .attachmentThumbnail, .attachmentThumbnail > img, .attachmentThumbnail > a > img, .box48 .attachmentTinyThumbnail { border-radius: var(--noBorderWidth); } .containerList > li:first-child { border-top-left-radius: var(--noBorderWidth); border-top-right-radius: var(--noBorderWidth); } .containerList > li:last-child { border-bottom-left-radius: var(--noBorderWidth); border-bottom-right-radius: var(--noBorderWidth); } .container.containerPadding.statisticsCointainer { background-color: var(--backgroundColorElevated2) !important; } .containerList.statisticsBoxes > li > div { border: var(--noBorderWidth); background-color: var(--backgroundColorElevated5) !important; } div.userCredits{ color:var(--textColor); } /*div.dashboardBox{ background-color:#000 }*/ .dialogContainer { border-radius: var(--noBorderWidth); } .dialogContent { color: var(--textColor); background-color: var(--backgroundColorElevated1); } .dialogContent .formSubmit { background-color: var(--backgroundColorElevated2); border: var(--noBorderWidth); border-bottom-left-radius: var(--noBorderWidth); border-bottom-right-radius: var(--noBorderWidth); padding: 15px 0; } .dialogTitlebar { border: var(--noBorderWidth); border-top-left-radius: var(--noBorderWidth); border-top-right-radius: var(--noBorderWidth); } dl:not(.plain) > dt { color: var(--linkColor); } dl:not(.plain) > dd > small:not(.innerError) { color: var(--textColor);; } dl.statsDataList > dd { color: var(--textColor);; } dl:not(.plain) > dd > label { color: var(--linkColor); } .dropdownMenu { background-color: var(--backgroundColorElevated3); border: var(--noBorderWidth); } .dropdownMenu li > a, .dropdownMenu li > span { color: var(--textColor); text-shadow: none; } fieldset > legend { border-bottom: 1px solid var(--textColor);; color: #ddd; text-shadow: none; } .icon{ color : var(--iconColor);; text-shadow:none; } .inlineCode{ background-color: var(--inlineCodeBackground); border:var(--noBorderWidth); border-radius:var(--noBorderWidth); } input[type="text"], input[type="search"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], textarea, select[multiple] { background-color: var(--backgroundColor); border:var(--noBorderWidth); color: var(--textColor); } input[type="text"], input[type="search"], input[type="date"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], textarea, select[multiple] { border-radius: 0px; } li:nth-child(2n+1) .message .messageContent { background-color: var(--backgroundColorElevated1); } li:nth-child(2n) .message .messageContent { background-color: var(--backgroundColorElevated2); } li:nth-child(2n+1) .message.messageSidebarOrientationLeft .messageHeader::after { border-right-color: transparent; } .mainMenu > ul { border-radius: var(--noBorderWidth); } .mainMenu > ul > li.active > a { border-radius: var(--noBorderWidth); } .mainMenu > ul > li.active > a::before, .mainMenu > ul > li.active > a::after { box-shadow:none; } .message.messageReduced .messageContent { border-radius: var(--noBorderWidth); } .message .messageContent .messageHeader .messageHeadline > h1 { color: var(--textHeaderColor); text-shadow: none; } .message { background-color: var(--threadPostProfilePanelReplier); border: var(--noBorderWidth); } .messageGroupStarter .messageSidebarOrientationLeft { background-color: var(--threadPostProfilePanelStarter); } .message .messageSidebar header .username { text-shadow: none; } .messageOptions nav ul.smallButtons > li:first-child a.button { border-top-left-radius: var(--noBorderWidth); } .message.messageSidebarOrientationLeft .messageOptions nav ul.smallButtons > li:last-child a.button, .message.messageReduced .messageOptions nav ul.smallButtons > li:last-child a.button { border-bottom-right-radius: var(--noBorderWidth); } .messageBody { color: var(--TextHeaderColor); } .messageBody > .messageSignature { color: var(--TextHeaderColor); } .messageFooterNote { color: var(--textColorDark2); } .message .messageHeader .permalink { color: var(--textColorDark2); } .messageList .messageGroupStarter > .message::after { text-shadow: none; } .messageList .messageGroupStarter > .message.messageSidebarOrientationLeft::before { background-image: none; } .message.messageSidebarOrientationLeft .messageContent { border-radius: var(--noBorderWidth); } .message.messageSidebarOrientationLeft .messageContent { border-left: var(--noBorderWidth); } .message.messageSidebarOrientationLeft .messageHeader::before { border-color: var(--noBorderColor); } .message.messageSidebarOrientationLeft .messageHeader::after { border-color: var(--noBorderColor) } .messageGroupList .columnLastPost > div > div > small { color: var(--textColorDark2); } .message .messageOptions nav { bottom: -1px; opacity: 0; position: absolute; right: -21px; } .navigationHeader { background-color: var(--backgroundColorElevated5); border: var(--noBorderWidth); border-radius : var(--noBorderWidth); } .navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a { color: var(--linkColor); } .navigationFooter { border-radius: var(--noBorderWidth); background-color: var(--backgroundColorElevated5); border: var(--noBorderWidth); } .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon { color: var(--linkColor); } .navigation > ul.navigationItems > li > p { color: var(--linkColor); } .navigation > ul.navigationIcons > li > a:hover { background-color: var(--containerHover); } .pageNavigation ul li { border-radius: var(--noBorderWidth); } .pageNavigation ul li > a { color: var(--textColor); text-shadow: none; } .quoteBox{ background-color:var(--quoteBackgroundColor); } select{ background-color: var(--backgroundColor); color: var(--textColor) } .sidebar .sidebarBoxHeadline > h3 { color: #888; text-shadow: none; } .sidebar .sidebarBoxHeadline > h3 a { text-shadow: none; } .sidebar fieldset > legend { color: var(--textColor);; text-shadow: none; } .sidebar > div > fieldset:not(:last-child), .sidebar > div > div:not(:last-child) { border-color: #888; } .sidebar fieldset > nav ul > li > a { color: var(--linkColor); text-shadow: none; } .sidebar dl:not(.plain) > dt { text-shadow: none; } .sidebar > div > fieldset:not(:last-child), .sidebar > div > div:not(:last-child) { border-bottom: var(--noBorderWidth); } .table, .td, .tr, .cke_wysiwyg_div table { border-collapse:collapse; border-spacing:0; } .table th, .cke_wysiwyg_div table th { border-right: 0; color: #ffffff; } .table > tbody > tr > td:not(:last-child), .cke_wysiwyg_div table > tbody > tr > td:not(:last-child) { border-right: var(--noBorderWidth); } .table > tbody > tr:not(:last-child) > td, .cke_wysiwyg_div table > tbody > tr:not(:last-child) > td { border-bottom: var(--noBorderWidth); } .table td, .cke_wysiwyg_div table td { background-color: var(--backgroundColorElevated1); } .table > tbody > tr:nth-child(2n) > td, .cke_wysiwyg_div table > tbody > tr:nth-child(2n) > td { background-color: var(--backgroundColorElevated2);; } .table > tbody > tr:hover > td, .cke_wysiwyg_div table > tbody > tr:hover > td { background-color: var(--containerHover); } .table tr.jsMarked > td, .cke_wysiwyg_div table tr.jsMarked > td { background-color: var(--accentColorYellow) !important; } .table tr.jsMarked, .cke_wysiwyg_div table tr.jsMarked { color: var(--textColor); } .table tr.jsMarked a:not(.badge), .cke_wysiwyg_div table tr.jsMarked a:not(.badge) { color: var(--linkColor); } .tabMenu > ul { border-top-left-radius: var(--noBorderWidth); border-top-right-radius: var(--noBorderWidth); } .tabMenu > ul > li.ui-state-active > a { background-color: var(--backgroundColorElevated5); border-top-right-radius: var(--noBorderWidth); border-top-left-radius: var(--noBorderWidth); color:#ddd } .tabMenu > ul { background-color: var(--backgroundColorElevated5); border-color: transparent; border-width: var(--noBorderWidth); text-shadow: none; } .tabMenu > ul > li > a { color: var(--textColor);; } .tabMenu > ul > li.ui-state-active > a::before { border: var(--noBorderWidth); border-bottom-right-radius: var(--noBorderWidth); box-shadow: none; } .tabMenu > ul > li.ui-state-active > a::after { border: var(--noBorderWidth); border-bottom-left-radius: var(--noBorderWidth); box-shadow:none; } .tabMenu > ul > li.ui-state-active > a { border-color: transparent transparent #bbb; } .tabMenu > ul > li:not(.ui-state-active) > a:hover { color: var(--linkColor); } .tabularBox { background-color: #264b73; border-radius: var(--noBorderWidth); border: var(--noBorderWidth); } .tabularBox .table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--noBorderWidth); } .tabularBox .table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--noBorderWidth); } .tag::before { border-color: transparent #888 transparent transparent; } .wbbSimilarThreadList .box24 > div > small > time { color: var(--textColor); } .wbbBoardList .wbbLastPost > div > div > small time { color: var(--textColor);; } .wbbBoardList .wbbBoardNode2 { background-color: var(--backgroundColorElevated1); } .wbbBoardList .wbbBoardNode1 { background-color: var(--backgroundColorElevated2); } .wbbBoardList .wbbLastPost > div { background-color: var(--backgroundColorElevated5); border-radius: var(--noBorderWidth); } .wbbBoardContainer[data-board-id="957"] > .wbbBoard { background-color: var(--announcementColor); } .wbbBoardList .icon { color: var(--iconColor); } .wbbBoardList li[data-board-id="17"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="17"] > .icon.icon-folder-close::before { content: "\f0ec"; color: var(--iconColor); } .wbbBoardList li[data-board-id="958"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="958"] > .icon.icon-folder-close::before { content: "\f17a"; color: var(--iconColor); } .wbbBoardList li[data-board-id="14"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="14"] > .icon.icon-folder-close::before { content: "\f0e8"; color: var(--iconColor); } .wbbBoardList li[data-board-id="13"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="13"] > .icon.icon-folder-close::before { content: "\f0ce"; color: var(--iconColor); } .wbbBoardList li[data-board-id="15"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="15"] > .icon.icon-folder-close::before { content: "\f008"; color: var(--iconColor); } .wbbBoardList li[data-board-id="16"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="16"] > .icon.icon-folder-close::before { content: "\f085"; color: var(--iconColor); } .wbbBoardList li[data-board-id="6"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="6"] > .icon.icon-folder-close::before { content: "\f059"; color: var(--iconColor); } .wbbBoardList li[data-board-id="7"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="7"] > .icon.icon-folder-close::before { content: "\f0f6"; color: var(--iconColor); } .wbbBoardList li[data-board-id="18"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="18"] > .icon.icon-folder-close::before { content: "\f120"; color: var(--iconColor); } .wbbBoardList li[data-board-id="955"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="955"] > .icon.icon-folder-close::before { content: "\f121"; color: var(--iconColor); } .wbbBoardList li[data-board-id="5"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="5"] > .icon.icon-folder-close::before { content: "\f118"; color: var(--iconColor); } .wbbBoardList li[data-board-id="3"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="3"] > .icon.icon-folder-close::before { content: "\f188"; color: var(--iconColor); } .wbbBoardList li[data-board-id="934"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="934"] > .icon.icon-folder-close::before { content: "\f0ce"; color: var(--iconColor); } .wbbBoardList li[data-board-id="933"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="933"] > .icon.icon-folder-close::before { content: "\f187"; color: var(--iconColor); } .wbbBoardList li[data-board-id="948"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="948"] > .icon.icon-folder-close::before { content: "\f0c1"; color: var(--iconColor); } .wbbBoardList li[data-board-id="950"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="950"] > .icon.icon-folder-close::before { content: "\f001"; color: var(--iconColor); } .wbbBoardList li[data-board-id="951"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="951"] > .icon.icon-folder-close::before { content: "\f0ad"; color: var(--iconColor); } .wbbBoardList li[data-board-id="952"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="952"] > .icon.icon-folder-close::before { content: "\f11b"; color: var(--iconColor); } .wbbBoardList li[data-board-id="953"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="953"] > .icon.icon-folder-close::before { content: "\f0e7"; color: var(--iconColor); } .wbbBoardList li[data-board-id="964"] > .wbbBoard > .icon.icon-folder-close::before, .wbbSubBoards li[data-board-id="964"] > .icon.icon-folder-close::before { content: "\f0ac"; color: var(--iconColor); } .wbbBoardList:not(.wbbBoardListReduced) li.wbbLastBoxElement > div { border-bottom-left-radius: var(--noBorderWidth); border-bottom-right-radius: var(--noBorderWidth); } .wbbThreadSticky td { background: var(--stickyColor) !important; } .wbbThreadAnnouncement td { background: var(--announcementColor) !important; } .wbbThreadAnnouncement h3 .label::before { color: var(--iconColor); text-shadow: var(--noBorderWidth); } .wbbThreadSticky h3 .label::before { color: var(--iconColor); text-shadow: var(--noBorderWidth); } }