/* - == === BHL VARIABLES === == - */
/* This is a BHL theme, which is configuration-based, so the root element
* contains variables that will affect the whole theme
*/
:root {
/* S-CSS-P integration */
--theme-base: "black-highlighter";
--theme-id: "mintgame";
--theme-name: "MintGame Theme";
/* Colors */
--dark-gray-monochrome: 26, 24, 26;
--swatch-topmenu-bg-color: var(--dark-gray-monochrome);
--dark-accent: 82, 142, 142;
--medium-accent: 102, 179, 179;
--bright-accent: 97, 199, 192;
--pale-accent: 127, 163, 154;
--light-gray-monochrome: 200, 200, 200;
/* Header gradient colors */
--header-gradient-f: 101, 194, 184;
--header-gradient-s: 174, 214, 241;
--header-gradient-t: 113, 248, 219;
--sky-length: 15;
--sky-time: 60s;
/* Theme logo */
--logo-image: url(http://scpkrsandbox.wikidot.com/local--files/theme:mintgame/PlugSoft-logo.png);
/* Header adjustments */
--header-title: "플러그소프트";
--header-subtitle: "우주에서 단 하나의 재미";
/* Delete the default header background */
--gradient-header: linear-gradient(transparent, transparent);
--diagonal-stripes: linear-gradient(transparent, transparent);
}
/* Mobile search box color adjustment */
@media only screen and (max-width: 768px) {
#search-top-box-input {
background-color: rgb(var(--dark-gray-monochrome));
}
}
/* - == === HEADER BACKGROUNDS === == - */
/* The header is made up of a million different stacked backgrounds.
* Instead of fucking about with z-index, I've added backgrounds to
* the ::before and ::after of various full-page elements in their
* natural stacking order.
*/
/* The following pseudoelements each contain a different part of the
* header background. They need to be drawn precisely over the header
* and made unclickable so they don't interfere with the links up there.
* They appear on the page in this order, so they'll also be drawn on
* top of each other in this order.
*/
body::before,
div#container-wrap-wrap::before,
div#container-wrap::before,
div#container-wrap-wrap::after,
body::after {
content: "";
position: absolute;
height: var(--header-height-on-desktop); width: 100%; top: 0; left: 0;
pointer-events: none;
}
/* Animated gradient header */
body::before {
background: linear-gradient(
to top,
rgb(var(--header-gradient-f)) 0%,
rgb(var(--medium-accent)) 7.5%,
rgb(var(--header-gradient-s)) 15%,
rgb(var(--medium-accent)) 22.5%,
rgb(var(--header-gradient-t)) 30%,
rgb(var(--medium-accent)) 37.5%,
rgb(var(--header-gradient-f)) 45%,
rgb(var(--medium-accent)) 52.5%,
rgb(var(--header-gradient-s)) 60%,
rgb(var(--medium-accent)) 67.5%,
rgb(var(--header-gradient-t)) 75%,
rgb(var(--medium-accent)) 82.5%,
rgb(var(--header-gradient-f)) 100%
);
background-size: 100% calc(var(--header-height-on-desktop)
* var(--sky-length));
animation: sky linear var(--sky-time) infinite;
}
@keyframes sky {
from { background-position: 0 0; }
to {
background-position: 0 calc(var(--header-height-on-desktop)
* var(--sky-length));
}
}
/* The circuit board */
div#container-wrap-wrap::before {
background: url(http://scpkrsandbox.wdfiles.com/local--files/theme%3Amintgame/Circuit_faded.png);
background-size: auto var(--header-height-on-desktop);
}
/* - == === BODY BACKGROUNDS === == - */
#content-wrap { position: relative; }
#content-wrap::before {
content: "";
position: absolute;
height: 100%; width: 100%; top: 0; left: 0;
background-repeat: repeat-x;
pointer-events: none;
background: linear-gradient(0deg, rgba(255,255,255,0) 38%, rgba(66,222,197,0.5) 100%);
opacity: 0.2;
}
/* - == === MISCELLANEOUS === == - */
.scpnet-interwiki-wrapper {
filter: brightness(0.86) invert(1) hue-rotate(73deg) saturate(10);
}
.c_topbar_arrow {
color: rgb(var(--link-color));
}