/* root variables */
:root {
max-width: 100vw; overflow-x: hidden;
/* ===S-CSjavascript:;S-P INTEGRATION=== */
--theme-base: "black-highlighter";
--theme-id: "isolate-canon";
--theme-name: "Isolate Canon";
/* ===HEADER ELEMENTS=== */
--logo-image: url("http://scutoidbox.wikidot.com/local--files/watch-your-back/isolate%20canon.png");
--header-title: "แบ็กรูมส์";
--header-subtitle: "ข้างหลังคุณนะ...";
/* ===TYPEFACES=== */
--body-font: Ubuntu Mono, Consolas, monospace;
--UI-font: var(--body-font);
--header-font: var(--body-font);
--title-font: var(--body-font);
--mono-font: var(--body-font);
/* ===HEADER TITLES=== */
--header-h1-font-size: 4rem;
--header-h2-font-size: 2rem;
--swatch-headerh2-color: var(--light-gray-monochrome);
/* ===STANDARD THEME COLORS=== */
--white-monochrome: 255, 255, 255;
--pale-gray-monochrome: 255, 255, 255, 0.8;
--light-pale-gray-monochrome: 255, 255, 255, 0.5;
--very-light-gray-monochrome: 255, 255, 255, 0.4;
--light-gray-monochrome: 255, 255, 255, 0.5;
--gray-monochrome: 0, 0, 0, 0.3;
--dark-gray-monochrome: 0, 0, 0, 0.7;
--black-monochrome: 0, 0, 0, 0.8;
--pale-accent: 112,112,112; /* background */
--bright-accent: 255, 170, 0; /* link */
--medium-accent: 150, 150, 150;
--dark-accent: 90, 90, 90;
--alt-accent: 221, 50, 17; /* newpage link */
--link-color: var(--bright-accent);
--visited-link-color: 205, 205, 205;
--newpage-link-color: var(--alt-accent);
--swatch-background: var(--pale-accent);
--article-image: url("http://scutoidbox.wikidot.com/local--files/desolation-backrooms/eggrooms3.jpg");
/* ===GENERAL TEXT COLORS=== */
--swatch-text-dark: var(--black-monochrome);
--swatch-text-light: var(--white-monochrome);
--swatch-text-general: var(--swatch-text-light);
--swatch-important-text: var(--bright-accent);
/* ===MENU COLORS=== */
/* ===MENU BACKGROUND COLORS=== */
--swatch-menubg-color: var(--white-monochrome);
--swatch-menubg-light-color: var(--pale-gray-monochrome);
--swatch-menubg-medium-color: var(--dark-gray-monochrome);
--swatch-menubg-medium-dark-color: var(--gray-monochrome);
--swatch-menubg-dark-color: var(--gray-monochrome);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--black-monochrome);
/* ===MENU TEXT COLORS=== */
--swatch-menutxt-dark-color: var(--black-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);
/* ===SECONDARY & TERTIARY COLORS=== */
/* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
/* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
--swatch-secondary-color: var(--swatch-menubg-dark-color);
--swatch-tertiary-color: var(--swatch-menubg-light-color);
--swatch-alternate-color: var(--medium-accent);
/* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
--swatch-text-secondary-color: var(--swatch-menutxt-light-color);
--swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
/* ===STRUCTURAL MEASUREMENTS=== */
--header-height-on-desktop: 12rem;
--header-height-on-mobile: 12rem;
--header-width-on-desktop: 40rem;
--body-width-on-desktop: 45rem;
--topbar-height-on-desktop: 1.9rem;
/* ===SIDEBAR BUTTON=== */
--toggle-button-bg: rgb(var(--gray-monochrome));
--toggle-border-color: transparent;
--toggle-border-width: 0;
--toggle-icon-color: rgb(var(--white-monochrome));
--toggle-roundness: 25%;
}
/* background */
#skrollr-body {
background-color: rgb(var(--swatch-background));
}
#skrollr-body::before {
content: "";
position: fixed;
background-image: linear-gradient(to bottom, transparent, rgb(var(--swatch-background))), var(--article-image);
background-size: 100% 100%, cover;
width: 100vw; height: 100vh;
}
#container-wrap-wrap::before {
content: "";
position: fixed;
width: 100vw; height: 100vh;
-webkit-backdrop-filter: blur(13px);
backdrop-filter: blur(13px);
}
@media only screen and (min-width: 56.25rem) {
/* main content */
#main-content {
padding: 0.5rem 1rem;
margin: 3.5rem auto 1.5rem auto;
background: rgba(var(--gray-monochrome));
--swatch-background: 0,0,0,0;
grid-template-areas: "action-area-top action-area-top action-area-top action-area-top action-area-top action-area-top""page-tags page-tags page-tags page-tags page-tags page-tags""page-title page-title page-title page-title page-title page-title""breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs""page-content page-content page-content page-content page-content page-content""page-info-break page-info-break page-info-break page-info-break page-info-break page-info-break"". . pwatch pwatch pwatch pwatch"". . pinfo pinfo pinfo pinfo""options-1 options-1 options-1 options-1 options-1 options-1""options-2 options-2 options-2 options-2 options-2 options-2""pbottom pbottom pbottom pbottom pbottom pbottom""action-area-btm action-area-btm action-area-btm action-area-btm action-area-btm action-area-btm";
}
/* topmenu */
#header div[class*="top-bar"] > ul {
background: rgba(var(--gray-monochrome));
border-radius: 0.75rem;
padding: 0 1rem;
box-sizing: border-box;
}
#header div[class*="top-bar"] > ul > li > a {
border-left: 1px dotted rgb(var(--white-monochrome));
}
#header div[class*="top-bar"] > ul > li:first-of-type > a{
border: none;
}
/* make the login info go to the actual screen edge */
#header {
position: static;
}
/* border under topmenu */
#header::after {
content: "";
position: absolute;
height: 1px;
background: rgba(var(--pale-gray-monochrome));
width: 60rem;
left: calc(calc(100vw - 60rem) / 2);
}
/* header logo */
#header {
background-image: none;
}
#header::before {
content: ""; width: 100%; height: var(--header-height-on-desktop);
position: absolute; top: 0; left: 0;
background: var(--logo-image); opacity: 0.25; background-position: center bottom;
background-size: auto calc(var(--header-height-on-desktop) - 2rem);
background-repeat: no-repeat;
}
#header div#top-bar {
font-size: 1rem;
}
}
/* tags */
#main-content .page-tags {
box-shadow: none;
padding: 0;
margin: 0;
font-size: 1rem;
}
#main-content .page-tags::before {
display: none;
}
#main-content .page-tags span {
display: inline-flex;
padding-top: -1px;
font-size: inherit;
}
#main-content .page-tags span::before {
color: rgb(var(--swatch-text-general));
content: "TAGS:"
font-weight: bold;
}
@media only screen and (min-width: 56.25rem) {
/* title */
#page-title, .meta-title {
margin: 0;
margin-top: 0.5rem;
font-size: 2.5em;
}
/* center header */
#header :is(h1, h2) {
width: 100%;
max-width: var(--header-width-on-desktop);
display: flex;
}
#header h1 a {
margin: 4rem auto;
}
#header h2 span {
margin-left: unset;
font-size: 0;
margin-top: 7.5rem;
align-content: center;
width: 100%;
text-align: center;
}
#header h2 span::before {
font-size: var(--header-h2-font-size);
}
}
/* buttons */
div[id*=page-options-bottom]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn {
padding: 3px;
box-shadow: none;
flex-basis: 7rem;
}
div[id*=page-options-bottom]>a:after {
content: none;
}
/* removing --swatch-background in places */
form#edit-page-form table.form:first-of-type tr:focus-within td:first-of-type, form#edit-post-form table.form:first-of-type tr:focus-within td:first-of-type, form#new-post-form table.form:first-of-type tr:focus-within td:first-of-type, form#new-thread-form table.form:first-of-type tr:focus-within td:first-of-type {
color: rgb(var(--pale-gray-monochrome));
}
form#edit-page-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1):focus-within::before, form#edit-post-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1):focus-within::before, form#new-post-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1):focus-within::before, form#new-thread-form .edit-page-bottomtable tr > td:nth-of-type(1) > div:nth-of-type(1):focus-within::before {
color: rgb(var(--pale-gray-monochrome));
}
/* mobile */
@media only screen and (max-width: 56.25rem) {
:root {
--header-h1-font-size: 6vw;
--header-h2-font-size: 3vw;
}
#main-content > *, #main-content > * ~ * {
max-width: var(--body-width-on-mobile);
}
#header :is(h1, h2), #top-bar {
max-width: unset;
}
#header div#top-bar {
max-width: unset;
}
#header div[class*="top-bar"] > ul {
max-width: unset;
}
#content-wrap {
background: rgba(var(--gray-monochrome));
}
#main-content {
--swatch-background: 0,0,0,0;
grid-template-areas: "action-area-top action-area-top action-area-top action-area-top action-area-top action-area-top""page-tags page-tags page-tags page-tags page-tags page-tags""page-title page-title page-title page-title page-title page-title""breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs breadcrumbs""page-content page-content page-content page-content page-content page-content""page-info-break page-info-break page-info-break page-info-break page-info-break page-info-break"". . pwatch pwatch pwatch pwatch"". . pinfo pinfo pinfo pinfo""options-1 options-1 options-1 options-1 options-1 options-1""options-2 options-2 options-2 options-2 options-2 options-2""pbottom pbottom pbottom pbottom pbottom pbottom""action-area-btm action-area-btm action-area-btm action-area-btm action-area-btm action-area-btm";
}
#top-bar {
-webkit-backdrop-filter: blur(13px);
backdrop-filter: blur(13px);
}
}
/* blockquote */
:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]) {
background-color: rgb(var(--gray-monochrome));
}
/* footnotes */
.hovertip {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.footnotes-footer a[href*="javascript"]::before {
display: none;
}
.footnotes-footer a[href*="javascript"], .footnotes-footer a[href*="javascript"]:visited {
color: rgb(var(--link-color));
min-width: unset; width: 1ch;
}
/* owindow */
.infobox, #u-infobox, .odialog-shader, #odialog-container div.owindow {
-webkit-backdrop-filter: blur(13px);
backdrop-filter: blur(13px);
}
/* tags */
#main-content {
--pagetags-text-color: var(--pale-gray-monochrome);
--pagetags-text-hover-color: var(--dark-gray-monochrome);
}
.page-tags span::before {
content: "TAGS:";
font-size: 90%;
display: inline-flex;
align-items: center;
}
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]), #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]) {
margin: 0;
font-size: 90%;
}
:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {
--wght: 600;
box-sizing: border-box;
width: 100%;
padding: .5ex .5ch 1ex;
background-color: rgb(var(--swatch-secondary-color));
font-size: .9em;
font-weight: var(--wght);
line-height: 1.25;
text-align: center;
width: unset !important;
}
