经典 SCP 基金会 版式

评分:

评分: +44+x

评分模块与著作信息模块:

评分: +44+x

这是什么?


这是经典 SCP 基金会版式的现代版。

修改自 Wikidot 的“Shiny 版式”,后者曾在 2008-2014 年作为 SCP 维基的主版式。

使用方法


在你的作品开头添加如下语法以应用此版式:

[[include :scp-wiki-cn:theme:classic]]

不像其他版式,这一个没有 logo。

这个版式是干什么用的?

这个版式意在模仿老旧 SCP 数据库的审美。试想一下,一个 SCiPNET 接入终端运行着 90 年代末到 2000 年中期所遗留下来的软件。

此版式适用于 SCP 项目、故事及其他页面。

示例

base_image_frame.png
经典插图方块(请看源代码)

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题
6 级标题

粗体 | 斜体 | 下划线 | 删除线 | teletype text 上标下标


标题 标题 标题 标题 标题 标题
子内容 子内容 子内容 子内容 子内容 子内容

标签内容

引用

一个链接 (一个你可能已经访问过的链接)

源代码

/* Classic SCP Foundation Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
**/
 
/* ---- PAGE WRAP ---- */
 div#container-wrap{
     background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/classic_body_bg.png);
     background-repeat: repeat-x;
}
 
/* ---- HEADERS ---- */
 span, a{
     word-break: unset;
}
 h1{
     font-size: 190%;
}
 h1, h2, h3, h4, h5, h6{
     font-family: "Trebuchet MS", "Trebuchet", "Verdana", "Arial", "Helvetica", sans-serif;
}
 #header h1,
 #header h2{
     margin-left: -.16em;
}
 #header h1{
     max-height: 105px;
     margin: 0;
}
 #header h2{
     margin: 0;
}
 
/* ---- SITE HEADER ---- */
 #header h1 a,
 #header h2 span{
     color: transparent;
     text-shadow: none;
}
 #header h1 a{
     font-family: "Trebuchet MS", "Trebuchet", "Verdana", "Arial", "Helvetica", sans-serif;
     letter-spacing: 0;
}
 #header h1 a::before,
 #header h2 span::before{
     text-shadow: none;
}
 #header h1 a::before{
     content: "SCP基金会";
     color: hsl(0, 0%, 93%);
}
 #header h2 span::before{
     content: "为行控制、收容及保护之事";
     color: hsl(353, 100%, 30%);
}
 
/* ---- TOP MENU ---- */
 #header{
     background: none;
}
 #top-bar ul li,
 #top-bar ul li ul{
     box-shadow: none;
}
 #top-bar ul li ul{
     border-color: hsl(0, 0%, 27%);
     border-style: solid;
     border-width: 0 1px 1px;
}
 #top-bar ul li a,
 #top-bar ul li.sfhover a,
 #top-bar ul li:hover a{
     border-color: hsl(0, 0%, 27%);
     border-style: solid;
     border-width: 0 0 0 1px;
}
 #top-bar ul li a::before{
     content: "[";
}
 #top-bar ul li a::after{
     content: "]";
     position: relative;
 
/* NOTE: The Top Bar Menu has spaces after each bullet, which is why this is done: */
     left: -.3em;
}
 #top-bar ul li ul li a::before{
     content: unset;
}
 #top-bar ul li ul li a::after{
     content: unset;
}
 .mobile-top-bar{
     bottom: -.5px;
}
 
/* ---- SEARCH BOX ---- */
 #search-top-box input.empty{
     color: hsl(0, 0%, 45%);
}
 #search-top-box-input{
     color: hsl(0, 0%, 5%);
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 47%);
     border-radius: 0;
     box-shadow: none;
}
 #search-top-box-input:hover,
 #search-top-box-input:focus{
     color: hsl(0, 0%, 5%);
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 47%);
     box-shadow: none;
}
 #search-top-box-form input[type="submit"]{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 96%);
     border: 1px solid hsl(0, 0%, 67%);
     border-radius: 0;
     box-shadow: none;
     font-size: 100%;
     font-weight: normal;
}
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 87%);
     border: 1px solid hsl(0, 0%, 67%);
     box-shadow: none;
}
 
/* ---- SIDE MENU ---- */
 #side-bar{
     clear: both;
     padding: .78em;
     padding-bottom: 0;
     border: 1px solid hsl(0, 0%, 87%);
     border-radius: 0;
     box-shadow: none;
}
 #side-bar .side-block{
     margin-bottom: .78em;
     background: transparent;
     border: none;
     border-radius: 0;
     box-shadow: none;
}
 #side-bar .heading{
     padding-left: 0;
     color: hsl(0, 0%, 5%);
     border-bottom: 1px solid hsl(0, 0%, 67%);
}
 #side-bar .collapsible-block-unfolded-link{
     border-bottom: 1px solid hsl(0, 0%, 67%);
}
 #side-bar .collapsible-block-unfolded-link .collapsible-block-link,
 #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover{
     margin-left: 0;
     color: hsl(0, 0%, 5%);
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: hsl(0, 0%, 28%);
}
 
/* ---- INFO PANE ---- */
.creditRate{
     margin-right: 0 !important;
     border: none !important;
}
 .rate-box-with-credit-button{
     background-color: hsl(0, 0%, 40%) !important;
     border: none !important;
     border-radius: 0 !important;
     box-shadow: none !important;
}
 .creditButton p a{
     color: hsl(0, 0%, 95%);
     border-left: none !important;
}
 .rate-box-with-credit-button .fa-info:hover{
     color: hsl(112, 100%, 77%);
}
 .modalbox{
     max-height: unset !important;
     border-radius: 0 !important;
     box-shadow: none !important;
}
 
/* ---- PAGE RATING ---- */
.page-rate-widget-box{
     margin-right: 0;
     border-radius: 0;
     box-shadow: none;
}
 .page-rate-widget-box .rate-points{
     background-color: hsl(0, 0%, 40%) !important;
     border: none;
     border-radius: 0;
}
 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown{
     background-color: hsl(0, 0%, 87%);
     border: none;
     font-weight: normal;
}
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a{
     color: hsl(0, 0%, 5%);
}
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 93%);
     text-decoration: underline;
}
 .page-rate-widget-box .cancel{
     background-color: hsl(0, 0%, 87%);
     border: none;
     border-radius: 0;
}
 .page-rate-widget-box .cancel a{
     color: hsl(0, 0%, 5%);
     text-transform: lowercase;
}
 .page-rate-widget-box .cancel a:hover{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 93%);
     text-decoration: underline;
}
 
/* ----- GENERAL ----- */
 body{
     color: hsl(0, 0%, 5%);
     word-break: unset;
}
 hr{
     height: 0;
     margin: 1em 0;
     background-color: transparent;
     border-top: 1px solid hsl(0, 0%, 67%);
}
 
/* ---- IMAGE BLOCK ---- */
 .scp-image-block.block-right{
     margin: 0 0 1em 2em;
     box-shadow: none;
}
 
/* ---- CLASSIC IMAGE BLOCK DIV ---- */
 .classic-image-block{
     float: right;
     width: 300px;
     margin: 0 0 1em 2em;
     text-align: center;
}
 
/* ---- YUI TABS ---- */
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a{
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: hsl(0, 0%, 100%);
    /* -------- */
     background-image: none;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: hsl(0, 49%, 91%);
    /* -------- */
     background-image: none;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:hover{
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: hsl(0, 70%, 35%);
    /* -------- */
     background-image: none;
}
 
/* --- INTERWIKI --- */
 iframe.scpnet-interwiki-frame{
     position: relative;
     width: 17em;
     height: 12em;
     margin-left: .313em;
     background-color: transparent;
}
 
/* ---- MOBILE MEDIA QUERIES ---- */
 @media (max-width: 479px){
      #top-bar ul li a{
          padding-left: 0.5em;
          padding-right: 0.5em;
     }
}
 @media (max-width: 767px){
       #side-bar .side-block{
          background-color: hsl(0, 0%, 100%);
     }
      #side-bar:after{
          background-color: hsla(0, 0%, 30%, .2);
     }
}
 @media (max-width: 479px),
 @media (min-width: 480px) and (max-width: 580px),
 @media (min-width: 581px) and (max-width: 767px){
      #side-bar .side-block{
          background-color: hsl(0, 0%, 100%);
     }
      #side-bar:after{
          background-color: hsla(0, 0%, 30%, .2);
     }
      #header, .mobile-top-bar{
          max-width: 95%;
     }
      .mobile-top-bar{
          left: 0;
     }
}
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License