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;
    }
    }
}
Puntuación: +1+x

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.


spread-log.png

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:



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.1


Este es un texto en negrita.

Este es un texto en cursiva.

Este es un texto monoespaciado.


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


Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License