Tema Turbo Visión Oscura

/* fuente: 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;
    }
    }
}

QUÉ ES ESTO?

El tema Turbo Visión Oscura es una tema oscuro (¡no me digas!) construido sobre los cimientos del Tema Turbo Visión y se le ha dado un aspecto elegante y algo "actualizado". Puedes usar esto para cualquier artículo… pero preferiblemente uno que toque las llamadas retro de los tiempos modernos. O si prefieres esto en lugar del Turbo Visión normal.

Logos intercambiables de la Fundación SCP / Dept. de Medios de La Fundacion

IMPORTANDO EL TEMA

Para utilizar este tema en tu página, incluye el siguiente código:

[[include theme:turbo-vision-dark]]

Este tema viene con Alternar Barra Lateral y Turbo Visión incorporados así que no hay necesidad de incluirlos de nuevo. Dicho esto, no hay distinción entre el tema en sí/'modo de tema' y los divs de color/'modo de componente' como en el tema original de Turbo Visión (por lo tanto no hay compatibilidad con BHL). Es todo o nada, lo siento.

QUÉ ES NUEVO?

Además de los obvios, como el logotipo, los cambios de fuente y los colores de fondo, TURBOSCURA también incluye nuevas variaciones OSCURAS y CLARAS de los divs de color. Los divs de color estándar no cambian si prefieres usarlos en su lugar. Sólo tienes que añadir '-dark' o '-light' al final del div de color que elijas (por ejemplo, bg-cyan-dark or bg-red-light).

Las variaciones OSCURAS están pensados para ser utilizados exclusivamente con borde y texto BLANCO para su legibilidad.

Las variaciones CLARAS están pensadas para ser usadas exclusivamente con borde y texto NEGRO para su legibilidad.

Los nuevos divs pueden verse a continuación:

« BLOQUES AMARILLOS »

Blockquotes, Tablas, y las Tabs/Tabview también han recibido algunos cambios.

Las tabs y tablas estándar han recibido el tipo de letra Jost (al igual que el cuerpo principal). Los Blockquotes y utilizan la misma fuente que los divs de color - Hermit - y los encabezados de las pestañas utilizan la fuente de la barra superior, Terminus. Las sombras han sido cambiadas individualmente para que no sean demasiado oscuras/demasiado claras dependiendo de la condición, y el color de fondo de los tres ha sido cambiado para ser el mismo que el div de color gris claro para la unidad.

He aquí un ejemplo:

Una regla horizontal puede crearse con 5 guiones "-----" y se extiende a lo largo de toda la página si no está colocada dentro de nada (por ejemplo, una cita en bloque). Las líneas que separan las secciones de este documento son reglas horizontales.¹

Este es un texto en negrita.

Este es un texto en cursiva.

Este es un texto monoespaciado.

Tabla	Celda de encabezado
Celda normal	Otra celda normal
Una celda unida

FUENTES AÑADIDAS

JOST

esfinge de cuarzo negro, juzga mi voto
ESFINGE DE CUARZO NEGRO, JUZGA MI VOTO

negrita y cursiva
NEGRITA Y CURSIVA

HERMIT

esfinge de cuarzo negro, juzga mi voto
ESFINGE DE CUARZO NEGRO, JUZGA MI VOTO

negrita y cursiva
NEGRITA Y CURSIVA

TERMINUS (@21px)

esfinge de cuarzo negro, juzga mi voto
ESFINGE DE CUARZO NEGRO, JUZGA MI VOTO

negrita y cursiva
NEGRITA Y CURSIVA

MICHROMA

esfinge de cuarzo negro, juzga mi voto
ESFINGE DE CUARZO NEGRO, JUZGA MI VOTO

negrita y cursiva
NEGRITA Y CURSIVA

CÓDIGO FUENTE

» mostrar fuente

« esconder fuente

/*
    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://lafundacionscp.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://lafundacionscp.wdfiles.com/local--files/theme:turbo-vision-dark/tb-bga.png")
    top left repeat-x;
}
 
div#header {
  background: url("https://lafundacionscp.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;
}
 
#side-bar .side-block.resources,
#side-bar .side-block.resources .heading p {
  background-color: #001133;
}
 
#side-bar {
  background-color: #01020D;
}
 
/* 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;
}

tema

La Fundación SCP

Rama Hispanohablante

QUÉ ES ESTO?

IMPORTANDO EL TEMA

QUÉ ES NUEVO?

Primer Título

Segundo Título

Tercer Título

Cuarto Título

Quinto Título

Sexto Título

FUENTES AÑADIDAS

CÓDIGO FUENTE

Otros sitios interesantes

Music Industrapedia

Women's Film History Network

Science Online London

Sven Co-op Map Database