Turbo Vision 暗色版式

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:toggle-sidebar）

Rating: +17

这是什么？

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

[[image https://scp-wiki.wdfiles.com/local--files/theme:turbo-vision-dark/spread-log.png style="width:100%;" link=#]]

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 块：

« 青色块 »» 青色块 «

[[div class="turbo-block bg-cyan-dark"]]
这是链接的样子。

[[div class="turbo-block bg-cyan-light"]]
这是链接的样子。

« 灰色块 »» 灰色块 «

[[div class="turbo-block bg-grey-dark"]]
这是链接的样子。

[[div class="turbo-block bg-grey-light"]]
这是链接的样子。

« 红色块 »» 红色块 «

[[div class="turbo-block bg-red-dark"]]
这是链接的样子。

[[div class="turbo-block bg-red-light"]]
这是链接的样子。

« 橙色块 »» 橙色块 «

[[div class="turbo-block bg-orange-dark"]]
这是链接的样子。

[[div class="turbo-block bg-orange-light"]]
这是链接的样子。

« 绿色块 »» 绿色块 «

[[div class="turbo-block bg-green-dark"]]
这是链接的样子。

[[div class="turbo-block bg-green-light"]]
这是链接的样子。

« 紫色块 »» 紫色块 «

[[div class="turbo-block bg-purple-dark"]]
这是链接的样子。

[[div class="turbo-block bg-purple-light"]]
这是链接的样子。

« 黄色块 »» 别老是说这个是“尿色块”了 «

[[div class="turbo-block bg-yellow-dark"]]
这是链接的样子。

[[div class="turbo-block bg-yellow-light"]]
这是链接的样子。

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

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

下面是示例：

基础格式标题引用块表格

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

这是粗体文本。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
粗体与斜体

源代码

» 展开源« 收起源
css
/*
    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;
}
Footnotes
  1. 1.这里有个脚注！
版式
页面版本：⁨0⁩, 最后编辑于: ⁨2023/9/7 07:35:23⁩ (⁨⁨1105⁩ 日前⁩), 现时评分: 17
历史 附件 + 选项