@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css"); @import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css"); :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: "kakkon-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Kaktus Kontainer Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://kaktuskontainer.wikidot.com/local--files/component:theme/logo_kakkon.svg"); --header-title: "KaktusKontainer"; --header-subtitle: "What, exactly, are you trying to point out as bad behavior here?"; /* Typefaces */ --title-font: proxima-nova-extra-condensed, 'Poppins', sans-serif; /* Standard Colors */ --white-monochrome: 252, 252, 252; /* white */ --pale-gray-monochrome: 204, 222, 221; /* v light gray for blockquotes and stuff */ --light-gray-monochrome: 151, 184, 182; /* light accent gray for login status */ --gray-monochrome: 64, 75, 75; /* gray */ --dark-gray-monochrome: 49, 45, 45; /* dark accent gray for sidebar background */ --black-monochrome: 12, 12, 12; /* black */ --bright-accent: 247, 94, 17; /* bright red */ --medium-accent: 187, 73, 16; /* medium red */ --dark-accent: 187, 73, 16; /* dark red */ --newpage-color: 221, 102, 17; /* pale orange */ /* Primary Theme Colors */ --swatch-background: var(--white-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-accent); /* Primary Text Colors */ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--white-monochrome); --swatch-menubg-light-color: var(--pale-gray-monochrome); --swatch-menubg-medium-color: var(--light-gray-monochrome); --swatch-menubg-medium-dark-color: var(--gray-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--black-monochrome); --swatch-menutxt-dark-color: var(--black-monochrome); --swatch-menutxt-light-color: var(--white-monochrome); --swatch-border-color: var(--black-monochrome); /* Primary Header Colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --swatch-topmenu-border-color: var(--bright-accent); --swatch-topmenu-bg-color: var(--black-monochrome); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--swatch-menutxt-dark-color); /* Header Gradients */ --gradient-header: linear-gradient(to bottom, rgba(var(--dark-gray-monochrome), 1) 0%, rgba(var(--dark-gray-monochrome), 1) 30%, rgba(var(--swatch-primary), 1) 100%); --diagonal-stripes: unset; --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--dark-accent), 1) 0%, rgba(var(--swatch-primary), 1) 100%); } div#extra-div-1 { position: absolute; display: block; width: 100%; height: 7.5rem; top: 0; left: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23bb4910' fill-opacity='0.3'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 2.5rem; transform: scaleX(-1); } #header h1 a { font-size: 175%; } #login-status * { font-family: var(--header-font); letter-spacing: 0.05em; } #top-bar div.top-bar>ul>li>a, #top-bar div.mobile-top-bar>ul>li>a { font-family: var(--title-font); font-size: var(--base-font-size); text-transform: uppercase; } #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a { font-weight: 700; } #side-bar { background: rgba(var(--swatch-menubg-light-color), 0.5) !important; } #side-bar:hover { background: rgba(var(--swatch-menubg-light-color), 0.5) !important; } #side-bar .side-block { background: transparent !important; box-shadow: unset !important; height: 100%; } .side-block div:nth-of-type(1) * { box-sizing: border-box; } .side-block > div:nth-of-type(1) { display: flex; height: auto; width: 100%; border-left: none; justify-content: center !important; background-color: rgba(var(--pale-gray-monochrome)); grid-row: span 2; } .side-block > div:nth-of-type(1) > div.new-page-box { grid-column: span 3; } .side-block div:nth-of-type(1) form { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0 1rem; } .side-block div:nth-of-type(1) input.button, .side-block div:nth-of-type(1) input.text { font-family: var(--header-font); font-size: calc(var(--base-font-size)*1.1); width: 100%; background-color: rgba(var(--swatch-topmenu-bg-color)); color: rgba(var(--swatch-menutxt-light-color)); padding: 0.25rem; margin: 0 !important; } .side-block div:nth-of-type(1) input.text { background-color: rgba(var(--swatch-topmenu-bg-color), 0.25) !important; height: 2rem !important; } #side-bar div.menu-item { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); align-items: stretch; justify-content: stretch; width: 100%; height: 100%; font-family: var(--header-font); } #side-bar div.menu-item, #side-bar div.menu-item * { box-sizing: border-box; } #side-bar div.menu-item a { height: 100%; width: 100%; line-height: 1; align-items: center; justify-content: center; text-align: center; padding: 0; } #side-bar div.menu-item a:only-of-type { grid-column: span 3; } #side-bar div.menu-item:nth-child(15) { grid-template-columns: repeat(2, auto); } #side-bar .heading { justify-content: center; } #side-bar .heading p { font-size: calc(var(--base-font-size) * 1.4); } @media only screen and (max-width: 768px) { #header h1 a, #header h2 span { margin-left: 7.75rem; } #top-bar div.top-bar>ul>li>a, #top-bar div.mobile-top-bar>ul>li>a { font-size: var(--base-font-size); align-items: center; } }