评分模块与著作信息模块:
主题颜色
这是由 EstrellaYoshte 制作的基于黑色标记笔的主题版式,衍生自 SCP-5999 的视觉效果。
若你想使用此版式,你还需要导入黑色标记笔版式。点击这里了解更多。
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:isolated-terminal]]

图像
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
1 级标题
2 级标题
3 级标题
4 级标题
5 级标题
6 级标题
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。1
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
[[div class="expoblock"]]
在 expoblock div 元素中的水平分割线。
[[span class="hilighter"]]
奇妙又难以置——你懂的。
更多配置
添加如下补丁以禁用扫描线滤镜:
[[module CSS]]
div#extrac-div-1, div#extrac-div-2 {
display: none;
}
[[/module]]
尽管推荐使用原版版式,但仍可以在 [[include]] 之后添加如下语法来改变颜色:
:root {
--accentColor: 246,196,3;
--darkColor: 40,26,8;
}
--accentColor 控制主要强调色(默认为黄色)。
--darkColor 控制背景以及版式的暗色阴影。
将其修改为你所想要颜色的 RGB 格式。
建议不要使用纯黑背景色。
页眉字体为 IBM VGA8x16 / 黑体。
正文字体为 Terminus / 幼圆。
等宽字为 ProFontWindows / 宋体。
源代码
@import url('https://scp-wiki.wdfiles.com/local--files/theme%3Aisolated-terminal/terminus.css'); @import url('https://scp-wiki.wdfiles.com/local--files/theme%3Aisolated-terminal/profontwindows.css'); @import url('https://scp-wiki.wdfiles.com/local--files/theme%3Aisolated-terminal/vga8.css'); :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "black-highlighter"; /* must be either "black-highlighter" or "sigma9" */ --theme-id: "isolated-terminal"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Isolated Terminal Theme"; /* set this to your theme's full name */ /* header measurements */ --header-height-on-desktop: 12.4rem; --header-height-on-mobile: 12rem; --header-h1-font-size: calc(var(--base-font-size) * 3); /* Typefaces */ --body-font: 'terminus_ttfmedium', sans-serif; --header-font: 'mxplus_ibm_vga_8x16regular', sans-serif; --title-font: 'mxplus_ibm_vga_8x16regular', sans-serif; --mono-font: 'profontwindowsregular', monospace; --UI-font: 'profontwindowsregular', monospace; --base-font-size: 1.1rem; /* null logo */ --logo-image: none; /* change title */ --header-title: "SCP FOUNDATION"; /* Header Gradients */ --diagonal-stripes: initial; /*----*/ --accentColor: 246,196,3; --darkColor: 40,26,8; --bright-accent: var(--accentColor); --dark-accent: var(--accentColor); --pale-accent: var(--accentColor); --medium-accent: var(--accentColor); --black-monochrome: var(--accentColor); --dark-gray-monochrome: var(--darkColor); --gray-monochrome: var(--darkColor); --light-pale-gray-monochrome: var(--darkColor); --pale-gray-monochrome: var(--accentColor); --very-light-gray-monochrome: var(--darkColor); --white-monochrome: var(--darkColor); --rating-module-bg-color: var(--pale-gray-monochrome); --rating-module-button-color: var(--white-monochrome); --rating-module-button-credit-color: var(--white-monochrome); --rating-module-text-color: var(--white-monochrome); --rating-module-button-cancel-color: var(--gray-monochrome); --rating-module-button-plus-color: var(--rating-module-button-cancel-color); --rating-module-button-negative-color: var(--rating-module-button-cancel-color); --rating-module-text-hover-color: var(--pale-gray-monochrome); --swatch-headerh1-color: var(--black-monochrome); --swatch-menubg-medium-color: var(--bright-accent); --swatch-menubg-light-color: var(--gray-monochrome); --swatch-menutxt-light-color: var(--black-monochrome); --swatch-menubg-medium-dark-color: var(--black-monochrome); --swatch-primary-darker: var(--bright-accent); --swatch-primary-darkest: var(--pale-gray-monochrome); --swatch-text-secondary-color: var(--white-monochrome); --swatch-text-light: var(--bright-accent); --swatch-topmenu-bg-color: var(--bright-accent); --gradient-header: none; --gradient-background: rgb(var( --gray-monochrome)); /* Desktop Sidebar button */ --toggle-button-bg: rgb(var(--swatch-menubg-light-color)); --toggle-border-width: 0; --toggle-icon-color: rgb(var(--swatch-primary-darkest)); --toggle-roundness: 0; } :root:lang(cn) { /* Typefaces */ --body-font: 'terminus_ttfmedium', '幼圆', sans-serif; --header-font: 'mxplus_ibm_vga_8x16regular', '黑体', sans-serif; --title-font: 'mxplus_ibm_vga_8x16regular', '黑体', sans-serif; --mono-font: 'profontwindowsregular', '宋体', monospace; --UI-font: 'profontwindowsregular', '宋体', monospace; /* change title */ --header-title: "SCP基金会"; } /* ------------------------------- */ /* header title adjustments */ #header::before { opacity: 1; } /* change logo opacity */ #header { filter: none; } #header h1, #header h1 a, #header h1 a::before { text-shadow: none; letter-spacing: 0.1rem; align-self: flex-end; } #header h1 a::before { height: 0.5em; -webkit-text-stroke: 0; } #header h1 a::after, #header h1 a span, #header h2 { display: none; } /* svg logo mask */ #header::before { background-color: rgb(var(--black-monochrome)); -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='1040' height='1040'%3E%3Cpath d='M437 969v-10h-73v-18h-36v-18h-36v-18h-36v-18h-56v18h-72v-36h-18v-36H92v-37H74v-36H55v-36H37v-36H19v-56h18v-18h18v-18h19V451h18v-72h18v-38h18v-36h18v-36h18v-18h18v-18h18v-19h20v-18h18v-18h18v-18h36v-18h36v-18h18v-18h18V50h19V32h272v18h19v56h18v18h18v18h36v18h36v18h18v18h20v18h18v19h18v18h18v18h18v36h18v36h18v38h18v72h18v145h19v18h18v18h18v56h-18v36h-18v36h-19v36h-18v37h-18v36h-18v36h-72v-18h-56v18h-36v18h-36v18h-36v18h-73v20H437v-10zm146-37v-9h72v-18h37v-18h36v-18h18v-18h92v18h54v-36h18v-37h18v-36h18v-36h18v-36h19v-38h-19v-18h-18v-18h-18V469h-18v-72h-18v-38h-18v-36h-18v-18h-18v-36h-18v-18h-20v-18h-18v-19h-36v-18h-18v-18h-36v-18h-18v-18h-19v-36h-18V70H401v36h-18v36h-19v18h-18v18h-36v18h-18v18h-36v19h-18v18h-18v18h-20v36h-18v18h-18v36h-18v38h-18v72h-18v145H92v18H74v18H55v38h19v36h18v36h18v36h18v37h18v36h54v-18h92v18h18v18h36v18h37v18h72v18h128v-9z'/%3E%3Cpath d='M437 805v-9h-54v-18h-37v-18h-18v-18h-18v-18h-18v-18h-36v18h-36v18h-20v-18h-18v-36h38v-18h18v-20h18v-18h-18v-72h-18v-73h18v-72h18v-36h18v-38h18v-18h18v-18h18v-18h18v-18h37v-18h36v-18h72v-55h56v55h72v18h36v18h37v18h18v18h18v18h18v18h18v38h18v36h18v72h20v73h-20v72h-18v18h18v20h20v18h36v36h-18v18h-18v-18h-38v-18h-36v18h-18v18h-18v18h-18v18h-37v18h-54v18H437v-9zm164-54v-9h36v-18h37v-18h18v-18h18v-18h-18v-20h-37v-18h-18v38h-18v-20h-18v-36h-18v-18h-18v-18h-18v-36h90v18h55v18h-18v18h18v18h36v18h18v-54h18V469h-18v-54h-18v-36h-18v-20h-18v-18h-18v-18h-37v-18h-36v-18h-54v92h36v36h-18v36h-18v36h-18v18h-20v-18h-18v-36h-18v-36h-18v-36h36v-92h-54v18h-36v18h-37v18h-18v18h-18v20h-18v36h-18v54h-18v109h18v54h18v-18h36v-18h18v-18h-18v-18h55v-18h90v36h-18v18h-18v18h-18v36h-18v20h-18v-38h-18v18h-37v20h-18v18h18v18h18v18h37v18h36v18h164v-9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='1040' height='1040'%3E%3Cpath d='M437 969v-10h-73v-18h-36v-18h-36v-18h-36v-18h-56v18h-72v-36h-18v-36H92v-37H74v-36H55v-36H37v-36H19v-56h18v-18h18v-18h19V451h18v-72h18v-38h18v-36h18v-36h18v-18h18v-18h18v-19h20v-18h18v-18h18v-18h36v-18h36v-18h18v-18h18V50h19V32h272v18h19v56h18v18h18v18h36v18h36v18h18v18h20v18h18v19h18v18h18v18h18v36h18v36h18v38h18v72h18v145h19v18h18v18h18v56h-18v36h-18v36h-19v36h-18v37h-18v36h-18v36h-72v-18h-56v18h-36v18h-36v18h-36v18h-73v20H437v-10zm146-37v-9h72v-18h37v-18h36v-18h18v-18h92v18h54v-36h18v-37h18v-36h18v-36h18v-36h19v-38h-19v-18h-18v-18h-18V469h-18v-72h-18v-38h-18v-36h-18v-18h-18v-36h-18v-18h-20v-18h-18v-19h-36v-18h-18v-18h-36v-18h-18v-18h-19v-36h-18V70H401v36h-18v36h-19v18h-18v18h-36v18h-18v18h-36v19h-18v18h-18v18h-20v36h-18v18h-18v36h-18v38h-18v72h-18v145H92v18H74v18H55v38h19v36h18v36h18v36h18v37h18v36h54v-18h92v18h18v18h36v18h37v18h72v18h128v-9z'/%3E%3Cpath d='M437 805v-9h-54v-18h-37v-18h-18v-18h-18v-18h-18v-18h-36v18h-36v18h-20v-18h-18v-36h38v-18h18v-20h18v-18h-18v-72h-18v-73h18v-72h18v-36h18v-38h18v-18h18v-18h18v-18h18v-18h37v-18h36v-18h72v-55h56v55h72v18h36v18h37v18h18v18h18v18h18v18h18v38h18v36h18v72h20v73h-20v72h-18v18h18v20h20v18h36v36h-18v18h-18v-18h-38v-18h-36v18h-18v18h-18v18h-18v18h-37v18h-54v18H437v-9zm164-54v-9h36v-18h37v-18h18v-18h18v-18h-18v-20h-37v-18h-18v38h-18v-20h-18v-36h-18v-18h-18v-18h-18v-36h90v18h55v18h-18v18h18v18h36v18h18v-54h18V469h-18v-54h-18v-36h-18v-20h-18v-18h-18v-18h-37v-18h-36v-18h-54v92h36v36h-18v36h-18v36h-18v18h-20v-18h-18v-36h-18v-36h-18v-36h36v-92h-54v18h-36v18h-37v18h-18v18h-18v20h-18v36h-18v54h-18v109h18v54h18v-18h36v-18h18v-18h-18v-18h55v-18h90v36h-18v18h-18v18h-18v36h-18v20h-18v-38h-18v18h-37v20h-18v18h18v18h18v18h37v18h36v18h164v-9z'/%3E%3C/svg%3E"); -webkit-mask-size: calc(var(--header-height-on-desktop) - var(--header-h1-font-size) - 1rem); mask-size: calc(var(--header-height-on-desktop) - var(--header-h1-font-size) - 1rem); -webkit-mask-position: center 0; mask-position: center 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #header { --swatch-text-secondary-color: var(--black-monochrome); --login-dropdown-text-hover-color: var(--white-monochrome); } #my-account:hover, #my-account:active, #my-account:focus { --login-myaccount-color: var(--white-monochrome); } #search-top-box:focus-within { --search-icon-hover-color: var(--swatch-menubg-light-color); } #search-top-box form[id="search-top-box-form"] input[type="text"] { --search-focus-textbox-bg-color: var(--black-monochrome); background-color: rgb(var(--search-focus-textbox-bg-color), 0.06)!important; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { --search-textbox-text-color: var(--black-monochrome); } #top-bar { --dropdown-links-hover-color: var(--white-monochrome); } #top-bar .mobile-top-bar > ul > li > a { --topmenu-category-color: var(--white-monochrome); } #top-bar .mobile-top-bar > ul > li:hover > a, #top-bar .mobile-top-bar > ul > li:active > a, #top-bar .mobile-top-bar > ul > li:focus-within > a { --topmenu-category-hover-bg: var(--white-monochrome); } #header div[class*="top-bar"] > div.open-menu > p > a { --mobile-topmenu-sidebar-button-color: var(--white-monochrome); } /* ------------------------------- */ /* EDITBOX */ #wd-editor-toolbar-panel { --editor-icon-color: var(--white-monochrome); } form#edit-page-form .edit-page-bottomtable div.sub { color: var(--swatch-primary-darkest); } /* ------------------------------- */ /* Image Block */ .scp-image-block { box-sizing: border-box; border-width: 0; box-shadow: none; } .scp-image-block .scp-image-caption { color: rgb(var(--swatch-text-secondary-color)); background-color: rgb(var(--swatch-primary-darker)); border-color: rgb(var(--swatch-primary-darker)); padding: 0.15rem; margin-top: 6px; } /* Blockquote */ #main-content { --blockquote-bg-color: var(--swatch-tertiary-color), 0.06; } /* Code */ div.code { background-color: #f4f4f4; text-shadow: none; } /* hr */ hr { background-color: rgb(var(--swatch-menubg-medium-color)); height: 0; margin-top: 1.5em; margin-bottom: 1.5em; } blockquote > hr, div.blockquote > hr { margin-left: -1.25em; margin-right: -1.25em; } /* footnotes */ a.footnoteref { display: inline; } .footnotes-footer a[href*="javascript"]:any-link { margin-right: -0.45rem; } .footnotes-footer a[href*="javascript"]::before { padding-left: 0.35em; } .footnotes-footer a[href*="javascript"]::before, .footnotes-footer a[href*="javascript"]:hover::before { color: rgb(var(--swatch-secondary-color)); background-color: rgb(var(--swatch-primary)); } .footnotes-footer, .bibitems { background-color: rgba(var(--footnotes-footer-colorbar-color),0.06); } /* LINK */ #main-content a:not(#breadcrumbs a, .pseudocrumbs a, .page-rate-widget-box a, .rate-box-with-credit-button a, ul.yui-nav a, .printuser.avatarhover a:first-child, .footnote-footer > a[href*="javascript"], div[id*="page-options-bottom"] a, .danger-diamond a) { font-weight: bold; color: rgb(var(--gray-monochrome)); padding: 0.115em; background-color: rgb(var(--black-monochrome)); } #main-content a:not(#breadcrumbs a, .pseudocrumbs a, .page-rate-widget-box a, .rate-box-with-credit-button a, ul.yui-nav a, .printuser.avatarhover a:first-child, .footnote-footer > a[href*="javascript"], div[id*="page-options-bottom"] a, .danger-diamond a):hover { box-shadow: 0 0 0.7em 0.1em rgba(var(--black-monochrome),0.3); } /* CUSTOM BLOCKS */ .expoblock { box-sizing: border-box; border: solid 0.7rem rgb(var(--black-monochrome)); padding: 1rem; } .expoblock hr { height: 0.6rem; margin: 1.5em 0; } span.hilighter { background-color: rgb(var(--black-monochrome)); color: rgb(var(--gray-monochrome)); font-weight: bold; padding: 0.2em; font-size: 108%; line-height: 1.2; } /* author label compatibility */ #page-content .authorlink-wrapper > a::before { color: rgb(var(--gray-monochrome)); } #page-content .authorlink-wrapper .authorbox { filter: drop-shadow(0 0 3px rgba(var(--black-monochrome),0.75)); } /* ayers info compatibility */ .info-container { --barColour: rgb(var(--accentColor)); --linkColour: rgb(var(--darkColor)); } #main-content #page-content .info-container > .collapsible-block a.collapsible-block-link { background-color: var(--linkColour); } .info-container .collapsible-block-unfolded { border-color: rgb(var(--accentColor)); } /*---- PAGE TAGS ----*/ #main-content .page-tags { margin-bottom: 1rem; } #main-content .page-tags span { display: block; } #content-wrap #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) { margin: 0.2rem; padding: 0.2em 0.25em; } /*---- BOTTOM OPTIONS ----*/ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn { --button-padding: calc(var(--icon-size) / 6); flex-basis: 6rem; flex-grow: 1; } div[id*="page-options-bottom"]>a#more-options-button { flex-grow: 4; } /*---- LICENSE AREA ----*/ #license-area { --swatch-text-secondary-color: var(--black-monochrome); --license-link-hover-bg-color: var(--black-monochrome); --license-link-hover-color: var(--white-monochrome); } /*---- SCANLINE MONITOR EFFECT ----*/ #extrac-div-1 { position: fixed; width: 100vw; height: 100vh; pointer-events: none; background: repeating-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.15) 50%,rgba(0,0,0,0)); background-size: auto 8px; opacity: 0.7; } #extrac-div-2 { position: fixed; width: 100vw; height : 1rem; top: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); opacity : .1; animation: scanm 6s linear infinite; } @keyframes scanm { 0% { top: -1rem; opacity : .05;} 25% { top: 50%; opacity: .03;} 37.5% { top: 75%; opacity: 0.06;} 50% { top: 100%; opacity: .03;} 100% { top: 100%;} } #extrac-div-3 { position: fixed; width: 100vw; height: 100vh; pointer-events: none; background-image: radial-gradient(circle, rgb(230,210,200) 0%, rgb(177,158,152) 60%, rgb(55,28,30) 100%); opacity: 0.25; mix-blend-mode: color-dodge; background-repeat: no-repeat; background-size: cover; z-index: 30; } /* fixes a chrome bug */ html { background: rgb(var(--swatch-background)); } /*---- MOBILE QUERY ----*/ @media only screen and (max-width: 56.25rem) { :root { --header-h1-font-size: calc(var(--base-font-size) * 2.4); } #login-status:hover { background-color: rgba(var(--swatch-menubg-light-color),0.65); backdrop-filter: blur(0.1rem); } }
:root { --body-font: 'terminus_ttfmedium', '幼圆', sans-serif; --UI-font: 'profontwindowsregular', '宋体', monospace; --title-font: 'mxplus_ibm_vga_8x16regular', '黑体', sans-serif; --base-font-size: 1.1rem; --accentColor: 246, 196, 3; --darkColor: 40, 26, 8; --white-monochrome: var(--darkColor); --black-monochrome: var(--accentColor); --bright-accent: var(--accentColor); --medium-accent: var(--accentColor); --dark-accent: var(--accentColor); --swatch-primary-darker: var(--bright-accent); --swatch-text-secondary-color: var(--white-monochrome); }
@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; }