Timepiece Theme

Link to article: Timepiece Theme.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

.scp-image-block.block-right {
    background: var(--dark-gray-monochrome);
}
.scp-image-block img {
    min-width: 100%;
    border: 0.5rem solid transparent;
    box-sizing: border-box;
}

@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Aclock-tower/1")

```
width:300px;
```
```
width:width:300px;;
```
```
color: rgb(var(--nightmare-blue));
```
```
font-family: var(--header-font);
```
```
font-family: var(--title-font);
```
```
font-family: var(--body-font);
```
```
font-family: var(--mono-font);
```

```
blockquote
```
```
scp-image-block
```
```
block-right
```
```
scp-image-caption
```
```
code
```

[[iftags +theme]]
[[module CSS]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

.scp-image-block.block-right {
    background: var(--dark-gray-monochrome);
}
.scp-image-block img {
    min-width: 100%;
    border: 0.5rem solid transparent;
    box-sizing: border-box;
}
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css
]]

[[>]]
[[module Rate]]
[[/>]]

-----
++ What is this?
[[div class="blockquote"]]
The Timepiece theme is a dark theme for BHL visually based off of the 1985 movie //Phenomena// and the 1995 videogame (and series) //Clock Tower//. You can use it for any article... but preferably one with a sort of a dark, creepy, and maybe even supernatural vibe. Or if you like Clock Tower.
[[/div]]
----

[[=]]
+ Theme Colors
[[/=]]

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Large Scissor Blades
| color1-variable=--scissor-blades
| color1-info=#C5C5D4
| color1-has-light-text=0
| color2-name=Minute Hand (Tick)
| color2-variable=--minute-hand
| color2-info=#F4F4F4
| color2-has-light-text=1
| color3-name=Hour Hand (Tock)
| color3-variable=--hour-hand
| color3-info=#363636
| color3-has-light-text=1
| subcolor1-name=Dripping Death
| subcolor1-variable=--dripping-death
| subcolor1-info=#C70000
| subcolor1-has-light-text=1
| subcolor2-name="Killer" Vision
| subcolor2-variable=--killer-vision
| subcolor2-info=#B31212
| subcolor2-has-light-text=1
| subcolor3-name=Fresh Blood
| subcolor3-variable=--fresh-blood
| subcolor3-info=#660000
| subcolor3-has-light-text=1
| subcolor7-name=Veined Spatter
| subcolor7-variable=--veined-spatter
| subcolor7-info=#420000
| subcolor7-has-light-text=1
| subcolor4-name= No.4 C#m (Op. 66)
| subcolor4-variable=--fantaisie-impromptu
| subcolor4-info=#06064B
| subcolor4-has-light-text=1
| subcolor5-name=Corvino's Eyes
| subcolor5-variable=--corvino-eye
| subcolor5-info=#2A3547
| subcolor5-has-light-text=1
| subcolor6-name=Dark, Dark Rooms
| subcolor6-variable=--dark-rooms
| subcolor6-info=#070D29
| subcolor6-has-light-text=1
| subcolor8-name=Stale Fountain Water
| subcolor8-variable=--stale-water
| subcolor8-info=#11111C
| subcolor8-has-light-text=1
]]

----

[[div class="scp-image-block block-right" style="width:300px;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aclock-tower/ctlogo.png]]
[[div class="scp-image-caption" style="width:width:300px;;"]]
Escapement Foundation Logo
[[/div]]
[[/div]]

++ Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. [[[theme:black-highlighter-theme|To learn more go here]]].
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@

On any wiki:

[[div class="code" style="color: rgb(var(--nightmare-blue));"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:component:toggle-sidebar-bhl]]@@
@@[[include :scp-wiki:theme:clock-tower]]@@
[[/div]]

+ Examples

A horizontal rule can be created with 5 hyphens "@@-----@@" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

-----

Titles can be created by putting between one and six plus "+" at the start of the line

[[collapsible show="+ Titles" hide="- Titles"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@

[[tabview]]
[[tab Tabulator]]
Just use your imagination and pretend there's `Lorem Ipsum` here.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
It happened in September... 
[[/tab]]
[[/tabview]]
@@ @@
> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes
>>> And another[[footnote]] And here's a footnote! [[/footnote]]

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||

----

[[=]]
[[span style="font-family: var(--header-font);"]]The Header font is Colus.[[/span]]
[[span style="font-family: var(--title-font);"]]The Title font is Gowun Batang.[[/span]]
[[span style="font-family: var(--body-font);"]]The Body and UI font is Jost.[[/span]]
[[span style="font-family: var(--mono-font);"]]The Monospace font used is Courier Prime.[[/span]]
[[/=]]

-----
[[collapsible show="+ Show theme code" hide="- Hide theme code"]]
[[code type="css"]]

/*
    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(--hour-hand)) rgb(var(--veined-spatter));
}

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));
}

.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));
}

[[/code]]
[[/collapsible]]
[[/iftags]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Aclock-tower/1")
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aclock-tower/1
]]

Timepiece Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source