/*
Timepiece Theme
[2021 Wikidot Theme]
by JackalRelated
inspired by Phenomena and the Clock Tower series
*/
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Gowun+Batang&family=Jost&family=Nothing+You+Could+Do&display=swap');
@import url('https://scp-wiki.wdfiles.com/local--files/theme%3Aclock-tower/stylesheet-ct.css');
:root {
--theme-base: "black-highlighter";
--theme-id: "clock-tower";
--theme-name: "Timepiece Theme";
--logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aclock-tower/ctlogo.png");
--header-title: "SCP FOUNDATION";
--header-subtitle: "TICK. TOCK. TICK. TOCK.";
--body-font: 'Jost', sans-serif;
--header-font: 'Colus', serif;
--UI-font: var(--body-font);
--title-font: 'Gowun Batang', serif;
--mono-font: 'Courier Prime', monospace;
/* WHITE - GREY */
--dress-white: 250, 250, 255;
--scissor-blades: 197, 197, 212;
--winding-key: 106, 118, 138;
--minute-hand: 79, 79, 79;
--hour-hand: 54, 54, 54;
/* BLUE */
--corvino-eye: 42, 53, 71;
--rain-at-barrows: 18, 18, 107;
--stale-water: 17, 17, 28;
--dark-rooms: 7, 13, 41;
--fantaisie-impromptu: 6, 6, 75;
--nightmare-blue: 4, 4, 10;
/* RED */
--PAURAPAURA: 255, 20, 20;
--profondo-rosso: 240, 0, 0;
--dripping-death: 199, 0, 0;
--killer-vision: 179, 18, 18;
--fresh-blood: 102, 0, 0;
--veined-spatter: 66, 0, 0;
/* THEME ASSIGNMENTS */
--white-monochrome: var(--dress-white);
--pale-gray-monochrome: var(--stale-water);
--light-gray-monochrome: var(--winding-key);
--gray-monochrome: var(--minute-hand);
--dark-gray-monochrome: var(--hour-hand);
--black-monochrome: var(--nightmare-blue);
--pale-accent: var(--scissor-blades);
--bright-accent: var(--killer-vision);
--medium-accent: var(--fresh-blood);
--dark-accent: var(--veined-spatter);
--swatch-topmenu-bg-color: var(--dark-rooms);
--swatch-topmenu-border-color: var(--dark-rooms);
--swatch-background: var(--nightmare-blue);
--swatch-primary: var(--killer-vision);
--swatch-primary-darker: var(--dark-rooms);
--swatch-primary-darkest: var(--fresh-blood);
--swatch-border-color: var(--fantaisie-impromptu);
--swatch-text-dark: var(--nightmare-blue);
--swatch-text-light: var(--scissor-blades);
--swatch-text-general: var(--swatch-text-light);
--swatch-important-text: var(--bright-accent);
--swatch-menubg-color: var(--dress-white);
--swatch-menubg-light-color: var(--minute-hand);
--swatch-menubg-medium-color: var(--hour-hand);
--swatch-menubg-medium-dark-color: var(--hour-hand);
--swatch-menubg-dark-color: var(--hour-hand);
--swatch-menubg-black-color: var(--nightmare-blue);
--swatch-menubg-hover-color: var(--nightmare-blue);
--swatch-menutxt-dark-color: var(--nightmare-blue);
--swatch-menutxt-light-color: var(--scissor-blades);
--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
--swatch-secondary-color: var(--stale-water);
--swatch-tertiary-color: var(--scissor-blades);
--swatch-alternate-color: var(--corvino-eye);
--swatch-text-secondary-color: var(--nightmare-blue);
--swatch-text-tertiary-color: var(--dress-white);
--background-gradient-distance: 0rem;
--diagonal-stripes: linear-gradient(transparent 0);
--sidebar-transition-timing: 0.8s ease-in-out 0.1s;
--hover-link-color: var(--PAURAPAURA);
--link-color: var(--profondo-rosso);
--newpage-color: var(--PAURAPAURA);
--visited-link-color: var(--profondo-rosso);
--toggle-button-bg: rgba(var(--dark-rooms), .25);
--toggle-border-color: rgb(var(--scissor-blades));
--toggle-icon-color: rgb(var(--dress-white));
--toggle-roundness: 0%;
}
/* HEADER AND TOPBAR */
#header {
--swatch-headerh1-color: var(--dress-white);
--swatch-headerh2-color: var(--dress-white);
--search-icon-color: var(--scissor-blades);
--search-icon-hover-color: var(--dress-white);
--search-icon-hover-bg-color: var(--fresh-blood);
--search-textbox-text-color: 0, 0, 0, 0;
--search-icon-focus-color: var(--dress-white);
--search-icon-focus-bg-color: var(--fresh-blood);
--search-focus-outline-color: var(--killer-vision);
--search-focus-textbox-bg-color: var(--minute-hand);
--search-focus-textbox-text-color: var(--scissor-blades);
--login-line-divider-color: var(--killer-vision);
--login-username-color: var(--scissor-blades);
--login-myaccount-color: var(--scissor-blades);
--login-myaccount-underline-color: var(--veined-spatter);
--login-myaccount-hover-bg-color: var(--fresh-blood);
--login-arrow-color: var(--scissor-blades);
--login-dropdown-bg-color: var(--stale-water);
--login-dropdown-bg-image: var(--stale-water);
--login-dropdown-border-color: var(--hour-hand), 0.5;
--login-dropdown-text-color: var(--scissor-blades);
--login-dropdown-text-hover-color: var(--dress-white);
--login-dropdown-bg-hover-color: var(--corvino-eye);
--login-mobile-icon-color: var(--scissor-blades);
--login-mobile-icon-hover-color: var(--dress-white);
--login-mobile-icon-hover-bg-color: var(--fresh-blood);
}
#header h1 {
height: var(--header-height-on-desktop);
}
#header h2 span::before {
margin-left: -0.2rem;
}
#extra-div-1,
#extra-div-2,
#extra-div-3,
#extra-div-4 {
height: var(--header-height-on-desktop);
width: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
#extra-div-1,
#extra-div-4 {
background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aclock-tower/color-bg.png);
background-size: calc(var(--header-height-on-desktop) * 4);
}
#extra-div-2,
#extra-div-3 {
background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aclock-tower/ctfog.gif);
background-position: bottom -10rem center;
background-size: 100vmax;
}
#extra-div-2 {
mix-blend-mode: overlay;
opacity: 0.7;
}
#extra-div-3 {
mix-blend-mode: screen;
opacity: 0.6;
}
#extra-div-4 {
mix-blend-mode: color;
}
#top-bar {
--topmenu-category-color: var(--dress-white);
--topmenu-category-hover-color: var(--scissor-blades);
--topmenu-hover-border-color: var(--killer-vision);
--mobile-topmenu-sidebar-button-color: var(--dress-white);
--dropdown-bg-color: var(--stale-water), 0.9;
--dropdown-border-color: var(--hour-hand), 0.5;
--dropdown-links-color: var(--scissor-blades);
--dropdown-links-hover-color: var(--dress-white);
--dropdown-links-hover-bg-color: var(--corvino-eye);
}
/* BREADCRUMBS */
#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active {
color: rgb(var(--dress-white));
text-decoration: none;
}
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
color: rgb(var(--dress-white));
text-decoration: none;
}
/* SCROLLBAR AND SIDEBAR */
html,
body {
scrollbar-color:
rgb(var(--veined-spatter)) rgb(var(--hour-hand));
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 18px;
background: #transparent;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
background: rgb(var(--hour-hand));
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background: rgb(var(--veined-spatter));
border: rgb(var(--veined-spatter)) 1px solid;
border-radius: 0px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
background: rgb(var(--fresh-blood));
}
#side-bar,
#interwiki {
--sidebar-bg-color: var(--nightmare-blue);
--sidebar-resources-bg-color: var(--corvino-eye), 0.25;
--sidebar-media-bg-color: var(---corvino-eye), 0.25;
--sideblock-heading-border-color: var(--fresh-blood);
--sideblock-heading-text-color: var(--dress-white);
--sidebar-border-color: var(--swatch-border-color), 0.08;
--sidebar-subtest-color: var(--swatch-primary);
--sidebar-links-text: var(--scissor-blades);
--sidebar-links-hover-bg-color: var(--killer-vision);
--sidebar-links-hover-text-color: var(--dress-white);
}
hr {
background-color: rgb(var(--nightmare-blue));
}
.code {
background-color: rgb(var(--scissor-blades));
}
.hl-default, .hl-code, .hl-brackets {
color: black;
}
.scp-image-block .scp-image-caption {
border-top: .0625rem outset rgba(var(--fresh-blood), 1);
background-color: rgb(var(--dark-rooms));
box-shadow: inset 0 0.0625rem 0 0 rgb(var(--fresh-blood), .75);
color: var(--dress-white);
}
.scp-image-block {
box-shadow: none;
border: none;
}
/* 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(--swatch-secondary-color);
--tabs-txt: var(--scissor-blades);
--tabs-hover-bg: var(--rain-at-barrows);
--tabs-hover-txt: var(--dress-white);
--tables-header-txt: var(--scissor-blades);
--tabs-selected-bg: var(--fresh-blood);
--tabs-selected-txt: var(--dress-white);
--tabs-selected-outline: var(--fresh-blood);
--tabs-bottom-border-color: var(--rain-at-barrows);
--tabs-content-bg-color: var(--fantaisie-impromptu), 0.25;
--tabs-content-border-color: var(--nightmare-blue);
--tables-header-bg: var(--veined-spatter);
--tables-border: var(--minute-hand);
--tables-body-bg: var(--dark-rooms), 0.25;
--toc-header-bg-color: var(--dark-rooms);
--toc-header-text-color: var(--scissor-blades);
--toc-header-text-hover-color: var(--dress-white);
--toc-body-bg-color: var(--stale-water);
--toc-body-link-color: var(--scissor-blades);
--ui-icon-color: var(--dress-white);
--ui-icon-bg: var(--stale-water);
--ui-icon-hover-color: var(--scissor-blades);
--ui-icon-hover-bg: var(--killer-vision);
--blockquote-bg-color: var(--fantaisie-impromptu), 0.25;
--blockquote-border-color: var(--hour-hand);
--blockquote-colorbar-color: var(--fresh-blood), 1;
--footnotes-footer-colorbar-color: var(--fresh-blood);
--footnotes-footer-title-bg-color: var(--fresh-blood);
--footnotes-footer-title-text-color: var(--scissor-blades);
--pagetags-title-bg: var(--fresh-blood);
--pagetags-title-text: var(--scissor-blades);
--pagetags-text-color: var(--dripping-death);
--pagetags-text-hover-color: var(--dress-white);
--pagetags-text-hover-bg-color: var(--fantaisie-impromptu);
}
table.wiki-content-table th {
color: var(--scissor-blades);
font-family: var(--title-font);
}
:root {
--hoverblock-header-bg: var(--fresh-blood);
--hoverblock-header-txt: var(--dress-white);
--hoverblock-footer-txt: var(--scissor-blades);
--ui-button-hover-bg: var(--swatch-primary);
--ui-button-hover-txt: var(--scissor-blades);
}
/* FOOTERS AND BELOW */
.page-source {
background: rgb(var(--dark-rooms));
font-family: var(--mono-font);
}
#lock-info,
div.note,
input.checkbox,
input.text,
textarea {
font-family: var(--body-font);
}
#footer {
--footer-bg-color: var(--dark-rooms);
--footer-text-color: var(--scissor-blades);
--footer-link-color: var(--dress-white);
--footer-link-hover-color: var(--winding-key);
--footer-link-hover-bg-color: var(--fantaisie-impromptu);
}
#license-area {
--license-bg-color: var(--nightmare-blue);
--license-text-color: var(--scissor-blades);
--license-link-color: var(--dress-white);
--license-link-hover-color: var(--killer-vision);
--license-link-hover-bg-color: var(--winding-key);
}
.page-rate-widget-box .rate-points {
border: none !important;
background-color: rgba(0, 0, 0, 0) !important;
}
/* TOGGLE SIDEBAR (BHL) CHANGES */
@supports(display: grid) {
@media only screen and (min-width: 769px) {
#main-content::before {
background: rgba(var(--fantaisie-impromptu), .45) 1px 1px repeat;
}
}
}
#side-bar:hover,
#side-bar:active {
scrollbar-color:
rgb(var(--veined-spatter)) rgb(var(--hour-hand), 1);
border-color: rgba(var(--veined-spatter), 1);
}
#side-bar::-webkit-scrollbar-track,
#side-bar:hover::-webkit-scrollbar-track {
background-color: rgb(var(--hour-hand));
}
#side-bar::-webkit-scrollbar-thumb {
background-color: rgb(var(--veined-spatter));
}
#side-bar:hover::-webkit-scrollbar-thumb {
background-color: rgb(var(--fresh-blood));
}