Tema Penumbra

Puntuación:

Puntuación con Módulo de Información:

Info

Info about your page.

Más información

Más información sobre tu página.

Este es un tema estético creado por EstrellaYoshte derivado del Tema Paperstack.

Para importar este tema a tu página, pon el siguiente texto en cualquier parte dentro de ella:

[[include :lafundacionscp:theme:penumbra]]

También puedes cambiar el título, subtítulo, logo, y color de acento poniendo el siguiente módulo CSS después del [[include]]:

:root {
--header-title: "TÍTULO DEL ENCABEZADO";
--header-subtitle: "subtítulo del encabezado";
--lgurl: url("url de tu logo aquí");
--accentColor: COLOR DE ACENTO AQUÍ;
}

Por defecto, el color de acento es #1EB5E8.

Image.

Una línea horizontal puede ser creada utilizando 5 guiones "- - - - -" y se extiende a través de la página completa si es que no fue colocado dentro de nada (por ejemplo, un bloque de citas). Las líneas que separan las secciones de este documento se llaman líneas horizontales.

Títulos pueden ser creados poniendo entre uno y seis signos de más "+" al inicio de tu oración.

Desplegable - Clicquéame

Está es una tab.

Este es un bloque de citas, creado al poner "> " al inicio de cada línea.
Más texto

Esta es una línea horizontal

Bloque de citas anidado

Esto es	una tabla
Deberías saber	cómo hacerlas
A estas alturas

[[div class="darkbox"]]

El div de la sidebox se usa de la siguiente manera:

[[div class="limit"]] <— Establece el inicio de anchor
[[div class="anchor"]] <— Aplica la propiedad sticky a la sidebox
[[div class="sidebox"]]
Texto de sidebox aquí.
[[/div]]
[[/div]]

Texto por donde pasa la caja lateral.

[[/div]] <— Establece el final de anchor

Ejemplo

Sin el div de limit, el div anchor se verá a lo largo de todo el contenido de la página una vez pase de la posición sticky.

Nótese que el div sidebox se minimiza en pantallas de 1290 pixeles o menos. (¡Gracias a Woedenaz por el código!)

La fuente del encabezado es Josefin Sans.

La fuente del cuerpo es Roboto.

La fuente del monoespaciado es Fira Code.

Código Fuente:

/*
    Tema Penumbra
    [Tema de Wikidot de 2020]
    Hecho por EstrellaYoshte
    Traducido por Dc_Yerko
    Basado en:
       Tema Paperstack, por EstrellaYoshte
       Tema Ad Astra, por NatVoltaic y stormbreath
       Tema Inkblot, por Croquembouche
       Tema de Anderson Robotics, por Croquembouche
       Desplegable Estilo BHL, por Monkatraz
*/
 
@import url('https://api.fonts.coollabs.io/css2?family=Roboto&display=swap');
@import url(https://api.fonts.coollabs.io/css2?family=Fira+Code&display=swap);
 
@font-face {
    font-family: 'Josefin Sans';
    src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Italic.woff2) format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold.woff2) format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold-Italic.woff2) format("woff2");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
 
:root {
  --body-font: 'Roboto', InterVariable, BlinkMacSystemFont,'Segoe UI',Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
  --header-font: 'Josefin Sans', Verdana, Arial, Helvetica, sans-serif;
  --mono-font: 'Fira Code', 'Andale Mono', 'Courier New', Courier, monospace;
 
  --accentColor: #1EB5E8;
  --darkColor: #2F333C;
  --darkerColor: #21252E;
  --lightColor: #EDEDED;
  --lgurl: url("https://lafundacionscp.wdfiles.com/local--files/theme%3Apenumbra/logo.png");
}
 
body {
    font-family: var(--body-font);
    font-size: .975em;
    line-height: 1.375;
    color: var(--lightColor);
    background-color: var(--darkColor);
    background-image: linear-gradient(
        to bottom,
        var(--darkerColor), var(--darkerColor) 90px,
        var(--darkerColor) 90px, var(--darkColor) 200px,
        var(--darkColor) 200px, var(--darkColor) 100%);
    background-repeat: no-repeat;
    accent-color: var(--accentColor);
}
 
#content-wrap {
    margin-top: 1.25rem;
}
 
input { color-scheme: dark; }
 
/* ---- SCROLLBAR ---- */
 
::-webkit-scrollbar {
  width: .625rem;
  height: .625rem;
  background: transparent;
}
 
::-webkit-scrollbar-track {
  background: var(--darkerColor);
}
 
::-webkit-scrollbar-thumb {
  background: var(--accentColor);
  border: none;
}
 
:root {
    scrollbar-color: var(--accentColor) var(--darkerColor);
    scrollbar-width: thin;
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: none;
}
#header {
    background-image: none;
    height: 8.75rem;
}
 
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--lgurl);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: -1;
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.45rem; }
#header h1 a {
    margin: auto;
    width: max-content;
}
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: var(--accentColor);
  font-family: var(--header-font);
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "LA FUNDACIÓN SCP");
  font-weight: 700;
  font-size: 1em;
}
#header h2::before {
  content: var(--header-subtitle, "SEGURIDAD - CONTENCIÓN - PROTECCIÓN");
  font-weight: 700;
  font-size: 1.22em;
}
 
#login-status {
    color: var(--lightColor);
    width: 100%;
    text-align: right;
}
#login-status a {
    color: var(--accentColor);
}
 
#account-topbutton {
    border: none;
    margin-left: 0.35em;
    padding: 0 0.45em;
    font-size: 1em;
    position: relative;
}
#account-topbutton::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--accentColor);
    opacity: 0.125;
}
 
#account-options {
    width: 6.25rem;
    background: var(--darkerColor);
    border: none;
    border-right: solid 3px var(--accentColor);
}
#account-options::before,
#account-options::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
#account-options::before {
    background: rgba(0,0,0, .4);
}
#account-options::after {
    background-color: var(--accentColor);
    mix-blend-mode: overlay;
}
#account-options > ul {
    position: relative;
    z-index: 1;
}
#account-options ul a {
    color: var(--accentColor);
    background-color: transparent;
    font-weight: bold;
    letter-spacing: 0.01em;
    padding: 0.25em 0.5em;
    text-align: right;
}
#account-options ul a:hover {
    color: var(--darkerColor);
    background: var(--accentColor);
}
 
#footer {
    background: transparent;
    color: var(--lightColor);
    font-size: 0.625rem;
    margin-top: 0.25em;
    padding: 0.25em 0.35em;
    display: flex!important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
#footer > a[href*="www.wikidot.com"] {
    color: var(--lightColor);
    padding: 0 0.85ch 0 0.5ch;
    border-right: 1px solid currentColor;
}
#footer .options {
    float: none;
    order: 2;
    width: max-content;
    font-size: 0;
}
#footer .options a {
    color: var(--lightColor);
    font-size: 0.625rem;
    padding: 0 0.85ch;
    border-right: 1px solid currentColor;
}
#footer .options a:last-child {
    border-right: none;
    padding-right: 0;
}
 
#license-area {
    color: var(--lightColor);
    background-color: var(--darkerColor);
    border-top: solid 0.1rem var(--accentColor);
}
 
#footer-bar {
    border: none;
    padding: 0 0 1em;
    margin: 0;
    max-width: 100%;
    background-color: var(--darkerColor);
}
#footer-bar .units {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
 
#search-top-box {
    top: 2.2rem!important;
    right: 8px;
    z-index: 8;
}
#search-top-box-form > input[type=submit] {
    border: solid 1px var(--lightColor);
    background: var(--darkerColor)!important;
    box-shadow: none;
    border-radius: 0;
    color: var(--lightColor);
    transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
    border: solid 1px var(--accentColor);
    box-shadow: none;
    color: var(--accentColor);
    appearance: none;
}
#search-top-box-form > input[type=text] { display: none; }
 
/* ---- TOP BAR ---- */
 
#top-bar {
     top: 8.4rem;
     display: flex;
     justify-content: center;
     right: 0;
}
@media (max-width: 768px) {
    .mobile-top-bar {
         display: flex;
         justify-content: center;
         max-width: 100%;
         width: 100%;
         left: 0;
    }
}
#top-bar, #top-bar a {
     color: var(--lightColor);
     transition: color 0s;
}
#top-bar :is(.top-bar,.mobile-top-bar)>ul>li>a {
    letter-spacing: .075ch;
}
 
#top-bar ul li ul,
#top-bar ul li ul li ul {
    border-color: var(--accentColor);
    box-shadow: none;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
   border-top-color: var(--darkColor);
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: var(--darkerColor);
    color: var(--lightColor);
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: var(--darkerColor); /* top bar hover background color */
    color: var(--accentColor);
    transition: color 0.1s linear;
}
 
/* ---- SIDE BAR ---- */
 
div#side-bar {
    background: var(--darkerColor);
    clear: both;
    width: 17rem;
    padding:0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    direction: rtl;
}
 
#side-bar .side-block,
#interwiki .side-block {
    border: transparent;
    border-radius: 0;
    padding: 5px 15px;
    box-shadow: none;
    background-color: transparent;
    direction: ltr;
}
 
#side-bar .side-block.media {
    position: relative;
    background-color: var(--darkerColor);
    margin: 0.75em 0;
}
#side-bar .side-block.media::before,
#side-bar .side-block.media::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
#side-bar .side-block.media::before {
    background: rgba(0,0,0, .4);
}
#side-bar .side-block.media::after {
    background-color: var(--accentColor);
    mix-blend-mode: overlay;
}
#side-bar .side-block.media > * {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    z-index: 1;
}
 
#side-bar .side-block.resources {
    background-color: transparent;
    position: relative;
    margin-bottom: 0.25em;
    padding: 0.75em 15px 0.5em;
}
#side-bar .side-block.resources::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
    background-color: var(--accentColor);
    opacity: 0.125;
}
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px var(--accentColor);
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    color: var(--accentColor);
}
#side-bar .collapsible-block-folded .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    font-family: var(--header-font);
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #ffffff;
}
 
#side-bar .menu-item img, #interwiki .menu-item img {display: none; }
 
#side-bar .heading,
#interwiki .heading {
    color: var(--lightColor);
    font-family: var(--header-font);
    font-size: 0.94rem;
    border-bottom: solid 1px var(--lightColor);
    margin-top: 1.25em;
}
 
#top-bar div.open-menu a {
    border-radius: 0;
    box-shadow: none;
    color: var(--accentColor);
    background-color: var(--darkerColor);
    border: solid 1px var(--darkerColor);
}
 
/* Bloques Coloridos de la Side Bar */
 
#side-bar .side-block.media {
    border: transparent;
    border-radius: 0;
    padding: 5px 15px;
    box-shadow: none;
    background-color: transparent;
    direction: ltr;
}
 
#side-bar .side-block.nuevos {
    border: transparent;
    border-radius: 0;
    padding: 5px 15px;
    box-shadow: none;
    background-color: transparent;
    direction: ltr;
}
 
#side-bar .side-block.guias {
    border: transparent;
    border-radius: 0;
    padding: 5px 15px;
    box-shadow: none;
    background-color: transparent;
    direction: ltr;
}
 
#side-bar .side-block.borradores {
    border: transparent;
    border-radius: 0;
    padding: 5px 15px;
    box-shadow: none;
    background-color: transparent;
    direction: ltr;
}
 
#side-bar .side-block.cc {
    border: transparent;
    border-radius: 0;
    padding: 5px 15px;
    box-shadow: none;
    background-color: transparent;
    direction: ltr;
}
 
#side-bar .side-block.recurso {
    border: transparent;
    border-radius: 0;
    padding: 5px 15px;
    box-shadow: none;
    background-color: transparent;
    direction: ltr;
}
 
/* ---- Interwiki ---- */
iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper {
    position: relative;
    width: auto;
}
div.scpnet-interwiki-wrapper {
    margin: 0 -5px 0.75em;
    background-color: var(--darkerColor);
}
.scpnet-interwiki-wrapper::before,
.scpnet-interwiki-wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
.scpnet-interwiki-wrapper::before {
    background: rgba(0,0,0, .4);
}
.scpnet-interwiki-wrapper::after {
    background-color: var(--accentColor);
    mix-blend-mode: overlay;
}
 
#interwiki {
    --accentColor: #888888;
    background: transparent;
}
#interwiki body {
    background: transparent;
}
 
#interwiki .side-block {
    margin-top: 0;
    padding: 0 15px;
}
#interwiki .side-block a,
#interwiki .side-block a:visited {
    color: var(--accentColor);
}
#interwiki .side-block a:hover,
#interwiki .side-block a:visited:hover {
    color: #ffffff;
}
#interwiki .heading {
    color: var(--accentColor);
    border-bottom-color: currentColor;
}
#interwiki .menu-item img {
    display: none;
}
/* ------------------- */
 
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: var(--darkerColor);
    }
    #side-bar:target {
        border: none;
        box-shadow: none;
    }
    #side-bar .close-menu {
        transition: width 0.5s ease-in-out 0.1s,
                    opacity 1s ease-in-out 0s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0; left: auto;
        background: rgb(0,0,0,0.3);
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 17rem);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #side-bar {
        top: 0;
    }
    #search-top-box {
        top: 107px;
    }
}
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: var(--accentColor);
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: var(--lightColor);
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: var(--darkerColor);
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: var(--lightColor);
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--accentColor);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: var(--lightColor);
     background-color: var(--darkerColor);
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--accentColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: var(--darkerColor);
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: var(--darkerColor);
     background-color: var(--accentColor);
}
 .yui-navset .yui-content {
    background-color: var(--darkerColor);
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border: none;
}
 
/*---- TAB ANIMATION by Croquembouche ---- */
 
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: var(--darkerColor);
     --linkColour: var(--lightColor);
}
 
 .info-container .collapsible-block-content {
    padding: 0 .5em 30px;
}
#page-content .info-container > .collapsible-block .collapsible-block-link {
    padding: 0;
}
 .info-container .collapsible-block-content .wiki-content-table {
    width: 100%;
}
 
/* Ayer's info-bar patch by Monkatraz */
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link  {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
}
#page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before  {
    content: " ";
    display: none;
}
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
/* ---- INFO PANE ---- */
 
#page-content .creditRate{
     margin: unset;
     margin-top: 4px;
     margin-bottom: 4px;
     margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
    background-color: var(--darkerColor);
    border: solid 2px var(--darkerColor);
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px var(--accentColor);
}
#page-content .rate-box-with-credit-button .creditButton p a {
    color: #ffffff;
    border-left-color: transparent;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
 
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
     color: var(--lightColor);
}
#page-content .rate-box-with-credit-button .fa-info:hover {
     color: var(--accentColor);
}
 
#page-content .creditButtonStandalone p a {
    background-color: var(--darkerColor);
    border: solid 2px var(--darkerColor);
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px var(--accentColor);
    color: var(--lightColor);
}
#page-content .creditButtonStandalone p a:hover {
    color: var(--accentColor);
}
 
#page-content .modalbox {
    background: var(--darkColor) !important;
    color: var(--lightColor);
    box-shadow: none;
    border-radius: 0;
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
     margin: unset;
     border-radius: 0;
     border: solid 2px var(--darkerColor);
     box-shadow: 3px 0px 0px 0px var(--accentColor);
     background-color: var(--darkerColor);
     margin-top: 4px;
     margin-bottom:4px;
     margin-right: 3px;
}
 
div.page-rate-widget-box .rate-points {
    background-color: var(--darkerColor);
    border: none;
    color: var(--lightColor) !important;
    text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: var(--darkerColor);
    border-top: none;
    border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: var(--lightColor);
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: var(--darkerColor);
    color: var(--accentColor);
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: var(--darkerColor);
    border: none;
}
.page-rate-widget-box .cancel a {
    color: var(--lightColor);
}
.page-rate-widget-box .cancel a:hover {
    background: var(--darkerColor);
    color: var(--accentColor);
}
 
/* ---- PAGE ELEMENTS ---- */
 
.page-source, tt {
    font-family: var(--mono-font);
    font-size: 0.87rem;
}
 .code pre, .code p, .code {
    font-family: var(--mono-font);
    font-size: 0.87rem;
    color: var(--darkerColor);
}
 
h1 {
    color: var(--accentColor);
    font-family: var(--header-font);
    font-weight: bold;
}
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
    font-family: var(--header-font);
    font-weight: bold;
}
 
#page-title, .meta-title {
    color: var(--lightColor);
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 1.75em;
    text-align: center;
    border-color: currentColor;
}
 
/* Clicky links */
a,
a.newpage,
a:visited,
#side-bar a,
#side-bar a:visited {
    color: var(--accentColor);
    transition: color 0.15s linear;
}
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:not(.close-menu):hover {
    color: #ffffff;
    text-decoration: none;
    background-color: var(--accentColor);
}
a.newpage { filter: hue-rotate(180deg); }
 
/* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */
#page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover, .printuser.avatarhover > a:first-child:hover {
    background: transparent;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    background: var(--linkColour) !important;
}
 
/*---------------------------*/
 
hr {
    background-color: var(--accentColor);
    margin: 1.5rem 0;
}
 
blockquote,
div.blockquote,
#toc {
    background-color: var(--darkerColor);
    border: solid 2px var(--darkColor);
    box-shadow: -3px 0px 0px -0.1px var(--accentColor);
}
 
.code {
    background-color: #F8F8F8;
    border: solid 3px var(--darkColor);
    box-shadow: none;
}
.scp-image-block {
    border: solid 8px var(--darkerColor);
    border-bottom: solid 0px var(--darkerColor);
    box-shadow: 0px 0.26rem 0px 0px var(--accentColor);
    box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
    background-color: var(--darkerColor);
    border: solid 4px var(--darkerColor);
    color: var(--lightColor);
    font-size: 0.84rem;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px var(--accentColor);
    color: var(--accentColor);
    background-color: var(--darkerColor);
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px var(--accentColor);
    /* set border for table content */
}
 
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: var(--darkerColor);
    transition: background 0.25s linear;
    width: -moz-fit-content;
    width: fit-content;
    overflow: hidden;
    margin: auto;
    box-sizing: border-box;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽ ";
}
#page-content .collapsible-block-link {
    display: inline-block;
    padding: 0.5rem 1rem;
 
    text-decoration: none;
    color: var(--lightColor);
    font-weight: bold;
    text-align: center;
}
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--accentColor);
}
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0px -0.26rem 0px 0px var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* Selection */
::selection {
    background: var(--accentColor);
    color: #ffffff;
}
 
/* Footnotes */
.hovertip {
    font-size: .9rem;
    background-color: var(--darkerColor) !important;
    border: solid 1px var(--accentColor) !important;
}
.footnotes-footer {
    background-color: var(--darkerColor);
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-bottom: 1.5rem;
    box-shadow: -0.24rem 0px 0px 0px var(--accentColor);
}
.footnotes-footer .title {
    color: var(--lightColor);;
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
/* Tags */
#main-content .page-tags a {
    margin-top: .18rem;
}
.page-tags span {
    border-top: 1px solid var(--lightColor);
}
 
/* Pop-Up Windows */
.owindow {
    background-color: var(--darkerColor);
    border-color: var(--accentColor);
}
 
.owindow .modal-header {
    background-color: var(--darkerColor);
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: var(--darkerColor);
    color: #var(--accentColor);
    border-bottom: 1px solid var(--darkColor);
}
 
.owindow .button-bar a {
    background-color: var(--darkerColor);
    border-color: var(--accentColor);
    color: var(--lightColor);
}
.owindow .button-bar a:hover {
    background-color: var(--accentColor);
}
 
.owindow.owait .content {
    background-image: none;
    padding: 0.25rem 1.5rem 1.5rem;
}
.owindow.owait .content::after {
  content: " ";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin: -1rem auto;
  margin-top: 0.85rem;
  border-radius: 50%;
  border: 0.375rem solid black;
  border-color: var(--accentColor) var(--darkColor) var(--darkColor);
  animation: loading 0.75s linear infinite;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
/* Edit Buttons */
.buttons .btn {
    background-color: var(--darkerColor);
    border-color: var(--accentColor);
    color: var(--accentColor);
    padding: 0.45em 0.625em;
    font-weight: bold;
    transition: color 0.15s linear;
    cursor: pointer;
}
.buttons .btn:hover {
    background-color: var(--accentColor);
    color: var(--darkerColor);
}
 
/* Edit Lock Info*/
#lock-info {
    background-color: var(--darkerColor);
    border-color: var(--lightColor);
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: var(--accentColor);
}
 
/* History */
.pager .current {
    background-color: var(--accentColor);
    border-color: var(--lightColor);
}
.pager a,
table.page-history td.optionstd a {
    border-color: currentColor;
}
 
/* History Compare */
.inline-diff ins, .inline-diff del {
    color: var(--darkerColor);
}
 
/* Page Source */
.page-source {
    border: none;
    padding: 1.5em 1.75em;
    background-color: var(--darkerColor);
}
 
/* ---- CUSTOM SYNTAX ---- */
 
.darkbox {
    background-color: var(--darkerColor);
    border-left: solid 0.26rem var(--accentColor);
    border-right: solid 0.26rem var(--accentColor);
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
 
.lightbox {
    background-color: var(--lightColor);
    color: var(--darkerColor);
    border-left: solid 0.26rem var(--accentColor);
    border-right: solid 0.26rem var(--accentColor);
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
.lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6 {
    color: var(--darkerColor);
}
 
/* author label compatibility */
#page-content .authorlink-wrapper {
    margin-top: -0.1rem;
    --author-right-adjust: 0;
    --swatch-background: 33, 37, 46;
    --swatch-text-general: 237, 237, 237;
}
 
/*------------------------------------*/
 
.limit {
    margin-bottom: -1rem;
    z-index: 5;
 
}
.anchor {
    position: sticky;
    height:0;
    top: 0;
    z-index: 5;
}
.sidebox {
    background-color: var(--darkerColor);
    border-top: solid 2px var(--accentColor);
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
/* Sidebox mobile optimization, courtesy of Woed */
@media (max-width: 1290px) {
   .sidebox {
        --arrow-size: 1.25rem;
        width: auto;
        max-width: 65vw!important;
        border: none;
        padding-left: 0.4rem; padding-right: 0.4rem;
        top: 0.75rem;
        right: calc(((100vw - 45.8rem)/2) * -1);
        left: initial;
        clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, background-position-x .25s ease-out;
        background-image: conic-gradient(from 44.9deg, var(--accentColor) 45deg 90deg, transparent 90.1deg);
        background-repeat: no-repeat;
        background-size: var(--arrow-size);
        background-position-x: 100%;
        scrollbar-width: none;
    }
    .sidebox::-webkit-scrollbar { width: 0px; }
 
    .sidebox > * {
        opacity: 0;
        transition: opacity 0.2s ease-in-out 0.2s;
    }
 
    .sidebox:is(:hover,:focus-within) {
        clip-path: inset(-0.125rem -0.25rem 0 0);
        background-position-x: calc(100% + var(--arrow-size));
    }
 
    .sidebox:is(:hover,:focus-within) > * {
        opacity: 1;
    }
}
 
@media (max-width:768px) {
    .sidebox, .sidebox:is(:hover,:focus-within) {
        right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
    }
}

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

tema

La Fundación SCP

Rama Hispanohablante

Info

Más información

Primer Título

Segundo Título

Tercer Título

Cuarto Título

Quinto Título

Sexto Título

La fuente del encabezado es Josefin Sans.

Código Fuente: