Permalink
Cannot retrieve contributors at this time
225 lines (206 sloc)
10.4 KB
| /* All Vars Used */ | |
| :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 - eg for "component:ar-theme", set it to "ar-theme" */ | |
| --theme-name: "nu-SCP Theme"; | |
| /* set this to your theme's full name */ | |
| /* Header */ | |
| --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); | |
| --header-title: "SCP Foundation"; | |
| --header-subtitle: "SECURE, CONTAIN, PROTECT"; | |
| /* Typefaces */ | |
| --body-font: Raleway, Arimo, Verdana, Geneva, sans-serif; | |
| --header-font: Poppins, Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; | |
| --title-font: Poppins, Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; | |
| --mono-font: Recursive, Consolas, monaco, monospace; | |
| /* Variable Body Font Settings */ | |
| /* SETTING | ========================== DESCRIPTION | FONT: RANGE */ | |
| /* --wght: 400; Unsetting wght var as it breaks font-weight: bold | |
| /* ========================== Body Font Weight | Body: 100 - 900 */ | |
| --ital: 0; | |
| /* ========================== Body Font Italic | Body: 0 - 1 */ | |
| /* Variable Mono Font Settings */ | |
| --mono-wght: 350; | |
| /*===================== Mono Font Weight | Mono: 300 - 1000 */ | |
| --slnt: 0; | |
| /* ========================== Mono Font Italic | Mono: -15 - 0 */ | |
| --CASL: 0; | |
| /* ========================== Mono Font Casual Amnt | Mono: 0 - 1 */ | |
| --CRSV: 0; | |
| /* ========================== Mono Font Cursive Amnt| Mono: 0 - 1 */ | |
| --MONO: 1; | |
| /* ========================== Mono Font Mono Amnt | Mono: 0 - 1 */ | |
| /* Font Feature Settings */ | |
| /* See here for detailed explainations: https://sparanoid.com/lab/opentype-features/ */ | |
| --lnum: 1; | |
| /* ========================== Lining Numerals | Any: 0 OR 1 */ | |
| --pnum: 1; | |
| /* ========================== Proportional Numerals | Any: 0 OR 1 */ | |
| --kern: 1; | |
| /* ========================== Kerning | Any: 0 OR 1 */ | |
| --liga: 1; | |
| /* ========================== Standard Ligature | Any: 0 OR 1 */ | |
| --clig: 1; | |
| /* ========================== Contextual Ligature | Any: 0 OR 1 */ | |
| --dlig: 0; | |
| /* ========================== Discretionary Ligature| Any: 0 OR 1 */ | |
| --calt: 1; | |
| /* ========================== Contextual Alternate | Any: 0 OR 1 */ | |
| /* Standard Colors */ | |
| --white-monochrome: 252, 252, 252; | |
| /* white */ | |
| --pale-gray-monochrome: 244, 244, 244; | |
| /* v light gray for blockquotes and stuff */ | |
| --light-pale-gray-monochrome: 244, 244, 244; | |
| /* very light pale gray for misc. use */ | |
| --very-light-gray-monochrome: 215, 215, 215; | |
| /* very light accent gray for misc. use */ | |
| --light-gray-monochrome: 160, 160, 160; | |
| /* 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: 230, 40, 60; | |
| /* light red, for visited links */ | |
| --bright-accent: 133, 0, 5; | |
| /* bright red */ | |
| --medium-accent: 100, 46, 44; | |
| /* medium red - the "default" accent color */ | |
| --dark-accent: 100, 3, 15; | |
| /* dark red */ | |
| --alt-accent: 221, 102, 17; | |
| /* pale orange, for newpage links */ | |
| /* Background and Header Colors */ | |
| --background-gradient-color: var(--very-light-gray-monochrome); | |
| --header-gradient-color-bottom: var(--medium-accent); | |
| --header-gradient-color-middle: var(--black-monochrome); | |
| --header-gradient-color-top: var(--black-monochrome); | |
| /* 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-text-general: var(--swatch-text-dark); | |
| --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-menutxt-general-color: var(--swatch-menutxt-dark-color); | |
| --swatch-border-color: var(--black-monochrome); | |
| /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ | |
| --swatch-secondary-color: var(--swatch-menubg-light-color); | |
| --swatch-tertiary-color: var(--swatch-menubg-medium-color); | |
| /* 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-dark-color); | |
| /* Primary Header Colors */ | |
| --swatch-headerh1-color: var(--swatch-text-light); | |
| --swatch-headerh2-color: var(--swatch-text-light); | |
| --swatch-topmenu-border-color: var(--swatch-menubg-black-color); | |
| --swatch-topmenu-bg-color: var(--swatch-menubg-medium-dark-color); | |
| /* Link Colors */ | |
| --link-color: var(--pale-accent); | |
| --visited-link-color: var(--swatch-primary); | |
| --hover-link-color: var(--swatch-primary); | |
| --newpage-color: var(--alt-accent); | |
| --sidebar-links-text: var(--swatch-menutxt-general-color); | |
| /* Rating Module Colors */ | |
| --rating-module-button-color: var(--swatch-menutxt-dark-color); | |
| --rating-module-button-plus-color: 0, 200, 0; | |
| --rating-module-button-negative-color: 200, 0, 0; | |
| --rating-module-button-cancel-color: 200, 200, 200; | |
| --rating-module-button-credit-color: 50, 50, 50; | |
| --rating-module-text-color: var(--swatch-menutxt-dark-color); | |
| --rating-module-text-hover-color: var(--swatch-menutxt-light-color); | |
| /* Header Gradients */ | |
| --gradient-header: linear-gradient(to top, | |
| rgb(var(--header-gradient-color-bottom)) 0%, | |
| rgb(var(--header-gradient-color-middle)) 90%, | |
| rgb(var(--header-gradient-color-top)) 100%); | |
| --gradient-topmenu: linear-gradient(to bottom, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0) var(--header-height-on-desktop), | |
| rgba(var(--swatch-topmenu-border-color), 1) var(--header-height-on-desktop), | |
| rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem), | |
| rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem), | |
| rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem), | |
| rgba(var(--swatch-topmenu-border-color), 1) 100%); | |
| --gradient-topmenu-mobile: linear-gradient(to bottom, | |
| rgba(var(--swatch-topmenu-border-color), 1) 0, | |
| rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, | |
| rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), | |
| rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), | |
| rgba(var(--swatch-topmenu-border-color), 1) var(--topbar-height-on-mobile)); | |
| --diagonal-stripes: repeating-linear-gradient(45deg, | |
| hsla(0, 0%, 100%, 0), | |
| hsla(0, 0%, 100%, 0) 0.25vh, | |
| rgba(88, 88, 88, 0.1) 0.35vh, | |
| rgba(88, 88, 88, 0.2) 0.5vh); | |
| --gradient-sidemenu-header: linear-gradient(10deg, | |
| rgba(var(--swatch-primary-darker), 0.45) 0%, | |
| rgba(var(--swatch-primary-darker), 0.55) 100%); | |
| --background-gradient-distance: 40rem; | |
| --gradient-background: linear-gradient(to bottom, | |
| rgba(var(--background-gradient-color), 1) 0, | |
| rgba(var(--background-gradient-color), 0.987) calc(0.008 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.951) calc(0.029 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.896) calc(0.064 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.825) calc(0.110 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.741) calc(0.166 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.648) calc(0.231 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.550) calc(0.304 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.450) calc(0.383 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.352) calc(0.467 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.259) calc(0.554 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.175) calc(0.644 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.104) calc(0.735 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.049) calc(0.825 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0.013) calc(0.914 * var(--background-gradient-distance)), | |
| rgba(var(--background-gradient-color), 0) var(--background-gradient-distance)); | |
| /* Spacing Measurements */ | |
| /* header measurements */ | |
| --header-height-on-desktop: 7.5rem; | |
| --header-height-on-mobile: 7.5rem; | |
| --topbar-height-on-desktop: 1.875rem; | |
| --topbar-height-on-mobile: 3rem; | |
| --header-background-image-size: 100% var(--header-height-on-desktop); | |
| --body-width-on-desktop: 44.25rem; | |
| --sidebar-width-on-desktop: calc((var(--base-font-size) * (14/15)) * 19); | |
| --sidebar-width-on-mobile: calc((var(--base-font-size) * (14/15)) * 16); | |
| --scrollbar-width: 1rem; | |
| --border-styling: solid 0.0625rem rgb(var(--swatch-border-color)); | |
| --border-radius-width: 0.0625rem; | |
| /* Box-Shadow 1px Borders */ | |
| --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color)); | |
| --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color)); | |
| --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color)); | |
| --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color)); | |
| --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color)); | |
| /* Sidebar */ | |
| --sidebar-transition-timing: 0.5s ease-in-out 0.1s; | |
| --sidebar-internal-border-thickness: 0.125rem; | |
| /* final values */ | |
| --base-font-size: 0.9375rem; | |
| --base-line-height: 1.313rem; | |
| --header-h1-font-size: calc(var(--base-font-size) * 2.65); | |
| --header-h2-font-size: var(--base-font-size); | |
| --final-header-height-on-desktop: calc(var(--header-height-on-desktop) + var(--topbar-height-on-desktop)); | |
| --final-header-height-on-mobile: calc(var(--header-height-on-mobile) + var(--topbar-height-on-mobile)); | |
| } |