银河联邦 主题版式
黑色标记笔 主题版式 » 黑色标记笔 主题中心 » 银河联邦 主题版式
主题颜色
Abbey--gray-monochrome(69,69,72)
Amethyst--bright-accent(203,90,204)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Wild Sand--pale-gray-monochrome(244,244,244)
Silver Chalice--light-gray-monochrome(170,170,170)
Ship Gray--dark-gray-monochrome(51,48,52)
Gondola--black-monochrome(14,4,14)
Disco--medium-accent(111,25,93)
Blackcurrant--dark-accent(27,22,62)
Cerulean--newpage-color(7,190,234)
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
使用方法
注意:这是一个基于黑色标记笔的主题版式。若你想使用此版式,你还需要导入黑色标记笔版式。点击这里了解更多。
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:galactic-theme]]
示例
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
页眉字体为 Sirin Stencil / Noto Sans SC。等宽字为 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%3Agalactic-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); } :root:lang(cn) { /* Header */ --header-title: "银河联邦"; --header-subtitle: "净化被污秽的心灵"; /* Typefaces */ --header-font: 'Sirin Stencil', 'Poppins', "Noto Sans SC", sans-serif; --title-font: 'Sirin Stencil', 'Poppins', "Noto Sans SC", sans-serif; --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, '仿宋', monospace; } /* =============================== ======= 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)); } #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; } #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; } #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; } } }
:root { --title-font: 'Sirin Stencil', 'Poppins', "Noto Sans SC", sans-serif; --white-monochrome: 246, 246, 246; --black-monochrome: 14, 4, 14; --bright-accent: 203, 90, 204; --medium-accent: 111, 25, 93; --dark-accent: 27, 22, 62; --swatch-border-color: var(--bright-accent); } ::-moz-selection { background: rgba(var(--bright-accent), 0.5); } ::selection { background: rgba(var(--bright-accent), 0.5); } .side-block { background-color: inherit; } .side-block .heading p { padding-right: 0.5rem; color: rgb(var(--swatch-primary)); font-size: 1.15em; font-weight: 500; text-shadow: inherit; } .side-block div.menu-item a { color: rgb(var(--swatch-menutxt-light-color)); font-weight: 500; }
@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; }