Theme Colors
Usage
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
To import this theme, add this to your page:
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:galactic-theme]]
Examples
A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
This is a tab view.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
The header font is Sirin Stencil. The monospace font used is PT Mono.
/* Fonts */ @import url('https://fonts.googleapis.com/css?family=Sirin+Stencil'); /* All Vars Used */ @supports(display:grid) { :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "black-highlighte"; /* must be either "nuscp" or "sigma9" */ --theme-id: "galfed-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Galactic Federation Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:galactic-theme/galfedlogo.gif"); --header-title: "GALACTIC FEDERATION"; --header-subtitle: "cleansing the defiled minds"; /* Typefaces */ --header-font: 'Sirin Stencil', 'Poppins', sans-serif; --title-font: 'Sirin Stencil', 'Poppins', sans-serif; --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --white-monochrome: 246, 246, 246; /* 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: 69, 69, 72; /* gray */ --dark-gray-monochrome: 51, 48, 52; /* dark accent gray for sidebar background */ --black-monochrome: 14, 4, 14; /* black */ --bright-accent: 203, 90, 204; /* purple */ --pale-accent: 143, 64, 145; /* medium-dark purple */ --medium-accent: 111, 25, 93; /* medium purple */ --dark-accent: 27, 22, 62; /* dark purple */ --alt-accent: 7, 190, 234; /* pale orange */ /* Primary Theme Colors */ --swatch-background: var(--black-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(--white-monochrome); --swatch-important-text: var(--bright-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--black-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(--bright-accent); --swatch-menutxt-general-color: var(--white-monochrome); --swatch-border-color: var(--bright-accent); /* Primary Header Colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --rating-module-button-color: var(--swatch-menutxt-light-color); --rating-module-text-color: var(--swatch-menutxt-light-color); /* ===SECONDARY & TERTIARY COLORS=== */ /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--swatch-menubg-dark-color); --swatch-tertiary-color: var(--swatch-primary); --swatch-alternate-color: var(--swatch-primary-darkest); /* 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-light-color); /* Link Colors */ --link-color: var(--bright-accent); --visited-link-color: var(--swatch-primary); --hover-link-color: var(--alt-accent); /* Header Gradients */ --gradient-topmenu-mobile: inherit; --diagonal-stripes: inherit; /* Sidebar */ --background-gradient-color: rgba(var(--black-monochrome), 0); } /* =============================== ======= SPECIFIC COLORS ======= =============================== /* Colors for Buttons, Tabs, Tables, Footnotes Hover/Modal, Etc. */ :root { /* ===TOPBAR GRADIENT=== */ /* Colors used in the --gradient-topmenu var to give the topbar its color */ --swatch-topmenu-bg-color: var(--swatch-background), 0.125; --swatch-topmenu-border-color: var(--swatch-background), 0.125; } #main-content { /* ===MAIN CONTENT UI ELEMENTS */ /* ===UI ICONS=== */ /* ===PAGE OPTIONS ICONS=== */ --ui-icon-color: var(--swatch-primary); --ui-icon-bg: var(--swatch-primary-darkest); --ui-icon-hover-color: var(--swatch-primary-darkest); --ui-icon-hover-bg: var(--swatch-primary); } /* ===GLOBAL ELEMENTS=== */ :root { /* ===UI BUTTONS=== */ --ui-button-bg: var(--swatch-primary-darkest); --ui-button-txt: var(--swatch-text-tertiary-color); --ui-button-hover-bg: var(--swatch-primary); --ui-button-hover-txt: var(--swatch-text-tertiary-color); --ui-button-hover-outline: var(--swatch-primary); } ::-moz-selection { background: rgba(var(--bright-accent), 0.5); } ::selection { background: rgba(var(--bright-accent), 0.5); } h1, h2, h3, h4, h5, h6, h7 { color: rgb(var(--swatch-primary)); font-family: var(--title-font); } body { background-image: inherit; color: rgb(var(--swatch-text-light)); } #extra-div-1, #extra-div-2 { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--final-header-height-on-desktop) + 10rem); overflow: hidden; pointer-events: none; will-change: transform; } #extra-div-1 { z-index: -3; opacity: 0.75; background-position: center top; } #extra-div-1::before { -webkit-animation: move 90s infinite cubic-bezier(0.4, 0, 0.2, 1); animation: move 90s infinite cubic-bezier(0.4, 0, 0.2, 1); } #extra-div-2::before { z-index: -2; -webkit-animation: move 120s infinite cubic-bezier(0.4, 0, 0.2, 1) 30s; animation: move 120s infinite cubic-bezier(0.4, 0, 0.2, 1) 30s; opacity: 0.5; background-position: left -12.5rem top -3.125rem; } #extra-div-1::before, #extra-div-2::before { content: " "; position: absolute; width: 150%; height: 100%; background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Agalactic-theme/galfed_bg.png'); background-repeat: repeat-x; background-size: 50%; pointer-events: none; will-change: transform; -webkit-mask: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 120%); mask: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 120%); } #header { background-position: left .75rem top .65rem; background-size: auto 6.375rem; } #header::before { background-size: auto 9rem; } #header h1 a { position: relative; font-variant-ligatures: no-common-ligatures; } #header h1, #header h2 { font-weight: normal; font-variant-ligatures: no-common-ligatures; } #header h2 span { font-variant-ligatures: no-common-ligatures; } #header h1 a::before, #header h1 a::after { content: var(--header-title); width: 100%; height: 100%; mix-blend-mode: screen; font-variant-ligatures: no-common-ligatures; } #header h1 a::after { position: absolute; z-index: -1; left: 0; transform: translateY(-0.25rem) translateX(-0.125rem); color: rgb(var(--bright-accent)); mix-blend-mode: overlay; } #header h2 span::before { font-family: var(--header-font); font-weight: 800; letter-spacing: 0.25em; font-feature-settings: inherit; font-variant-ligatures: no-common-ligatures; } #header h1 a::before, #header h2 span::before { -webkit-text-stroke: transparent; } #header h2 span::after { display: none; } #header div[class*="top-bar"] * { color: rgb(var(--swatch-text-tertiary-color)); } #login-status span.printuser { color: rgb(var(--swatch-text-tertiary-color)); } #interwiki { background-color: transparent; } #side-bar { background-color: rgba(var(--swatch-menubg-dark-color), 0.1); } #side-bar:hover { background-color: rgba(var(--swatch-menubg-color), 0.1); ; } #side-bar .side-block { background-color: inherit; } #interwiki div.menu-item a, #interwiki div.menu-item a:visited, #interwiki div.menu-item a:active, #side-bar div.menu-item a, #side-bar div.menu-item a:visited, #side-bar div.menu-item a:active, #side-bar div.menu-item .text { color: rgb(var(--swatch-menutxt-light-color)); font-weight: 500; } #interwiki .heading p, #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { padding-right: 0.5rem; color: rgb(var(--swatch-primary)); font-size: 1.15em; font-weight: 500; text-shadow: inherit; } #page-title::before, .meta-title::before, #page-title::after, .meta-title::after { background-attachment: fixed; background-position: top var(--final-header-height-on-desktop) center; background-size: min(90vw, var(--body-width-on-desktop)); background-image: radial-gradient(rgb(var(--swatch-primary)) 0%, rgb(var(--swatch-primary)) 40%, rgba(var(--swatch-primary-darkest), 0) 100%); background-color: transparent; } blockquote, textarea { border-color: rgb(var(--medium-accent)); background-color: rgba(var(--swatch-menubg-dark-color), 0.5); color: rgb(var(--swatch-menutxt-light-color)); font-family: var(--body-font); } .code { border: 0.0625rem dashed rgb(var(--bright-accent)); background-color: rgba(var(--swatch-menubg-dark-color), 0.25); color: rgb(var(--swatch-menutxt-light-color)); font-family: var(--mono-font); word-break: break-all; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .code, .code pre, .code pre span.hl-code, .code pre span.hl-identifier { color: rgb(var(--swatch-menutxt-light-color)); } .scp-image-block .scp-image-caption { background-color: rgb(var(--swatch-primary-darkest)); } .yui-navset .yui-nav a, yui-navset .yui-navset-top .yui-nav a, .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { background-color: rgba(var(--swatch-menubg-dark-color), 0.5); color: rgb(var(--swatch-menutxt-light-color)); } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { border-color: rgb(var(--medium-accent)); } table.wiki-content-table, table.wiki-content-table tbody { border-collapse: collapse; } table.wiki-content-table th { background: rgba(var(--swatch-menubg-dark-color), 0.5); color: rgb(var(--bright-accent)); font-family: var(--header-font); font-size: calc(var(--base-font-size) * 1.1); } table.wiki-content-table th, table.wiki-content-table tr { border: .0625rem solid rgba(var(--bright-accent), 0.25) !important; text-shadow: none; } table.wiki-content-table td { border: .0625rem solid rgb(var(--medium-accent)); } .content-panel.standalone { background: rgb(var(--swatch-primary-darkest)); } hr { border-top: none; background: linear-gradient(10deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%); -webkit-filter: blur(0.04rem); filter: blur(0.04rem); } #odialog-container, .title.modal-header, .owindow, .hovertip { background-color: rgb(var(--swatch-primary-darkest)); color: rgb(var(--white-monochrome)); } #main-content .page-tags { box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-primary)); } #main-content .page-tags::before { background-color: rgb(var(--swatch-primary)); } #lock-info { background: rgb(var(--swatch-menubg-dark-color)); } #page-content>div.unmargined { background: rgb(var(--bright-accent)); } #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]), #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]) { color: rgb(var(--swatch-primary-secondary-color)); } /* Sky Sermon Nav CSS */ .skysermon-nav { --text-shadow: rgba(var(--black-monochrome), 0.35); --box-shadow: rgb(var(--gray-monochrome)); --border-color: rgb(var(--bright-accent)); margin: 0.625rem 0 0.938rem; margin-bottom: 1.250rem; padding: 0 0.125rem; border: double 0.188rem var(--border-color); border-radius: 0.0625rem; background-color: rgb(var(--dark-accent)); box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow); color: rgb(var(--white-monochrome)); text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow); } .skysermon-nav a { display: inline-block; position: relative; width: 100%; height: 100%; padding-top: 0.45em; padding-bottom: 0.35em; color: rgb(var(--bright-accent)); } .skysermon-nav a::before { display: flex; position: absolute; top: 0; align-items: center; height: 100%; font-size: calc(var(--base-font-size) * 1.1); font-weight: 800; line-height: calc(var(--base-font-size) * 0.7); } .skysermon-nav .footer-wikiwalk-nav { display: flex; align-items: center; justify-content: center; } .skysermon-nav .footer-wikiwalk-nav * { line-height: 1em; } .skysermon-nav .footer-wikiwalk-nav .center { flex-basis: 8em; text-align: center; } .skysermon-nav .footer-wikiwalk-nav .left, .skysermon-nav .footer-wikiwalk-nav .right { display: inline-flex; position: relative; flex-basis: calc(50% - 5em); align-items: center; font-size: calc(var(--base-font-size) * 0.8); } .skysermon-nav .footer-wikiwalk-nav .left { justify-content: flex-end; margin: 0.35em 0 0.35em 0.35em; padding-right: 0.5em; padding-left: 1em; border-right: 0.0625rem solid rgb(var(--white-monochrome)); text-align: right; } .skysermon-nav .left>a::before { content: "«"; left: -0.75em; transition: left 1s ease-in-out; will-change: left; -webkit-animation: bounce-left 1.7s infinite; animation: bounce-left 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .skysermon-nav .left>a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } .skysermon-nav .footer-wikiwalk-nav .right { justify-content: flex-start; margin: 0.35em 0.35em 0.35em 0; padding-right: 1em; padding-left: 0.5em; border-left: 0.0625rem solid rgb(var(--white-monochrome)); text-align: left; } .skysermon-nav .right>a::before { content: "»"; right: -0.75em; transition: left 1s ease-in-out; will-change: right; -webkit-animation: bounce-right 1.7s infinite; animation: bounce-right 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .skysermon-nav .right>a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } @media only screen and (max-width: 56.25rem) { #header h1 a { margin-top: calc(0.625rem + var(--offset-from-page-top)); } #header h2 span { margin-left: 7.75rem; } #header h2 span::before { letter-spacing: 0.1em; } #skrollr-body:target #container { transform: none; } #skrollr-body:target #container-wrap-wrap { overflow: hidden; } #top-bar { background-color: rgb(var(--black-monochrome)) } #top-bar div.top-bar>ul>li>ul, #top-bar div.mobile-top-bar>ul>li>ul { display: flex; transform: translate(-50%, 0); } #top-bar div.mobile-top-bar>ul>li>ul>li { display: flex; flex-basis: calc(98vw / 2); flex-grow: 2; width: calc(98vw + 1px); max-width: calc(98vw + 1px); max-height: calc(99vh / 15); } #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: calc(var(--base-font-size) * 0.8); line-height: 1em; } #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(1)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(11)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(21)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(31)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(41)>a::before, #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(51)>a::before { display: flex; align-items: center; justify-content: center; } #side-bar { background-color: rgba(var(--swatch-menubg-dark-color), 1); } #side-bar:hover { background-color: rgba(var(--swatch-menubg-color), 1); ; } } /* CSS Animations */ @-webkit-keyframes move { 25% { transform: translateY(-3.125rem) translateX(0); } 50% { transform: translateY(0px) translateX(-3.125rem); } 75% { transform: translateY(-3.125rem) translateX(0); } } @keyframes move { 25% { transform: translateY(-3.125rem) translateX(0); } 50% { transform: translateY(0px) translateX(-3.125rem); } 75% { transform: translateY(-3.125rem) translateX(0); } } @-webkit-keyframes move2 { 25% { transform: translateY(0) translateX(-3.125rem); } 50% { transform: translateY(-3.125rem) translateX(0); } 75% { transform: translateY(0) translateX(-3.125rem); } } @keyframes move2 { 25% { transform: translateY(0) translateX(-3.125rem); } 50% { transform: translateY(-3.125rem) translateX(0); } 75% { transform: translateY(0) translateX(-3.125rem); } } @-webkit-keyframes flicker { 0% { opacity: .1; } 10% { opacity: 1; } 15% { opacity: .3; } 17% { opacity: 1; } 20% { opacity: .5; } 25% { opacity: .2; } 30% { opacity: 1; } 43% { opacity: .3; } 43% { opacity: .8; } 75% { opacity: .75; } 79% { opacity: .53; } 80% { opacity: .69; } 100% { opacity: 1; } } @keyframes flicker { 0% { opacity: .1; } 10% { opacity: 1; } 15% { opacity: .3; } 17% { opacity: 1; } 20% { opacity: .5; } 25% { opacity: .2; } 30% { opacity: 1; } 43% { opacity: .3; } 43% { opacity: .8; } 75% { opacity: .75; } 79% { opacity: .53; } 80% { opacity: .69; } 100% { opacity: 1; } } @-webkit-keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @-webkit-keyframes bounce-left { 0% { left: -0.75em; } 50% { left: -0.50rem; } 100% { left: -0.75em; } } @keyframes bounce-left { 0% { left: -0.75em; } 50% { left: -0.50rem; } 100% { left: -0.75em; } } @-webkit-keyframes bounce-right { 0% { right: -0.75em; } 50% { right: -0.50rem; } 100% { right: -0.75em; } } @keyframes bounce-right { 0% { right: -0.75em; } 50% { right: -0.50rem; } 100% { right: -0.75em; } } }
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; background: unset; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu { pointer-events: none; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; pointer-events: none; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after { opacity: 0; pointer-events: none; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar { padding: inherit; } } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @supports (-webkit-hyphens:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } }
:root { /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; }