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.
To import this theme, add this to your page:
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:ch-scp-theme]]
If using the Centered Header please use this instead:
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:ch-scp-theme]]
[[include :scp-wiki:component:centered-header-bhl |ch-scp=--]]]
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
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 |
ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
/* Fonts */ @import url("https://use.typekit.net/rbw6esf.css"); @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); /* All Vars Used */ @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"; /* must be either "nuscp" or "sigma9" */ --theme-id: "chscp-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "BHL Chinese Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/scpchlogonotagline.png"); --header-title: "Nadace"; --header-subtitle: " "; /* Typefaces */ --header-font: 'Special Elite', 'Poppins', sans-serif; --title-font: 'Special Elite', 'Poppins', sans-serif; --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --white-monochrome: 252, 252, 252; /* white */ --pale-gray-monochrome: 234, 224, 224; /* v light gray for blockquotes and stuff */ --light-gray-monochrome: 160, 150, 150; /* light accent gray for login status */ --gray-monochrome: 72, 66, 66; /* gray */ --dark-gray-monochrome: 0, 0, 0; /* dark accent gray for sidebar background */ --black-monochrome: 0, 0, 0; /* black */ --bright-accent: 195, 7, 7; /* bright red */ --medium-accent: 171, 0, 5; /* medium red */ --dark-accent: 80, 0, 2; /* dark red */ --newpage-color: 210, 74, 32; /* pale orange */ /* Primary Theme Colors */ --swatch-background: var(--white-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-accent); /* Primary Text Colors */ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /* Primary Menu Colors */ --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); /* Primary Header Colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --swatch-topmenu-border-color: var(--black-monochrome); --swatch-topmenu-bg-color: var(--gray-monochrome); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--swatch-menutxt-dark-color); /* Header Gradients */ --gradient-header: linear-gradient(to top, rgba(var(--bright-accent), 0.97) 0%, rgb(var(--medium-accent)) 70%, rgb(var(--medium-accent)) 100%); --gradient-topmenu: linear-gradient(to bottom, white 0%, white var(--header-height-on-desktop), rgba(var(--swatch-topmenu-border-color), 0.05) var(--header-height-on-desktop), rgba(var(--swatch-topmenu-bg-color), 0.05) calc(var(--header-height-on-desktop) + 0.125rem), rgba(var(--swatch-topmenu-bg-color), 0.05) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 0.05) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-border-color), 0.05) 100%); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(208, 208, 208, 1) 0, rgba(217, 217, 217, 1) 0.125rem, rgba(217, 217, 217, 1) calc(3rem - 0.125rem), rgba(217, 217, 217, 1) calc(3rem - 0.125rem), rgba(208, 208, 208, 1) 3rem); --diagonal-stripes: initial; --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--dark-accent), 0.85) 0%, rgba(var(--bright-accent), 0.95) 100%); --gradient-background: linear-gradient(to bottom, rgba(var(--background-gradient-color), 1) calc(calc(0 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.987) calc(calc(0.8 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.951) calc(calc(2.9 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.896) calc(calc(6.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.825) calc(calc(11 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.741) calc(calc(16.6 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.648) calc(calc(23.1 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.55) calc(calc(30.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.45) calc(calc(38.3 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.352) calc(calc(46.7 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.259) calc(calc(55.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.175) calc(calc(64.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.104) calc(calc(73.5 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.049) calc(calc(82.5 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.013) calc(calc(91.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0) calc(calc(100 / 100) * var(--background-gradient-distance))); --header-background-image-size: 100% var(--header-height-on-desktop); /* Spacing Measurements */ --offset-from-page-top: 0.75rem; /* space between the top of the page and the start of the header */ --body-width-on-desktop: 44.25rem; --sidebar-width-on-desktop: calc(var(--base-font-size)*16); --sidebar-width-on-mobile: 14rem; --scrollbar-width: 0.5625rem; --border-styling: solid 0.0625rem rgb(var(--swatch-border-color)); --border-radius-width: 0.0625rem; /* Box-Shadow 1px Borders */ --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color)); --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color)); --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color)); --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color)); --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color)); /* Sidebar */ --sidebar-transition-timing: 0.5s ease-in-out 0.1s; --sidebar-internal-border-thickness: 0.125rem; --background-gradient-color: 215, 215, 215; --background-gradient-distance: 40rem; } a, a:active, a:visited { color: rgb(var(--swatch-primary-darker)); } #header { background-position: left .75rem top .65rem; background-size: auto 6.375rem; -webkit-filter: unset; filter: unset; } #header h1 a { margin-left: 7.75rem; } #header h1 a::before { text-shadow: unset; } #header h2 { background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/scpchtag.png'); background-repeat: no-repeat; background-clip: border-box; background-size: contain; top: 4.5rem; left: 8rem; height: 2rem; } #top-bar { margin: var(--header-height-on-desktop) 0 1.75rem 0; height: 1.875rem; font-size: calc(var(--base-font-size) * .75); } #top-bar div.top-bar>ul>li>a, #top-bar div.mobile-top-bar>ul>li>a { color: rgb(var(--swatch-menutxt-dark-color)) !important; font-family: var(--header-font); text-transform: uppercase; } #top-bar div.top-bar>ul>li:hover>a, #top-bar div.top-bar>ul>li:focus-within>a, #top-bar div.mobile-top-bar>ul>li:hover>a, #top-bar div.mobile-top-bar>ul>li:focus-within>a { color: rgb(var(--swatch-menutxt-light-color)) !important; } #top-bar div.top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:focus-within, #top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.mobile-top-bar>ul>li:focus-within { background-color: rgba(var(--swatch-primary-darker), 0.93); background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-blend-mode: overlay; background-size: auto 5.625rem; } #top-bar div.top-bar>ul>li>ul, #top-bar div.mobile-top-bar>ul>li>ul { margin-top: 1.875rem; background: rgba(var(--swatch-primary-darker), 0.93); background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-blend-mode: overlay; background-size: auto 5.625rem; } #top-bar div.top-bar>ul>li>a::before { height: calc(0.0625rem * 3); } #top-bar div.top-bar>ul>li>a::after { height: calc(0.0625rem * 2); } #top-bar div.top-bar>ul>li>a::before, #top-bar div.top-bar>ul>li>a::after { background-color: rgba(var(--swatch-border-color), 1); } #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a { font-weight: 600; font-size: calc(var(--base-font-size) * 0.9); } #skrollr-body::before { background-image: linear-gradient(to bottom, rgba(var(--bright-accent), 0.5) 0, rgba(var(--bright-accent), 0.25) 10rem, rgba(var(--white-monochrome), 1) 22rem, rgba(var(--white-monochrome), 1) 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center top var(--final-header-height-on-desktop); content: " "; width: 100%; height: 100%; position: absolute; pointer-events: none; z-index: -2; } #container-wrap-wrap::before { content: " "; width: 100%; height: 25%; position: absolute; top: var(--final-header-height-on-desktop); background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-blend-mode: overlay; background-size: 5.625rem; background-repeat: repeat; background-position: 0 0; pointer-events: none; z-index: -1; } div#container-wrap { background-image: unset; } div#container-wrap::before { background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png'); background-size: auto; background-repeat: repeat; background-position: 0 0; background-blend-mode: soft-light; content: " "; height: var(--final-header-height-on-desktop); width: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } #side-bar { overflow-y: auto; overflow-x: hidden; } #side-bar .close-menu::before { font-family: var(--title-font) !important; } #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded { letter-spacing: .15em; } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { font-family: var(--header-font); text-shadow: unset; } .code { font-size: calc(var(--base-font-size) * 0.8); } textarea, input { font-family: var(--body-font); } #search-top-box-form input[type="submit"] { font-size: calc(var(--base-font-size) * 0.9); } #page-title, .meta-title, .meta-title span { font-family: var(--header-font); color: rgb(255, 237, 6); } /* Sky Sermon Nav CSS */ .skysermon-nav { --text-shadow: rgba(var(--black-monochrome), 0.35); --box-shadow: rgb(var(--gray-monochrome)); --border-color: rgb(var(--newpage-color)); color: rgb(var(--white-monochrome)); text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow); border-radius: 0.0625rem; border: double 0.188rem var(--border-color); background-color: rgb(var(--bright-accent)); box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow); padding: 0 0.125rem; margin: 0.625rem 0 0.938rem; margin-bottom: 1.250rem; } .skysermon-nav a { color: rgb(255, 237, 6); display: inline-block; position: relative; width: 100%; height: 100%; padding-top: 0.45em; padding-bottom: 0.35em; } .skysermon-nav a::before { display: flex; position: absolute; align-items: center; height: 100%; font-size: calc(var(--base-font-size) * 1.1); line-height: calc(var(--base-font-size) * 0.7); font-weight: 800; top: 0; } .skysermon-nav .footer-wikiwalk-nav { display: flex; align-items: center; justify-content: center; font-weight: 400; letter-spacing: 0.025em; font-size: 75%; } .skysermon-nav .footer-wikiwalk-nav * { line-height: 1em; } .skysermon-nav .footer-wikiwalk-nav .center { flex-basis: 8em; text-align: center; } .skysermon-nav .footer-wikiwalk-nav .left, .skysermon-nav .footer-wikiwalk-nav .right { flex-basis: calc(50% - 5em); display: inline-flex; align-items: center; font-size: calc(var(--base-font-size) * 0.8); position: relative; } .skysermon-nav .footer-wikiwalk-nav .left { text-align: right; justify-content: flex-end; border-right: 0.0625rem solid rgb(var(--black-monochrome)); padding-left: 1em; padding-right: 0.5em; margin: 0.35em 0 0.35em 0.35em; } .skysermon-nav .left>a::before { content: "«"; left: -0.75em; transition: left 1s ease-in-out; -webkit-animation: bounce-left 1.7s infinite; animation: bounce-left 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .skysermon-nav .left>a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } .skysermon-nav .footer-wikiwalk-nav .right { text-align: left; justify-content: flex-start; border-left: 0.0625rem solid rgb(var(--black-monochrome)); padding-left: 0.5em; padding-right: 1em; margin: 0.35em 0.35em 0.35em 0; } .skysermon-nav .right>a::before { content: "»"; right: -0.75em; transition: left 1s ease-in-out; -webkit-animation: bounce-right 1.7s infinite; animation: bounce-right 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .skysermon-nav .right>a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } /* Rating Box */ .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { font-weight: 400; } @media only screen and (max-width: 56.25rem) { #header h1 { font-size: calc(var(--base-font-size) * 1.25); } #header h1 a { margin-top: calc(0.8rem + var(--offset-from-page-top)); } #header h2 { height: 1.15rem; } #side-bar { left: calc(-17rem - var(--scrollbar-width)); } #side-bar:target { overflow-x: hidden; } #top-bar>div.mobile-top-bar>div.open-menu>p>a { color: rgb(var(--swatch-menutxt-dark-color)) !important; } #skrollr-body:target #side-bar { left: 0; } #side-bar:target .close-menu { margin-left: calc(15.5rem + 2 * var(--scrollbar-width) + 0.125rem); } #skrollr-body:target #container { transform: none; } #skrollr-body:target #container-wrap-wrap { overflow: hidden; } #top-bar div.top-bar>ul>li>ul, #top-bar div.mobile-top-bar>ul>li>ul { transform: translate(-50%, 0); display: flex; } #top-bar div.mobile-top-bar>ul>li>ul>li { max-height: calc(99vh / 15); max-width: calc(98vw + 1px); display: flex; width: calc(98vw + 1px); flex-grow: 2; flex-basis: calc(98vw / 2); } #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a { height: 100%; width: 100%; line-height: 1em; display: flex; align-items: center; justify-content: center; font-size: calc(var(--base-font-size) * 0.8); } #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(1)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(11)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(21)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(31)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(41)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(51)>a::before { display: flex; align-items: center; justify-content: center; } } @-webkit-keyframes bounce-left { 0% { left: -0.75em; } 50% { left: -0.50rem; } 100% { left: -0.75em; } } @keyframes bounce-left { 0% { left: -0.75em; } 50% { left: -0.50rem; } 100% { left: -0.75em; } } @-webkit-keyframes bounce-right { 0% { right: -0.75em; } 50% { right: -0.50rem; } 100% { right: -0.75em; } } @keyframes bounce-right { 0% { right: -0.75em; } 50% { right: -0.50rem; } 100% { right: -0.75em; } } }