灾害 主题版式
黑色标记笔 主题版式 » 黑色标记笔 主题中心 » 灾害 主题版式
这是灾害版式,为“非人类”设定所制作。
由 Oboebandgeek99 改编自
Croquembouche 的余烬旋流主题版式。该版式亦包含了
Woedenaz 的黑标居中页眉与黑标切换侧边栏。
页眉以 65 秒为周期循环昼夜。每个晚上开始下雨并在午夜消散。
使用方法
注意:这是一个基于黑色标记笔的主题版式。若你想使用此版式,你还需要导入黑色标记笔版式。点击这里了解更多。
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:calamity]]
主题颜色
Eastern Blue--medium-accent(23, 152, 158)
Scampi--dark-accent(90, 90, 152)
Scooter--bright-accent(51, 201, 208)
Melrose--pale-accent(150, 150, 254)
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Roman--sky-at-dawn(221, 93, 112)
Seagull--sky-at-morning(131, 192, 233)
Hippie Blue--sky-at-daytime(104, 153, 186)
Shuttle Gray--sky-at-evening(87, 98, 106)
Storm Dust--sky-at-dusk(99, 100, 90)
Mirage--sky-at-night(21, 25, 43)
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$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}

非人类 标志
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。1
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
正文字体为 Ubuntu / Noto Sans SC。
页眉字体为 Cabin Sketch / ZCOOL KuaiLe。
标题字体为 Baumans / ZCOOL XiaoWei。
等宽字为 Space Mono / 幼圆。
Footnotes
1. 这是一条脚注。
/* Calamity Theme [2021 Wikidot Theme] Created by Oboebandgeek99 Based on Swirling Ashes Theme created by Croquembouche. The UnHuman logo was created by Oboebandgeek99 based on an image in the Public Domain. Licensed under CC-BY-SA 3.0. */ @import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap'); @import url("https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=ZCOOL+XiaoWei&display=swap"); /* BHL Vars */ :root { --theme-base: "black-highlighter"; --theme-id: "calamity"; --theme-name: "Calamity Theme"; /* Header */ --logo-image: none; --header-title: "UnHuman"; --header-subtitle: "Life After The End"; /* Typefaces */ --body-font: "Ubuntu", sans-serif; --header-font: "Cabin Sketch", sans-serif; --title-font: "Baumans", sans-serif; --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --black-monochrome: var(--sky-at-night); --dark-gray-monochrome: var(--sky-at-evening); --pale-accent: 150, 150, 254; /* lavender, for visited links */ --bright-accent: 51, 201, 208; /* bright turquoise */ --medium-accent: 23, 152, 158; /* darker turquoise */ --dark-accent: 90, 90, 152; /* darker purple */ --alt-accent: var(--sky-at-dawn); /* pinkish red, for newpage links */ /* Sky */ --sky-at-dawn: 221, 93, 112; --sky-at-morning: 131, 192, 233; --sky-at-daytime: 104, 153, 186; --sky-at-evening: 87, 98, 106; --sky-at-dusk: 99, 100, 90; --sky-at-night: 21, 25, 43; --sky-length: 15; --sky-time: 65s; /* Delete the default header background */ --gradient-header: linear-gradient(transparent, transparent); --diagonal-stripes: linear-gradient(transparent, transparent); /* Background Colors */ --background-gradient-color: var(--sky-at-daytime); /* Primary Theme Colors */ --swatch-primary: var(--medium-accent); --swatch-primary-darker: var(--pale-accent); /* Primary Menu Colors */ --swatch-menubg-medium-dark-color: var(--medium-accent); /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--bright-accent); --swatch-tertiary-color: var(--pale-accent); /* Link Colors */ --link-color: 110, 110, 170; /* Spacing Measurements */ /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; /* final values */ --header-h1-font-size: calc(var(--base-font-size) * 4); --header-h2-font-size: calc(var(--base-font-size) * 1.6); /*Toggle Colors */ --toggle-border-color: rgb(var(--dark-accent)); --toggle-icon-color: rgb(var(--pale-accent)); --toggle-roundness: 40%; /* Login Gradient */ --login-gradient: linear-gradient(to top, rgb(var(--dark-accent)) 0%, rgb(var(--medium-accent)) 100%); } :root:lang(cn) { /* Header */ --header-title: "非人类"; --header-subtitle: "末世后的新生"; /* Typefaces */ --body-font: "Ubuntu", "Noto Sans SC", sans-serif; --header-font: "Cabin Sketch", "ZCOOL KuaiLe", sans-serif; --title-font: "Baumans", "ZCOOL XiaoWei", sans-serif; --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, '幼圆', monospace; } /* Remove text shadow from headers */ #header h1 a::before, #header h2 span::before { --text-shadow: none; text-shadow: none; } /* Subtitle size and case */ #header h2, #header h2::before, #header h2 span, #header h2 span::before { text-transform: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1em); } /* Tab Selected Color */ .yui-navset .yui-nav .selected, .yui-navset .yui-nav .selected a:focus { background-color: rgb(var(--dark-accent)); } .yui-navset .yui-nav { background-color: rgb(var(--pale-accent)); color: rgb(var(--black-monochrome)); } /* Header Logos - * This calculates the distance between the two images that make up the * UnHuman logo, measured in rems (root ems - an em as defined by the root * font size) from center. */ #header::before { display: none; } div#extra-div-1, div#extra-div-2 { position: absolute; top: 1rem; width: 100%; height: 8rem; } div#extra-div-1 { background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/unhuman-left-logo.png"); background-repeat: no-repeat; background-position: calc(50% - 9rem) 80%; background-size: contain; } div#extra-div-2 { background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/unhuman-right-logo.png"); background-repeat: no-repeat; background-position: calc(50% + 9rem) 80%; background-size: contain; } /* Header on Mobile */ @media only screen and (max-width: 64rem) { :root { --header-h1-font-size: calc(var(--base-font-size) * 2.65); --header-h2-font-size: calc(var(--base-font-size) * 1.25); } div#extra-div-1 { background-position: calc(50% - 6rem) 80%; } div#extra-div-2 { background-position: calc(50% + 6rem) 80%; } } #header { /* ===HEADER ELEMENTS=== */ /* ===HEADER TITLES=== */ /* Header H1 and H2 colors */ --swatch-headerh1-color: var(--swatch-text-light); --swatch-headerh2-color: var(--swatch-text-light); /* ===SEARCH ELEMENT=== */ --search-icon-color: var(--swatch-text-secondary-color); --search-icon-bg-color: var(--swatch-primary-darkest); --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; /* 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); /* ===LOGIN BOX ELEMENT=== */ --login-line-divider-color: var(--swatch-text-secondary-color); --login-username-color: var(--dark-accent); --login-myaccount-color: var(--dark-accent); --login-myaccount-underline-color: var(--swatch-primary-darkest); --login-myaccount-hover-bg-color: var(--swatch-primary-darkest); --login-arrow-color: var(--swatch-text-light); /* Dropdown Box when arrow is clicked */ --login-dropdown-bg-color: var(--login-gradient); --login-dropdown-bg-image: var(--login-gradient); --login-dropdown-border-color: var(--bright-accent), 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(--black-monochrome); } /* Login Status */ #login-status .printuser, #login-status #my-account { --ui-wght: 700; color: rgb(var(--login-username-color)); text-shadow: rgb(var(--white-monochrome)) 0.0625rem 0rem 0rem, rgb(var(--white-monochrome)) 0.0338rem 0.0526rem 0rem, rgb(var(--white-monochrome)) -0.026rem 0.0568rem 0rem, rgb(var(--white-monochrome)) -0.0619rem 0.0088rem 0rem, rgb(var(--white-monochrome)) -0.0409rem -0.0473rem 0rem, rgb(var(--white-monochrome)) 0.0177rem -0.0599rem 0rem, rgb(var(--white-monochrome)) 0.06rem -0.0175rem 0rem; } #account-options { width: auto; padding: 0.5em; border-color: rgba(var(--bright-accent)); background: var(--login-gradient); color: rgb(var(--swatch-text-light)); } /* search box */ #search-top-box-form>input, #search-top-box-form>input:hover, #search-top-box-form>input:focus { background: rgb(var(--dark-accent)); } #search-top-box-form input[type="submit"] { background: rgb(var(--medium-accent)); } #search-top-box input.empty { color: rgba(var(--white-monochrome)); } /* Horizontal rule */ hr { height: 0rem; border-top: 0.0625rem solid rgb(var(--medium-accent)); border-bottom: 0.0625rem solid rgb(var(--dark-accent)); background: rgba(0, 0, 0, 0); } /* Blockquote */ blockquote, .blockquote, div.blockquote { margin: 1em 0; border-style: solid; border-color: rgb(var(--medium-accent)); background-color: rgba(var(--pale-accent), 0.1); } /* table */ table.wiki-content-table th { border-color: rgb(var(--pale-accent)); background: rgb(var(--medium-accent)); color: rgb(var(--white-monochrome)); } /* Side Bar Touch Up */ #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded { background: rgba(var(--pale-accent), 0.35); font-family: var(--title-font); min-height: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; text-size: 125%; } #side-bar .heading p { color: rgb(62, 62, 104); font-family: var(--title-font); text-shadow: none; --text-shadow: none; text-align: center; } /* Top Bar Touch Up */ #top-bar { --topmenu-category-color: var(--swatch-text-secondary-color); --topmenu-category-hover-color: var(--swatch-text-primary-color); --topmenu-category-hover-bg: var(--pale-accent); --topmenu-hover-border-color: var(--swatch-primary); --mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color); --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; --dropdown-links-hover-color: var(--swatch-text-secondary-color); --dropdown-links-hover-bg-color: var(--swatch-primary); } /* Ayers Info Bar */ .info-container { --barColour: #5A5A98; --linkColour: #FCFCFC; } /* Header Background - adapted from Croquembouche's Swirling Ashes theme */ body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height-on-desktop); pointer-events: none; } body::before { -webkit-animation: sky linear var(--sky-time) infinite; animation: sky linear var(--sky-time) infinite; background: linear-gradient(to top, rgb(var(--sky-at-morning)) 0%, rgb(var(--sky-at-morning)) 11%, rgb(var(--sky-at-dawn)) 22%, rgb(var(--sky-at-night)) 33%, rgb(var(--sky-at-night)) 44%, rgb(var(--sky-at-dusk)) 55%, rgb(var(--sky-at-evening)) 66%, rgb(var(--sky-at-daytime)) 77%, rgb(var(--sky-at-daytime)) 88%, rgb(var(--sky-at-morning)) 100%); background-size: 100% calc(var(--header-height-on-desktop) * var(--sky-length)); } @-webkit-keyframes sky { from { background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length)); } to { background-position: 0 0; } } @keyframes sky { from { background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length)); } to { background-position: 0 0; } } /* Rain - adapted from EstrellaYoshte's Christmas theme */ #header-extra-div-1 { display: block; position: absolute; top: 0%; left: calc((-100vw + 100%)/2); width: 99.4vw; height: 10rem; -webkit-animation: rainOne 1.7s infinite linear, rainFade var(--sky-time) ease; animation: rainOne 1.7s infinite linear, rainFade var(--sky-time) ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png'); background-repeat: repeat; background-size: 14.375rem; pointer-events: none; -webkit-filter: blur(.9px); filter: blur(.9px); } #header-extra-div-2 { display: block; position: absolute; top: 0%; left: calc((-100vw + 100%)/2); width: 99.4vw; height: 10rem; -webkit-animation: rainTwo 1.2s infinite linear, rainFade var(--sky-time) ease; animation: rainTwo 1.2s infinite linear, rainFade var(--sky-time) ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png'); background-repeat: repeat; background-size: 23.125rem; pointer-events: none; -webkit-filter: blur(0.4px); filter: blur(0.4px); } #header-extra-div-3 { display: block; position: absolute; top: 0%; left: calc((-100vw + 100%)/2); width: 99.4vw; height: 10rem; -webkit-animation: rainThree .75s infinite linear, rainFade var(--sky-time) ease; animation: rainThree .75s infinite linear, rainFade var(--sky-time) ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Acalamity/rain1.png'); background-repeat: repeat; background-size: 45rem; pointer-events: none; -webkit-filter: blur(.2px); filter: blur(.2px); } @-webkit-keyframes rainOne { 0% { opacity: .9; background-position: 0rem 0rem; } 10% { opacity: 1; } 90% { opacity: 0.95; } 100% { opacity: 0.85; background-position: 0rem 46.875rem; } } @keyframes rainOne { 0% { opacity: .9; background-position: 0rem 0rem; } 10% { opacity: 1; } 90% { opacity: 0.95; } 100% { opacity: 0.85; background-position: 0rem 46.875rem; } } @-webkit-keyframes rainTwo { 0% { opacity: 0.8; background-position: 0rem -6.25rem; } 8% { opacity: 1; } 90% { opacity: 0.9; } 100% { opacity: 0.8; background-position: -3.125rem 43.75rem; } } @keyframes rainTwo { 0% { opacity: 0.8; background-position: 0rem -6.25rem; } 8% { opacity: 1; } 90% { opacity: 0.9; } 100% { opacity: 0.8; background-position: -3.125rem 43.75rem; } } @-webkit-keyframes rainThree { 0% { opacity: 0.9; background-position: 0rem 6.25rem; } 13% { opacity: 1; } 91% { opacity: 0.9; } 100% { opacity: 0.7; background-position: 0rem 46.875rem; } } @keyframes rainThree { 0% { opacity: 0.9; background-position: 0rem 6.25rem; } 13% { opacity: 1; } 91% { opacity: 0.9; } 100% { opacity: 0.7; background-position: 0rem 46.875rem; } } @-webkit-keyframes rainFade { 34%, 56% { opacity: 1; } 0%, 30%, 60%, 100% { opacity: 0; } } @keyframes rainFade { 34%, 56% { opacity: 1; } 0%, 30%, 60%, 100% { opacity: 0; } } /* Wikidot Footer Link Colors */ #footer { background: #4A4A7D; color: #55D2D8; } /* Reduce Motion Check */ @media screen and (prefers-reduced-motion: reduce) { body::before, #header-extra-div-1, #header-extra-div-2, #header-extra-div-3 { -webkit-animation: none; animation: none; } }
:root { --body-font: "Ubuntu", "Noto Sans SC", sans-serif; --title-font: "Baumans", "ZCOOL XiaoWei", sans-serif; --black-monochrome: var(--sky-at-night); --pale-accent: 150, 150, 254; --bright-accent: 51, 201, 208; --medium-accent: 23, 152, 158; --dark-accent: 90, 90, 152; --sky-at-night: 21, 25, 43; --swatch-primary: var(--medium-accent); --swatch-primary-darker: var(--pale-accent); } .side-block .heading { background: rgba(var(--pale-accent), 0.35); font-family: var(--title-font); min-height: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; text-size: 125%; } .side-block .heading p { color: rgb(62, 62, 104); font-family: var(--title-font); text-shadow: none; --text-shadow: none; text-align: center; }
: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); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) 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; }
@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; 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; width: var(--body-width-on-desktop, 45.75rem); 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; } } } }