Turbo Vision Dark Theme

Link to article: Turbo Vision Dark Theme.

@import url("https://scp-wiki.wikidot.com/theme:turbo-vision/code/1");
@import url("https://scp-wiki.wikidot.com/theme:turbo-vision/code/2");
@import url("https://scp-wiki.wikidot.com/local--code/theme:turbo-vision-dark/1");


.font1 {
   font-family: "Jost", sans-serif;
}

.font2 {
   font-family: "Hermit", sans-serif;
}

.font3 {
   font-family: "Terminus", sans-serif;
   font-size: 21px;
}

.font4 {
  font-family: "Michroma", sans-serif;
}

width:95%; box-shadow:none; border: none;

```
width:100%;
```

width:100%; background-color: #ADADAD; color: #000000;

```
turbo-block
```
```
bg-cyan-dark
```
```
border-white
```
```
text-white
```
```
scp-image-block
```
```
block-center
```
```
scp-image-caption
```
```
turbo-block
```
```
bg-grey-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-red-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-grey-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-cyan-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-cyan-dark
```
```
turbo-block
```
```
bg-cyan-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-cyan-light
```
```
turbo-block
```
```
bg-grey-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-grey-dark
```
```
turbo-block
```
```
bg-grey-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-grey-light
```
```
turbo-block
```
```
bg-red-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-red-dark
```
```
turbo-block
```
```
bg-red-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-red-light
```
```
turbo-block
```
```
bg-orange-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-orange-dark
```
```
turbo-block
```
```
bg-orange-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-orange-light
```
```
turbo-block
```
```
bg-green-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-green-dark
```
```
turbo-block
```
```
bg-green-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-green-light
```
```
turbo-block
```
```
bg-purple-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-purple-dark
```
```
turbo-block
```
```
bg-purple-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-purple-light
```
```
turbo-block
```
```
bg-yellow-dark
```
```
border-white
```
```
text-white
```
```
turbo-block
```
```
bg-yellow-dark
```
```
turbo-block
```
```
bg-yellow-light
```
```
border-black
```
```
text-black
```
```
turbo-block
```
```
bg-yellow-light
```
```
turbo-block
```
```
bg-grey-dark
```
```
border-white
```
```
text-white
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
font1
```
```
font2
```
```
font3
```
```
font4
```

[[include :scp-wiki:component:toggle-sidebar]]

[[module CSS]]
@import url("https://scp-wiki.wikidot.com/theme:turbo-vision/code/1");
@import url("https://scp-wiki.wikidot.com/theme:turbo-vision/code/2");
@import url("https://scp-wiki.wikidot.com/local--code/theme:turbo-vision-dark/1");
[[/module]]

[[iftags +theme]]

[[module CSS]]

.font1 {
   font-family: "Jost", sans-serif;
}

.font2 {
   font-family: "Hermit", sans-serif;
}

.font3 {
   font-family: "Terminus", sans-serif;
   font-size: 21px;
}

.font4 {
  font-family: "Michroma", sans-serif;
}

[[/module]]

[[>]]
[[module Rate]]
[[/>]]
-----
[[=]]
++ WHAT IS THIS?
[[/=]]

[[div class="turbo-block bg-cyan-dark border-white text-white"]]
Turbo Vision Dark theme is a dark theme (no way!) built on top of [*https://scp-wiki.wikidot.com/theme:turbo-vision Turbo Vision Theme] and given a sleek and somewhat 'updated' look. You can use this for any article... but preferably one that touches on retro callbacks from modern times. Or if you prefer this over regular Turbo Vision.
[[/div]]
----
@@ @@
[[div class="scp-image-block block-center" style="width:95%; box-shadow:none; border: none;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:turbo-vision-dark/spread-log.png style="width:100%;" link=#]]
[[div class="scp-image-caption" style="width:100%; background-color: #ADADAD; color: #000000;"]]
SCP Foundation / Foundation Media Dept. alternate logos
[[/div]]
[[/div]]
@@ @@
-----
[[=]]
+ IMPORTING THE THEME
[[/=]]

[[div class="turbo-block bg-grey-light border-black text-black"]]
To use this theme on your page, include the following code:

[[div class="turbo-block bg-red-dark border-white text-white"]]
@@[[include :scp-wiki:theme:turbo-vision-dark]]@@
[[/div]]
-----
This theme comes with Toggle Sidebar and Turbo Vision built-in so there's no need to include them again. That being said, there is no distinction between the theme itself/'theme mode' and the color divs/'component mode' like in the original Turbo Vision theme (thusly no BHL compatibility). It's 100% or nothing, sorry.

[[/div]]
-----
[[=]]
++ WHAT'S NEW?
[[/=]]

[[div class="turbo-block bg-grey-dark border-white text-white"]]

Besides the obvious ones like the logo, font changes, and background colors, **TURBO DARK** also includes new DARK and LIGHT variations of the color divs. The standard color divs are unchanged if you would prefer to use those instead. Simply add '**-dark**' or '**-light**' to the end of the color div of your choice (e.g. __bg-cyan-dark__ or __bg-red-light__).
-----
**DARK** variations are meant to be used exclusively with WHITE border & text for readability.
@@ @@
**LIGHT** variations are meant to be used exclusively with BLACK border & text for readability.
-----
The new divs can be seen below:
[[/div]]
[[=]]
[[collapsible show="« CYAN BLOCKS »" hide="» CYAN BLOCKS «"]]
[[div class="turbo-block bg-cyan-dark border-white text-white"]]
@@[[div class="turbo-block bg-cyan-dark"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]

[[div class="turbo-block bg-cyan-light border-black text-black"]]
@@[[div class="turbo-block bg-cyan-light"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]
[[/collapsible]]

[[collapsible show="« GREY BLOCKS »" hide="» GREY BLOCKS «"]]
[[div class="turbo-block bg-grey-dark border-white text-white"]]
@@[[div class="turbo-block bg-grey-dark"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]

[[div class="turbo-block bg-grey-light border-black text-black"]]
@@[[div class="turbo-block bg-grey-light"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]
[[/collapsible]]

[[collapsible show="« RED BLOCKS »" hide="» RED BLOCKS «"]]
[[div class="turbo-block bg-red-dark border-white text-white"]]
@@[[div class="turbo-block bg-red-dark"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]

[[div class="turbo-block bg-red-light border-black text-black"]]
@@[[div class="turbo-block bg-red-light"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]
[[/collapsible]]

[[collapsible show="« ORANGE BLOCKS »" hide="» ORANGE BLOCKS «"]]
[[div class="turbo-block bg-orange-dark border-white text-white"]]
@@[[div class="turbo-block bg-orange-dark"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]

[[div class="turbo-block bg-orange-light border-black text-black"]]
@@[[div class="turbo-block bg-orange-light"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]
[[/collapsible]]

[[collapsible show="« GREEN BLOCKS »" hide="» GREEN BLOCKS «"]]
[[div class="turbo-block bg-green-dark border-white text-white"]]
@@[[div class="turbo-block bg-green-dark"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]

[[div class="turbo-block bg-green-light border-black text-black"]]
@@[[div class="turbo-block bg-green-light"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]
[[/collapsible]]

[[collapsible show="« PURPLE BLOCKS »" hide="» PURPLE BLOCKS «"]]
[[div class="turbo-block bg-purple-dark border-white text-white"]]
@@[[div class="turbo-block bg-purple-dark"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]

[[div class="turbo-block bg-purple-light border-black text-black"]]
@@[[div class="turbo-block bg-purple-light"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]
[[/collapsible]]

[[collapsible show="« YELLOW BLOCKS »" hide="» STOP SAYING THESE ARE 'PISS-COLORED' «"]]
[[div class="turbo-block bg-yellow-dark border-white text-white"]]
@@[[div class="turbo-block bg-yellow-dark"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]

[[div class="turbo-block bg-yellow-light border-black text-black"]]
@@[[div class="turbo-block bg-yellow-light"]]@@
This is what a [[[LINK]]] would look like.
[[/div]]
[[/collapsible]]
[[/=]]
@@ @@

[[div class="turbo-block bg-grey-dark border-white text-white"]]

Blockquotes, Tables, and Tabs/Tabview also received some changes. 

Standard tabs and tables have received the Jost font-family (as well as the main body). Blockquotes and use the same font as the color divs - Hermit - and tab headers use the topbar font, Terminus. Drop shadows have been changed individually as to not be too dark/too light depending on condition, and the background color of all three have been changed to be the same as the Grey Light color div for unity.
-----
Here's an example:
[[/div]]
[[tabview]]
[[tab Basic formatting]]
A horizontal rule can be created with 5 hyphens @@"-----"@@ and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.[[footnote]] Here's a footnote! [[/footnote]]
-----
**This is bolded text.**

//This is italicized text.//

{{This is monospaced text.}}
[[/tab]]
[[tab Headers]]
Titles can be created by putting between one and six plus "+" at the start of the line.

+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/tab]]
[[tab Blockquotes]]
[[div class="blockquote"]]
This is a blockquote, created by wrapping the text in a div with class "blockquote".

[[div class="blockquote"]]
More text
-----
That's a horizontal rule

[[div class="blockquote"]]
Nested blockquote

You like?
----
Whoa...
[[/div]]
[[/div]]
[[/div]]
[[/tab]]
[[tab Tables]]
||~ Table ||~ Header cell ||
|| Normal cell || Another normal cell ||
|||| A merged cell ||
[[/tab]]
[[/tabview]]
-----
[[=]]
++ ADDED FONTS
@@ @@
[[div class="font1"]]
[[size 150%]]**JOST**[[/size]]

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

**bolded** and //italicized//
**BOLDED**  AND //ITALICIZED// 
[[/div]]
@@ @@
[[div class="font2"]]
[[size 150%]]**HERMIT**[[/size]]

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

**bolded** and //italicized//
**BOLDED**  AND //ITALICIZED// 
[[/div]]
@@ @@
[[div class="font3"]]
[[size 150%]]**TERMINUS** (@21px)[[/size]]

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

**bolded** and //italicized//
**BOLDED**  AND //ITALICIZED// 
[[/div]]
@@ @@
[[div class="font4"]]
[[size 150%]]**MICHROMA**[[/size]]

sphinx of black quartz, judge my vow
SPHINX OF BLACK QUARTZ, JUDGE MY VOW

**bolded** and //italicized//
**BOLDED**  AND //ITALICIZED// 
[[/div]]
[[/=]]

-----
[[=]]
++ SOURCE CODE
[[/=]]
[[collapsible show="» show source" hide="« hide source"]]
[[code type="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://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", 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", 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", 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", 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", 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", 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", 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", 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;
}
[[/code]]
[[/collapsible]]
-----
[[/iftags]]

Turbo Vision Dark Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source