Highroller Theme

rating: +40+–x



close

Info

X

SCP-XXXX: TITLE
NAME OF TALE/GOI-FORMAT
Author: Author
Original: LINK TO ORIGINAL
Translator: Translator
Image: Put any licensing information for images here
Add anything else you'd like the reader to know

rating: +40+–x

Theme Colors

Ship Gray--gray-monochrome#424248

Gold--bright-accent#ffd700

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

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

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

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

Sinful Scarlet--medium-accent#99081a

Filthy Leather--dark-accent#450009

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$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}

Undervegas, Baby

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:highroller]]

Examples

A horizontal rule can be created with 4 hyphens "----" and extends across the whole page if it's not placed inside anything (e.g. 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.

Visited link
Unvisited link
Missing link

This is a blockquote, created by putting "> " at the start of each line, or use [[div class="blockquote"]].
More text

That's a horizontal rule

Nested blockquotes

And another¹

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

The Header and Title font is Playfair Display.
The Body font is Ysabeau Office.
The Monospace font used is Recurisve.

Source Code

» show source

« hide source

/*
    Highroller Theme
    [2023 Wikidot Theme]
    by ROUNDERHOUSE
*/
 
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,900;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ysabeau+Office&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Telex&display=swap');
 
:root {
    --theme-id: "UNDERVEGAS THEME";
    --theme-name: "UNDERVEGAS THEME";
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ahighroller/finished2.gif");
    --header-title: "SITE-666";
    --header-subtitle: "UNDERVEGAS";
    --header-font: 'Playfair Display', serif;
    --title-font: 'Playfair Display', serif;
    --body-font: 'Ysabeau Office', sans-serif;
 
    --bright-accent: 255, 215, 0;
    /* golden */
    --medium-accent: 153, 8, 26;
    /* bright red */
    --dark-accent: 69, 0, 9;
    /* dark red*/
    --newpage-color: 99, 190, 255;
 
    --swatch-text-general: var(--swatch-text-light);
    --swatch-background: var(--black-monochrome);
    --swatch-text-tertiary-color: var(--bright-accent);
    --toggle-button-bg: rgb(var(--white-monochrome));
 
    --header-height-on-desktop: 13rem;
    --topbar-height-on-desktop: 2.5rem;
 
    --gradient-topmenu: radial-gradient(circle, rgb(var(--dark-accent)) 81%, rgb(var(--dark-accent)) 100%);
    --gradient-topmenu-mobile: none;
 
    --footnotes-footer-bg-color: transparent;
    --footnotes-footer-num-color: var(--bright-accent);
 
    --hoverblock-bg: var(--black-monochrome);
 
    --link-color: var(--bright-accent);
    --visited-link-color: 255, 88, 108;
    --hover-link-color: var(--swatch-primary);
    --newpage-color: 235, 143, 52;
}
 
/* SIDEBAR STUFF */
 
#interwiki, #side-bar {
  --sidebar-bg-color: var(--dark-accent);
  --facebook-icon-color:  255, 215, 0;
  --instagram-icon-color:  255, 215, 0;
  --instagram-icon-gradient: rgb(255, 215, 0);
  --reddit-icon-color:  255, 215, 0;
  --tiktok-icon-color:  255, 215, 0;
  --twitch-icon-color:  255, 215, 0;
  --discord-icon-color:  255, 215, 0;
  --twitter-icon-color: 255, 215, 0;
  --social-icon-hover-color: var(--medium-accent);
  --sideblock-heading-text-color: var(--swatch-primary-darker);
  --sidebar-border-color: var(--bright-accent), 0.08;
  --sidebar-links-text: var(--bright-accent);
  --sidebar-links-hover-bg-color: var(--swatch-primary);
  --sidebar-links-hover-text-color: var(--dark-accent);
  --sideblock-heading-text-color: rgb(var(--bright-accent));
}
 
#side-bar .close-menu::after {
    background-color: rgb(var(--dark-accent))!important;
    border-radius: 0%;
}
 
#side-bar .close-menu::before {
    background-color: rgb(var(--bright-accent))
}
 
/* HEADER LAYERS */
 
#extra-div-1 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 13rem;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/ec/Bellagio_Fountain.jpg");
    background-size: cover;
    background-position: 50% 65%;
    background-repeat: repeat-x;
    pointer-events: none;
}
 
#extra-div-2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 13rem;
    background: linear-gradient(0deg, rgb(74, 0, 0) 0%, rgba(53, 0, 0, 0.91) 50%);
    pointer-events: none;
    opacity: 0.65;
}
 
#extra-div-3 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 13rem;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ahighroller/dicediag.png");
    background-size: cover;
    background-position: center;
    background-repeat: repeat-x;
    pointer-events: none;
    opacity: 0.8;
}
 
#header::before {
    left: 0.5rem;
    background-position: center -0.5rem;
    opacity: 1;
}
 
#header h1, #header h2 {
    margin: 1.7rem 0;
    height: 11rem;
}
 
/* TOPBAR */
 
#header div[class*="top-bar"] > ul > li > ul li > a {
    background: rgb(var(--dark-accent));
}
 
#header div[class*="top-bar"] > ul > li > ul li:is(:hover, :active, :focus-within) > a {
    color: rgb(var(--dark-accent));
}
 
#header div.mobile-top-bar {
    background: rgb(var(--dark-accent));
}
 
/* BODY */
 
#main-content {
     font-size: 120%;
}
 
#content-wrap {
    background-color: #090000;
    background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%23ff3800' fill-opacity='0.16' fill-rule='evenodd'/%3E%3C/svg%3E");
}
 
/* TABS (KILL ME) */
 
#main-content {
    --tabs-selected-txt: 70, 0, 0;
    }
 
:is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-nav li a {
    background-color: rgb(var(--dark-accent));
}
 
:is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-content {
   border: none;
   background-color: #0f0f0f;
   box-shadow: rgba(249, 9, 9, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset;
}
 
/* MODAL */
 
#odialog-container .modal-header, #odialog-container .title {
    background-color: maroon;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ahighroller/dicediag.png");
    background-size: cover;
}
 
#odialog-container div.owindow {
    background-color: #460000;
} 
 
#odialog-container .owindow :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn, #odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn {
   background-color: rgb(var(--bright-accent));
   color: rgb(var(--dark-accent));
   box-shadow: none;
}
 
#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a:is(.login-status-create-account, .login-status-sign-in):is(:hover, :active, :focus, :focus-within), #odialog-container .owindow :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:is(:hover, :active, :focus, :focus-within), #odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--medium-accent))
}
 
[id*="u-credit"] div.modalbox {
    background: #1c0000!important;
}
 
/* LOOSE DIVS */
 
.addendum {
  border: solid 2px #460000;
  background: #171717;
}
 
.dott {
    background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-4531/Department%20of%20Tactical%20Theology%20White%20Background%20Shiny%20transparent.png);
    border: 5px solid #591b1b;
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 0px 20px;
    text-shadow: 0px 1px 1px #0000003b;
    color: black;
    background-size: 75%;
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}
 
:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]) {
background-color: #0f0f0f;
box-shadow: rgba(249, 9, 9, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset;
}
 
:is(div.image-block, div.scp-image-block) *, :is(div.image-block, div.scp-image-block) img.image {
    border-radius: 10px 10px 0px 0px;
}
 
:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {
    background-color: #460000;
    color: rgb(var(--bright-accent));
    border-radius: 0px 0px 10px 10px;
}
 
.scp-image-block img {
  box-shadow: 0px 0px 10px rgba(var(--medium-accent),0.5);
}
 
#main-content hr, #page-title::after, .meta-title::after, #page-title::before, .meta-title::before {
    background-color: transparent;
    border-top: 0.15rem dotted #b00000;
    border-bottom: none;
}
 
blockquote hr, .blockquote hr{
    border-top-color: #b00000;
}
 
#page-content div.b-tables table.wiki-content-table :is(th, td), #page-content table.wiki-content-table :is(th, td) {
    border: .0625rem solid rgba(var(--bright-accent),0.2)!important;
}
 
.code, .page-source {
    border: none;
    outline: 0.15rem dotted rgba(var(--bright-accent));
    background-color: rgb(var(--dark-accent));
}
 
/* FOOTNOTES */
 
:is(.footnotes-footer, .bibitems) .bibitem::after, :is(.footnotes-footer, .bibitems) a[href*="javascript"]::before {
    background-color: transparent;
}
 
:is(.footnotes-footer, .bibitems) {
background-color: #1717177d;
box-shadow: rgba(249, 9, 9, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset;
}
 
:is(.footnotes-footer, .bibitems) .title {
display: block;
margin: auto;
background-color: #6a0000;
font-family: 'Playfair Display', serif;
color: rgb(var(--bright-accent))
}
 
/* PAGE OPTIONS */
 
div[id*="page-options-bottom"] > a::after {
    background-color: rgb(var(--bright-accent));
}
 
div[id*="page-options-bottom"] > a:is(:hover, :active, :focus, :focus-within)::after {
  background-color: rgb(var(--dark-accent));
}
 
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:is(:hover, :active, :focus, :focus-within) {
  color: rgb(var(--dark-accent));
}
 
:not(.page-rate-widget-box):not(#search-top-box-form) > .btn, :not(.page-rate-widget-box):not(#search-top-box-form) > .button, :not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button {
    background-color: #460000;
}
 
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn {
    box-shadow: none;
}
 
#action-area a[onclick*="PageRateModule"] {
    background-color: rgb(var(--dark-accent));
}
 
@supports selector(div:has(p)) {
    #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)):first-of-type {
        background-color: rgba(var(--dark-accent),0.75);
    }
}
 
form#edit-page-form .wd-editor-toolbar-panel a::before, form#edit-post-form .wd-editor-toolbar-panel a::before, form#new-post-form .wd-editor-toolbar-panel a::before, form#new-thread-form .wd-editor-toolbar-panel a::before {
    background-color: rgb(var(--bright-accent));
}
form#edit-page-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1) textarea, form#edit-post-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1) textarea, form#new-post-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1) textarea, form#new-thread-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1) textarea {
    color: white!important;
}
 
/* MOBILE HEADER */
 
@media only screen and (max-width: 900px) {
    #extra-div-3, #extra-div-2, #extra-div-1 {
        height:10rem;
    }
    #extra-div-3 {
        background-size: 170%;
     }
}

+ Show component code

- Hide component code

:root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }

+ 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: 26 Jul 2023 23:27

Edit Rate (+40) Tags Discuss (8) History Files Print Site tools + Options

SCP Foundation

Secure, Contain, Protect

Info

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.

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Source Code

Other interesting sites

Odrin Sandbox

Backrooms-G

诸界之门

新鲜地洞