Dynamikron Theme

What is this?

Dynamikron Theme is a light theme for BHL visually based off of the patterning on 1980's Sony Dynamicron VHS cassette tape boxes. You can use it for any article… but preferably one with the nostalgic-leaning, chill synthwave feel of the eighties everyman. Or if you like Dynamicron VHS tapes a lot.

Theme Colors

VCR Body--vcr-body(73, 80, 84)

VHS Cassette--vhs-cassette(42, 39, 49)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

T20 YELLOW--t20-ylo(247, 187, 0)

T30 ORANGE--t30-org(250, 77, 50)

T45 RED--t45-red(239, 39, 76)

T60 PINK--t60-pnk(203, 36, 103)

T120 PURPLE--t120-prp(129, 52, 112)

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

SCP Dynamikron logo spread

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:theme:dynamikron]]

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

+ Titles

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 another¹

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

Extra Divs

ALT. BLOCKQUOTE

uses blokquote-alt div

TEXT GOES HERE

OR HERE

RECORDED VIDEO LOGS

uses logs & logs-header divs + dialog & active classes

VHS Tape.01

> RECORDING STARTED <

	Describe some visual action here. You like visual action, right?
SPEAKER	This is my speech. Very wordy.

Describe some visual action here.

You like visual action, right?

SPEAKER

This is my speech. Very wordy.

ADDED FONTS

▷ Body Font ◁

▷ Header/Heading Font ◁

▷ Page Title Font ◁

▷ Monospace Font ◁

▷ UI Font ◁

▷ Video Logs Dialogue Font ◁

▷ Video Logs Speaker Font ◁

Source Code

» show source

« hide source

/*
    Dynamikron Theme
    [2023 Wikidot Theme]
       by JackalRelated
*/
 
@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
@import url('https://scp-wiki.wdfiles.com/local--files/theme%3Adynamikron/stylesheet-new.css');
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "dynamikron";
   --theme-name: "Dynamikron";
 
   --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Adynamikron/dynamikron-vhs.png");
   --header-title: " ";
   --header-subtitle: " ";
 
   --header-height-on-desktop: 11.5rem;
   --header-height-on-mobile: 11.5rem;
 
/* FONTS */
   --body-font:  'Wix Madefor Text', sans-serif;
   --header-font: 'Clarendon', serif;
   --title-font: 'Alte Haas Grotesk', sans-serif;
   --mono-font: 'Anonymous Mono', monospace;
   --UI-font: 'Jura', sans-serif;
   --logs-dialogue-font: 'IBM Plex Mono', sans-serif;
   --logs-speaker-font: 'DotGothic16', sans-serif;
 
/* WHITE -- GREY */
   --t130-wht: 245, 241, 240;
   --cover-matte: 239, 232, 228;
   --cover-dirty: 209, 202, 199;
   --cover-sticker: 173, 166, 163;
   --t140-gry: 131, 135, 138;
   --vcr-body: 73, 80, 84;
   --vhs-cassette: 42, 39, 49;
   --magnetic-tape: 17, 17, 17;
 
/* YELLOW -- ORANGE */
   --t20-ylo: 247, 185, 0;
   --t30-org: 250, 77, 50;
 
/* RED -- PINK */
   --t45-red: 239, 39, 76;
   --t60-pnk: 203, 36, 103;
 
/* PURPLE */
   --t120-prp: 129, 52, 112;
 
/* THEME ASSIGNMENTS */
   --white-monochrome: var(--cover-matte);
   --black-monochrome: var(--magnetic-tape);
 
   --bright-accent: var(--t45-red);
   --medium-accent: var(--t60-pnk);
   --dark-accent: var(--t120-prp);
 
   --swatch-primary-darkest: var(--medium-accent);
 
   --swatch-background: var(--white-monochrome);
   --background-gradient-color: var(--cover-dirty);
   --background-gradient-distance: 0.575rem;
 
   --header-gradient-color-bottom: var(--cover-matte);
   --header-gradient-color-middle: var(--cover-dirty);
   --header-gradient-color-top: var(--cover-sticker);
   --diagonal-stripes: linear-gradient(transparent 0);
 
   --swatch-text-general: var(--swatch-text-dark);
   --swatch-text-light: var(--t130-wht);
   --swatch-text-secondary-color: var(--t130-wht);
   --swatch-text-tertiary-color: var(--swatch-text-dark);
   --swatch-important-text: var(--t45-red);
 
   --swatch-menubg-color: var(--vcr-body);
   --swatch-menubg-medium-color: var(--cover-dirty);
   --swatch-menubg-medium-dark-color: var(--vhs-cassette);
 
   --swatch-menutxt-light-color: var(--t130-wht);
   --swatch-menutxt-dark-color: var(--magnetic-tape);
   --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
 
   --swatch-topmenu-bg-color: var(--vhs-cassette);
   --swatch-topmenu-border-color: var(--vcr-body);
 
   --sidebar-transition-timing: 0.8s ease-in-out 0.1s;
 
   --toggle-button-bg: rgba(var(--magnetic-tape), 0);
   --toggle-border-color: rgb(var(--vhs-cassette));
   --toggle-icon-color: rgb(var(--vhs-cassette));
   --toggle-roundness: 0%;
 
   --pager-link: var(--t60-pnk);
   --pager-link-hover: var(--t130-wht);
   --pager-hover-bg: var(--t60-pnk);
   --pager-selected-bg: var(--t45-red);
   --pager-selected-link: var(--t130-wht);
 
   --modal-bg: var(--cover-matte);
   --modal-body-text: var(--magnetic-tape);
   --modal-body-header-txt: var(--t60-pnk);
   --modal-header-bg: var(--vhs-cassette);
   --modal-header-txt: var(--t130-wht);
   --modal-header-stripe: var(--vhs-cassette);
 
   --hoverblock-bg: var(--vhs-cassette);
   --hoverblock-txt: var(--cover-matte);
   --hoverblock-header-bg: var(--t45-red);
   --hoverblock-header-txt: var(--t130-white);
   --hoverblock-footer-bg: var(--magnetic-tape);
   --hoverblock-footer-txt: var(--cover-matte);
 
   --ui-button-bg: var(--vhs-cassette);
   --ui-button-txt: var(--t130-wht);
   --ui-button-hover-bg: var(--t60-pnk);
   --ui-button-hover-txt: var(--t130-wht);
   --ui-button-hover-outline: var(--t60-pnk);
 
   --rating-module-button-cancel-color: var(--t30-org);
   --rating-module-button-credit-color: var(--swatch-secondary-color);
   --rating-module-bg-color: var(--vhs-cassette);
   --rating-module-bottom-border-color: var(--swatch-primary);
   --rating-module-text-color: var(--t130-wht);
   --rating-module-text-hover-color: var(--magnetic-tape);
 
    --link-color: var(--t45-red);
    --visited-link-color: var(--t60-pnk);
    --hover-link-color: var(--t45-red);
    --newpage-color: var(--t30-org);
}
 
/* HEADER */
#header {
   --swatch-headerh1-color: var(--swatch-text-dark);
   --swatch-headerh2-color: var(--swatch-text-dark);
 
   --search-icon-color: var(--vhs-cassette);
   --search-icon-hover-color: var(--cover-matte);
   --search-icon-hover-bg-color: var(--t60-pnk);
 
   --search-icon-focus-color: var(--t130-wht);
   --search-icon-focus-bg-color: var(--t60-pnk);
   --search-focus-outline-color: var(--t60-pnk);
   --search-focus-textbox-bg-color: var(--t130-wht);
   --search-focus-textbox-text-color: var(--magnetic-tape);
 
   --login-line-divider-color: var(--vhs-cassette);
   --login-username-color: var(--t60-pnk);
   --login-myaccount-color: var(--t60-pnk);
   --login-myaccount-hover-color: var(--cover-matte);
   --login-myaccount-underline-color: var(--t60-pnk);
   --login-myaccount-hover-bg-color: var(--t60-pnk);
   --login-arrow-color: var(--vhs-cassette);
 
   --login-dropdown-bg-color: var(--vhs-cassette);
   --login-dropdown-bg-image: var(--vhs-cassette);
   --login-dropdown-border-color: var(--magnetic-tape), 0.5;
   --login-dropdown-text-color: var(--t130-wht);
   --login-dropdown-text-hover-color: var(--cover-matte);
   --login-dropdown-bg-hover-color: var(--t60-pnk);
 
   background-position: left 0rem top 0rem;
   background-size: auto calc(var(--header-height-on-desktop) - 0rem);
}
 
#header h1 a {
    text-shadow: none;
    height: 100%;
    width: 250%;
    color: transparent;
 
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Adynamikron/dynamikron-scp-s.png");
    margin: 0;
    margin-left: 3.3em;
    padding: 0;
 
    background-size: auto calc(var(--header-height-on-desktop) - 5.5rem);
    background-repeat: no-repeat;
    background-position: left center;
}
 
@media only screen and (max-width: 56.25rem) {
    #header {
        background-size: calc(var(--size) - 2rem), 100% var(--header-height-on-mobile);
        background-position: calc(var(--header-height-on-mobile) - 0 - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
    }
 
    #header h1 a {
        background-size: contain;
        position: relative;
        width: min(10em, 65vw);
        margin-left: 6.45em;
    }
}
 
#header h1 a::before {
    text-shadow: none;
    color: transparent;
}
 
#header h2 {
    display: none;
}
 
#extra-div-1 {
    height: var(--header-height-on-desktop);
    width: 100%;
    position: absolute;
    top: 5px;
    left: 0;
    pointer-events: none;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Adynamikron/dynamikron-bg.png");
    background-size: calc(var(--header-height-on-desktop) * 0.75);
}
 
#extra-div-2 {
    height: var(--header-height-on-desktop);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Adynamikron/dynamikron-tex.png");
    background-size: calc(var(--header-height-on-desktop) * 1.5);
    mix-blend-mode: soft-light;
    opacity: 0.525;
}
 
#header div#top-bar,
#header div#mobile-top-bar,
#login-status {
   font-family: var(--UI-font);
}
 
h1, h2 {
   font-family: var(--header-font);
   letter-spacing: 0.0575rem;
}
 
/* TOP BAR */
#top-bar {
   --topmenu-category-color: var(--t130-wht);
   --topmenu-category-hover-color: var(--t130-wht);
   --topmenu-hover-border-color: var(--t60-pnk);
 
   --mobile-topmenu-sidebar-button-color: var(--t130-wht);
 
   --dropdown-bg-color: var(--magnetic-tape), 0.9;
   --dropdown-border-color: var(--t140-gry), 0.5;
   --dropdown-links-color: var(--t130-wht);
   --dropdown-links-hover-color: var(--cover-matte);
   --dropdown-links-hover-bg-color: var(--t60-pnk);   
}
 
/* PAGE TITLE */
#page-title {
   color: rgb(var(--magnetic-tape));
   font-style: italic;
}
 
#page-title::after,
.meta-title::after {
   height: 0.0825rem;
   background: rgb(var(--vhs-cassette));
}
 
/* SCROLLBAR AND SIDEBAR */
html,
body {
    scrollbar-color:
        rgb(var(--cover-dirty))
        rgb(var(--cover-sticker));
}
 
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 18px;
    background: #transparent;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgb(var(--cover-dirty));
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: rgb(var(--cover-sticker));
    border: rgb(var(--cover-sticker)) 1px solid;
    border-radius: 0px;
}
 
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--t45-red));
}
 
#side-bar, #interwiki {
   --UI-font: 'Michroma', sans-serif;
   --sidebar-bg-color: var(--cover-matte);
   --sidebar-resources-bg-color: var(--t60-pnk), 0.25;
   --sidebar-media-bg-color: var(--t60-pnk), 0.125;
 
   --sideblock-heading-bg-color: var(--t45-red);
   --sideblock-heading-border-color: var(--swatch-primary);
   --sideblock-heading-text-color: var(--t130-wht);
 
   --sidebar-border-color: var(--swatch-border-color), 0.08;
   --sidebar-subtext-color: var(--swatch-primary);
 
   --sidebar-links-text: var(--magnetic-tape);
   --sidebar-links-hover-bg-color: var(--t20-ylo);
   --sidebar-links-hover-text-color: var(--magnetic-tape);
}
 
#interwiki .heading,
#side-bar .heading {
   padding-bottom: 0.175em;
   min-height: 1.75rem;
}
 
#interwiki .heading p,
#side-bar .heading p {
   font-size: calc(var(--base-font-size)*(16/15));
}
 
hr {
    background-color: rgb(var(--cover-dirty));
    border-top: .0625rem solid rgb(var(--cover-dirty));
}
 
.code {
    background-color: rgb(var(--t130-wht));
}
 
blockquote,
div.blockquote {
   border: .0625rem dashed rgba(var(--cover-sticker), 1);
 
   --hover-link-color: var(--t30-org);
   --newpage-color: var(--t45-red);
   --link-color: var(--t45-red);
   --visited-link-color: var(--vhs-cassette);
}
 
blockquote hr,
div.blockquote hr {
   background-color: rgb(var(--cover-sticker));
   border-top: .0625rem solid rgb(var(--cover-sticker));
}
 
.scp-image-block {
   box-shadow: none;
   border: none;
}
 
.scp-image-block .scp-image-caption {
   border-top: .125rem outset rgba(var(--t45-red), 1);
   background-color: rgba(var(--cover-dirty), 0.5) !important;
   color: rgb(var(--magnetic-tape));
}
 
:is(div.image-block,div.scp-image-block) :is(.image-caption,.scp-image-caption)>p {
   padding: 2px 0px 0px 0px;
}
 
#odialog-container .modal-header, 
#odialog-container .title {
   padding: 1.725rem 1.25rem;
}
 
#odialog-container .content :is(h1,h2,h3,h4,h5), 
#odialog-container .modal-body :is(h1,h2,h3,h4,h5) {
    box-shadow: none;
}
 
/* MAIN CONTENT */
#main-content {
   --ui-icon-color: var(--cover-matte);
   --ui-icon-bg: var(--vhs-cassette);
   --ui-icon-hover-color: var(--t130-wht);
   --ui-icon-hover-bg: var(--t60-pnk);
 
   --pagetags-title-bg: var(--swatch-primary);
   --pagetags-title-text: var(--t130-wht);
   --pagetags-text-color: var(--swatch-primary);
   --pagetags-text-hover-color: var(--magnetic-tape);
   --pagetags-text-hover-bg-color: var(--t20-ylo);
 
   --editor-icon-color: var(--vhs-cassette);
   --editor-icon-submenu-bg: var(--t140-gry);
   --editor-icon-hover-color: var(--t130-wht);
   --editor-icon-hover-bg: var(--t30-org);
 
   --tabs-bg: var(--vhs-cassette);
   --tabs-txt: var(--t130-wht);
   --tabs-hover-bg: var(--t60-pnk);
   --tabs-hover-txt: var(--t130-wht);
   --tabs-selected-bg: var(--t45-red);
   --tabs-selected-txt: var(--t130-wht);
   --tabs-selected-outline: var(--t45-red);
   --tabs-bottom-border-color: var(--t60-pnk);
   --tabs-content-bg-color: var(--t140-gry), 0.25;
   --tabs-content-border-color: var(--vhs-cassette);
 
   --tables-header-bg: var(--t60-pnk);
   --tables-header-txt: var(--t130-wht);
   --tables-border: var(--vhs-cassette);
   --tables-body-bg: var(--t140-gry), 0.125;
   --tables-body-txt: var(--swatch-text-general);
 
   --toc-header-bg-color: var(--t60-pnk);
   --toc-header-text-color: var(--cover-matte);
   --toc-header-text-hover-color: var(--t130-wht);
   --toc-body-bg-color: var(--vhs-cassette);
   --toc-directory-lines-color: var(--vcr-body);
   --toc-body-link-color: var(--t130-wht);
   --toc-body-link-hover-color: var(--t20-ylo);
   --toc-body-hover-arrow-color: var(--t20-ylo);
 
   --blockquote-bg-color: var(--cover-dirty), 0.175;
   --blockquote-border-color: var(--cover-sticker);
   --blockquote-colorbar-color: var(--swatch-primary), 1;
 
   --footnotes-footer-bg-color: var(--cover-dirty);
   --footnotes-footer-colorbar-color: var(--t45-red);
   --footnotes-footer-title-bg-color: var(--t45-red);
   --footnotes-footer-title-text-color: var(--t130-wht);
   --footnotes-footer-num-color: var(--t45-red);
   --footnotes-footer-num-hover-color: var(--t30-org);
   --footnotes-footer-text-color: var(--swatch-text-general);
}
 
/* FOOTERS AND BELOW */
#footer {
   --footer-bg-color: var(--vhs-cassette);
   --footer-text-color: var(--cover-dirty);
   --footer-link-color: var(--t130-wht);
   --footer-link-hover-color: var(--t130-wht);
   --footer-link-hover-bg-color: var(--t60-pnk);
}
 
#license-area {
   --license-bg-color: var(--cover-matte);
   --license-text-color: var(--magnetic-tape);
   --license-link-color: var(--t45-red);
   --license-link-hover-color: var(--t130-wht);
   --license-link-hover-bg-color: var(--t45-red);
}
 
form#edit-page-form textarea,
form#new-post-form textarea {
   background-color: rgb(var(--t130-wht));
}
 
#action-area:has(form[onsubmit*=setParent],#who-rated-page-area,form[onsubmit*=PageTagsModule],table.page-files,#edit-meta-addbutton,ul[style="list-style: none"],#page-block-checkbox,#rename-option-rename,#rename-option-delete) p:not(:has(a[id*=backlinks],a[onclick*=showWho],a.btn)) {
   background-color: rgb(var(--cover-dirty));
   box-shadow: inset 0.25rem 0 0 0 rgb(var(--swatch-primary)), -0.125rem 0 0.25rem 0 rgba(var(--cover-sticker), .25), inset 0-0.0625rem 0 0 rgba(var(--cover-sticker), .75);
}
 
/* TOGGLE SIDEBAR (BHL) CHANGES */
@supports((display: -ms-grid) or (display: grid)) {
   @media only screen and (min-width: 769px) {
      #main-content::before {
         background: rgba(var(--vhs-cassette), .55) 1px 1px repeat;
      }
   }
}
 
/* CUSTOM DIVS */
 
.blokquote-alt {
   margin: .5em 1.25rem;
   padding: .525em 1.55em;
   border: .0625rem dashed rgba(var(--cover-dirty), 1);
   background-color: rgba(var(--t130-wht), 0.9);
 
   color: rgb(var(--vhs-cassette));
   font-weight: 400;
   font-size: 1.05em;
   font-family: var(--UI-font);
 
   --hover-link-color: var(--t30-org);
   --newpage-color: var(--t45-red);
   --link-color: var(--t45-red);
   --visited-link-color: var(--t60-pnk);
}
 
.blokquote-alt hr {
    background-color: rgb(var(--t45-red));
    border-top: .0625rem solid rgb(var(--t45-red));
}
 
.logs p,
.logs-header p,
table.dialog p {
    margin: 0em;
}
 
.logs {
   padding: 0px 0px 0.5em 0px;
   margin: auto;
   width: 95%;
 
   background-color: rgb(var(--vhs-cassette));
   border: 3px outset rgb(var(--vcr-body));
   color: rgb(var(--t130-wht));
 
   font-family: 'Michroma', sans-serif;
   font-size: 1.175em;
   letter-spacing: 0.15em;
}
 
.logs-header {
   background-color: rgb(var(--t120-prp));
   color: rgb(var(--t130-wht));
 
   padding: 0.5em 0px 0.5em 0px;
   border-bottom: 0.675rem double rgb(var(--vhs-cassette));
 
   text-align: center;
   font-size: 2.15em;
   letter-spacing: 0em;
   letter-spacing: 0.075em;
}
 
.logs hr {
    background-color: rgb(var(--ink-blot));
}
 
table.dialog {
   border-collapse: collapse;
   margin-top: 1.5em;
   font-family: var(--logs-speaker-font);
   letter-spacing: normal;
}
 
table.dialog th {
   border-right: 1px solid rgb(var(--t130-wht));
   color: rgb(var(--t130-wht));
   padding: 1em 1em 0em 1em;
   letter-spacing: 0.1rem;
   font-weight: bold;
}
 
table.dialog td {
   padding: 1em 0em 0em 1em;
   font-family: var(--title-font);
   line-height: 1.35em;
}
 
table.dialog td.active {
   color: rgb(var(--t130-wht));
   font-family: var(--logs-dialogue-font);
   line-height: 1.5em;
}

+ Show component code

- Hide component code

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

theme

page revision: 15, last edited: 19 Jun 2023 00:50

Edit Rate (+44) Tags Discuss (6) History Files Print Site tools + Options

SCP Foundation

Secure, Contain, Protect

What is this?

Theme Colors

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Extra Divs

ALT. BLOCKQUOTE

RECORDED VIDEO LOGS

ADDED FONTS

Source Code

Other interesting sites

诸界之门

后室幸存者总督

Hacking Thursday

BlackBerry Storm Wiki