Timepiece Theme
rating: +36+x

What is this?

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.


Theme Colors

Large Scissor Blades--scissor-blades#C5C5D4
Minute Hand (Tick)--minute-hand#F4F4F4
Hour Hand (Tock)--hour-hand#363636
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Dripping Death--dripping-death#C70000
"Killer" Vision--killer-vision#B31212
Fresh Blood--fresh-blood#660000
No.4 C#m (Op. 66)--fantaisie-impromptu#06064B
Corvino's Eyes--corvino-eye#2A3547
Dark, Dark Rooms--dark-rooms#070D29
Veined Spatter--veined-spatter#420000
Stale Fountain Water--stale-water#11111C
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

ctlogo.png

Escapement Foundation Logo

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. To learn more go here.





On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:theme:clock-tower]]

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

Just use your imagination and pretend there's `Lorem Ipsum` here.


This is a blockquote, created by putting "> " at the start of each line.
More text


That's a horizontal rule

Nested blockquotes

And another1

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

The Header font is Colus.
The Title font is Gowun Batang.
The Body and UI font is Jost.
The Monospace font used is Courier Prime.


[[iftags +component]]

rating: +36+x

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.


How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}


[[/iftags]]

[[div [[iftags -component]]style="display: none"[[/iftags]]]]

/*
   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 {
   --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(--fantaisie-impromptu));
}
 
.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));
   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 {
   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);
}
 
/* TOGGLE SIDEBAR (BHL) CHANGES */
 
@supports((display: -ms-grid) or (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));
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License