The Foundationテーマ

rev.73
http://scp-jp-storage.wikidot.com/file:7657035-63-eagk
http://scp-jp-storage.wikidot.com/file:7657035-64-uv5d
http://scp-jp-storage.wikidot.com/file:7657035-65-wnwd

クレジット

タイトル: The Foundation テーマ
著者: ©Woedenaz
原題: The Foundation Theme
作成年: 2019

テーマカラー

Payne's Grey--gray-monochrome(66, 66, 72)

Rosewood--bright-accent(133, 0, 5)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Alto--very-light-gray-monochrome(215, 215, 215)

White Smoke--pale-gray-monochrome(244, 244, 244)

Bastille--dark-gray-monochrome(48, 48, 52)

Buccaneer--medium-accent(100, 46, 44)

Maroon--dark-accent(100, 3, 15)

Guardsman Red--light-gray-monochrome(200, 0, 5)

{$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}

使い方

注: これはBlack Highlighterベースのテーマです。このテーマを使用するにはBlack Highlighterテーマもインポートする必要があります。詳細については、ここを参照してください¹。

どんなウィキでも:

[[include :scp-jp:theme:black-highlighter-theme]]
[[include :scp-jp:theme:the-foundation-theme]]

SCP-4485の見た目のようなダークテーマのオプション::

[[include :scp-jp:theme:black-highlighter-theme]]
[[include :scp-jp:theme:the-foundation-theme |dark=--]]]

例

罫線は、5つのハイフン「-----」を使用して作成でき、何かの内側(例: ブロック引用)に配置されていなければページ全体に適用されます。このドキュメントのセクションを区切る線は罫線です。

---

見出しは、行の先頭に1～6文字の「+」を置くことで作成できます

+ 見出し

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

タブを作る

これはタブです。

タブが作られた

見てください、ここにもテキストがあります。

なんと奇妙な。

長いタブ

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

空のタブ

空のタブ

空のタブ

空のタブ

空のタブ

空のタブ

これは引用ブロックです。各行の先頭に半角の「> 」を置くことで作成されます。
追加のテキスト

---

これは罫線です

入れ子になった引用ブロック

これは	テーブルです
もう	作り方は
知っているはずです

body、ヘッダーフォントはSource Sans Pro。
見出しフォントはMerriweather。
等幅フォントはRoboto Mono。

+ テーマコードを表示

@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-highlighter";
     /* must be either "black-highlighter" or "sigma9" */
     --theme-id: "The-Foundation-Dark-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "The Foundation Dark Theme";
     /* set this to your theme's full name */
 
     --swatch-background: var(--black-monochrome);
     --header-subtitle: "Office of the Overseer";
     --rating-module-text-color: var(--swatch-menutxt-light-color);
     --rating-module-button-color: var(--swatch-menutxt-light-color);
     --swatch-text-general: var(--swatch-text-light);
     --swatch-menutxt-general-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-menubg-light-color);
 
     /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
     --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
     --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
    }
 
    ::-moz-selection {
     background: rgba(var(--swatch-primary), 1);
     color: rgb(var(--black-monochrome)) !important;
     text-shadow: none;
    }
 
    ::selection {
     background: rgba(var(--swatch-primary), 1);
     color: rgb(var(--black-monochrome)) !important;
     text-shadow: none;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
     color: rgb(var(--swatch-text-light)) !important;
    }
 
    #page-title {
     --wght: 600;
     margin-top: 1rem;
     font-family: var(--title-font);
     text-transform: uppercase;
    }
 
    #page-title::before,
    #page-title::after {
     background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-65-wnwd/foundation-circles-bg.png");
     background-size: 100vh;
     background-attachment: fixed;
     background-position: top center;
    }
 
    #header h2,
    #header h2 span {
     --wght: 500;
     font-weight: 500;
     font-family: var(--header-font);
     text-transform: uppercase;
     letter-spacing: 0.5em;
    }
 
    #login-status,
    #login-status span.printuser,
    #header div[class*="top-bar"]>ul>li>a,
    #header div[class*="top-bar"]>ul>li>ul li>a {
     color: rgb(var(--white-monochrome))
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
     color: rgba(0, 0, 0, 0) !important;
     box-shadow: initial !important;
    }
 
    .danger-diamond>.arrows {
     background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 160' xml:space='preserve'%3E%3Cpath fill='%23fcfcfc' d='M136.1,133.3l23.9-23.9V51.2l-24-24l19.1-19.1l4.9,4.9l0-12.9l-12.9,0l4.9,4.9L133,24.2l-24-24H51l-24,24 L8,5.2l4.9-4.9L0,0.2l0,12.9l4.9-4.9L24,27.3l-24,24v58.2l23.9,23.9l-19,19L0,147.3l0,12.9l12.9,0L8,155.3l19-19l23.9,23.9h58.4 l23.9-23.9l19,19l-4.9,4.9l12.9,0l0-12.9l-4.9,4.9L136.1,133.3z M155.7,53v54.6l-22.6,22.6l-50-50L133,30.3L155.7,53z M52.8,4.5 h54.4l22.7,22.7L80,77.2L30.1,27.3L52.8,4.5z M4.3,107.6V53L27,30.3L77,80.2l-50,50L4.3,107.6z M107.4,155.9H52.6L30,133.3l50-50 l50,50L107.4,155.9z'/%3E%3C/svg%3E%0A");
    }
 
    table.wiki-content-table {
     width: 100%;
     text-align: center;
     margin: 0 auto;
    }
 
    table.wiki-content-table tbody tr th {
     justify-content: center;
    }
 
    table.wiki-content-table tr,
    table.wiki-content-table th {
     --wght: 700;
     width: 100%;
     display: inline-flex;
     align-items: stretch;
     margin: 0;
    }
 
    table.wiki-content-table td {
     margin: 0;
     width: 100%;
     color: rgb(var(--white-monochrome));
     line-height: 1;
    }
 
    blockquote,
    .blockquote {
     background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]):not(.cc):not([href*="u-credit"]),
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]):not(.cc):not([href*="u-credit"]):visted {
     color: rgb(var(--light-gray-monochrome)) !important;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]):not(.cc):not([href*="u-credit"]):hover,
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-"]):not(.cc):not([href*="u-credit"]):active {
     color: rgb(var(--black-monochrome)) !important;
     box-shadow: inset 0 -1.5em 0 0 rgba(var(--light-gray-monochrome), 1) !important;
    }
 
    .code {
     background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    .scp-image-block {
     box-shadow: initial;
    }
 
    .scp-image-block .scp-image-caption {
     background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    @media only screen and (max-width: 56.25rem) {
     table.wiki-content-table tr>td {
     min-width: 100%;
     font-size: 1rem;
     padding: 0.5rem;
     }
    }
}

@import url("https://use.typekit.net/cjg4ysl.css");
 
@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-highlighter";
     /* must be either "black-highlighter" or "sigma9" */
     --theme-id: "The-Foundation-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "The Foundation Theme";
     /* set this to your theme's full name */
     --body-font: "franklin-gothic-urw", "M Plus 1p", sans-serif;
     --header-font: "titling-gothic-fb-compressed", "M Plus 1p", sans-serif;
     --title-font: "hypatia-sans-pro", "M Plus 1p", sans-serif;
 
     --header-title: "The Foundation";
 
     --light-gray-monochrome: 200, 0, 5;
 
     --header-gradient-color-bottom: var(--dark-accent);
     --header-gradient-color-middle: var(--black-monochrome);
     --header-gradient-color-top: var(--black-monochrome);
 
     --background-gradient-color: var(--light-gray-monochrome);
     --swatch-topmenu-border-color: var(--black-monochrome);
     --swatch-topmenu-bg-color: var(--dark-accent);
 
     --gradient-topmenu: linear-gradient(to bottom,
     rgba(255, 255, 255, 0) 0,
     rgba(255, 255, 255, 0) var(--header-height-on-desktop),
     rgba(var(--swatch-topmenu-border-color)) var(--header-height-on-desktop),
     rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + .125rem),
     rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem),
     rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem),
     rgba(var(--swatch-topmenu-border-color), 0) 100%);
 
     --gradient-topmenu-mobile: linear-gradient(to bottom,
     rgba(var(--swatch-topmenu-border-color), 1) 0,
     rgba(var(--swatch-topmenu-bg-color), 1) .125rem,
     rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - .125rem),
     rgba(var(--swatch-topmenu-bg-color), 0) calc(var(--topbar-height-on-mobile) - .125rem),
     rgba(var(--swatch-topmenu-border-color), 0) 3rem);
 
     --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%);
 
     --header-background-image-size: 100% var(--header-height-on-desktop);
     --header-height-on-desktop: 12.25rem;
     --header-height-on-mobile: 12.25rem;
     --topbar-height-on-mobile: 2.5rem;
 
     --header-h1-font-size: calc(var(--base-font-size) * 7);
     --max-font-size: 0.9375rem;
    }
 
    #top-bar {
     --mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
    }
 
    html,
    body {
     font-feature-settings: "onum"0;
     font-variant-numeric: tabular-nums;
    }
 
    body {
     --wght: 400;
     background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance);
     font-weight: 400;
    }
 
    #header h1 {
     text-transform: uppercase;
     letter-spacing: 0.2em;
    }
 
    #header h2 {
     display: none;
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
     box-shadow: initial !important;
     color: rgba(0, 0, 0, 0) !important;
    }
 
    #main-content {
     flex-basis: 100%;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
     --wght: 900;
     color: rgba(var(--light-gray-monochrome));
     font-family: var(--title-font);
     font-weight: 900;
    }
 
    hr {
     position: relative;
     height: 0.5em;
     overflow: hidden;
     border: initial;
     background-color: rgba(0, 0, 0, 0);
    }
 
    hr::before {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-attachment: fixed;
     background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-64-uv5d/cons_circle.png");
     background-repeat: repeat;
     background-position: top center;
     background-size: 100vh;
     pointer-events: none;
     -webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
     clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):not(.cc):not([href*="u-credit"]) {
     margin: -0.15em;
     padding: 0.15em;
     transition:
     box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
     color: rgb(var(--gray-monochrome));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):not(.cc):not([href*="u-credit"]):hover {
     margin: -0.25em;
     padding: 0.3em 0.25em 0.2em 0.25em;
     box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
     color: rgb(var(--white-monochrome));
     text-decoration: none
    }
 
    #extra-div-3 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: var(--header-height-on-desktop);
     background: url("https://scp-jp-storage.wdfiles.com/local--files/file:7657035-63-eagk/foundation-header-img.png");
     background-position: center center;
     pointer-events: none;
    }
 
    #header::before {
     content: none;
    }
 
    #login-status .printuser {
     --wght: 900;
     color: rgb(var(--swatch-text-light));
     font-weight: 900 !important;
    }
 
    #top-bar div.top-bar>ul>li,
    #top-bar div.mobile-top-bar>ul>li {
     --wght: 800;
     font-family: var(--title-font);
     font-weight: 800;
     text-transform: uppercase;
     isolation: isolate;
    }
 
    #top-bar div.top-bar>ul>li::before,
    #top-bar div.mobile-top-bar>ul>li>a::before {
     content: " ";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -webkit-animation-direction: reverse;
     animation-direction: reverse;
     opacity: 0;
     background:
     url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-65-wnwd/foundation-circles-bg.png");
     background-attachment: fixed;
     background-position: center center;
     background-size: 100vh;
     pointer-events: none;
     pointer-events: none;
    }
 
    #top-bar div.top-bar>ul>li:hover::before,
    #top-bar div.mobile-top-bar>ul>li>a:hover::before {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 1;
    }
 
    #top-bar div.top-bar>ul>li>a::before,
    #top-bar div.top-bar>ul>li>a::after {
     z-index: 1;
     background-color: rgba(var(--dark-gray-monochrome));
     pointer-events: none;
    }
 
    #interwiki {
     background-color: transparent;
    }
 
    #side-bar {
     --swatch-border-color: rgb(var(--light-gray-monochrome));
     z-index: 10;
     top: 0;
     background-image:
     linear-gradient(to bottom,
     rgba(var(--swatch-menubg-dark-color), 1) 0%,
     rgba(var(--swatch-menubg-dark-color), 0.55) 100%),
     url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-64-uv5d/cons_circle.png");
     transition:
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     background-repeat: no-repeat, no-repeat;
     background-position:
     -2.5rem center,
     calc(-100% + var(--sidebar-width-on-desktop)) center;
     background-size:
     cover,
     125vh;
     background-blend-mode:
     multiply,
     normal;
    }
 
    #side-bar:hover,
    #side-bar:active {
     background-color: rgb(var(--swatch-menubg-dark-color));
     background-position: center center, center center;
    }
 
    #side-bar:focus-within {
     background-color: rgb(var(--swatch-menubg-dark-color));
     background-position: center center, center center;
    }
 
    @media only screen and (max-width:56.25rem) {
     #side-bar:target {
     background-color: rgb(var(--swatch-menubg-dark-color));
     background-position: center center, center center;
     }
    }
 
    #interwiki .heading,
    #side-bar .heading {
     position: relative;
     padding-top: 0.15em;
     padding-bottom: 0.25em;
     font-family: var(--title-font);
    }
 
    #interwiki div.menu-item a,
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
     margin: 0.15em 0;
    }
 
    .yui-navset .yui-nav {
     --wght: 600;
     font-family: var(--title-font);
     font-weight: 600;
    }
 
    .yui-navset .yui-nav a::before {
     background-color: transparent;
     background-image:
     radial-gradient(closest-side,
     rgba(var(--tabs-bg), 1),
     rgba(var(--tabs-bg), 0)),
     url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-65-wnwd/foundation-circles-bg.png"),
     radial-gradient(closest-side,
     rgba(var(--tabs-bg), 1),
     rgba(var(--tabs-bg), 0));
     background-blend-mode: normal, overlay, normal;
     background-position: center center, center center;
     background-size: 100% 100%, 100vw, 100% 100%;
     pointer-events: none;
    }
 
    .yui-navset .yui-nav a:hover::before,
    .yui-navset .yui-nav a:active::before {
     background-color: transparent;
     background-image:
     radial-gradient(rgba(var(--tabs-hover-bg), 0),
     rgba(var(--tabs-hover-bg), 1)),
     url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-65-wnwd/foundation-circles-bg.png"),
     radial-gradient(rgba(var(--tabs-hover-bg), 0),
     rgba(var(--tabs-hover-bg), 1));
 
    }
 
    .yui-navset .yui-nav .selected a::before,
    .yui-navset .yui-nav .selected:hover a::before,
    .yui-navset .yui-nav .selected:focus a::before,
    .yui-navset .yui-nav .selected:active a::before {
     background-color: transparent;
     background-image:
     radial-gradient(rgba(var(--tabs-selected-bg), 0),
     rgba(var(--tabs-selected-bg), 1)),
     url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-65-wnwd/foundation-circles-bg.png"),
     radial-gradient(rgba(var(--tabs-selected-bg), 0),
     rgba(var(--tabs-selected-bg), 1));
    }
 
    .yui-navset .yui-nav li a,
    .yui-navset .yui-nav li a em,
    .yui-navset .yui-nav .selected a,
    .yui-navset .yui-nav .selected a em {
     background-color: transparent !important;
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-nav .selected {
     background-color: rgb(var(--swatch-background));
    }
 
    table.wiki-content-table {
     border-collapse: collapse;
    }
 
    table.wiki-content-table th {
     position: relative;
     border-color: rgb(var(--light-gray-monochrome)) !important;
     background-attachment: fixed;
     background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7657035-65-wnwd/foundation-circles-bg.png");
     background-position: top center;
     background-size: 100vh;
     font-family: var(--title-font);
     font-weight: 600;
     text-transform: uppercase;
    }
 
    @media only screen and (max-width: 56.25rem) {
     #header h1 a {
     text-align: center;
     font-size: 3.5em;
     }
 
     #top-bar {
     font-size: calc(var(--base-font-size) * 0.8);
     }
 
     #top-bar>div.mobile-top-bar>div.open-menu {
     font-size: calc(var(--base-font-size) * 0.65);
     }
 
     #top-bar div.mobile-top-bar>ul>li>a {
     letter-spacing: 0;
     }
 
     #top-bar>div.top-bar>ul>li:last-of-type>ul,
     #top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
     left: 50%;
     }
 
     #top-bar div.mobile-top-bar>ul>li>ul>li>a {
     white-space: pre-wrap;
     }
 
     #main-content {
     margin-top: 2.1em;
     }
    }
}
 
@-webkit-keyframes fade {
    0% {
     opacity: 1;
    }
 
    100% {
     opacity: 0;
    }
}
 
@keyframes fade {
    0% {
     opacity: 1;
    }
 
    100% {
     opacity: 0;
    }
}

Footnotes

1. リンクがどのように強調表示されるかも確認してください!

+ コンポーネントのコードを表示

: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: 56.25rem) {
    #content-wrap {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
     width: -webkit-calc(100vw - (100vw - 100%));
     width: -moz-calc(100vw - (100vw - 100%));
     width: calc(100vw - (100vw - 100%));
     min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
     min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
     min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
     -webkit-box-flex: 2;
     -webkit-flex-grow: 2;
        -moz-box-flex: 2;
         -ms-flex-positive: 2;
             flex-grow: 2;
     height: auto;
     position: initial;
     margin: 0 auto;
     max-width: inherit;
     margin-left: -11em;
     margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
     margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
     margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
    }
 
    #main-content {
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     width: 45.75rem;
     width: var(--body-width-on-desktop, 45.75rem);
     max-width: 45.75rem;
     max-width: var(--body-width-on-desktop, 45.75rem);
     margin: 0 auto;
    }
 
    #page-content {
     max-width: min(90vw, 45.75rem);
     max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    #side-bar {
     -webkit-transform: translateX(-14.6rem);
        -moz-transform: translateX(-14.6rem);
         -ms-transform: translateX(-14.6rem);
          -o-transform: translateX(-14.6rem);
             transform: translateX(-14.6rem);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
     -webkit-transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear;
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     border: none;
     border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
     width: var(--sidebar-width-on-desktop, 13.6rem) !important;
     min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
     grid-area: side-bar;
     padding-right: 2rem;
     background-color: transparent;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
     top: 0;
     max-height: 100vh;
     position: -webkit-sticky;
     position: sticky;
     left: 0;
     padding-left: 0.5rem;
     direction: rtl;
     scrollbar-width: thin;
     -ms-scroll-chaining: none;
         overscroll-behavior: contain;
     overflow-y: scroll;
     scrollbar-color:
     rgba(170, 170, 170, 0)  /* Thumb */
     rgba(252, 252, 252, 0); /* Track */
     scrollbar-color:
     rgba(var(--swatch-primary-darker, 170, 170, 170), 0.1)   /* Thumb */
     rgba(var(--swatch-tertiary-color, 252, 252, 252), 0.05); /* Track */
    }
 
    #side-bar::-webkit-scrollbar-track {
     background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
    }
 
    #side-bar::-webkit-scrollbar,
    #side-bar::-webkit-scrollbar-thumb,
    #side-bar::-webkit-scrollbar-corner {
     width: 0.5rem;
     border-right-width: -webkit-calc(100vw + 100vh);
     border-right-width: calc(100vw + 100vh);
     border-right-style: inset;
     border-color: inherit;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
    }
 
    #side-bar:hover,
    #side-bar:active {
     background-color: white;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
     padding-right: 0.25rem;
     margin-right: 1.75rem;
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-color:
     rgba(170, 170, 170, 1)  /* Thumb */
     rgba(252, 252, 252, 1); /* Track */
     scrollbar-color:
     rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
     rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
     border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #side-bar:focus-within {
     background-color: white;
     background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
     padding-right: 0.25rem;
     margin-right: 1.75rem;
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-color:
     rgba(170, 170, 170, 1)  /* Thumb */
     rgba(252, 252, 252, 1); /* Track */
     scrollbar-color:
     rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
     rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
     border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #main-content::after {
     content: " ";
     position: fixed;
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
        -moz-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
        -moz-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     width: 1rem;
     height: 100%;
     max-height: 100%;
     top: 0;
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     left: 1rem;
     background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
     background-repeat: no-repeat;
     background-position: center left 1rem;
     background-attachment: fixed;
     -webkit-background-size: 1rem 12.875rem;
        -moz-background-size: 1rem 12.875rem;
          -o-background-size: 1rem 12.875rem;
             background-size: 1rem 12.875rem;
     pointer-events: none;
    }
 
    #side-bar:hover+#main-content::after,
    #side-bar:active+#main-content::after {
     left: -17em;
     left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0;
     width: 0rem;
     font-size: 0em;
    }
 
    #side-bar:focus-within+#main-content::after {
     left: -17em;
     left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0;
     width: 0rem;
     font-size: 0em;
    }
 
    #main-content::before {
     --not-ie: absolute;
     content: " ";
     background-color: black;
     background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
     position: fixed;
     position: var(--not-ie);
     top: 0;
     top: var(--final-header-height-on-desktop, 0);
     left: 0;
     -webkit-transform: translateX(-12.6rem);
        -moz-transform: translateX(-12.6rem);
         -ms-transform: translateX(-12.6rem);
          -o-transform: translateX(-12.6rem);
             transform: translateX(-12.6rem);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
     width: 17em;
     width: var(--sidebar-width-on-desktop, 17em);
     height: -webkit-calc(100% - 3rem);
     height: -moz-calc(100% - 3rem);
     height: calc(100% - 3rem);
     height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     -webkit-transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0.5;
     pointer-events: none;
     z-index: 9;
     margin-bottom: 0;
     margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
     margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
     margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
    }
 
    #side-bar:hover+#main-content::before,
    #side-bar:active+#main-content::before {
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     opacity: 0;
    }
 
    #side-bar:focus-within+#main-content::before {
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     opacity: 0;
    }
 
    #side-bar .side-block {
     margin-top: 1em;
     padding-left: 0.25em;
     background-color: rgb(0, 0, 0, 0);
     -webkit-border-radius: 0;
        -moz-border-radius: 0;
             border-radius: 0;
     border-left-width: 0rem;
     border-right-width: 0rem;
     direction: ltr;
    }
 
    #side-bar .scpnet-interwiki-wrapper {
     direction: ltr;
    }
 
    @supports (-ms-ime-align: auto) {
     #side-bar {
     overflow-y: hidden;
     overflow-x: hidden;
     -webkit-transform: translateX(-90%) !important;
        -moz-transform: translateX(-90%) !important;
         -ms-transform: translateX(-90%) !important;
          -o-transform: translateX(-90%) !important;
             transform: translateX(-90%) !important;
     }
 
     #side-bar:hover,
     #side-bar:active {
     overflow-y: auto;
     -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
         -ms-transform: translateX(0) !important;
          -o-transform: translateX(0) !important;
             transform: translateX(0) !important;
     margin-left: -0.5rem;
     }
 
     #side-bar:focus-within {
     overflow-y: auto;
     -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
         -ms-transform: translateX(0) !important;
          -o-transform: translateX(0) !important;
             transform: translateX(0) !important;
     margin-left: -0.5rem;
     }
 
     #main-content::before {
     left: 1rem;
     -webkit-transform: translateX(-100%) !important;
        -moz-transform: translateX(-100%) !important;
         -ms-transform: translateX(-100%) !important;
          -o-transform: translateX(-100%) !important;
             transform: translateX(-100%) !important;
     }
    }
    /* Print Friendly Formatting by Estrella */
    body.print-body {
     --sidebar-width-on-desktop: 0;
    }
    body.print-body #main-content::before,
    body.print-body #main-content::after {
     display: none;
    }
}

---

+ コンポーネントのコードを表示

@supports(display: grid) {
    :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);
    }
 
    #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)/1.6 - 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;
    }
}