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; }