/* Wanderer's Station Theme */
/* 2019 Wikidot Theme */
/* By Rounderhouse, based off Dustjacket by Woedenaz and Croquembouche */
/* Logo by Rounderhouse, using art from SunnyClockwork, licensed under CC BY SA 3.0 */
/* Header background by NASA, public domain. */
/* Fonts */

@import url("https://wanderers-library.wikidot.com/component:theme/code/1"); 
@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800'); 
@import url('https://fonts.googleapis.com/css?family=Iceland&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Gugi&display=swap'); 
@import url('https://crimone.github.io/typefaces/zcoolqingkehuangyouti-altered/zcqkhyt.css'); 

/* All Vars Used */
:root:lang(cn) {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "nuscp";
    /* must be either "nuscp" or "sigma9" */
    --theme-id: "WandererStation";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Wanderer's Station";
    /* set this to your theme's full name */
    /* Header */
    --logo-image: url("https://wanderers-sandbox.wikidot.com/local--files/component%3Awanderers-station/spacelogo.png");
    --header-title: "流浪者站";
    --header-subtitle: "欢迎回港，流浪者01。";
    /* Typefaces */
    --body-font: 'Lato', '微软雅黑', sans-serif;
    --header-font: 'zcoolqingkehuangyouti-Regular', cursive;
    --title-font: 'zcoolqingkehuangyouti-Regular', '等线', '幼圆', cursive;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", '仿宋', Courier, monospace;
    /* Standard Colors */
    --white-monochrome: 252, 252, 252;
    /* white */
    --pale-gray-monochrome: 244, 244, 244;
    /* v light gray for blockquotes and stuff */
    --light-gray-monochrome: 170, 170, 170;
    /* light accent gray for login status */
    --gray-monochrome: 66, 66, 72;
    /* gray */
    --dark-gray-monochrome: 48, 48, 52;
    /* dark accent gray for sidebar background */
    --black-monochrome: 12, 12, 12;
    /* black */
    --bright-accent: 255, 219, 90;
    /* bright yellow */
    --medium-accent: 36, 38, 114;
    /* blue */
    --dark-accent: 220, 185, 53;
    /* dark yellow */
    --newpage-color: 221, 102, 17;
    /* pale orange */
    --mid-black: 39, 39, 39;
    /* pale black */
    /* Primary Theme Colors */
    --swatch-background: var(--mid-black);
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--medium-accent);
    /* Primary Text Colors */
    --swatch-text-dark: var(--white-monochrome);
    --swatch-text-light: var(--black-monochrome);
    --swatch-important-text: var(--bright-accent);
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--gray-monochrome);
    --swatch-menubg-light-color: var(--gray-monochrome);
    --swatch-menubg-medium-color: var(--gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--black-monochrome);
    --swatch-menubg-dark-color: var(--medium-accent);
    --swatch-menubg-black-color: var(--black-monochrome);
    --swatch-menubg-hover-color: var(--gray-monochrome);
    --swatch-menutxt-dark-color: var(--bright-accent);
    --swatch-menutxt-light-color: var(--bright-accent);
    --swatch-border-color: var(--bright-accent);
    /* Primary Header Colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
    --swatch-topmenu-border-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--medium-accent);
    --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--bright-accent);
    /* space between the top of the page and the start of the header */
    --border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
    /* Box-Shadow 1px Borders */
    --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));
    /* Contrast Adjustments */
    --sidebar-links-hover-text-color: var(--dark-accent);
    --ui-button-hover-txt: var(--dark-accent);
    --dropdown-links-hover-color: var(--pale-gray-monochrome);
    --ui-button-hover-bg: var(--pale-gray-monochrome);
    /* Sidebar */
    --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
    --sidebar-internal-border-thickness: 0.125rem;
    --background-gradient-color: 36, 38, 114;
    --background-gradient-distance: 10rem;

    --link-color: var(--dark-accent);
    --visited-link-color: var(--light-gray-monochrome);
    --hover-link-color: var(--pale-gray-monochrome);
}

#main-content {
   --toc-body-link-color: var(--bright-accent);
  --toc-body-link-hover-color: var(--pale-gray-monochrome);
  --toc-body-hover-arrow-color: var(--pale-gray-monochrome);
    --tabs-bg: var(--dark-accent);
    --tabs-bottom-border-color: var(--mid-black);
    --tabs-hover-bg: var(--tabs-bottom-border-color);
    --tabs-txt: var(--bright-accent);
    --tabs-content-bg-color: var(--swatch-secondary-color), 0.375;
    --tabs-selected-txt: var(--pale-gray-monochrome);
    --ui-icon-color: var(--mid-black);
    --ui-icon-hover-color: var(--mid-black);
}

div#extra-div-1 {
    background-image: url(https://wanderers-sandbox.wikidot.com/local--files/component%3Awanderers-station/space.png);
    background-size: contain;
    background-repeat: repeat-x;
}

#odialog-container div.owindow {
background-color: rgba(var(--mid-black));
}
#odialog-container .title {
background-color: rgba(var(--mid-black));
color: rgb(255, 255, 255);
}
#odialog-container .content :is(h1, h2, h3, h4, h5) {
color: rgb(255, 255, 255);
}

#side-bar {
  --sidebar-links-text: var(--pale-gray-monochrome);
  --sidebar-links-hover-text-color: var(--bright-accent);
  --sidebar-collapsible-fld-link-hover-bg: var(--medium-accent);
  --sidebar-links-hover-bg-color: var(--mid-black);
 }

.page-rate-widget-box {
    border-radius: 0px 15px 0px 15px !important;
}

#top-bar {
  --dropdown-links-hover-color: var(--medium-accent);
  --dropdown-links-hover-bg-color:  var(--bright-accent);
}

#top-bar div.top-bar > ul > li > a {
    padding: 0.2em 1em;
}

#top-bar div.top-bar > ul > li > ul {
    background: rgba(var(--dark-gray-monochrome), 1);
}

#top-bar div.top-bar > ul > li > ul > a {
    color: rgb(var(--bright-accent));
}

#login-status #account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: rgba(var(--dark-gray-monochrome), 0.5);
    color: rgb(var(--bright-accent));
    --login-dropdown-text-hover-color: var(--pale-gray-monochrome);
}

#toc {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
}

a {
    color: rgb(var(--dark-accent));
}

#top-bar div.top-bar div.newpage_dropdown div.new-page-box input {
    background-color: rgba(var(--bright-accent));
    color: rgba(var(--medium-accent));
}

#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button:hover {
    color: rgba(var(--bright-accent));
    border: solid 2px rgba(var(--bright-accent));
}

#top-bar div.mobile-top-bar > ul > li > ul > li:hover > a, #top-bar div.top-bar > ul > li > ul > li:hover > a {
    color: rgba(var(--medium-accent));
}

.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
    color: rgba(var(--bright-accent));
}

.yui-navset-bottom .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset .yui-nav li a {
    background-color: rgba(var(--medium-accent));
}

.yui-navset .yui-nav li a em:hover, .yui-navset-top .yui-nav li a em:hover, .yui-navset-bottom .yui-nav li a em:hover {
    color: rgba(var(--dark-accent));
}

.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    color: rgba(var(--pale-gray-accent));
}

#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"], #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"]:hover {
    background-color: rgb(var(--medium-accent));
}

#search-top-box:not(:focus-within)::before {
    color: rgb(var(--bright-accent));
}

#page-title {
    grid-area: page-title;
    border-color: rgb(var(--bright-accent,66,66,72));
    color: rgb(var(--bright-accent,12,12,12));
}

h1, h2, h3, h4, h5, h6 {
    color: rgba(var(--bright-accent));
}

#lock-info {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
}

div#page-options-bottom > a, div#page-options-bottom-2 > a {
    background-color: rgba(178, 210, 180, 0.25);
    background-color: rgba(var(--swatch-menubg-light-color), 0.25);
    border: 0.0625rem solid rgba(255, 219, 90, 1);
    border: 0.0625rem solid rgba(var(--swatch-primary), 1);
    color: rgba(var(--medium-accent));
}

div#page-options-bottom > a:hover, div#page-options-bottom > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom-2 > a:active {
    background-color: rgba(30, 55, 30, 1);
    background-color: rgba(var(--swatch-menubg-dark-color), 1);
    color: rgba(255, 219, 90, 1);
    color: rgba(var(--medium-accent), 1);
}

html body#html-body div#skrollr-body div#container-wrap-wrap div#container-wrap div#container div#content-wrap div#main-content div#action-area div form#edit-page-form div.buttons.alignleft > input {
    background: rgb(var(--medium-accent));
}

.wl-translations {
    border: 1px solid rgba(var(--bright-accent), 1);
    border-radius: 2px;
}

.wl-translations a {
    color: rgba(var(--bright-accent), 1);
}

.collection > .collapsible-block {
    background-color: rgb(var(--mid-black));
    border: 1px solid rgb(var(--dark-accent));
}

.collection .collapsible-block-unfolded-link {
    background-color: rgba(var(--medium-accent), 0.75);
    border: 2px solid rgb(var(--mid-black));
}

.collection .collapsible-block-folded {
    background-color: rgba(var(--medium-accent), 0.75);
    border: 2px solid rgb(var(--mid-black));
}

.authorname {
    color: rgb(var(--white-monochrome));
    background-color: rgba(var(--medium-accent), 0.75);
    border: 2px solid rgb(var(--mid-black));
}

.titlecolumn {
    border: 2px solid rgb(var(--mid-black));
    background-color: rgba(var(--medium-accent), 0.75);
}

.articlecolumn {
    background-color: rgb(var(--mid-black));
}

.blockquote, blockquote {
    background-color: rgba(var(--medium-accent));
    color: rgba(var(--bright-accent));
    border: .063em solid rgba(var(--bright-accent),.25)
}

table.wiki-content-table th {
    background-color: rgb(var(--medium-accent));
}

table.wiki-content-table th, table.wiki-content-table tr {
    border: .075rem solid rgba(var(--bright-accent),.50) !important;
}

/* terminal by ayers */
div.terminal {
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #011128;
    /* black shadow at the top of the terminal */
    background-image: -o-radial-gradient(50% 90%, ellipse 1000% 100%, transparent, #011128);
    background-image: radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #011128);
    background-position: center;
    display: block;
    /* shadow around the terminal */
    -webkit-box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    /* prevents scanline from forming a scrollwheel */
    overflow: hidden;
}

div.terminal blockquote {
    color: rgba(173,195,255) !important;
    background-color: black;
    border: double 3px #1E78FF
}

div.scanline {
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite;
    /* You may need to change this. If the bar goes by too quickly, increase 5s. */
    animation: scan 12s linear 0s infinite;
    /* Same as above */
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(56, 112, 82,0)), to(rgba(56, 112, 82,0.1))) !important;
    background: -o-linear-gradient(top, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text {
    color: rgba(173,195,255);
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan {
    from {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }

    to {
        -webkit-transform: translateY(5000%);
        transform: translateY(5000%);
    }

    /* You may need to change this depending on the length of your terminal. If the scanline stops halfway, increase the second number.*/
}

@keyframes scan {
    from {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }

    to {
        -webkit-transform: translateY(5000%);
        transform: translateY(5000%);
    }

    /* Same as above.*/
}

div.text a {
    color: #00B6AC;
    text-decoration: none;
    background: transparent;
}

div.text a.newpage {
    color: #03fff1;
}

div.text a:hover {
    color: #00d0c4;
    text-decoration: underline;
    background-color: #272727;
    padding: 1px;
}

div.text a:hover::before {
    content: "> ";
}

/* mobile */
@media only screen and (max-width: 768px) {
    div#extra-div-1 {
        background-size: cover;
    }

    #header div#top-bar {
      font-size: 1vh;
    }

    div#extrac-div-1 {
        background-image: url(https://wanderers-sandbox.wikidot.com/local--files/component%3Awanderers-station/space.png);
        background-size: var(--header-height-on-mobile);
        background-repeat: no-repeat;
        z-index: 3;
    }

    body {
        background: rgba(var(--swatch-background), 1);
    }

    #main-content {
        margin-left: inherit;
    }

    div#page-options-bottom {
        width: 90%;
    }
}