@import url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%253Aeigenvector%2Flibertinus-serif.css');
@import url('https://api.fonts.coollabs.io/css2?family=Roboto&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Inconsolata:wght@400;700&display=swap');

:root {
    --basalt-primary-color: 255,255,255;
    --basalt-secondary-color: 248,249,250;
    --basalt-tertiary-color: 200,204,209;
    --basalt-main-text-color: 0,0,0;
    --basalt-bright-element-color: 51,102,204;
    --basalt-dark-element-color: 121,92,178;
    --basalt-alternate-color: 250,167,0;
    --basalt-overtone: 32,33,34;
    --basalt-undertone: var(--basalt-bright-element-color);

    --vector-midtone: 234,236,240;
    --link-active-color: var(--basalt-alternate-color);
    --link-newpage-color: 211,51,51;

    --header-font-primary: 'Libertinus Serif';
    --UI-font: var(--body-font);
    --body-font-primary: 'Roboto';
    --mono-font-primary: 'Inconsolata';
    --base-font-size: 0.975rem;

    --header-logo: url(/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Ascpedia%2Fraisa.png);
    --header-subtitle: "资源 - 目录 - 摘要";
    --title-size: 1.75rem;
    --subtitle-size: 1.15rem;
    --header-background-color: var(--basalt-background-color);
    --header-border-color: var(--header-background-color);
    --header-UI-font-size: calc(var(--true-font-size)*0.875);
    --header-UI-dropdown-font-size: calc(var(--header-UI-font-size) * 1.125);
    --user-button-width: 3.175rem;

    --side-bar-link-color: var(--link-color);
    --side-bar-resources-background-color: var(--basalt-alternate-color), 0;

    --main-content-width: 64rem;
    --main-content-top-margin: 0.5rem;
    --main-content-side-margin: 1.5rem;
    --main-content-bottom-margin: 1rem;

    --h-border-color: 172,172,172;
    --title-border-color: var(--h-border-color);
    --hr-color: var(--h-border-color);
    --blockquote-border-color: var(--vector-midtone);
    --image-caption-background-color: var(--basalt-secondary-color);
    --footnote-background-color: var(--basalt-background-color);

    --bottom-area-background-color: var(--basalt-background-color);
    --bottom-area-padding: var(--true-font-size));
    --license-area-divider-thickness: 0.05rem;
    --license-area-logo-size: 3.75rem;
}

a:not(#header a, #side-bar a):active { color: rgb(var(--link-active-color)); }

#header h1 a span { line-height: 0.95; }
#top-bar div[class*="top-bar"] > ul > li > a {
    text-transform: initial;
}

/*------- Top Bar -------*/
#top-bar div[class*=top-bar] ul li ul {
    border-block-end: solid 0.05rem rgb(var(--general-border-color));
    border-inline-end: solid 0.05rem rgb(var(--general-border-color));
    box-sizing: border-box;
}

/*------- Side Bar -------*/

#side-bar {
    padding: 0.325rem 0.875rem;
}
:is(#side-bar, #interwiki) .heading {
    background-color: transparent;
    padding: 0.125em 0;
    text-align: left;
    text-transform: initial;
    font-weight: normal;
    font-size: .775em;
    font-family: var(--UI-font);
    color: inherit;
    border-bottom: solid 0.05rem rgb(var(--general-border-color));
}
:is(#side-bar, #interwiki) .menu-item a {
    padding: 0.275em;
}

/*------- Page Tags -------*/

#main-content > .page-tags {
    border: solid 0.05rem rgb(var(--general-border-color));
    background-color: rgb(var(--basalt-secondary-color));
    padding: 0.325rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
#main-content > .page-tags::before {
    content: "标签";
    font-size: 0.75em;
    font-weight: bold;
    background-color: rgb(var(--vector-lavender));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .75em;
    margin-inline-end: 0.75em;
    /* Patch for CN "Tag" text */
    white-space: nowrap;
}
#main-content > .page-tags > span {
    align-items: center;
    width: 100%;
    padding-top: 0;
}
#main-content > .page-tags > span a {
    flex-grow: 0;
    border-radius: 0;
}

/*------- Page Options -------*/

#page-info { color: rgb(var(--basalt-sub-text-color)); }
#page-options-container {
    padding: 0.325rem 0.475rem 0.475rem;
    background-color: rgb(var(--basalt-secondary-color));
    border: solid 0.05rem rgb(var(--general-border-color));
}
div[id*="page-options-bottom"] {
    --po-padding: 0.325rem;
    background: transparent;
}

/*--------------------------------*/

#page-title, .meta-title {
    font-size: 2.125em;
    border-bottom-width: 0.05rem;
}
#breadcrumbs, .pseudocrumbs {
    font-weight: normal;
    font-size: 1em;
}

div.page-rate-widget-box, div.rate-box-with-credit-button {
    border: solid 0.1em rgb(var(--general-border-color));
    padding: 0.1em;
}
div.page-rate-widget-box span.btn > a {
    border-bottom-width: 0;
}

#page-content :is(h1,h2,h3,h4,h5,h6) {
    display: flow-root;
    border-bottom: solid 0.05rem rgb(var(--h-border-color));
}
#page-content :is(h3,h4,h5,h6) {
    border-bottom-style: dotted;
    border-bottom-color: rgb(var(--general-border-color));
    font-family: var(--body-font);
    margin-bottom: 0.425em;
}
#page-content :is(h1,h2) > span { font-size: 91.25%; }
#page-content :is(h3,h4,h5,h6) > span { font-size: 77.5%; }

blockquote, div.blockquote {
    background: transparent;
    border-width: 0;
    border-left-width: 0.25rem;
    padding: 0.325rem 1.25rem;
    margin: 0.25rem auto;
}

.image-block, .scp-image-block {
    border: solid 0.05rem rgb(var(--general-border-color));
    background-color: rgb(var(--image-caption-background-color));
    padding: 0.25rem;
}
:is(.image-block, .scp-image-block) :is(.image-caption, .scp-image-caption) {
    padding: 0.25rem;
    text-align: left;
}
:is(.image-block, .scp-image-block) img {
    border: inherit;
}

hr { height: 0.05rem; }

:is(#page-content table:not(.form), table.wiki-content-table) th {
    background-color: rgb(var(--vector-midtone));
    border-color: rgb(var(--general-border-color));
    color: rgb(var(--basalt-main-text-color));
    font-family: var(--body-font);
}
:is(#page-content table:not(.form), table.wiki-content-table) td {
    background-color: rgb(var(--basalt-secondary-color));
}

.hovertip .content .footnote::before, .hovertip .content .reference::before {
    content: none;
}
.hovertip .content .footnote .f-heading, .hovertip .content .reference .r-heading {
    background-color: transparent;
    color: inherit;
    font-family: var(--header-font);
    border-bottom: solid 0.05rem rgb(var(--h-border-color));
    width: auto;
    padding: 0;
    position: static;
}
.hovertip .content .footnote .f-content, .hovertip .content .reference .r-content {
    padding-left: 0;
    margin: 0.125rem 0 0;
}

.bibitems, .footnotes-footer {
    padding: 0.75rem 0.5rem 0.5rem;
    border-left: none;
}
.bibitems::before, .footnotes-footer::before { content: unset; }
.bibitems .title, .footnotes-footer .title {
    display: flow-root;
    width: auto;
    font-family: var(--header-font);
    padding: 0;
    background-color: transparent;
    color: rgb(var(--basalt-main-text-color));
    font-size: 1.6em;
    text-transform: capitalize;
    font-weight: bold;
    border-bottom: solid 0.05rem rgb(var(--h-border-color));
}
.bibitems .bibitem, .footnotes-footer .footnote-footer {
    margin-inline-start: 1.25rem;
    font-size: 0.875em;
}
.footnotes-footer .footnote-footer > a:first-child {
    inset-inline-end: calc(100% + 0.175ch);
    inset-block-start: 0.05em;
}
a.footnoteref::before, a.bibcite::before { content:"["; }
a.footnoteref::after, a.bibcite::after  { content:"]"; }


/*------------------------------------*/
/*----DESKTOP QUERY----*/
/*------------------------------------*/

@media not all and (max-width: 1024px) {
    :root {
        --side-bar-button-width: 1.5rem;
        --side-bar-width: 16rem;
        --main-content-side-margin: 2.5rem;
    }

    #header {
        position: relative;
    }

    #content-wrap {
        display: flex;
        grid-gap: var(--main-content-side-margin);
        margin-block: .5rem 2.75rem;
    }
    #content-wrap::after {
        content: "";
        display: block;
        height: 100%;
        flex-basis: calc((var(--side-bar-width)*1.75 - var(--main-content-side-margin))/4);
        flex-shrink: 3;
    }

    #side-bar::before, #side-bar::after { display: none; }
    #side-bar {
        --scrollbar-track-color: var(--basalt-background-color);
        --scrollbar-thumb-color: var(--basalt-background-color);
        position: sticky;
        height: calc(100vh - var(--main-content-top-margin)*2);
        top: var(--main-content-top-margin);
        margin-top: var(--main-content-top-margin);
        margin-bottom: var(--main-content-bottom-margin);
        margin-left: 0.625rem;
        --true-font-size: 0.8rem;
        flex-shrink: 0;
        z-index: 8;
        transition: scrollbar-color 0.125s linear;
    }
    #side-bar:is(:hover, :focus-within) {
        --scrollbar-track-color: var(--basalt-tertiary-color);
        --scrollbar-thumb-color: var(--basalt-undertone);
    }

    #main-content {
        width: initial;
        max-width: min(var(--main-content-width), calc(100% - var(--side-bar-width) - var(--main-content-side-margin)*2));
        flex-basis: var(--main-content-width);
    }
}

/*---------------------------------*/
/*----MOBILE QUERY----*/
/*---------------------------------*/

@media only screen and (max-width: 1024px) {
    #header h1 {
        grid-column: 1/5;
    }
    #header h1 a {
        margin: 0 auto;
    }
}

/*---------------------------------*/
/*----PRINT----*/
/*---------------------------------*/
body.print-body #content-wrap::after { content: unset; }

/*-------------------------------------*/
/*----CUSTOM SYNTAX----*/
/*-------------------------------------*/

:root {
    --vector-grey: 221,221,221;
    --vector-lavender: 204,204,255;
    --vector-green: 60,179,113;
    --vector-pink: 255,105,180;
    --vector-cyan: 119,204,255;
    --vector-orange: 255,136,34;
    --vector-red: 170,0,68;
    --vector-jean: 76,96,153;
    --vector-storm: 122,176,196;
}

.oheader {
    --active-color: var(--basalt-tertiary-color);
    background-color: rgb(var(--active-color),0.06);
    border-color: rgb(var(--active-color));
    border-style: solid;
    border-width: 0.05rem 0.05rem 0.05rem 0.75rem;
    width: max(67.5%, calc(var(--main-content-width)*0.5));
    margin: 1rem auto;
    clear: both;
    padding: 0.5rem 0.875rem;
    box-sizing: border-box;
}

.capt {
    --active-color: var(--basalt-tertiary-color);
    display: flow-root;
    margin: 0.125rem 0.25rem -0.5rem;
    font-size: 1.05em;
    padding: 0.25rem;
    font-weight: bold;
    text-align: center;
    background-color: rgb(var(--active-color),0.6125);
}

.grey { --active-color: var(--vector-grey); }
.lavender { --active-color: var(--vector-lavender); }
.green { --active-color: var(--vector-green); }
.pink { --active-color: var(--vector-pink); }
.cyan { --active-color: var(--vector-cyan); }
.orange { --active-color: var(--vector-orange); }
.red { --active-color: var(--vector-red); }
.jean { --active-color: var(--vector-jean); }
.storm { --active-color: var(--vector-storm); }

.wikibox {
    background-color: rgb(var(--basalt-secondary-color));
    border: solid 0.05rem rgb(var(--general-border-color));
    margin: 0.5rem 0 0.5rem 1.5rem;
    padding: 0.375rem 0.5rem;
    float: right;
    clear: right;
    font-size: 0.875em;
    width: 17.75rem;
    box-sizing: border-box;
}
@media (max-width: 36rem) {
    .wikibox {
        float: none;
        clear: both;
        margin-left: auto; margin-right: auto;
    }
}
.wikibox hr {
    background-color:  rgb(var(--general-border-color));
    margin: 0.125rem -0.5rem;
}
.wikibox table {
    width: 100%;
    margin: 0;
}
.wikibox table td {
    border: none;
    padding: 0.225em;
}


.s-title {
    font-size: 1.15em;
    font-weight: bold;
    margin: 0.4rem 0;
}

/* ---- Wikimodule Integration ---- */

div.collection .collapsible-block {
    border: solid 0.05rem rgb(var(--general-border-color));
}

div.collection :is(.collapsible-block-unfolded-link, .collapsible-block-folded) a {
    background-color: rgb(var(--vector-lavender));
    color: rgb(var(--link-color));
}
#page-content .collection table { margin: 0; }
#page-content .collection th:is(.titlecolumn, .namerow) {
    border: 0.125rem solid rgb(var(--basalt-background-color));
    background-color: rgb(var(--vector-lavender));
    padding: 0.375rem;
    font-weight: normal;
}
#page-content .collection th.articlecolumn {
    background: transparent;
}