Theme Colors
Usage
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:crocker-theme]]
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
First Title
Second Title
Third Title
Fourth Title
Fifth Title
Sixth Title
This is a tab view.
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.
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
The body and header font is Source Sans Pro. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The Title font is Merriweather. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The Title font is Merriweather. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The monospace font is Roboto Mono. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
@importurl("https://use.typekit.net/tax7dna.css"); @supports(display: grid) { :root:lang(cs) { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "black-highlighte"; /*mustbeeither "nuscp" or "sigma9" */ --theme-id: "crocker-theme"; /*setthistotheURLofyourtheme'spage - egfor "component:ar-theme", set it to "ar-theme" */ --theme-name: "Crocker Theme"; /*setthistoyourtheme'sfullname*/ /*Header*/ --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acrocker-theme/crocker_logo.png"); --header-title: "Oblast-81"; --header-subtitle: "Komunitní Kuchařka"; /*Typefaces*/ --body-font: garamond-premier-pro, serif; --header-font: aragon, sans-serif; --title-font: hwt-van-lanen, sans-serif; /*StandardColors*/ --white-monochrome:249, 247, 236; /*off-bluewhite*/ --pale-gray-monochrome:243, 240, 218; /*vlightblueforblockquotesandstuff*/ --light-gray-monochrome:213, 194, 96; /*lightaccentblueforloginstatus*/ --gray-monochrome:206, 157, 144; /*blue*/ --dark-gray-monochrome:162, 149, 85; /*deepblue*/ --black-monochrome:39, 37, 32; /*off-blueblack*/ --bright-accent:239, 109, 138; /*brightyellow*/ --medium-accent:188, 67, 69; /*mediumred*/ --dark-accent:129, 24, 21; /*deepred*/ --newpage-color: var(--bright-accent); /*paleorange*/ /*PrimaryThemeColors*/ --swatch-background: var(--white-monochrome); --background-gradient-color: var(--gray-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-accent); /*PrimaryTextColors*/ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /*PrimaryMenuColors*/ --swatch-menubg-color: var(--white-monochrome); --swatch-menubg-light-color: var(--pale-gray-monochrome); --swatch-menubg-medium-color: var(--light-gray-monochrome); --swatch-menubg-medium-dark-color: var(--gray-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--black-monochrome); --swatch-menutxt-dark-color: var(--black-monochrome); --swatch-menutxt-light-color: var(--white-monochrome); --swatch-border-color: var(--black-monochrome); /*PrimaryHeaderColors*/ --header-gradient-color-bottom: var(--bright-accent); --header-gradient-color-middle: var(--medium-accent); --header-gradient-color-top: var(--medium-accent); --swatch-headerh1-color: var(--dark-accent); --swatch-headerh2-color: var(--black-monochrome); --swatch-topmenu-border-color: var(--black-monochrome); --swatch-topmenu-bg-color: var(--pale-gray-monochrome); --link-color: var(--dark-accent); --visited-link-color: var(--medium-accent); --hover-link-color: var(--medium-accent); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--swatch-menutxt-dark-color); /*HeaderGradients*/ --gradient-header: linear-gradient(35deg, rgb(var(--header-gradient-color-bottom)) 0, rgb(var(--header-gradient-color-middle)) 90%, rgb(var(--header-gradient-color-top)) 100%); --diagonal-stripes:inherit; /*headermeasurements*/ --header-height-on-desktop:12.25rem; --header-height-on-mobile:12.25rem; --topbar-height-on-desktop:1.875rem; --topbar-height-on-mobile:2.5rem; --base-font-size:1rem; --sidebar-width-on-desktop: calc(var(--base-font-size) * 16); } ::-webkit-scrollbar, #side-bar:hover::-webkit-scrollbar{background-color: rgba(var(--pale-gray-monochrome), 1); } ::-webkit-scrollbar-thumb, #side-bar:hover::-webkit-scrollbar-thumb{background-color: rgba(var(--dark-gray-monochrome), 1); } ::-moz-selection{background: rgba(var(--bright-accent), 0.5); } ::selection{background: rgba(var(--bright-accent), 0.5); }html{background:white; }#extra-div-1{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:crocker-theme/crocker-header-bg.png"); }html, body{font-feature-settings: "onum"0; font-variant-numeric: tabular-nums; scrollbar-color: rgb(var(--dark-gray-monochrome)) rgb(var(--pale-gray-monochrome)); }#page-contentspan>a:not([onclick*="Reference"]), #page-contentdiv:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]) {transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow:inset0000.01px rgba(var(--light-gray-monochrome), 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }#search-top-box::before{background-color: rgb(var(--swatch-primary-darkest)); }#search-top-box-input{background-color: rgb(var(--pale-gray-monochrome)); }#login-status{color: rgb(var(--dark-accent)); }#login-statusa{color: rgb(var(--swatch-text-dark)) !important; }#search-top-boxinput.empty{color: rgb(var(--dark-accent)); }#main-content{margin-top:2.1em; }#page-contentspan>a:not([onclick*="Reference"]):hover, #page-contentdiv:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):hover, #page-contentspan>a:not([onclick*="Reference"]):active, #page-contentdiv:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):active{transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow:inset100vw 000 rgba(var(--light-gray-monochrome), 0.75); text-decoration:none; }#page-contentspan>a:not([onclick*="Reference"]):focus-within, #page-contentdiv:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):focus-within{transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow:inset100vw 000 rgba(var(--light-gray-monochrome), 0.75); text-decoration:none; }hr{background: rgb(0, 0, 0, 0); border:0; height:0em; width:90%; position:relative; margin:1.875rem auto2.175rem; }#page-title::after, hr::after{content: " "; height:0.35rem; width:100%; position:absolute; margin:0auto; background: rgb(var(--white-monochrome)); border-top:0.125rem dashed rgb(var(--gray-monochrome)); border-bottom:0.125rem dashed rgb(var(--gray-monochrome)); left:0; top:50%; box-sizing: border-box; }#header{ --swatch-headerh2-color: var(--swatch-primary); -webkit-filter: initial; filter: initial; }#headerh1, #headerh1a, #headerh2, #headerh2span{display: flex; align-items:center; }#headerh1a{margin-left:12rem; margin-top: -1em; position:relative; width:auto; display: flex; align-items:center; justify-content:center; top:0; }#headerh1a::before{ --text-shadow: rgb(var(--swatch-text-light)); font-size: clamp(3rem, 24vw, 7rem); color: rgb(var(--dark-accent)); }#headerh2, #headerh2span{margin-left:6.5rem; height: var(--header-height-on-desktop); justify-content: flex-start; font-family: var(--title-font); margin-top:2.25rem; }#headerh2span{line-height:1.15; font-size:1.1rem; margin-top:0rem; }#headerh2span::before{ --wght:600; font-weight:600; text-shadow:0.125rem 0.125rem 0 rgb(var(--white-monochrome)); }#login-statusspan.printuser{color: rgb(var(--swatch-text-tertiary-color)); }#top-bar{ --wght:900; font-size: var(--base-font-size); font-weight:900; }#side-bar:hover{background: rgb(var(--white-monochrome)); }#top-bardiv[class*="top-bar"]>ul>li:hover{background-color: rgb(var(--gray-monochrome)); }#top-bardiv[class*="top-bar"]>ul>li>a{color: rgb(var(--swatch-menutxt-dark-color)) !important; }#top-bardiv[class*="top-bar"]>ul>li>a::before, #top-bardiv[class*="top-bar"]>ul>li>a::after{background-color: rgb(var(--dark-accent)); }#top-bardiv[class*="top-bar"]>ul>li:hover>a, #top-bardiv[class*="top-bar"]>ul>li:hover>a{color: rgb(var(--white-monochrome)) !important; }#top-bardiv[class*="top-bar"]>ul>li>ul{background-color: rgb(var(--dark-gray-monochrome)); background-image: var(--gradient-header); box-shadow:inherit; }#top-bardiv[class*="top-bar"]>ul>li>ul, #top-bardiv[class*="top-bar"]>ul>li>ul>li{border-color: rgb(var(--light-gray-monochrome)); }#top-bardiv[class*="top-bar"]>ul>li>ul>li>a{ --wght:600; font-weight:600; }#top-bardiv[class*="top-bar"]>ul>li>ul>li>a::before, #top-bardiv[class*="top-bar"]>ul>li>ul>li>ul>li>a::before, #top-bardiv[class*="top-bar"]>ul>li>ul>li>a:hover::before{background-color: rgb(var(--dark-accent)); }#side-bar:hover{background: rgb(var(--white-monochrome)); }#side-bar.heading, #side-bar.side-block>.collapsible-block:nth-child(1) .collapsible-block-folded{background: rgba(var(--pale-gray-monochrome), 0.5); font-family: var(--title-font); min-height:1.5rem; }#side-bar.headingp, #side-bar.side-block>.collapsible-block.collapsible-block-link{ --wght:900; text-shadow:inherit; color: rgb(var(--dark-gray-monochrome)); font-weight:900; letter-spacing:0.15em; font-size: calc(var(--base-font-size) * 0.95); height:1.5rem; display: flex; align-items:center; justify-content:center; }#side-bardiv.menu-item.sub-text{color: rgb(var(--medium-accent)); }#page-title{font-family: var(--title-font); position:relative; border:0px; text-align:center; }#page-title:before{top: calc(100% - 0.75rem); }#page-title:after{left:50%; transform: translateX(-50%); top: calc(100%); max-width:43.375rem; }#content-wraph1, #content-wraph2, #content-wraph3, #content-wraph4, #content-wraph5, #content-wrap#page-title{ --wght:700; line-height:1.25; font-weight:700; }#content-wraph1, #content-wrap#page-title{font-size:2.45rem; }#content-wraph2{font-size:1.7rem; }#content-wraph3{font-size:1.25rem; }#content-wraph4{font-size:1rem; }#content-wraph5{font-size:.9rem; }#content-wrap*>#page-title, #content-wrap*>h1:first-of-type, #content-wrap*>h2:first-of-type, #content-wrap*>h3:first-of-type, #content-wrap*>h4:first-of-type, #content-wrap*>h5:first-of-type, #content-wrap*>h6:first-of-type{margin-bottom:0; margin-top:0; }#content-wrap*+h1, #content-wrap*+h2, #content-wrap*+h3, #content-wrap*+h4, #content-wrap*+h5, #content-wrap*+h6{margin-top:1.5em; }#content-wrap#page-title+*, #content-wraph1+*, #content-wraph2+*, #content-wraph3+*, #content-wraph4+*, #content-wraph5+*, #content-wraph6+*{margin-top:1em; }#content-wrapp+*{margin-top:1em; }#page-contentol:not([class*="yui-nav"]), #page-contentul:not([class*="yui-nav"]) {margin-bottom:1em; margin-top:1em; line-height:1.5; padding-left:3ch; }#page-contentol:not([class*="yui-nav"]) {counter-reset: crocker-counter; list-style:none; }#page-contentul:not([class*="yui-nav"]) {list-style:none; text-indent: -1em; }#page-contentol:not([class*="yui-nav"]) li, #page-contentul:not([class*="yui-nav"]) li{margin-bottom:.25em; max-width:100ex; }#page-contentol:not([class*="yui-nav"]) li{counter-increment: crocker-counter; position:relative; text-indent: -1rem; line-height:1.5rem; padding-bottom:0.5rem; }#page-contentul:not([class*="yui-nav"]) li::before, #page-contentol:not([class*="yui-nav"]) li::before{color: rgb(var(--medium-accent)) }#page-contentul:not([class*="yui-nav"]) li::before{font-family: var(--header-font); font-size:1.25rem; content: "\2767"; margin-right:0.25rem; }#page-contentol:not([class*="yui-nav"]) li::before{content: counter(crocker-counter) ". "; font-family: var(--header-font); font-size:1.25rem; }#content-wraptable{font-size:1rem; line-height:1.5; border-spacing:0; margin:1.25rem auto !important; border-collapse:collapse !important; }#content-wraptabletd, #content-wraptableth, #content-wraptd, #content-wrapth{ --wght:400; border:1pxsolid rgb(var(--gray-monochrome)); background-color: rgb(var(--white-monochrome)); font-weight:400; padding:.25rem 0.5rem !important; justify-content:center; grid-auto-flow: column; align-items:center; }#content-wraptheadtd, #content-wraptheadth, #content-wrapth{ --wght:700; background-color: rgb(var(--pale-gray-monochrome)) !important; color: rgb(var(--dark-gray-monochrome)); font-weight:700 !important; }#content-wraptabletheadth, #content-wraptheadth{ --wght:700; font-weight:700; }#content-wraptableth, #content-wrapth{text-align:left; }#content-wraptheadtd, #content-wraptheadth, #content-wrapth{text-shadow:none; color: rgb(var(--swatch-primary-darkest)); }.footnotes-footer, .code{background-image: linear-gradient(90deg, transparent2.35em, rgb(171, 206, 212) 2.35em, rgb(171, 206, 212) 2.5em, transparent2.5em), linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1em, transparent.1625em); background-position:1em0.75em; background-size:100%1.8em; font-size:0.9em; font-family: var(--mono-font); }.codepre{white-space:pre; white-space:normal; width:100%; overflow:hidden; }.code>*, .footnotes-footer>*{ --wght:400; padding:0003em; font-weight:400; letter-spacing:0.05em; outline:none; }.code>*{line-height:1.75; }.footnotes-footer>*{line-height:2; }.footnotes-footer.title{ --wght:900; font-family: var(--title-font); margin: -0.75em00.75em0; }.footnotes-footer.footnote-footer{width:90%; margin:0004ch !important; }.footnotes-footera[href*="javascript"]::before, .bibitems.bibitem::after{right: -50%; background-color: rgb(var(--swatch-primary-darkest)); color: rgb(var(--swatch-text-secondary-color)); padding:00.25em00.5em; border-radius:50%; font-size:0.9em; }.footnotes-footerdiv.footnote-footer:not([id*="footnote-1"]) {margin-top: -0.1em !important; }.footnotes-footer.footnote-footer>a:nth-of-type(1) {margin-left:0; }.scp-image-block{box-shadow: initial; -webkit-box-shadow: initial; }@mediaonlyscreenand (max-width: 56.25rem) {#header{background-position:left.5rem top2rem; background-size:auto8.375rem; }#headerh1a{margin-left:7rem; margin-top: -2.5rem; }#headerh2{width: calc(100% - 9.5rem); height: calc(100% - 7.5rem); margin-left:8.35rem; margin-top:8rem; text-align:left; }#headerh2span{width:90vw; height:100%; margin:0; display: flex; position:relative; align-items:center; justify-content:center; }#headerh2span::before { position: absolute; top:0; left:0; width:90%; margin:0; }#top-bar{font-size: calc(var(--base-font-size) * 0.8); }#top-bar>div.mobile-top-bar>div.open-menu{font-size: calc(var(--base-font-size) * 0.65); }#top-bar>div.mobile-top-bar>div.open-menu>p>a{color: rgb(var(--swatch-menutxt-dark-color)) !important; }#top-bardiv.mobile-top-bar>ul>li>a{letter-spacing:0; }#top-bar>div.top-bar>ul>li:last-of-type>ul, #top-bar>div.mobile-top-bar>ul>li:last-of-type>ul{left:50%; }#side-bar:target.close-menu{width: calc(100% - 15em - var(--scrollbar-width)); }.footnotes-footer, .code{background-image: linear-gradient(90deg, transparent1.35rem, rgb(171, 206, 212) 1.35rem, rgb(171, 206, 212) 1.5rem, transparent1.5rem), linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent.1625rem); background-position:1rem 0.45rem; background-size:100%1.25rem; font-size:0.7rem; font-family: var(--mono-font); }.code>*, .footnotes-footer>*{line-height:1.85; padding-left:2.5rem; }.footnotes-footer.title{padding-left:2.5rem !important; }#content-wraph1, #content-wrap#page-title{font-size:1.9rem; }#content-wraph2{font-size:1.5rem; }#content-wraph3{font-size:1.1rem; }#content-wraph4{font-size:0.9rem; }#content-wraph5{font-size:.8rem; } } }