: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: "TỔ CHỨC SCP";
--header-subtitle: "QUẢN THÚC - LƯU TRỮ - BẢO VỆ";
--logo-image: url('http://scp-wiki.wikidot.com/local--files/theme:minimalist-bhl/Foundation%20Logo');
--lgurl: var(--logo-image);
--bright-accent: 245, 245, 245;
--dark-accent: 36, 36, 36;
--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(--dark-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));
}
/* 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)
--login-line-divider-color: var(--dark-accent);
--login-username-color: var(--dark-accent);
--login-myaccount-color: var(--dark-accent);
--login-myaccount-underline-color: var(--bright-accent);
--login-myaccount-hover-bg-color: var(--dark-accent);
--login-arrow-color: var(--dark-accent);
--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 {
--sideblock-heading-text-color: var(--bright-accent);
--social-icon-hover-color: var(--bright-accent);
}
#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: 769px) {
#search-top-box-form>input {
box-shadow: none;
}
}
@media only screen and (min-width: 769px) {
#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;
}
.scpnet-interwiki-wrapper {
filter: initial;
margin-top: 1em;
}
.scpnet-interwiki-frame {
filter: invert(0.92) grayscale(1) contrast(1);
}
.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);
box-shadow: initial;
}
.acs-hybrid-text-bar>a {
background-color: transparent;
color: transparent;
}
@media only screen and (min-width: 769px) {
#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: 0px) {
#page-content .rate-box-with-credit-button>.creditButton>p>a:before {
left: 4px;
}
}
@media only screen and (max-width: 768px) {
#header h2,
#header h2 a,
#header h2 a::before {
top: 0.45rem;
}
}