TABLE of CONTENTS
-
GENERAL SETTINGS Fold
- 1. S-CSS-P INTEGRATION
- 2. HEADER ELEMENTS
- 3. TYPEFACES
- 3.1. BASE TYPEFACES
- 3.2. BASE FONT SIZE & LINE HEIGHT
- 3.3. HEADER TITLE FONT SIZES
- 4. VARIABLE FONT SETTINGS
- 5. OPENTYPE FEATURE SETTINGS
- 6. STANDARD THEME COLORS
- 7. PRIMARY COLORS
- 7.1. GENERAL COLORS
- 7.2. GENERAL TEXT COLORS
- 8. MENU COLORS
- 8.1. MENU BACKGROUND COLORS
- 8.2. MENU TEXT COLORS
- 9. SECONDARY & TERTIARY COLORS
- 10. PRIMARY GRADIENTS
- 11. STRUCTURAL SPACING ELEMENTS
- 11.1. BASE MEASUREMENTS
- 11.2. HEADER MEASUREMENTS
- 11.3. TOPBAR MEASUREMENTS
- 11.4. FINAL HEADER + TOPBAR MEASUREMENTS
- 11.5. SIDEBAR MEASUREMENTS
-
SPECIFIC COLORS Fold
- 12. BACKGROUND GRADIENT
- 12.1. GENERAL BACKGROUND
- 12.2. HEADER GRADIENT
- 12.3. TOPBAR GRADIENT
- 13. LINK COLORS
- 14. HEADER ELEMENTS
- 14.1. HEADER TITLES
- 14.2. SEARCH ELEMENT
- 14.2.1. SEARCH BASE
- 14.2.2. SEARCH FOCUS
- 14.3. LOGIN BOX ELEMENT
- 14.3.1. LOGIN BASE
- 14.3.2. DROPDOWN BOX
- 14.3.3. MOBILE ICON
- 15. TOPBAR ELEMENTS
- 15.1. TOPBAR CATEGORIES
- 15.2. DROPDOWN MENU
- 16. SIDE-BAR ELEMENTS
- 16.1. SIDE-BAR GENERAL
- 16.2. SOCIAL MEDIA ICONS
- 16.3. SIDEBLOCK MENU
- 16.4. MENU-ITEMS
- 16.5. SIDEBAR COLLAPSIBLES
- 16.5.1. Folded Colors
- 16.5.2. Unfolded Colors
- 16.5.3. Unfolded Body Colors
- 17. FOOTER
- 18. LICENSE AREA
- 19. MAIN CONTENT UI ELEMENTS
- 19.1. UI ICONS
- 19.1.1. PAGE OPTIONS ICONS
- 19.1.2. TEXT EDITOR ICONS
- 19.2. TABS
- 19.3. TABLES
- 19.4. BLOCKQUOTES
- 19.5. FOOTNOTES/BIBLIOGRAPHY FOOTER
- 19.6. TOC
- 19.7. PAGE TAGS
- 19.1. UI ICONS
- 20. GLOBAL ELEMENTS
- 20.1. UI BUTTONS
- 20.2. RATING MODULE
- 20.3. MODALS
- 20.4. FOOTNOTES HOVER BLOCK
- 20.5. LISTPAGES PAGER
- 12. BACKGROUND GRADIENT
-
INHERITANCE TREES Fold
-
GENERAL SETTINGS Fold
- Hidden Fold
-
1. S-CSS-P INTEGRATION Fold
- 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-url: "black-highlighter-theme"; - Set this to your theme's full name
--theme-name: "Black Highlighter Theme";
- If you're making a new CSS theme, please include the following three variables at minimum.
-
- Hidden Fold
-
2. HEADER ELEMENTS Fold
- --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
- --header-title: "SCP Foundation";
- --header-subtitle: "SECURE, CONTAIN, PROTECT";
- --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
-
- Hidden Fold
-
3. TYPEFACES Fold
-
3.1. BASE TYPEFACES Fold
-
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
‘ 1 2 3 4 5 6 7 8 9 0 - = [ ] \ ; ’ , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? -
--UI-font: PTRootUI, -apple-system, system-ui, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantrell, "Helvetica Neue",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
‘ 1 2 3 4 5 6 7 8 9 0 - = [ ] \ ; ’ , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? -
--header-font: Inter, Franklin Gothic Medium, Franklin Gothic,
ITC Franklin Gothic, "Helvetica Neue", "Helvetica", Arial, sans-serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
‘ 1 2 3 4 5 6 7 8 9 0 - = [ ] \ ; ’ , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? - --title-font: var(--header-font);
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
‘ 1 2 3 4 5 6 7 8 9 0 - = [ ] \ ; ’ , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? - --mono-font: Recursive, Consolas, monaco, monospace;
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
‘ 1 2 3 4 5 6 7 8 9 0 - = [ ] \ ; ’ , . /
~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ?
-
-
3.2. BASE FONT SIZE & LINE HEIGHT Fold
- --min-font-size: 0.8125rem; /* 13px */
- --max-font-size: 0.9375rem; /* 15px */
-
- --base-font-size: var(--max-font-size);
- --base-line-height: 1.5;
- --min-font-size: 0.8125rem; /* 13px */
-
3.3. HEADER TITLE FONT SIZES Fold
- --header-h1-font-size: calc(var(--base-font-size) * 2.65);
- --header-h2-font-size: var(--base-font-size);
- --header-h1-font-size: calc(var(--base-font-size) * 2.65);
-
-
- Hidden Fold
-
4. VARIABLE FONT SETTINGS Fold
-
4.1. VARIABLE BASE FONT SETTINGS Fold
-
4.2. VARIABLE MONO FONT SETTINGS Fold
-
See here for Recursive Font information: Recursive Design Website
-
-
-
- Hidden Fold
-
5. OPENTYPE FEATURE SETTINGS Fold
-
See here for detailed explainations: OpenType Features Website
-
-
- Hidden Fold
-
6. STANDARD THEME COLORS Fold
- White:
--white-monochrome: 252, 252, 252; - Very light gray for blockquotes and stuff:
--pale-gray-monochrome: 244, 244, 244; - Very light pale gray for misc. use:
--light-pale-gray-monochrome: 244, 244, 244; - Very light accent gray for misc. use:
--very-light-gray-monochrome: 215, 215, 215; - Light accent gray for login status:
--light-gray-monochrome: 160, 160, 160; - Gray:
--gray-monochrome: 66, 66, 72; - Dark accent gray for sidebar background:
--dark-gray-monochrome: 48, 48, 52; - Black:
--black-monochrome: 12, 12, 12; - Subdued theme color, for visited links:
--pale-accent: 210, 20, 20; - Vivid theme color, the "default" accent color:
--bright-accent: 133, 0, 5; - Theme color:
--medium-accent: 100, 46, 44; - Darker theme color:
--dark-accent: 100, 3, 15; - Alternate accent color, for newpage links:
--alt-accent: 221, 102, 17;
- White:
-
- Hidden Fold
-
7. PRIMARY COLORS Fold
-
7.1. GENERAL COLORS Fold
- --swatch-primary: var(--bright-accent);
- --swatch-primary-darker: var(--medium-accent);
- --swatch-primary-darkest: var(--dark-accent);
- --swatch-border-color: var(--black-monochrome);
- --swatch-primary: var(--bright-accent);
-
7.2. GENERAL TEXT COLORS Fold
- --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);
- --swatch-text-dark: var(--black-monochrome);
-
-
- Hidden Fold
-
8. MENU COLORS Fold
-
8.1. MENU BACKGROUND COLORS Fold
- --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-menubg-color: var(--white-monochrome);
-
8.2. MENU TEXT COLORS Fold
- --swatch-menutxt-dark-color: var(--black-monochrome);
- --swatch-menutxt-light-color: var(--white-monochrome);
- --swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);
- --swatch-menutxt-dark-color: var(--black-monochrome);
-
-
- Hidden Fold
-
9. SECONDARY & TERTIARY COLORS Fold
- 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-light-color);
- --swatch-tertiary-color: var(--swatch-menubg-medium-color);
- --swatch-alternate-color: var(--swatch-menubg-dark-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);
- Editing these will edit a vast majority of theme elements. Useful for making dark themes.
-
- Hidden Fold
-
10. PRIMARY GRADIENTS Fold
- Creates the header image at top of page:
-
-
--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%
); -
- Diagonal Strikes placed on top of header image:
-
-
-
- Create top-menu bar below the header:
-
-
--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)
); -
- Subtle gradient that begins just below the top-bar and header:
-
- --background-gradient-distance: 40rem;
-
-
--gradient-background: linear-gradient(
to bottom,
rgba(var(--background-gradient-color), 1) 0,
rgba(var(--background-gradient-color), 0)
var(--background-gradient-distance)
);
- Creates the header image at top of page:
-
- Hidden Fold
-
11. STRUCTURAL SPACING ELEMENTS Fold
-
11.1. BASE MEASUREMENTS Fold
-
11.2. HEADER MEASUREMENTS Fold
- --header-width-on-desktop: 61.25rem;
- --header-width-on-mobile: 100vw;
- --header-height-on-desktop: 7.5rem;
- --header-height-on-mobile: 7.5rem;
- --header-background-image-size: 100% var(--header-height-on-desktop);
- --header-width-on-desktop: 61.25rem;
-
11.3. TOPBAR MEASUREMENTS Fold
-
11.4. FINAL HEADER + TOPBAR MEASUREMENTS Fold
- These Vars should not be edited unless necessary.
-
--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)
);
- These Vars should not be edited unless necessary.
-
11.5. SIDEBAR MEASUREMENTS Fold
-
--sidebar-width-on-desktop:min(calc((var(--base-font-size) * (14 / 15)) * 19),calc();(100vw - var(--body-width-on-desktop)))
- --sidebar-internal-border-thickness: 0.125rem;
-
-
-
- Hidden Fold
-
SPECIFIC COLORS Fold
- Hidden Fold
-
12. BACKGROUND GRADIENT Fold
-
12.1. GENERAL BACKGROUND Fold
- Overall Page Background Color:
--swatch-background: var(--white-monochrome); - Gradient Color used for the --gradient-background var:
--background-gradient-color: var(--very-light-gray-monochrome);
- Overall Page Background Color:
-
12.2. HEADER GRADIENT Fold
- Colors forming the header gradient used in --gradient-header var:
- --header-gradient-color-bottom: var(--medium-accent);
- --header-gradient-color-middle: var(--black-monochrome);
- --header-gradient-color-top: var(--black-monochrome);
- Colors forming the header gradient used in --gradient-header var:
-
12.3. TOPBAR GRADIENT Fold
- Colors used in the --gradient-topmenu var to give the topbar its color:
- --swatch-topmenu-bg-color: var(--swatch-menubg-medium-dark-color);
- --swatch-topmenu-border-color: var(--swatch-menubg-black-color);
- Colors used in the --gradient-topmenu var to give the topbar its color:
-
-
- Hidden Fold
-
13. LINK COLORS Fold
- --link-color: var(--pale-accent);
- --visited-link-color: var(--swatch-primary-darkest);
- --hover-link-color: var(--swatch-primary);
- --newpage-color: var(--alt-accent);
- --link-color: var(--pale-accent);
-
- Hidden Fold
-
14. HEADER ELEMENTS Fold
-
14.1. HEADER TITLES Fold
- Header H1 and H2 colors:
- --swatch-headerh1-color: var(--swatch-text-light);
- --swatch-headerh2-color: var(--swatch-text-light);
- Header H1 and H2 colors:
-
14.2. SEARCH ELEMENT Fold
-
14.2.1. SEARCH BASE Fold
- --search-icon-color: var(--swatch-text-secondary-color);
- --search-icon-hover-color: var(--swatch-text-secondary-color);
- --search-icon-hover-bg-color: var(--swatch-alternate-color);
- --search-textbox-text-color: 0,0,0,0;
- --search-icon-color: var(--swatch-text-secondary-color);
-
14.2.2. SEARCH FOCUS Fold
- Focus is when the search box has been clicked on:
- --search-icon-focus-color: var(--swatch-text-secondary-color);
- --search-icon-focus-bg-color: var(--swatch-primary);
- --search-focus-outline-color: var(--swatch-primary);
- --search-focus-textbox-bg-color: var(--swatch-alternate-color);
- --search-focus-textbox-text-color: var(--swatch-text-secondary-color);
- Focus is when the search box has been clicked on:
-
-
14.3. LOGIN BOX ELEMENT Fold
-
14.3.1. LOGIN BASE Fold
- --login-line-divider-color: var(--swatch-text-secondary-color);
- --login-username-color: var(--swatch-text-secondary-color);
- --login-myaccount-color: var(--swatch-text-secondary-color);
- --login-myaccount-hover-color: var(--login-myaccount-color);
- --login-myaccount-underline-color: var(--swatch-primary-darkest);
- --login-myaccount-hover-bg-color: var(--swatch-primary-darkest);
- --login-arrow-color: var(--search-icon-color);
- --login-line-divider-color: var(--swatch-text-secondary-color);
-
14.3.2. DROPDOWN BOX Fold
- Dropdown Box when arrow is clicked:
- --login-dropdown-bg-color: var(--swatch-menubg-color);
- --login-dropdown-bg-image: var(--gradient-header);
- --login-dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
- --login-dropdown-text-color: var(--swatch-text-secondary-color);
- --login-dropdown-text-hover-color: var(--swatch-text-secondary-color);
- --login-dropdown-bg-hover-color: var(--swatch-primary);
- Dropdown Box when arrow is clicked:
-
14.3.3. MOBILE ICON Fold
- Mobile Icon Styling:
- --login-mobile-icon-color: var(--search-icon-color);
- --login-mobile-icon-hover-color: var(--search-icon-hover-color);
- --login-mobile-icon-hover-bg-color: var(--search-icon-hover-bg-color);
- Mobile Icon Styling:
-
-
-
- Hidden Fold
-
15. TOPBAR ELEMENTS Fold
-
15.1. TOPBAR CATEGORIES Fold
- --topmenu-category-color: var(--swatch-text-secondary-color);
- --topmenu-category-hover-color: var(--swatch-text-secondary-color);
- --topmenu-category-hover-bg: 0,0,0,0; /* Transparent */
- --topmenu-hover-border-color: var(--swatch-primary);
-
- --mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color);
- --topmenu-category-color: var(--swatch-text-secondary-color);
-
15.2. DROPDOWN MENU Fold
- --dropdown-bg-color: var(--swatch-alternate-color), 0.9;
- --dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
- --dropdown-links-color: var(--swatch-text-secondary-color);
- --dropdown-links-bg-color: 0,0,0,0; /* Transparent */
- --dropdown-links-hover-color: var(--swatch-text-secondary-color);
- --dropdown-links-hover-bg-color: var(--swatch-primary);
- --dropdown-bg-color: var(--swatch-alternate-color), 0.9;
-
-
- Hidden Fold
-
16. SIDE-BAR ELEMENTS Fold
-
16.1. SIDE-BAR GENERAL Fold
- --sidebar-bg-color: var(--swatch-menubg-color);
- --sidebar-resources-bg-color: var(--swatch-primary-darker), 0.25;
- --sidebar-media-bg-color: var(--swatch-primary-darker), 0.125;
- --sidebar-bg-color: var(--swatch-menubg-color);
-
16.2. SOCIAL MEDIA ICONS Fold
- --discord-icon-color: 88, 101, 242; /* BLURPLE */
- --deviantart-icon-color: 0, 199, 135;
- --facebook-icon-color: 59, 89, 152;
- --github-icon-color: 25, 23, 23;
- --instagram-icon-color: 240, 148, 51;
-
-
- --reddit-icon-color: 225, 69, 0;
- --sandbox-icon-color: 35, 140, 120;
- --steam-icon-color: 8, 20, 40;
- --tiktok-icon-color: 12, 12, 12;
-
-
- --twitch-icon-color: 100, 65, 165;
- --twitter-icon-color: 29, 161, 242;
- --youtube-icon-color: 255, 0, 0;
-
- --social-icon-hover-color: var(--swatch-primary);
- --discord-icon-color: 88, 101, 242; /* BLURPLE */
-
16.3. SIDEBLOCK MENU Fold
- --sideblock-bg-color: 0,0,0,0; /* Transparent */
- --sideblock-heading-border-color: var(--swatch-primary);
- --sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
- --sideblock-heading-text-color: var(--swatch-primary-darker);
- --sideblock-bg-color: 0,0,0,0; /* Transparent */
-
16.4. MENU-ITEMS Fold
- --sidebar-border-color: var(--swatch-border-color), 0.08;
- --sidebar-subtest-color: var(--swatch-primary);
- --sidebar-links-text: var(--swatch-menutxt-general-color);
- --sidebar-links-bg-color: 0,0,0,0; /* Transparent */
- --sidebar-links-hover-bg-color: var(--swatch-primary);
- --sidebar-links-hover-text-color: var(--swatch-text-secondary-color);
- --sidebar-border-color: var(--swatch-border-color), 0.08;
-
16.5. SIDEBAR COLLAPSIBLES Fold
-
16.5.1. Folded Colors Fold
- --sidebar-collapsible-fld-link-bg: var(--swatch-primary-darker), 0.25;
- --sidebar-collapsible-fld-link-color: var(--sideblock-heading-text-color);
- --sidebar-collapsible-fld-link-hover-bg: var(--swatch-primary-darker);
- --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-secondary-color);
- --sidebar-collapsible-fld-arrow-color: var(--swatch-text-tertiary-color);
- --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-secondary-color);
- --sidebar-collapsible-fld-link-bg: var(--swatch-primary-darker), 0.25;
-
16.5.2. Unfolded Colors Fold
- --sidebar-collapsible-ufld-link-bg: var(--sidebar-collapsible-fld-link-bg);
- --sidebar-collapsible-ufld-link-color: var(--sideblock-heading-text-color);
- --sidebar-collapsible-ufld-link-hover-bg: var(--swatch-primary), 1;
- --sidebar-collapsible-ufld-link-hover-color: var(--sidebar-collapsible-fld-link-hover-color);
- --sidebar-collapsible-ufld-arrow-color: var(--sidebar-collapsible-fld-arrow-color);
- --sidebar-collapsible-ufld-arrow-hover-color: var(--sidebar-collapsible-fld-arrow-hover-color);
- --sidebar-collapsible-ufld-link-bg: var(--sidebar-collapsible-fld-link-bg);
-
16.5.3. Unfolded Body Colors Fold
- --sidebar-collapsible-body-bg: var(--swatch-primary), 0.125;
- --sidebar-collapsible-link-color: var(--sidebar-links-text);
- --sidebar-collapsible-link-hover-bg: var(--sidebar-links-hover-bg-color);
- --sidebar-collapsible-link-hover-color: var(--sidebar-links-hover-text-color);
- --sidebar-collapsible-body-bg: var(--swatch-primary), 0.125;
-
-
-
- Hidden Fold
-
17. FOOTER Fold
- --footer-bg-color: var(--swatch-primary-darkest);
- --footer-text-color: var(--swatch-text-secondary-color);
- --footer-link-color: var(--swatch-text-secondary-color);
- --footer-link-hover-color: var(--swatch-primary);
- --footer-link-hover-bg-color: var(--swatch-secondary-color);
- --footer-bg-color: var(--swatch-primary-darkest);
-
- Hidden Fold
-
18. LICENSE AREA Fold
- --license-bg-color: var(--swatch-alternate-color);
- --license-text-color: var(--swatch-text-secondary-color);
- --license-link-color: var(--swatch-text-secondary-color);
- --license-link-hover-color: var(--swatch-primary);
- --license-link-hover-bg-color: var(--swatch-secondary-color);
- --license-bg-color: var(--swatch-alternate-color);
-
- Hidden Fold
-
19. MAIN CONTENT UI ELEMENTS Fold
-
19.1. UI ICONS Fold
-
19.1.1. PAGE OPTIONS ICONS Fold
- --ui-icon-color: var(--swatch-text-secondary-color);
- --ui-icon-bg: var(--swatch-primary-darkest);
- --ui-icon-hover-color: var(--swatch-text-secondary-color);
- --ui-icon-hover-bg: var(--swatch-primary);
- --ui-icon-color: var(--swatch-text-secondary-color);
-
19.1.2. TEXT EDITOR ICONS Fold
- --editor-icon-color: var(--swatch-menutxt-general-color);
- --editor-icon-bg: 0,0,0,0; /* Transparent */
- --editor-icon-hover-color: var(--swatch-background);
- --editor-icon-hover-bg: var(--swatch-primary);
- --editor-icon-submenu-bg: var(--swatch-secondary-color);
- --editor-icon-color: var(--swatch-menutxt-general-color);
-
-
19.2. TABS Fold
- --tabs-bg: var(--swatch-secondary-color);
- --tabs-txt: var(--swatch-text-tertiary-color);
- --tabs-hover-bg: var(--swatch-primary-darker);
- --tabs-hover-txt: var(--swatch-text-secondary-color);
- --tabs-selected-bg: var(--swatch-primary);
- --tabs-selected-txt: var(--swatch-text-secondary-color);
- --tabs-selected-outline: var(--swatch-primary);
- --tabs-bottom-border-color: var(--swatch-primary-darker);
-
- --tabs-content-bg-color: var(--swatch-secondary-color), 0.25;
- --tabs-content-border-color: var(--swatch-tertiary-color);
- --tabs-bg: var(--swatch-secondary-color);
-
19.3. TABLES Fold
- --tables-header-bg: var(--swatch-primary-darkest);
- --tables-header-txt: var(--swatch-text-secondary-color);
- --tables-border: var(--swatch-tertiary-color);
- --tables-body-bg: var(--swatch-background);
- --tables-body-txt: var(--swatch-text-general);
- --tables-header-bg: var(--swatch-primary-darkest);
-
19.4. BLOCKQUOTES Fold
- --blockquote-bg-color: var(--swatch-secondary-color), 0.25;
- --blockquote-border-color: var(--swatch-tertiary-color);
- Color for special .colorbar-quote blockquote class:
- --blockquote-colorbar-color: var(--swatch-primary), 1;
- --blockquote-bg-color: var(--swatch-secondary-color), 0.25;
-
19.5. FOOTNOTES/BIBLIOGRAPHY FOOTER Fold
- --footnotes-footer-bg-color: var(--swatch-secondary-color);
- --footnotes-footer-colorbar-color: var(--swatch-primary-darkest);
- --footnotes-footer-title-bg-color: var(--swatch-primary-darkest);
- --footnotes-footer-title-text-color: var(--swatch-text-secondary-color);
- --footnotes-footer-num-color: var(--link-color);
- --footnotes-footer-num-hover-color: var(--hover-link-color);
- --footnotes-footer-text-color: var(--swatch-text-general);
- --footnotes-footer-bg-color: var(--swatch-secondary-color);
-
19.6. TOC Fold
- --toc-header-bg-color: var(--swatch-primary-darkest);
- --toc-header-text-color: var(--swatch-text-secondary-color);
- --toc-header-text-hover-color: var(--swatch-text-secondary-color);
-
- --toc-body-bg-color: var(--swatch-menubg-color);
- --toc-directory-lines-color: var(--swatch-tertiary-color);
-
- --toc-body-link-color: var(--link-color);
- --toc-body-link-hover-color: var(--link-color);
- --toc-body-hover-arrow-color: var(--link-color);
- --toc-header-bg-color: var(--swatch-primary-darkest);
-
19.7. PAGE TAGS Fold
- --pagetags-title-bg: var(--swatch-primary-darkest);
- --pagetags-title-text: var(--swatch-text-secondary-color);
- --pagetags-text-color: var(--swatch-primary-darkest);
- --pagetags-text-hover-color: var(--swatch-background);
- --pagetags-text-hover-bg-color: var(--swatch-primary);
- --pagetags-title-bg: var(--swatch-primary-darkest);
-
-
- Hidden Fold
-
20. GLOBAL ELEMENTS Fold
-
20.1. UI BUTTONS Fold
- --ui-button-bg: var(--swatch-secondary-color);
- --ui-button-txt: var(--swatch-text-tertiary-color);
- --ui-button-hover-bg: var(--swatch-primary);
- --ui-button-hover-txt: var(--swatch-text-secondary-color);
- --ui-button-hover-outline: var(--swatch-primary);
- --ui-button-bg: var(--swatch-secondary-color);
-
20.2. RATING MODULE Fold
- --rating-module-button-plus-color: 0, 200, 0;
- --rating-module-button-negative-color: 200, 0, 0;
- --rating-module-button-cancel-color: var(--swatch-tertiary-color);
- --rating-module-button-credit-color: var(--swatch-secondary-color);
-
- --rating-module-bg-color: var(--swatch-background);
- --rating-module-bottom-border-color: var(--swatch-primary);
-
- --rating-module-text-color: var(--swatch-text-tertiary-color);
- --rating-module-text-hover-color: var(--swatch-text-secondary-color);
- --rating-module-button-plus-color: 0, 200, 0;
-
20.3. MODALS Fold
- --modal-bg: var(--swatch-secondary-color);
- --modal-body-text: var(--swatch-text-tertiary-color);
-
- h1/h2/h3/h4/h5/h6:
- --modal-body-header-txt: var(--swatch-text-tertiary-color);
-
- --modal-header-bg: var(--swatch-primary-darkest);
- --modal-header-txt: var(--swatch-text-secondary-color);
- --modal-header-stripe: var(--swatch-primary);
- --modal-bg: var(--swatch-secondary-color);
-
20.4. FOOTNOTES HOVER BLOCK Fold
- --hoverblock-bg: var(--swatch-secondary-color);
- --hoverblock-txt: var(--swatch-text-tertiary-color);
- --hoverblock-header-bg: var(--swatch-primary-darker);
- --hoverblock-header-txt: var(--swatch-text-secondary-color);
- --hoverblock-footer-bg: var(--swatch-tertiary-color);
- --hoverblock-footer-txt: var(--swatch-text-tertiary-color);
- --hoverblock-bg: var(--swatch-secondary-color);
-
20.5. LISTPAGES PAGER Fold
- --pager-text: var(--swatch-text-general);
- --pager-link: var(--link-color);
-
- --pager-link-hover: var(--swatch-text-secondary-color);
- --pager-hover-bg: var(--swatch-primary-darkest);
-
- --pager-selected-bg: var(--swatch-primary);
- --pager-selected-link: var(--swatch-text-secondary-color);
- --pager-text: var(--swatch-text-general);
-
-
- Hidden Fold
-
INHERITANCE TREES Fold
- Hidden Fold
-
21. COLOR INHERITANCE TREE Fold
- --white-monochrome: 252, 252, 252;
--white-monochrome: White: Fold
- --swatch-text-light Fold
- --swatch-menubg-color Fold
- --login-dropdown-bg-color (0.9)
- --sidebar-bg-color
- --toc-body-bg-color
- --swatch-menutxt-light-color Fold
- --swatch-text-secondary-color Fold
- --search-icon-color Fold
- --search-icon-hover-color Fold
- --search-icon-focus-color
- --search-focus-textbox-text-color
- --login-line-divider-color
- --login-username-color
- --login-myaccount-color Fold
- --login-dropdown-text-color
- --login-dropdown-text-hover-color
- --topmenu-category-color
- --topmenu-category-hover-color
- --mobile-topmenu-sidebar-button-color
- --dropdown-links-hover-color
- --sidebar-links-hover-text-color Fold
- --sidebar-collapsible-fld-link-hover-color Fold
- --sidebar-collapsible-fld-arrow-hover-color Fold
- --footer-text-color
- --footer-link-color
- --license-text-color
- --license-link-color
- --ui-icon-color
- --ui-icon-hover-color
- --tabs-hover-txt
- --tabs-selected-txt
- --tables-header-txt
- --footnotes-footer-title-text-color
- --toc-header-text-color
- --toc-header-text-hover-color
- --pagetags-title-text
- --ui-button-hover-txt
- --rating-module-text-hover-color
- --modal-header-txt
- --hoverblock-header-txt
- --pager-link-hover
- --pager-selected-link
- --search-icon-color Fold
- --swatch-text-secondary-color Fold
- --swatch-background Fold
- --swatch-text-light Fold
- --pale-gray-monochrome : 244, 244, 244;
--pale-gray-monochrome: Very light gray for blockquotes and stuff: Fold
- --light-pale-gray-monochrome : 244, 244, 244;
--light-pale-gray-monochrome: Very light pale gray for misc. use: Fold
- Deprecated: The BHL base theme no longer uses this color, but some derivative themes still do.
- --very-light-gray-monochrome : 215, 215, 215;
--very-light-gray-monochrome: Very light accent gray for misc. use: Fold
- --light-gray-monochrome : 160, 160, 160;
--light-gray-monochrome: Light accent gray for login status: Fold
- --gray-monochrome : 66, 66, 72;
--gray-monochrome: Gray: Fold
- --dark-gray-monochrome : 48, 48, 52;
--dark-gray-monochrome: Dark accent gray for sidebar background: Fold
- --black-monochrome : 12, 12, 12;
--black-monochrome: Black: Fold
- --swatch-border-color Fold
- --sidebar-border-color (0.08)
- --swatch-text-dark Fold
- --swatch-menubg-black-color Fold
- --swatch-menubg-hover-color
- --swatch-menutxt-dark-color Fold
- --header-gradient-color-middle
- --header-gradient-color-top
- --swatch-border-color Fold
- --pale-accent : 210, 20, 20;
--pale-accent: Subdued theme color, for visited links: Fold
- --bright-accent : 133, 0, 5;
--bright-accent: Vivid theme color, the "default" accent color: Fold
- --swatch-primary Fold
- --hover-link-color Fold
- --search-icon-focus-bg-color
- --search-focus-outline-color
- --login-dropdown-bg-hover-color
- --topmenu-hover-border-color
- --dropdown-links-hover-bg-color
- --social-icon-hover-color
- --sideblock-heading-border-color
- --sidebar-subtest-color
- --sidebar-links-hover-bg-color Fold
- --sidebar-collapsible-ufld-link-hover-bg (1)
- --sidebar-collapsible-body-bg (0.125)
- --footer-link-hover-color
- --license-link-hover-color
- --ui-icon-hover-bg
- --editor-icon-hover-bg
- --tabs-selected-bg
- --tabs-selected-outline
- --blockquote-colorbar-color (1)
- --pagetags-text-hover-bg-color
- --ui-button-hover-bg
- --ui-button-hover-outline
- --rating-module-bottom-border-color
- --modal-header-stripe
- --pager-selected-bg
- --hover-link-color Fold
- --swatch-important-text
- --swatch-primary Fold
- --medium-accent : 100, 46, 44;
--medium-accent: Theme color: Fold
- --swatch-primary-darker Fold
- --header-gradient-color-bottom
- --swatch-primary-darker Fold
- --dark-accent : 100, 3, 15;
--dark-accent: Darker theme color: Fold
- --swatch-primary-darkest Fold
- --visited-link-color
- --login-myaccount-underline-color
- --login-myaccount-hover-bg-color
- --footer-bg-color
- --ui-icon-bg
- --tables-header-bg
- --footnotes-footer-colorbar-color
- --footnotes-footer-title-bg-color
- --toc-header-bg-color
- --pagetags-title-bg
- --pagetags-text-color
- --modal-header-bg
- --pager-hover-bg
- --swatch-primary-darkest Fold
- --alt-accent : 221, 102, 17;
--alt-accent: Alternate accent color, for newpage links: Fold
- --white-monochrome: 252, 252, 252;
-
- Hidden Fold
This is some text.1
This is some more text.2
This is even more text.3
This is just a little bit more text.4
This is a few more words for more testing.5
This is some more words for more testing.6
This is even more words for more testing.7
This is just a few more words to keep the test going.8
The first pulsar was observed by J. Bell and A. Hewish [1]. Another reference [see 2].
/* Fix the Code alignment issues with the lined paper background. */ .code { background-size: 100% 1.75em; font-size: 0.7em; } .code>* { line-height: 1.75em; } /* Fix the Footnote Block alignment with the lined paper background. */ .footnotes-footer>* { line-height: 1.8em; } .footnotes-footer .title { margin: -0.75em 0 1em 0; } .footnotes-footer div.footnote-footer:not([id*="footnote-1"]) { margin-top: 0em !important; } .footnotes-footer .footnote-footer > a:first-child::before { height: 90%; }