Tema Timepiece

---

O que é isso?

O tema Timepiece é um tema sombrio para o BHL visualmente baseado no filme de 1985 Fenômeno e no videogame (e série) de 1995 Clock Tower. Você pode usá-lo para qualquer artigo… mas de preferência um com um aspecto meio sombrio, assustador e talvez até sobrenatural. Ou se você gosta de Clock Tower.

---

Cores do Tema

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}

---

Logotipo de Escape da Fundação

Observação: Este é um tema baseado no Black Highlighter. Você precisará importar o tema do Black Highlighter também a fim de usar este tema. Para aprender mais, clique aqui.

Em qualquer wiki:

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

Exemplos

Uma linha horizontal pode ser criada com 5 hifens "-" e se estende por toda a página se não for colocada dentro de nada (como uma citação). As linhas separando as seções deste documento são linhas horizontais.

---

Títulos podem ser criados colocando de um a seis sinais de mais "+" no começo da linha

+ Títulos

Primeiro Título

Segundo Título

Terceiro Título

Quarto Título

Quinto Título

Sexto Título

Abalador

Só use sua imaginação e finja que tem 'Lorem Ipsum' aqui.

Abalação

Ei, olhe, mais texto aqui.

Que chique.

Aba Longa

Esta é uma aba longa. Ela contem bastante texto.

Esta é uma aba longa. Ela contem bastante texto.

Esta é uma aba longa. Ela con tem bastante texto.

Esta é uma aba longa. Ela contem bastante texto.

Esta é uma aba longa. Ela contem bastante texto.

Esta é uma aba longa. Ela con tem bastante texto.

Esta é uma aba longa. Ela contem bastante texto.

Esta é uma aba longa. Ela contem bastante texto.

Esta é uma aba longa. Ela con tem bastante texto.

Esta é uma aba longa. Ela contem bastante texto.

Esta é uma aba longa. Ela con tem bastante texto.

Aba Vazia

Aba Vazia

Aba Vazia

Aba Vazia

Aba Vazia

Aba Vazia

Isso aconteceu em setembro…

Esta é uma citação, criada ao colocar "> " no começo de cada linha.

Mais texto

---

Isso é uma linha horizontal

Citação dentro de citação

E mais uma¹

Esta é uma	tabela
Você já deveria	saber como
fazer uma

---

A fonte do Cabeçalho é Colus.
A fonte de Título é Gowun Batang.
A fonte do Corpo e UI é Jost.
A fonte mnooespaçada usada é Courier Prime.

---

[[iftags +componente]]

O quê isso faz

Faz a barra lateral ser escondida por padrão e ativada por um botão que fica no canto, semelhante à versão de celular do site.

• NÃO funciona com o Sigma-9. Isso funciona APENAS com Black Highlighter.
• Use este componente feito por EstrellaYoshte se você quiser usar Sigma-9.
• Se você preferir, também há uma Barra Lateral Colapsável que funciona tanto em BHL quanto em Sigma-9.
  A barra lateral colapsável funciona passando o mouse por cima em vez de clicar e é levemente mais visível do que a Barra Lateral Desativável.

---

Como usar

1. Copie o código abaixo.

2. Cole no artigo depois do Black Highlighter e qualquer outra include de Tema.

[[include :scp-pt-br:component:toggle-sidebar-bhl]]

3. (Opcional) Estilizar o botão da barra lateral se estiver usando um tema.

Também há 5 variáveis de CSS disponíveis para estilizar o botão se necessário.
Para as cores, é fortemente sugerido que você use as variáveis de cor disponíveis do BHL que podem ser encontradas aqui.

:root:lang(pt-br) {
--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 -componente]]style="display: none"[[/iftags]]]]

+ Mostrar código do componente

@supports(display: grid) {
    :root:lang(pt-br) {
     --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.25rem;
     left: 0.5rem;
     width: 3rem;
     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::before,
     #side-bar:focus-within .close-menu::after {
     opacity: 0;
     }
 
     #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 .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;
     }
 
     #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;
     width: var(--body-width-on-desktop, 45.75rem);
     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));
     }
 
     @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) {
     @supports (-webkit-appearance: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 {
     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;
     }
     }
     }
    }
}

/*
   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-pt-br.wdfiles.com/local--files/theme%3Aclock-tower/stylesheet-ct.css');
 
:root:lang(pt-br) {
   --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: "FUNDAÇÃO SCP";
   --header-subtitle: "TIQUE. TAQUE. TIQUE. TAQUE.";
 
   --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(--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 {
   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:lang(pt-br) {
   --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));
}

Footnotes

1. E aqui temos uma nota de rodapé!