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
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.
Hey look, more text here.
How quaint.
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.
It happened in September…
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.
/* 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)); }
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; background: unset; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu { pointer-events: none; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; pointer-events: none; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after { opacity: 0; pointer-events: none; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar { padding: inherit; } } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @supports (-webkit-hyphens:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } }