component:heatmap

Include this CSS on your page by adding the following code:

[[include :scp-sandbox-3:component:heatmap]]

@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");
:root {
    /* S-CSS-P Integration */
    --theme-base: "black-highlighter";
    --theme-id: "heatmap";
    --theme-name: "I'd Rather Be Using Seaborn";
 
    --hm1: 163, 8, 67;
    --hm2: 226, 82, 73;
    --hm3: 248, 141, 81;
    --hm4: 254, 250, 183;
    --hm5: 163, 217, 163;
    --hm6: 2, 148, 81;
    --hm7: 60, 148, 183;
    --hm8: 93, 77, 160;
    --hm9: 16, 38, 112;
 
    /* 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 */
    --bright-accent: 14, 65, 102;
    /* blue */
    --medium-accent: 60, 100, 120;
    /* medium blue */
    --dark-accent: 12, 36, 54;
    /* dark blue */
    --newpage-color: 99, 190, 255;
    /* bright blue */
    --background-gradient-color: var(--light-gray-monochrome); 
    --header-gradient-color-bottom: var(--hm7); 
    --header-gradient-color-middle: var(--hm6); 
    --header-gradient-color-top: var(--hm5);  
 
/* Primary Theme Colors */
    --swatch-background: var(--hm9);
    --swatch-primary: var(--white-monochrome);
    --swatch-primary-darker: var(--hm4);
    --swatch-primary-darkest: var(--hm4);
    /* Primary Text Colors */
    --swatch-text-dark: var(--hm4);
    --swatch-text-light: var(--hm1);
    --swatch-text-general: var(--hm4);
    --swatch-important-text: var(--hm1);
 
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--hm9);
    --swatch-menubg-light-color: var(--hm6);
    --swatch-menubg-medium-color: var(--hm5);
    --swatch-menubg-medium-dark-color: var(--hm4);
    --swatch-menubg-dark-color: var(--black-monochrome);
    --swatch-menubg-black-color: var(--black-monochrome);
    --swatch-menubg-hover-color: var(--black-monochrome);
    --swatch-menutxt-dark-color: var(--hm4);
    --swatch-menutxt-light-color: var(--hm1);
    --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(--hm5);
    --visited-link-color: var(--hm7);
    --hover-link-color: var(--hm6);
    --newpage-color: var(--hm5);
    --sidebar-links-text: var(--swatch-menutxt-general-color);
 
}