/*
Ex Officio Theme
[2020 Wikidot Theme]
Created by Rounderhouse and aismallard.
Thanks to wctaiwan, stormbreath, TSATPWTCOTTTADC, Woedenaz for critique and help.
Based on Black Highlighter Theme created by Woedenaz and Croquembouche.
The GOC logo was created by 7happy7. Licensed under CC BY SA 3.0.
*/
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
/* GOC logo */
@import url('https://scp-jp-storage.wdfiles.com/local--files/file%3A8260379-39-wy82/goc-logo.css');
/* Variable definitions */
: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: 'black-highlighter';
/* set this to the URL of your theme's page - e.g. for 'component:ar-theme', set it to 'ar-theme' */
--theme-name: 'goc';
/* set this to your theme's full name */
--theme-name-full: 'Ex Officio Theme';
/* no idea if this is the right var or not */
/* Header */
/* animated GOC logo, courtesy of 7happy7! */
--header-title: '世界オカルト連合';
--header-subtitle: '事件簿アーカイブ';
/* Typefaces */
--header-font: 'Russo One', "M Plus 1p", sans-serif;
--title-font: 'Russo One', "M Plus 1p", sans-serif;
--mono-font: 'PT Mono', 'Andale Mono', 'Courier New', Courier, monospace;
/* Standard Colors */
--white-monochrome: 252, 252, 252;
/* white */
--pale-gray-monochrome: 244, 244, 244;
/* v light gray for blockquotes and stuff */
--light-gray-monochrome: 170, 170, 170;
/* light accent gray for login status */
--gray-monochrome: 66, 66, 72;
/* gray */
--dark-gray-monochrome: 48, 48, 52;
/* dark accent gray for sidebar background */
--black-monochrome: 12, 12, 12;
/* black */
--pale-accent: 164, 194, 236;
--bright-accent: 164, 194, 236;
/* bright blue */
--medium-accent: 92, 149, 230;
/* pale blue */
--dark-accent: 39, 84, 149;
/* v pale blue */
--newpage-color: 99, 190, 255;
/* Primary Theme Colors */
--swatch-primary: var(--bright-accent);
--swatch-primary-darker: var(--medium-accent);
--swatch-primary-darkest: var(--dark-accent);
/* Primary Menu Colors */
--swatch-menubg-color: var(--pale-gray-monochrome);
--swatch-menubg-dark-color: var(--medium-accent);
--swatch-menubg-hover-color: var(--gray-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-border-color: var(--bright-accent);
/* Primary Header Colors */
--swatch-headerh1-color: var(--dark-accent);
--swatch-headerh2-color: var(--dark-accent);
--rating-module-button-color: var(--black-monochrome);
--rating-module-text-color: var(--black-monochrome);
/* Header measurements */
--header-height-on-desktop: 11rem;
--header-height-on-mobile: 7.5rem;
--topbar-height-on-desktop: 1.875rem;
--topbar-height-on-mobile: 3.5rem;
/* Sidebar */
--sidebar-transition-timing: 0.5s ease-in-out 0.1s;
--sidebar-internal-border-thickness: 0.125rem;
--background-gradient-distance: 20rem;
--diagonal-stripes: none;
}
@media only screen and (max-width: 26.5625rem) {
:root {
--header-title: "世界オカルト連合";
}
#header::before {
top: -1rem;
left: -2rem;
}
}
:root {
/* ===BACKGROUND GRADIENT=== */
/* ===GENERAL BACKGROUND=== */
/* Gradient Color used for the --gradient-background var */
--background-gradient-color: var(--bright-accent);
/* ===TOPBAR GRADIENT=== */
/* Colors used in the --gradient-topmenu var to give the topbar its color */
--swatch-topmenu-border-color: var(--medium-accent);
--swatch-topmenu-bg-color: var(--bright-accent);
/* ===LINK COLORS=== */
--link-color: var(--swatch-primary-darker);
--visited-link-color: var(--swatch-primary-darkest);
--hover-link-color: var(--swatch-primary-darkest);
}
#header {
/* ===HEADER ELEMENTS=== */
/* ===HEADER TITLES=== */
/* Header H1 and H2 colors */
--swatch-headerh1-color: var(--medium-accent);
--swatch-headerh2-color: var(--dark-accent);
/* ===SEARCH ELEMENT=== */
--search-icon-color: var(--swatch-text-tertiary-color);
/* ===LOGIN BOX ELEMENT=== */
--login-line-divider-color: var(--swatch-text-tertiary-color);
--login-username-color: var(--swatch-text-tertiary-color);
--login-myaccount-color: var(--swatch-text-tertiary-color);
--login-arrow-color: var(--swatch-text-tertiary-color);
}
#top-bar {
/* ===TOPBAR ELEMENTS=== */
/* ===TOPBAR CATEGORIES=== */
--topmenu-category-color: var(--swatch-text-tertiary-color);
--topmenu-category-hover-color: var(--swatch-text-tertiary-color);
--topmenu-hover-border-color: var(--swatch-primary);
--mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
}
/* ===FOOTER=== */
#footer {
--footer-link-hover-color: var(--swatch-text-tertiary-color);
}
/* ===LICENSE AREA=== */
#license-area {
--license-link-hover-color: var(--swatch-text-tertiary-color);
}
/* Add scrollbar */
html,
body,
#side-bar:hover {
scrollbar-color: rgb(var(--bright-accent)) rgb(var(--dark-accent));
}
::-webkit-scrollbar,
#side-bar:hover::-webkit-scrollbar {
background-color: rgb(var(--bright-accent));
}
::-webkit-scrollbar-thumb,
#side-bar:hover::-webkit-scrollbar-thumb {
background-color: rgb(var(--dark-accent));
}
/* Header shadow and colors */
/* logo drop shadow */
#header {
background-image: none;
}
#header::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--header-height-on-desktop);
opacity: 1;
background-image: var(--logo-image);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 10rem;
pointer-events: none;
-webkit-filter: drop-shadow(1px 1px 1px white);
filter: drop-shadow(1px 1px 1px white);
}
#header h1 a::before {
color: rgb(var(--dark-accent));
}
/* Remove BHL's letter spacing for main header and title */
#header h1 a::before,
#page-title {
letter-spacing: 0;
}
/* Login status link */
#login-status a {
color: rgb(var(--dark-accent));
font-weight: bold;
}
/* Search box */
#search-top-box input.empty {
background-color: rgba(var(--pale-gray-monochrome));
color: rgb(var(--medium-accent));
}
blockquote,
.blockquote,
div.blockquote,
[class*="blockquote"] {
background-color: #fff;
border-left: 5px solid rgb(var(--medium-accent));
}
/* Set horizontal rules to have the double line GOC formats have */
hr {
padding: 0.0313rem;
border-top: 0.125rem solid #777;
border-bottom: 0.0625rem solid #777;
background: transparent;
}
/* Set background and style for section above topbar */
#extra-div-2 {
--drop-shadow: rgb(var(--pale-gray-monochrome));
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 11rem;
background: url('https://scp-jp-storage.wdfiles.com/local--files/file%3A8260379-37-fspc/goc-background.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
pointer-events: none;
-webkit-filter: drop-shadow(-0.125rem 0.125rem 1rem var(--drop-shadow));
filter: drop-shadow(-0.125rem 0.125rem 1rem var(--drop-shadow));
}
div.warning {
width: 80%;
margin: 0.625rem auto;
padding: 0.9375rem;
border: solid 0.125rem rgb(var(--swatch-primary-darker));
background: #fff url('https://scp-jp-storage.wdfiles.com/local--files/file%3A8260379-37-4d3q/goc-fade.png') center no-repeat;
color: black;
text-align: center;
}
div.warning hr {
border-color: rgb(var(--swatch-primary-darker));
}
