游戏指南版式 | SCP基金会中文分部

游戏指南版式
列表暂不可用： 此 ListPages 查询尚未由只读迁移站支持。
+ 展开代码- 收起代码
css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
:root {
    --icon: url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg");
    --title: "SCP基金会";
    --subtitle: "控制 · 收容 · 保护";
    --trans-time: 0.25s;
    --text-color: 150, 150, 150;
    --text-color2: 180, 180, 180;
    --text-color3: 200, 200, 200;
    --text-color4: 90, 90, 90;
    --link-color: 235, 235, 235;
    --accent-color: 102, 192, 244;
    --accent-color2: 90, 169, 214;
    --accent-color3: 93, 126, 16;
    --accent-color4: 126, 166, 75;
    --accent-color5: 49, 99, 130;
    --accent-color6: 84, 133, 183;
    --accent-color7: 142, 201, 64;
    --accent-color8: 86, 106, 129;
    --accent-color9: 225, 27, 27;
    --upvote-color: 103, 174, 77;
    --downvote-color: 167, 74, 74;
    --novote-color: 255, 200, 61;
    --bg-color: 27, 41, 56;
    --bg-color2: 36, 56, 77;
    --bg-color3: 53, 70, 94;
    --top-bg-color: 23, 26, 33;
    --online-color: linear-gradient(to bottom, #41778f 5%, #3d697b 95%);
}

/*
 * 全局修改
 */

body {
    color: rgba(var(--text-color, 150, 150, 150), 1);
}

a,
a.newpage,
a:visited {
    color: rgba(var(--link-color, 235, 235, 235), 1);
    -webkit-transition: var(--trans-time, 0.25s) color;
    -o-transition: var(--trans-time, 0.25s) color;
    -moz-transition: var(--trans-time, 0.25s) color;
    transition: var(--trans-time, 0.25s) color;
}

a:focus-visible {
    border: 1px solid rgba(255, 255, 255, 1);
}

a:hover {
    text-decoration: none;
    color: rgba(var(--accent-color, 102, 192, 244), 1);
}

div#container-wrap {
    background: rgba(var(--bg-color, 27, 41, 56), 1);
}

h1 {
    padding: 0;
    margin: 0 0 10px 0;
    color: rgba(var(--accent-color, 102, 192, 244), 1);
    font-size: 20px;
    line-height: 23px;
    font-weight: normal;
    font-family: 'Noto Sans SC', sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 8px 0 6px 0;
    color: rgba(var(--accent-color2, 90, 169, 214), 1);
    font-family: 'Noto Sans SC', sans-serif;
}

h2 {
    font-size: 18px;
    line-height: 21px;
    font-weight: 400;
}

h3 {
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
}

h4 {
    font-size: 14px;
    line-height: 17px;
    font-weight: 300;
}

h5 {
    font-size: 12px;
    line-height: 19px;
    font-weight: 300;
}

h6 {
    font-size: 10px;
    line-height: 15px;
    font-weight: 300;
}

/*
 * 顶栏修改
 */

#extra-div-1 {
    z-index: 9;
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100vw;
    width: 100%;
    height: 104px;
    background: rgba(var(--top-bg-color, 23, 26, 33));
}

#header {
    height: 104px;
    background: var(--icon, url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg")) no-repeat;
    -webkit-background-size: 50px 50px;
       -moz-background-size: 50px 50px;
         -o-background-size: 50px 50px;
            background-size: 50px 50px;
    background-position: 10px 25px;
    padding-bottom: 0;
}

#header h1,
#header h2 {
    margin-left: 70px;
    line-height: unset;
    font-weight: bold;
}

#header h1 a {
    padding: 20px 0 35px 0;
    line-height: unset;
    color: #c5c3c0;
    font-family: 'Noto Sans SC', sans-serif;
    text-shadow: none;
    font-size: 28px;
}

#header h1 a span {
    font-size: 0;
}

#header h1 a span::before {
    content: var(--title, 'SCP基金会');
    font-size: 28px;
}

#header h2 span {
    line-height: unset;
    max-height: unset;
    padding: 0px 0;
    color: #b7afa7;
    font-family: 'Noto Sans SC', sans-serif;
    text-shadow: none;
    font-weight: normal;
    font-size: 0;
}

#header h2 span::before {
    content: var(--subtitle, '控制 · 收容 · 保护');
    font-size: 14px;
}

#login-status {
    padding-right: 40px;
    font-size: 0;
}

#login-status span,
#login-status a,
#login-status div {
    font-size: 12px;
}

#login-status .printuser a {
    position: absolute;
    right: 0px;
}

#login-status .printuser a img {
    width: 32px;
    height: 32px;
    background: var(--online-color, linear-gradient(to bottom, #41778f 5%, #3d697b 95%)) !important;
    padding: 2px;
}

#login-status>a[href="https://www.wikidot.com/account/messages"] {
    background: rgba(var(--accent-color3, 93, 126, 16), 1);
    display: inline-block;
    margin: 0 3px 0 8px;
    padding: 0 8px;
    line-height: 24px;
}

#login-status>a[href="https://www.wikidot.com/account/messages"]:hover {
    text-decoration: none;
    background: rgba(var(--accent-color4, 126, 166, 75), 1);
}

#login-status>a[href="https://www.wikidot.com/account/messages"]>strong {
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
}

#login-status>a[href="https://www.wikidot.com/account/messages"]>strong::after {
    content: '\f0e0';
    font-family: 'FontAwesome';
    font-weight: normal;
    padding-left: 5px;
}

#my-account {
    display: none;
}

#login-status>a[href="https://www.wikidot.com/account/messages"]+#account-topbutton::before {
    display: none;
}

#account-topbutton::before {
    content: '\f0e0';
    font-family: 'FontAwesome';
    display: inline-block;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.1);
    line-height: 24px;
    margin: 0 3px 0 8px;
}

#account-topbutton {
    font-weight: normal;
    border: none;
    padding: 0;
}

#account-options {
    right: 40px;
    background-color: rgba(var(--top-bg-color, 23, 26, 33), 0.9);
    -webkit-box-shadow: 0 0 12px #000000;
       -moz-box-shadow: 0 0 12px #000000;
            box-shadow: 0 0 12px #000000;
    border: none;
}

#account-options ul li a {
    color: rgba(var(--text-color2, 180, 180, 180), 1);
    padding: 5px 12px;
}

#account-options ul li a:hover {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

#top-bar {
    top: 36px;
    left: 270px;
    line-height: 16px;
    font-size: 14px;
    width: unset;
}

#top-bar ul {
    float: left;
}

#top-bar {
    width: 45em;
}

#top-bar ul li ul {
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

#top-bar ul li:hover ul,
#top-bar ul li.sfhover ul {
    opacity: 1;
    -webkit-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

#top-bar .mobile-top-bar {
    bottom: -10px;
}

#top-bar ul li a {
    margin: unset;
    padding: 5px 12px;
    line-height: 160%;
    max-height: unset;
    border: 1px solid transparent;
    color: transparent;
}

#top-bar .top-bar>ul>li>a,
#top-bar .mobile-top-bar>ul>li>a {
    color: rgba(var(--text-color2, 180, 180, 180), 1);
}

#top-bar .top-bar ul li.sfhover ul li a,
#top-bar .mobile-top-bar ul li.sfhover ul li a,
#top-bar .top-bar ul li:hover ul li a,
#top-bar .mobile-top-bar ul li:hover ul li a,
#top-bar .top-bar ul li ul li a,
#top-bar .mobile-rop-bar ul li ul li a {
    color: rgba(var(--text-color2, 180, 180, 180), 1);
    padding: 5px 12px;
    background-color: transparent;
    border-color: transparent;
    width: 200px;
}

#top-bar .top-bar ul li.sfhover ul,
#top-bar .mobile-top-bar ul li.sfhover ul,
#top-bar .top-bar ul li:hover ul,
#top-bar .mobile-top-bar ul li:hover ul,
#top-bar .top-bar ul li ul,
#top-bar .mobile-top-bar ul li ul {
    background-color: rgba(var(--top-bg-color, 23, 26, 33), 0.9);
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 1);
       -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 1);
            box-shadow: 0 0 12px rgba(0, 0, 0, 1);
    border: none;
}

#top-bar .top-bar>ul>li.sfhover>a,
#top-bar .top-bar>ul>li:hover>a,
#top-bar .mobile-top-bar>ul>li.sfhover>a,
#top-bar .mobile-top-bar>ul>li:hover>a,
#top-bar .top-bar ul li.sfhover ul li a:hover,
#top-bar .mobile-top-bar ul li.sfhover ul li a:hover,
#top-bar .top-bar ul li:hover ul li a:hover,
#top-bar .mobile-top-bar ul li:hover ul li a:hover,
#top-bar .top-bar ul li ul li a:hover,
#top-bar .mobile-top-bar ul li ul li a:hover,
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover,
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover,
#top-bar ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: rgba(255, 255, 255, 1);
}

#search-top-box {
    top: 70px;
}

#search-top-box #search-top-box-form #search-top-box-input {
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-shadow: 1px 1px 0px rgb(255 255 255 / 10%);
    background-color: rgba(var(--accent-color5, 49, 99, 130), 1);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 1px 0px rgb(255 255 255 / 20%);
       -moz-box-shadow: 1px 1px 0px rgb(255 255 255 / 20%);
            box-shadow: 1px 1px 0px rgb(255 255 255 / 20%);
}

#search-top-box #search-top-box-form>input[type=submit],
#search-top-box #search-top-box-form>input[type=submit]:hover,
#search-top-box #search-top-box-form>input[type=submit]:focus,
#search-top-box #search-top-box-form>input[type=submit]:target {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E") 50%/1rem no-repeat, #549dc9;
    border: 1px solid rgba(var(--accent-color2, 90, 169, 214), 1);
    position: relative;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    font-size: 0;
    height: 20px;
    width: 20px;
    bottom: 4px;
}

#search-top-box #search-top-box-form>input[type=submit]::before {
    content: '\f002';
    font-family: 'FontAwesome';
    display: inline-block;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

/*
 * 侧栏修改
 */

#top-bar .open-menu a {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    border: solid 0.1em rgba(var(--accent-color2, 90, 169, 214), 1);
    color: rgba(var(--accent-color2, 90, 169, 214), 1);
    background-color: rgba(var(--accent-color6, 84, 133, 183), 0.2);
}

#side-bar .side-block {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    background: rgba(var(--bg-color2, 36, 56, 77), 1) !important;
    border: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

#side-bar .side-block:first-child div a img {
    filter: invert(1);
}

#side-bar .side-block .menu-item a {
    color: rgba(var(--link-color, 235, 235, 235), 1);
}

#side-bar .side-block .menu-item a:hover {
    color: rgba(var(--accent-color, 102, 192, 244), 1);
}

#side-bar .side-block .menu-item>img {
    opacity: 0;
}

#side-bar .side-block .heading {
    color: rgba(var(--accent-color2, 90, 169, 214), 1);
    border-bottom: solid 1px rgba(var(--text-color4, 90, 90, 90), 1);
}

#side-bar .side-block .collapsible-block-folded {
    background: none;
}

#side-bar .side-block .collapsible-block-unfolded-link {
    border-bottom: solid 1px rgba(var(--accent-color2, 90, 169, 214), 1);
}

#side-bar .side-block .collapsible-block-link {
    color: rgba(var(--accent-color2, 90, 169, 214), 1);
}

#side-bar .side-block .collapsible-block-link:hover {
    color: rgba(var(--accent-color, 102, 192, 244), 1);
}

/*
 * 正文区域修改
 */

#content-wrap {
    margin: 20px auto 0;
}

#main-content {
    max-width: 948px;
}

#page-title,
#page-content .meta-title {
    color: rgba(var(--accent-color, 102, 192, 244), 1);
}

#breadcrumbs,
#breadcrumbs a {
    color: rgba(var(--text-color, 150, 150, 150), 1);
}

#breadcrumbs a:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}

#page-content .guidePriview {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background-color: rgba(var(--accent-color6, 84, 133, 183), 0.2);
    padding: 10px 16px 0;
    margin-bottom: 20px;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#page-content .priviewIcon {
    width: 74px;
    height: 74px;
    margin: 0 10px 3px 0;
}

#page-content .priviewTitle .title {
    color: rgba(255, 255, 255, 1);
    font-size: 30px;
    margin: 0;
    font-family: "Noto Sans SC", sans-serif;
}

#page-content .priviewTitle p {
    margin: 0;
    color: rgba(var(--text-color4, 90, 90, 90), 1);
}

#page-content .priviewRate {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    color: rgba(var(--accent-color7, 142, 201, 64), 1);
    margin: 10px 0 0 auto;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

#page-content .priviewRate .rateStar::before {
    content: '\f005';
    font-family: 'FontAwesome';
    margin-left: 5px;
    font-size: 24px;
    color: rgba(var(--accent-color8, 86, 106, 129), 1);
}

#page-content .priviewRate.rate1 .rateStar.star1::before,
#page-content .priviewRate.rate2 .rateStar.star1::before,
#page-content .priviewRate.rate2 .rateStar.star2::before,
#page-content .priviewRate.rate3 .rateStar.star1::before,
#page-content .priviewRate.rate3 .rateStar.star2::before,
#page-content .priviewRate.rate3 .rateStar.star3::before,
#page-content .priviewRate.rate4 .rateStar.star1::before,
#page-content .priviewRate.rate4 .rateStar.star2::before,
#page-content .priviewRate.rate4 .rateStar.star3::before,
#page-content .priviewRate.rate4 .rateStar.star4::before,
#page-content .priviewRate.rate5 .rateStar::before {
    color: rgba(var(--accent-color7, 142, 201, 64), 1);
}

#page-content .priviewRate.rate6 .rateStar::before {
    color: rgba(var(--accent-color9, 225, 27, 27), 1);
}

#page-content .priviewRate.rate0 .rateNumber,
#page-content .priviewRate.rate6 .rateNumber {
    font-size: 0;
}

#page-content .priviewRate.rate0 .rateNumber::before {
    content: "评价数不足";
    font-size: 12px;
    color: rgba(var(--text-color4, 90, 90, 90), 1);
}

#page-content .priviewRate.rate6 .rateNumber::before {
    content: "负分作品";
    font-size: 12px;
}

#page-content .priviewRate .rateNumber {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
       -moz-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    width: 100%;
    text-align: right;
    color: rgba(var(--text-color, 150, 150, 150), 1);
}

#page-content .priviewRate .rateNumber p,
#page-content .priviewContent p {
    margin: 0;
}

#page-content .priviewbr {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
       -moz-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    width: 100%;
}

#page-content .priviewbr hr {
    background-color: rgba(var(--text-color4, 90, 90, 90), 1);
    margin: 10px 0;
}

#page-content .priviewContent {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
       -moz-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    font-size: 17px;
    color: rgba(var(--text-color3, 200, 200, 200), 1);
    margin-top: 10px;
    line-height: 22px;
    padding: 0 8px 16px 0;
    width: 100%;
}

#page-content .priviewSticky {
    position: -webkit-sticky;
    position: sticky;
    margin-top: -20px;
    top: 0;
    background: rgba(var(--bg-color2, 36, 56, 77), 1);
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 1);
       -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 1);
            box-shadow: 0 0 7px rgba(0, 0, 0, 1);
    padding: 10px;
    z-index: 9;
}

#page-content .page-rate-widget-box,
#action-area .page-rate-widget-box {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    margin: 12px 59px 12px 0;
}

#page-content .page-rate-widget-box .rate-points,
#action-area .page-rate-widget-box .rate-points {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

#page-content .page-rate-widget-box .rate-points,
#page-content .page-rate-widget-box .rateup,
#page-content .page-rate-widget-box .ratedown,
#page-content .page-rate-widget-box .cancel,
#action-area .page-rate-widget-box .rate-points,
#action-area .page-rate-widget-box .rateup,
#action-area .page-rate-widget-box .ratedown,
#action-area .page-rate-widget-box .cancel {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    border: none;
    padding: 8px;
    margin-right: 8px;
    font-weight: normal;
    -webkit-transition: 0.15s;
    -o-transition: 0.15s;
    -moz-transition: 0.15s;
    transition: 0.15s;
}

#page-content .page-rate-widget-box .rateup a,
#page-content .page-rate-widget-box .ratedown a,
#page-content .page-rate-widget-box .cancel a,
#action-area .page-rate-widget-box .rateup a,
#action-area .page-rate-widget-box .ratedown a,
#action-area .page-rate-widget-box .cancel a {
    color: rgba(var(--text-color, 150, 150, 150), 1);
    padding: 0;
    margin: 0;
    font-size: 0;
    -webkit-transition: 0.15s;
    -o-transition: 0.15s;
    -moz-transition: 0.15s;
    transition: 0.15s;
}

#page-content .page-rate-widget-box .rateup:hover,
#page-content .page-rate-widget-box .rateup:focus-within,
#page-content .page-rate-widget-box .ratedown:hover,
#page-content .page-rate-widget-box .ratedown:focus-within,
#page-content .page-rate-widget-box .cancel:hover,
#page-content .page-rate-widget-box .cancel:focus-within,
#action-area .page-rate-widget-box .rateup:hover,
#action-area .page-rate-widget-box .rateup:focus-within,
#action-area .page-rate-widget-box .ratedown:hover,
#action-area .page-rate-widget-box .ratedown:focus-within,
#action-area .page-rate-widget-box .cancel:hover,
#action-area .page-rate-widget-box .cancel:focus-within,
#page-content .creditRate .rate-box-with-credit-button .creditButton:hover,
#page-content .creditRate .rate-box-with-credit-button .creditButton:focus-within,
#page-content .creditRate .creditButtonStandalone:hover,
#page-content .creditRate .creditButtonStandalone:focus-within {
    background-color: rgba(var(--accent-color, 102, 192, 244), 0.4);
}

#page-content .page-rate-widget-box .rateup a:focus-visible,
#page-content .page-rate-widget-box .ratedown a:focus-visible,
#page-content .page-rate-widget-box .cancel a:focus-visible,
#action-area .page-rate-widget-box .rateup a:focus-visible,
#action-area .page-rate-widget-box .ratedown a:focus-visible,
#action-area .page-rate-widget-box .cancel a:focus-visible {
    border: none;
}

#page-content .page-rate-widget-box .rateup a::before,
#action-area .page-rate-widget-box .rateup a::before {
    content: '\f164';
    font-family: 'FontAwesome';
    font-size: 18px;
    padding: 0 0.65px;
}

#page-content .page-rate-widget-box .ratedown a::before,
#action-area .page-rate-widget-box .ratedown a::before {
    content: '\f165';
    font-family: 'FontAwesome';
    font-size: 18px;
    padding: 0 0.65px;
}

#page-content .page-rate-widget-box .cancel a::before,
#action-area .page-rate-widget-box .cancel a::before {
    content: '\f00d';
    font-family: 'FontAwesome';
    font-size: 18px;
    padding: 0 1.93px;
}

#page-content .page-rate-widget-box .rateup a:hover,
#page-content .page-rate-widget-box .rateup a:focus,
#action-area .page-rate-widget-box .rateup a:hover,
#action-area .page-rate-widget-box .rateup a:focus {
    color: rgba(var(--upvote-color, 103, 174, 77), 1);
}

#page-content .page-rate-widget-box .ratedown a:hover,
#page-content .page-rate-widget-box .ratedown a:focus,
#action-area .page-rate-widget-box .ratedown a:hover,
#action-area .page-rate-widget-box .ratedown a:focus {
    color: rgba(var(--downvote-color, 167, 74, 74), 1);
}

#page-content .page-rate-widget-box .cancel a:hover,
#page-content .page-rate-widget-box .cancel a:focus,
#action-area .page-rate-widget-box .cancel a:hover,
#action-area .page-rate-widget-box .cancel a:focus {
    color: rgba(var(--novote-color, 255, 200, 61), 1);
}

#page-content .creditRate {
    margin: 0 2em 8px 0;
}

#page-content .creditRate .rate-box-with-credit-button {
    background: none;
    border: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

#page-content .creditRate .page-rate-widget-box {
    margin-right: -4px;
}

#page-content .creditRate .rate-box-with-credit-button .creditButton {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 7px 8px;
    position: relative;
    top: 1px;
}

#page-content .creditRate .rate-box-with-credit-button .creditButton p a {
    width: unset;
    margin: 0;
    padding: 0;
    color: rgba(var(--text-color, 150, 150, 150), 1);
    border: none;
    font-size: 18px;
}

#page-content .creditRate .rate-box-with-credit-button .creditButton p a:hover,
#page-content .creditRate .creditButtonStandalone p a:hover {
    color: rgba(var(--accent-color2, 90, 169, 214), 1);
}

#page-content .creditRate .rate-box-with-credit-button .creditButton p a::before {
    padding: 0 5.79px;
}

#page-content .creditRate .rate-box-with-credit-button .creditButton p {
    padding: 1.5px 0;
}

#page-content .creditRate .creditButtonStandalone {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 16px 8px;
}

#page-content .creditRate .creditButtonStandalone p a {
    background-color: rgba(0, 0, 0, 0.4);
    width: unset;
    height: unset;
    line-height: unset;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    color: rgba(var(--text-color, 150, 150, 150), 1);
    background: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    font-size: 18px;
    padding: 0 5.79px;
}

#page-content .modalbox {
    background: rgba(var(--bg-color, 27, 41, 56), 1);
    border: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

#page-content .modalbox .creditBottomRate {
    bottom: 0.85em;
}

#page-content .guideContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

#page-content .guideContainer .guideSidebar {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: auto;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding-left: 10px;
}

#page-content .guideContainer .guideContent {
    max-width: 638px;
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    border-top: 1px solid rgba(var(--bg-color3, 53, 70, 94), 1);
    padding-top: 10px;
}

#page-content .sidebarButton a {
    display: none;
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    z-index: 5;
    font-family: 'Nanum Gothic', san-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    border: solid 0.1em rgba(var(--accent-color2, 90, 169, 214), 1);
    color: rgba(var(--accent-color2, 90, 169, 214), 1);
    background-color: rgba(var(--accent-color6, 84, 133, 183), 0.2);
}

#page-content .sidebarPanel {
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.5))) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding: 10px;
    margin-bottom: 10px;
    width: 300px;
}

#page-content .sidebarPanel>p {
    margin: 5px 0 10px 0;
    font-size: 11px;
}

#page-content .sidebarCreator .creatorLink {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

#page-content .sidebarCreator {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background: rgba(var(--accent-color6, 84, 133, 183), 0.2);
    padding: 4px;
    font-size: 11px;
    line-height: 13px;
    cursor: pointer;
    margin-bottom: 4px;
    -webkit-transition: var(--trans-time, 0.25s);
    -o-transition: var(--trans-time, 0.25s);
    -moz-transition: var(--trans-time, 0.25s);
    transition: var(--trans-time, 0.25s);
    position: relative;
}

#page-content .sidebarCreator:hover {
    background: rgba(117, 204, 255, 0.3);
}

#page-content .sidebarCreator img {
    width: 32px;
    height: 32px;
    padding: 2px;
    margin-right: 7px;
}

#page-content .sidebarCreator.in-game {
    color: #90ba3c;
}

#page-content .sidebarCreator.in-game img {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #66812e), color-stop(95%, #59702b));
    background: -webkit-linear-gradient(top, #66812e 5%, #59702b 95%);
    background: -moz-linear-gradient(top, #66812e 5%, #59702b 95%);
    background: -o-linear-gradient(top, #66812e 5%, #59702b 95%);
    background: linear-gradient(to bottom, #66812e 5%, #59702b 95%);
}

#page-content .sidebarCreator.in-game .status::before {
    content: "游戏中";
}

#page-content .sidebarCreator.online {
    color: #57cbde;
}

#page-content .sidebarCreator.online img {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, rgba(83, 164, 196, 1)), color-stop(95%, rgba(69, 128, 151, 1)));
    background: -webkit-linear-gradient(top, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
    background: -moz-linear-gradient(top, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
    background: -o-linear-gradient(top, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
    background: linear-gradient(to bottom, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
}

#page-content .sidebarCreator.online .status::before {
    content: "在线";
}

#page-content .sidebarCreator.offline {
    color: #898989;
}

#page-content .sidebarCreator.offline img {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, rgba(106, 106, 106, 1)), color-stop(95%, rgba(85, 85, 85, 1)));
    background: -webkit-linear-gradient( top, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
    background: -moz-linear-gradient( top, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
    background: -o-linear-gradient( top, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
    background: linear-gradient( to bottom, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
}

#page-content .sidebarCreator.offline .status::before {
    content: "离线";
}

#page-content .sidebarCreator.online .playing,
#page-content .sidebarCreator.offline .playing {
    display: none;
}

#page-content .sidebarPanel hr {
    margin: 10px -10px;
    height: 1px;
    background-color: #000;
    border-bottom: 1px solid #17212e;
}

#page-content .sidebarTags {
    padding: 8px 0;
}

#page-content .sidebarTags a:after {
    content: ",";
    color: #969696;
}

#page-content .sidebarTags a:last-of-type:after {
    content: "";
}

#page-content .sidebarTags::before {
    content: "标签：";
    color: #5c8699;
}

#page-content .sidebarDate {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    color: #8f98a0;
    line-height: 20px;
    margin-bottom: 8px;
}

#page-content .dateDescription {
    margin-right: 10px;
}

#page-content .sidebarVisitor {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 20px;
}

#page-content .visitorNumber {
    color: #6088BB;
    width: 50px;
    margin-right: 10px;
    text-align: right;
}

#page-content #toc {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #969696;
}

#page-content #toc-list {
    background-color: rgba(0, 0, 0, 0.2);
}

#page-content .sidebarToc {
    position: -webkit-sticky;
    position: sticky;
    top: 62px;
}

#page-content .sidebarToc #toc #toc-action-bar,
#page-content .sidebarToc #toc .title {
    display: none;
}

#page-content .sidebarToc>table {
    width: 100%;
}

#page-content .sidebarToc #toc,
#page-content .sidebarToc #toc #toc-list {
    margin: 0 0 0 -1em;
    width: 100%;
    border: none;
    background: none;
}

#page-content .sidebarToc #toc-list>div {
    font-size: 14px;
    padding: 5px 0;
}

#page-content .sidebarToc p {
    margin: 5px 0 0 0;
}

#page-content .bblock:hover,
#page-content .dblock:hover {
    color: #969696;
    -webkit-transition: 0.35s;
    -o-transition: 0.35s;
    -moz-transition: 0.35s;
    transition: 0.35s;
}

#page-content blockquote,
#page-content div.blockquote {
    background-color: rgba(0, 0, 0, 0.4);
    color: rgba(var(--text-color3, 200, 200, 200), 1);
    border: 1px solid #56707f;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    padding: 12px;
    margin: 8px;
}

#page-content .wiki-content-table th {
    font-weight: bold;
    border: 1px solid #4d4d4d;
    color: #c7d5e0;
    background-color: rgba(255, 255, 255, 0.1);
}

#page-content .wiki-content-table td {
    font-weight: normal;
    border: 1px solid #4d4d4d;
    background-color: rgba(0, 0, 0, 0.2);
}

#page-content .wiki-content-table tr:nth-of-type(2n-1) {
    font-weight: normal;
    border: 1px solid #4d4d4d;
    background-color: rgba(0, 0, 0, 0.2);
}

#page-content .pager a {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #3b6e8c;
}

#page-content .pager a:hover {
    color: #67c1f5;
}

#page-content .pager .target:last-of-type a,
#page-content input.btn,
#page-content .buttons input,
#action-area input.btn,
#odialog-container .owindow .button-bar a,
#action-area .change-textarea-size a {
    color: #67c1f5;
    background-color: rgba(103, 193, 245, 0.2);
    border: 1px solid rgba(103, 193, 245, 0.2);
    cursor: pointer;
    -webkit-transition: var(--trans-time, 0.25s);
    -o-transition: var(--trans-time, 0.25s);
    -moz-transition: var(--trans-time, 0.25s);
    transition: var(--trans-time, 0.25s);
}

#page-content .pager .target:last-of-type a:hover,
#page-content input.btn:hover,
#page-content .buttons input:hover,
#action-area input.btn:hover,
#odialog-container .owindow .button-bar a:hover,
#action-area .change-textarea-size a:hover {
    color: rgba(255, 255, 255, 1);
    background-color: #67c1f5;
}

#page-content .pager .current {
    background-color: rgba(255, 255, 255, 0.1);
    color: #c7d5e0;
}

#page-content .scp-image-block .scp-image-caption {
    background-color: rgba(255, 255, 255, 0.1);
    color: #c7d5e0;
}

#page-content .code {
    background-color: rgba(255, 255, 255, 0.1);
    color: #c7d5e0;
    border: 1px solid #56707f;
    font-family: 'Fira Code', '幼圆', Cousine, monospace;
}

#page-content code,
#page-content tt {
    background-color: rgba(255, 255, 255, 0.1);
    color: #c7d5e0;
    font-family: 'Fira Code', '幼圆', Cousine, monospace;
}

#page-content .code pre span[class*="hl-"] {
    -webkit-filter: invert(1) hue-rotate(180deg);
    filter: invert(1) hue-rotate(180deg);
}

#page-content .wiki-note {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #4d4d4d;
}

#page-content p:first-of-type {
    margin-top: 0;
}

#page-content p:last-of-type {
    margin-bottom: 0;
}

#page-content .yui-navset .yui-nav {
    border: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-right: 2px;
}

#page-content .yui-navset .yui-nav li,
#page-content .yui-navset .yui-nav li.selected {
    margin: 0;
    padding: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
       -moz-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

#page-content .yui-navset .yui-nav li a {
    background: rgba(0, 0, 0, 0.3);
    color: #c7d5e0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-width: 1px 1px 0 1px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: var(--trans-time, 0.25s);
    -o-transition: var(--trans-time, 0.25s);
    -moz-transition: var(--trans-time, 0.25s);
    transition: var(--trans-time, 0.25s);
}

#page-content .yui-navset .yui-nav li a:focus-visible {
    background: rgba(103, 193, 245, 0.3);
}

#page-content .yui-navset .yui-nav li:hover {
    background: rgba(103, 193, 245, 0.2);
    -webkit-transition: var(--trans-time, 0.25s);
    -o-transition: var(--trans-time, 0.25s);
    -moz-transition: var(--trans-time, 0.25s);
    transition: var(--trans-time, 0.25s);
}

#page-content .yui-navset .yui-nav li.selected a {
    background: rgba(103, 193, 245, 0.7);
    color: rgba(255, 255, 255, 1);
    border-width: 1px 1px 0 1px;
}

#page-content .yui-navset .yui-nav li a em {
    border: none;
    top: 0;
    padding: 0.25em 0.75em;
}

#page-content .yui-navset .yui-content {
    background-color: rgba(84, 133, 183, 0.5);
    color: rgba(var(--text-color3, 200, 200, 200), 1);
    border: 1px solid rgba(255, 255, 255, 1);
}

/* 分页动画 by Croquembouche */

#page-content .yui-navset .yui-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
            flex-direction: column;
    position: relative;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
         transform-origin: 0 0;
}

#page-content .yui-navset .yui-content>div {
    display: block;
    top: 0;
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
         transform-origin: 0 0;
}

#page-content .yui-navset .yui-content>div>* {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
         transform-origin: 0 0;
}

#page-content .yui-navset .yui-content>div[style*="none"] {
    display: block !important;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    -webkit-flex: 0;
       -moz-box-flex: 0;
            flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    -webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    -o-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    -webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    -moz-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -moz-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -moz-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -ms-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -ms-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    -webkit-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
    -moz-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
      -o-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
         animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}

#page-content .yui-navset .yui-content>div[style*="block"] {
    display: block !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
            flex: 1;
    max-height: 9999rem;
    -webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    -o-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    -webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    -moz-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -moz-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -moz-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -ms-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -ms-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    -webkit-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
    -moz-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
      -o-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
         animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}

@-webkit-keyframes tab-disappear {
    0% {
        max-height: 9999rem;
    }
    1% {
        max-height: 100vh;
    }
    100% {
        max-height: 0;
    }
}

@-moz-keyframes tab-disappear {
    0% {
        max-height: 9999rem;
    }
    1% {
        max-height: 100vh;
    }
    100% {
        max-height: 0;
    }
}

@-o-keyframes tab-disappear {
    0% {
        max-height: 9999rem;
    }
    1% {
        max-height: 100vh;
    }
    100% {
        max-height: 0;
    }
}

@keyframes tab-disappear {
    0% {
        max-height: 9999rem;
    }
    1% {
        max-height: 100vh;
    }
    100% {
        max-height: 0;
    }
}

@-webkit-keyframes tab-appear {
    0% {
        max-height: 0;
    }
    99% {
        max-height: 100vh;
    }
    100% {
        max-height: 9999rem;
    }
}

@-moz-keyframes tab-appear {
    0% {
        max-height: 0;
    }
    99% {
        max-height: 100vh;
    }
    100% {
        max-height: 9999rem;
    }
}

@-o-keyframes tab-appear {
    0% {
        max-height: 0;
    }
    99% {
        max-height: 100vh;
    }
    100% {
        max-height: 9999rem;
    }
}

@keyframes tab-appear {
    0% {
        max-height: 0;
    }
    99% {
        max-height: 100vh;
    }
    100% {
        max-height: 9999rem;
    }
}

/*
 * 杂项修改
 */

#odialog-hovertips .hovertip {
    background-color: rgba(0, 0, 0, 0.75) !important;
    color: #c7d5e0;
}

#odialog-container .owindow {
    background-color: #1b2838;
    border: 2px solid #4d4d4d;
}

#odialog-container .owindow .title,
#action-area #lock-info {
    background-color: rgba(0, 0, 0, 0.3);
}

#page-content input.text,
#action-area #edit-page-textarea,
#action-area #edit-page-comments,
#action-area #edit-page-title,
#action-area #page-tags-input,
#action-area #upload-userfile,
#action-area #upload-dfilename,
#action-area #file-comments,
#action-area #parent-page-name,
#action-area #move-new-page-name,
#action-area input.text {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #000;
    border-right-color: #354357;
    border-bottom-color: #354357;
    padding: 4px 6px;
    color: #BFBFBF;
}

#action-area #edit-page-comments {
    width: 95%;
}

#action-area .action-area-close:hover {
    background: none;
}

#action-area .change-textarea-size a {
    display: none;
}

#history-subarea .inline-diff ins,
#history-subarea .inline-diff del {
    color: rgba(var(--text-color4, 90, 90, 90), 1);
}

*:focus-visible {
    outline: none;
}

*::-webkit-scrollbar-thumb {
    background: rgba(var(--text-color, 150, 150, 150), 1);
}

*::-webkit-scrollbar-track {
    background: #0a0f14;
}

/*
 * 移动版调整
 */

@media (max-width: 950px) {
    #top-bar {
        top: 75px;
        left: 55px;
    }
    #search-top-box {
        top: 50px;
    }
}

@media (max-width: 767px) {
    #top-bar {
        width: 29em;
    }
    #side-bar {
        background-color: rgba(0, 0, 0, 0.7);
    }
    #page-content .sidebarButton a {
        display: block;
        position: fixed;
        z-index: 10;
    }
    #page-content .guideContainer .guideSidebar {
        display: block;
        position: fixed;
        top: 0;
        right: -50em;
        height: 100%;
        max-width: 50%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0, 0, 0, 0.1);
        -webkit-transition: left 0.4s ease-in-out;
        -o-transition: left 0.4s ease-in-out;
        -moz-transition: left 0.4s ease-in-out;
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
        background-color: rgba(0, 0, 0, 0.7);
        -webkit-transition: right 0.5s ease-in-out 0.1s;
        -o-transition: right 0.5s ease-in-out 0.1s;
        -moz-transition: right 0.5s ease-in-out 0.1s;
        transition: right 0.5s ease-in-out 0.1s;
        direction: rtl;
    }
    #page-content .guideSidebar .sidebarPanel {
        background: #24384d;
        direction: ltr;
    }
    #page-content .guideSidebar:target {
        display: block;
        right: 0;
        margin: 0;
        border: 1px solid #dedede;
        z-index: 10;
    }
    #page-content .guideContainer .guideContent {
        max-width: 100%;
    }
    #page-content .guideSidebar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3) 1px 1px repeat;
        z-index: -1;
    }
    #login-status {
        right: 35px;
    }
}

@media (max-width: 479px) {
    #top-bar {
        left: 0;
    }
    #header {
        -webkit-background-size: 35px 35px;
           -moz-background-size: 35px 35px;
             -o-background-size: 35px 35px;
                background-size: 35px 35px;
        background-position: 30px 35px;
    }
    #header h1 a {
        padding: 32px 0 20px 0
    }
    #header h1 a span::before {
        font-size: 18px;
    }
    #header h2 span::before {
        font-size: 12px;
    }
}

@media (max-width: 425px) {
    #top-bar {
        width: 25em;
    }
    #top-bar li a {
        padding: 1px 0.5em;
    }
}
原创版式
页面版本：⁨0⁩, 最后编辑于: ⁨2022/3/9 16:00:09⁩ (⁨⁨1652⁩ 日前⁩), 现时评分: 99
历史附件 + 选项