Cocoonist的极简版式

Cocoonist的SCP基金会 极简版式页面

说明

在Cocoonist的一些作品与주간 뜨거운 감자中，所使用的 CSS 主题模板。

使用方法

请将以下代码复制到文章里：

[[include :scp-wiki-cn:theme:minimal-scp-foundation-by-cocoonist]]

外链

该版式的代码已谨传至 Userstyles.org 中。然因其处于停更状态，故 Userstyle 上的主题与基金会韩文维基的版式或将有所差别，还望多加谅解。

• 原版式：https://userstyles.org/styles/137508/minimal-scp-foundation-by-cocoonist
• CN成员修改的值：https://userstyles.org/styles/164934/minimal-scp-foundation-based-on-cocoonist

+ 显示源代码

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
 
#header,
#header h1,
#header h1 a {
    margin: 0;
    width: 100%
}
 
#header h1,
div#top-bar {
    display: block;
    max-width: 100%;
    padding: 0
}
 
div#side-bar,
div#side-bar:before {
    position: fixed;
    transition-duration: 1s
}
 
.thread-container .post .long .head .title a,
a:hover {
    text-decoration: none
}
 
@font-face {
    font-family: Lora;
    font-style: italic;
    font-weight: 400;
    src: local('Lora Italic'), local('Lora-Italic'), url(https://fonts.gstatic.com/s/lora/v12/HeAP0mHtiTx5JKQlc80wp_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}
 
@font-face {
    font-family: Lora;
    font-style: italic;
    font-weight: 400;
    src: local('Lora Italic'), local('Lora-Italic'), url(https://fonts.gstatic.com/s/lora/v12/OVZcBeQFqX1w7YhsLFAXp_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
 
@font-face {
    font-family: Lora;
    font-style: italic;
    font-weight: 400;
    src: local('Lora Italic'), local('Lora-Italic'), url(https://fonts.gstatic.com/s/lora/v12/7zlcDWwHlSl_w5azaU2j3PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
}
 
@font-face {
    font-family: Lora;
    font-style: italic;
    font-weight: 400;
    src: local('Lora Italic'), local('Lora-Italic'), url(https://fonts.gstatic.com/s/lora/v12/nRWuMjV9d7Qv7608EovOgfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
 
@font-face {
    font-family: Lora;
    font-style: italic;
    font-weight: 400;
    src: local('Lora Italic'), local('Lora-Italic'), url(https://fonts.gstatic.com/s/lora/v12/_RSiB1sBuflZfa9fxV8cOg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400;
    src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/Ukd0sOIY4JZgcODPuj2G3Q.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400;
    src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/GsNxiN0oIzsS201cnUag6w.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400;
    src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/ie2Ux11tIT0C_JTksRPlKA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400;
    src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/I0dEfRgGNE90_hXZq7bjyw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400;
    src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/4vqKRIwnQQGUQQh-PnvdMA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 700;
    src: local('Lora Bold'), local('Lora-Bold'), url(https://fonts.gstatic.com/s/lora/v12/sNXgpEOJ2Tz7WJSozSN6D_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 700;
    src: local('Lora Bold'), local('Lora-Bold'), url(https://fonts.gstatic.com/s/lora/v12/VZ-5ejr2fpt5l1RKkVxPr_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 700;
    src: local('Lora Bold'), local('Lora-Bold'), url(https://fonts.gstatic.com/s/lora/v12/gBru_9ER68jWAtTarLXr3_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 700;
    src: local('Lora Bold'), local('Lora-Bold'), url(https://fonts.gstatic.com/s/lora/v12/BYKAuswRIqh69412sen31PY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
 
@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 700;
    src: local('Lora Bold'), local('Lora-Bold'), url(https://fonts.gstatic.com/s/lora/v12/P18Nsu9EiYldSvHIj_0e5w.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
}
 
#header h1 a span,
#page-content,
#page-content *,
#page-content .yui-navset li,
#page-content a,
#page-content div,
#page-content em,
#page-content li,
#page-content p,
#page-title,
#page-title *,
*,
.thread-container .post .long .head .title,
.thread-container .post .long .head .title a,
textarea {
    text-shadow: none!important;
    font-family: Lora, 'Noto Serif SC', Georgia, Garamond, Times, JejuMyeongjo, KopubBatang, 'Kopub Batang', nanummyeongjo, 'Nanum Myeongjo', Batang, Gungseo,  kaiti,  serif;
    box-shadow: none!important
}
 
div#container-wrap {
    background: #f0f0f0
}
 
a {
    color: #903000
}
 
a:hover {
    color: #B06030
}
 
#header h2,
div#navi-bar,
div#navi-bar-shadow {
    display: none
}
 
#header {
    max-width: 100vw;
    padding: 0;
    position: relative;
    background: #fff
}
 
#header h1 a span,
#top-bar ul>li.sfhover>a,
#top-bar ul>li:hover>a {
    color: #333
}
 
#header h1 {
    height: 72pt;
    text-align: center;
    overflow: hidden
}
 
#header h1 a {
    padding: 0;
    line-height: 72pt;
    font-size: 18pt
}
 
#header h1 a span:hover {
    color: #666
}
 
#search-top-box-input {
    border-color: #999;
    color: transparent;
    background: #fff
}
 
#search-top-box-input:focus,
#search-top-box-input:hover {
    border-color: #999;
    color: #333;
    background: #ffe
}
 
#search-top-box-form input[type=submit] {
    background: 0 0;
    color: #333
}
 
#search-top-box-form input[type=submit]:focus,
#search-top-box-form input[type=submit]:hover {
    background: #666;
    color: #fff
}
 
div#top-bar {
    top: 72pt;
    position: absolute;
    left: 0;
    right: 0;
    width: 21cm;
    background: 0 0;
    margin: 0 auto
}
 
#top-bar a {
    color: #333!important;
    background: 0 0!important;
    border: none!important
}
 
#top-bar ul {
    width: 21cm;
    max-width: 100vw;
    text-align: center;
    border: none;
    z-index: 51
}
 
#top-bar ul>li {
    display: inline-block;
    float: none;
    border: none
}
 
#top-bar ul>li>a {
    color: #333;
    border: none
}
 
#top-bar ul li ul {
    background: #fff;
    overflow: hidden;
    width: 10em
}
 
#top-bar ul li ul li {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #eee;
    text-align: left
}
 
#top-bar ul li ul li.sfhover,
#top-bar ul li ul li:hover {
    background: #666
}
 
#top-bar * ul li ul li a,
#top-bar ul li ul li a {
    color: #333;
    background: 0 0;
    display: inline;
    border: none
}
 
#top-bar ul li ul li:hover a {
    color: #eee;
    background: 0 0
}
 
.open-menu {
    display: none
}
 
div#side-bar {
    left: 0;
    margin-left: -20em;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
    background: #333;
    width: 17em;
    display: block!important;
    color: #eee;
    z-index: 10
}
 
#side-bar .menu-item img,
#side-bar .sub-text,
#side-bar>hr,
.feature-block .panel-body>p,
.info-subtitle,
.international-description,
.international-footer,
.international-title :not(a) {
    display: none
}
 
div#side-bar:before {
    height: 90px;
    width: 90px;
    border: 1px solid rgba(3, 3, 3, .5);
    content: '>';
    font-size: 20px;
    text-align: center;
    text-indent: 33px;
    line-height: 90px;
    top: 50%;
    margin-top: -45px;
    left: -45px;
    color: rgba(3, 3, 3, .5);
    border-radius: 45px
}
 
div#side-bar:hover {
    position: fixed;
    margin-left: 0;
    left: 0!important
}
 
div#side-bar:hover:before {
    transition-delay: 1s;
    background: #333;
    color: #eee;
    border-color: #eee;
    margin-left: -900px
}
 
#side-bar .side-block {
    border-radius: unset;
    border: none;
    background: #333!important;
    margin: 0
}
 
#side-bar .collapsible-block-unfolded-link,
#side-bar .heading {
    color: #fff;
    font-weight: 700;
    font-size: 11pt;
    border-bottom: 1px solid #eee;
    text-align: center;
    margin: 1.5em 0 0;
    padding: 0
}
 
#side-bar .collapsible-block-unfolded-link a.collapsible-block-link {
    color: #fff;
    font-weight: 700;
    font-size: 11pt
}
 
#side-bar .menu-item {
    border-bottom: 1px solid #666;
    line-height: 2em
}
 
#side-bar a {
    color: #eee
}
 
div#main-content {
    margin: 0 auto!important;
    width: 545px;
    max-width: 100%;
    background: #fff;
    padding: 20px;
    text-align: justify
}
 
@media screen and (max-width:737px) {
    div#main-content {
     padding: 0 10px!important;
     box-sizing: border-box
    }
}
 
#page-title,
#page-title * {
    font-size: 20pt;
    font-weight: 700
}
 
#page-title {
    border: none;
    color: #333;
    margin-bottom: 2em;
    text-align: center
}
 
.page-rate-widget-box {
    background: 0 0;
    padding: 0;
    display: none
}
 
.page-rate-widget-box .rate-points {
    background-color: transparent!important;
    color: #666;
    border: 3px solid #eee;
    border-right: 1px solid #eee;
    font-weight: 400
}
 
.page-rate-widget-box .ratedown a,
.page-rate-widget-box span.rateup a {
    color: #333
}
 
.page-rate-widget-box span.ratedown,
.page-rate-widget-box span.rateup {
    background-color: transparent;
    border-top: 3px solid #eee;
    border-bottom: 3px solid #eee
}
 
.page-rate-widget-box span.cancel {
    border: 3px solid #eee;
    border-left: 1px solid #eee;
    background: 0 0
}
 
.page-rate-widget-box .cancel a {
    color: #666
}
 
#page-content,
#page-content .yui-navset li,
#page-content em,
#page-content li,
#page-content p,
textarea {
    line-height: 1.8em;
    letter-spacing: -.015em;
    font-size: 11pt;
    font-weight: 400;
    color: #333
}
 
#page-content .content-panel .panel-heading p,
#page-content b,
#page-content strong {
    font-weight: 700
}
 
#page-content hr {
    padding: 0;
    border: none;
    color: #333;
    text-align: center
}
 
#page-content blockquote {
    background: 0 0
}
 
.international-entry,
.international-entry:nth-child(2n) {
    border: none;
    width: unset;
    background: 0 0
}
 
.international-title {
    width: unset
}
 
.content-panel {
    border: 3px solid #eee;
    border-radius: unset;
    background: 0 0
}
 
.content-panel .panel-heading {
    background: 0 0;
    color: #333;
    text-align: center
}
 
.content-panel .panel-body {
    background: 0 0;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee
}
 
.content-panel .panel-footer {
    background: 0 0;
    color: #999
}
 
.content-panel .panel-footer a {
    color: #999
}
 
div.yui-navset ul.yui-nav,
div.yui-navset-top ul.yui-nav {
    border: none;
    opacity: .5;
    transition-duration: 1s;
    background: #fff
}
 
div.yui-navset ul.yui-nav:hover,
div.yui-navset-top ul.yui-nav:hover {
    opacity: 1
}
 
div.yui-navset ul.yui-nav li,
div.yui-navset-top ul.yui-nav li {
    display: inline-block;
    border: solid #ddd;
    border-width: 0 0 1px;
    list-style: circle;
    transition-duration: .3s;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}
 
div.yui-navset ul.yui-nav li a em,
div.yui-navset ul.yui-nav li:last-child,
div.yui-navset-top ul.yui-nav li a em,
div.yui-navset-top ul.yui-nav li:last-child {
    border: none
}
 
div.yui-navset ul.yui-nav li.selected,
div.yui-navset-top ul.yui-nav li.selected div.yui-navset ul.yui-nav li.selected:hover,
div.yui-navset-top ul.yui-nav li.selected:hover {
    background: #666
}
 
div.yui-navset ul.yui-nav li:hover,
div.yui-navset-top ul.yui-nav li:hover {
    background: #eee;
    color: #fff
}
 
div.yui-navset ul.yui-nav li a,
div.yui-navset-top ul.yui-nav li a {
    display: inline;
    border: none;
    background: 0 0;
    color: #333;
    max-width: 100%
}
 
.thread-container .post .long .head .title,
.thread-container .post .long .head .title a {
    color: #666;
    font-weight: 700
}
 
.thread-container .post {
    background: 0 0;
    padding: .5em 0;
    border-bottom: 1px dotted #999
}
 
.thread-container .post .head {
    box-shadow: none;
    background: 0 0;
    padding: .5em 2em .25em
}
 
.thread-container .post .long .head .title {
    font-size: 12pt
}
 
.thread-container .post .long .head .title a:hover {
    color: #901
}
 
.thread-container .post .long .head .title a:empty:before {
    content: 'Non-titled Post';
    color: #666
}
 
.thread-container .post .long .head .info {
    text-align: right;
    color: #666
}
 
.thread-container .post .long .head .info .printuser a {
    color: #666
}
 
.thread-container .post .long .head .info .printuser img {
    display: none
}
 
.thread-container .post .long .head .info * {
    color: #999
}
 
.thread-container .post .long .content {
    padding: .25em 2em .5em
}
 
.forum-group div.head {
    font-size: 9pt
}
 
.forum-category-box table tr.head td,
.forum-group table tr.head td {
    font-size: 7pt
}
 
.forum-category-box table tr td .printuser img.small,
.forum-group table tr td .printuser img.small {
    background-image: none!important;
    width: 8pt;
    height: 8pt;
    margin: 0;
    padding: 0 3px
}
 
.forum-group table tr td,
.forum-group table tr td * {
    font-size: 9pt;
    line-height: 1.6;
    word-break: break-all
}
 
.forum-category-box table tr td,
.forum-category-box table tr td *,
.forum-group table tr td.last,
.forum-group table tr td.last * {
    font-size: 6pt;
    line-height: 1.4;
    word-break: break-all;
}
 
.forum-category-box table tr td.name,
.forum-group table tr td.name {
    width: 50%;
}
 
.forum-category-box table tr td.name,
.forum-category-box table tr td.name * {
    font-size: 8pt;
}
 
div#footer {
    display: none!important;
}