/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
font-family: 'Nanum Gothic', san-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
border: 0.2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
}
@media (min-width: 768px) {
#top-bar .mobile-top-bar {
display: block;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 708px;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -20em;
width: 17.75em;
height: 100%;
margin: 0;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target {
left: 0;
}
#side-bar:focus-within:not(:target) {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 19.75em;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
/* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
@supports (-moz-appearance:none) {
#top-bar .open-menu a {
pointer-events: none;
}
#side-bar:not(:target) .close-menu {
display: block;
pointer-events: none;
user-select: none;
}
/* This pseudo-element is meant to overlay the regular sidebar button
so the fixed positioning (top, left, right and/or bottom) has to match */
#side-bar .close-menu::before {
content: "";
position: fixed;
z-index: 5;
display: block;
top: 0.5em;
left: 0.5em;
border: 0.2em solid transparent;
width: 30px;
height: 30px;
font-size: 30px;
line-height: 0.9em;
pointer-events: all;
cursor: pointer;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:focus-within .close-menu::before {
pointer-events: none;
}
}
}
為了要在你的頁面中使用這個主題，請引用以下的代碼：
[[include :scp-zh-tr:theme:turbo-vision]]
這會將Turbo Vision外觀主題設置為『主題模式』。
而如果你只是想用Turbo Blocks，但卻不想要這個外觀主題的其他部分，請加上"blocks=-"：
[[include :scp-zh-tr:theme:turbo-vision blocks=-]]
這會將Turbo Vision外觀主題設置為『組件模式』。這是可以與黑色標記筆 外觀主題同時使用的。
晚點會再介紹何謂『主題模式』與『組件模式』，以確保你能搞清楚自己的頁面需要的是哪個。
Turbo Vision被設計來盡可能地重現90年代的DOS終端外觀 — 讓它看起來像是由許多ASCII字元所組成的。這就是為什麼那些邊框跟陰影看起來很老式且不對稱 — 我們要讓它們看起來像是方框繪製字元，並透過文字的顏色與個別方塊的顏色來構成整個介面的色彩。
話雖如此，但我們沒有如此熱衷地在堅守著這個指南，而我們也擴增了些創意層面上的自由度，來讓使用體驗稍微不會那麼的痛苦。
這個外觀主題預設包含有折疊側欄，以便讓你在左側的那一大塊垂直空間裡放上任何你想放的事物。而在小螢幕上的水平空間很窄，這個折疊側欄在展開時會自動突出到頁面中間 — 用手機看的讀者不會漏掉任何內容。
這個外觀主題到處都是方塊、看起來很老式，而且還很五彩繽紛。使用這個主題的頁面看起來會像是有一大堆相互堆疊的視窗同時擠在一個介面之中，這是它的其中一個特點；但它也可以不用這樣 — 這取決於你。這個頁面會告訴你該如何依你所想的來設置好這個外關主題。
下方的tabview裡面有著一些基本Wikidot格式在這個外觀主題裡的範例。
請注意，雖然引用區塊跟表格的樣式是可以在『組件模式』裡使用的，但tabview的樣式只能在『主題模式』裡使用。
一條水平線可以透過使用5個連字號「-----」來創建，並且如果它沒被包在任何東西裡面的話（例如引用塊），它會延伸並橫跨整個頁面。在這份文件中被拿來分段的就是水平線。
這是粗體。
這是斜體。
這是等寬字體。
標題可以被以在一行的開頭添加一至六個加號「+」來創建。
一級標題
二級標題
三級標題
四級標題
五級標題
六級標題
這是個引用區塊，透過用class為"blockquote"的div包裹住文字以創建。
接下來呢，帶你快速地看一下Turbo Blocks是怎麼運作的……
本頁中的以下段落看起來可能會有點可怕。然而你不應該為此而感到慌張或手足無措的 — 每一個部分都可以拆解得一清二楚。
SCP-編號
LIGMA
johnsmith12：呃，你真的知道你現在在幹什麼嗎？
me：笑死，才不呢。我只是需要為了這個狗屁主題隨便寫些東西。
SCP-編號當前尚未被收容。不論這是否可以歸因於它原因不明的寫作，又或者它只是太他媽的討人厭，當前皆無法得知。
如若有人因任何原因看見了SCP-編號（仔細想想這根本沒有多大的意義），受影響者應立即向駐點心理治療師尋求104321號療法。該療法可能將持續數個小時，並讓受影響者感到難以言喻地痛楚。因為一些完全無關的理由，沒有人想要去保健室。
SCP-編號什麼都不是。真的，什麼都不是。事實上，那就是個謊言，就像你一樣。你也是個貨真價實的謊言。不要覺得太受傷或感到沮喪，每一個人都是這樣的。在基金會裡面，我們是譴責歧視的。
足題驚高帶盡他然可的製人財斯比費就面每都無教是安內；是的把事，然有去報親相們對專賽賽市滿廣，照必火早國理？出藝來不標後能，地快氣，功好布只雨禮落他公地人他外著文也。
運對廣；居說我不語計重力大作，沒起布歡笑未構果在出，模什他人後無都關越卻更面的一意客以人了不電：五年何景另多微星得向在動：演生成動工用義語中新往突關華一平切痛沒技是在就北。票當去四投操高不麼熱別的許了史回費人國，角反不……於眼成士。家管什水，石的明黃因拿斷。
說真的，我們有哪些真實的事物是可以描述的？也許你的感知就是個謊言。一個在人與人之間說著的謊話，或許吧？當然，在你與我之間的現實不可能會是一樣的。我們都有著不同的真言與謊話。當然，我們肯定是個三維生物。我們渴求理解。儘管我們有著最好的打算，但我們仍會渴望著知識，並仍會試圖尋求知識。
你可能會覺得我只是在毫無章法的亂打，就為了想要讓這邊變得更常以加上另一個有色區塊嗎？或許吧，但先撇開這種卑微的願望不談，我只是想要讓你有時間自我省思一下。你，真的是真實的嗎？不是。就如同我先前所說的，你只是個虛假的幻象。一個你當前所生活的世界中的假象。就是這樣。
如何使用
為了要創建如同包裹住這串文字的，老土且帶有陰影的Turbo Block，請使用以下的這些class的div區塊：
- "turbo-block"
- 一個設定了背景顏色的class
- 一個設定了邊框顏色的class
- 一個設定了文字顏色的class
這個外觀主題提供了以上這些class。
"turbo-block"這個class是用來創建Turbo Block它本身的。你可以單獨使用它而不需要混用其他的class，但那看起來可能會有點怪（它將不會有背景，以下是範例）。
[[div class="turbo-block"]]
在此填入文字
[[/div]]
這個外觀主題提供了一些公用的背景顏色class，它們會寫成"bg-[顏色]"的格式。以下是所有的公用背景顏色class：
[[div class="turbo-block bg-red"]]
[[div class="turbo-block bg-grey"]]
[[div class="turbo-block bg-green"]]
[[div class="turbo-block bg-cyan"]]
[[div class="turbo-block bg-orange"]]
[[div class="turbo-block bg-yellow"]]
[[div class="turbo-block bg-purple"]]
[[div class="turbo-block bg-black"]]
[[div class="turbo-block bg-white"]]
這裡有著兩種顏色的邊框class："border-black"和"border-white"。Turbo Blocks預設不包含有邊框，所以你每個turbo-block都要幫它挑一個邊框。
請注意，用"turbo-block"所生成的每一個div，它們的邊框都是兩條線的，但引用區塊、表格以及tabview的邊框只會有一條線。
這裡有著兩種文字顏色的class："text-black"和"text-white"。它們分別讓turbo-block裡面的預設文字顏色變成黑色和白色。
每一個Turbo Block都可以有一個大標題與無數個小標題。大標題會出現在最上方 — 以這個來說就是「HEADINGS」。這可以透過在區塊的div裡面添加"data-title"屬性來實現：
[[div class="turbo-block ..." data-title="在這裡打上標題喔"]]
為了貼近原始的Turbo Vision程式，區塊標題應該要是大寫的（指英文），但這並不強制 — 你想打什麼都行。
不過呢，請試著讓標題短一點，因為如果它滿出來的話會很精采：
它的原始碼長這樣：
[[div class="turbo-block bg-grey border-black text-black" data-title="喔喔，快看看我！我是個有點長過頭的標題欸！"]]
你懂我的意思了吧？
[[/div]]
為了那些可憐的手機端讀者著想 — 讓你的標題保持簡短吧。
在Turbo Block裡面，你可以利用"heading"這個class來創建子段落的小標題 — 以下就是上面這個的代碼：
[[div class="heading"]]
小標題
[[/div]]
如果你想要條像是小標題那樣的水平線，但卻不想要文字的話，只要打上4或5個連字號所產生的水平線就好了：
↑ 就像這樣。
你可以在Turbo Block裡面填入任何東西，這也包含了圖片。為了要添加圖片，最好的方式便是做出一個Turbo Block的div，然後在裡面塞入標準的圖像塊組件。
以下是我早先在本頁裡使用過的圖片turbo-block範例：
[[div class="turbo-block bg-orange border-white text-white" data-title="圖像"]]
[[include :scp-zh-tr:component:image-block
| name=https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/scpimage.png
| caption=嗨嗨沒錯這裡是文字
]]
[[/div]]
到目前為止的這些教學，涵蓋了你該如何創建好Turbo Block。你可以在一個Turbo Block裡面放入另外一個Turbo Block，但這樣是沒辦法營造出那種，研究員的書桌上橫七豎八地堆疊著無數張紙條的雜亂感 — 為了營造出這種效果，你可以把一些區塊往左或往右錯開來。
而這可以使用偏移class來實現。Turbo Vision外觀主題提供了一些往左偏移的class：
- "offset-left"
- "left-1"
- "left-2"
- "left-3"
- "left-4"
- "left-5"
……以及向右偏移的：
- "offset-right"
- "right-1"
- "right-2"
- "right-3"
- "right-4"
- "right-5"
為了要把某個東西往左移，請用以下兩種class的div把它包起來："offset-left"，以及"left-1"到"left-5"之間選一個，而這取決於你想要我左移到哪裡。"left-1"只會移動一點點，而"left-5"則會偏移很多 — 它們都是把東西偏移到螢幕中的左半邊。
如果要把某個東西往左移，用法本質上是相同的，但要記得把"left"替換成"right"。
如果你有過編寫CSS的經驗的話，你可能會在想，運用這麼寬的橫向螢幕空間就如同於找死 — 這些偏移過的div在手機端上看起來會很恐怖。
不用害怕！在較小的螢幕比上面，這些偏移div會往頁面的中心靠近一點，而在非常小的螢幕上面則會直接關掉每一個的偏移功能。
對於作者來說，這就代表著手機端的用戶將總能看見你放進偏移div裡面的內容，但那看起來可能不會有你原先所想呈現的擁擠感。請總是在發布你的設計之前，先在手機上面測試一下，確保每個人的閱讀體驗都是一樣的。
為了要創建偏移區塊，請合併上述的兩種class，以決定偏移的方向與幅度：
[[div class="offset-left left-3"]]
[[/div]]
如果你想要偏移Turbo Block，請將它放進偏移區塊裡面（不要直接把偏移的class加進去Turbo Block裡）：
[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
嗨！
[[/div]]
[[/div]]
如果你使用著寬幅的瀏覽器（如：桌電），你會看到上述的範例出現在左邊。如果你使用著窄幅的瀏覽器（如：手機），你會看到上述的範例出現在這段文字的上方。
因為偏移方塊與Turbo Block是不同的元素，這就代表著你實際上可以偏移任何你想要的東西，只要把它放進去有著偏移class的div裡面就好了。試著偏移看看圖像turbo-block吧！
偏移區塊是透過CSS的「浮動」屬性來實現的。當一個HTML元素是浮動的時候，它底下的內容會被向上拉，用以填補它所遺留下的空間。
這有時候會有點不盡人意。也許你想要一個浮動的偏移區塊，但你又想要它底下的文字出現在那個偏移區塊沒有浮動時，那些文字應該要在的位置。這將能留下一個很大的間隔來讓你放入任何事物，如果你想這麼做的話。
這個時候，你就可以使用CSS的「清除」屬性 — 一個很常被叫做「清除浮動」的方法。Wikidot讓你打上4個波浪符（~~~~）就可以使用這個功能：
[[div class="offset-left left-3"]]
[[div class="turbo-block bg-white border-black text-black"]]
嗨！
[[/div]]
[[/div]]
~~~~
這一次在桌上型電腦上面，那些文字沒有被往上拉去填補空間，而是留下了一個大間隔。而在手機上面，這理所當然的沒有任何變化。
這裡有所有偏移組合的使用範例。
你的瀏覽器有著寬幅的螢幕（或至少CSS是這麼說的），所以試試看調整螢幕的寬度，然後看下面這些偏移區塊會發生什麼變化吧。
你的瀏覽器有著窄幅的螢幕（或至少CSS是這麼說的），這就代表你目前可能是在使用移動裝置。以下的這些偏移區塊看起來將只會是一堆無聊的置中div。等晚點換了更寬的瀏覽器過後再來看看這個頁面裡的這些偏移區塊吧。
[[div class="offset-left left-5"]]
[[div class="offset-left left-4"]]
[[div class="offset-left left-3"]]
[[div class="offset-left left-2]]
[[div class="offset-left left-1"]]
[[div class="offset-right right-1"]]
[[div class="offset-right right-2"]]
[[div class="offset-right right-3"]]
[[div class="offset-right right-4"]]
[[div class="offset-right right-5"]]
以下有幾種特殊情況是你不應該使用偏移class的。當然，你還是可以用的，但那將會對你的頁面起到反效果。
你能用哪個class取決於你側邊欄的位置，以及從你瀏覽器的視區來看，頁面內容是否是置中的。這也會根據你使用的是『主題模式』或『組件模式』而有所不同 — 請再看一次最上方的使用指引以確保你還記得它們誰是誰。
如果你使用的是Turbo Vision外觀主題的『主題模式』，那麼它會包含有折疊側欄，而它會置中頁面的內容並盡可能多的釋出水平空間。你可以毫無罣礙地使用偏移class。
如果你使用的是Turbo Vision外觀主題的『組件模式」，那它預設不包含有折疊側欄。這會限制住水平空間。
不論如何，如果你只要有用到折疊側欄，你的頁面內文就會置中。那麼你也可以隨意地使用所有的偏移class。
如果你沒有使用折疊側欄，而你的頁面內文是在你頁面的右手邊。那麼你應該要避免使用任何往右邊偏移的class，因為它們可能會超出螢幕的邊緣。而你也應該避免使用太靠近頁面開端的向左偏移class，因為它們可能會與側欄重疊。
如果你有使用黑色標記筆 外觀主題，而頁面內文是置中的，那麼你可以自由使用向右偏移的class。但是，因為側邊欄會一直占用著你整份文件的左半邊，所以你應該避免使用任何向左偏移的class。
如果你連帶著BHL一起使用了黑標切換側欄的話，它會釋出左半邊的空間，所以你也能不受限制地使用向左偏移的class。
簡而言之：若有側邊欄就避免向左偏移，若頁面內容沒有置中就避免向右偏移。
而這，就是這整個外觀主題了。
原始碼
@import url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/Mx437_IBM_VGA_8x16.css");
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
/*
Turbo Vision Theme
[2021 Wikidot Theme]
By JakdragonX
Based on SCP Sigma 9-Theme created by Aelanna and Dr Devan
Based on the original Turbo Vision Theme created by Croquembouche
The Turbo Vision theme is split into two CSS fragments.
This fragment styles user-created Turbo Blocks, and does not require
the other fragment in order to function correctly.
*/
/* BEFORE WE BEGIN, A QUICK FIX FOR UNDOING SIGMA-9 WEIRD THINGS */
@media (min-width: 768px) and (max-width: 979px) {
div,
div table {
clear: initial;
}
}
.avatar-hover {
z-index: 1;
}
/* AND NOW... */
/* ------------------------------------- */
/* NOW FOR THE MAIN COURSE */
/* VARIABLES */
:root {
--turbo-block-shadow: 0.5em 1em 0 0 #3e3f47;
--turbo-block-border-width: 22px;
}
/* BLOCKQUOTES */
.turbo-block blockquote,
.turbo-block div.blockquote {
background-color: #aaaaaa;
color: #000;
padding: 0;
margin-bottom: 2em;
border-width: var(--turbo-block-border-width);
border-style: solid;
border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white.svg") 16 round;
box-shadow: var(--turbo-block-shadow);
}
/* SIMPLE TABLES */
.turbo-block table.wiki-content-table {
box-shadow: var(--turbo-block-shadow);
margin-bottom: 2em;
}
.turbo-block table.wiki-content-table td {
border: 1px solid #fff;
background-color: #aaaaaa;
}
.turbo-block table.wiki-content-table th {
border: 1px solid #011657;
color: #fff;
background-color: #011657;
}
/* "BLOCK" DIV'S, DEFAULT CONFIG */
.turbo-block {
position: relative;
border-radius: 0;
border-width: var(--turbo-block-border-width);
border-style: solid;
box-shadow: var(--turbo-block-shadow);
color: white;
margin: 0.75rem 1.5rem 1.5rem 0.75rem;
z-index: 1;
/* Properties that apply to whole document in the general fragment */
font-family: "IBM Plex Mono", sans-serif;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
image-rendering: pixelated;
}
.turbo-block .heading {
position: relative;
border: none;
margin-top: 1.5em;
}
.turbo-block .heading::before {
content: "";
border-top: 3px double white;
position: absolute;
width: calc(100% + 22px);
top: calc(50% - 1.5px);
left: 0;
margin: 0 -11px;
}
.turbo-block .heading p {
display: table;
position: relative;
padding: 0 8px;
background: inherit;
margin: 0 0 0 2em;
color: white;
}
.turbo-block hr {
padding: 0;
margin: 1em 0 0 -11px;
width: calc(100% + 22px);
max-width: none;
height: 3px;
border-top: 3px double white;
background: none;
}
.turbo-block.border-white hr {
border-color: white;
}
.turbo-block.border-black hr {
border-color: black;
}
.turbo-block::after {
content: attr(data-title);
position: absolute;
top: -20px;
left: 50%;
transform: translate(-50%, 0);
color: white;
padding: 0 8px;
}
/* IMAGE BLOCKS */
/* Image blocks are supposed to have a turbo block all of their own */
.turbo-block .scp-image-block {
margin: 4px 0 0 0;
float: none;
border: none;
box-shadow: none;
}
.turbo-block .scp-image-caption {
background-color: transparent;
font-weight: normal;
border: none;
}
/* COLORIZED DIV BLOCKS */
.turbo-block.bg-cyan,
.turbo-block.bg-cyan::after,
.turbo-block.bg-cyan .heading p {
background: #1f8785;
}
.turbo-block.bg-grey,
.turbo-block.bg-grey::after,
.turbo-block.bg-grey .heading p {
background: #bdbdbd;
}
.turbo-block.bg-red,
.turbo-block.bg-red::after,
.turbo-block.bg-red .heading p {
background: #840603;
}
.turbo-block.bg-orange,
.turbo-block.bg-orange::after,
.turbo-block.bg-orange .heading p {
background: #e39814;
}
.turbo-block.bg-green,
.turbo-block.bg-green::after,
.turbo-block.bg-green .heading p {
background: #13781f;
}
.turbo-block.bg-purple,
.turbo-block.bg-purple::after,
.turbo-block.bg-purple .heading p {
background: #7f0e9c;
}
.turbo-block.bg-yellow,
.turbo-block.bg-yellow::after,
.turbo-block.bg-yellow .heading p {
background: #bfcc2b;
}
.turbo-block.bg-black,
.turbo-block.bg-black::after,
.turbo-block.bg-black .heading p {
background: #000;
}
.turbo-block.bg-white,
.turbo-block.bg-white::after,
.turbo-block.bg-white .heading p {
background: #fff;
}
/* DIV "BLACK" AND "WHITE" AND WHAT THAT MEANS */
.turbo-block.border-black {
border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_black2.svg")
16 round;
}
.turbo-block.border-black .heading::before {
border-color: black;
}
.turbo-block.border-white {
border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white2.svg")
16 round;
}
.turbo-block.border-white .heading {
background-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white2.svg")
16 round;
}
.turbo-block.text-black,
.turbo-block.text-black .heading p,
.turbo-block.text-black::after {
color: black;
}
.turbo-block.text-white,
.turbo-block.text-white .heading p,
.turbo-block.text-white::after {
color: white;
}
/* LINKS IN COLORIZED BLOCKS */
/* For big contrast and maximum readability, links in colorized blocks have
* their background set to the block's text color, and their text color set to
* the block's background color. This avoids any concerns about the default
* link color only being suitable for certain background colors.
*/
.turbo-block a {
padding: 0 2px;
background-color: white; /* default */
}
.turbo-block.text-white a {
background-color: white;
}
.turbo-block.text-black a {
background-color: black;
}
.turbo-block.bg-cyan a {
color: #1f8785;
}
.turbo-block.bg-grey a {
color: #bdbdbd;
}
.turbo-block.bg-red a {
color: #840603;
}
.turbo-block.bg-orange a {
color: #e39814;
}
.turbo-block.bg-green a {
color: #13781f;
}
.turbo-block.bg-purple a {
color: #7f0e9c;
}
.turbo-block.bg-yellow a {
color: #bfcc2b;
}
.turbo-block.bg-black a {
color: #000;
}
.turbo-block.bg-white a {
color: #fff;
}
.turbo-block a:hover {
text-decoration: none;
background-color: #11ff00;
color: black;
}
/* "OFFSET-LEFT|RIGHT" DIVS */
.offset-right {
float: right;
}
.offset-right > * {
float: none;
}
.offset-left {
float: left;
}
.offset-left > * {
float: none;
}
.offset-right.right-5 {
margin-right: calc(((50vw - 50%) * -1) + 1rem);
}
.offset-right.right-4 {
margin-right: calc(((50vw - 50%) * -0.8) + 1rem);
}
.offset-right.right-3 {
margin-right: calc(((50vw - 50%) * -0.6) + 1rem);
}
.offset-right.right-2 {
margin-right: calc(((50vw - 50%) * -0.4) + 1rem);
}
.offset-right.right-1 {
margin-right: calc(((50vw - 50%) * -0.2) + 1rem);
}
.offset-left.left-5 {
margin-left: calc(((50vw - 50%) * -1) + 1rem);
}
.offset-left.left-4 {
margin-left: calc(((50vw - 50%) * -0.8) + 1rem);
}
.offset-left.left-3 {
margin-left: calc(((50vw - 50%) * -0.6) + 1rem);
}
.offset-left.left-2 {
margin-left: calc(((50vw - 50%) * -0.4) + 1rem);
}
.offset-left.left-1 {
margin-left: calc(((50vw - 50%) * -0.2) + 1rem);
}
/* FIXING MOBILE SHIT */
@media (max-width: 600px) {
/* Stop all floats and offsets on really thin devices */
.offset-right,
.offset-left,
.turbo-block,
.turbo-block .scp-image-block {
float: none;
clear: both;
margin-left: auto !important;
margin-right: auto !important;
}
}
/*
Turbo Vision Theme
[2021 Wikidot Theme]
By JakdragonX
Based on SCP Sigma 9-Theme created by Aelanna and Dr Devan
Based on the original Turbo Vision Theme created by Croquembouche
The Turbo Vision theme is split into two CSS fragments.
This fragment styles general parts of the page, and requires the other
fragment in order to function correctly.
*/
/* TODO Split these selectors across this one and the other one */
body {
font-family: "IBM Plex Mono", sans-serif;
font-size: 16px;
line-height: 22px;
color: black;
letter-spacing: 0.5px;
background-color: #bfcae3;
image-rendering: pixelated;
}
a {
color: #840603;
}
a:hover {
text-decoration: none;
background-color: #11ff00;
color: black;
}
a:visited {
color: #690ba0;
}
a.newpage {
color: #f55;
text-decoration: none;
background: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Mx437 IBM VGA 8x16", monospace;
}
h1,
#page-title {
font-family: "Mx437 IBM VGA 8x16", monospace;
color: #940000;
font-weight: normal;
line-height: 0.85em;
}
#page-title {
border-color: #fff;
}
hr {
background-color: #fff;
margin: 3.5em 1em 3.5em 1em;
}
blockquote,
div.blockquote {
background-color: #aaaaaa;
color: #000;
padding: 0;
margin-bottom: 2em;
border-width: var(--turbo-block-border-width);
border-style: solid;
border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white.svg") 16 round;
box-shadow: var(--turbo-block-shadow);
}
/* ACCOUNT STUFF (OPTIONS, SEARCH BAR, ETC.) */
#account-options {
background-color: #fff;
}
#login-status {
color: #000;
background: #aaa;
border: 2px solid #fff;
font-size: 90%;
z-index: 30;
}
#login-status a {
background: transparent;
color: #840603;
}
#login-status a:hover {
background: #11ff00 !important;
}
#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: #fff solid 2px;
background: #aaaaaa;
box-shadow: none;
border-radius: 0;
color: #fff;
}
#side-bar .side-block.media {
background: #aaaaaa;
}
/* HEADER */
div#container-wrap {
background: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/small%20%281%29.png")
top left repeat-x;
}
div#header {
position: relative;
height: 142px;
background: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/logo%20%281%29.png")
3.675em 1.25em no-repeat;
background-size: auto 100px;
}
div#header {
max-width: initial;
}
div#header,
#top-bar {
width: 100%;
}
div#header h1 {
opacity: 0;
width: 310px;
min-height: 135px;
}
div#header h2 {
display: none;
}
#header h1,
#header h2 {
margin-left: 55px;
}
/* TOP BAR */
#top-bar {
font-size: 100%;
top: 142px;
max-width: none;
height: 20px;
}
#top-bar ul li {
margin: 0 4px;
}
#top-bar ul li a {
font-family: "Mx437 IBM VGA 8x16", monospace;
color: #000;
background-color: transparent;
padding: 0;
border: none;
line-height: 19px;
max-height: 36px;
}
#top-bar ul li a:hover,
#top-bar ul li:hover a {
text-decoration: none;
border: none;
background-color: #11ff00 !important;
color: #000;
}
#top-bar ul li a:hover::before,
#top-bar ul li a:hover::after {
background-color: #11ff00;
}
#top-bar ul li a:visited {
color: #000 !important;
}
#top-bar ul li a::first-letter {
color: #840603;
}
#top-bar .open-menu a {
border: 2px solid #3f3f47;
border-radius: 0;
background-color: #aaaaaa;
color: #840603 !important;
}
/* SIDE BAR */
#side-bar .side-block,
#interwiki .side-block {
position: relative;
border-radius: 0;
border-width: 22px;
border-style: solid;
padding: 0;
border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white2.svg")
16 round;
box-shadow: 0.5em 1em 0 0 #3e3f47;
margin-bottom: 2em;
}
/* REMOVE
.turbo-block .heading {
position: relative;
border: none;
margin: 2em 0 0 -11px;
width: calc(100% + 22px);
max-width: none;
}
.turbo-block .heading::before {
content: "";
border-top: 3px double white;
position: absolute;
width: 100%;
top: calc(50% - 1.5px);
left: 0;
}
.turbo-block .heading p {
display: table;
position: relative;
padding: 0 8px;
background: inherit;
margin: 0 0 0 2em;
color: white;
}
REMOVE */
#side-bar .heading,
#interwiki .heading {
position: relative;
font-size: 100%;
border: none;
padding: 0;
margin: 1em 0 0 -11px;
width: calc(100% + 22px);
}
#side-bar .heading::before,
#interwiki .heading::before {
content: "";
border-top: 1px solid white;
position: absolute;
width: 100%;
top: calc(50% - 1.5px);
left: 0;
}
#side-bar .heading p,
#interwiki .heading p {
position: relative;
display: inline-block;
padding: 0 8px;
margin-left: 1.5em;
color: white;
font-weight: normal;
}
#side-bar .side-block,
#side-bar .side-block .heading p,
#interwiki .side-block,
#interwiki .side-block .heading p {
background-color: #64bec4;
font-size: 90%;
}
#side-bar .side-block.resources,
#side-bar .side-block.resources .heading p {
background-color: #aaaaaa;
font-size: 90%;
}
#side-bar div.menu-item a,
#side-bar .collapsible-block-link,
#interwiki div.menu-item a,
#interwiki .collapsible-block-link {
font-weight: normal;
}
#side-bar {
background-color: #a4a6ba;
}
/* TABS */
div.yui-navset div.yui-content {
color: #000000;
background: #aaaaaa;
border-radius: 0;
border-width: 22px;
border-style: solid;
padding: 0;
border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white.svg")
16 round;
box-shadow: 0.5em 1em 0 0 #3e3f47;
margin-bottom: 2em;
}
.yui-navset .yui-nav a,
div.yui-navset div.yui-navset-top .yui-nav a {
/* protect nested tabviews from other orientations */
border: #dfdfdf outset 2px;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
font-family: "Mx437 IBM VGA 8x16", monospace;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
border-color: transparent;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-color: #aaaaa;
}
div.yui-navset ul.yui-nav a,
div.yui-navset div.yui-navset-top ul.yui-nav a {
background: #aaaaaa;
border: #dfdfdf solid 2px;
border-bottom: transparent 0;
}
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav a:focus {
background: #11ff00;
border: #fff 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: #011657;
border: #fff solid 2px;
border-bottom: transparent 0;
}
/* FIXED ISSUE WITH BOLDING ON TAB NAVIGATION */
.yui-nav {
font-weight: bold;
}
/* SIMPLE TABLES */
table.wiki-content-table {
box-shadow: var(--turbo-block-shadow);
margin-bottom: 2em;
}
table.wiki-content-table td {
border: 1px solid #fff;
background-color: #aaaaaa;
}
table.wiki-content-table th {
border: 1px solid #011657;
color: #fff;
background-color: #011657;
}
/* RATING MODULE */
#page-content .page-rate-widget-box {
box-shadow: none;
font-family: "Mx437 IBM VGA 8x16", monospace;
font-weight: normal;
}
div.page-rate-widget-box .rate-points {
background-color: #011657;
border: 2px solid #011657;
border-radius: 0;
color: #fff;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: #fff;
border-radius: 0;
border: 2px solid #011657;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: #011657;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: transparent;
color: #840603;
}
.page-rate-widget-box .cancel {
background: transparent;
border: 2px dashed #011657;
background-color: #011657;
border-radius: 0;
}
.page-rate-widget-box .cancel a {
color: #fff;
}
.page-rate-widget-box .cancel a:hover {
background-color: transparent;
color: #840603;
}
/* CREDIT MODULE */
#page-content .rate-box-with-credit-button {
background-color: #011657 !important;
border: 1px solid #011657;
line-height: 14px;
border-radius: 0;
color: #fff;
box-shadow: none;
}
#page-content .rate-box-with-credit-button .creditButton p a {
border-left-color: #011657;
border: 3px solid #011657;
}
#page-content .rate-box-with-credit-button .creditButton a {
color: #fff !important;
}
#page-content .rate-box-with-credit-button .creditButton a:hover {
color: #840603;
}
#page-content .modalbox {
background: #ced2eb !important;
color: #000;
box-shadow: none;
border-radius: 0;
}
/* LOCK INFO /*
#lock-info {
background-color: #011657;
}
/* FIXING MOBILE SHIT */
@media (max-width: 770px) {
#top-bar ul li {
height: 1.25em;
}
}
@media (max-width: 650px) {
div#header {
background-position: 3.675em 2.95em;
background-size: auto 75px;
}
}
