警告！
此页为PEB管制局内部所用，未经许可切勿修改
这是为PEB管制局做的主题。
当网站将其主题改为SIGMA-9，此主题即可生效
:root {
/* S-CSS-P Integration */
/* If you're making a new CSS theme, please include the following three variables at minimum. */
—theme-base: "black-highlighter";
/* must be either "black-highlighter" or "sigma9" */
—theme-id: "minimalist-bhl";
/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
—theme-name: "Minimalist BHL";
/* set this to your theme's full name */
header-title: "SCP FOUNDATION";
—header-subtitle: "SECURE - CONTAIN - PROTECT";
—logo-image: url('http://scpsandboxomega.wdfiles.com/local--files/reu-theme/reu-logo-new');
—lgurl: var(logo-image);
bright-accent: 32, 32, 32;
—dark-accent: 255, 255, 255;
—swatch-primary: var(dark-accent);
light-gray-monochrome: 196, 196, 196;
—dark-gray-monochrome: 200, 200, 200;
—medium-accent: var(dark-accent);
tab-border-color: var(bright-accent);
hover-link-color: var(dark-accent);
rating-module-button-color: var(dark-accent);
rating-module-button-credit-color: var(dark-accent);
swatch-background: var(bright-accent);
/* Background and Header Colors */
background-color: var(bright-accent);
/* Primary Text Colors */
swatch-text-light: var(dark-accent);
swatch-text-general: var(dark-accent);
/* Primary Menu Colors */
swatch-menubg-color: var(bright-accent);
/* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
swatch-secondary-color: var(swatch-menubg-dark-color);
swatch-tertiary-color: var(dark-accent);
/* Primary Header Colors */
gradient-header: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(245,245,245,1) 100%);
—swatch-topmenu-border-color: var(dark-accent);
swatch-topmenu-bg-color: var(bright-accent);
background-gradient-distance: 0rem;
—modal-bg: var(bright-accent);
rating-module-text-color: var(dark-accent);
rating-module-button-cancel-color: var(gray-monochrome);
—diagonal-stripes: none;
toggle-button-bg: rgb(var(bright-accent));
toggle-border-color: rgb(var(dark-accent));
toggle-icon-color: rgb(var(dark-accent));
}
:root:lang(cn) {
—header-title: "PEB 管制局";
—header-subtitle: " 现象 - 事件 - 生物";
}
/* Header Stuff, changes the background logo, makes the top bar dark and spooky too! */
#header::before {
background-image: var(—lgurl);
opacity: 0.20;
}
#header div[class*=top-bar]>ul li:hover {
background-color: rgba(var(—bright-accent));
}
#header div[class*=top-bar]>ul>li ul>li {
box-shadow: inset 0 0 0 .0625rem rgb(var(dark-accent));
background-color: rgb(var(dark-accent));
color: rgb(var(—bright-accent));
}
#header div[class*=top-bar]>ul>li>a {
color: rgb(var(—bright-accent));
}
#header div#top-bar {
background-color: inherit;
}
#header div[class*=top-bar]>ul>li>a:after,
#header div[class*=top-bar]>ul>li>a:before {
background-color: rgba(var(—dark-accent));
}
#header div[class*=top-bar]>ul>li:hover>a {
background-color: rgb(var(bright-accent));
color: rgb(var(dark-accent));
}
#header h1 a::before {
-webkit-text-stroke: 0.325rem rgb(var(—bright-accent));
}
#header h2 span::before {
-webkit-text-stroke: 0.25rem rgb(var(—bright-accent));
}
#header h2 span::after {
color: rgb(var(—dark-accent));
}
#header {
login-myaccount-hover-color: var(bright-accent);
}
#header {
login-dropdown-text-color: var(dark-accent);
}
/* This is purely just for the Top Bar, especially the hover elements and whatnot */
#top-bar div.mobile-top-bar>ul>li>ul>li:hover>a,
#top-bar div.top-bar>ul>li>ul>li:hover>a {
text-decoration: none;
color: rgb(var(—dark-accent));
}
#top-bar div.mobile-top-bar {
background: rgb(var(—dark-accent));
}
#top-bar div.top-bar>ul>li:hover {
background: rgb(var(—dark-accent));
}
#top-bar div.mobile-top-bar>ul>li.sfhover>ul,
#top-bar div.mobile-top-bar>ul>li:hover>ul,
#top-bar div.top-bar>ul>li.sfhover>ul,
#top-bar div.top-bar>ul>li:hover>ul {
color: rgb(var(—bright-accent));
}
/* Everything below here is for the Sidebar, including the hover elements and the headings too */
#side-bar .side-block {
background-color: rgb(var(—bright-accent));
}
#side-bar .side-block.resources {
background: rgb(var(—bright-accent)) !important;
}
#side-bar .side-block.media {
background-color: rgba(var(—dark-accent)) !important;
}
#side-bar div.menu-item>a {
color: rgb(var(—dark-accent));
transition:
color 300ms cubic-bezier(.4, 0, .2, 1),
background-color 300ms cubic-bezier(.4, 0, .2, 1);
}
#side-bar div.menu-item>a:visited {
color: rgb(var(—dark-accent));
}
#side-bar div.menu-item>a:hover,
#side-bar div.menu-item>a:active {
color: rgb(var(—bright-accent));
}
#side-bar div.menu-item>a:focus-within {
color: rgb(var(—bright-accent));
}
#side-bar div.menu-item a::before {
background-color: rgb(var(dark-accent));
color: rgb(var(bright-accent));
}
.side-block.media a {
background: transparent;
}
#side-bar .collapsible-block .collapsible-block-folded,
#side-bar .heading {
background: rgb(var(—dark-accent));
}
/* Throwing this quick fix for the search bar up here as well, just so everything fits */
#search-top-box-input {
background-color: rgb(var(bright-accent));
color: rgb(var(dark-accent));
}
#search-top-box-form input[type="submit"] {
background: rgb(var(bright-accent));
color: rgb(var(dark-accent));
}
#search-top-box-form input[type="submit"]:hover {
background: rgb(var(bright-accent));
color: rgb(var(dark-accent));
}
#search-top-box-input {
background-color: rgb(var(bright-accent));
color: rgb(var(dark-accent));
}
#search-top-box input.empty {
color: rgb(var(—dark-accent));
}
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
background-color: rgba(var(—dark-accent));
}
@media only screen and (max-width: 56.25rem) {
#login-status:before {
background-color: rgba(var(—dark-accent));
}
}
@media only screen and (min-width: 56.25rem) {
#search-top-box-form>input {
box-shadow: none;
}
}
@media only screen and (min-width: 56.25rem) {
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:focus,
#search-top-box-form input[type="submit"]:hover {
border-left: none;
border-top: 0.0125rem solid rgb(var(dark-accent));
border-right: 0.0125rem solid rgb(var(dark-accent));
border-bottom: 0.0125rem solid rgb(var(—dark-accent));
box-shadow: none;
}
}
: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: rgb(var(dark-accent));
color: rgb(var(bright-accent));
}
/* Since we're also up here, here's the code to mess with the account options too (and one fix for the printusers) */
#login-status .printuser {
background: transparent;
color: rgb(var(—dark-accent));
}
#login-status #my-account {
color: rgb(var(—dark-accent));
}
#account-options {
width: auto;
padding: 0.5em;
border-color: rgba(var(dark-accent));
background: rgb(var(bright-accent));
color: rgb(var(—dark-accent));
}
.printuser a {
margin-right: -1px;
font-size: 14px;
background-color: transparent;
color: inherit;
}
login-status span.printuser {
color: rgb(var(—dark-accent));
}
/* Okay, now for the links and the body */
body {
color: rgb(var(—dark-accent));
}
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info) {
padding: 0.15em;
margin: -0.15em;
color: inherit;
box-decoration-break: clone;
box-shadow: inset 0 -0.125rem 0 0rem rgba(var(—dark-accent));
transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):hover {
padding: 0.3em 0.25em 0.2em 0.25em;
margin: -0.25em;
box-shadow: inset 0 -1.5em 0 0 rgba(var(dark-accent));
text-decoration: none;
color: rgb(var(bright-accent))
}
::selection {
background: rgb(148, 148, 148);
}
a {
color: inherit;
}
a:hover {
color: inherit;
}
a.close-menu {
background-color: transparent;
}
a:visited {
color: inherit;
}
.scp-image-block a {
box-shadow:none;
}
hr {
border-top: none;
background-color: rgb(var(—dark-accent));
}
blockquote,
div.blockquote {
border: 1px solid #242424;
background-color: rgb(var(—bright-accent));
}
/* Fancy Collapsibles */
#page-content .collapsible-block-link {
text-decoration: none;
font-weight: 700;
}
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-right: auto;
margin-left: auto;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
width: min-content;
white-space: nowrap;
overflow: hidden;
}
#page-content .collapsible-block-folded a,
#page-content .collapsible-block-unfolded-link a {
position: relative;
top: 0;
left: 0;
width: min-content;
height: 100%;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
transition:
color 0.25s linear,
background-color 0.25s linear;
}
#page-content .collapsible-block-folded a {
background-color: rgb(var(dark-accent));
color: rgb(var(bright-accent));
}
#page-content .collapsible-block-unfolded-link a {
background-color: rgb(var(bright-accent));
color: rgb(var(dark-accent));
}
#page-content .collapsible-block-folded a:hover,
#page-content .collapsible-block-unfolded-link a:hover {
background-color: rgb(var(bright-accent));
color: rgb(var(dark-accent));
}
#page-content .collapsible-block-unfolded-link {
box-shadow: none;
}
/* Code for changing button colors */
div#page-options-bottom-2>a,
div#page-options-bottom>a {
color: rgb(var(dark-accent));
border-color: rgb(var(dark-accent));
background-color: rgb(var(—bright-accent));
}
.owindow .button-bar a,
a.button,
button,
div.buttons input,
file,
input.button {
border: 0.125rem solid rgba(var(dark-accent));
color: rgb(var(dark-accent));
background-color: rgb(var(—bright-accent));
}
.owindow .button-bar a:hover,
a.button:hover,
button:hover,
div.buttons input:hover,
file:hover,
input.button:hover {
border: .125rem solid rgba(var(bright-accent));
background-color: rgba(var(dark-accent));
color: rgb(var(—bright-accent));
}
div#page-options-bottom-2>a:hover,
div#page-options-bottom>a:hover {
color: rgb(var(bright-accent));
border-color: rgb(var(dark-accent));
background-color: rgb(var(—dark-accent));
}
/* All Rating Module Code is below this line! */
.modalbox {
box-shadow: none !important;
border-color: transparent !important;
border-radius: 0px !important;
padding: 4px;
pointer-events: auto !important;
}
.creditButton p a {
background-color: rgb(var(—black-accent));
}
#page-content .rate-box-with-credit-button {
display: inline-flex;
margin-bottom: .75rem;
border: .0625rem solid rgba(12, 12, 12, .25);
border: .0625rem solid rgba(var(gray-monochrome));
border-radius: 0;
background: rgb(var(bright-accent));
background-color: #fcfcfc;
background-color: rgb(var(bright-accent));
padding: 0 .125rem;
height: var(rating-module-height);
overflow: hidden;
}
.page-rate-widget-box {
background: rgb(var(bright-accent));
border: 0.0625rem solid rgba(var(dark-accent));
}
/* Tabs */
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
box-shadow: none;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
box-shadow: none;
border-color: rgb(var(—bright-accent));
}
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {
background-color: rgb(var(bright-accent));
color: rgb(var(bright-accent));
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
color: rgb(var(—bright-accent));
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
color: rgb(var(dark-accent));
background: rgb(var(bright-accent));
border: 1px solid rgb(var(—dark-accent));
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
background: rgb(var(—bright-accent));
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
border-color: rgb(var(dark-accent));
background-color: rgb(var(dark-accent));
color: rgb(var(—bright-accent));
}
.yui-navset-bottom .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset .yui-nav li a {
color: rgb(var(dark-accent));
background: rgb(var(bright-accent));
}
/* Simple Tables */
table.wiki-content-table td {
border: 1px solid #888;
padding: 0.3em 0.7em;
color: rgb(var(—dark-accent));
}
table.wiki-content-table th {
background: rgb(var(dark-accent));
border: 1px solid rgb(var(dark-accent));
color: rgb(var(—bright-accent));
}
table.wiki-content-table tr {
border: 1px solid #e3e3e3;
color: #e3e3e3;
}
/* Image Blocks */
.scp-image-block {
box-shadow: none;
}
.scp-image-block a {
background-color: transparent;
}
.scp-image-block .scp-image-caption {
background-color: rgb(var(dark-accent));
color: rgb(var(bright-accent));
}
/* Footer and Hovertips */
.footnote {
color: rgb(var(dark-accent));
background-color: rgb(var(bright-accent));
border: 1px solid #242424;
padding: .625em;
}
.footnotes-footer {
background-color: rgba(var(bright-accent));
color: rgb(var(dark-accent));
border-top: 1px solid #242424;
border-bottom: 1px solid #242424;
border-right: 1px solid #242424;
}
.footnotes-footer a[href*=javascript]:before {
color: rgb(var(—dark-accent));
background-color: transparent;
}
.hovertip {
background-color: rgb(var(bright-accent));
border: .0625rem solid rgb(var(dark-gray-monochrome));
color: rgb(var(—dark-accent));
}
.hovertip .content {
background-color: rgb(var(—bright-accent));
}
#footer {
background: rgb(var(dark-accent));
color: rgb(var(bright-accent));
}
/* Michellaneous */
textarea, #lock-info {
color: rgb(var(—dark-accent));
}
.owindow .modal-body img {
background-color: transparent !important;
}
.licensebox .collapsible-block-link {
background: none;
}
.printuser img.small {
vertical-align: -0.4em;
width: 20px;
height: 20px;
}
#who-rated-page-area .printuser a {
font-size: 100%;
}
#license-area {
color: rgb(var(dark-accent));
background-color: rgb(var(bright-accent));
}
.printuser a {
margin-right: -1px;
font-size: 14px;
background-color: transparent;
color: inherit;
}
.printuser img.small {
vertical-align: -0.4em;
width: 19px;
height: 18.5px;
}
.printuser:hover {
background-color: transparent;
}
.page-tags a {
background-color: transparent;
color: rgb(var(—dark-accent));
}
.page-tags a:hover {
color: rgb(var(—bright-accent));
}
form#edit-page-form {
background-color: rgba(var(dark-accent));
color: rgb(var(bright-accent));
}
input#edit-page-title {
color: rgb(var(—dark-accent));
}
form#edit-page-form .edit-help-34>a {
color: rgb(var(—dark-accent));
}
.danger-diamond a, .danger-diamond a:hover {
color: rgba(0, 0, 0, 0) !important;
box-shadow: initial !important;
}
@media (min-width: 36rem) {
#login-status:not(:focus-within) {
color: rgb(var(—dark-accent));
}
}
@media (min-width: 36rem) {
#login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
color: rgb(var(—dark-accent));
}
}
@media (min-width: 36rem) {
#login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before {
background-color: rgb(var(—dark-accent));
}
}
@media (min-width: 36rem) {
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
background-color: rgb(var(dark-accent));
color: rgba(var(bright-accent));
}
}
@media only screen and (min-width: 56.25rem) {
#search-top-box-form>input,
#search-top-box-form>input:hover,
#search-top-box-form>input:focus {
background: rgb(var(—light-accent));
}
}
@media (min-width: 0rem) {
#page-content .rate-box-with-credit-button>.creditButton>p>a:before {
left: 4px;
}
}
@media only screen and (max-width: 56.25rem) {
#header h2,
#header h2 a,
#header h2 a::before {
top: 0.45rem;
}
}
[[/code]]
:root { --bright-accent: 245, 245, 245; --medium-accent: var(--dark-accent); --dark-accent: 36, 36, 36; --swatch-primary: var(--dark-accent); } ::selection { background: rgb(148, 148, 148); } .side-block { background-color: rgb(var(--bright-accent)); } .side-block .heading { background: rgb(var(--dark-accent)); } .side-block div.menu-item a { color: rgb(var(--dark-accent)); transition: color 300ms cubic-bezier(.4, 0, .2, 1), background-color 300ms cubic-bezier(.4, 0, .2, 1); } .side-block div.menu-item>a:hover, .side-block div.menu-item>a:active, .side-block div.menu-item>a:focus-within { color: rgb(var(--bright-accent)); } .side-block div.menu-item a::before { background-color: rgb(var(--dark-accent)); color: rgb(var(--bright-accent)); } [[/module]] [[iftags +component]] [[=]] [[module Rate]] [[/=]] [[module css]] @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css"); @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css"); h1, h2 { text-align: center; } [[/module]] + What this does ++ Rearranges the header so that the titles and logos are centered [[=]] * Does NOT work on Sigma-9. This ONLY functions with [http://scp-wiki.wikidot.com/theme:black-highlighter-theme Black Highlighter.] * Highly suggest using with either [http://www.scpwiki.com/component:collapsible-sidebar Collapsible Sidebar] or [http://www.scpwiki.com/component:toggle-sidebar-bhl Toggle Sidebar] [[/=]] ------ + How to use ++ 1. Copy code below. ++ 2. Paste in article **after** Black Highlighter and any other Theme include. > {{[[include :scp-wiki:component:centered-header-bhl]]}} ------ [[collapsible show="+ Show component code" hide="- Hide component code"]] [[code type="CSS"]] :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; } [[/code]] [[/collapsible]] [[/iftags]] [[module css]] @import url("https://scp-wiki.wdfiles.com/local--code/component%3Acentered-header-bhl/1") [[/module]] [!-- {$ch-scp} [[module css]] #header h2 { height: 2em; width: auto; left: 50%; transform: translateX(-50%); top: calc(50% + (var(--header-h2-font-size) / 2)); background-position: center center; } @media screen and (max-width:56.25rem) { #header h2 { top: calc(50% + (var(--header-h1-font-size) / 2)); } } [[/module]] [!----] [[iftags +component]] [[module css]] @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css"); @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css"); [[/module]] [!-- Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s. Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work. Interwiki: https://scpwiki.com/interwiki Source: https://github.com/scpwiki/interwiki See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation Usage: On the page that intends to restyle the Interwiki: [[include :scp-wiki:component:interwiki-style | priority=X | theme=<link to CSS stylesheet> | css=<URI-encoded CSS> ]] The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending. Examples: - The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0. - A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1. - The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3. The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme. The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder --] [[embed]] <iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=1&theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css&css={$css}" style="display: none"></iframe> [[/embed]] [!-- Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s. Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work. Interwiki: https://scpwiki.com/interwiki Source: https://github.com/scpwiki/interwiki See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation Usage: On the page that intends to restyle the Interwiki: [[include :scp-wiki:component:interwiki-style | priority=X | theme=<link to CSS stylesheet> | css=<URI-encoded CSS> ]] The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending. Examples: - The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0. - A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1. - The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3. The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme. The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder --] [[embed]] <iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=2&theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css&css={$css}" style="display: none"></iframe> [[/embed]] [[=]] [[module Rate]] [[/=]] [[module css]] h1, h2, h3 { text-align: center; } #page-title { text-align: center; } [[/module]] + What this does ++ Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site. [[=]] * Does NOT work on Sigma-9. This ONLY functions with [http://www.scpwiki.com/theme:black-highlighter-theme Black Highlighter.] * [http://www.scpwiki.com/component:toggle-sidebar Use this component by EstrellaYoshte instead if you intend to use Sigma-9.] * [http://www.scpwiki.com/component:collapsible-sidebar If you prefer, there is also a Collapsible Sidebar that functions on both BHL and Sigma-9.] _ The collapsible sidebar functions via hovering rather than clicking and is slightly more visible than the Toggle Sidebar. [[/=]] ------ + How to use ++ 1. Copy code below. ++ 2. Paste in article **after** Black Highlighter and any other Theme include. > {{[[include :scp-wiki:component:toggle-sidebar-bhl]]}} +++ 3. (Optional) Style toggle button if using a theme. [[div class="blockquote"]] There are also 5 CSS Vars available to style the button if needed. For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found [https://github.com/Nu-SCPTheme/Black-Highlighter/blob/master/src/css/root.css here.] [[div class="code"]] :root { @@--toggle-button-bg: hex/rgb/hsl color;@@ @@--toggle-border-color: hex/rgb/hsl color;@@ @@--toggle-border-width: px/rem/em;@@ @@--toggle-icon-color: hex/rgb/hsl color;@@ @@--toggle-roundness: percentage;@@ } [[/div]] [[/div]] ------ [[collapsible show="+ Show component code" hide="- Hide component code"]] [[code type="CSS"]] @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; } } } }
[[/collapsible]]
[[/iftags]]