/* ==UserStyle==

@name SpigotMC NewDark

@namespace github.com/Janmm14/spigotmc-newdark

@version 1.6.1

@description SpigotMC.org NewDark mode userstyle. https://userstyles.world/style/4051/spigotmc-newdark

@preprocessor less

@author Janmm14

@var range dim "Dim spigotmc orange" [1, 0.4, 1, 0.025]

@var checkbox black_header "Black header background" 1

@var checkbox oled "OLED / darkgray -> black background in many places" 1

@var checkbox olednostripe "if OLED, no list background stripes" 0

@var checkbox noorange "No orange background" 1

@var checkbox no_header "Remove the header" 1

@var checkbox nomargin "Less margin on spigotmc home news feed and wiki pages" 1

@var checkbox nobg "No border around home page articles (enable less margin)" 1

@var checkbox icode_dark "Should inline code [icode] have dark background" 1

@var number codeblockrightmargin "Right margin of code blocks (+1)" [141, 1, 1000, 1, 'px']

@var checkbox msg_signature "Combine signature and message date" 1

@var checkbox hover_rating "when width smaller, hide rating until hovered" 0

@var checkbox rating_no_text "do not display rating text name" 0

@var checkbox popup_fix "if some popups are 1px wrong" 1

@var checkbox bg_bubbles "Background bubbles" 0

@var checkbox bg_bubbles_dark "Dark orange bubbles" 0

@var checkbox donate_shine "Donation shine effect" 0

@var checkbox bg_dbg "Background bubble debug" 0

==/UserStyle== */

@-moz-document url-prefix("https://spigotmc.org"), url-prefix("https://www.spigotmc.org") {

html {

background: black;

&:before {

content: @dim;

display: none;

}

--black: #000;

--black-l: #000;

--inner-bg: #222;

--inner-bg-d: #222;

--inner-bg-l: #222;

--inner-bg-dark: #1a1a1a;

--inner-bg-dark-d: #1a1a1a;

--inner-bg-dark-l: #1a1a1a;

--inner-bg-verydark: #111;

--inner-bg-verydark-l: #111;

--post-bg: #2a2a2a;

--post-bg-iframe: #2a2a2a;

--oled-stripe-bg: rgba(255,255,255, 0.068); /* #111 */

& when (@oled = 1) {

--black: #0009;

--black-l: #0000;

--inner-bg: #0009;

--inner-bg-d: #000;

--inner-bg-dark: #0009;

--inner-bg-dark-d: #000;

--inner-bg-verydark: #0009;

--inner-bg-l: #0000;

--inner-bg-dark-l: #0000;

--inner-bg-verydark-l: #0000;

--post-bg: #0000;

--post-bg-iframe: #0009;

& when (@olednostripe = 1) {

--oled-stripe-bg: #0000;

}

}

--orange: rgb(239, 182, 28);

--orange: #efb61c;

--orange-dark: rgb(237, 129, 6);

--orange-dark: #ed8106;

/* unused

--orange-bg: #efb61c;

& when (noorange = 1) {

--orange-bg: #000;

}

/***/

}

body {

background: black;

color: #d3d3d3;

}

html:has(body[contenteditable=true]) {

background: var(--post-bg-iframe);

}

body[contenteditable=true] {

background: transparent;

}

a[href]:hover {

color: #ccc;

}

input {

accent-color: var(--orange);

}

.spigot_headerReadAboutWrapper a:hover {

color: var(--orange);

}

.primaryContent a, .ugc a:link, .ugc a:visited {

color: var(--orange);

}

#AccountMenu ul.links a:hover, .articleItem a:hover {

color: var(--orange);

}

.explain .CurrentStatus {

color: #d3d3d3;

}

.hasTabLinks #navigation .navTabs .navTab.selected .navLink {

border-bottom-color: #1b1e22;

& when(@oled = 1) {

border-bottom-color: #000;

}

}

#navigation {

.navTabs {

.navTab {

border-radius: 7px 7px 0 0;

}

.navTab .navLink {

border-radius: 6px 6px 0 0;

}

.navTab.PopupOpen .navLink {

height: 45px;

}

.navTab.selected {

.navLink {

background-color: #1b1e22;

& when (@black_header = 1) {

z-index: 1;

& when (@bg_bubbles = 1) {

box-shadow: black 0px 0px 9px 5px;

}

}

& when (@oled = 1) and (@black_header = 0) {

background: #000;

}

& when(@oled = 1) and (@black_header = 1) {

background: #000;

border: 1px solid #30353b;

padding: 0 11px;

margin-top: 2px;

z-index: 1;

border-bottom-width: 1px;

}

--rds: 6px;

&::before, &::after {

width: 6px;

height: 6px;

bottom: -6px;

background: transparent;

border-bottom: 6px solid #1b1e22;

z-index: 1;

& when (@oled = 1) and (@black_header = 0) {

border-bottom-color: black;

}

& when(@oled = 1) and (@black_header = 1) {

width: 8px;

height: 8px;

bottom: -1px;

background: var(--black-l);

border-bottom-color: #30353b;

border-bottom-width: 1px;

}

}

&::before {

left: -6px;

border-radius: 0 0 12px 0;

border-right: 6px solid #1b1e22;

& when (@oled = 1) and (@black_header = 0) {

border-right-color: black;

}

& when(@oled = 1) and (@black_header = 1) {

left: -9px;

border-radius: 0 0 var(--rds) 0;

border-right-width: 1px;

border-right-color: #30353b;

box-shadow: black 6px 6px 0 6px;

}

}

&::after {

right: -6px;

border-radius: 0 0 0 12px;

border-left: 6px solid #1b1e22;

& when (@oled = 1) and (@black_header = 0) {

border-left-color: black;

}

& when(@oled = 1) and (@black_header = 1) {

right: -9px;

border-radius: 0 0 0 var(--rds);

border-left-width: 1px;

border-left-color: #30353b;

box-shadow: black -6px 6px 0 6px;

}

}

}

&:nth-child(2) {

& when (@no_header = 1) {

.navLink {

position: relative;

z-index: 12;

& when (@oled = 1) {

border-bottom-width: 1px;

}

}

}

&::before when (@no_header = 1) {

content: '';

position: relative;

display: inline-block;

z-index: 13;

margin-right: calc(-7px - 4px);

top: 40px;

left: calc(-100% - 5px);

width: 6px;

height: 6px;

background: transparent;

border-radius: 0 0 12px 0;

border-bottom: 6px solid #1b1e22;

border-right: 6px solid #1b1e22;

& when (@oled = 1) and (@black_header = 0) {

border-bottom-color: black;

border-right-color: black;

}

& when(@oled = 1) and (@black_header = 1) {

background: var(--black-l);

border-bottom-color: #30353b;

border-bottom-width: 1px;

}

& when (@oled = 1) and (@black_header = 1) {

border-bottom: 1px solid #30353b;

border-right: 1px solid #30353b;

top: 35px;

left: calc(-100% - 6px - 4px);

width: 8px;

height: 8px;

border-radius: 0 0 6px 0;

border-right-width: 1px;

border-right-color: #30353b;

box-shadow: black 6px 6px 0 6px;

/*dbg*

border-color: red;

background-color: green;

z-index: 30;/**/

}

}

}

}

}

}

.navTabs .navLeft {

& when (@no_header = 1) {

position: static;

overflow: visible;

}

}

.navTabs {

.navTab.selected {

.tabLinks {

> .pageWidth {

background: inherit;

z-index: 13;

}

position: absolute;

background: #1b1e22;

border-color: #30353b;

& when (@bg_bubbles = 1) {

box-shadow: black 0 11px 9px -5px;

}

& when (@oled = 1) and (@black_header = 0) {

background: #000;

}

& when(@oled = 1) and (@black_header = 1) {

background: #000;

border-top: 1px solid #30353b;

line-height: 42px;

li {

max-height: 43px;

}

}

& when (@black_header = 1) {

& when (@bg_bubbles = 1) {

box-shadow: black 0 0 9px 5px;

}

}

a {

color: #ddd;

text-shadow: 0 1px #555;

}

}

}

}

#searchBar {

& when(@oled = 1) and (@black_header = 1) {

line-height: 42px;

height: 42px;

}

}

#userBar .navTabs {

& when (@black_header = 1) or (@oled = 1) {

background: transparent;

border-bottom: 0 none;

padding-bottom: 3px;

box-shadow: none;

}

.navTab:hover, .navTab.PopupClosed:hover {

& when (@black_header = 1) or (@oled = 1) {

background: transparent;

}

}

.navTab.PopupClosed when (@black_header = 1) or (@oled = 1) {

&:hover {

.avatar img {

box-shadow: 0 0 7px 0px #fff;

}

.navLink.accountPopup {

text-shadow: 0 1px rgba(0,0,0,.25), 0 0 10px #fff;

}

.navLink .uix_icon-inbox::before {

--sc: rgba(255,255,255,0.2);

}

.navLink .uix_icon-alerts::before {

--sc: rgba(255,255,255,0.25);

--bc: rgba(255,255,255,0.5);

}

.navLink .uix_icon-alerts::after {

--bc: rgba(255,255,255,0.6);

}

}

.avatar when (@black_header = 1) {

border-radius: 3px;

box-shadow: 0 0 6px 2px #0009;

}

.avatar when (@black_header = 0) {

border-radius: 3px;

box-shadow: 0 0 6px 2px #0005;

}

.navLink.accountPopup when (@black_header = 1) {

text-shadow: 0 1px rgba(0,0,0,.25), -3px 0 10px black, 2px 0 10px black;

}

.navLink.accountPopup when (@black_header = 0) {

text-shadow: 0 1px rgba(0,0,0,.125), -3px 0 10px #0009, 2px 0 10px #0009;

}

.navLink .uix_icon-inbox::before {

--sw: 4px;

--swm: calc(var(--sw) * -1);

--sb: 4px;

--sc: rgba(0,0,0,.35);

--sc2: rgba(0,0,0,.25);

& when (@black_header = 0) {

--sw: 2px;

--sb: 5px;

--sc: rgba(0,0,0,.275);

--sc2: rgba(0,0,0,0);

}

text-shadow: 0 1px var(--sc2), var(--sw) var(--sw) var(--sb) var(--sc), var(--swm) var(--sw) var(--sb) var(--sc), var(--sw) var(--swm) var(--sb) var(--sc), var(--swm) var(--swm) var(--sb) var(--sc);

}

.navLink .uix_icon-alerts::before {

position: relative;

z-index: 2;

--sw: 4px;

--sws: 3px;

--swsm: calc(var(--sws) * -1);

--swm: calc(var(--sw) * -1);

--sb: 4px;

--sc: rgba(0,0,0,.35);

--bc: rgba(0,0,0,.5);

& when (@black_header = 0) {

--sw: 2px;

--sws: 3px;

--sc: rgba(0,0,0,.25);

--bc: rgba(0,0,0,.25);

}

text-shadow: 0 1px rgba(0,0,0,.25), var(--sw) var(--sws) var(--sb) var(--sc), var(--swm) var(--sw) var(--sb) var(--sc), var(--sw) var(--swm) var(--sb) var(--sc), var(--swm) var(--swm) var(--sb) var(--sc);

box-shadow: -6px 8px 4px -5px var(--bc), -6px -6px 4px -5px var(--bc);

}

.navLink .uix_icon-alerts::after when (@black_header = 1) {

content: '';

position:absolute;

display: block;

width: 0;

height: 0;

bottom: 14px;

right: 13px;

--bc: rgba(0,0,0,0.6);

box-shadow: 0px 0px 4px 2px var(--bc);

}

}

}

#userBar .navTabs .navLink, #userBar .navTabs .SplitCtrl {

color: #ddd;

}

.Menu {

border-width: 1px;

border-left-color: #444;

border-right-color: #444;

border-bottom-color: #444;

border-radius: 0 0 10px 10px;

&.tabMenu {

border-left-color: var(--orange);

border-right-color: var(--orange);

border-bottom-color: var(--orange);

}

.primaryContent {

background: rgba(38, 38, 38, 0.9);

border-color: #262626;

}

.secondaryContent {

background: rgba(30, 30, 30, 0.9);

border-bottom: 1px solid transparent;

}

}

.textCtrl {

background-color: black;

color: #bfbfbf;

border-color: #444;

}

#QuickSearch .primaryControls .uix_icon {

color: var(--orange);

background: #444;

text-shadow: 0 1px rgba(239, 182, 28,.25);

}

#QuickSearch .primaryControls:focus-within {

.uix_icon {

line-height: 32px;

border: 1px solid var(--orange);

border-right-color: transparent;

}

}

#QuickSearch .formPopup .secondaryControls {

background: rgba(17, 17, 17, .95);

background-clip: padding-box;

border-color: #333;

box-shadow: 4px 4px 10px -2px rgba(0,0,0,.9);

color: #d3d3d3;

}

#QuickSearch .button:not(.primary) {

background-color: #333;

color: #eee;

}

.navTabs .navTab.PopupClosed {

.navLink {

color: #eee;

}

}

#navigation {

.navTabs .navTab.PopupOpen when (@black_header = 1) and (@bg_bubbles = 1) {

z-index: 15;

.navLink {

box-shadow: 0 0 9px 5px #000;

}

}

.navTabs .navTab.PopupClosed when (@black_header = 1) {

&:hover {

.navLink {

text-shadow: 0 1px rgba(0,0,0,.25), 0 0 15px #fff;

}

.SplitCtrl {

text-shadow: 0 1px rgba(0,0,0,.25), 0 0 15px #fff, 0 4px 15px #fff, 4px 4px 15px #fff, -2px 4px 15px #fff, -4px -4px 15px #fff;

}

}

.navLink {

text-shadow: 0 1px rgba(0,0,0,.25), -5px 0 15px black, 5px 0 15px black;

}

.SplitCtrl {

text-shadow: 0 1px rgba(0,0,0,.25), 0px 0px 12px black, 0px 0px 12px black, -6px -6px 12px black, 6px -6px 12px black, -6px 6px 12px black, 6px 6px 12px black;

}

}

}

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3, .breadcrumb, a.callToAction span, .xenOverlay .heading {

box-shadow: inset 0 1px rgba(255,255,255,.4),inset 0 -1px rgba(0,0,0,.2);

color: #eee;

& when(@dim < 0.95) {

color: #fff;

}

& when(@noorange = 1) {

box-shadow: none;

color: #858585;

}

}

.sidebar .section.widget_Donate when (@noorange = 1) and (@donate_shine = 1) {

.secondaryContent {

padding: 0;

box-sizing: border-box;

position: relative;

h3 {

display: inline-block;

margin: 0;

padding: 8px 8px 6px 8px;

text-shadow: none;

color: transparent;

background-clip: text;

--shine-duration: 5s;

--shine-base: transparent;

--shine-shine: rgba(255,255,255,0.5);

background-color: var(--orange-dark);

background-image: -moz-linear-gradient(90deg, var(--shine-base) 94%, var(--shine-shine) 97%, var(--shine-base) 100%);

background-image: -webkit-linear-gradient(90deg, var(--shine-base) 94%, var(--shine-shine) 97%, var(--shine-base) 100%);

background-image: linear-gradient(90deg, var(--shine-base) 94%, var(--shine-shine) 97%, var(--shine-base) 100%);

background-image: -moz-linear-gradient(90deg, var(--shine-base) 90%, var(--shine-shine) 96%, var(--shine-base) 100%);

background-image: -webkit-linear-gradient(90deg, var(--shine-base) 90%, var(--shine-shine) 96%, var(--shine-base) 100%);

background-image: linear-gradient(90deg, var(--shine-base) 90%, var(--shine-shine) 96%, var(--shine-base) 100%);

background-image: -moz-linear-gradient(90deg, var(--shine-base) 85%, var(--shine-shine) 90%, var(--shine-shine) 95%, var(--shine-base) 100%);

background-image: -webkit-linear-gradient(90deg, var(--shine-base) 85%, var(--shine-shine) 90%, var(--shine-shine) 95%, var(--shine-base) 100%);

background-image: linear-gradient(90deg, var(--shine-base) 85%, var(--shine-shine) 90%, var(--shine-shine) 95%, var(--shine-base) 100%);

background-size: 200% auto;

animation: shine var(--shine-duration) 0s linear infinite;

border-bottom: 0 none;

&::after {

pointer-events: none;

content: ".";

color: transparent;

display: block;

position: absolute;

left: 0;

top: 0;

right: 0;

border-radius: 12px 12px 0 0;

border-bottom: 1px solid #444;

padding: 8px 0 7px 0;

}

& when (@oled = 1) {

border-top: 0 none;

&::after {

border-top: 2px solid #333;

border-bottom-color: #333;

border-radius: 6px 6px 0 0;

}

}

}

form {

padding: 8px;

background: var(--inner-bg);

border-radius: 0 0 6px 6px;

& when (@oled = 1) {

padding: 8px 7px 7px 7px;

}

input[type="image"] {

border-radius: 13px;

&:hover {

filter: saturate(2.5);

}

}

}

background: var(--inner-bg-dark);

}

}

.sidebar .section.widget_Donate .secondaryContent form::after when (@donate_shine = 1) {

pointer-events: none;

position: absolute;

left: 7px;

bottom: 11px;

width: 92px;

height: 26px;

border-radius: 13px;

content: "";

--shine-duration: 5s;

--shine-base: transparent;

--shine-shine: rgba(255,255,255,0.5);

background-color: transparent;

background-image: -moz-linear-gradient(90deg, var(--shine-base) 94%, var(--shine-shine) 97%, var(--shine-base) 100%);

background-image: -webkit-linear-gradient(90deg, var(--shine-base) 94%, var(--shine-shine) 97%, var(--shine-base) 100%);

background-image: linear-gradient(90deg, var(--shine-base) 94%, var(--shine-shine) 97%, var(--shine-base) 100%);

background-image: -moz-linear-gradient(90deg, var(--shine-base) 90%, var(--shine-shine) 96%, var(--shine-base) 100%);

background-image: -webkit-linear-gradient(90deg, var(--shine-base) 90%, var(--shine-shine) 96%, var(--shine-base) 100%);

background-image: linear-gradient(90deg, var(--shine-base) 90%, var(--shine-shine) 96%, var(--shine-base) 100%);

background-image: -moz-linear-gradient(90deg, var(--shine-base) 85%, var(--shine-shine) 90%, var(--shine-shine) 95%, var(--shine-base) 100%);

background-image: -webkit-linear-gradient(90deg, var(--shine-base) 85%, var(--shine-shine) 90%, var(--shine-shine) 95%, var(--shine-base) 100%);

background-image: linear-gradient(90deg, var(--shine-base) 85%, var(--shine-shine) 90%, var(--shine-shine) 95%, var(--shine-base) 100%);

background-size: 200% auto;

animation: shine var(--shine-duration) 0s linear infinite;

@media (min-width: 611px) {

bottom: 10px;

}

@media (min-width: 719px) {

bottom: 11px;

}

}

.breadBoxTop > nav, .breadBoxBottom nav {

border-radius: 6px;

}

a.callToAction {

span {

& when (@noorange = 1) and (@oled = 1) {

border: 1px solid #333;

box-sizing: border-box;

padding: 0 15px;

}

}

&:hover span {

color: #fff;

}

}

*:not(.sidebar) > a.callToAction span when (@noorange = 1) and (@oled = 1) {

line-height: 38px;

}

.breadcrumb when(@noorange = 1) {

border: 1px solid #333;

border-top-width: 3px;

}

.breadcrumb .crust when(@noorange = 1) {

height: 36px;

line-height: 34px;

}

.breadcrumb .jumpMenuTrigger when(@noorange = 1) {

height: 36px;

line-height: 34px;

padding-right: 9px;

}

.breadcrumb .crust a.crumb {

color: #eee;

border-bottom: none;

& when(@dim < 0.95) {

& when(@oled = 0) {

color: #fff;

}

}

}

.breadcrumb .crust:first-child a.crumb when(@noorange = 1) {

padding-left: 9px;

}

.breadcrumb .crust a.crumb > span {

position: relative;

top: 1px;

}

.breadcrumb .jumpMenuTrigger {

& when(@dim < 0.95) {

& when(@oled = 0) {

color: #fff;

}

}

}

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3, .breadcrumb, a.callToAction span, .xenOverlay .heading {

filter: brightness(@dim);

& when(@noorange = 1) {

filter: none;

background: var(--inner-bg-dark);

}

}

.sidebar .section .primaryContent, .sidebar .section .secondaryContent {

h3 {

& when (@oled = 1) and (@noorange = 0) {

margin: -9px -8px 8px -8px !important;

}

& when (@oled = 1) and (@noorange = 1) {

border-top: 2px solid #333;

border-bottom: 1px solid #333;

padding-top: 6px;

padding-bottom: 6px;

margin: -8px -7px 7px -7px;

}

& when (@oled = 0) and (@noorange = 1) {

border-bottom: 1px solid #444;

margin-bottom: 7px;

}

}

& when (@oled = 1) {

padding: 8px 7px 7px 7px;

}

}

.sidebar .funbox {

& when (@oled = 1) and (@noorange = 0) {

margin: 15px 0;

}

}

.profilePage .mast .section.infoBlock {

h3 {

& when (@oled = 1) and (@noorange = 0) {

;

}

& when (@oled = 1) and (@noorange = 1) {

border-bottom: 1px solid #333;

padding-top: 6px;

padding-bottom: 6px;

margin: -8px -7px 7px -7px;

}

& when (@oled = 0) and (@noorange = 1) {

border-bottom: 1px solid #444;

margin-bottom: 7px;

}

}

& when (@oled = 1) {

padding: 8px 7px 7px 7px;

}

}

.breadcrumb, .uix_breadCrumb_toggleList li.toggleList_item {

filter: brightness(@dim);

}

#navigation .navTabs {

& when (@black_header = 0) {

filter: brightness(@dim);

}

& when (@black_header = 1) {

background: transparent;

box-shadow: none;

}

}

& when (@no_header = 1) {

#navigation .navTabs {

> .pageWidth {

padding-left: 0px;

padding-right: 10px;

ul li.articles.PopupClosed:hover a.navLink {

background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

&::before {

filter: brightness(1.1);

}

}

ul li.articles a.navLink {

padding-left: 0px;

display: flex;

&::before {

background-image: url("//static.spigotmc.org/img/spigot.png");

background-size: 50px;

background-repeat: no-repeat;

background-position-x: 5px;

background-position-y: 5px;

content: "";

display: inline-block;

height: 40px;

width: 55px;

position: static;

border: 0 none;

border-radius: 8px 8px 0 8px;

box-shadow: none;

}

}

}

}

@media(max-width: 800px) {

#navigation .navTabs {

.navTab.selected:nth-child(2)::before {

content: none;

display: none;

}

> .pageWidth {

padding-left: 16px;

padding-right: 16px;

ul li.articles a.navLink {

background-image: none;

background-size: 50px;

background-repeat: no-repeat;

background-position-y: 0;

&::before {

content: none;

display: none;

height: 0px;

width: 0px;

border-radius: 0;

}

}

}

}

#navigation .pageContent .navTabs ul.navLeft li.navTab--navPanelTrigger {

&:hover a.navLink {

background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

i.uix_icon-menu {

filter: brightness(1.1);

}

}

a.navLink {

padding-left: 0px;

&:hover {

background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);

}

}

i.uix_icon-menu {

padding-left:50px;

background-image: url("//static.spigotmc.org/img/spigot.png");

background-size: 50px;

background-repeat: no-repeat;

background-position-y: 5px;

background-origin: border-box;

}

}

.resourceListMain .section {

margin-top: 0;

.pageNavLinkGroup:first-child {

height: 0px;

margin: 0;

padding: 0;

width: auto;

display: inline-block;

.linkGroup.SelectionCountContainer {

position: absolute;

right: 0px;

top: 0px;

margin: 0;

float: unset;

display: inline-block;

a {

margin: 0;

float: unset;

display: inline-block;

}

}

}

}

}

@media(min-width: 1200px) {

#header #userBar .navTabs {

box-shadow: none;

}

#header #userBar {

display: block;

position: absolute;

width: 100%;

.pagewidth {

position: absolute;

}

.navTab {

padding-top: 6px;

padding-bottom: 5px;

}

.navRight {

position: relative;

margin-left: auto;

margin-right: 0;

z-index: 999;

}

}

}

}

#logoBlock {

& when (@no_header = 1) {

display: none;

}

& when (@no_header = 0) and (@oled = 1) and (black_header = 1) and (@bg_bubbles = 1) {

box-shadow: black 0 -11px 9px -5px;

}

}

#logoBlock .pageContent {

& when (@black_header = 1) {

background: transparent;

}

#logo {

& when (@bg_bubbles = 1) {

a {

display: block;

position: relative;

> span {

display: block;

position: absolute;

--size: 50px;

width: var(--size);

height: var(--size);

top: calc(60% - var(--size) / 2);

left: calc(50% - var(--size) / 2);

}

> img when (@black_header = 1) {

position: relative;

filter: drop-shadow(0 0 10px #000);

}

}

}

& when (@black_header = 1) {

background: transparent;

position: relative;

top: -12px;

}

}

}

#logoBlock .spigot_colorOverlay {

& when (@black_header = 0) {

filter: brightness(@dim);

}

& when (@black_header = 1) {

background: transparent;

}

}

.spigot_headerReadAboutWrapper {

& when (@black_header = 0) {

filter: brightness(calc( 1 / @dim));

}

& when (@black_header = 1) {

color: #d3d3d3;

background: #393e44;

background: #2f3338;

border-top: solid 1px #282828;

border-bottom: 3px solid #25282d;

}

& when(@oled = 1) {

background: #000;

& when (@black_header = 1) {

box-shadow: 0 0 9px 5px #000;

border-left: 1px solid #282828;

border-right: 2px solid #282828;

padding: 8px 15px;

}

}

}

.sidebar .section .secondaryContent {

box-shadow: 0 0 3px rgba(255,255,255,.75);

& when (@oled = 1) {

box-shadow: none;

border: 1px solid rgba(255,255,255,.25);

}

}

.sidebar .section {

border-radius: 6px;

}

.sidebar .section.funbox {

overflow: initial;

}

.primaryContent {

background: var(--inner-bg);

border-bottom-color: #444;

border-color: #444;

}

.secondaryContent {

background: var(--inner-bg);

border-bottom-color: #444;

border-color: #444;

& when (@oled = 1) {

padding: 0;

}

a[href]:not(.username):hover {

color: #bbb;

color: var(--orange);

}

}

.blockLinksList {

a, label {

color: #fff;

}

a:hover, a:focus, li.kbSelect a, label:hover, label:focus, li.kbSelect label {

color: #bbb;

color: var(--orange);

}

}

.mainContainer {

/*margin-bottom: 16px;*/

@media (min-width: 801px) {

width: calc(100% - 266px) !important;

margin-right: 0 !important;

.mainContent {

margin-right: 0 !important;

&.withTransition {

transition: none;

}

}

}

}

.mainContainer .mainContent, .mainContainer_noSidebar {

background-color: var(--inner-bg);

border-color: #444;

}

.articlePager .PageNav {

padding: 8px 16px;

margin: 0;

.pageNavHeader {

padding: 0;

margin: 0 4px 0 0;

}

nav {

a, .scrollable {

margin-bottom: 0;

}

a:last-child {

margin-right: 0;

}

}

}

.hasRightSidebar #content.EWRporta2_ArticleList .mainContainer .mainContent {

&::after {

content: unset;

display: none;

}

@media (min-width: 801px) {

.articlePager {