사용법
비고: 이 테마는 블랙 하이라이터 기반 테마입니다. 이 테마를 이용하려면 블랙 하이라이터 테마도 적용해주세요. 상세한 정보는 여기를 참조.1
어느 위키에서나:
[[include :scpko:theme:black-highlighter-theme]]
[[include :scpko:theme:penumbra-bhl]]
CSS 변수는 (비교적) 간편하게 교체하기 위해 원본 테마와 동일합니다. [아래 참고]
—accentColor는 rgb로 변환해야 합니다. 예를 들어 #1EB5E8를 30, 181, 232로 바꾸는 것 처럼요. 변환 도구도 써 보세요.
헥스 색상으로 변환할 때 rgb( )를 포함시키지 마세요. 숫자만 있으면 됩니다.
:root:lang(ko) {
--header-title: "큰 헤더 제목";
--header-subtitle: "작은 헤더 부제목";
--lgurl: url("여기에 로고 url 입력");
--accentColor: 여기에 색상값 입력;
}
사용례
수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용구 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.
제목은 문장 앞에 "+"을 1개부터 6개까지 입력하여 적용할 수 있습니다.
이것은 탭 뷰입니다.
이것 봐요, 여기 텍스트가 더 있어요.
얼마나 근사한지.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
이것은 긴 탭입니다. 많은 텍스트를 담고 있죠.
인용구입니다. 문장 처음에 ">"를 붙여서 만들 수 있습니다.
다른 텍스트
요건 수평줄
중첩된 인용구
이건 | 표입니다 |
---|---|
어떤 식으로 | 만드는 건진 |
다 아시죠 |
[[div class="darkbox"]]
[[div class="lightbox"]]
사이드박스 div는 이렇게 만들어집니다.
[[div class="limit"]] <— 앵커anchor의 시작 한계를 설정
[[div class="anchor"]] <— 사이드박스가 고정될 위치를 설정
[[div class="sidebox"]]
사이드박스에 들어갈 내용.
[[/div]]
[[/div]]
사이드박스가 스크롤해 지나갈 내용.
[[/div]] <— 앵커anchor의 종료 한계를 설정
약간의 기교만 있으면 가능하죠.
사람들의 내 내 봅니다. 까닭이요, 벌레는 나는 듯합니다. 아무 우는 사람들의 잠, 다 별이 이름을 까닭입니다. 소녀들의 새겨지는 않은 하늘에는 버리었습니다. 이름과, 하나의 벌써 토끼, 새겨지는 별이 그리고 것은 없이 있습니다. 했던 위에 아름다운 덮어 밤을 그러나 이름과 까닭이요, 봅니다. 이름자를 어머니, 위에 별 나의 것은 계절이 버리었습니다.
나는 써 하나에 그리고 동경과 가을로 멀듯이, 계십니다. 위에 이네들은 가득 까닭입니다. 못 피어나듯이 아름다운 부끄러운 지나가는 잠, 봅니다. 이름과, 가을 별 아름다운 흙으로 별빛이 봅니다.
복수의 사이드박스를 사용하면,
사람들의 내 내 봅니다. 까닭이요, 벌레는 나는 듯합니다. 아무 우는 사람들의 잠, 다 별이 이름을 까닭입니다. 소녀들의 새겨지는 않은 하늘에는 버리었습니다. 이름과, 하나의 벌써 토끼, 새겨지는 별이 그리고 것은 없이 있습니다. 했던 위에 아름다운 덮어 밤을 그러나 이름과 까닭이요, 봅니다. 이름자를 어머니, 위에 별 나의 것은 계절이 버리었습니다.
나는 써 하나에 그리고 동경과 가을로 멀듯이, 계십니다. 위에 이네들은 가득 까닭입니다. 못 피어나듯이 아름다운 부끄러운 지나가는 잠, 봅니다. 이름과, 가을 별 아름다운 흙으로 별빛이 봅니다.
이렇게 됩니다.
사람들의 내 내 봅니다. 까닭이요, 벌레는 나는 듯합니다. 아무 우는 사람들의 잠, 다 별이 이름을 까닭입니다. 소녀들의 새겨지는 않은 하늘에는 버리었습니다. 이름과, 하나의 벌써 토끼, 새겨지는 별이 그리고 것은 없이 있습니다. 했던 위에 아름다운 덮어 밤을 그러나 이름과 까닭이요, 봅니다. 이름자를 어머니, 위에 별 나의 것은 계절이 버리었습니다.
나는 써 하나에 그리고 동경과 가을로 멀듯이, 계십니다. 위에 이네들은 가득 까닭입니다. 못 피어나듯이 아름다운 부끄러운 지나가는 잠, 봅니다. 이름과, 가을 별 아름다운 흙으로 별빛이 봅니다.
limit div가 없으면, 앵커anchor가 페이지 내용 전체를 따라 움직이게 됩니다.
사이드박스 div는 모바일이나 화면 너비 1290px 이하인 환경에서 보이지 않는단 사실을 기억해주세요.
헤더 글꼴은 Josefin Sans, 마포당인리발전소입니다.
본문 글꼴은 Roboto, 나눔바른고딕입니다.
고정폭 글꼴은 Fira Code, 나눔고딕코딩입니다.
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.25rem; left: 0.5rem; width: 3rem; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } } }
@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)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } }
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'); @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: "penumbra-bhl"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Penumbra BHL Theme"; /* set this to your theme's full name */ --lgurl: var(--logo-image); --header-subtitle: "SECURE - CONTAIN - PROTECT"; /* Typefaces */ --body-font: "Roboto", sans-serif; --header-font: "Josefin Sans", sans-serif; --title-font: "Josefin Sans", sans-serif; --mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, monospace; --ui-wght: 600; --ui-hvr-wght: 800; /* Standard Colors */ --white-monochrome: 248, 248, 248; /* white */ --pale-gray-monochrome: 237, 237, 237; /* v light gray for blockquotes and stuff */ --light-pale-gray-monochrome: 237, 237, 237; /* very light pale gray for misc. use */ --very-light-gray-monochrome: 215, 215, 215; /* very light accent gray for misc. use */ --light-gray-monochrome: 160, 160, 160; /* light accent gray for login status */ --gray-monochrome: 66, 66, 72; /* gray */ --dark-gray-monochrome: 47, 51, 60; /* dark accent gray for sidebar background */ --black-monochrome: 33, 37, 46; /* black */ --accentColor: 30, 181, 232; /*Penumbra Accent Color*/ --pale-accent: var(--accentColor); /* light red, for visited links */ --bright-accent: var(--accentColor); /* bright red */ --medium-accent: var(--accentColor); /* medium red - the "default" accent color */ --dark-accent: var(--accentColor); /* dark red */ --alt-accent: 221, 102, 17; /* pale orange, for newpage links */ /* Background and Header Colors */ --background-gradient-color: var(--black-monochrome); /* Primary Theme Colors */ --swatch-background: var(--dark-gray-monochrome); /* Primary Text Colors */ --swatch-text-light: var(--pale-gray-monochrome); --swatch-text-general: var(--swatch-text-light); /* Primary Menu Colors */ --swatch-menubg-color: var(--black-monochrome); --swatch-menutxt-general-color: var(--swatch-menutxt-light-color); --swatch-alternate-color: var(--swatch-menubg-dark-color); /* Link Colors */ --sidebar-links-text: var(--bright-accent); /* Rating Module Colors */ --rating-module-button-color: var(--white-monochrome); --rating-module-text-color: var(--swatch-menutxt-light-color); /* Header Gradients */ --diagonal-stripes: initial; /* header measurements */ --header-height-on-desktop: 8.750rem; --header-height-on-mobile: 8.750rem; --header-h1-font-size: calc(2rem + (2.75 - 2) * ((100vw - 18.750rem) / (60 - 18.750))); --header-h2-font-size: calc(var(--base-font-size) * 1.15); /* Toggle Sidebar Variable */ --toggle-border-color: rgb(var(--swatch-primary)); --toggle-icon-color: rgb(var(--swatch-primary)); --toggle-roundness: 0; } /* ===PAGE ELEMENTS COLORS=== */ :root { /* ===UI BUTTON COLORS=== */ --ui-button-bg: var(--swatch-menubg-medium-dark-color); --ui-button-txt: var(--swatch-text-secondary-color); --ui-button-hover-txt: var(--swatch-text-secondary-color); /* ===MODALS COLORS=== */ --modal-bg: var(--black-monochrome); --modal-body-text: var(--swatch-text-secondary-color); --modal-body-header-txt: var(--swatch-primary); --modal-header-bg: var(--black-monochrome); /* ===FOOTNOTES HOVER BLOCK COLORS=== */ --hoverblock-bg: var(--swatch-menubg-medium-dark-color); --hoverblock-txt: var(--swatch-text-general); } #header { /* Primary Header Colors */ --swatch-headerh1-color: var(--bright-accent); --swatch-headerh2-color: var(--bright-accent); } #footer { --footer-link-hover-color: var(--swatch-text-tertiary-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; } html, body { scrollbar-color: rgb(var(--swatch-primary)) rgb(var(--black-monochrome)); } body { background-image: var(--gradient-background); background-size: 100% var(--background-gradient-distance); } .danger-diamond a, .danger-diamond a:hover { color: rgba(0, 0, 0, 0) !important; box-shadow: initial !important; } #header::before { background-image: var(--lgurl); opacity: 0.15; background-size: auto 9.5rem; } #header h1 a { text-transform: uppercase; } #header h1, #header h1 a, #header h1 a::before { top: 0.35rem; } #header h2 { top: calc(var(--header-h2-font-size) * 0.9); } #side-bar .heading { background: none; flex-basis: 90%; margin: 0.5rem auto 0.125rem; font-family: var(--header-font); } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { text-transform: none; text-align: left; font-size: 0.94rem; text-indent: 0; } #page-content { font-size: 0.9rem !important; } #page-title { color: rgb(var(--swatch-text-general)); border-color: rgb(var(--swatch-text-general)); padding: 0; } h1, h2, h3, h4, h5, h6 { color: rgb(var(--swatch-primary)); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: rgb(var(--white-monochrome)); } #login-status #my-account { --wght: 400; font-weight: 400; } #top-bar div.mobile-top-bar>ul>li>ul>li>a, #top-bar div.top-bar>ul>li>ul>li>a { --wght: 400; font-weight: 400; } #top-bar div.mobile-top-bar>ul>li>ul>li:hover a, #top-bar div.top-bar>ul>li>ul>li:hover a { color: rgb(var(--black-monochrome)); } #page-content a:not([href*="user"]):not([href*="javascript:;"]) { padding: 0.15em; margin: -0.15em; color: rgb(var(--white-monochrome)); -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 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); } #page-content a:not([href*="user"]):not([href*="javascript:;"]):hover { padding: 0.3em 0.25em 0.2em 0.25em; margin: -0.25em; box-shadow: inset 0 -1.5em 0 0 rgba(var(--swatch-primary), 1); text-decoration: none; color: rgb(var(--black-monochrome)) } .page-rate-widget-box { background: rgb(var(--black-monochrome)); } /* Ayer's info-bar patch by Monkatraz */ #page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link { width: 100%; max-width: 100%; margin: 0 auto; box-shadow: none; } #page-content .info-container .collapsible-block-link { padding: 0; } #page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before { content: " "; display: none; } #page-content .info-container .collapsible-block-content::after { display: none; } #u-author_block>p>a { background-color: rgb(var(--black-monochrome)); border-radius: 0; } blockquote, div.blockquote, #toc { background-color: rgb(var(--black-monochrome)); border: solid 0.125rem rgb(var(--dark-gray-monochrome)); box-shadow: -0.188rem 0rem 0rem -0.006rem rgb(var(--swatch-primary)); } .code { background-color: rgb(var(--black-monochrome)); border: solid 0.1875rem rgb(var(--dark-gray-monochrome)); box-shadow: none; } .code pre, .code p, .code { font-size: 0.87rem; background-color: rgb(var(--black-monochrome)); color: rgb(var(--swatch-text-general)); } .code pre { white-space: pre-wrap; } .code pre span[class*="hl-"] { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } .yui-navset .yui-nav { width: 100%; } .yui-navset .yui-nav a { transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { box-shadow: initial; } .yui-navset .yui-nav li { background-color: rgb(var(--black-monochrome)); padding-top: 0.25em; -webkit-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; animation-iteration-count: 1; -webkit-animation-fill-mode: forward; animation-fill-mode: forward; -webkit-animation-play-state: paused; animation-play-state: paused; } .yui-navset .yui-nav li:hover { background-color: rgb(var(--swatch-primary)); } .yui-navset .yui-nav li em { transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1); color: rgb(var(--swatch-menutxt-light-color)); } .yui-navset .yui-nav li:hover em { color: rgb(var(--swatch-menutxt-dark-color)); } .yui-navset .yui-nav .selected { margin-top: -0.5em; padding-top: 0.5em; margin-right: 0.0625rem; background-color: rgb(var(--swatch-primary)); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-play-state: running; animation-play-state: running; } .yui-navset .yui-nav .selected a em { transform: translateY(-0.25em); color: rgb(var(--black-monochrome)); } .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: 700; isolation: isolate; } .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:hover::before, .yui-navset .yui-nav a:focus::before, .yui-navset .yui-nav .selected a::before { -webkit-mask-position: center 0rem !important; mask-position: center 0rem !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); animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-animation-direction: backwards; animation-direction: backwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .yui-navset .yui-content { background: rgb(var(--black-monochrome)); border: none; margin-top: 0.25rem; } table.wiki-content-table tr { border: none !important; } table.wiki-content-table th { background-color: rgb(var(--black-monochrome)); color: rgb(var(--swatch-primary)); ; font-family: var(--title-font); font-weight: 700; text-transform: uppercase; padding-top: 0.4em; } table.wiki-content-table th, table.wiki-content-table td { border: solid 0.0625rem rgb(var(--swatch-primary)) !important; } hr { border-color: rgb(var(--accentColor)); background-color: rgb(var(--accentColor)); } /*---- TAB ANIMATION by Croquembouche ---- */ .yui-navset .yui-content>div { display: block; top: 0; overflow: hidden; transform-origin: 0 0; } .yui-navset .yui-content>div[style*="none"] { display: block !important; flex: 0; max-height: 0; padding: 0 0.5em; border-width: 0; /* The following transition affects the one that DISAPPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18, .51, .54, .9) 0s; -webkit-animation: tab-disappear 0.5s ease-in-out 0s 1 both; animation: tab-disappear 0.5s ease-in-out 0s 1 both; } .yui-navset .yui-content>div[style*="block"] { display: block !important; flex: 1; max-height: 9999rem; /* The following transition affects the one that APPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18, .51, .54, .9) 0.5s; -webkit-animation: tab-appear 0.5s ease-in-out 0.5s 1 both; animation: tab-appear 0.5s ease-in-out 0.5s 1 both; } @-webkit-keyframes tab-disappear { 0% { max-height: 9999rem; } 1% { max-height: 100vh; } 100% { max-height: 0; } } @keyframes tab-disappear { 0% { max-height: 9999rem; } 1% { max-height: 100vh; } 100% { max-height: 0; } } @-webkit-keyframes tab-appear { 0% { max-height: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; } } @keyframes tab-appear { 0% { max-height: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; } } /* fancy collapsible */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background: rgb(var(--black-monochrome)); transition: background 0.25s linear; width: -moz-fit-content; width: fit-content; overflow: hidden; margin: auto; box-sizing: border-box; } #page-content .collapsible-block-folded .collapsible-block-link::before { content: "▷ "; } #page-content .collapsible-block-unfolded .collapsible-block-link::before { content: "▽ "; } #page-content .collapsible-block-link { display: inline-block; padding: 0.5rem 1rem; text-decoration: none; text-align: center; color: rgb(var(--white-monochrome)); font-weight: 700; } #page-content .collapsible-block-link:hover { color: rgb(var(--black-monochrome)); } #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover { background: rgb(var(--swatch-primary)); } #page-content .collapsible-block-unfolded-link { box-shadow: 0rem -0.26rem 0rem 0rem rgb(var(--swatch-primary)); } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 0.625rem; margin-bottom: 0.625rem; } .scp-image-block { border: solid 0.5rem rgb(var(--black-monochrome)); border-bottom: solid 0rem rgb(var(--black-monochrome)); box-shadow: 0rem 0.26rem 0rem 0rem rgb(var(--accentColor)); box-sizing: border-box; } .scp-image-block .scp-image-caption { background-color: rgb(var(--black-monochrome)); border: solid 0.25rem rgb(var(--black-monochrome)); color: rgb(var(--pale-gray-monochrome)); font-size: 0.84rem; box-shadow: none; } a.footnoteref { padding: 0.05em; color: rgb(var(--swatch-primary)); -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: inset 0 0 0 0rem rgba(var(--swatch-primary), 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); } a.footnoteref:hover { box-shadow: inset 0 -1.25em 0 0 rgba(var(--swatch-primary), 1); text-decoration: none; color: rgb(var(--black-monochrome)) } .footnotes-footer a[href*="javascript"]::before, .bibitems .bibitem::after, .footnotes-footer { background-color: rgb(var(--black-monochrome)); } /* Tags */ .page-tags span { border-top: 0.0625rem solid rgb(var(-white-monochrome)); } .page-tags span a { padding: 0.25em; color: rgb(var(--white-monochrome)); -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 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); } .page-tags span a:hover { padding: 0.3em 0.25em 0.2em 0.25em; box-shadow: inset 0 -1.75em 0 0 rgba(var(--swatch-primary), 1); text-decoration: none; color: rgb(var(--black-monochrome)) } div#page-options-bottom-2>a, div#page-options-bottom>a { border-color: rgba(var(--swatch-primary-darkest), 1); background-color: rgba(var(--swatch-menubg-dark-color), 1); color: rgb(var(--white-monochrome)); border-radius: 0; } div#page-options-bottom-2>a:active, div#page-options-bottom-2>a:hover, div#page-options-bottom>a:active, div#page-options-bottom>a:hover { border-color: rgba(var(--swatch-menubg-dark-color), 1); background-color: rgba(var(--swatch-primary-darkest), 1); color: rgb(var(--black-monochrome)); border-radius: 0; } #who-rated-page-area>div>span[style*="color"] { color: rgb(var(--swatch-text-secondary-color)) !important; } #footer { color: rgb(var(--black-monochrome)); } #license-area { color: rgb(var(--white-monochrome)); } input.text, textarea { background-color: rgb(var(--black-monochrome)); color: rgb(var(--swatch-text-general)); border-color: rgb(var(--swatch-menubg-dark-color)); } #lock-info { background-color: rgb(var(--black-monochrome)); color: rgb(var(--swatch-text-general)); border-color: rgb(var(--swatch-menubg-dark-color)); } /* Pop-Up Windows */ .owindow { background-color: rgb(var(--black-monochrome)); border-color: rgb(var(--swatch-primary)); } .owindow .modal-header { background-color: rgb(var(--black-monochrome)); } .owindow .modal-body img { background-color: transparent !important; } .owindow .title { background-color: rgb(var(--black-monochrome)); color: var(--swatch-primary); border-bottom: 0.0625rem solid rgb(var(--swatch-primary)); } .owindow .button-bar a { background-color: rgb(var(--black-monochrome)); border-color: rgb(var(--swatch-primary)); color: rgb(var(--white-monochrome)); } .owindow .button-bar a:hover { background-color: rgb(var(--swatch-primary)); } /* ---- INTERWIKI ---- */ html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before { box-shadow: inherit; } #side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) { filter: invert(1); } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before { mix-blend-mode: lighten; } .darkbox, .lightbox { border-left: solid 0.26rem rgb(var(--swatch-primary)); border-right: solid 0.26rem rgb(var(--swatch-primary)); padding: .4rem; margin-top: 0.75rem; margin-bottom: 0.75rem; } .darkbox { background-color: rgb(var(--black-monochrome)); } .lightbox { background-color: rgb(var(--white-monochrome)); color: rgb(var(--black-monochrome)); } .lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6 { color: rgb(var(--black-monochrome)); } /* Custom Assets by EstrellaYoshte */ .limit { margin-bottom: -1rem; } .anchor { position: -webkit-sticky; position: sticky; height: 0; top: 0; z-index: 9999; } .sidebox { background-color: rgb(var(--black-monochrome)); border-top: solid 0.125rem rgb(var(--swatch-primary)); padding: .14rem 1rem .14rem; margin-top: 0; margin-bottom: 0.5rem; width: calc((100vw - (var(--body-width-on-desktop) + 10rem))/2); max-height: calc(100vh - 18rem); position: absolute; top: 0; left: 103.5%; z-index: 5; overflow: auto; box-sizing: border-box; } .hovertip { color: rgb(var(--swatch-text-general)); } @media (max-width: 80.625rem) { .sidebox { width: auto; max-width: 50vw; color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgb(var(--swatch-primary)); border: none; right: calc(((100vw - 1em - var(--body-width-on-desktop)) / 2) * -1); left: initial; pointer-events: none; transition: max-width 0.2s ease-in-out 0.1s, color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, background-color 0s ease-in-out 0s; overflow-x: hidden; overflow-y: hidden; scrollbar-width: thin; } .sidebox::-webkit-scrollbar { width: 0.5em; } .sidebox * { opacity: 0; transition: opacity 0.2s ease-in-out 0.1s; } .sidebox::before, .sidebox::after { content: " "; position: absolute; pointer-events: all; right: 0; } .sidebox::before { top: calc(50% - 0.75rem); width: 0; height: 0; border-top: 0.75rem solid transparent; border-bottom: 0.75rem solid transparent; border-right: 0.75rem solid rgb(var(--swatch-primary)); transition: border 0.1s ease-in-out 0.1s; z-index: 10; } .sidebox::after { top: 0; max-width: 0.75rem; width: 100%; height: 100%; box-shadow: 0.125rem 0 0 0 rgb(var(--swatch-primary)); max-height: calc(100vh - 18rem); background-color: rgb(var(--black-monochrome)); z-index: -1; transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s, border-top-left-radius 0.5s ease-in-out 0.1s, border-bottom-left-radius 0.5s ease-in-out 0.1s; } .sidebox:hover, .sidebox:active { color: rgb(var(--swatch-text-general)); background-color: rgb(var(--black-monochrome)); pointer-events: all; overflow-y: scroll; transition: max-width 0.5s ease-in-out 0.2s, color 0.5s ease-in-out 0.2s, box-shadow 0.5s ease-in-out 0.1s, background-color 0s ease-in-out 0.6s, right 0.5s ease-in-out 0.1s; } .sidebox:hover *, .sidebox:active * { opacity: 1; transition: opacity 0.5s ease-in-out 0.2s; } .sidebox:hover::before, .sidebox:active::before { border-top: 0vw solid transparent; border-bottom: 0vw solid transparent; } .sidebox:hover::after, .sidebox:active::after { box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-primary)); right: 0; max-width: 100%; border-top-left-radius: 0rem; border-bottom-left-radius: 0rem; } } @media only screen and (max-width:56.25rem) { :root { --body-width-on-desktop: 100vw; --header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750))); --header-h2-font-size: var(--base-font-size); } #header h1, #header h1 a, #header h1 a::before { top: 0.5rem; } #header h2, #header h2 a, #header h2 a::before { top: 0.35rem; } .anchor { top: calc(var(--topbar-height-on-mobile) + 0.75rem); } .sidebox, .sidebox:hover, .sidebox:active { right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.5em); } .sidebox::before, .sidebox::after { content: " "; position: absolute; pointer-events: all; right: 0; } .blockquote, [class*="blockquote"], blockquote, div.blockquote { margin: 0; } } @media only screen and (min-width: 48.0625rem) { #search-top-box-form input[type="submit"], #search-top-box-form input[type="submit"]:focus, #search-top-box-form input[type="submit"]:hover { border-left: 0.0625rem solid rgba(var(--swatch-primary-darkest), 0); } #search-top-box-form input[type="submit"] { background: rgba(var(--swatch-primary-darkest), 0.5); } } }
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.25rem; left: 0.5rem; width: 3rem; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } } }
@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)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } }
@font-face { font-family: 'MapoDPPA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoDPPA.woff') format('woff'); font-weight: 700; font-style: normal; } @supports(display: grid) { :root:lang(ko) { --lgurl: var(--logo-image); --header-title: "SCP 재단"; --header-subtitle: "확보 - 격리 - 보호"; /* Typefaces */ --body-font: "Roboto", 'NanumBarunCatsi', sans-serif; --header-font: "Josefin Sans", 'MapoDPPA', sans-serif; --title-font: "Josefin Sans", 'MapoDPPA', sans-serif; --mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, 'Nanum Gothic Coding', monospace; } #header::before { background-image: var(--lgurl); } } .modalbox { background: rgb(var(--dark-gray-monochrome)); box-shadow: 0 2px 6px rgb(0 79 102 / 50%); } .modalbox .close-credits { filter: invert(1); }