/*
Neon Dystopia Theme
[2021 Wikidot Theme]
by JackalRelated
inspired by Blade Runner (1982)
*/
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Jost&display=swap');
@import url('https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/stylesheet.css');
@import url('https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/connection.css');
:root {
--theme-base: "black-highlighter";
--theme-id: "cyberpunk";
--theme-name: "Neon Dystopia";
--header-title: "FOUNDATION";
--header-subtitle: "REMOTE ACCESS DATABASE";
--body-font: 'Jost', sans-serif;
--header-font: 'Element', sans-serif;
--title-font: 'Unicephalon', serif;
--mono-font: 'Bedstead', monospace;
--terminal-font: 'Connection II', monospace;
--display-font: 'Liquid Crystal', sans-serif;
--dialogue-font: 'SV Basic Manual', sans-serif;
--UI-font: var(--dialogue-font);
/* WHITE - GREY */
--electric-sheep: 230, 255, 255;
--gaff-black: 1, 1, 1;
/* BLUE */
--neon-blue: 15, 227, 229;
--tears-n-rain: 73, 177, 178;
--passive-blue: 65, 134, 155;
--pkd-blaster: 15, 12, 36;
--lapd-badge: 9, 8, 19;
--linkalt: 85, 181, 250;
--linkalt-hl: 0, 145, 250;
/* GREEN */
--display-green: 23, 230, 16;
--display-inter: 0, 145, 9;
--tyrell-green: 7, 53, 0;
--display-dark: 1, 18, 6;
--linkgr-hl: 65, 255, 59;
--linkgr: 6, 184, 0;
/* RED */
--deckard-red: 191, 0, 0;
--blade-runner: 163, 0, 0;
--retired-replicant: 77, 22, 25;
/* THEME ASSIGNMENTS */
--white-monochrome: var(--lapd-badge);
--pale-gray-monochrome: var(--display-dark);
--light-gray-monochrome: var(--retired-replicant);
--gray-monochrome: var(--gaff-black);
--dark-gray-monochrome: var(--lapd-badge);
--black-monochrome: var(--electric-sheep);
--pale-accent: var(--tears-n-rain);
--bright-accent: var(--deckard-red);
--medium-accent: var(--blade-runner);
--dark-accent: var(--retired-replicant);
--swatch-topmenu-bg-color: var(--gaff-black);
--swatch-topmenu-border-color: var(--tyrell-green);
--swatch-background: var(--lapd-badge);
--swatch-primary: var(--display-green);
--swatch-primary-darker: var(--tyrell-green);
--swatch-primary-darkest: var(--display-dark);
--swatch-border-color: 0, 0, 0, 0;
--swatch-text-dark: var(--gaff-black);
--swatch-text-light: var(--electric-sheep);
--swatch-text-general: var(--swatch-text-light);
--swatch-important-text: var(--bright-accent);
--swatch-menubg-color: var(--display-dark);
--swatch-menubg-light-color: var(--);
--swatch-menubg-medium-color: var(--tyrell-green);
--swatch-menubg-medium-dark-color: var(--gaff-black);
--swatch-menubg-dark-color: var(--);
--swatch-menutxt-light-color: var(--electric-sheep);
--swatch-menutxt-dark-color: var(--gaff-black);
--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
--swatch-text-secondary-color: var(--gaff-black);
--swatch-text-tertiary-color: var(--electric-sheep);
--header-gradient-color-top: var(--gaff-black);
--header-gradient-color-middle: var(--gaff-black);
--header-gradient-color-bottom: var(--gaff-black);
--background-gradient-distance: 0rem;
--diagonal-stripes: linear-gradient(transparent 0);
--sidebar-transition-timing: 0.8s ease-in-out 0.1s;
--hover-link-color: var(--neon-blue);
--newpage-color: var(--neon-blue);
--link-color: var(--tears-n-rain);
--visited-link-color: var(--tears-n-rain);
--rating-module-bg-color: var(--lapd-badge);
--rating-module-button-cancel-color: var(--neon-blue);
--rating-module-bottom-border-color: var(--neon-blue);
--toggle-button-bg: rgba(var(--gaff-black), 1);
--toggle-border-color: rgb(var(--tyrell-green));
--toggle-icon-color: rgb(var(--display-green));
--toggle-roundness: 0%;
}
/* HEADER AND TOPBAR */
.page-rate-widget-box .rate-points {
font-size: 1em;
border: none !important;
background-color: rgba(0, 0, 0, 0) !important;
line-height: calc(var(--rating-module-height)*1.25);
}
#page-title {
color: rgb(var(--neon-blue));
border-bottom: .0625rem solid rgb(var(--neon-blue));
}
#page-title:after,
.meta-title:after {
height: 0;
}
#header {
--swatch-headerh1-color: var(--deckard-red);
--swatch-headerh2-color: var(--deckard-red);
--search-icon-color: var(--display-green);
--search-icon-hover-color: var(--gaff-black);
--search-icon-hover-bg-color: var(--display-green);
--search-textbox-text-color: 0, 0, 0, 0;
--search-icon-focus-color: var(--display-green);
--search-icon-focus-bg-color: var(--display-green);
--search-focus-outline-color: var(--display-green);
--search-focus-textbox-bg-color: var(--display-green);
--search-focus-textbox-text-color: var(--gaff-black);
--login-line-divider-color: var(--display-inter);
--login-username-color: var(--display-green);
--login-myaccount-color: var(--display-green);
--login-myaccount-underline-color: var(--display-inter);
--login-myaccount-hover-color: var(--gaff-black);
--login-myaccount-hover-bg-color: var(--display-green);
--login-arrow-color: var(--display-green);
--login-dropdown-bg-color: var(--display-dark);
--login-dropdown-bg-image: var(--display-dark);
--login-dropdown-border-color: var(--display-green), 0.5;
--login-dropdown-text-color: var(--display-inter);
--login-dropdown-text-hover-color: var(--display-green);
--login-dropdown-bg-hover-color: var(--display-dark);
--login-mobile-icon-color: var(--display-green);
--login-mobile-icon-hover-color: var(--gaff-black);
--login-mobile-icon-hover-bg-color: var(--display-green);
background-image: none;
}
#header h1 {
width: 100%;
height: var(--header-height-on-desktop);
z-index: -9999;
}
#header h1 a {
text-shadow: none;
height: 100%;
width: 100%;
color: transparent;
background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/foundation-text.png);
margin: 0;
padding: 0;
background-size: auto calc(var(--header-height-on-desktop) - 1rem);
background-repeat: no-repeat;
background-position: left center;
}
@media only screen and (max-width: 768px) {
#header h1 a {
background-size: auto calc(var(--header-height-on-desktop) - 3rem);
background-position: center center;
}
}
#header h1 a::before {
text-shadow: none;
color: transparent;
}
#header h2 {
display: none;
}
#extra-div-1 {
height: var(--header-height-on-desktop);
width: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/grid.png);
background-size: calc(var(--header-height-on-desktop) * 4);
}
#top-bar {
--topmenu-category-color: var(--display-inter);
--topmenu-category-hover-color: var(--display-green);
--topmenu-hover-border-color: var(--display-green);
--mobile-topmenu-sidebar-button-color: var(--display-green);
--dropdown-bg-color: var(--display-dark), 0.9;
--dropdown-border-color: var(--display-green), 0.5;
--dropdown-links-color: var(--display-inter);
--dropdown-links-hover-color: var(--display-green);
--dropdown-links-hover-bg-color: var(--intentionaltypo);
}
/* BREADCRUMBS */
#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active,
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
color: rgb(var(--neon-blue));
text-decoration: none;
}
/* SCROLLBAR AND SIDEBAR */
html,
body {
scrollbar-color:
rgb(var(--display-dark)) rgb(var(--tyrell-green));
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 18px;
background: #transparent;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
background: rgb(var(--display-dark));
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background: rgb(var(--tyrell-green));
border: rgb(var(--tyrell-green)) 1px solid;
border-radius: 0px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
background: rgb(var(--display-green));
}
#side-bar,
#interwiki {
--sidebar-bg-color: var(--display-dark);
--sidebar-resources-bg-color: var(--tyrell-green), 0.25;
--sidebar-media-bg-color: var(---tyrell-green), 0.25;
--sideblock-heading-border-color: var(--display-green);
--sideblock-heading-text-color: var(--display-green);
--sidebar-border-color: var(--swatch-border-color), 0.08;
--sidebar-subtest-color: var(--swatch-primary);
--sidebar-links-text: var(--display-inter);
--sidebar-links-hover-bg-color: var(--display-green);
--sidebar-links-hover-text-color: var(--gaff-black);
}
hr {
background-color: rgb(var(--neon-blue));
border-top: .0625rem solid rgb(var(--neon-blue));
}
.code {
background-color: rgb(var(--scissor-blades));
}
blockquote,
div.blockquote {
border: .0625rem dashed rgba(var(--display-green), 1);
color: rgb(var(--display-green));
}
blockquote hr,
div.blockquote hr {
background-color: rgb(var(--display-green));
border-top: .0625rem solid rgb(var(--display-green));
}
.code {
background-color: rgb(var(--electric-sheep));
}
.scp-image-block {
box-shadow: none;
border: none;
}
.scp-image-block .scp-image-caption {
border-top: .0625rem outset rgba(var(--display-green), 1);
background-color: rgb(var(--display-dark));
color: rgb(var(--display-green));
}
/* MAIN CONTENT */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
#main-content {
--tabs-bg: var(--pkd-blaster);
--tabs-txt: var(--tears-n-rain);
--tabs-hover-bg: var(--neon-blue);
--tabs-hover-txt: var(--pkd-blaster);
--tabs-selected-bg: var(--neon-blue);
--tabs-selected-txt: var(--lapd-badge);
--tabs-selected-outline: var(--neon-blue);
--tabs-bottom-border-color: var(--neon-blue);
--tabs-content-bg-color: var(--pkd-blaster), 0.25;
--tabs-content-border-color: var(--neon-blue);
--tables-header-bg: var(--pkd-blaster);
--tables-header-txt: var(--tears-n-rain);
--tables-border: var(--neon-blue);
--tables-body-txt: var(--passive-blue);
--tables-body-bg: var(--pkd-blaster), 0.50;
--toc-directory-lines-color: var(--neon-blue);
--toc-header-bg-color: var(--passive-blue);
--toc-header-text-color: var(--lapd-badge);
--toc-header-text-hover-color: var(--neon-blue);
--toc-body-bg-color: var(--pkd-blaster);
--toc-body-link-color: var(--tears-n-rain);
--toc-body-link-hover-color: var(--neon-blue);
--toc-body-hover-arrow-color: var(--neon-blue);
--ui-icon-color: var(--display-inter);
--ui-icon-bg: var(--display-dark);
--ui-icon-hover-color: var(--display-green);
--ui-icon-hover-bg: var(--tyrell-green);
--blockquote-bg-color: var(--display-dark), 0.5;
--blockquote-colorbar-color: var(--display-green), 1;
--footnotes-footer-colorbar-color: var(--tears-n-rain);
--footnotes-footer-title-bg-color: var(--tears-n-rain);
--footnotes-footer-title-text-color: var(--lapd-badge);
--footnotes-footer-bg-color: var(--pkd-blaster);
--pagetags-title-bg: var(--neon-blue);
--pagetags-title-text: var(--lapd-badge);
--pagetags-text-color: var(--display-inter);
--pagetags-text-hover-color: var(--gaff-black);
--pagetags-text-hover-bg-color: var(--display-green);
}
table.wiki-content-table th {
font-family: var(--display-font);
}
:root {
--hoverblock-header-bg: var(--neon-blue);
--hoverblock-header-txt: var(--lapd-badge);
--hoverblock-footer-txt: var(--electric-sheep);
--hoverblock-bg: var(--pkd-blaster);
--ui-button-bg: var(--display-dark);
--ui-button-txt: var(--display-inter);
--ui-button-hover-bg: var(--tyrell-green);
--ui-button-hover-outline: var(--display-green);
--ui-button-hover-txt: var(--display-green);
--modal-bg: var(--display-dark);
--modal-body-text: var(--display-green);
--modal-body-header-txt: var(--blade-runner);
--modal-header-bg: var(--blade-runner);
--modal-header-stripe: var(--deckard-red);
--modal-header-txt: var(--display-dark);
}
/* FOOTERS AND BELOW */
.page-source {
background: rgb(var(--electric-sheep));
font-family: var(--mono-font);
color: rgb(var(--gaff-black));
}
.content-panel {
--box-shadow-3: rgb(var(--neon-blue, 170, 170, 170));
}
#lock-info,
div.note,
input.checkbox,
input.text,
textarea {
font-family: var(--body-font);
}
#footer {
--footer-bg-color: var(--display-inter);
--footer-text-color: var(--gaff-black);
--footer-link-color: var(--gaff-black);
--footer-link-hover-color: var(--gaff-black);
--footer-link-hover-bg-color: var(--display-green);
}
#license-area {
--license-bg-color: var(--lapd-badge);
--license-text-color: var(--display-inter);
--license-link-color: var(--display-green);
--license-link-hover-color: var(--gaff-black);
--license-link-hover-bg-color: var(--display-green);
}
/* TOGGLE SIDEBAR (BHL) CHANGES */
@supports(display: grid) {
@media only screen and (min-width: 769px) {
#main-content::before {
background: rgba(var(--display-dark), .55) 1px 1px repeat;
}
}
}
/* SPECIAL DIVS */
.console {
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
width: 97.7%;
font-family: var(--terminal-font);
font-size: 1.1em;
background-color: rgb(var(--display-dark));
border: 3px dashed rgb(var(--display-green));
color: rgb(var(--display-inter));
}
.console hr,
.console-header hr {
background: linear-gradient(10deg, rgba(var(--display-green), 0.25) 0%, rgba(var(--display-green), 1) 50%, rgba(var(--display-green), 0.25) 100%);
border-top: none;
}
.console-header {
font-family: var(--header-font);
text-align: center;
color: rgb(var(--display-green));
}
table.terminal {
border-collapse: collapse;
}
table.terminal th {
font-weight: bold;
border: none;
padding: 0em 0em 0 0;
}
table.terminal td {
padding: 0em 0 0 1em;
}
.console,
table.terminal,
.console-header,
blockquote,
div.blockquote {
--hover-link-color: var(--linkgr-hl);
--newpage-color: var(--display-green);
--link-color: var(--display-green);
--visited-link-color: var(--linkgr);
}
.logs {
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
width: 97.7%;
font-family: var(--display-font);
font-size: 1.1em;
background-color: rgb(var(--lapd-badge));
border: 3px solid rgb(var(--neon-blue));
color: rgb(var(--passive-blue));
}
.logs-header {
text-align: center;
color: rgb(var(--neon-blue));
}
.logs hr {
background: linear-gradient(10deg, rgba(var(--neon-blue), 0.25) 0%, rgba(var(--neon-blue), 1) 50%, rgba(var(--neon-blue), 0.25) 100%);
}
table.dialog {
border-collapse: collapse;
}
table.dialog th {
font-family: var(--display-font);
font-size: 1.1em;
border-right: 1px solid rgb(var(--neon-blue));
color: rgb(var(--neon-blue));
padding: 1.1em 1em 0em 1em;
}
table.dialog td {
font-family: var(--dialogue-font);
font-size: 1.15em;
padding: 1.15em 0em 0em 0.8em;
}
table.dialog td.active {
color: rgb(var(--neon-blue));
}
.blokquote-alt,
.logs {
--hover-link-color: var(--linkalt-hl);
--newpage-color: var(--linkalt);
--link-color: var(--linkalt);
--visited-link-color: var(--tears-n-rain);
}
.blokquote-alt {
margin: .5em 1.25rem;
padding: .825em 1.25em;
border: .0625rem dashed rgba(var(--neon-blue), 1);
color: rgb(var(--neon-blue));
background-color: rgba(var(--pkd-blaster), 0.7);
}
.blokquote-alt hr {
background-color: rgb(var(--neon-blue));
border-top: .0625rem solid rgb(var(--neon-blue));
}
/* SIDEBAR SCROLLBAR */
#side-bar:hover,
#side-bar:active {
scrollbar-color:
rgb(var(--display-dark)) rgb(var(--tyrell-green), 1);
border-color: rgba(var(--tyrell-green), 1);
}
#side-bar::-webkit-scrollbar-track,
#side-bar:hover::-webkit-scrollbar-track {
background-color: rgb(var(--display-dark));
}
#side-bar::-webkit-scrollbar-thumb {
background-color: rgb(var(--tyrell-green));
}
#side-bar:hover::-webkit-scrollbar-thumb {
background-color: rgb(var(--display-green));
}
/* END */