테마 색상
사용법
비고: 블랙 하이라이터 기반 테마입니다. 이 테마를 쓰려면 블랙 하이라이터 테마를 같이 불러오셔야 합니다. 자세한 것은 여기서 확인하세요.1
어디서나 아래를 붙여넣으세요.
[[include :scpko:theme:black-highlighter-theme]]
[[include :scpko:theme:the-foundation-theme]]
SCP-4485에서처럼 어두운 테마로 하기:
[[include :scpko:theme:black-highlighter-theme]]
[[include :scpko:theme:the-foundation-theme |dark=--]]]
예시
수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.
제목은 문장 처음에 "+"을 1개부터 6개까지 입력해서 적용할 수 있습니다.
탭뷰입니다.
와! 다른 텍스트!
멋지다구요.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
인용 블록입니다. 문장 처음에 ">"를 붙여서 만들 수 있습니다.
다른 텍스트
요건 수평줄
블록 속의 블록
이건 | 표입니다 |
---|---|
어떤 식으로 | 만드는 건진 |
다 아시죠 |
body/header 폰트는 Source Sans Pro + Noto Sans KR,
title 폰트는 Merriweather + IBM Plex Sans KR,
monospace 폰트는 나눔고딕코딩입니다.
@import url("https://use.typekit.net/cjg4ysl.css"); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap'); @import url('http://xcninety.github.io/fonts/IBMPlexSansKR-Regular.css'); @import url('http://xcninety.github.io/fonts/Cafe24Ohsquareair.css'); @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap'); @supports(display:grid) { :root { --body-font: "franklin-gothic-urw", 'Noto Sans KR', sans-serif; --header-font: "titling-gothic-fb-compressed", 'Cafe24Ohsquareair', sans-serif; --title-font: "hypatia-sans-pro", 'IBMPlexSansKR', sans-serif; --mono-font: 'Nanum Gothic Coding', monospace; --header-title: "재단"; --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-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%); --gradient-topmenu: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 12.25rem, rgba(var(--swatch-topmenu-border-color)) 12.25rem, rgba(var(--swatch-topmenu-bg-color), 1) 12.3125rem, rgba(var(--swatch-topmenu-bg-color), 1) -webkit-calc(100% - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -webkit-calc(100% - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 100%); --gradient-topmenu: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 12.25rem, rgba(var(--swatch-topmenu-border-color)) 12.25rem, rgba(var(--swatch-topmenu-bg-color), 1) 12.3125rem, rgba(var(--swatch-topmenu-bg-color), 1) -moz-calc(100% - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -moz-calc(100% - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 100%); --gradient-topmenu: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 12.25rem, rgba(var(--swatch-topmenu-border-color)) 12.25rem, rgba(var(--swatch-topmenu-bg-color), 1) 12.3125rem, 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) -webkit-calc(3rem - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -webkit-calc(3rem - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 3rem); --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) -moz-calc(3rem - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) -moz-calc(3rem - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 3rem); --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(3rem - .125rem), rgba(var(--swatch-topmenu-bg-color), 0) calc(3rem - .125rem), rgba(var(--swatch-topmenu-border-color), 0) 3rem); --header-background-image-size: 100% 12.25rem; --base-font-size: 0.938rem; } #side-bar::-webkit-scrollbar { background-color: rgba(var(--bright-accent),0); } #side-bar::-webkit-scrollbar-thumb { background-color: rgba(var(--dark-gray-monochrome),0); } ::-webkit-scrollbar, #side-bar:hover::-webkit-scrollbar { background-color: rgba(var(--bright-accent)); } ::-webkit-scrollbar-thumb, #side-bar:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--dark-gray-monochrome)); } html, body { -webkit-font-feature-settings: "onum"0; -moz-font-feature-settings: "onum"0; font-feature-settings: "onum"0; font-variant-numeric: tabular-nums; scrollbar-color: rgb(var(--dark-gray-monochrome)) rgb(var(--bright-accent)); } body { font-weight: 400; -webkit-background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); -moz-background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); -o-background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance); } .danger-diamond a, .danger-diamond a:hover { color: rgba(0,0,0,0) !important; box-shadow: initial !important; } #main-content { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } #page-title, h1, h2, h3, h4, h5, h6 { color: rgba(var(--light-gray-monochrome)); font-family: var(--title-font); font-weight: 900; } hr { height: 0.5em; border: initial; position: relative; background-color: rgba(0, 0, 0, 0); overflow: hidden; } hr::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("http://www.scp-wiki.net/local--files/theme:the-foundation-theme/cons_circle.svg"); background-size: 50vw; background-attachment: fixed; background-position: center center; background-repeat: repeat; -webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%); clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%); pointer-events: none; } #page-content a:not([href*="user"]):not([href*="javascript:;"]) { padding: 0.15em; margin: -0.15em; color: rgb(var(--gray-monochrome)); -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1); -moz-box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1); box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1); -webkit-transition: 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), -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: 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), -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-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); -moz-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), -moz-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1); 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); 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), -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } #page-content a:not([href*="user"]):not([href*="javascript:;"]):hover { padding: 0.3em 0.25em 0.2em 0.25em; margin: -0.25em; -webkit-box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1); -moz-box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1); box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1); text-decoration: none; color: rgb(var(--white-monochrome)) } #extra-div-3 { position: absolute; width: 100%; height: 12.25rem; top: 0; left: 0; pointer-events: none; background: url("http://www.scp-wiki.net/local--files/theme:the-foundation-theme/cons_circle.svg"), var(--gradient-header); background-size: 100%, var(--header-background-image-size); background-position: center -10.5rem, center center; background-blend-mode: overlay; isolation: isolate; } #header { background: initial; height: 12.25rem; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(var(--light-gray-monochrome))), color-stop(90%, rgb(var(--header-gradient-color-middle))), to(rgb(var(--header-gradient-color-top)))); background-image: -webkit-linear-gradient(bottom, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--header-gradient-color-middle)) 90%, rgb(var(--header-gradient-color-top)) 100%); background-image: -moz-linear-gradient(bottom, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--header-gradient-color-middle)) 90%, rgb(var(--header-gradient-color-top)) 100%); background-image: -o-linear-gradient(bottom, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--header-gradient-color-middle)) 90%, rgb(var(--header-gradient-color-top)) 100%); background-image: linear-gradient(to top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--header-gradient-color-middle)) 90%, rgb(var(--header-gradient-color-top)) 100%); -webkit-mask-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); mask-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center -3.5rem; mask-position: center -3.5rem; -webkit-mask-clip: border-box; mask-clip: border-box; -webkit-mask-size: auto 20rem; mask-size: auto 20rem; background-position: center top; -webkit-background-size: auto; -moz-background-size: auto; -o-background-size: auto; background-size: auto; -webkit-filter: initial; filter: initial; opacity: 0.25; pointer-events: none; } #header h1, #header h1 a, #header h1 a::before { position: absolute; top: 0.5rem; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; 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; max-height: inherit; z-index: 0; } #header > h1 > a > span { width: 100%; height: 100%; top: 0; left: 0; max-width: inherit; } #header h1 { height: -webkit-calc(100% - 2.25rem); height: -moz-calc(100% - 2.25rem); height: calc(100% - 2.25rem); } #header h1 a::before, #header h1 a { text-align: center; font-weight: 100; text-transform: uppercase; font-size: -webkit-calc(2.75rem + (4.5 - 2.75) * ((100vw - 18.750rem) / (60 - 18.750))); font-size: -moz-calc(2.75rem + (4.5 - 2.75) * ((100vw - 18.750rem) / (60 - 18.750))); font-size: calc(2.75rem + (4.5 - 2.75) * ((100vw - 18.750rem) / (60 - 18.750))); line-height: 0.8; letter-spacing: 0.1em; } #header h2 span::before, #header h2 span { display: none; } #login-status, #login-status * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #login-status { min-height: -webkit-calc(var(--base-font-size) * 1.5); min-height: -moz-calc(var(--base-font-size) * 1.5); min-height: calc(var(--base-font-size) * 1.5); border: .0625rem solid rgb(var(--bright-accent)); -webkit-border-radius: .0625rem; -moz-border-radius: .0625rem; border-radius: .0625rem; -webkit-border-radius: var(--border-radius-width); -moz-border-radius: var(--border-radius-width); border-radius: var(--border-radius-width); color: rgba(0, 0, 0, 0); background-color: #424248; background-color: rgb(var(--gray-monochrome)); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #login-status .printuser { position: relative; top: 0; left: 0; color: rgb(var(--swatch-text-light)); border-right: .0625rem solid rgb(var(--bright-accent)); background: rgb(var(--swatch-primary-darkest)); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 0.25rem; margin: 0; font-weight: 900 !important; } #login-status .printuser a { width: 0.75em; } #login-status #my-account { color: rgb(var(--black-monochrome)); } #login-status #account-topbutton { border: initial; padding: 0.5em 0.5em 0.5em 0.25em; position: relative; height: 100%; top: 0; left: 0; margin: 0; font-size: 1em; } #account-options { width: auto; padding: 0.5em; border-color: rgb(var(--bright-accent)); background: var(--gradient-header); color: rgb(var(--swatch-text-light)); } #account-options ul li a { color: rgb(var(--swatch-text-light)); } #search-top-box { left: 3%; top: 0.5rem; } #search-top-box, #search-top-box * { border-color: rgb(var(--bright-accent)) !important; } #search-top-box-form > #search-top-box-input { width: 7rem; } #top-bar { margin: 12.25rem 0 0 0; height: 1.875rem; } #top-bar div.top-bar > ul > li, #top-bar div.mobile-top-bar > ul > li { font-family: var(--title-font); font-weight: 800; text-transform: uppercase; isolation: isolate; } #top-bar div.top-bar > ul > li:hover, #top-bar div.mobile-top-bar > ul > li:hover { background: rgb(var(--swatch-primary-darkest)); } #top-bar div.top-bar > ul > li::before, #top-bar div.mobile-top-bar > ul > li > a::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: url("http://www.scp-wiki.net/local--files/theme:the-foundation-theme/cons_circle.svg"), linear-gradient(75deg, rgb(var(--medium-accent)) 0%, rgb(var(--dark-accent)) 50%, rgb(var(--dark-accent)) 100%); background-attachment: fixed, fixed; background-size: 50vh 50vw, cover; background-position: left top, center center; background-blend-mode: overlay, normal; -webkit-transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-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), -moz-background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1); 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); 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-background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1); pointer-events: none; -webkit-animation-direction: reverse; -moz-animation-direction: reverse; -o-animation-direction: reverse; animation-direction: reverse; 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; background-size: 100vh 50vw, cover; } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul { margin-top: 1.9rem; } #top-bar div.top-bar > ul > li > a::before, #top-bar div.top-bar > ul > li > a::after { background-color: rgba(var(--dark-gray-monochrome)); pointer-events: none; z-index: 1; } #side-bar { --swatch-border-color: rgb(var(--light-gray-monochrome)); background-color: rgba(var(--dark-accent),0); scrollbar-color: rgba(var(--dark-gray-monochrome),0) rgba(var(--bright-accent),0); z-index: 10; background: linear-gradient( rgba(var(--dark-accent),0) 30%, rgba(var(--dark-accent),0)), linear-gradient( rgba(var(--dark-accent),0), rgba(var(--dark-accent),0) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(var(--swatch-primary-darkest),0), rgba(var(--black-monochrome),0)), radial-gradient(farthest-side at 50% 100%, rgba(var(--swatch-primary-darkest),0), rgba(var(--black-monochrome),0)) 0 100%; } #side-bar:hover { scrollbar-color: rgb(var(--dark-gray-monochrome)) rgb(var(--bright-accent)); background-color: rgba(var(--dark-accent),1); background: linear-gradient( rgba(var(--dark-accent),1) 30%, rgba(var(--dark-accent),0)), linear-gradient( rgba(var(--dark-accent),1), rgba(var(--dark-accent),0) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(var(--swatch-primary-darkest),.5), rgba(var(--black-monochrome),0)), radial-gradient(farthest-side at 50% 100%, rgba(var(--swatch-primary-darkest),.5), rgba(var(--black-monochrome),0)) 0 100%; } #side-bar div.menu-item { --swatch-border-color: rgb(var(--light-gray-monochrome)); background-color: rgba(var(--black-monochrome), 0.25); } #side-bar .heading { font-family: var(--title-font); background: url("http://www.scp-wiki.net/local--files/theme:the-foundation-theme/cons_circle.svg"), linear-gradient(to top, rgb(var(--black-monochrome)), rgb(var(--dark-accent))); background-attachment: fixed fixed; background-size: 50vw, 300% 300%; background-blend-mode: overlay, normal; background-position: left, left; padding-top: 0.15em; padding-bottom: 0.25em; isolation: isolate; } #side-bar div.menu-item a, #side-bar div.menu-item a:hover, #side-bar div.menu-item a:active, #side-bar div.menu-item a:visited, #side-bar div.menu-item .text { color: rgb(var(--white-monochrome)); margin: 0.15em 0; font-family: var(--title-font); } #side-bar div.menu-item a::before { background: linear-gradient(to top, rgb(var(--black-monochrome)), rgb(var(--dark-accent))); background-attachment: fixed fixed; background-size: 300% 500%; background-position: left; } .yui-navset .yui-nav a { -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); color: rgba(var(--white-monochrome)); } .yui-navset .yui-nav li { background-color: rgba(var(--swatch-menubg-light-color), 0); -webkit-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1); animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forward; -moz-animation-fill-mode: forward; -o-animation-fill-mode: forward; animation-fill-mode: forward; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .yui-navset .yui-nav li em { transition: -webkit-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: -o-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-transition: -webkit-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -moz-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), -o-transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1); } .yui-navset .yui-nav .selected { margin-top: -0.5em; padding-top: 0.5em; margin-right: 0.0625rem; background-color: rgb(var(--white-monochrome)); -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } .yui-navset .yui-nav .selected a em { -webkit-transform: translateY(-0.25em); -moz-transform: translateY(-0.25em); -ms-transform: translateY(-0.25em); -o-transform: translateY(-0.25em); transform: translateY(-0.25em); } .yui-navset .yui-nav a, .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:active, .yui-navset .yui-nav a:focus-within { background: rgba(0, 0, 0, 0) !important; font-family: var(--title-font); font-weight: 600; isolation: isolate; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:active, .yui-navset .yui-nav a:focus-within, .yui-navset .yui-nav .selected a { color: rgba(var(--bright-accent)) !important; } .yui-navset .yui-nav a::before, .yui-navset .yui-nav a::after { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; pointer-events: none; } .yui-navset .yui-nav a::before { background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--light-gray-monochrome))), color-stop(50%, rgb(var(--medium-accent))), to(rgb(var(--dark-accent)))); background-image: -webkit-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: -moz-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: -o-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: linear-gradient(to bottom, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-attachment: fixed; background-position: 100% 0; -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), color-stop(33%, rgba(0, 0, 0, 1)), color-stop(66%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); -webkit-mask-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%); mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), color-stop(33%, rgba(0, 0, 0, 1)), color-stop(66%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%); -webkit-mask-size: 100% 90px; mask-size: 100% 90px; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: center -58px; mask-position: center -58px; -webkit-transition: background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-mask-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1); pointer-events: none; } .yui-navset .yui-nav a::after { background-image: -webkit-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: -moz-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: -o-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-attachment: fixed; background-position: center center; -webkit-background-size: 25% 25%; -moz-background-size: 25% 25%; -o-background-size: 25% 25%; background-size: 25% 25%; mix-blend-mode: overlay; } .yui-navset .yui-nav a:hover::before, .yui-navset .yui-nav a:focus::before, .yui-navset .yui-nav .selected a::before { -webkit-mask-position: center 0px !important; mask-position: center 0px !important; background-position: 100% 200vh; } .yui-navset .yui-nav a:hover::after, .yui-navset .yui-nav a:focus::after, .yui-navset .yui-nav .selected a::after { opacity: 0; -webkit-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1); animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-animation-direction: backwards; -moz-animation-direction: backwards; -o-animation-direction: backwards; animation-direction: backwards; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; } table.wiki-content-table { border-collapse: collapse; } table.wiki-content-table th { border-color: rgb(var(--light-gray-monochrome)) !important; position: relative; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--light-gray-monochrome))), color-stop(50%, rgb(var(--medium-accent))), to(rgb(var(--dark-accent)))); background-image: -webkit-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: -moz-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: -o-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: linear-gradient(to bottom, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-attachment: fixed; background-position: 100% 0; font-family: var(--title-font); font-weight: 600; text-transform: uppercase; isolation: isolate; } table.wiki-content-table th::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: -moz-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: -o-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-attachment: fixed; background-position: center center; -webkit-background-size: 25% 25%; -moz-background-size: 25% 25%; -o-background-size: 25% 25%; background-size: 25% 25%; mix-blend-mode: overlay; pointer-events: none; } @media only screen and (max-width: 768px) { #header { background-position: left .5rem top 2rem; -webkit-background-size: auto 8.375rem; -moz-background-size: auto 8.375rem; -o-background-size: auto 8.375rem; background-size: auto 8.375rem; height: 12.25rem; top: -12.25rem; } #top-bar { font-size: -webkit-calc(var(--base-font-size) * 0.8); font-size: -moz-calc(var(--base-font-size) * 0.8); font-size: calc(var(--base-font-size) * 0.8); height: 2.5rem; top: -12.25rem; } #top-bar > div.mobile-top-bar > div.open-menu { font-size: -webkit-calc(var(--base-font-size) * 0.65); font-size: -moz-calc(var(--base-font-size) * 0.65); font-size: calc(var(--base-font-size) * 0.65); width: 2.5rem; height: 2.5rem; } #top-bar > div.mobile-top-bar > div.open-menu > p > a { color: rgb(var(--swatch-menutxt-dark-color)) !important; } #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 { margin-top: 2.5rem; } #top-bar div.mobile-top-bar > ul > li > ul > li { max-height: -webkit-calc(100vh / 10); max-height: -moz-calc(100vh / 10); max-height: calc(100vh / 10); height: 50em; } #top-bar div.mobile-top-bar > ul > li > ul > li > a { white-space: pre-wrap; } #side-bar:target .close-menu { width: -webkit-calc(100% - 15em - var(--scrollbar-width)); width: -moz-calc(100% - 15em - var(--scrollbar-width)); width: calc(100% - 15em - var(--scrollbar-width)); } #search-top-box { right: 0 !important; top: 0 !important; left: inherit; } #search-top-box-form > #search-top-box-input { width: inherit; right: 0 !important; top: 0 !important; } #search-top-box-input, #navi-bar, #navi-bar-shadow { display: inline-block; } #search-top-box { height: 12.25rem; } #search-top-box:focus-within form[id="search-top-box-form"] { padding-right: -webkit-calc(3% + 30px); padding-right: -moz-calc(3% + 30px); padding-right: calc(3% + 30px); padding-top: 2.3125rem; } #search-top-box:not(:focus-within):before { top: 5.625rem; width: 2rem !important; } #search-top-box form[id="search-top-box-form"] { height: 100%; visibility: hidden; right: 0 !important; position: absolute; } #search-top-box form[id="search-top-box-form"]:focus-within { visibility: visible; right: 1em; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { height: 12.25rem; width: 2rem !important; } #main-content { margin-top: 2.1em; } #extra-div-3 { display: none; } hr::before { background-image: inherit; background-color: rgb(var(--swatch-primary)); } } } @-webkit-keyframes tab-active { 0% { background-color: rgba(var(--swatch-menubg-light-color), 0); padding-top: 0; margin-top: 0; margin-right: 0; } 100% { background-color: rgba(var(--white-monochrome), 1); padding-top: 0.5em; margin-top: -0.5em; margin-right: 0.0625rem; } } @-moz-keyframes tab-active { 0% { background-color: rgba(var(--swatch-menubg-light-color), 0); padding-top: 0; margin-top: 0; margin-right: 0; } 100% { background-color: rgba(var(--white-monochrome), 1); padding-top: 0.5em; margin-top: -0.5em; margin-right: 0.0625rem; } } @-o-keyframes tab-active { 0% { background-color: rgba(var(--swatch-menubg-light-color), 0); padding-top: 0; margin-top: 0; margin-right: 0; } 100% { background-color: rgba(var(--white-monochrome), 1); padding-top: 0.5em; margin-top: -0.5em; margin-right: 0.0625rem; } } @keyframes tab-active { 0% { background-color: rgba(var(--swatch-menubg-light-color), 0); padding-top: 0; margin-top: 0; margin-right: 0; } 100% { background-color: rgba(var(--white-monochrome), 1); padding-top: 0.5em; margin-top: -0.5em; margin-right: 0.0625rem; } } @-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }
:root { --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); } html, body { color: rgb(var(--swatch-text-light)); } .page-rate-widget-box { margin: 0; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(var(--black-monochrome),.55)), to(rgba(var(--swatch-primary-darkest),.45))); background: -webkit-linear-gradient(bottom, rgba(var(--black-monochrome),.55) 0, rgba(var(--swatch-primary-darkest),.45)); background: -moz-linear-gradient(bottom, rgba(var(--black-monochrome),.55) 0, rgba(var(--swatch-primary-darkest),.45)); background: -o-linear-gradient(bottom, rgba(var(--black-monochrome),.55) 0, rgba(var(--swatch-primary-darkest),.45)); background: linear-gradient(0deg, rgba(var(--black-monochrome),.55) 0, rgba(var(--swatch-primary-darkest),.45)); } #page-title,h1,h2,h3,h4,h5,h6 { color: rgb(var(--swatch-text-light)) !important; } #page-title { border-color: rgb(var(--light-gray-monochrome)) !important; position: relative; margin-top: 1rem; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(var(--light-gray-monochrome))), color-stop(50%, rgb(var(--medium-accent))), to(rgb(var(--dark-accent)))); background-image: -webkit-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: -moz-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: -o-linear-gradient(top, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); background-image: linear-gradient(to bottom, rgb(var(--light-gray-monochrome)) 0%, rgb(var(--medium-accent)) 50%, rgb(var(--dark-accent)) 100%); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-attachment: fixed; background-position: 100% 0; font-family: var(--title-font); font-weight: 600; text-transform: uppercase; border: .0625rem solid rgba(66,66,72,.25) !important; border: .0625rem solid rgba(var(--swatch-menubg-medium-dark-color),.25) !important; isolation: isolate; } #page-title::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: -moz-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: -o-repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-image: repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.5) 0.35vh, rgba(88, 88, 88, 0.6) 0.5vh); background-attachment: fixed; background-position: center center; -webkit-background-size: 25% 25%; -moz-background-size: 25% 25%; -o-background-size: 25% 25%; background-size: 25% 25%; mix-blend-mode: overlay; pointer-events: none; } #header h2, #header h2 span, #header h2 span::before { position: absolute; top: 0.5rem; left: 0; margin: 0; padding: 0; width: 100%; height: 50%; top: 40%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; max-height: inherit; z-index: 0; font-weight: 500; font-family: var(--header-font); text-transform: uppercase; letter-spacing: 0.5em; pointer-events: none; } .danger-diamond a, .danger-diamond a:hover { color: rgba(0,0,0,0) !important; -webkit-box-shadow: initial !important; -moz-box-shadow: initial !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='http://www.w3.org/2000/svg' xmlns:xlink='http://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, table.wiki-content-table * { border-color: rgb(var(--black-monochrome)) !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } table.wiki-content-table tbody tr th { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; border-color: rgb(var(--black-monochrome)) !important; } table.wiki-content-table tr { border-width: 0px !important; } table.wiki-content-table tr, table.wiki-content-table th { width: 100%; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 0; font-weight: 700; } table.wiki-content-table td { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; -webkit-box-flex: 2; -webkit-flex-grow: 2; -moz-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; background-color: rgb(var(--swatch-primary-darkest)); color: rgb(var(--white-monochrome)); text-transform: uppercase; line-height: 1; text-align: center; } table.wiki-content-table td * { width: 100%; } table.wiki-content-table td span:nth-of-type(even) { font-family: var(--mono-font); font-size: 0.75em; } blockquote, .blockquote { background-color: rgb(var(--swatch-menubg-dark-color)); } #page-content a:not([href*="user"]):not([href*="javascript:;"]) { color: rgb(var(--light-gray-monochrome)) !important; } #page-content a:not([href*="user"]):not([href*="javascript:;"]):hover { color: rgb(var(--black-monochrome)) !important; -webkit-box-shadow: inset 0 -1.5em 0 0 rgba(var(--light-gray-monochrome), 1) !important; -moz-box-shadow: inset 0 -1.5em 0 0 rgba(var(--light-gray-monochrome), 1) !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)); } @media only screen and (max-width: 768px) { #page-title { font-size: 2em; } table.wiki-content-table tr { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } table.wiki-content-table tr > td { min-width: 100%; font-size: 1rem; padding: 0.5rem; } } .scp-image-block { -webkit-box-shadow: initial; -moz-box-shadow: initial; box-shadow: initial; } .scp-image-block .scp-image-caption { background-color: rgb(var(--swatch-menubg-dark-color)); }
:root { --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15)); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 56.25rem) { #content-wrap { display: flex; position: initial; flex-direction: row; flex-grow: 2; width: calc(100vw - (100vw - 100%)); max-width: inherit; height: auto; min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem)); margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2); } #main-content { position: initial; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } #side-bar { position: -webkit-sticky; position: sticky; top: 0; left: 0; grid-area: side-bar; width: var(--sidebar-width-on-desktop, 13.6rem) !important; min-width: var(--sidebar-width-on-desktop, 13.6rem) !important; max-height: 100vh; padding-right: 2.5rem; padding-left: 0.5rem; overflow-y: scroll; transition: translate 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; border: none; border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem); direction: rtl; scrollbar-width: thin; -ms-scroll-chaining: none; overscroll-behavior: contain; scrollbar-color: rgba(var(--swatch-primary-darker), 0.1) /* Thumb */ rgba(var(--swatch-tertiary-color), 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: calc(100vw + 100vh); border-right-style: inset; border-color: inherit; background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0); } #side-bar:is(:hover, :active, :focus-within) { margin-right: 2.25rem; padding-right: 0.25rem; overflow-x: hidden; overflow-y: auto; border-color: rgba(var(--swatch-primary-darker), 1); background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1); translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)); 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 */ } #main-content::after { content: " "; display: flex; position: fixed; top: 0; left: 1rem; align-items: center; justify-content: center; width: 1rem; height: 100%; max-height: 100%; 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); background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center left 1rem; background-size: 1rem 12.875rem; pointer-events: none; } #side-bar:is(:hover, :active, :focus-within) + #main-content::after { left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); width: 0rem; 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; background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1); font-size: 0em; } #main-content::before { content: " "; position: absolute; z-index: 9; top: var(--final-header-height-on-desktop, 0); left: 0; width: var(--sidebar-width-on-desktop, 14.5rem); height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem); margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem); transition: translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0.5; background-color: rgb(var(--swatch-alternate-color, 0, 0, 0)); pointer-events: none; translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem); } #side-bar:is(:hover, :active, :focus-within) + #main-content::before { translate: 0; opacity: 0; } #side-bar .side-block { margin-top: 1em; padding-left: 0.25em; border-right-width: 0rem; border-left-width: 0rem; border-radius: 0; background-color: rgb(0, 0, 0, 0); direction: ltr; } #side-bar .scpnet-interwiki-wrapper { direction: ltr; } /* 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; } }