Turbo Vision 暗色版式

这是什么？

Turbo Vision 暗色版式是一个基于 Turbo Vision 版式之上建造的暗色版式（不会吧！），给这个版式赋予了更加平整优美又有点“升级过”了的外观。你可以在任何文章中使用这个版式……但是最好还是用在那些涉及到在现代社会中出现复古风潮的文章之中。或者是你感觉比起 Turbo Vision 来说更喜欢这个版式的时候。

SCP 基金会 / 基金会媒体部门备用标志

引入版式

若需在页面中使用该版式，请引用以下代码：

[[include :scp-wiki-cn:theme:turbo-vision-dark]]

这个版式内置了切换侧边栏以及 Turbo Vision，所以无需再次引用这两个页面。也就是说，再也没有像原版 Turbo Vision 版式那样会有版式自身/“版式模式”以及彩色 div 块/“组件模式”的区别了（因此也没有黑标兼容了）。要不全有，要不全没有，抱歉了。

更新了什么？

除了比较明显的地方，比如标志、字体修改以及背景颜色之外，Turbo 暗色也包含有彩色 div 块的新版暗色与亮色变体。标准的彩色 div 块是没有变的，如果你更喜欢用那些 div 块的话。现在只用给你选好的彩色 div 块的名字后面加上 “-dark” 或者 “-light” 就好了（比如 bg-cyan-dark 或者是 bg-red-light）。

暗色变体意味着为了阅读无障碍，你需要使用白色的边框与文字。

亮色变体意味着为了阅读无障碍，你需要使用黑色的边框与文字。

下面可以预览新的 div 块：

引用块、表格以及 Tab /分页也有了一些变化。

标准的分页和表格获得了 Jost 字体（主页面也是如此）。引用块用了跟彩色 div 块一样的字体——Hermit——以及表格的表头用了顶栏字体，Terminus。它们的投射阴影也有被分别改动，使得其与周边页面比较不会太暗/太亮，而这三种东西的背景颜色也被统一修改成跟灰色亮色 div 块一样的颜色。

下面是示例：

可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。¹

这是粗体文本。This is bolded text.

这是斜体文本。This is italicized text.

这是等宽文本。This is monospaced text.

表格	表头单元格
普通单元格	另一个普通单元格
合并单元格

添加的字体

JOST

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW
黑色石英制成的斯芬克斯像，请审判我的誓言

bolded and italicized
BOLDED AND ITALICIZED
粗体与斜体

HERMIT

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW
黑色石英制成的斯芬克斯像，请审判我的誓言

bolded and italicized
BOLDED AND ITALICIZED
粗体与斜体

TERMINUS（@21px）

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW
黑色石英制成的斯芬克斯像，请审判我的誓言

bolded and italicized
BOLDED AND ITALICIZED
粗体与斜体

MICHROMA

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW
黑色石英制成的斯芬克斯像，请审判我的誓言

bolded and italicized
BOLDED AND ITALICIZED
粗体与斜体

源代码

» 展开源

« 收起源

/*
    Turbo Vision Dark Theme
    [2022 Wikidot Theme Variation]
    By JackalRelated
       Based on Turbo Vision Theme by JakdragonX and Croquembouche
*/
 
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://scp-wiki.wdfiles.com/local--files/theme:turbo-vision-dark/stylesheet.css');
 
/* LINK COLORS ADJUSTMENT */
a {
  color: #0B9D85;
}
 
a.footnoteref {
  color: #073C34;
}
 
a:hover{
  background-color: #18BFA3;
}
 
a:visited {
    color: #00B39B;
}
 
a:visited:hover {
    color: #000000;
}
 
/* BODY SHENANIGANRY(!) */
body {
  font-family: "Jost", "IBM Plex Mono", "Noto Sans SC", sans-serif;
  background-color: #01020D;
  image-rendering: initial;
}
 
.scp-image-block .scp-image-caption {
   background-color: #ADADAD;
   color: #000000;
}
 
hr {
  margin: 1em 0em 1em 0em;
}
 
#page-title {
  border-color: #18BFA3;
}
 
#main-content {
  color: #EDEDED;
}
 
h1,
h2,
h3,
h4,
h5,
h6,
#page-title {
  font-family: "Michroma", "Mx437 IBM VGA 8x16", "Noto Sans SC", monospace;
  color: #18BFA3;
}
 
h1,
#page-title {
  font-weight: bold;
}
 
/* HEADER (I HARDLY KNOW HER) */
div#container-wrap {
  background: url("https://scp-wiki.wdfiles.com/local--files/theme:turbo-vision-dark/tb-bga.png")
    top left repeat-x;
}
 
div#header {
  background: url("https://scp-wiki.wdfiles.com/local--files/theme:turbo-vision-dark/logo-new.png")
      3.675em 1.25em no-repeat;
  background-size: auto 100px;
}
 
#account-options {
  background-color: #000000;
}
 
#login-status ul a {
  color: #BCBCBC;
}
 
#login-status ul a::first-letter {
  color: #038A74;
}
 
#login-status ul li a:hover {
  background-color: #0B9D85 !important;
  color: #000000;
  font-style: oblique;
}
 
#login-status ul li a:hover::first-letter {
  color: #004037;
}
 
#login-status {
  border: 2px solid #EDEDED;
  padding: 0.5ex 1ex 0.5ex 1ex;
  color: #EDEDED;
  background: #001133;
}
 
#login-status a {
  background: transparent;
  color: #0B9D85;
}
 
#login-status a:hover {
  background: #038A74 !important;
  color: #EDEDED;
}
 
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus {
  border: #EDEDED solid 2px;
  background: #001133;
  color: #EDEDED;
}
 
#search-top-box input.empty {
  color: #001133;
}
 
/* SIDE BAR - SERVING MOSCOW MULES */
#side-bar .side-block,
#interwiki .side-block {
  box-shadow: 0.5em 0.85em 0 0 #1E1E24;
}
 
#side-bar .side-block.media {
  background: #001133;
}
 
#side-bar div.menu-item a,
#side-bar .collapsible-block-link,
#interwiki div.menu-item a,
#interwiki .collapsible-block-link {
  color: #18BFA3;
}
 
#side-bar div.menu-item a:hover,
#side-bar .collapsible-block-link:hover,
#interwiki div.menu-item a:hover,
#interwiki .collapsible-block-link:hover {
  padding: 0 0.5rem 0 0.5rem;
  font-style: oblique;
  color: #000000;
}
 
#side-bar .side-block,
#side-bar .side-block .heading p,
#interwiki .side-block,
#interwiki .side-block .heading p {
  background-color: #000000;
  color: #EDEDED;
}
 
#side-bar .side-block.resources,
#side-bar .side-block.resources .heading p {
  background-color: #001133;
}
 
#side-bar {
  background-color: #01020D;
}
 
#side-bar .menu-item,
#interwiki .menu-item {
  color: #18BFA3;
}
 
/* TOP BAR STOOL*/
#top-bar ul li a {
  font-family: "Terminus" ,"Mx437 IBM VGA 8x16", "Noto Sans SC", monospace;
  padding: 0 1ex 0 1ex;
  color: #B3B3B3;
}
 
#top-bar ul li a:hover,
#top-bar ul li:hover a {
  padding: 0 1.5ex 0 1.5ex;
  background-color: #18BFA3 !important;
  color: #000000;
}
 
#top-bar ul li a:hover::first-letter,
#top-bar ul li:hover a::first-letter {
  color: #004037;
}
 
#top-bar ul li a:hover::before,
#top-bar ul li a:hover::after {
  background-color: #00D6AF;
  color: #B3B3B3;
}
 
#top-bar ul li a:visited:hover {
  color: #000000 !important;
}
 
#top-bar ul li a::first-letter {
  color: #0B9D85;
}
 
#top-bar .open-menu a {
  border: 2px solid #EDEDED;
  border-radius: 0;
  background-color: #00021B;
  color: #B3B3B3 !important;
}
 
#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
  background-color: #000000 !important;
  color: #B3B3B3;
  padding-left: 1ex;
}
 
#top-bar ul li a:visited,
#top-bar ul li.sfhover ul li a:visited,
#top-bar ul li.sfhover ul li a:visited,
#top-bar ul li.sfhover ul li a:visited:hover,
#top-bar ul li:hover ul li a:visited:hover {
  color: #B3B3B3 !important;
}
 
#top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover {
  font-style: oblique !important;
}
 
#top-bar ul li.sfhover ul li a::first-letter, #top-bar ul li:hover ul li a::first-letter {
  color: #0B9D85;
}
 
/* YUI TABS, A LOT OF TABS */
div.yui-navset div.yui-content {
  box-shadow: 0.5em 1em 0 0 #1E1E24;
}
 
div.yui-navset div.yui-content blockquote,
div.yui-navset div.yui-content div.blockquote {
  box-shadow: 0.5em 1em 0 0 #282834;
  font-family: "Hermit", "Jost", "Noto Sans SC", sans-serif;
}
 
div.yui-navset div.yui-content h1 {
  color: #073C34;
  font-weight: bold;
}
 
div.yui-navset div.yui-content h2,
div.yui-navset div.yui-content h3,
div.yui-navset div.yui-content h4,
div.yui-navset div.yui-content h5,
div.yui-navset div.yui-content h6 {
  color: #000000;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
  font-family: "Terminus", "Mx437 IBM VGA 8x16", "Noto Sans SC", monospace;
}
 
div.yui-navset ul.yui-nav a,
div.yui-navset div.yui-navset-top ul.yui-nav a {
  background: #ADADAD;
  border: #444444 solid 2px;
  border-bottom: transparent 0;
}
 
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav a:focus {
  background: #09E381;
  border: #EDEDED solid 2px;
  border-bottom: transparent 0;
}
 
div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:focus,
div.yui-navset ul.yui-nav .selected a:hover {
  background: #00005E;
  border: #444444 solid 2px;
  color: #EDEDED;
  border-bottom: transparent 0;
}
 
div.yui-navset div.yui-content hr,
blockquote hr,
div.blockquote hr{
  background-color: #073C34;
  margin: 2em 0 2em 0;
}
 
table.wiki-content-table {
  box-shadow: 0.5em 1em 0 0 #3E3E51;
}
 
table.wiki-content-table td {
  border: 1px solid #000000;
}
 
/* RATING MODULE */
 
#page-content .page-rate-widget-box {
  font-family: "Terminus", "Mx437 IBM VGA 8x16", "Noto Sans SC", monospace;
  background-color: #01020D;
}
 
div.page-rate-widget-box .rate-points {
  background-color: #01020D;
  border: 2px solid #01020D;
  color: #B3B3B3;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
  background-color: #B3B3B3;
  border: 2px solid #01020D;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
  color: #01020D;
  font-family: "Mx437 IBM VGA 8x16", monospace;
  font-weight: 400;
}
 
.page-rate-widget-box .rateup a:hover {
  color: #1A9400;
}
 
.page-rate-widget-box .ratedown a:hover {
  color: #D60000;
}
 
.page-rate-widget-box .cancel {
  border: 2px dashed #01020D;
  background-color: #01020D;
}
 
.page-rate-widget-box .cancel a {
  color: #B3B3B3;
}
 
.page-rate-widget-box .cancel a:hover {
  background-color: transparent;
  color: #D60000;
}
 
/* EDIT MODULE EOU */
#lock-info {
  color: #000000;
}
 
/* BOTTOM SHIT YOU PROLLY WOULDN'T HAVE NOTICED */
#license-area {
  color: #828282;
}
 
.hovertip {
  background-color: #01020D !important;
  color: #EDEDED !important;
  border: solid 1px #EDEDED !important;
}
 
.footnotes-footer {
  background-color: #ADADAD;
  color: #000000;
  padding: 0.4rem 0.15rem 0.5rem 0.4rem;
  border-left: 1rem solid #073C34;
}
 
.footnotes-footer a {
  color: #073C34;
}
 
.footnotes-footer a:hover {
  background-color: #127354;
  color: #ADADAD;
}
 
.footnotes-footer .title {
  margin: 0 0 0.5em 0;
  font-family: "Michroma", "Noto Sans SC", sans-serif;
  color: #073C34;
}
 
.page-tags a:hover {
  padding: 0 1ex 0 1ex;
}
 
/* FIXING MOBILE SHIT */
 
@media (max-width: 767px) {
  #top-bar ul li {
    height: 1.45em;
    font-size: 85%;
  }
 
  #top-bar ul li ul li {
    height: 1.25em;
    font-size: 1rem;
    padding: 0 0 1ex 0;
    background-color: #000000;
  }
}
 
/* CUSTOM COLORS DIVS :) */
:root {
  --turbo-block-shadow: 0.5em 1em 0 0 #1E1E24;
}
 
.turbo-block {
  font-family: "Hermit", "Noto Sans SC", sans-serif;
}
 
.turbo-block a:hover {
  font-weight: bold;
}
 
.turbo-block.bg-cyan-dark,
.turbo-block.bg-cyan-dark::after,
.turbo-block.bg-cyan-dark .heading p {
  background: #176E6D;
}
 
.turbo-block.bg-cyan-light,
.turbo-block.bg-cyan-light::after,
.turbo-block.bg-cyan-light .heading p {
  background: #209795;
}
 
.turbo-block.bg-cyan-dark a {
  color: #176E6D;
}
 
.turbo-block.bg-cyan-light a {
  color: #209795;
}
 
.turbo-block.bg-cyan-dark a:hover {
  background-color: #09E381;
}
 
.turbo-block.bg-cyan-light a:hover {
  background-color: #00FC61;
}
 
.turbo-block.bg-grey-dark,
.turbo-block.bg-grey-dark::after,
.turbo-block.bg-grey-dark .heading p {
  background: #6E6E6E;
}
 
.turbo-block.bg-grey-light,
.turbo-block.bg-grey-light::after,
.turbo-block.bg-grey-light .heading p {
  background: #ADADAD;
}
 
.turbo-block.bg-grey-dark a {
  color: #6E6E6E;
}
 
.turbo-block.bg-grey-light a {
  color: #ADADAD;
}
 
.turbo-block.bg-grey-dark a:hover {
  background-color: #09E381;
}
 
.turbo-block.bg-grey-light a:hover {
  background-color: #127354;
}
 
.turbo-block.bg-red-dark,
.turbo-block.bg-red-dark::after,
.turbo-block.bg-red-dark .heading p {
  background: #A80000;
}
 
.turbo-block.bg-red-light,
.turbo-block.bg-red-light::after,
.turbo-block.bg-red-light .heading p {
  background: #E62842;
}
 
.turbo-block.bg-red-dark a {
  color: #A80000;
}
 
.turbo-block.bg-red-light a {
  color: #E62842;
}
 
.turbo-block.bg-red-dark a:hover {
  background-color: #F7980A;
}
 
.turbo-block.bg-red-light a:hover {
  background-color: #520000;
}
 
.turbo-block.bg-orange-dark,
.turbo-block.bg-orange-dark::after,
.turbo-block.bg-orange-dark .heading p {
  background: #BF540D;
}
 
.turbo-block.bg-orange-light,
.turbo-block.bg-orange-light::after,
.turbo-block.bg-orange-light .heading p {
  background: #EF801F;
}
 
.turbo-block.bg-orange-dark a {
  color: #BF540D;
}
 
.turbo-block.bg-orange-light a {
  color: #EF801F;
}
 
.turbo-block.bg-orange-dark a:hover {
  background-color: #D1BD0A;
}
 
.turbo-block.bg-orange-light a:hover {
  background-color: #8C4719;
}
 
.turbo-block.bg-green-dark,
.turbo-block.bg-green-dark::after,
.turbo-block.bg-green-dark .heading p {
  background: #0F6119;
}
 
.turbo-block.bg-green-light,
.turbo-block.bg-green-light::after,
.turbo-block.bg-green-light .heading p {
  background: #30B01C;
}
 
.turbo-block.bg-green-dark a {
  color: #0F6119;
}
 
.turbo-block.bg-green-light a {
  color: #30B01C;
}
 
.turbo-block.bg-green-dark a:hover {
  background-color: #09E381;
}
 
.turbo-block.bg-green-light a:hover {
  background-color: #28544D;
}
 
.turbo-block.bg-purple-dark,
.turbo-block.bg-purple-dark::after,
.turbo-block.bg-purple-dark .heading p {
  background: #65097B;
}
 
.turbo-block.bg-purple-light,
.turbo-block.bg-purple-light::after,
.turbo-block.bg-purple-light .heading p {
  background: #9C58C6;
}
 
.turbo-block.bg-purple-dark a {
  color: #65097B;
}
 
.turbo-block.bg-purple-light a {
  color: #9C58C6;
}
 
.turbo-block.bg-purple-dark a:hover {
  background-color: #09E381;
}
 
.turbo-block.bg-purple-light a:hover {
  background-color: #041959;
}
 
.turbo-block.bg-yellow-dark,
.turbo-block.bg-yellow-dark::after,
.turbo-block.bg-yellow-dark .heading p {
  background: #8B6E1D;
}
 
.turbo-block.bg-yellow-light,
.turbo-block.bg-yellow-light::after,
.turbo-block.bg-yellow-light .heading p {
  background: #F5DC00;
}
 
.turbo-block.bg-yellow-dark a {
  color: #8B6E1D;
}
 
.turbo-block.bg-yellow-light a {
  color: #F5DC00;
}
 
.turbo-block.bg-yellow-dark a:hover {
  background-color: #FFD43B;
}
 
.turbo-block.bg-yellow-light a:hover {
  background-color: #124F6B;
}

版式

页面版本: 1, 最后编辑于: 07 Sep 2023 07:35

编辑评分 (+8) 标签讨论 (2) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护

这是什么？

引入版式

更新了什么？

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

添加的字体

源代码

其它有趣的网站

The backrooms-Pe

Balchipedia

阈限档案云国分局

承澄之心