Theme O

このページはカスタムテーマページです。

Wiki内で使用されているカスタムテーマのためのページです。

運用について、詳しくはカテゴリ運用ポリシー・カスタムテーマに関するポリシーを参照してください。

+ show code +

/*
 * 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=');
}

これはライトモードです。

[[include :1119s:theme:o]]

ダークモードで閲覧する

Spring--primary-color(144,192,153) / #90C099

Brown--black-monochrome(16,12,9) / #100C09

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

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

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

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

Sunshine--secondary-color(255,252,221) / #FFFCDD

Luster--tertiary-color(204,170,68) / #CA4

Fantasm--extra-color(119,216,192) / #77D8C0

Ghost--white-monochrome(248,248,255) / #F8F8FF

Shadow--gray-monochrome(85,85,85) / #555

Shade--dark-gray-monochrome(51,51,51) / #333

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

画像ブロック

タイトル

タイトル

タイトル

タイトル

タイトル

タイトル

引用ブロック

ネストされた引用ブロック

.sexy-box

通常の水平線

---

装飾水平線

---

[[div_ class="fancyhr"]]
----
[[/div]]

これは装飾された特別な枠線

[[div class="fancyborder"]]
内容をここに
[[/div]]

画像出典

ヘッダーロゴ

タイトル: Logo (Regular)

ソース: https://scp-wiki.wikidot.com/theme:foxtrot
ライセンス: CC BY-SA 3.0

タイトル: fxtrt-scp_logo_lightmode.svg
著作権者: Liryn
公開年: 2022

タイトル: Logo (Soild)

ソース: https://scp-wiki.wdfiles.com/theme:basalt
ライセンス: CC BY-SA 3.0

タイトル: basalt_scp_logo-for_darkmode.svg
著作権者: Liryn
公開年: 2023

金箔

ファイルページ: goldfoil.png

ソース: https://wanderers-library.wikidot.com/component:dustjacket-theme
ライセンス: CC BY-SA 3.0

タイトル: goldfoil.png
著作権者: Woedenaz
公開年: 2019

装飾要素

ファイルページ: wl_hr.png

ソース: https://wanderers-library.wikidot.com/component:dustjacket-theme
ライセンス: CC BY-SA 3.0

タイトル: wl_hr.png
著作権者: Woedenaz
公開年: 2019

ファイルページ: wl_border.png

ソース: https://wanderers-library.wikidot.com/component:dustjacket-theme
ライセンス: CC BY-SA 3.0

タイトル: wl_border.png
著作権者: Woedenaz
公開年: 2019