Ap Tab
/* * Wikidot Theme [NO TITLE YET] * Created by iti119 in 2023 * * Imitating [Basalt Theme] by Basalt Team * (https://github.com/Basalt-Team/Basalt) * * CC BY-SA 3.0 */ /* 'JetBrains Mono' is licensed under the Open Font License. (http://scripts.sil.org/OFL). */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); @import url('https://1119s.wdfiles.com/local--code/sidebar-icons-addon/1'); :root { --header-title: "SCP Foundation"; --header-subtitle: "SECURE - CONTAIN - PROTECT"; --header-logo: var(--logo-regular); --primary-color: 144, 192, 153; --secondary-color: 255, 252, 221; --tertiary-color: 204, 170, 68; --extra-color: 119, 216, 192; --white-monochrome: 248, 248, 255; --gray-monochrome: 85, 85, 85; --dark-gray-monochrome: 51, 51, 51; --black-monochrome: 16, 12, 9; --positive-color: 26, 180, 28; --negative-color: 255, 48, 48; --header-final-height: var(--header-height); --header-height: 3.75rem; --topbar-height: 2.4rem; --topbar-menu-group-title-width: 5rem; --light-highlight-color: var(--white-monochrome); --dim-highlight-color: var(--gray-monochrome); --dark-highlight-color: var(--dark-gray-monochrome); --light-turnround-color: var(--light-highlight-color); --dark-turnround-color: var(--dark-highlight-color); --body-background-color: var(--secondary-color); --body-text-color: var(--dark-highlight-color); --link-text-color: var(--primary-color); --newpage-link-text-color: var(--extra-color),0.75; --general-border-color: var(--dim-highlight-color); --modalbox-shader-color: var(--dark-turnround-color),0.25; --blockquote-background: var(--tertiary-color),0.125; --image-caption-background: var(--blockquote-background); --tabs-text-color: var(--body-text-color); --tabs-background: var(--light-highlight-color); --tabs-hover-text-color: var(--light-highlight-color); --tabs-hover-background: var(--dim-highlight-color); --tabs-selected-text-color: var(--light-turnround-color); --tabs-selected-background: var(--primary-color); --tabs-selected-outline-color: var(--tabs-selected-background); --tabs-bottom-border-color: var(--tabs-hover-background); --tabs-content-background: var(--light-turnround-color); --tabs-content-border-color: var(--general-border-color), 0.25; --header-logo-background: radial-gradient(rgb(var(--primary-color)) 50%, rgb(var(--secondary-color)) 50%); --header-background-color: var(--black-monochrome); --header-background-hover-color: var(--dark-highlight-color); --header-border-color: var(--dim-highlight-color); --header-title-color: var(--secondary-color); --header-subtitle-color: var(--primary-color); --header-text-color: var(--light-highlight-color); --header-text-hover-color: var(--dark-highlight-color); --sidebar-width: 22em; --sidebar-background-color: var(--black-monochrome); --sidebar-border-color: var(--secondary-color); --sidebar-text-color: var(--secondary-color); --owindow-background-color: var(--black-monochrome); --owindow-text-color: var(--light-highlight-color); --owindow-button-background-color: var(--dark-highlight-color); --owindow-button-background-hover-color: var(--dim-highlight-color); --owindow-button-text-color: var(--light-highlight-color); --hovertip-background-color: var(--light-turnround-color); --hovertip-border-color: var(--dark-turnround-color); --footer-background-color: var(--dark-highlight-color); --scrollbar-track-color: var(--light-turnround-color), 0.625; --scrollbar-thumb-color: var(--primary-color), 0.875; --selection-background-color: 72, 168, 240; --selection-text-color: var(--white-monochrome); --filter-control: 0; /* 0 or 1 */ } #side-bar { --scrollbar-thumb-color: var(--extra-color); } html { scroll-behavior: smooth; } body { background-image: linear-gradient(rgb(var(--light-highlight-color),0.5), rgb(var(--light-highlight-color),0) 1200px); background-color: rgb(var(--body-background-color)); color: rgb(var(--body-text-color)); } div#container-wrap { background-image: none; } #header { position: sticky; top: 0; width: 100%; max-width: unset; height: var(--header-height); display: grid; grid-template-areas: 'open-menu header-title top-bar search option'; grid-template-columns: 3rem max-content 1fr 2rem 3rem; grid-template-rows: 1fr; margin: 0; padding: 0; background-image: none; background-color: rgb(var(--header-background-color)); box-shadow: rgb(var(--header-border-color)) 0 -2px 0 -1px inset; } #header h1 { grid-area: header-title; margin-left: 0; } #header h1 a { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; height: 100%; max-height: unset; padding: 0; line-height: 1; font-size: 0; color: rgb(var(--header-title-color)); } #header h1 a::before { content: ""; display: inline-block; width: 3.75rem; height: var(--header-height); background: var(--header-logo-background); -webkit-mask-image: var(--header-logo); -webkit-mask-position: center; -webkit-mask-size: 92.5%; -webkit-mask-repeat: no-repeat; mask: var(--header-logo) center / 92.5% no-repeat; } #header h1 a span { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 0.8rem 0 0; } #header h1 a span::before { content: var(--header-title); font-size: 1.875rem; } #header h1 a span::after { content: var(--header-subtitle); font-size: 0.9rem; color: rgb(var(--header-subtitle-color)); } #header h2 span, #top-bar .mobile-top-bar { display: none; } #top-bar, #top-bar .top-bar { display: contents; } #top-bar a:hover { text-decoration: none; } #top-bar div[class*="top-bar"] > ul { grid-area: top-bar; display: flex; align-items: center; color: rgb(var(--header-text-color)); } #top-bar div[class*="top-bar"] > ul > li { position: static; height: 100%; } #top-bar .mobile-top-bar > ul > li { flex: 1; } #top-bar div[class*="top-bar"] > ul > li > a { display: flex; align-items: center; justify-content: center; height: 100%; max-height: unset; border-color: transparent; padding: 0 0.5em; position: relative; } #top-bar div[class*="top-bar"] ul li:is(:hover, .sfhover) :is(a, a:hover) { background: transparent; border-color: rgb(var(--header-border-color)); color: currentColor; transition: color 0.25s; } #top-bar div[class*="top-bar"] > ul > li > a::before, #top-bar div[class*="top-bar"] > ul > li > a::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: -1; } #top-bar div[class*="top-bar"] > ul > li > a::before { background: rgb(var(--primary-color)); transition: height 0.2s 0.15s; } #top-bar div[class*="top-bar"] > ul > li > a::after { background: linear-gradient(rgb(var(--header-border-color)) 1px, rgb(var(--header-background-color)) 1px); transition: height 0.2s; } #top-bar div[class*="top-bar"] > ul > li:is(:hover, .sfhover) > a::before { transition-delay: 0s; } #top-bar div[class*="top-bar"] > ul > li:is(:hover, .sfhover) > a::after { transition-delay: 0.15s; } #top-bar div[class*="top-bar"] > ul > li:is(:hover, :focus-within, .sfhover) > a::before, #top-bar div[class*="top-bar"] > ul > li:is(:hover, :focus-within, .sfhover) > a::after { height: 100%; } #top-bar div[class*="top-bar"] ul li ul { display: grid; grid-template-columns: 1fr 1fr; position: absolute; left: 0; box-sizing: border-box; width: 100%; border: none; box-shadow: none; background: rgb(var(--header-background-color)); clip-path: inset(0 0 100% 0); transition: clip-path 0.15s; } #top-bar div[class*="top-bar"] ul li:hover ul { clip-path: inset(0); transition-delay: 0.15s; } #top-bar .top-bar ul li ul { padding: 0 12vw; } #top-bar div[class*="top-bar"] ul li ul li a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; padding: 0.625rem 0.125rem; position: relative; z-index: 0; } #top-bar div[class*="top-bar"] ul li:is(:hover, .sfhover) ul li a { border: none; } #top-bar div[class*="top-bar"] ul li:is(:hover, .sfhover) ul li a:hover { color: rgb(var(--header-text-hover-color)); } #top-bar div[class*="top-bar"] ul li ul li a::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: rgb(var(--primary-color)); clip-path: inset(0 100% 0 0); transition: clip-path 0.25s; } #top-bar div[class*="top-bar"] ul li ul li a:hover::before { clip-path: inset(0); } #search-top-box { grid-area: search; top: initial; right: initial; width: 100%; height: 100%; position: relative; } #search-top-box-form { display: flex; width: 100%; height: 100%; } #search-top-box-form #search-top-box-input { position: absolute; right: 100%; box-sizing: border-box; width: 150px; height: 100%; border: none; border-radius: 0; background: rgb(var(--dim-highlight-color)); margin: 0; padding: 0 3px; box-shadow: none; clip-path: inset(0 0 0 100%); transition: clip-path 0.25s; } #search-top-box-form:is(:hover, :focus-within) #search-top-box-input { clip-path: inset(0); transition-delay: 0.15s; } #search-top-box-form input[type=submit] { border: none; border-radius: 0; margin: 0; padding: 0; font-size: 0; width: 100%; height: 100%; background: none; box-shadow: none; } #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border: none; background: none; box-shadow: none; } #search-top-box::before, #login-status::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 0; background: rgb(var(--header-background-hover-color)); pointer-events: none; transition: height 0.25s 0.15s; } #search-top-box:is(:hover, :focus-within)::before, #login-status:is(:hover, :focus-within)::before { height: 100%; transition-delay: 0s; } #search-top-box::after { content: "\f002"; font-family: "FontAwesome"; font-size: 1rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgb(var(--header-text-color)); position: absolute; top: 0; pointer-events: none; } #login-status { grid-area: option; position: relative; top: initial; right: initial; width: 100%; height: 100%; font-size: 0; pointer-events: none; user-select: none; } #login-status:is(:hover, :focus-within) { pointer-events: auto; } #login-status span.printuser { display: contents; user-select: none; pointer-events: none; } #login-status span.printuser a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; pointer-events: auto; } #login-status span.printuser img.small { background-image: none !important; width: 1.75rem; height: 1.75rem; margin: 0; padding: 0; /* border-radius: 50%; */ } #login-status a#my-account, #login-status a#account-topbutton { display: none; } #login-status > a[href*="/account/message"] { display: block; position: absolute; top: calc(1rem - 4.5px); left: calc(2.375rem - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: #f80; } :where(#login-status) > :is(#account-options, .login-status-create-account, .login-status-sign-in) { position: absolute; top: var(--header-height); border: none; background: rgb(var(--header-background-color)); font-size: 0.6rem; clip-path: inset(0 0 0 100%); transition: clip-path 0.25s; } #login-status:is(:hover, :focus-within) > :is(#account-options, .login-status-create-account, .login-status-sign-in) { clip-path: inset(0); transition-delay: 0.15s; } #login-status > #account-options { display: block !important; width: 16rem; } #login-status > #account-options ul { display: flex; flex-wrap: wrap; } #login-status > #account-options ul li { flex-basis: 50%; } #login-status > #account-options ul li a { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0; color: rgb(var(--header-text-color)); position: relative; } #login-status > #account-options ul li a:hover, #login-status > :is(.login-status-create-account, .login-status-sign-in):hover { color: rgb(var(--header-text-hover-color)); text-decoration: none; } #login-status > #account-options ul li a::before, #login-status > .login-status-create-account::before, #login-status > .login-status-sign-in::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: rgb(var(--primary-color)); clip-path: inset(0 0 0 100%); transition: clip-path 0.25s; } #login-status > #account-options ul li a:hover::before, #login-status > .login-status-create-account:hover::before, #login-status > .login-status-sign-in:hover::before { clip-path: inset(0); } #login-status > :is(.login-status-create-account, .login-status-sign-in) { right: 0; display: flex; align-items: center; justify-content: center; width: 6rem; height: var(--topbar-height); border-left: solid rgb(var(--header-background-color)) 1px; background: rgb(var(--dim-highlight-color)); color: rgb(var(--header-text-color)); } #login-status > .login-status-create-account { inset-inline-end: 6rem; } #login-status:is(:hover, :focus-within) > .login-status-create-account { } #login-status > a:first-child + span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; } #login-status > a:first-child + span::after { content: "\f090"; font-family: "FontAwesome"; font-size: 1rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgb(var(--header-text-color)); } .open-menu { visibility: hidden; } #side-bar { position: fixed; top: var(--header-height); left: -25em; z-index: 10; box-sizing: border-box; width: var(--sidebar-width); height: 100%; background: rgb(var(--sidebar-background-color)); margin: 0; padding: 1em 1em 5em; color: rgb(var(--sidebar-text-color)); overflow-y: auto; direction: rtl; transition: left 0.25s; } #side-bar:hover { left: 0; } #side-bar * { direction: ltr; } #side-bar::before, #side-bar::after { content: ""; position: fixed; top: 0; left: 0; width: 3rem; height: var(--header-height); } #side-bar::after { content: '\f0c9'; font-family: "FontAwesome"; font-size: 2rem; color: rgb(var(--header-title-color)); background-color: transparent; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s; } #side-bar:hover::after { opacity: 0.5; } #side-bar .side-block { background: rgb(var(--sidebar-background-color)) !important; border-color: rgb(var(--sidebar-border-color)); border-radius: 0; box-shadow: none; } #side-bar .heading, #side-bar .collapsible-block-unfolded-link, #side-bar .collapsible-block-unfolded-link a.collapsible-block-link { border-color: currentColor; color: currentColor; } #side-bar .collapsible-block-unfolded-link a.collapsible-block-link:hover { color: rgb(var(--link-text-color)); } #side-bar .side-block .menu-item > .image, #side-bar .collapsible-block-folded a.collapsible-block-link::before { filter: brightness(0) saturate(100%) invert(78%) sepia(56%) saturate(462%) hue-rotate(357deg) brightness(95%) contrast(89%); } #side-bar div.menu-item .sub-text { color: rgb(var(--light-highlight-color),0.75); } #side-bar .close-menu { display: block; position: fixed; top: var(--header-height); left: -3em; width: 0; height: calc(100vh - var(--header-height)); z-index: -1; background: linear-gradient(90deg, rgb(var(--black-monochrome), 0.5) 100vw, rgb(var(--black-monochrome), 0)) right / 150vw 100%; transition: left 0.25s, width 0.25s; pointer-events: none; } #side-bar:is(:hover, :target) .close-menu { left: var(--sidebar-width); width: 150vw; background: linear-gradient(90deg, rgb(var(--black-monochrome), 0.5) 100vw, rgb(var(--black-monochrome), 0)) right / 150vw 100%; } @media(max-width: 1020px) { #search-top-box-form #search-top-box-input { display: none; } } @media(max-width: 880px) { :root { --header-final-height: calc(var(--header-height) + var(--topbar-height)); --topbar-menu-group-title-width: 3rem; } #header { top: calc(var(--header-height) * -1); height: clac(var(--header-height) + var(--topbar-height)); grid-template-areas: 'header-title header-title header-title search option' 'open-menu top-bar top-bar top-bar top-bar'; grid-template-rows: var(--header-height) var(--topbar-height); } #header h1 a { width: max-content; } #top-bar .top-bar { display: none; } #top-bar .mobile-top-bar { display: contents; } #side-bar { width: var(--sidebar-width); top: 0; padding-bottom: 0; } #side-bar:hover { left: -25em; } #side-bar:target { left: 0; } #side-bar::before, #side-bar::after { display: none; } .open-menu, .open-menu > p { display: contents; } .open-menu a { grid-area: open-menu; position: relative; top: 0; left: 0; width: 3rem; height: var(--topbar-height); border: none !important; border-radius: 0; background-color: transparent !important; font-size: 0; color: rgb(var(--header-text-color)) !important; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s; visibility: visible; } .open-menu a:hover { box-shadow: none; opacity: 0.5; } .open-menu a::before { content: '\f0c9'; font-family: FontAwesome; font-size: 1.6rem; } #side-bar:hover .close-menu { left: -150vw; } #side-bar:target .close-menu { top: 0; pointer-events: auto; } } @media(max-width: 767px) { #side-bar:target { width: var(--sidebar-width); } } @media(max-width: 580px) { #header h1 a span::before { font-size: 1.5rem; } #header h1 a span::after { font-size: 0.72rem; } #top-bar { --topbar-menu-group-title-width: 2rem; } } @media(min-width: 767px) { #main-content { margin: 0 6em; padding: 0 1em 1em; } } #page-content :is([id], a[name]) { scroll-margin-top: calc(var(--header-height) + 2em); } @media (max-width: 880px) { #page-content :is([id], a[name]) { scroll-margin-top: calc(var(--topbar-height) + 2em); } } a { color: rgb(var(--link-text-color)); } a.newpage { color: rgb(var(--newpage-link-text-color, var(--link-text-color))); } h1 { color: rgb(var(--body-text-color)); } #page-title { border-color: rgb(var(--general-border-color)); color: rgb(var(--body-text-color)); } .meta-title { border-bottom: 1px solid rgb(var(--general-border-color)); margin: 0 0 0.6em; padding: 0 0 0.25em; font-size: 200%; } blockquote, div.blockquote { border-color: rgb(var(--general-border-color), 0); background-color: rgb(var(--blockquote-background)); } div.sexy-box { border-color: rgb(var(--dark-turnround-color),0.25); background-color: rgb(var(--light-turnround-color)); } .scp-image-block { border-color: rgb(var(--general-border-color)); } .scp-image-block .scp-image-caption { border-color: rgb(var(--general-border-color)); background-color: rgb(var(--image-caption-background)); color: rgb(var(--dark-turnround-color)); } div.code { border-color: rgb(var(--general-border-color)); background-color: rgb(var(--light-turnround-color)); } .kt { -webkit-text-emphasis-style: filled dot; text-emphasis-style: filled dot; } /* stole from BHL */ .yui-navset { .yui-nav { --clip-path: polygon(-.0625rem -.5rem, calc(100% + .0625rem) -.5rem, calc(100% + .0625rem) 100%, -.0625rem 100%); clip-path: var(--clip-path); display: flex; flex-wrap: wrap; width: 100%; border: 0; zoom: unset; } .yui-nav li { transition: box-shadow .2s, color .15s, background-color .15s, translate .2s; background-color: rgb(var(--tabs-background)); box-shadow: 0 0 0 0 rgb(var(--tabs-selected-outline-color)); will-change: box-shadow, background-color, translate; border: none; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; display: flex; position: relative; translate: 0; a { display: flex; justify-content: center; align-items: center; width: 100%; border: none; background: none; vertical-align: bottom; position: relative; } a::before { --clip-path: polygon(0 calc(100% - .25rem), calc(100% + 1rem) calc(100% - .25rem), calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem)); content: " "; z-index: 0; will-change: background-color, clip-path; transition: background-color 50ms, clip-path .2s; background-color: rgb(var(--tabs-bottom-border-color)); pointer-events: none; clip-path: var(--clip-path); width: 101%; height: 101%; position: absolute; top: 0; bottom: auto; left: -.5%; right: auto; } a em { transition: color .15s; border: unset !important; padding: 0.5em 0.75em; color: rgb(var(--tabs-text-color)); } a:is(:hover, :focus, :active) { background: none; } a:is(:hover, :focus, :active)::before{ --clip-path: polygon(0 0, calc(100% + 1rem) -1rem, calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem)); background-color: rgb(var(--tabs-hover-background)); } a:is(:hover, :focus, :active) em { color: rgb(var(--tabs-hover-text-color)); } } .yui-nav li.selected { z-index: 10; box-shadow: 0 0 0 .25rem rgb(var(--tabs-selected-outline-color)); margin: 0; padding: 0; translate: 0 -.25rem; a { border: transparent; background-image: none; } a::before{ --clip-path: polygon(0 0, calc(100% + 1rem) -1rem, calc(100% + 1rem) calc(100% + 1rem), 0 calc(100% + 1rem)); background-color: rgb(var(--tabs-selected-background)); } a em { text-overflow: ellipsis; white-space: nowrap; padding: .35em .75em; line-height: 1.5; top: 0; overflow: hidden; color: rgb(var(--tabs-selected-text-color)) !important; } } .yui-content { border: .0625rem solid rgb(var(--tabs-content-border-color)); background-color: rgb(var(--tabs-content-background)); padding: 1.5ex 2ch; } } .ta-badge :is(.badge-top, .badge-right, .badge-left):hover::after, .ta-badge .item .item-text > p { border-color: rgb(var(--dark-turnround-color)); background-color: rgb(var(--light-turnround-color)); } div[id*="achieve-hovertip"] { border: solid rgb(var(--dark-turnround-color)) 1px !important; background-color: rgb(var(--light-turnround-color)); box-shadow: none; } div[id*="achieve-hovertip"] span[style*="color"] strong { color: rgb(var(--primary-color)); } .page-tags span { border-color: rgb(var(--dark-turnround-color),0.375); } .page-source { font-family: 'JetBrains Mono', verdana, arial, helvetica, sans-serif; } .hovertip { border-color: rgb(var(--hovertip-border-color)) !important; background: rgb(var(--hovertip-background-color)); } input.text, textarea { border-color: rgb(var(--dark-turnround-color),0.75); background-color: rgb(var(--light-turnround-color)); color: rgb(var(--body-text-color)); } #edit-page-form > div > textarea { font-family: 'JetBrains Mono', verdana, arial, helvetica, sans-serif; word-break: break-all; } #edit-page-form .wd-editor-toolbar-panel ul li a { filter: invert(clac(1 * var(--filter-control))) hue-rotate(clac(180deg * var(--filter-control))) brightness(clac(1 + var(--filter-control) * 0.2)); } #lock-info { border-color: rgb(var(--dark-turnround-color),0.25); background-color: rgb(var(--light-turnround-color)); } #edit-save-continue-button, #edit-save-button { color: rgb(var(--positive-color)); } .preview-message { border-color: rgb(var(--dark-turnround-color)); background-color: rgb(var(--light-highlight-color)); color: rgb(var(--black-monochrome)); --link-text-color: var(--extra-color); } .inline-diff { position: relative; } .inline-diff :is(ins, del):first-of-type::before, .inline-diff br + :is(ins, del)::before { left: 0; transform: translateX(-50%); font-size: 1rem; } .inline-diff ins { --diff-color: var(--positive-color); } .inline-diff del { --diff-color: var(--negative-color); } .inline-diff :is(ins, del) { background-color: rgb(var(--diff-color),0.25); } .inline-diff :is(ins, del)::before { color: rgb(var(--diff-color)); } div.buttons :is(a.btn, input.btn) { border-color: rgb(var(--dark-turnround-color),0.25); background-color: rgb(var(--light-turnround-color)); color: rgb(var(--body-text-color)); } div.buttons :is(a.btn, input.btn):hover { filter: brightness(calc(0.9 + var(--filter-control) * 0.5)); } :is(a.btn, input.btn):is(.btn-warning, .btn-danger) { color: rgb(var(--negative-color)) !important; } .owindow { border: none; border-radius: 8px; background-color: rgb(var(--owindow-background-color)); color: rgb(var(--owindow-text-color)); } .owindow .title { background-color: transparent; text-align: center; } .owindow h1 { color: rgb(var(--owindow-text-color)); } .owindow .content { padding: 0.25rem 0.875rem; } .owindow .content img:nth-child(1) { background-color: transparent !important; } .owindow .content .button-bar { margin: 0 -0.375rem; } .owindow .button-bar { display: flex; gap: 0.5rem; margin: 0.25rem 0.5rem; padding: 0; float: none; } .owindow .button-bar a { flex: 1; border: none; border-radius: 4px; background-color: rgb(var(--owindow-button-background-color)); margin: 0.25rem 0; padding: 0.375rem 0.125rem; text-align: center; color: rgb(var(--owindow-button-text-color)); box-shadow: rgb(var(--owindow-button-background-hover-color)) 0 0 0 0; transition: border-radius 0.25s, background 0.25s, box-shadow 0.25s; } .owindow .button-bar a:hover { border-radius: 0; background-color: rgb(var(--owindow-button-background-hover-color)); box-shadow: rgb(var(--owindow-button-background-hover-color)) 0 0 0 0.25rem; } .owindow a[onclick*="cleanAll"] { position: absolute; top: 0; right: 0; display: block; width: 3rem; height: 3rem; border-radius: 0 8px 0 0; background-color: transparent; background-image: linear-gradient(rgb(var(--negative-color)),rgb(var(--negative-color))); background-position: 0 0; background-size: 100% 0%; background-repeat: no-repeat; box-shadow: none; margin: 0; padding: 0; font-size: 0; transition: background-size 0.25s; } .owindow a[onclick*="cleanAll"]:hover { border-radius: 0 8px 0 0; background-color: transparent; background-size: 100% 100%; box-shadow: none; } .owindow a[onclick*="cleanAll"]::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .owindow a[onclick*="cleanAll"]::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(var(--owindow-text-color)); -webkit-mask-image: var(--cancel-mask); -webkit-mask-position: center; -webkit-mask-size: 75%; -webkit-mask-repeat: no-repeat; mask: var(--cancel-mask) center / 75% no-repeat; } .odialog-shader-iframe, .odialog-shader { display: none; } #odialog-container[style*="block"] { position: fixed; background-color: rgb(var(--modalbox-shader-color)); backdrop-filter: blur(3px); } #footer { display: grid !important; grid-template-columns: 1fr max-content max-content; padding: 2rem 1rem; position: relative; z-index: 0; overflow: visible; } #footer::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: calc(100% + 2rem); background-color: rgb(var(--footer-background-color)); background-image: repeating-linear-gradient(transparent 0 2rem, rgb(var(--light-highlight-color),0.15) 2rem 2.125rem, transparent 2.125rem), repeating-linear-gradient(90deg, transparent 0 2rem, rgb(var(--light-highlight-color),0.15) 2rem 2.125rem, transparent 2.125rem); background-position: 0 -1.25rem; } #footer .options { display: flex !important; flex-wrap: wrap; float: none; padding: 0; font-size: 0; } #footer .options a { padding-right: 0.75rem; font-size: 0.6rem; color: rgb(var(--light-highlight-color)); } #footer > a { margin-left: 0.5ch; } #license-area { color: rgb(var(--light-highlight-color)); padding: 0.5em 0.6em; position: relative; z-index: 0; } #license-area a { white-space: nowrap; } @media(max-width: 800px) { #footer::before { height: calc(100% + 3rem); } } @media(max-width: 350px) { #footer::before { height: calc(100% + 4rem); } } /* -- FANCY THINGS from Woedenaz's Dustjacket Theme -- */ .fancyhr hr { border-top: 2vw solid transparent; background-color: rgba(var(--bright-accent), 0); height: 0; box-sizing: border-box; border-image-source: url('http://scp-jp-storage.wdfiles.com/local--files/file:5722815-46-ec6z/wl_hr.png'); border-image-repeat: round round; background: none; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } .fancyborder { box-sizing: border-box; border: 2vw solid rgba(0,0,0,0.5); border-image: url('http://scp-jp-storage.wdfiles.com/local--files/file:5722815-47-mqmb/wl_border.png') 600 round; border-image-width: 6; padding: 2vw; } ::-webkit-scrollbar-track { background: rgb(var(--scrollbar-track-color)); } ::-webkit-scrollbar-thumb { background: rgb(var(--scrollbar-thumb-color)); } ::selection { background-color: rgb(var(--selection-background-color),0.875); color: rgb(var(--selection-text-color)); } /* SVG Resource */ :root { --logo-regular: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJTQ1BfTG9nbyIgeD0iMCIgeT0iMCIgb3ZlcmZsb3c9InZpc2libGUiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDIyMTUgMjA4MCIgc29kaXBvZGk6ZG9jbmFtZT0ibG9nb19ibGFjay5zdmciIGlua3NjYXBlOnZlcnNpb249IjEuMS4xICgzYmY1YWUwZDI1LCAyMDIxLTA5LTIwKSI+PGRlZnMgaWQ9ImRlZnMyNjgwIi8+PHNvZGlwb2RpOm5hbWVkdmlldyBpZD0ibmFtZWR2aWV3MjY3OCIgcGFnZWNvbG9yPSIjZmZmZmZmIiBib3JkZXJjb2xvcj0iIzExMTExMSIgYm9yZGVyb3BhY2l0eT0iMSIgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMCIgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjEiIHNob3dncmlkPSJmYWxzZSIgaW5rc2NhcGU6em9vbT0iMC4xNzcyNzYyNyIgaW5rc2NhcGU6Y3g9IjExMDguNDM5NCIgaW5rc2NhcGU6Y3k9IjEwMzcuOTI4IiBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEzNjYiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjcxNiIgaW5rc2NhcGU6d2luZG93LXg9Ii04IiBpbmtzY2FwZTp3aW5kb3cteT0iMjIiIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IlNDUF9Mb2dvIi8+PGcgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7ZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIiBpZD0iZzI5OTciPjxnIGlkPSJnMTE0OCIgc3R5bGU9ImZpbGw6IzMzMzMzMztmaWxsLW9wYWNpdHk6MSI+PHBhdGggaWQ9IkFycm93X1RvcC04IiBmaWxsPSIjZmZmZmZmIiBkPSJNIDExNDcuNSw4MDAgViAzNDYgaCAtODAgdiA0NTQgaCAtODUgbCAxMjUsMjUwIDEyNSwtMjUwIHoiIHN0eWxlPSJmaWxsOiMzMzMzMzM7ZmlsbC1vcGFjaXR5OjEiLz48cGF0aCBpZD0iQXJyb3dfTGVmdC0xIiBmaWxsPSIjZmZmZmZmIiBkPSJtIDgzNi4zNTMsMTIwMC4zNTkgLTM5My4xNzYsMjI3IDQwLDY5LjI4MiAzOTMuMTc2LC0yMjcgNDIuNSw3My42MTIgMTU0LjAwNiwtMjMzLjI1MyAtMjc5LjAwNiwxNi43NDcgeiIgc3R5bGU9ImZpbGw6IzMzMzMzMztmaWxsLW9wYWNpdHk6MSIvPjxwYXRoIGlkPSJBcnJvd19SaWdodC01IiBmaWxsPSIjZmZmZmZmIiBkPSJtIDEzMzguNjQ3LDEyNjkuNjQxIDM5My4xNzYsMjI3IDQwLC02OS4yODIgLTM5My4xNzYsLTIyNyA0Mi41LC03My42MTIgLTI3OS4wMDYsLTE2Ljc0NyAxNTQuMDA2LDIzMy4yNTMgeiIgc3R5bGU9ImZpbGw6IzMzMzMzMztmaWxsLW9wYWNpdHk6MSIvPjwvZz48cGF0aCBpZD0iT3V0ZXJfQ2lyY2xlLTkiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0gMjIxNC45NjgsMTM1MS44MSAyMDkwLjAxMywxMjEyLjE0MiBBIDk5OS4xNTYsOTk5LjE1NiAwIDAgMCAyMDk3LjUsMTA5MCBjIDAsLTQxMC4wNDQgLTI0OS4yOTgsLTc2MS44NDQgLTYwNC41ODcsLTkxMi4xNSBMIDE0MzQuNSwwIGggLTY1NCBMIDcyMi4wODcsMTc3Ljg1IEMgMzY2Ljc5NywzMjguMTU3IDExNy41LDY3OS45NTcgMTE3LjUsMTA5MCBhIDk5OS4xNCw5OTkuMTQgMCAwIDAgNy40ODcsMTIyLjE0MiBMIDAuMDMyLDEzNTEuODEgbCAzMjcsNTY2LjM4IDE4My40NzEsLTM4LjM4OCBDIDY3Ni40NzUsMjAwNS40NTQgODgzLjI4LDIwODAgMTEwNy41LDIwODAgYyAyMjQuMjIsMCA0MzEuMDI1LC03NC41NDYgNTk2Ljk5NywtMjAwLjE5OCBsIDE4My40NywzOC4zODggMzI3LC01NjYuMzggeiBtIC01MzEuOTU3LDQ0Mi41OTIgQyAxNTI2LjI3NiwxOTIyLjg5MiAxMzI1Ljg4NiwyMDAwIDExMDcuNSwyMDAwIDg4OS4xMTMsMjAwMCA2ODguNzIzLDE5MjIuODkxIDUzMS45ODcsMTc5NC40IGwgLTE2NC4xNzMsMzQuNDI3IC0yNzAsLTQ2Ny42NTQgMTEyLjMsLTEyNS40MTggQyAyMDIuNDgyLDExODguMjk2IDE5OC41LDExMzkuNjE1IDE5OC41LDEwOTAgMTk4LjUsNzAwLjk1NSA0NDIuMzcxLDM2OC45MzYgNzg1LjQyMiwyMzguNzggTCA4MzcuNSw4MCBoIDU0MCBsIDUyLjA2NywxNTguNzc2IEMgMTc3Mi42MjQsMzY4LjkyOSAyMDE2LjUsNzAwLjk1IDIwMTYuNSwxMDkwIGMgMCw0OS42MTggLTMuOTgzLDk4LjMwMiAtMTEuNjE2LDE0NS43NjQgbCAxMTIuMzAyLDEyNS40MSAtMjcwLDQ2Ny42NTMgeiIgc3R5bGU9ImZpbGw6IzMzMzMzMztmaWxsLW9wYWNpdHk6MSIvPjxwYXRoIGlkPSJJbm5lcl9DaXJjbGUtOCIgZmlsbD0iI0ZGRkZGRiIgZD0ibSAxMTA3LjUsNDQwIGMgLTM1OC45ODUsMCAtNjUwLDI5MS4wMTUgLTY1MCw2NTAgMCwzNTguOTg1IDI5MS4wMTUsNjUwIDY1MCw2NTAgMzU4Ljk4NSwwIDY1MCwtMjkxLjAxNSA2NTAsLTY1MCAwLC0zNTguOTg1IC0yOTEuMDE1LC02NTAgLTY1MCwtNjUwIHogbSAwLDExODAgYyAtMjkyLjcxLDAgLTUzMCwtMjM3LjI5IC01MzAsLTUzMCAwLC0yOTIuNzEgMjM3LjI5LC01MzAgNTMwLC01MzAgMjkyLjcxLDAgNTMwLDIzNy4yOSA1MzAsNTMwIDAsMjkyLjcxIC0yMzcuMjksNTMwIC01MzAsNTMwIHoiIHN0eWxlPSJmaWxsOiMzMzMzMzM7ZmlsbC1vcGFjaXR5OjEiLz48L2c+PC9zdmc+'); --logo-solid: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzMiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzYwIDM2MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzYwIDM2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHNvZGlwb2RpOmRvY25hbWU9ImJhc2FsdF9zY3BfbG9nby1mb3JfZGFya21vZGUuc3ZnIiBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMSAoM2JmNWFlMGQyNSwgMjAyMS0wOS0yMCkiPjxkZWZzIGlkPSJkZWZzMTEiLz48c29kaXBvZGk6bmFtZWR2aWV3IGlkPSJuYW1lZHZpZXc5IiBwYWdlY29sb3I9IiNmZmZmZmYiIGJvcmRlcmNvbG9yPSIjMTExMTExIiBib3JkZXJvcGFjaXR5PSIxIiBpbmtzY2FwZTpwYWdlc2hhZG93PSIwIiBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMSIgc2hvd2dyaWQ9ImZhbHNlIiBpbmtzY2FwZTp6b29tPSIxLjQ3MjIyMjIiIGlua3NjYXBlOmN4PSIxNzkuNjYwMzgiIGlua3NjYXBlOmN5PSIxODAiIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTM2NiIgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzE2IiBpbmtzY2FwZTp3aW5kb3cteD0iLTgiIGlua3NjYXBlOndpbmRvdy15PSIyMiIgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iTGF5ZXJfMyIvPg0KPGcgaWQ9Imc2IiBzdHlsZT0iZmlsbDojYzNjM2M4O2ZpbGwtb3BhY2l0eToxIj4NCgk8cGF0aCBkPSJNMTg2LjM2LDk5LjY1djM1LjdoMTIuOTNMMTgwLDE3My41OWwtMTkuMjktMzguMjRoMTIuOTN2LTM1LjdjLTQxLjU1LDMuMjUtNzQuMjcsMzcuOTctNzQuMjcsODAuMzUgICBjMCwxMi40MiwyLjgxLDI0LjE4LDcuODMsMzQuNjhsMzAuOTUtMTcuODdsLTYuNDctMTEuMmw0Mi43Ni0yLjQxbC0yMy40NywzNS44M2wtNi40Ni0xMS4ybC0zMC45MywxNy44NiAgIGMxNC41NCwyMS4xLDM4Ljg2LDM0LjkzLDY2LjQyLDM0LjkzYzI3LjU2LDAsNTEuODgtMTMuODQsNjYuNDItMzQuOTNsLTMwLjkzLTE3Ljg2bC02LjQ2LDExLjJsLTIzLjQ3LTM1LjgzbDQyLjc2LDIuNDFsLTYuNDcsMTEuMiAgIGwzMC45NSwxNy44N2M1LjAxLTEwLjUxLDcuODMtMjIuMjcsNy44My0zNC42OEMyNjAuNjMsMTM3LjYxLDIyNy45MSwxMDIuODksMTg2LjM2LDk5LjY1eiIgaWQ9InBhdGgyIiBzdHlsZT0iZmlsbDojYzNjM2M4O2ZpbGwtb3BhY2l0eToxIi8+DQoJPHBhdGggZD0iTTMxNS4yNiwyMDYuODVjMS43MS04LjY4LDIuNjItMTcuNjYsMi42Mi0yNi44NWMwLTYwLjYzLTM5LjEzLTExMi4xMi05My41Mi0xMzAuNTlsLTQuNzItMjYuNjlIMTgwaC0zOS42NGwtNC43MiwyNi42OSAgIEM4MS4yNSw2Ny44OCw0Mi4xMiwxMTkuMzcsNDIuMTIsMTgwYzAsOS4xOSwwLjkxLDE4LjE2LDIuNjIsMjYuODVsLTIwLjc5LDE3LjQ2bDE5LjgyLDM0LjMzbDE5LjgyLDM0LjMzbDI1LjU0LTkuMjggICBjMjQuMjcsMjEuMjgsNTYuMDYsMzQuMTksOTAuODcsMzQuMTlzNjYuNjEtMTIuOTEsOTAuODctMzQuMTlsMjUuNTQsOS4yOGwxOS44Mi0zNC4zM2wxOS44Mi0zNC4zM0wzMTUuMjYsMjA2Ljg1eiBNMjc0LjksMjQyLjE0ICAgbC0xNC45MS04LjYxYy0xNy4yNywyNS43Ni00Ni42NSw0Mi43MS03OS45OSw0Mi43MXMtNjIuNzItMTYuOTYtNzkuOTktNDIuNzFsLTE0LjkxLDguNjFsLTYuMzYtMTEuMDJsMTQuOS04LjYgICBjLTYuMzItMTIuODItOS44OC0yNy4yNS05Ljg4LTQyLjUxYzAtNTEuMDEsMzkuNjktOTIuNzUsODkuODgtOTYuMDNWNjYuNzVoMTIuNzJ2MTcuMjNjNTAuMTksMy4yOCw4OS44OCw0NS4wMSw4OS44OCw5Ni4wMyAgIGMwLDE1LjI2LTMuNTYsMjkuNjktOS44OCw0Mi41MWwxNC45LDguNkwyNzQuOSwyNDIuMTR6IiBpZD0icGF0aDQiIHN0eWxlPSJmaWxsOiNjM2MzYzg7ZmlsbC1vcGFjaXR5OjEiLz4NCjwvZz4NCjwvc3ZnPg=='); --plus-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCIgZD0iTSA1MjggNzIgSCA2NzIgViA1MjggSCAxMTI4IFYgNjcyIEggNjcyIFYgMTEyOCBIIDUyOCBWIDY3MiBIIDcyIFYgNTI4IEggNTI4IFoiLz48L3N2Zz4='); --minus-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCIgZD0iTSA3MiA1MjggSCAxMTI4IFYgNjcyIEggNzIgWiIvPjwvc3ZnPg=='); --cancel-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzAwMDAwMCIgZD0iTSAxMjAgMjQwIEwgMjQwIDEyMCBMIDYwMCA0ODAgTCA5NjAgMTIwIEwgMTA4MCAyNDAgTCA3MjAgNjAwIEwgMTA4MCA5NjAgTCA5NjAgMTA4MCBMIDYwMCA3MjAgTCAyNDAgMTA4MCBMIDEyMCA5NjAgTCA0ODAgNjAwIFoiLz48L3N2Zz4='); }