Cores do Tema
Uso
Observação: Este é um tema baseado no Black Highlighter. Você precisará importar o tema Black Highlighter também a fim de usar este tema. Para aprender mais, clique aqui.
Para importar este tema, adicione isso à sua página:
[[include :scp-pt-br:theme:black-highlighter-theme]]
[[include :scp-pt-br:theme:ch-scp-theme]]
Se estiver usando o Cabeçalho Centralizado use isso em vez daquilo:
[[include :scp-pt-br:theme:black-highlighter-theme]]
[[include :scp-pt-br:theme:ch-scp-theme]]
[[include :scp-wiki:component:centered-header-bhl |ch-scp=--]]]
Exemplos
Uma linha horizontal pode ser criada com 5 hífens "-----" e se estende por toda a página se não for colocada dentro de nada (como um bloco de citação). As linhas separando as seções deste documento são linhas horizontais.
Títulos podem ser criados colocando de um a seis sinais de mais "+" no começo de cada linha
Primeiro Título
Segundo Título
Terceiro Título
Quarto Título
Quinto Título
Sexto Título
Esta é uma tab view.
Ei, olhe, mais texto aqui.
Que chique.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma aba longa. Ela tem muito texto.
Esta é uma citação, criada ao colocar "> " no começo de cada linha.
Mais texto
Isso é uma linha horizontal
Citação dentro de citação
Esta é uma | tabela |
---|---|
Você já deveria | saber como |
fazer uma |
/* Fonts */ @import url("https://use.typekit.net/rbw6esf.css"); /* All Vars Used */ @supports(display:grid) { :root:lang(pt-br) { /* 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: "A Fundação"; --header-subtitle: " "; /* Typefaces */ --header-font: great-primer-sc, 'Poppins', sans-serif; --title-font: great-primer-sc, '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(13rem + 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; } } } /* L2 has been here */ @media (max-width: 767px) { #side-bar .side-bar-container { background-color: unset !important; padding: 0 !important; } }