网站的版式（灰白）

此页面是钻梦博客的组件页，用于在其它页面引用。若你不是工作人员/组件作者，请勿修改此页内容。

/* Silent Silver Patch Produced by the Silent Silver fixed-width variation by Katherine Cdfg */
 
:root {
  --accentColor: #EDEDED;
  --main-color1: gainsboro;
  --main-color2: gray;
  --shadow-level1: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
  --shadow-level1-5: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)!important;
  --shadow-level2: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
}
 
 td {
     float: left;
}
 html,body {
     min-height: 101%;
         font-family: system-ui !important;
}
 
/* 选择 */
::selection {
    background: #EDEDED;
    color: #ffffff;
}
 
 a {
     text-decoration: none;
}
.pages-tag-cloud-box a {
    color: var(--main-color2)!important;
}
 a:hover {
     background-color: transparent;
     text-decoration: underline;
}
 #container-wrap {
}
 #container {
     width: 950px;
     margin: 0 auto;
     position: relative;
}
 @media only screen and (max-device-width: 480px) {
     #container {
         width: 100%;
    }
}
 #header {
     height: 118px;
     padding-right: 8px;
     background: url(/local--files/green-fresh/shadow-right.png) no-repeat right 89px;
}
 #header h1 {
     float: left;
     padding: 43px 0 0 5px;
}
 #header h1 span {
     padding-right: 7px;
}
 #header h1 a {
     font-family: "Bitstream Charter", "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
     font-size: 25px;
     font-style: normal;
     font-weight: bold;
     letter-spacing: 1px;
     line-height: 26px;
}
#header h1 a:hover {
   text-decoration: none;
}
 
#header h1 a:hover:before {
    opacity: 0.7;
}
 
#header h1 a:hover:after {
    opacity: 0.7;
}
#header h1 a:after {
    content: "闲人的地方";
    opacity: 0;
    font-size: 50%;
}
 
 #header h2 {
     padding: 49px 7px 0;
     font-family: "Verdana", Arial, Helvetica, sans;
     font-size: 16px;
     line-height: 20px;
     color: #fff;
}
 #header h2:before {
     content: "|";
}
 #header h2 span {
     padding-left: 7px;
     font-size: 10px;
     text-transform: uppercase;
     color: #777;
     display: block;
}
 
/* -=- OWINDOWS -=- */
 
.owindow,
.owindow h1,
.owindow .button-bar a {
    color: #000000;
    text-shadow: none;
}
 
/* This simply changed the karma bar colors in that user info pop-up menu. No functional purpose besides it looks neat, really. */
.modal-body td img[src*="userkarma.php"] {
    filter: hue-rotate(150deg);
}
 
.owindow ::selection {
    background: #cfeaff;
}
 
#top-bar {
    background: linear-gradient(to right, transparent 50%, #000 75%, transparent 100%);
    width: 100%;
    height: 29px;
    right: 0;
    left: 0;
}
 #top-bar li, #top-bar ul {
     margin: 0;
     padding: 0;
}
 #top-bar ul {
     height: 29px;
}
 #top-bar ul ul {
     margin-right: 0;
}
 #top-bar li a {
     border-right: 1px solid #fff;
     color: #fff;
     font-size: 13px;
     font-weight: bold;
     line-height: 29px;
     padding: 0 15px;
     text-decoration: none;
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 #top-bar li a:hover {
     text-decoration: none;
     background: var(--main-color1);
     color: var(--main-color2);
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 #top-bar li ul {
     border: none;
}
 #top-bar li ul li a {
     width: 18em;
     color: #fff;
}
 #top-bar li ul li a:hover {
     color: var(--main-color2);
     background: var(--main-color1);
}
 #content-wrap {
     padding-right: 8px;
     overflow: hidden;
}
 #side-bar {
     border-left: 1px solid #DDDDDD;
     float: right;
     margin-top: 10px;
     overflow: hidden;
     padding: 0 15px 0;
     width: 200px;
}
 #main-content {
     margin: 20px 0 20px 0;
     padding: 0 15px;
     min-height: 150px;
     overflow: hidden;
}
 h1, h2, h3, #page-title {
     padding: 0;
     margin: 15px 0;
}
 #page-content > *:first-child {
     margin-top: 0;
}
 #page-title {
     padding-bottom: 2px;
     border-bottom: 1px solid #eee;
     margin-top: 0;
     font-size: 180%;
}
 #login-status {
     right: 8px;
     top: 8px;
}
 #search-top-box {
     top: 50px;
}
 #search-top-box .button {
         display: none;
}
 #search-top-box input.empty {
     background-color: #EEEEEE;
     color: #999999;
}
input.text {
         transition-duration: .2s;
         border-radius: 0px!important;
         border-right: none;
         border-left: none;
         border-bottom: 1.5px solid var(--main-color2);
         border-top: none;
         outline: none;
         transition-timing-function: cubic-bezier(.4,0,.2,1);
         transition-property: border-bottom-color;
         background: none;
}
.new-page-box input.text {
    width: 66%;
}
 #search-top-box .text {
     padding: 2px 2px 2px 5px;
     width: 150px!important;
     height: 20px;
}
#search-top-box input.empty {
    background: none;
    color: #999999;
}
input.text:focus-visible {
    border-bottom: 1.5px solid lightgreen!important;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: border-bottom-color;
}
input.text:hover {
    border-bottom: 1.5px solid black;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: border-bottom-color;
}
#search-top-box-form:after {
    content: "🔍";
    opacity: 0.7;
}
 #login-status a {
     text-decoration: none;
}
 #login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
     color: #fff;
}
 #login-status #account-topbutton:hover, .change-textarea-size a:hover {
     color: #000;
}
 div.buttons input, input.button, button, file, a.button {
     border: 1px solid #DDD;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     height: 26px;
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
     background-color: #DDD;
     background-position: 0 -26px;
     border: 1px solid #DDD;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     color: #000;
     height: 26px;
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 div.page-calendar-box {
     padding: 0;
}
 
/* MODULE RATE RECOLOR */
.page-rate-widget-box .rate-points {
    background-color: #555555 !important;
    border: solid 1px #555555;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #eeeeee;
    border-top: solid 1px #555555;
    border-bottom: solid 1px #555555;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #555555;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #555555;
    color: #feffff;
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #555555;
    border: solid 1px #555555;
}
.page-rate-widget-box .cancel a {
    color: #feffff;
}
.page-rate-widget-box .cancel a:hover {
    background: #eeeeee;
    color: #feffff;
}
 
/* Info Module */
#page-content .rate-box-with-credit-button {
    background-color: #555555;
    border: solid 1px #555555;
    border-radius: 5px !important;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
#page-content .creditButton p a {
    border-left-color: #feffff;
}
 
#page-content .modalbox {
    box-shadow: 0 2px 6px rgba(102,102,102,.5);
}
 
.close-credits,
.credit-back {
    filter: grayscale(100%);
}
 
/* 滚动条 */
::-webkit-scrollbar {
  width: 9px;
  background: #eee;
}
 
::-webkit-scrollbar-track {
  background: #EDEDED;
}
 
::-webkit-scrollbar-thumb {
  background: #808080;
  border: none;
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--accentColor);
}
 
/* 引用块与代码块 */
blockquote,
div.blockquote,
.blockquote,
.code,
#toc {
    background-color: #FFF;
    border: solid 1px #808080;
    border-radius: 5px;
}
 
 #breadcrumbs {
     margin-bottom: 1em;
}
 .odate, .like-odate {
     font-size: 85%;
     font-weight: bold;
     color: #666;
     background: transparent;
     margin: 0;
     padding-top: 0;
     padding-bottom: 0;
}
 #membership-by-password-box error-block, #membership-apply-box error-block, .member .error-block {
     display: none;
}
/* Pop-up hover text over images or links, based on James Kanjo's design, improved & simplified by Pieter Hintjens */
/* Use: [[span class="hover"]]Image or link[[span]]Hover text[[/span]][[/span]] */
 .hover span {
     display: none;
}
 .hover:hover span {
     position: absolute;
     display: inline;
     margin: 20px -20px 0 0;
     height: auto;
     width: auto;
     background: #eee;
     border: 1px solid #555;
     color: #555;
     padding: 1em;
     font-size: 12px;
}
 .hover:hover span span {
     position: relative;
     margin: auto;
     height: auto;
     width: auto;
     border: none;
     padding: 0;
}
 .hover:hover {
     background-color: transparent;
     text-decoration: underline;
}
 .join-text a {
     display: inline;
     margin: 0;
     padding: 0;
     font-size: 100%;
     background: none;
     -moz-border-radius: 0px;
     -webkit-border-radius: 0px;
     text-decoration: none;
}
 .join-text a:hover {
     text-decoration: underline;
}
 .layout {
     border-collapse:collapse;
     color:#3B485F;
     width: 100%;
     table-layout:fixed;
}
 .layout tr {
     background: #FCFFDF;
     border-bottom:1px solid #EFEFEF;
}
 .layout td {
     padding-left: 1em;
}
 .layout .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .layout .header {
     height: 2em;
     background: #AFCCFF;
     border-bottom: 1px solid #9F9F9F;
     font-weight: bold;
     font-size: 13px;
}
 .layout .footer {
     background: #FCFFDF;
     border-top: 1px solid #9F9F9F;
     border-bottom: 1px solid #9F9F9F;
     font-weight: bold;
}
 
a {
     color: #7a7a7a;
}
 a:hover {
     color: #7a7a7a;
}
 a.newpage {
     color: #b4b4b4;
}
 h1, h2, h3, #page-title {
     color: #7a7a7a;
}
 #header h1 a {
     color: #7a7a7a;
}
 #top-bar ul {
     background: var(--main-color2);
         box-shadow: none;
}
 #top-bar li ul li a {
     background: #7a7a7a;
}
 #login-status a {
     color: #7a7a7a;
}
 #login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
     background: #7a7a7a;
}
 #login-status #account-topbutton:hover, .change-textarea-size a:hover {
     background: #b4b4b4;
}
 input.text, textarea {
     border-color: #7a7a7a;
     width: 100%;
}
.hover {
     color: #0a9200;
}
.hover:hover{
     color: #0a9200;
}
/* Display Black Block by Nanimono Demonai */
.bblock {
    color: #000;
    background-color: #000;
    transition: 2s;
    text-decoration: none;
}
.bblock:hover {
    background-color: #000;
    color: #060;
    text-decoration: none;
}
.dblock {
    color: #000;
    background-color: #000;
    transition: 2s;
    text-decoration: none;
}
.dblock:hover {
    background-color: transparent;
    text-decoration: none;
}
 
.limit {
    margin-bottom: -1rem;
    z-index: 5;
 
}
.anchor {
    position: sticky;
    height:0;
    top: 0;
    z-index: 5;
}
.sidebox {
    background-color: #21252E;
    color: #ffffff;
    border-top: solid 2px var(--accentColor);
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
/* Sidebox mobile optimization, courtesy of Woed */
@media (max-width: 1290px) {
   .sidebox {
        width: auto;
        max-width: 65vw!important;
        border: none;
        padding-left: 0.4rem; padding-right: 0.4rem;
        top: 0.75rem;
        right: calc(((100vw - 45.8rem)/2) * -1);
        left: initial;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        overflow: visible;
    }
    .sidebox::before, .sidebox::after {
        content: " ";
        position: absolute;
        right: 0;
    }
    .sidebox::before {
        top: calc(50% - 0.75rem);
        width: 0;
        height: 0;
        border-top: 0.75rem solid transparent;
        border-bottom: 0.75rem solid transparent;
        border-right: 0.75rem solid var(--accentColor);
        transition: border 0.1s ease-in-out 0.1s;
        z-index: 10;
    }
 
    .sidebox::after {
        top: 0;
        max-width: 0.75rem;
        width: 100%;
        height: 100%;
        box-shadow: 0.15rem 0 0 0 var(--accentColor);
        max-height: calc(100vh - 18rem);
        background-color: #21252E;
        z-index: -1;
        transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s;
    }
    .sidebox > * {
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out 0.2s;
        -o-transition: opacity 0.2s ease-in-out 0.2s;
        transition: opacity 0.2s ease-in-out 0.2s;
    }
 
    .sidebox:hover {
        overflow: visible;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 0);
        clip-path: inset(-0.125rem -0.25rem 0 0);
        -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
    }
 
    .sidebox:hover::before {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
    }
    .sidebox:hover::after {
        box-shadow: 0 -0.125rem 0 0 var(--accentColor);
        right: 0;
        max-width: 100%;
    }
    .sidebox:hover > * {
        opacity: 1;
    }
}
 
@media (max-width:768px) {
    .sidebox, .sidebox:hover {
        right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
    }
}
 
/* 选项卡样式取自极简版式http://scp-wiki-cn.wikidot.com/theme:minimal */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: transparent; /* color between tab list and content */
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: white; /* tab background */
    border-color: white;
    color: black;
    transition: 0.125s;
}
 
.yui-navset .yui-nav a em {
    background: white;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.7);
    border-color: white;
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: white; /* selected tab background */
    color: black;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: white;
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    border-color: transparent;
    box-shadow: 0px 1px 2px 0.5px rgba(0,0,0,0.5);
    background: white;
}
 
.yui-navset .yui-content {
    background: transparent; /* content background color */
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border-color: transparent; /* content border */
    border-top-color: transparent; /* different border color */
}
.yui-navset-left .yui-content {
    border-left-color: #b7a9a9; /* different border color */
}
 
/* LOGIN STUFF */
#login-status {
    color: black;
    filter: grayscale(100%) saturate(0%);
    -webkit-filter: grayscale(100%) saturate(0%);
}
#login-status a {
    color: black;
}
#login-status ul a {
    color: black;
}
#account-topbutton {
     background: #ccc;
     color: black;
}
 
/* HOVER THINGIES */
.hovertip {
     background: white !important;
}
 
/* 输入框总体 */
 input.text, textarea {
     border-radius: 5px;
}
/* 工具列 */
 #navi-bar {
     background-image: none;
     background-color: black;
     color: white;
}
 #navi-bar a.logo {
     background: white;
     border-radius: 3px;
}
 #navi-bar .share {
     display: none;
}
 #navi-bar .new-site input.empty {
     width: 60px;
}
 #navi-bar .action-buttons {
     right: 80px;
    ;
}
 #navi-bar .random-site {
     right: 10px;
     color: white;
}
 #navi-bar .close {
     display: none;
}
/* 手机 */
 #top-bar .open-menu a {
     display: none;
}
/* Mobile Media Query */
 @media (max-width: 479px) {
     #search-top-box-input {
         width: 5em;
    }
     #page-content {
         font-size: 0.9em;
    }
     #main-content {
         margin: 0;
    }
     #recent-posts-category {
         width: 100%;
    }
     #side-bar {
         width: 80%;
         position: relative;
    }
     .top-bar {
         display: none;
    }
     .mobile-top-bar {
         display: block;
         padding: 0;
    }
     .page-options-bottom a {
         padding: 0 4px;
    }
     #header h1 a {
         font-size: 100%;
    }
    blockquote, div.blockquote, div.curved {
         margin: 1em 0;
    }
     .license-area {
         font-size: 0.8em;
    }
     #header {
         background-position: 0 5.5em;
         background-size: 55px 55px;
    }
     #header h1, #header h2 {
         margin-left: 66px;
    }
     table.form td, table.form th {
         float: left;
    }
     td.name {
         width: 15em;
    }
     table.form td, table.form th {
         padding: 0;
    }
     #edit-page-title {
         max-width: 90%;
    }
     .content-panel.left-column, .content-panel.right-column {
         width: 99%;
         float: left;
    }
     #page-content div, #page-content div table {
         clear: both;
    }
     #page-content div.title {
         word-break: keep-all;
    }
}
/* Note Media Query */
 @media (min-width: 480px) and (max-width: 580px) {
     #search-top-box-input {
         width: 7em;
    }
     #main-content {
         margin: 0 2em 0 2em;
    }
     #header {
         max-width: 90%;
    }
     #side-bar {
         width: 80%;
         position: relative;
    }
     .top-bar {
         display: none;
    }
     .mobile-top-bar {
         display: block;
    }
     .page-options-bottom a {
         padding: 0 5px;
    }
     #header h1 a {
         font-size: 120%;
    }
     blockquote, div.blockquote, div.curved {
         margin: 0.5em;
    }
         .license-area {
         font-size: 0.85em;
    }
     #header {
         background-position: 0.5em 4.5em;
         background-size: 66px 66px;
    }
     #header h1, #header h2 {
         margin-left: 80px;
    }
     #page-content div.title {
         word-break: keep-all;
    }
     td.name {
         width: 15em;
    }
     .content-panel.left-column, .content-panel.right-column {
         width: 99%;
         float: left;
    }
     #page-content div, #page-content div table {
         clear: both;
    }
}
/* Mini Tablet Media Query */
 @media (min-width: 581px) and (max-width: 767px) {
     #search-top-box-input {
         width: 8em;
    }
     #side-bar {
         width: 80%;
         position: relative;
    }
     #main-content {
         margin: 0 3em 0 2em;
    }
     #header {
         max-width: 90%;
    }
     .top-bar {
         display: none;
    }
     .mobile-top-bar {
         display: block;
    }
     .page-options-bottom a {
         padding: 0 6px;
    }
     #header h1 a {
         font-size: 140%;
    }
     .license-area {
         font-size: 0.9em;
    }
         #header {
         background-position: 1em 4em;
         background-size: 77px 77px;
    }
     #header h1, #header h2 {
         margin-left: 93px;
    }
}
/* Tablet Media Query */
 @media (min-width: 768px) and (max-width: 979px) {
     #main-content {
         margin: 0 4em 0 20em;
    }
     #header, #top-bar, #side-bar {
         max-width: 100%;
    }
     .top-bar li {
         margin: 0;
    }
     #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
         width: 110px;
    }
         .page-options-bottom a {
         padding: 0 7px;
    }
     #header h1 a {
         font-size: 160%;
    }
     .license-area {
         font-size: 0.95em;
    }
     #header {
         background-position: 1em 4em;
         background-size: 88px 88px;
    }
     #header h1, #header h2 {
         margin-left: 106px;
    }
     .content-panel.left-column, .content-panel.right-column {
         width: 99%;
         float: left;
    }
     #page-content div, #page-content div table {
         clear: both;
    }
}
/* off-canvas */
 .close-menu {
     display: none;
}
 @media (max-width: 767px) {
     #top-bar li:last-of-type ul {
         right: 0;
    }
     #header {
         padding-right: 0px;
    }
     #top-bar li ul li a {
         width: auto;
    }
     #search-top-box input.empty {
         width: 100px!important;
    }.
 #search-top-box .text {
     padding: 2px 2px 2px 5px;
     width: 100px!important;
     height: 20px;
}
     #search-top-box .button {
         display: none;
    }
     #header h2 span {
         right: 60px;
         position: relative;
    }
         #header h1 a {
         position: relative;
         right: 60px;
    }
     .page-history tbody tr td:last-child {
         width: 35%;
    }
     .owindow {
         min-width: 80%;
         max-width: 99%;
    }
     .modal-body .table, .modal-body .table ~ div {
         float: left;
    }
     .owindow .button-bar {
         float: right;
    }
     .owindow div .btn-primary {
         width: 100%;
         float: left;
    }
     .owindow div .btn-primary ~ div {
         width: 100%;
    }
     .yui-navset {
         z-index: 1;
    }
     #navi-bar, #navi-bar-shadow {
         display: none;
    }
         #top-bar .open-menu a {
         position: fixed;
         top: 0.1em;
         left: 0.1em;
         z-index: 60;
         font-family: 'Nanum Gothic', san-serif;
         font-size: 35px;
         font-weight: 700;
         width: 30px;
         height: 30px;
         line-height: 0.9em;
         text-align: center;
         border: 0.1em solid #888;
         background-color: #fff;
         color: #888;
         display: block;
         opacity: 0.7;
                 box-shadow: var(--shadow-level2);
    }
     #top-bar .open-menu a:hover {
         text-decoration: none;
    }
     #main-content {
         max-width: 90%;
         margin: 0 5%;
         padding: 0;
         -webkit-transition: 0.5s ease-in-out 0.1s;
         -moz-transition: 0.5s ease-in-out 0.1s;
                 -ms-transition: 0.5s ease-in-out 0.1s;
         -o-transition: 0.5s ease-in-out 0.1s;
         transition: 0.5s ease-in-out 0.1s;
    }
    #top-bar ul {
    border-radius: 0px;
    margin: 0px;
}
     #side-bar {
                 margin: 0;
         display: block;
         position: fixed;
         top: 0;
         left: -25em;
         width: 17em;
         height: 100%;
         background-color: white;
         overflow-y: auto;
         z-index: 50;
         -webkit-transition: left 0.5s ease-in-out 0.1s;
         -moz-transition: left 0.5s ease-in-out 0.1s;
         -ms-transition: left 0.5s ease-in-out 0.1s;
         -o-transition: left 0.5s ease-in-out 0.1s;
         transition: left 0.5s ease-in-out 0.1s;
    }
         .rec-post {
         margin-right: 0em!important;
         margin-left: 0em!important;
    }
     #page-title {
         margin-top: 10px;
    }
     #side-bar:target .close-menu {
         display: block;
         position: fixed;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         opacity: 0;
         z-index: -1;
    }
     #side-bar::after {
         content: '';
         position: absolute;
         top: 0;
         width: 0;
         height: 100%;
         background-color: var(--main-color1);
         opacity: 0.8;
    }
     #side-bar:target {
         display: block;
         left: 0;
         width: 17em;
         margin: 0;
         border: 1px solid #dedede;
         z-index: 50;
                         box-shadow: 20px 0px 0px 2000px rgb(0 0 0 / 40%);
    }
     #side-bar:target + #main-content {
         left: 0;
    }
     #side-bar:target .close-menu {
         display: block;
         position: fixed;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         z-index: -1;
    }
#container {
    margin: 0px!important;
    border-radius: 0px!important;
}
}
 table.wiki-content-table td {
     border: 1px solid #888;
     width: 100%;
     padding: 0.3em 0.7em;
}
 
/* 白纸Patch */
 body {
     background: var(--main-color1);
}
 #container {
     background: white;
     margin: 10px auto;
     box-shadow: var(--shadow-level1);
}
 #top-bar ul {
     border-radius: 5px;
     margin: 5px;
}
 #header h2:before {
     display: none;
}
 #header h2 {
     display: none;
}
 #container {
     border-radius: 5px;
}
 .page-tags {
     margin: 15px 0 0 0;
}
 .page-tags span {
     background: var(--main-color1);
     padding: 2px;
     border-radius: 5px;
     border-top: 0px solid #BBB;
     font-size: 100%;
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 .page-tags span a:hover {
     background: var(--main-color2);
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 .page-tags a:hover {
     text-decoration-line: none;
     color: white;
}
 .page-options-bottom a {
     background: var(--main-color1);
     padding: 5px;
     border-radius: 5px;
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 .page-options-bottom a:hover {
     background: var(--main-color2);
     color: white;
     text-decoration-line: none;
     transition: background-color .3s cubic-bezier(.4,0,.2,1);
         box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
 .page-options-bottom {
     padding: 5px;
}
 #toc {
     border-radius: 5px;
}
 blockquote {
     border-radius: 5px;
}
 .post-container {
     background: var(--main-color1);
     margin-bottom: 5px;
     border-radius: 5px;
}
 .head {
     background: white!important;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
}
/* 首页 */
 .rec-post {
     background: var(--main-color2);
     margin: 1em;
     border-radius: 5px;
         transition: box-shadow .25s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
         box-shadow: none;
}
 .rec-post:hover {
         box-shadow: var(--shadow-level1);
         transition: box-shadow .25s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
         will-change: box-shadow;
}
 .rec-post-top {
     padding: 0.1px 0 0.1px 1em;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     background: var(--main-color1);
}
 .rec-post-top a {
     color: black;
}
 .rec-post-body {
     padding: 0 0 0 1em;
     color: white;
}
 .rec-post-body p span {
     color: white;
}
 .rec-post-body p span a {
     color: #f5deb3;
}
.pager span a {
    background: var(--main-color2);
    color: white;
    border-radius: 5px;
    transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 
.pager span a:hover {
    color: var(--main-color2);
    text-decoration-line: none;
    background: var(--main-color1);
    transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
 
.pager .current {
    border-radius: 5px;
    background-color: var(--main-color2);
    color: var(--main-color1);
    border: 2px solid #333;
}