这是什么地方?
这里是地狱。
(但实际上不是)
这是 JAK 风格。是
JakdragonX1 对占位风格、空白风格和所有其它你能想到的样式的剽窃。该版式与任何世界观内的组织、设定、GoI 或其它什么东西(我他妈没那么聪明。你以为我是谁啊,
HarryBlank 吗?)均无关联。
任何人都可以自由使用该版式,但牢记我是记不得自己五分钟前吃了什么东西的,所以如果用户认为这版式“超级酷”的话,建议你谨慎使用。
如何使用?
若要引入该版式,只需在你的页面上方加上该代码片段并且祈祷我没有搞砸过什么会导致它不能正常工作的东西。
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:jakstyle]]
若需编辑大标题、小标题以及背景图片,请在引入代码之后使用以下代码:
[[module CSS]]
:root:lang(cn) {
--header-title: "这里放标题";
--header-subtitle: "这里放副标题";
--lgurl: url('这里放你的链接');
}
[[/module]]
注意:请明白这是一个暗色版式。若要试图修改此版式并使用特别暗或者极其亮的颜色将会伤害到很多双眼睛,也会伤害到你的评分(你会在之后为这条提醒感谢我的。)
有什么不同吗?
你真的,他妈瞎了吗?有很大的不同。但是,如果你需要一份我做出的修改的详细清单的话,那么给你:
- 这版式乌漆墨黑。
- 这版式锃明白亮。
- 不知道什么让边框变得很十年前。
- 抢了半影的午饭钱。
- 默认加上了切换侧边栏。
- 显然居中页眉要好得多得多得多。
- 因为亵渎了超黑标记笔而被送去做社区服务。
- 改变了超链接与折叠的外观。
- 产生了对颜色的恐惧。
- 在改变主意之后将半影的午饭钱还了回去。
- 改变了某些组件的外观,比如 Ayers 的信息模块与 ACS。
如果你还想看更多东西,那下一节会给你提供某些常规 Wikidot 格式的示例。
示例
SCP 基金会标志
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。2
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
为什么铲子这么特别?
因为这是一项突破性的发明。
更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
正文字体为 Inter / Noto Sans SC。
页眉及标题字体为 Inter / Noto Sans SC。
等宽字为 Recursive / Noto Serif SC。
:root { --header-title: "SCP FOUNDATION"; --dark-accent: 33, 35, 37; --pale-accent: 205, 205, 209; --bright-accent: 205, 205, 209; --light-gray-monochrome: 84, 84, 84; --dark-gray-monochrome: 56, 56, 60; --black-monochrome: 33, 35, 37; --medium-accent: var(--bright-accent); --tab-border-color: var(--dark-accent); --rating-module-button-color: var(--bright-accent); --rating-module-button-credit-color: var(--bright-accent); --swatch-background: var(--dark-accent); --swatch-menutxt-general-color: var(--bright-accent); --swatch-menubg-black-color: var(--dark-gray-monochrome); --barColour: #232527; --logo-image: url('https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg'); --lgurl: var(--logo-image); --ui-wght: 400; --ui-hvr-wght: 500; /* Background and Header Colors */ --background-color: var(--dark-accent); /* Primary Text Colors */ --swatch-text-light: var(--bright-accent); --swatch-text-general: var(--bright-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--dark-accent); /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--swatch-menubg-dark-color); --swatch-tertiary-color: var(--swatch-menubg-medium-dark-color); --swatch-alternate-color: var(--swatch-menubg-medium-color); --sidebar-links-hover-text-color: var(--dark-accent); /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */ --swatch-text-tertiary-color: var(--swatch-menutxt-light-color); /* Primary Header Colors */ --swatch-topmenu-border-color: var(--swatch-menubg-black-color); --swatch-topmenu-bg-color: var(--swatch-menubg-extra-dark-color); --rating-module-text-color: var(--bright-accent); --rating-module-button-cancel-color: var(--gray-monochrome); ; --gradient-header: linear-gradient(to bottom, rgb(var(--header-gradient-color-bottom)) 0%, rgb(var(--header-gradient-color-middle)) 90%, rgb(var(--header-gradient-color-top)) 100%); --diagonal-stripes: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(var(--swatch-menubg-extra-dark-color), 0.1) 0.35vh, rgba(var(--swatch-menubg-extra-dark-color), 0.2) 0.5vh); --toggle-button-bg: rgb(var(--dark-accent)); --toggle-border-color: rgb(var(--dark-gray-monochrome)); --toggle-icon-color: rgb(var(--bright-accent)); } :root:lang(cn) { --header-title: "SCP基金会"; } #header { /* Focus is when the search box has been clicked on */ --search-icon-focus-bg-color: var(--swatch-primary-darkest); --search-focus-textbox-bg-color: var(--swatch-primary-darkest); /* ===LOGIN BOX ELEMENT=== */ /* Dropdown Box when arrow is clicked */ --login-dropdown-bg-image: none; --login-dropdown-border-color: var(--swatch-primary-darkest), 0.9; --login-dropdown-text-hover-color: var(--swatch-menutxt-dark-color); } #header::before { background-image: var(--lgurl); opacity: 0.20; } #header h1 a::before { color: rgb(var(--bright-accent)); -webkit-text-stroke: 0.325rem rgb(var(--dark-accent)); } #header h1 a::after { color: rgb(var(--light-accent)); } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--dark-accent)); } #top-bar { /* ===TOPBAR ELEMENTS=== */ /* ===TOPBAR CATEGORIES=== */ --topmenu-hover-border-color: var(--swatch-primary),0.5; /* ===DROPDOWN MENU=== */ --dropdown-bg-color: var(--dark-gray-monochrome); --dropdown-border-color: var(--swatch-primary-darkest), 0.9; } #side-bar { --sidebar-links-hover-text-color: var(--swatch-primary-darkest); } #main-content { /* ===MAIN CONTENT UI ELEMENTS */ /* ===UI ICONS=== */ /* ===PAGE OPTIONS ICONS=== */ --ui-icon-hover-bg: var(--swatch-primary-darkest); /* ===TABS=== */ --tabs-hover-bg: var(--swatch-primary-darkest); --tabs-bottom-border-color: var(--swatch-primary-darkest); } :root { /* ===UI BUTTONS=== */ --ui-button-hover-bg: var(--swatch-primary-darkest); --ui-button-hover-txt: var(--swatch-text-tertiary-color); --ui-button-hover-outline: var(--swatch-primary-darker); /* ===MODALS=== */ --modal-header-stripe: var(--swatch-menubg-dark-color); } .modalbox { padding: 0.25rem; border-radius: 0rem !important; border-color: transparent !important; background: rgb(var(--dark-accent)) !important; box-shadow: none !important; pointer-events: auto !important; } body { color: rgb(var(--bright-accent)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(var(--swatch-primary),0); } @media (min-width: 36rem) { #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { box-shadow: 0 0 0 0.125rem rgba(var(--swatch-primary),0.2); color: rgba(var(--swatch-primary),0.7); } } @supports (display:grid) { div.page-rate-widget-box .rate-points { border: rgb(var(--dark-accent)); border-right: rgb(var(--dark-accent)); } } #page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):not([href*="classification-committee-memo"]):not([href*="anomaly-classification-system-guide"]):not([href*="classification-committee-memo"]) { padding: 0.15em; margin: -0.15em; color: inherit; box-decoration-break: clone; box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--bright-accent)); transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 200ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-committee-memo"]):not([href*="anomaly-classification-system-guide"]):not([href*="classification-committee-memo"]):not(.fa-info):hover { padding: 0.3em 0.25em 0.2em 0.25em; margin: -0.25em; box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent)); text-decoration: none; color: rgb(var(--dark-accent)) } a { color: inherit; } a:hover { color: inherit; } a.close-menu { background-color: transparent; } a:visited { color: inherit; } .scp-image-block a { box-shadow:none; } a.collapsible-block-link { padding: 0.15em; margin: -0.15em; color: inherit; box-decoration-break: clone; box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--bright-accent)); transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 200ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } a.collapsible-block-link:hover { padding: 0.3em 0.25em 0.2em 0.25em; margin: -0.25em; box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent)); text-decoration: none; color: rgb(var(--dark-accent)) } #breadcrumbs a, #breadcrumbs a:visited, .pseudocrumbs a, .pseudocrumbs a:visited { background-color: transparent; color: rgb(var(--bright-accent)); } #breadcrumbs a:active, #breadcrumbs a:hover, .pseudocrumbs a:active, .pseudocrumbs a:hover { color: rgb(var(--dark-accent)); } a:hover { background-color: transparent; color: var(--bright-accent); text-decoration: none; } a.close-menu { background-color: transparent; } ::-moz-selection { background: rgb(var(--bright-accent),0.25); } ::selection { background: rgb(var(--bright-accent),0.25); } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { background: rgba(var(--swatch-primary),0.5); } .creditButton p a { background-color: rgb(var(--black-accent)); } #page-content .rate-box-with-credit-button { display: inline-flex; height: var(--rating-module-height); margin-bottom: .75rem; padding: 0 .125rem; overflow: hidden; border: .0625rem solid rgba(var(--gray-monochrome)); border-radius: 0; background: rgb(var(--dark-accent)); background-color: rgb(var(--dark-accent)); } #top-bar div.mobile-top-bar>ul>li>ul>li:hover>a, #top-bar div.top-bar>ul>li>ul>li:hover>a { color: rgb(var(--dark-accent)); text-decoration: none; } #side-bar .heading { background: rgb(var(--dark-gray-monochrome)); } #side-bar .side-block { background-color: rgb(var(--dark-accent)); } #side-bar .side-block.resources { background: rgb(var(--dark-accent)) !important; } #side-bar .side-block.media { background-color: rgba(var(--dark-gray-monochrome)) !important; } #side-bar div.menu-item>a, #side-bar div.menu-item>a:visited { color: rgb(var(--bright-accent)); } #side-bar div.menu-item>a:hover { color: rgb(var(--dark-accent)); } .side-block.media a { background: transparent; } #side-bar .collapsible-block .collapsible-block-folded, #side-bar .heading { background: rgb(var(--dark-gray-monochrome)); } #search-top-box-input { background-color: rgb(var(--dark-gray-monochrome)); } #account-options { border-color: var(--bright-accent); background: var(--dark-accent); color: var(--bright-accent); } #login-status { color: rgba(var(--swatch-menutxt-light-color), 0.5); } #login-status ul a { color: rgb(var(--bright-accent)); } #login-status .printuser { background-color: transparent; color: rgb(var(--bright-accent)); } .page-rate-widget-box { border: 0.0625rem solid rgba(var(--swatch-menubg-dark-color)); background: rgb(var(--dark-accent)); } #top-bar div.mobile-top-bar { background: rgb(var(--dark-accent)); } #top-bar div.top-bar>ul>li:hover { background: rgb(var(--swatch-menubg-black-color)); } #top-bar div.mobile-top-bar>ul>li.sfhover>ul, #top-bar div.mobile-top-bar>ul>li:hover>ul, #top-bar div.top-bar>ul>li.sfhover>ul, #top-bar div.top-bar>ul>li:hover>ul { color: rgb(var(--dark-accent)); } blockquote, div.blockquote { border: none; background-color: rgb(var(--dark-gray-monochrome)); --swatch-border-color: var(--gray-monochrome); box-shadow: 0rem 0.095rem 0.25rem 0.125rem rgb(var(--dark-accent)); } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { box-shadow: none; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { --box-shadow: none; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav hover a { border-color: rgb(var(--dark-accent)); } .yui-navset .yui-nav .selected a { border-color: rgb(var(--bright-accent)); color: rgb(var(--dark-accent)) !important; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { background: rgb(var(--dark-accent)); color: rgb(var(--bright-accent)); } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { background: rgb(var(--dark-accent)); } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background-color: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--dark-accent)); } .yui-navset-bottom .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset .yui-nav li a { background: rgb(var(--dark-gray-monochrome)); color: rgb(var(--bright-accent)); } #page-content .blockquote div.b-tables table.wiki-content-table th, #page-content .blockquote table.wiki-content-table th { background: rgb(var(--bright-accent)); color: rgb(var(--dark-accent)); border: 0.0625rem solid rgba(var(--bright-accent))!important; } #page-content .blockquote table.wiki-content-table td { border: 0.0625rem solid rgba(var(--bright-accent))!important; } #page-content div.b-tables table.wiki-content-table th, #page-content table.wiki-content-table th { background: rgb(var(--dark-gray-monochrome)); color: rgb(var(--white-accent)); --tables-border: var(--dark-gray-monochrome); } textarea, input.text, input.checkbox, div.note, #lock-info { border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25); background-color: rgb(var(--swatch-menubg-extra-dark-color)); color: rgb(var(--swatch-text-light)); } .code pre span[class*="hl-"] { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } .owindow .modal-body img { background-color: transparent !important; } #odialog-container div.owindow { background-color: rgb(var(--dark-accent)); } .hovertip { border: .0625rem solid rgb(var(--dark-gray-monochrome)); color: rgb(var(--swatch-text-light)); } .hovertip .content { padding: 0; } #footer { color: rgb(var(--bright-accent)); } .image-block .image-caption, .scp-image-block .scp-image-caption { box-shadow: none; border: none; background-color: rgb(var(--dark-gray-monochrome)); color: rgb(var(--bright-accent)); } .scp-image-block a { background-color: transparent; } .scp-image-block { box-shadow: .0225rem .0835rem .0725rem .0925rem rgb(var(--dark-accent)); } .footnote { padding: .625em; background-color: rgb(var(--dark-gray-monochrome)); } .footnotes-footer { border-left: none; background-color: rgba(var(--dark-gray-monochrome)); } .hovertip .f-heading { background-color: rgb(var(--bright-accent)); color: rgb(var(--dark-accent)); } .bibitems .title, .footnotes-footer .title { background-color: rgb(var(--bright-accent)); color: rgb(var(--dark-accent)); } .bibitems, .footnotes-footer { box-shadow: inset .5em 0 0 0 rgba(var(--bright-accent)); } .licensebox .collapsible-block-link { background: none; } table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7)):before { background-color: rgb(var(--bright-accent)); color: rgb(var(--dark-accent)); } .pager .current, .pager .current:before { background-color: rgb(var(--dark-accent)); } .pager .current { color: rgb(var(--bright-accent)); } .paged a:visited, .pager a { color: rgb(var(--bright-accent)); } .printuser img.small { width: 1.25rem; height: 1.25rem; vertical-align: -0.4em; } #who-rated-page-area .printuser a { font-size: 100%; } #who-rated-page-area .printuser { background-color: transparent; } #search-top-box input.empty { color: rgba(var(--bright-accent)); } .page-tags a:hover { color: rgb(var(--dark-accent)); } #main-content .page-tags:before { background-color: rgb(var(--bright-accent)); color: rgb(var(--dark-accent)); } #main-content .page-tags { box-shadow: 0 -.125rem 0 0 rgb(var(--bright-accent)); } .footnotes-footer a[href*=javascript], .footnotes-footer a[href*=javascript]:visited { background-color: transparent; } #license-area { background-color: rgb(var(--dark-gray-monochrome)); } #page-content .rate-box-with-credit-button>.creditButton>p>a:after { background-color: rgba(var(--dark-accent)); } [id*=u-credit] .credit.first, [id*=u-credit] .credit.otherwise { padding: 5px; } [id*=u-credit] div.creditBottomRate { padding: 0.5rem 0 0; } .acs-hybrid-text-bar>.acs-clear>.clearance-level-text::before { color: rgba(var(--bright-accent), 1); } .acs-hybrid-text-bar>.acs-disrupt .disruption-class-number::before { color: rgba(var(--bright-accent), 1); } .acs-hybrid-text-bar>.acs-risk .risk-class-number::before { color: rgba(var(--bright-accent, 12, 12, 12), 1); } .contain-class .class-text::before { color: rgb(228 228 228); } .anom-bar-container.esoteric .text-part>.main-class>.second-class>.class-text::after { color: #e4e4e4; } .info-container .collapsible-block-folded, .info-container .collapsible-block-unfolded-link { background: rgb(var(--bright-accent)); } .info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link { background: rgb(var(--dark-accent)); } #page-content .info-container a.collapsible-block-link:hover { box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent)); } .acs-hybrid-text-bar>a { background-color: transparent color: transparent; } .acs-hybrid-text-bar>.acs-clear>.clearance-level-text::after { padding-top: 0.1rem; color: rgba(var(--bright-accent), 1); } .acs-hybrid-text-bar>.acs-risk .risk-class-number::after { color: rgba(var(--bright-accent)); } .acs-hybrid-text-bar>.acs-disrupt .disruption-class-number::after { color: rgba(var(--bright-accent), 1); } .danger-diamond a, .danger-diamond a:hover { background-color: transparent; color: rgba(0, 0, 0, 0); } authorlink-wrapper > a { background-color: transparent; color: rgb(var(--bright-accent)); --author-right-adjust: 0rem; } .authorlink-wrapper > a::before { color: darkgrey; } .authorbox { filter: drop-shadow(0 0 3px rgba(228, 228, 228)); } .printuser a { margin-right: -0.0625rem; background-color: none; font-size: 0.875rem; } .printuser img.small { width: 1.1875rem; height: 1.1563rem; vertical-align: -0.4em; } .printuser:hover { background-color: transparent; } .page-tags a { background-color: transparent; color: rgb(var(--bright-accent)); } table.page-files tr>td>a:not(.btn), table.page-files tr>td>a:visited:not(.btn) { color: rgb(var(--bright-accent)); } table.page-files th { color: rgb(var(--dark-accent)); } @media (min-width: 36rem) { #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: none; } }
:root { --ui-wght: 400; --dark-gray-monochrome: 56, 56, 60; --black-monochrome: 33, 35, 37; --bright-accent: 205, 205, 209; --medium-accent: var(--bright-accent); --dark-accent: 33, 35, 37; --swatch-menutxt-general-color: var(--bright-accent); } ::-moz-selection { background: rgb(var(--bright-accent),0.25); } ::selection { background: rgb(var(--bright-accent),0.25); } .side-block { --sidebar-links-hover-text-color: var(--swatch-primary-darkest); background-color: rgb(var(--dark-accent)); } .side-block .heading { background: rgb(var(--dark-gray-monochrome)); } .side-block div.menu-item a { color: rgb(var(--bright-accent)); }
: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; } } } }