The Foundationテーマ
Black Highlighterテーマ » Black Highlighter Themes » The Foundationテーマ
テーマカラー
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テーマもインポートする必要があります。詳細については、ここを参照してください1。
どんなウィキでも:
[[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文字の「+」を置くことで作成できます
これはタブです。
見てください、ここにもテキストがあります。
なんと奇妙な。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは引用ブロックです。各行の先頭に半角の「> 」を置くことで作成されます。
追加のテキスト
これは罫線です
入れ子になった引用ブロック
| これは | テーブルです |
|---|---|
| もう | 作り方は |
| 知っているはずです | |
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; } }
: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://scp-jp.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)/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); } #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; }