Este es un ejemplo funcional del authorbox. Consulta la subseccion Sideboxes para más información.
Navegación
I. ¿Qué es esto?
II. Cómo Usar
1. Componentes Precargados
2. Variables Personalizables
3. Encabezado Flops
4. Sideboxes
5. Porciones Cambiables Misc.
6. Variantes del Tema
III. Ejemplos de Formateo (GENERAL)
IV. Ejemplos de Formateo (AVANZADO)
Flopstyle: OSCURO |
---|
Quien me dio el poder de editar Penumbra cometió un grave error. |
Este es un ejemplo funcional del sidebox.
⮤ Esto es una flavorbox ⮥
Consulta la subsección Sideboxes para más información.
Flopstyle: OSCURO
Temas Sigma-9 » Flopstyle: OSCURO
Puntuación
Puntuación + Módulo de Info
Módulo de Info Standalone
Info
¿Qué Es Esto?
Este es un tema creado por Lt Flops. Está pensado para su uso generalizado en cualquier artículo en el que se prefiera el modo oscuro o el modo nocturno.
Flopstyle: OSCURO existe para que pueda actualizarlo fácilmente, independientemente de todas las páginas que lo incluyan. Es de esperar que el CSS cambie sutilmente con el tiempo.
Utiliza esto sólo si entiendes lo que estás haciendo.
Este tema es incompatible con Black Highlighter y BASALTO. Si tu página incluye Black Highlighter o BASALTO, no utilices este tema, o tendrás errores importantes.
Flopstyle: OSCURO es un derivado de los siguientes temas:
Créditos mayores a JackalRelated, quién creó el theme logo (CC BY-SA 3.0).
Por ultimo pero no menos importante, gracias a stormbreath, quien revisó el tema entero, y a Croquembouche, que aportó en un par de áreas.
Cómo Usar
La Información Esencial
Por favor, lee esta sección introductoria antes de configurar Flopstyle: OSCURA en tu página.
PASO 1. INCLUYE EL TEMA Copia esta sintaxis y pégala en la parte superior de tu página:
[[include theme:flopstyle-dark]]
[OPCIONAL] PASO 2. AÑADIR LÍNEA DE REFERENCIACopia esta sintaxis y pégala directamente debajo del módulo de puntuación — así:
[[module Rate]]
[[div class="byline"]]
[[span]] by authorLink [[/span]](A)
[[span]] # [[/span]](B)
[[/div]]
2. (A) Reemplaza authorLink con el nombre del/los autor(es), y un/los enlace(s) a las páginas pertinentes del autor.
2. (B) Reemplaza # con el tiempo estimado (en minutes) que le tomaría a un lector terminar tu artículo. Para estimar el tiempo de lectura de tu artículo, puedes copiar el texto del artículo y pegarlo en la herramienta Read-o-Meter, y luego redondea para arriba o abajo el minuto más cercano..AVISO Read-o-Meter no registra ni almacena tus datos.
‼️ Asegúrate de que no hay espacios entre las líneas que contienen los spans, ¡o no funcionará como es debido!
PASO 3. ESTABLECER TÍTULO DE PÁGINA Copia esta sintaxis y pégala donde quieras señalar el inicio de tu artículo:
[[div class="meta-title"]]
Tu Título Aquí
[[/div]]
Por razones de accesibilidad, debeS hacer esto en cada página que utilice Flopstyle: oscuro.
PASO 4. ESTABLECER NAVEGACIÓN DE MIGAJAS Copia esta sintaxis y pégala directamente debajo del título de la página:
[[div class="pseudocrumbs"]]
[[[parent-page-url1|1° Título de Página Padre]]] » Título de Página Hija
[[[parent-page-url2|2° Título de Página Padre]]] » Título de Página Hija
[[/div]]
‼️ Si estás creando un artículo que requiere el uso de ListPages, no te preocupes — aún puedes ascender tus fragments como es usual, pero debes hacerlo de la manera tradicional. La funcionalidad prima sobre la forma en este caso.
Ahora… Si la estética básica es todo lo que quieres de Flopstyle: DARK, eres libre de coger el código y salir corriendo. Pero si sigues avanzando, puedo mostrarte lo profundo que es este agujero de conejo.
Flopstyle: OSCURO fue diseñado con los siguientes componentes en mente…
1. Componentes pre-cargados
Este tema viene pre-cargado con los siguientes seis componentes:
1.1. Animación de ACS por EstrellaYoshte
1.2. Mejores Notas al Pie por EstrellaYoshte
1.3. CSS Croqstyle por Croquembouche
1.4. Fundido de Entrada (con speed=1) por Croquembouche
1.5. Estilo de Texto (Por JaonHax) by JaonHax
1.6. Alternar Barra Lateral por EstrellaYoshte
2. Variables Personalizables
(Cámbialas solo si entiendes lo que estás haciendo)
Todos los cambios de variables deben estar envueltos/encerrados en un módulo CSS, [[module CSS]]. Todos los enumerados también deben estar envueltos/encerrados en un selector :root.
2.1. COLORES Puedes cambiar una variedad de colores del tema según te plazca. Simplemente copia cualquiera de las siguientes variables (pero sólo las que necesites) y edítalas como sea necesario:
[[module CSS]]
:root{
/* -- COLORES -- */
--accentColor: accent_color;
--accentColorLite: lighter_accent_color;
--hue: hue;
/* Estándares (No copiar):
* accentColor:
Bright Tyrian pink hsl(325, 85%, 55%).
* accentColorLite:
Soft Tyrian pink hsla(325, 85%, 65%, .5).
* hue: 325deg.
**/
accentColor es la variable de página más utilizada. Entre todas las demás variables, cambiar el accentColor es normalmente la única alteración que los usuarios de este tema tienden a hacer.
Cuando cambies accentColor, también debes cambiar otras dos variables:
2.1. (A) accentColorLite: Debe tener una luminosidad más alta y un valor alfa más bajo que su accentColor. Recomiendo una luminosidad de al menos un 10% más que la de su accentColor elegido, y un valor alfa de 0,5.
2.1. (B) hue: Debe coincidir con el tono de su accentColor elegido.
Para seleccionar el color que desees, te recomiendo el HSL Color Picker. HSL es un sistema de color amigable con el ser humano que significa Hue, Saturation, Lightness, que en español serían Tono, Saturación y Luminosidad, respectivamente. Se puede ampliar a HSLA, que incluye el valor Alfa (opacidad).
Para confirmar que el accentColor elegido cumple con las Directrices de Accesibilidad del Contenido en la Web, chequea este Ratio de Contraste. Inserta
hsl(222, 12%, 21%) en el campo de "Background", y tu accentColor escogido en el campo de "Text color". Las directrices exigen una relación de contraste de 3 o superior para el texto de los encabezados.
2.2. LOGOS Y FUENTES Puede cambiar el logotipo, las fuentes, etc.:
/* -- LOGOS -- */
--lgurl: url(URL_HERE);
/* -- FUENTES -- */
--header-font: "yourFont", sans-serif;
--body-font: "yourFont", sans-serif;
/* Estándares (No copiar):
* header-font: Montserrat, sans-serif
* body-font: Inter, sans-serif
**/
2.3. TÍTULOS DE ENCABEZADO También puedes cambiar el título, el subtítulo, el color del título y el color del subtítulo:
/* -- TÍTULOS -- */
--header-title: "TÍTULO";
--header-subtitle: "SUBTÍTULO";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;
/* Estándares (No copiar):
* titleColor:
Bright Tyrian pink hsl(325, 85%, 55%).
* subtitleColor:
Bright Tyrian pink hsl(325, 85%, 55%).
**/
}
[[/module]]
3. Encabezado Flops
Flopstyle: OSCURO proporciona una versión del Encabezado Flops apta para el modo oscuro:
[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]
4. Sideboxes
Sideboxes son componentes incorporados que vienen en dos tipos:
- Tipo-A authorbox y sidebox
- Tipo-B sidecontainer
Las instrucciones de uso varían según el tipo.
- La authorbox y el sidebox no se muestran en pantallas de width=1280px y menores, lo que incluye las pantallas de los móviles. Pueden configurarse para mostrar la información de la página y del autor.
- El sidecontainer se hunde en el borde de la página en pantallas de width=1280px y menores. En esas pantallas, se puede acceder a él tocando con el dedo o pasando el cursor por encima. Se puede configurar para que muestre información narrativa adicional.
Ten en cuenta estas condiciones antes de configurar estos elementos: un porcentaje considerable de los usuarios de la Wiki SCP navega a través de dispositivos móviles.
Tipo-A Authorbox y Sidebox
(Ver arriba a la izquierda y arriba a la derecha)
Adaptado del Tema Peumbra por EstrellaYoshte
Por defecto, la authorbox está opt-out. Viene precargado en todas las páginas que incluyen Flopstyle: OSCURO. Si deseas removerlo, reemplaza esto:
[[include theme:flopstyle-dark]]
Por esto:
[[div style="display: none;"]]
[[include theme:flopstyle-dark]]
[[/div]]
ALTERNATIVA 1 Después de eliminar la authorbox, puedes reemplazarla con una versión personalizada que muestre la información que deseas. Esta funcionalidad puede ser especialmente útil para páginas con coautoría, reescritas o traducidas. Para referencia, este es el código que crea el authorbox:
[[div class="anchor"]]Establece la posición adhesiva de la caja de autor.
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] By [[/span]] %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]
[[div class="flavorbox"]]Creates authorbox's flavorbox.
Desired flavor text here.
[[/div]]
[[/div]]
[[/div]]Establece el límite final del anclaje.
Por defecto, la authorbox hace uso de ListPages para automatizar los metadatos mostrados. Teóricamente podrías copiar el módulo ListPages dentro de la authorbox y pegarlo en cualquier página de la Wiki, y estos campos se rellenarían de forma exclusiva para esa página. Por supuesto, puedes cambiar cualquiera de estos campos si lo deseas.
También puedes editar tu authorbox personalizado para mostrar un texto de un sabor adaptado a tu página, como una nota para los lectores.
RECUERDA — El uso del flavorbox es opcional. Pero es el único bloque div que debes utilizar dentro de un authorbox.
ALTERNATIVA 2 Si quieres, puedes mover la authorbox a la derecha de la página cambiándola por la sidebox. Para crear un sidebox, copia esta sintaxis y pégala dentro de un módulo CSS en la parte superior de tu página:
[[div class="anchor"]]Sets sidebox's sticky position.
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] Por [[/span]] %%created_by_linked%% ||
||~ Publicado el %%created_at|%d %b %Y%% ||
[[/module]]
[[div class="flavorbox"]]Crea el flavorbox de caja lateral.
Texto saborizado deseado aquí.
[[/div]]
[[/div]]
[[/div]]Establece el límite final del anclaje.
Si tienes pensado insertar algún sidecontainer en tu página, te recomiendo encarecidamente que utilices la authorbox en lugar de la sidebox. La razón es que, cuando el sidebox y el sidecontainer aparecen en tándem, se superponen y quedan visualmente desordenados. Esto puede resultar muy confuso para los lectores. Por lo tanto, es mejor permanecer en el lado seguro.
Puedes configurar un sidebox para transmitir la misma información que un authorbox. O, como en el caso de la tabla que muestro aquí, puedes añadir un eslogan de artículo y un icono único.
Como cualquier otra tabla, también puedes aplicar un tono único — por ejemplo, el verde actual, como se consigue con table1. Consulta Formateo de Tabla en la sección Ejemplos de Formateo (GENERAL) para más información.
Sidecontainer Tipo-B
(Ver Abajo)
Cortesía de Woedenaz
El sidecontainer está opt-in. Está configurado así:
[[div class="limit"]]Establece el límite de inicio del anclaje.
[[div class="anchor"]]Establece la posición adhesiva del sidecontainer.
[[div class="sidecontainer"]]
Texto de sidecontainer deseado aquí.
[[/div]]
[[/div]]
Texto con el que el sidecontainer se asocia.
[[/div]]Establece el límite final del anclaje.
Recomiendo insertar un salto de línea manual después del texto asociado al sidecontainer. Puedes conseguirlo encerrando un espacio con dos conjuntos de @@ (uno a cada lado). El sidecontainer aparecerá junto a este texto al pasar por él.
Con delicadeza, es posible
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non molestie nulla. Morbi vitae massa auctor, porta arcu eget, dictum tellus. Etiam scelerisque aliquam ipsum, ac convallis lorem scelerisque eget.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In finibus purus non commodo porttitor. Integer sed felis dui. Nulla nec tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
tener múltiples sidecontainers,
Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.
Sed non sollicitudin nisl. Suspendisse finibus, est et venenatis placerat, diam lorem porttitor elit, ac sollicitudin arcu erat et orci. Curabitur erat mi, congue quis imperdiet ut, fringilla vitae sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ante pretium est commodo convallis id a sapien. Morbi sit amet ultricies urna.
que actúen así.
Ut semper, tellus vel tristique convallis, nulla mi laoreet nisi, eu malesuada ipsum magna sed dolor. Pellentesque nec lorem eu ante tristique efficitur. Sed auctor tortor ipsum. Morbi laoreet interdum scelerisque. Vivamus id enim nisl. Donec vitae leo suscipit, venenatis tortor eget, laoreet diam.
Sed sollicitudin, arcu ut condimentum vulputate, dui diam convallis velit, vitae ultricies leo libero non metus. Vestibulum at aliquam nisi. Aenean molestie tortor orci, ac volutpat magna eleifend vitae. Morbi tristique risus tortor, feugiat efficitur augue imperdiet ut. Aliquam nec urna lacinia, pretium ligula ut, gravida ex.
Recuerda el div limit. Sin un limit, el anchor permanecerá presente en todo el contenido de la página una vez que se desplace más allá de su posición inicial.
5. Porciones Cambiales Misc.
Si es necesario, también puedes editar cualquiera de estas propiedades CSS para adaptarlas mejor a tu página.
Cambiar Opacidad del Logo
#extra-div-1{
filter: opacity(number_percentage);
}
Opacidad Estándar = 33%
6. Variantes del Tema
Si insertas una variable diferente en el bloque de inclusión del tema, puedes aplicar una variante de tema prefabricada a tu página.
Variante BRUJA
Para el futuro canon "Tejiendo Hilos Imperceptibles"
[[include theme:flopstyle-dark witch=a]]
Variante INFERNO
Para el Canon "De los Archivos del Sitio-120"
[[include theme:flopstyle-dark inferno=a]]
Variante VANGUARDIA
Para el Canon de "No Retorno" — Rama de la Vanguardia
[[include theme:flopstyle-dark vanguard=a]]
Variante UMBRAL
Para el Canon de "No Retorno" — Rama del Umbral
[[include theme:flopstyle-dark threshold=a]]
Variante PRAIRIE
Para el futuro Canon "La Forma En Que Se Va"
[[include theme:flopstyle-dark prairie=a]]
Variante ESPUMA DE MAR
Para la Serie de "El Consejo de Pesca"
[[include theme:flopstyle-dark seafoam=a]]
Variante HORA DE LA BRUJERÍA
Para el Canon "ANOCHECER"
[[include theme:flopstyle-dark witching-hour=a]]
Variante EL MOSTRO
Para Halloween 🎃
[[include theme:flopstyle-dark monster=a]]
Variante PEENUMBRA
Variante de Broma
[[include theme:flopstyle-dark peenumbra=a]]
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
negrita | cursiva | subrayado | tachado | monoespaciado | superíndicesubíndice
Tipea 4 guiones ---- para crear una regla horizontal.
Table of Contents
|
selector de código falso{
propiedad falsa: valor falso;
}
Un enlace (Un enlace que probablemente visitaste)
- lista numerada
- ítem enlistado
- ítem enlistado
- lista con viñetas
- ítem enlistado
- ítem enlistado
- Tabulador
- Tabulación
- Tab Larga
- Esta pestaña vacía tiene un nombre muy largo por alguna extraña razón. Me pregunto por qué. Es muy extraño.
- Pestaña Vacía
- Pestaña Vacía
- Pestaña Vacía
- Pestaña Vacía
- Pestaña Vacía
Esta es una vista de tab.
Oye mira, hay más texto acá.
Qué pintoresco.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Esta es una pestaña larga. Contiene mucho texto.
Image Blocks
BS Image Block
BS Image Block
Instrucciones de Instalación
PASO 1 Copia y pega esto en tu página:
[[include :snippets:bs-image
|heading=
|link=
|image=
|caption=
|width=
|float=
|alt=
|kind=
]]
PASO 2 Consulta esta breve guía:
Inicio del Include Box ↦
Título de Imagen ↦
Enlace de Imagen ↦
Archivo de Imagen ↦
Descripción de Imagen ↦
Número y Unidad ↦
En Qué Lado el Image Block se Sienta ↦
Texto Alternativo (Consulta la explicación a continuación) ↦
Color del Image Block (¡Prúebalos!) ↦ Primario Recomendado // Blank = Estándar
Fin del Include Block ↦
[[include :snippets:bs-image
|heading=Título
|link=linkna.me
|image=nombredearchivo.png
|caption=Texto Descriptivo
|width=length
|float=left/middle/right
|alt=Texto Alternativo
|kind=primary/info/success/danger/warning/none
]]
PASO 3 Rellene todos los campos después de cada signo de igual =.
Text Alternativo (Alt-Text)
Por razones de accesibilidad, recomiendo encarecidamente el uso del alt-text en tus imágenes. Si necesitas una comprensión detallada del texto alternativo y su relación con la accesibilidad, te recomiendo este artículo escrito por The Big Hack.
Lo esencial es que: Cuando se configura una imagen, lo más probable es que algunos lectores, como los que tienen problemas de visión o ceguera, no puedan verla. Lo que hace el texto alternativo es proporcionar una descripción concisa de dicha imagen que un lector de pantalla puede analizar fácilmente. El texto alternativo también aparecerá si el archivo/enlace de la imagen no está disponible.
Para configurar el texto alternativo de una imagen, todo lo que tienes que incluir es el campo alt dentro de un BS Image Block o *Wiki Syntax-inserted image**...AVISO EL Image Block Estándar no tiene soporte para alt-text
Una demostración:
[[include :snippets:bs-image
|heading=Larry the Cat
|link=/local--files/theme:flopstyle-dark/Larry_the_cat.jpg
|image=Larry_the_cat.jpg
|caption=He is very soft.
|width=300px
|float=middle
|alt=Larry, a beige cat, sits alert beside a wooden lawn chair in a yard.
|kind=primary
]]
Preste atención al campo alt. Eso es lo que un lector de pantalla transmitirá a su usuario.
Imagediv
Tomado del BLANKSTYLE CSS por Placeholder McD y HarryBlank
[[div class="imagediv"]]
[[=image URL_AQUÍ]]
[[/div]]
Tablas Estándar
encabezado | encabezado | encabezado | encabezado |
---|---|---|---|
contenidodecelda | contenidodecelda | contenidodecelda | contenidodecelda |
Una tabla, con un estilo hcell muy cool | |
---|---|
¡Cuyas celdas han sido separadas | por el div tableb! |
Tablas ACS-Coloreadas
Tomado del BLANKSTYLE CSS por Placeholder McD y HarryBlank
This is a GREEN table; |
---|
it is fun to test. |
[[div class="table1"]]
Esta es una tabla AZUL; |
---|
también es divertido probarla. |
[[div class="table2"]]
Esta es una tabla AMARILLA; |
---|
también es divertido probarla. |
[[div class="table3"]]
Esta es una tabla NARANJA; |
---|
también es divertido probarla. |
[[div class="table4"]]
Esta es una tabla ROJA; |
---|
no es divertido probarla. |
[[div class="table5"]]
Esta es una tabla VIOLETA; |
---|
ella es la prueba. |
[[div class="table6"]]
Esta es una tabla BLANCA; |
---|
no hay prueba. |
[[div class="table0"]]
Combina tramos de tabla numerados y texto en negrita para crear texto en negrita de color:
VERDE
[[span class="table1"]] **VERDE** [[/span]]
AZUL
[[span class="table2"]] **AZUL** [[/span]]
AMARILLO
[[span class="table3"]] **AMARILLO** [[/span]]
NARANJA
[[span class="table4"]] **NARANJA** [[/span]]
ROJO
[[span class="table5"]] **ROJO** [[/span]]
VIOLETA
[[span class="table6"]] **VIOLETA** [[/span]]
BLANCO
[[span class="table0"]] **BLANCO** [[/span]]
Cada ejemplo de div block contiene:
- Apariencia de div.
- Síntaxis de uso.
- Algunos pueden incluir también un resumen del uso previsto.
💡 ¡Recuerda encerrar tus divs con [[/div]]!
Sinceramente,
Jean Karlyle Aktus, Director, USINBL Sitio-81
[[div class="classification-header"]]
Firmado,
Odongo Tejani, Presidente, Comité de Ética
[[div class="ethics-header"]]
— Eli Forkley, Director, DeMe
[[div class="miscomm-header"]]
— Kazuo Natsumi, Broma-contrario, Ensamblaje de la Carrocería
[[div class="oracle-header"]]
— ~ —
POR UNANIMIDAD DE LOS SUPERVISORES
[[div class="overwatch-header"]]
— Maria Jones, Directora, ASRI
[[div class="raisa-header"]]
Respiración automática desactivada.
[[div class="warning-header"]]
ENCABEZADO DE REGISTRO
Para usar encima de los registros de entrevistas/incidentes/exploraciones
[[div class="log-header"]]
+++* Encabezado
----
Text
[[/div]]
Bloque de Citas
[[div class="blockquote"]]
Bloque de Citas Anidado
Bloque de Citas Alternativo 1 — Sólido
[[div class="blockquote solid"]]
Bloque de Citas Alternativo 2 — Clásico
[[div class="blockquote classic"]]
Bloque de Citas Alternativo 3 — Clásico Curvado
[[div class="blockquote classic curved"]]
Bloque de Citas Alternativo 4 — Ligero
[[div class="blockquote lightweight"]]
Bloque de Citas Alternativo 5 — Simple
[[div class="blockquote simple"]]
Tamaño de cita más grande
[[div class="blockquote simple larger"]]
La clase "larger" también se puede aplicar a los divs Darkbox, Lightbox y Report Box, y sus variaciones.
Darkbox
[[div class="darkbox"]]
Lightbox
[[div class="lightbox"]]
REPORT BOX
Para Documentos Internos
[[div class="report-box"]]
+++* Encabezado
----
Text
[[/div]]
Variaciones del Report Block
Rojo
[[div class="report-box red-tint"]]
Naranja
[[div class="report-box orange-tint"]]
Amarillo
[[div class="report-box yellow-tint"]]
Verde
[[div class="report-box green-tint"]]
Cian
[[div class="report-box cyan-tint"]]
Azul
[[div class="report-box blue-tint"]]
Magenta
[[div class="report-box magenta-tint"]]
Gris
[[div class="report-box grey-tint"]]
Caja del Comando Supervisor
[[div class="overwatch-box"]]
Código de Página
[[div class="page-source"]]
Bloque de Narración
Lorem ipsum dolor sit amet, quis habeo facilisi eum an. Habeo denique consequuntur nec at, id his agam inciderint. Ex veri doming disputationi quo, error clita eruditi ei quo. Melius labitur comprehensam pro cu. Ut dico veritus assueverit sed.
Duo justo vitae dicant cu, ut his vitae appetere eloquentiam. Repudiare consequat ei eum, ex eam vocibus denique iracundia. Vix vocent minimum sensibus in, ad quando phaedrum intellegam sed. Fastidii argumentum ne vel, ad sint errem.
[[div class="narration justified indented"]]
Bloque de Diario
[[div class="journal"]]
Texto Destacado.
[[span class="highlighter"]]
Nota: Este div limita la creación de un doble salto de línea. Para lograr uno, haga lo siguiente:
1. Al final de cada línea de texto, pulsa Enter.
2. En esa nueva línea, encierra un espacio con dos conjuntos de @@ (un par por lado).
3. Vuelve a pulsar Enter y continúa escribiendo.
Este es el div Text Style hecho por JaonHax.
¿De verdad?
Yep.
Pero, ¿cómo se usa?
¿Una guía? ¿Es eso un enlace?
¡Claro que si!
Por favor, consulta la guía - dice exactamente cómo configurar esto.
Configurame ésta…
😳
😳
AVISO DE PELIGRO NARRATIVO
El archivo al que desea acceder, “SCP-████,” describe una anomalía narrativa imprevisible que se cruza con múltiples capas subnarrativas. Se requiere una inoculación narrativa, ya que este documento contiene varias anomalías narrativas incrustadas. El personal que no esté vacunado contra estas anomalías puede experimentar un evento de paráfrasis narrativa.
¿Está seguro de que desea continuar?
[[div class="hazard-box hazard-box-#"]]1
[[div class="hazard-box-image"]]
[[div class="hazard-box-image-#"]]2
[[image imageLink.png]]3
[[/div]]
[[/div]]
[[div class="hazard-box-text"]]
+++* TÍTULO
Pon lo que quieras aquí.
[[/div]]
[[/div]]
- Para la hazard-box-#, los números 1–5 han sido pareados con los colores del ACS, más un violeta (6) y un blanco (0). El desglose de estas combinaciones de color y número es el siguiente:
- hazard-box-1 = Verde
- hazard-box-2 = Azuk
- hazard-box-3 = Amarillo
- hazard-box-4 = Naranja
- hazard-box-5 = Rojo
- hazard-box-6 = Violeta
- hazard-box-0 = Blanco
- Para hazard-box-image-#, selecciona el mismo número que en el apartado anterior.
- Aquí, sustituye el enlace del marcador de posición por una de las Señales de Peligro creadas por EstrellaYoshte como se ve en su página de arte. He incluido los enlaces a sus cinco Señales de Peligro. Dicho esto, te animo a que visites su página de arte y le des un +1, ¡porque sus imágenes han jugado un papel inestimable para embellecer este tema!
Cada ejemplo de formateo especial contiene:
- Aspecto del formateo.
- Sintaxis de uso.
- Algunos pueden incluir también un resumen del uso previsto.
💡 ¡Recuerda encerrar tus divs/spans con [[/div]] o [[/span]] cuando sea necesario!
Texto Centrado
Nulla egestas risus ac venenatis rhoncus. Nunc imperdiet mattis risus ac iaculis. Etiam egestas est lorem, at vehicula odio convallis eu. Nam condimentum, nisl sed rutrum tempor, sapien nibh elementum justo, non semper leo ante at tortor. Praesent ac enim a nisi luctus commodo. Vivamus et euismod leo, sed volutpat ligula. Fusce nec tempus lacus, a placerat risus. Phasellus luctus.
[[div class="centered"]]
Texto Justificado
Ut ut quam non augue malesuada lacinia. Sed a eros sit amet lacus cursus tempor viverra nec velit. Suspendisse vel ante tincidunt, ultrices metus id, pellentesque odio. Integer sodales enim vel ligula sagittis, quis aliquam mauris tincidunt. Maecenas fringilla turpis vitae luctus tempus. Suspendisse ut mollis lectus. Donec nisi mauris, laoreet ac urna at, semper lobortis turpis. Sed purus elit, scelerisque ut tortor sed, laoreet dapibus odio. In libero mauris.
[[div class="justified"]]
Texto con Sangría
Aliquam fringilla eleifend tellus, feugiat pellentesque lacus auctor vitae. Praesent volutpat rutrum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at commodo leo. Aliquam sapien eros, bibendum id vulputate in, convallis vestibulum diam. Suspendisse ultricies vel ante eu porttitor. In a massa ante. Sed eu elit.
[[div class="indented"]]
Marca de Fin
“end mark: Elemento tipográfico que señala el final de un artículo. A menudo son simples viñetas, pero también pueden ser símbolos intrincados”.
[[div class="end-mark"]] coloca una marca de fin al final del último párrafo dentro de su div (¡como al final del siguiente!). Utilízalo junto con cualquier formato de texto especial adicional. Este tema utiliza el símbolo de marca final por defecto de un diamante blanco dividido por una 'X'.
Las marcas finales son una convención clásica de la imprenta. En la Wiki SCP, una marca de fin sería lo más apropiada en la escritura de un Relato.
Revisión de Documento con Texto Rojo
Inoculación diseminada.
[[span class="rev-red"]] Texto [[/span]]
Revisión de Documento con Texto Amarillo
Carga pausada. ¿Recargar?
[[span class="rev-yellow"]] Texto [[/span]]
Revisión de Documento con Texto Verde
La información anticuada aparece en verde.
[[span class="rev-green"]] Texto [[/span]]
Revisión de Documento con Texto Azul
¡Inoculación completada!
[[span class="rev-blue"]] Texto [[/span]]
Texto de Terminal de Computadora
[CENSURACIÓN]
[EXPURGACIÓN]
[DATOS PERDICIONADOS]
[[span class="terminal-span"]] [TEXTO] [[/span]]
Texto en Negrita
Ejemplo
[[span class="bt"]] Texto [[/span]]
También puede crear texto en negrita mediante el uso de la Sintaxis de Wikidot. Sin embargo, este lapso es necesario para las siguientes dos piezas de formato especial.
Texto en Negrita + Barra-Grande
Ejemplo
[[span class="bt bb"]] Texto [[/span]]
Texto en Negrita + Barra-Encabezado
EJEMPLO
+++* [[span class="bt bh"]] TEXTO [[/span]]
Texto en Negrita + textColor
Ejemplo
[[span class="tb"]] Texto [[/span]]
Texto en Negrita + textColor + Barra-Grande
Ejemplo
[[span class="tb bb"]] Texto [[/span]]
Cursor de Texto Parpadeante
[[div id="append-blink-bar"]] coloca un carácter parpadeante "Full Block" al final del último párrafo dentro de su div. Esto imita un cursor parpadeante clásico, como el que se ve al final de una línea de comandos.
Regla Horizontal Elegante
[[div class="fancyhr"]]
----
[[/div]]
Borde Elegante
[[div class="fancyborder"]]
Encabezado Especial de Área 1
ENCABEZADO
SUB-ENCABEZADO
[[div class="lite-heading"]]
----
++* ENCABEZADO
+++* SUB-ENCABEZADO
----
[[/div]]
Encabezado Especial de Área 2
MATERIALES DE ADICIÓN
[[div class="lite-heading"]]
----
++* MATERIALES DE ADICIÓN
----
[[/div]]
/Muestra de Imágenes Alternativa//
[[div class="image-showcase"]]
[[=image URL_HERE]]
[[/div]]
Scene Break
[[=image URL_HERE class="scene-break"]]
Un scene-break es un símbolo ornamental que "señala una pausa para el lector y una transición en la narración".
Los scene breaks son una convención clásica de la imprenta. Aquí hay un ejemplo de uno de Alicia en el País de las Maravillas. En la Wiki SCP, un scene-break sería más apropiado en la escritura de un Relato.
Scene Break + Ícono Entintado
[[=image URL_HERE class="scene-break icon-tint"]]
icon-tint sólo debe utilizarse junto con logotipos negros. Controla el color del icono modificando la variable --hue dentro de [[módulo CSS]]:
--hue: #deg;
Sustituye # por el número entero positivo que desees. Por defecto es 325deg.
Navegador ListPages — Primera Página
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[/offset/1 Siguiente Iteración ▷]
[[/div]]
[[/div]]
Navegador ListPages — Páginas Subsecuentes
next siempre debe ir primero:
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[/offset/1 Siguiente Iteración ▷]
[[/div]]
[[div class="listPagesNav-prev"]]
[/offset/0 ◁ Atrás]
[[/div]]
[[/div]]
Desvanecer a Negro
[[div class="fade-away"]]
Para controlar la duración del desvanecer, inserta tantos conjuntos de @@ dentro del div como desees.
Desvanecer a Blanco
[[div class="whiteout"]]
Para controlar la duración del desvanecer, inserta tantos conjuntos de @@ dentro del div como desees.
Pie de Página
[[div class="footing"]]
Caja de Artículos Relacionados
[[div class="related-flex"]]
[[div class="related"]]
* **[[[link-to-a-page|Texto Personalizado]]]**
[[/div]]
[[/div]]
Navegador de Series
[[div class="series-nav"]]
« Página Previa | [[size 120%]]Página Actual[[/size]] | Página Siguiente »
[[/div]]
Navegador de Series «Earthworm»
por Croquembouche
Consulta la página del componente para instrucciones de instalación.
/* FONTS */ @import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap); @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap); @import url(https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap); /* YUI TAB BASE */ @import url(https://lafundacionscp.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);
/* Flopstyle: DARK * [2022 Wikidot Theme] * Created by Lt Flops * Forked From: * Flopstyle CSS by Lt Flops * PLACESTYLE CSS by Placeholder McD * Based On: * Ad Astra Theme by NatVoltaic, stormbreath * AZASTYLE CSS by Azamo * BASALT Theme by Azamo, Placeholder McD * BLANKSTYLE CSS by Placeholder McD, HarryBlank * Night Rush Theme by Nagiros * Paperstack Theme by EstrellaYoshte * Penumbra Theme by EstrellaYoshte **/ /* -------- HEADER AREA -------- */ /* ---- COMMON ---- */ :root{ /* -- CHANGEABLE COLORS -- */ --accentColor: hsl(325, 85%, 55%); --accentColorLite: hsla(325, 85%, 65%, .5); --hue: 325deg; --tint: calc(var(--hue) - 40deg); --titleColor: var(--accentColor); --subtitleColor: var(--accentColor); /* -- STATIC COLORS -- */ --textColor: hsl(212, 3%, 85%); --textColorAlt: hsl(212, 3%, 79%); --bgColor: hsl(222, 12%, 21%); background: var(--bgColor); --fgColor: hsl(222, 16%, 15%); --alphaColor: hsl(0, 0%, 100%); --keyColor: hsl(0, 0%, 5%); --bright-red: hsl(360, 89%, 62%); --strong-lime-green: hsl(120, 80%, 40%); --dark-grayish-blue: hsl(212, 15%, 63%); /* -- LOGO -- */ --lgurl: url(https://lafundacionscp.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png); /* -- FONTS -- */ --header-font: "Montserrat", sans-serif; --body-font: "Inter", sans-serif; --script-font: "Comic Neue", cursive; /* -- MISCELLANEOUS -- * Courtesy Of EstrellaYoshte */ --side-bar-width: 17em; --content-wrap-width: 1080px; } html{ scroll-behavior: smooth; } body{ /* -- ACS COLORS -- * Courtesy of Nagiros **/ --one-color: 40, 159, 107; /* Green */ --two-color: 117, 167, 242; /* Blue */ --three-color: 255, 226, 82; /* Yellow */ --four-color: 255, 141, 54; /* Orange */ --five-color: 255, 34, 67; /* Red */ --six-color: 161, 73, 248; /* Violet */ --white-bar: 205, 206, 208; /* White */ --lg-bar: 118, 118, 130; --gray-bg: 66, 66, 72; color: var(--textColor); background-image: linear-gradient( var(--fgColor) 0 90px, var(--bgColor) 200px 100%); background-repeat: no-repeat; font-family: var(--body-font); font-size: 15px; text-rendering: optimizeLegibility; overflow-wrap: break-word; } #content-wrap{ max-width: var(--content-wrap-width); margin: 2.5em auto 0; } #side-bar{ width: var(--side-bar-width); } #main-content{ top: -.8em; } @media (max-width: 767px){ #main-content{ margin: 0 5%; } } @media (min-width: 768px){ #page-content{ font-size: calc(15px * 1.05); } } /* ---- SCROLLBAR + SELECTION ---- */ :root{ scrollbar-color: var(--accentColor) var(--fgColor); } /* Cross-Browser Supports */ ::-webkit-scrollbar{ width: 1rem; } ::-webkit-scrollbar-thumb{ background: var(--accentColor); } ::-webkit-scrollbar-track{ background: var(--fgColor); } ::selection{ color: var(--keyColor); background: var(--accentColor); } /* ---- SITE BANNER ---- */ div#container-wrap, #header{ background: 0; } #header h1, #header h2{ float: none; margin: 0; text-align: center; } #header h2{ margin-top: .5em; } #header h1 span, #header h2 span{ /* Hides the Existing Text */ display: none; } #header h1 a::before{ /* Sets the New Text's Content From Variable */ content: var(--header-title, "FUNDACIÓN SCP"); color: var(--titleColor); font-size: 1.1em; } #header h2::before{ content: var(--header-subtitle, "SEGURIDAD - CONTENCIÓN - PROTECCIÓN"); color: var(--subtitleColor); font-size: 1.25em; } #header h1 a::before, #header h2::before{ /* Styles the New Text */ font-family: var(--header-font); letter-spacing: 2px; text-shadow: none; } @media (max-width: 767px){ #header h2{ margin-top: 0; } #header h1 a::before{ font-size: calc(110% * .7); } #header h2::before{ font-size: calc(125% * .7); } } #extra-div-1{ position: absolute; top: 0; width: 100%; height: 11.67em; background: var(--lgurl) center no-repeat; background-size: contain; filter: opacity(.33); z-index: 1; } /* ---- SEARCH ---- */ #search-top-box{ top: 1em; right: 0; } @media (max-width: 767px){ #search-top-box{ top: 1.85em; } } #search-top-box-form input.button{ margin: 0; } #search-top-box-form input[type=submit]{ background: var(--fgColor) !important; transition: color .2s ease-in-out; } #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-radius: 0; box-shadow: none; font-family: var(--body-font); font-size: calc(15px * 1.05); } #search-top-box-form input[type=submit]:hover{ color: var(--accentColor); border-color: var(--accentColor); } #search-top-box-form > input[type=text]{ display: none; } /* ---- TOP-BAR ---- */ #top-bar{ display: flex; justify-content: center; right: 0; } .top-bar::before{ position: absolute; top: -.5em; left: calc(100% / 4); width: calc(100% / 2); height: 5px; content: ""; background: linear-gradient( to right, transparent, var(--accentColor) 50%, transparent 100%); } #top-bar, #top-bar a{ color: var(--textColor); transition: 0; } #top-bar ul li ul{ border-color: var(--accentColor); } #top-bar ul li ul a{ color: var(--textColor); } #top-bar ul li.sfhover a, #top-bar ul li:hover a{ color: var(--textColorAlt); background: var(--fgColor); } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a{ border-top-color: var(--bgColor); } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover{ color: var(--accentColor); /* Top-Bar Hover Background-Color */ background: var(--fgColor); transition: color .2s ease-in-out; } @media (max-width: 767px){ .mobile-top-bar{ display: flex; justify-content: center; min-width: 100%; top: 0; left: 0; } .mobile-top-bar::before{ position: absolute; top: -.425em; width: calc(100% / 1.2909); height: 5px; content: ""; background: linear-gradient( to right, transparent, var(--accentColor) 50%, transparent 100%); } } /* ---- LOGIN ---- */ #login-status{ top: 1.1em; right: initial; color: var(--textColor); z-index: 1; } @media (max-width: 767px){ #login-status{ top: 0; right: 0; z-index: 20; } } #login-status a{ color: var(--accentColor); } #login-status ul a{ color: var(--textColorAlt); background: var(--fgColor); } #login-status ul a:hover{ color: var(--accentColor); background: var(--bgColor); } @media (max-width: 767px){ #header .printuser{ font-size: 0; } } .printuser a{ margin: 0; } .printuser img.small{ width: 18px; height: 18px; padding: 1px 4px 0 0; background-image: none !important; } @media (max-width: 767px){ #header .printuser img.small{ transform: translate(0, 4px); } } #my-account{ display: none; } #account-topbutton{ border-color: var(--accentColor); font: unset; } @media (max-width: 767px){ #account-topbutton{ margin: 0 0 0 5px; } } #account-topbutton:hover{ color: var(--fgColor); background: var(--accentColor); } /* ---- SIDE-BAR ---- */ #top-bar .open-menu a{ color: var(--accentColor); background: var(--fgColor); border: thin solid var(--accentColor); border-radius: 0; box-shadow: none; } #top-bar .open-menu a:hover{ padding: 0; color: var(--fgColor); background: var(--accentColor); } @supports (-moz-appearance: none){ #top-bar .open-menu a:hover{ color: var(--fgColor); background: var(--accentColor); } } #side-bar{ padding: 1em 0; background: var(--fgColor); } #side-bar .side-block{ background: var(--fgColor); border: 0; box-shadow: none; } #side-bar .side-block.media{ background: var(--fgColor); } .side-block.media a:hover{ padding: 0; } #side-bar .side-block.resources{ background: var(--fgColor); } .side-block.media > *{ display: flex; justify-content: space-evenly; } .menu-item > .image{ display: none; } #side-bar .heading{ color: var(--textColorAlt); border-bottom-color: var(--textColor); font: bold 95% "Josefin Sans", sans-serif; } @media (max-width: 767px){ #top-bar .open-menu a:hover{ box-shadow: none; } #side-bar .heading{ margin-left: -1em; padding-left: 1em; } #side-bar:target{ border: 0; } #side-bar .close-menu{ position: fixed; display: block; top: 0; right: 0; width: 100%; height: 100%; background: hsla(0, 0%, 0%, .3); background-position: 17em 50%; opacity: 0; transition: width .5s ease-in-out .1s, opacity 1s ease-in-out 0s; pointer-events: none; z-index: -1; } #side-bar:target .close-menu{ right: 0; left: auto; width: calc(100% - var(--side-bar-width)); opacity: 1; pointer-events: auto; } #side-bar:target .close-menu:hover{ background: unset; } } /* -------- CONTENT AREA -------- */ /* ---- SIDEBOXES | TYPE 'A' ---- * Adapted From: * Penumbra Theme by EstrellaYoshte **/ .anchor{ position: -webkit-sticky; position: sticky; top: 0; z-index: 5; } .authorbox, .sidebox, .sidecontainer{ position: absolute; width: calc((100vw - 870px) / 2); max-height: calc(100vh - 15rem); padding: .33rem 1.6rem; box-sizing: border-box; z-index: 5; } .authorbox, .sidebox{ font-size: 90%; } .authorbox{ right: 103.5%; max-width: calc((100vw - 921.2px) / 2) !important; margin-right: .53rem; padding-right: 1rem; } .sidebox, .sidecontainer{ left: 103.5%; } @media (max-width: 1280px){ .authorbox, .sidebox{ display: none; } } .authorbox .wiki-content-table, .sidebox .wiki-content-table{ max-width: 20em !important; } .sidebox img{ width: 7.5em; } .authorbox tr th, .authorbox tr td, .sidebox tr th, .sidebox tr td{ padding: .27rem !important; } .flavorbox{ width: 75%; margin: auto auto .33rem; padding: 0 1rem; color: var(--textColorAlt); background: var(--fgColor); border: thin solid var(--accentColor); } /* ---- SIDEBOXES | TYPE 'B' ---- * Courtesy Of Woedenaz **/ .limit{ line-height: 1.5; } .limit br{ display: block; } .sidecontainer{ margin-left: .53rem; color: var(--textColorAlt); background-color: var(--fgColor); border-top: medium solid var(--accentColor); overflow: auto; } @media (max-width: 1280px){ .sidecontainer{ top: 1rem; right: calc(((100vw - 45.8rem) / 2) * -1); left: initial; width: auto; max-width: 65vw !important; padding-right: .4rem; padding-left: .4rem; background-color: hsla(0, 0%, 0%, 0); border: 0; -webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem)); clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem)); -webkit-transition: color .2s ease-in-out .1s, -webkit-box-shadow .4s ease-in-out .1s, -webkit-clip-path .4s ease-in-out .1s; transition: color .2s ease-in-out .1s, -webkit-box-shadow .4s ease-in-out .1s, -webkit-clip-path .4s ease-in-out .1s; -o-transition: color .2s ease-in-out .1s, box-shadow .4s ease-in-out .1s, clip-path .4s ease-in-out .1s; transition: color .2s ease-in-out .1s, box-shadow .4s ease-in-out .1s, clip-path .4s ease-in-out .1s; transition: color .2s ease-in-out .1s, box-shadow .4s ease-in-out .1s, clip-path .4s ease-in-out .1s, -webkit-box-shadow .4s ease-in-out .1s, -webkit-clip-path .4s ease-in-out .1s; overflow-x: hidden; overflow-y: hidden; scrollbar-width: thin; } .sidecontainer::-webkit-scrollbar{ width: .5rem; } .sidecontainer::before, .sidecontainer::after{ position: absolute; right: 0; content: ""; } .sidecontainer::before{ top: calc(50% - .75rem); width: 0; height: 0; border-top: 11px solid transparent; border-right: 11px solid var(--accentColor); border-bottom: 11px solid transparent; transition: border .2s ease-in-out .1s; z-index: 10; } .sidecontainer::after{ top: 0; width: 100%; max-width: .75rem; height: 100%; max-height: calc(100vh - 15rem); background: var(--fgColor); box-shadow: .125rem 0 0 0 var(--accentColor); transition: box-shadow .4s ease-in-out .1s, max-width .4s ease-in-out .1s; z-index: -1; } .sidecontainer > *{ opacity: 0; -webkit-transition: opacity .2s ease-in-out .2s; -o-transition: opacity .2s ease-in-out .2s; transition: opacity .2s ease-in-out .2s; } .sidecontainer:hover, .sidecontainer:active{ background-color: var(--fgColor); -webkit-clip-path: inset(-.125rem -.25rem 0 0); clip-path: inset(-.125rem -.25rem 0 0); -webkit-transition: color .4s ease-in-out .2s, right .4s ease-in-out .1s, -webkit-clip-path .4s ease-in-out .1s, -webkit-box-shadow .4s ease-in-out .1s; transition: color .4s ease-in-out .2s, right .4s ease-in-out .1s, -webkit-clip-path .4s ease-in-out .1s, -webkit-box-shadow .4s ease-in-out .1s; -o-transition: color .4s ease-in-out .2s, right .4s ease-in-out .1s, clip-path .4s ease-in-out .1s, box-shadow .4s ease-in-out .1s; transition: color .4s ease-in-out .2s, right .4s ease-in-out .1s, clip-path .4s ease-in-out .1s, box-shadow .4s ease-in-out .1s; transition: color .4s ease-in-out .2s, right .4s ease-in-out .1s, clip-path .4s ease-in-out .1s, box-shadow .4s ease-in-out .1s, -webkit-clip-path .4s ease-in-out .1s, -webkit-box-shadow .4s ease-in-out .1s; overflow-y: scroll; } .sidecontainer:hover::before, .sidecontainer:active::before{ border: 0; } .sidecontainer:hover::after, .sidecontainer:active::after{ right: 0; max-width: 100%; box-shadow: 0 -.125rem 0 0 var(--accentColor); } .sidecontainer:hover > *, .sidecontainer:active > *{ opacity: 1; transition: opacity .4s ease-in-out .1s; } } @media (max-width: 767px){ .sidecontainer, .sidecontainer:hover, .sidecontainer:active{ right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1.6rem); } } /* ---- FANCY COLLAPSIBLES ---- */ /* Base */ .collapsible-block-folded, .collapsible-block-unfolded-link{ margin: 1rem auto; padding: .53rem 1rem; background: var(--fgColor); transition: all .2s ease-in-out; text-align: center; } .collapsible-block-unfolded-link{ border-top: thick solid var(--accentColor); transition: all .2s ease-in-out; } .collapsible-block-unfolded > *:nth-child(3){ border-top: 0; border-bottom: thick solid var(--accentColor); } .collapsible-block-link{ font: 1.35rem var(--header-font); letter-spacing: 1px; white-space: nowrap; word-break: break-all; } @media (max-width: 767px){ .collapsible-block-link{ font-size: .85rem; } } /* Pseudo-elements */ .collapsible-block-link::before{ content: "+ "; } .collapsible-block-link::after{ content: " +"; } .collapsible-block-unfolded .collapsible-block-link::before, .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::before{ content: "− " } .collapsible-block-unfolded .collapsible-block-link::after, .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::after{ content: " −" } .collapsible-block-folded:hover, .collapsible-block-unfolded-link:hover{ background-color: var(--accentColorLite); transition: all .2s ease-in-out; } .collapsible-block-link:hover{ padding: .067rem !important; color: var(--alphaColor); border-bottom: thin solid var(--alphaColor) !important; transition: all .2s ease-in-out; } /* Side-bar Collapsible */ #side-bar .collapsible-block-link{ font-size: unset; } #side-bar .collapsible-block-unfolded-link{ border-bottom: 0; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link{ color: var(--accentColor); } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover{ color: var(--alphaColor); } /* Licensebox Collapsible */ .licensebox .collapsible-block-content { text-align: center; } .licensebox blockquote, .licensebox div.blockquote { text-align: left; } /* ---- INFO BAR ---- */ .info-container{ --barColour: var(--fgColor); --linkColour: var(--accentColor); } .info-container .collapsible-block-link{ font-size: 100%; } .info-container .collapsible-block-unfolded-link{ border: 0; } .info-container div.collapsible-block-content{ padding: 0 .53rem 3rem; } @media (max-width: 767px){ .info-container div.collapsible-block-content div{ margin: 0; } } .info-container .wiki-content-table{ width: 90%; } .info-container .collapsible-block-folded, .info-container .collapsible-block-unfolded-link{ padding: 0; } .info-container .collapsible-block-folded:hover, .info-container .collapsible-block-unfolded-link:hover{ background-color: var(--accentColor); --linkColour: var(--fgColor); } #u-author_block > p > a, #u-author_block > p > a:hover{ border-bottom: thin solid var(--accentColor); box-shadow: none !important; transition: all .2s ease-in-out !important; font-weight: bold; } #u-author_block > p > a:hover{ padding: .8rem; color: var(--barColour); background: var(--linkColour); } /* -- INFO BAR PATCH -- * Courtesy Of Monkatraz **/ .info-container .collapsible-block-link, .info-container .collapsible-block-link:hover, .info-container .collapsible-block-unfolded-link, .info-container .collapsible-block-unfolded-link:hover{ padding: 0 !important; } .info-container .collapsible-block-link::before, .info-container .collapsible-block-unfolded-link::before, .info-container .collapsible-block-link::after, .info-container .collapsible-block-unfolded-link::after{ display: none; } /* ---- PAGE RATING ---- */ .page-rate-widget-box{ display: flex; width: max-content; margin: .53rem auto; padding: .2rem; background: var(--fgColor); border-radius: 0; box-shadow: 3px 0 0 0 var(--accentColor), -3px 0 0 0 var(--accentColor); } div.page-rate-widget-box .rate-points{ color: var(--textColorAlt); background: var(--fgColor); border: 0; text-transform: capitalize; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel{ background: var(--fgColor); border: 0; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a{ color: var(--textColorAlt); } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover{ color: var(--keyColor); } .page-rate-widget-box .rateup a:hover{ background-color: var(--strong-lime-green); } .page-rate-widget-box .ratedown a:hover{ background-color: var(--bright-red); } .page-rate-widget-box .cancel a:hover{ background-color: var(--dark-grayish-blue); border-radius: 0; } /* ---- INFO MODULE ---- */ #page-content .creditRate{ float: none; display: flex; width: max-content; margin: .53rem auto; } #page-content .rate-box-with-credit-button{ padding: .2rem 0; background: var(--fgColor); border: 0; border-radius: 0; box-shadow: 3px 0 0 0 var(--accentColor), -3px 0 0 0 var(--accentColor); } .creditRate .page-rate-widget-box{ display: inline; } #page-content .creditButton p a{ padding: 0; border: 0; font-size: .9rem; } .creditButton p a, .creditButtonStandalone p a{ /* Affects creditButton + creditButtonStandalone */ color: var(--textColorAlt); } .rate-box-with-credit-button .fa-info:hover{ color: var(--strong-lime-green); } #page-content .modalbox{ padding: .53rem; background: var(--bgColor); box-shadow: none; } #page-content .modalbox .page-rate-widget-box{ margin: auto; } .close-credits, .credit-back{ filter: invert(.4) sepia(.5) saturate(500%) hue-rotate(var(--tint)); } #page-content .close-credits{ width: 4rem; } /* ---- STANDALONE INFO MODULE ---- */ #page-content .creditButtonStandalone p a{ padding: .2rem 0 !important; background: var(--fgColor); border-radius: 0; box-shadow: 3px 0 0 0 var(--accentColor), -3px 0 0 0 var(--accentColor); font-size: .9rem; } #page-content .creditButtonStandalone p a:hover{ padding: .2rem 0 !important; color: var(--keyColor); background: var(--accentColor); } /* ---- BYLINE ---- */ .byline{ display: flex; margin-top: -.33rem; font-size: 85%; text-align: center; } .byline p{ display: flex; flex-direction: column; max-width: 50%; margin: auto; line-height: 0; } .byline span:nth-of-type(1):before, .byline span:nth-of-type(2):before{ padding-right: .27rem; color: var(--accentColor); font: 135%/1 "Lucida Sans Unicode", "Lucida Grande", "Arial Unicode MS", sans-serif; } .byline span:nth-of-type(1):before{ content: "✒" } .byline span:nth-of-type(2):before{ content: "⧗" } .byline span:nth-of-type(2):after{ content: "-min" } /* ---- FORMATTING | [GENERAL] ---- */ h1, h2, h3, h4, h5, h6{ display: flex; justify-content: center; font-family: var(--header-font); line-height: 1.2; text-align: center; text-underline-offset: 25%; } h1, h2, h3, h4{ color: var(--accentColor); } h5, h6{ color: var(--textColorAlt); } h1{ font-size: 1.95rem; } h2{ font-size: 1.55rem; } h3{ font-size: 1.35rem; } h4{ font-size: 1.25rem; } h5{ font-size: 1.05rem; } h6{ font-size: .95rem; } #page-title{ display: none; } .meta-title, #breadcrumbs, .pseudocrumbs{ text-align: center; } .meta-title{ margin: 0; color: var(--accentColor); border: 0; font: 1.95rem var(--header-font); letter-spacing: 1px; } .meta-title p{ border-bottom: thin solid var(--accentColorLite); } hr{ height: 0; margin: 1rem 0; background: transparent; border-top: thin solid var(--accentColorLite); } @media (max-width: 767px){ .meta-title p{ margin: 0 -5.5%; } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr{ margin: 3rem -5.5%; } } *, a, span{ /* No Line Breaks Mid-Word */ word-break: normal; } ul{ list-style-type: "❖ "; } li, p{ line-height: 1.5; text-decoration-color: var(--textColor); text-underline-offset: 30%; } ol li, ul li{ margin: .27rem 0 .53rem; } ol li::marker{ font-weight: bold; } #toc{ background: var(--fgColor); border: 0; border-top: thick solid var(--accentColor); } #toc .title{ color: var(--accentColor); } strong{ color: var(--accentColor); text-decoration-color: inherit; } #page-content h2, #page-content h3, #page-content h4{ filter: saturate(.85) brightness(1.15); } /* Links */ a, a.newpage, a:visited, #side-bar a:visited{ color: var(--accentColor); transition: color .2s ease-in-out; } a.newpage{ filter: hue-rotate(30deg); } a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover{ padding-bottom: .13rem; color: var(--keyColor); background-color: var(--accentColor); text-decoration: none; } #page-content a{ padding-bottom: .067rem; border-bottom: thin solid var(--accentColorLite); } #page-content a:hover{ padding-bottom: .13rem; } #page-content a:hover, #page-content .rateup a, #page-content .ratedown a, #page-content .cancel a, #page-content .pseudocrumbs a, #page-content .creditButtonStandalone p a, #page-content a.disruptionHeader, #page-content .yui-nav li a, #page-content #toc a{ border: 0; } #page-content a.disruptionHeader{ padding: .33rem 0; } #page-content .yui-nav li a{ padding: 0; } /* ---- FOOTNOTES ---- */ sup{ top: -.375em; } #page-content a.footnoteref{ border: 0; font-size: .9rem; font-weight: bold; } #page-content a.footnoteref:hover{ padding: 0 .13rem; color: var(--keyColor); } .hovertip{ font-size: 1rem; background: var(--fgColor) !important; border: thin solid var(--accentColor) !important; } .footnotes-footer, .equation .e-footer, .footnote .f-footer, .reference .r-footer{ display: none; } /* ---- IMAGE BLOCK ---- */ /* -- STANDARD -- */ .scp-image-block{ border-color: var(--accentColor); box-shadow: none; box-sizing: border-box; } .scp-image-block .scp-image-caption{ color: var(--textColorAlt); background: var(--fgColor); border-color: var(--accentColor); font-size: 100%; } .scp-image-block.block-right{ margin-right: 0; } @media (max-width: 540px){ .scp-image-block.block-right, .scp-image-block.block-left{ float: none; margin-right: auto; margin-left: auto; } } @media only screen and (max-width: 600px){ .scp-image-block.block-right{ float: none; } } /* -- BS IMAGE -- * by Timothy Foster **/ .image-box{ background: var(--fgColor) !important; } .image-box-heading{ color: var(--keyColor) !important; font: 1.25rem var(--header-font) !important; } .image-box-link{ padding: 0 !important; border: 0 !important; } .image-box-caption{ font-size: 100% !important; } /* Primary */ .image-box-primary .image-box-link:hover{ background: var(--accentColorLite); } .image-box-primary{ border-color: var(--accentColor) !important; } .image-box-primary .image-box-heading{ background: var(--accentColor) !important; } .image-box-primary .image-box-caption{ color: var(--textColorAlt) !important; } /* Info */ .image-box-info .image-box-link:hover{ background: hsla(194, 66%, 71%, .5); } .image-box-info{ border-color: hsl(194, 66%, 61%) !important; } .image-box-info .image-box-heading{ background: hsl(194, 66%, 61%) !important; } /* Success */ .image-box-success .image-box-link:hover{ background: hsla(120, 39%, 64%, .5); } .image-box-success{ border-color: hsl(120, 39%, 54%) !important; } .image-box-success .image-box-heading{ background: hsl(120, 39%, 54%) !important; } /* Danger */ .image-box-danger .image-box-link:hover{ background: hsla(2, 64%, 68%, .5); } .image-box-danger{ border-color: hsl(2, 64%, 58%) !important; } .image-box-danger .image-box-heading{ background: hsl(2, 64%, 58%) !important; } /* Warning */ .image-box-warning .image-box-link:hover{ background: hsla(35, 84%, 72%, .5); } .image-box-warning{ border-color: hsl(35, 84%, 62%) !important; } .image-box-warning .image-box-heading{ background: hsl(35, 84%, 62%) !important; } /* None */ .image-box-none .image-box-link:hover{ background: hsla(0, 0%, 95%, .5); } .image-box-none .image-box-heading{ background: var(--textColorAlt) !important; } .image-box-none .image-box-caption{ color: var(--textColorAlt) !important; } /* -- CENTERED IMAGES ON MOBILE ---- * Courtesy Of: * EstrellaYoshte * PeppersGhost **/ .imagediv{ float: right; margin: 1rem; } @media (max-width: 540px){ .imagediv{ float: none; text-align: center; } } /* ---- TABLE STYLING ---- * Adapted From: * BLANKSTYLE CSS by Placeholder McD, HarryBlank **/ .table1{ /* Green */ --accentColor: rgb(var(--one-color, 40, 159, 107)); --accentColorLite: hsla(154, 60%, 49%, .5); } .table2{ /* Blue */ --accentColor: rgb(var(--two-color, 117, 167, 242)); --accentColorLite: hsla(216, 83%, 80%, .5); } .table3{ /* Yellow */ --accentColor: rgb(var(--three-color, 255, 226, 82)); --accentColorLite: hsla(50, 100%, 76%, .5); } .table4{ /* Orange */ --accentColor: rgb(var(--four-color, 255, 141, 54)); --accentColorLite: hsla(26, 100%, 71%, .5); } .table5{ /* Red */ --accentColor: rgb(var(--five-color, 255, 34, 67)); --accentColorLite: hsla(351, 100%, 67%, .5); } .table6{ /* Violet */ --accentColor: rgb(var(--six-color, 161, 73, 248)); --accentColorLite: hsla(270, 93%, 73%, .5); } .table0{ /* White */ --accentColor: rgb(var(--white-bar, 205, 206, 208)); --accentColorLite: hsla(212, 3%, 91%, .5); } .table1 strong, .table2 strong, .table3 strong, .table4 strong, .table5 strong, .table6 strong, .table0 strong{ filter: saturate(.85) brightness(1.15); } #page-content .wiki-content-table tr th{ padding: .4rem; color: var(--keyColor); background: var(--accentColor); border-color: var(--accentColor); } #page-content .wiki-content-table tr th a{ color: var(--alphaColor); border-color: var(--textColorAlt); } #page-content .wiki-content-table tr th a:hover{ color: var(--keyColor); background-color: var(--alphaColor); } #page-content .wiki-content-table tr td{ padding: .8rem; color: var(--textColorAlt); background: var(--fgColor); border-color: var(--accentColor); line-height: 1.5; } /* ---- CELL SEPARATOR ---- * Adapted From: * BLANKSTYLE CSS by Placeholder McD, HarryBlank **/ .tableb table, .tableb .wiki-content-table{ border-collapse: separate; border-spacing: .4rem; } .tableb .scp-image-block{ border: 0; } .tableb .scp-image-block img, .tableb .scp-image-block .scp-image-caption{ border: thin solid var(--accentColor); } .tableb .scp-image-block .scp-image-caption{ margin-top: .4rem; } /* ---- CUSTOM DIV BLOCKS ---- */ .classification-header, .ethics-header, .miscomm-header, .oracle-header, .overwatch-header, .raisa-header, .warning-header{ margin: 1rem 0; padding: 0 .53rem; background-position: top center; background-repeat: no-repeat; background-size: contain; text-align: center; } .classification-header > p:nth-child(1)::before, .ethics-header > p:nth-child(1)::before, .miscomm-header > p:nth-child(1)::before, .oracle-header > p:nth-child(1)::before, .overwatch-header > p:nth-child(1)::before, .raisa-header > p:nth-child(1)::before{ display: flex; justify-content: center; margin: .53rem 0; padding: 0 0 .8rem; font-family: var(--header-font); font-size: 1.35rem; letter-spacing: 1px; } .classification-header{ /* -- Classification Committee Header -- */ color: var(--keyColor); background-image: linear-gradient( hsla(11, 30%, 85%, .7), hsla(11, 30%, 85%, .7)), url(https://i.imgur.com/wkUri0y.png); border: medium solid hsl(360, 26%, 26%); outline: 7px solid hsl(360, 0%, 76%); } .classification-header > p:nth-child(1)::before{ content: "NOTA DEL COMITÉ DE CLASIFICACIÓN DE LA FUNDACIÓN"; color: hsl(360, 26%, 26%); border-bottom: medium solid hsl(360, 26%, 26%); } .classification-header hr{ border-color: hsl(360, 26%, 26%); } .ethics-header{ /* -- Ethics Committee Header -- */ color: var(--keyColor); background-image: linear-gradient( hsla(212, 7%, 87%, .7), hsla(212, 7%, 87%, .7)), url(https://i.imgur.com/CQCcN7e.png); border: thick solid var(--keyColor); } .ethics-header > p:nth-child(1)::before{ content: "MEMORÁNDUM OFICIAL DEL COMITÉ DE ÉTICA"; color: var(--fgColor); border-bottom: medium solid var(--fgColor); } .ethics-header hr{ border-color: var(--fgColor); } .classification-header strong, .ethics-header strong{ color: var(--keyColor); } .miscomm-header{ /* -- Miscommunications Notice -- */ color: hsl(57, 98%, 68%); background-image: linear-gradient( hsla(9, 84%, 58%, .7), hsla(9, 84%, 58%, .7)), url(https://lafundacionscp.wdfiles.com/local--files/desk-of-junior-designer-s-yvonne/miscdept.png); border: thin solid hsl(57, 98%, 68%); outline: 7px solid hsl(9, 51%, 47%); } .miscomm-header strong{ color: hsl(57, 98%, 68%); } .miscomm-header > p:nth-child(1)::before{ content: "AVISO DEL DEPARTAMENTO DE MALENTENDIDOS DE LA FUNDACIÓN"; border-bottom: thin solid hsl(57, 98%, 68%); } .miscomm-header hr{ border-color: hsl(57, 98%, 68%); } .oracle-header{ /* -- ORACLE Header -- */ color: var(--textColor); background-image: url(https://lafundacionscp.wdfiles.com/local--files/theme%3Aflopstyle-dark/spc_logo.png), url(https://lafundacionscp.wikidot.com/local--files/theme:flopstyle-dark/water_ripples.webp); background-position: top center, bottom center; background-size: contain, 100%; border: thick solid var(--keyColor); } .oracle-header > p:nth-child(1)::before{ content: "DESDE EL ESCRITORIO DEL ORÁCULO"; border-bottom: medium solid var(--textColorAlt); } .oracle-header hr{ border-color: var(--textColor); } .overwatch-header{ /* -- Overwatch Header -- */ color: var(--textColor); background-image: linear-gradient( hsla(205, 28%, 27%, .7), hsla(205, 28%, 27%, .7)), url(https://i.imgur.com/Q2TCZnd.png); border: thick solid hsl(205, 36%, 5%); } .overwatch-header > p:nth-child(1)::before{ content: "POR ORDEN DEL COMANDO SUPERVISOR"; border-bottom: medium solid hsl(205, 36%, 5%); } .overwatch-header hr{ border-color: hsl(205, 36%, 5%); } .raisa-header{ /* -- RAISA Notice Header -- */ color: var(--textColor); background-image: linear-gradient( hsla(60, 18%, 36%, .7), hsla(60, 18%, 36%, .7)), url(https://i.imgur.com/4uLBoQ3.png); border: thick solid hsl(0, 0%, 60%); } .raisa-header > p:nth-child(1)::before{ content: "AVISO DE LA ADMINISTRACIÓN DE SEGURIDAD DE REGISTROS E INFORMACIÓN DE LA FUNDACIÓN"; border-bottom: medium solid hsl(0, 0%, 60%); } .raisa-header hr{ border-color: hsl(0, 0%, 60%); } .warning-header{ /* -- Warning Header (Adapted From 'SCP-3143' & 'SCP-5664') -- */ color: var(--textColorAlt); background-attachment: fixed; background-color: hsl(356, 98%, 16%); background-image: url(https://lafundacionscp.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_trans.png); background-position: center; background-size: 400px; border: thick solid var(--keyColor); } .warning-header p:nth-child(1)::before{ display: flex; justify-content: center; margin: .53rem 0; padding: 0 0 .8rem; content: "⚠ AVISO ⚠"; border-bottom: medium solid var(--keyColor); filter: saturate(.85) brightness(1.15); font: 1.95rem var(--header-font); } .warning-header hr{ border-color: var(--keyColor); } .oracle-header strong, .overwatch-header strong, .raisa-header strong, .warning-header strong{ color: var(--textColorAlt); } .classification-header h2, .ethics-header h2, .miscomm-header h2, .oracle-header h2, .overwatch-header h2, .raisa-header h2, .classification-header h3, .ethics-header h3, .miscomm-header h3, .oracle-header h3, .overwatch-header h3, .raisa-header h3, .classification-header h4, .ethics-header h4, .miscomm-header h4, .oracle-header h4, .overwatch-header h4, .raisa-header h4, .warning-header h2, .warning-header h3, .warning-header h4{ color: inherit; } .log-header, .report-box, .narration{ margin: 1rem 0; padding: .02rem 1rem; } div.blockquote.simple{ margin: 1rem 0; padding: 0 1rem; } .log-header{ /* -- Interview/Incident/Exploration Log Header -- */ color: var(--textColorAlt); background: var(--fgColor); border: thick dashed var(--accentColor); border-radius: 2rem; } div.blockquote.larger, .darkbox.larger, .lightbox.larger, .report-box.larger{ /* -- Larger Quote Size -- */ font-size: 125%; } blockquote, div.blockquote{ /* -- Quote Block -- */ padding: .02rem 1rem; color: var(--textColorAlt); background-color: var(--fgColor); border: 0; border-left: 7px dashed var(--accentColor); box-shadow: 5px 5px var(--bgColor); } div.blockquote.solid{ /* -- Alternative Quote 1 | Solid -- */ border-left-style: solid; } div.blockquote.classic{ /* -- Alternative Quote 2 | Classic -- */ border: medium solid var(--accentColor); } div.blockquote.classic.curved{ /* -- Alternative Quote 3 | Classic Curved -- */ border-radius: 1.27rem; } div.blockquote.lightweight{ /* -- Alternative Quote 4 | Lightweight -- */ border-left: 0; } div.blockquote.simple{ /* -- Alternative Quote 5 | Simple -- */ color: var(--textColor); background: 0; border-left-style: solid; } .darkbox, .lightbox{ margin: 1rem 0; border-right: 7px solid var(--accentColor); border-left: 7px solid var(--accentColor); } .darkbox{ color: var(--textColorAlt); background: var(--fgColor); padding: .4rem .6rem; } .lightbox{ color: var(--fgColor); background: var(--textColorAlt); padding: .8rem; } .lightbox hr{ border-color: var(--keyColor); } .lightbox h1, .lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6{ color: var(--fgColor); } .lightbox strong, .lightbox a{ font-weight: bold; filter: saturate(1.5) brightness(.5); } .lightbox a:hover{ color: var(--alphaColor); filter: unset; } .report-box{ /* -- Report Box -- */ color: var(--textColorAlt); background: var(--fgColor); border-top: 11px solid var(--accentColor); } .red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint{ color: var(--textColor); background: var(--fgColor); border: medium solid var(--accentColor); } .red-tint, .red-tint hr, .red-tint h3{ /* -- Alternative Report Block Colors -- */ --fgColor: hsl(360, 48%, 45%); --accentColor: hsl(360, 62%, 75%); --accentColorLite: hsla(360, 62%, 85%, .5); } .orange-tint, .orange-tint hr, .orange-tint h3{ --fgColor: hsl(30, 48%, 35%); --accentColor: hsl(30, 50%, 73%); --accentColorLite: hsla(30, 50%, 83%, .5); } .yellow-tint, .yellow-tint hr, .yellow-tint h3{ --fgColor: hsl(60, 48%, 26%); --accentColor: hsl(60, 56%, 76%); --accentColorLite: hsla(60, 56%, 86%, .5); } .green-tint, .green-tint hr, .green-tint h3{ --fgColor: hsl(120, 48%, 29%); --accentColor: hsl(120, 56%, 76%); --accentColorLite: hsla(120, 56%, 86%, .5); } .cyan-tint, .cyan-tint hr, .cyan-tint h3{ --fgColor: hsl(180, 48%, 28%); --accentColor: hsl(180, 56%, 76%); --accentColorLite: hsla(180, 56%, 86%, .5); } .blue-tint, .blue-tint hr, .blue-tint h3{ --fgColor: hsl(240, 48%, 54%); --accentColor: hsl(240, 56%, 76%); --accentColorLite: hsla(240, 56%, 86%, .5); } .magenta-tint, .magenta-tint hr, .magenta-tint h3{ --fgColor: hsl(300, 48%, 41%); --accentColor: hsl(300, 56%, 76%); --accentColorLite: hsla(300, 56%, 86%, .5); } .grey-tint, .grey-tint hr, .grey-tint h3{ --fgColor: hsl(210, 24%, 39%); --accentColor: hsl(210, 12%, 75%); --accentColorLite: hsla(210, 12%, 85%, .5); } .red-tint ::selection, .orange-tint ::selection, .yellow-tint ::selection, .green-tint ::selection, .cyan-tint ::selection, .blue-tint ::selection, .magenta-tint ::selection, .grey-tint ::selection{ color: var(--keyColor); } .overwatch-box{ /* -- Overwatch Document Box -- */ margin: 1rem 6rem; padding: .02rem 1rem; background: hsl(207, 24%, 25%); border: medium solid hsl(205, 36%, 5%); } @media (max-width: 479px){ .overwatch-box{ margin: 1rem 0; } } @media (min-width: 480px) and (max-width: 580px){ .overwatch-box{ margin: .53rem; } } .overwatch-box strong{ color: var(--textColorAlt); } .overwatch-box hr{ border-color: hsl(205, 36%, 5%); } .narration{ /* -- Mimics the Pages of a Book -- */ border: 7px solid var(--fgColor); } .journal{ /* -- Page (Adapted From 'RAISA-007710') -- */ margin: 1rem 0; padding: .73rem 1.33rem 1.33rem; background: linear-gradient( to top, hsl(225, 2%, 28%) 0%, hsl(0, 0%, 19%) 8%) 0 8px; background-size: 100% 1.33rem; border: thin solid gray; } .journal p{ margin: 0; font: 1.33rem/1.33rem var(--script-font); } .journal strong{ color: var(--textColor); } .highlighter, .journal ::selection{ padding: 0 .27rem; background: hsla(30, 99%, 59%, .3); } /* -- TEXT STYLE -- * by JaonHax **/ /* External box */ .text-container-wrap{ background: var(--fgColor); border-color: var(--keyColor); pointer-events: all !important; } .text-container-wrap h1, .text-container-wrap h2, .text-container-wrap h3, .text-container-wrap h4{ color: var(--accentColor); } .text-container-wrap h5, .text-container-wrap h6{ color: var(--textColor); } /* Internal box */ .text-container{ background: var(--bgColor); box-shadow: none; } /* Messages */ .recv .text{ color: var(--textColorAlt); background: var(--fgColor); } .sent .text{ color: var(--alphaColor); } .recv .text strong, .sent .text strong{ color: var(--textColorAlt); } .recv .text a{ color: hsl(213, 94%, 58%); border-color: hsl(213, 94%, 58%) !important; } .sent .text a{ color: unset; border-color: var(--textColor) !important; } .recv .text a:hover{ color: var(--keyColor); background: hsl(213, 94%, 58%); } .sent .text a:hover{ background: hsl(214, 94%, 34%); } /* Selection */ .text-container-wrap *::selection{ background: hsla(214, 80%, 34%, .8) !important; } /* -- HAZARD BOX -- */ .hazard-box{ /* -- Overall -- */ display: flex; align-items: center; margin: 1rem 0; background: var(--fgColor); } .hazard-box-image{ /* -- Image -- */ width: calc(100% * .2); padding: .13rem 0 .13rem .53rem; } .hazard-box-text{ /* -- Text -- */ width: 95%; margin: .27rem 0; padding: .27rem .53rem; color: var(--textColorAlt); } .hazard-box-1{ border-left: 11px solid rgb(var(--one-color)); } /* Green */ .hazard-box-image-1{ filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(100deg) brightness(1.25); } .hazard-box-2{ border-left: 11px solid rgb(var(--two-color)); } /* Blue */ .hazard-box-image-2{ filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(178deg) brightness(1.25); } .hazard-box-3{ border-left: 11px solid rgb(var(--three-color)); } /* Yellow */ .hazard-box-image-3{ filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(12deg) brightness(1.75); } .hazard-box-4{ border-left: 11px solid rgb(var(--four-color)); } /* Orange */ .hazard-box-image-4{ filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(341deg) brightness(1.25); } .hazard-box-5{ border-left: 11px solid rgb(var(--five-color)); } /* Red */ .hazard-box-image-5{ filter: invert(.4) sepia(.5) saturate(1000%) hue-rotate(303deg); } .hazard-box-6{ border-left: 11px solid rgb(var(--six-color)); } /* Violet */ .hazard-box-image-6{ filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(221deg) brightness(1.25); } .hazard-box-0{ border-left: 11px solid rgb(var(--white-bar)); } /* White */ .hazard-box-image-0{ filter: invert(.81); } /* ---- FORMATTING | [SPECIAL] ---- */ .centered { /* -- Center-Aligns Text -- */ text-align: center; } .justified { /* -- Justify-Aligns Text -- */ text-align: justify; } .indented { /* -- Indents Block by ⅜-inch (Use Within Other Divs) -- */ text-indent: 2.4rem; } .indented .bibcite, .indented .bibitems, .indented .footnoteref, .indented .scp-image-block, .indented h1, .indented h2, .indented h3, .indented h4, .indented h5, .indented h6, .indented .image-container, .indented ol, .indented ul, .indented .centered, .indented .fncon, .indented .fncon::before { text-indent: 0; } .end-mark > p:last-of-type::after { margin-left: .2rem; content: "❖"; font-size: 1.25rem; line-height: 1; } .rev-red { /* -- Red Document Revision Text -- */ color: hsl(360, 80%, 70%); } .rev-yellow { /* -- Yellow Document Revision Text -- */ color: hsl(40, 80%, 45%); } .rev-green { /* -- Green Document Revision Text -- */ color: hsl(120, 40%, 55%); } .rev-blue { /* -- Blue Document Revision Text -- */ color: hsl(240, 80%, 80%); } .terminal-span { /* -- Computer Terminal Text -- */ font: 110%/1.5 var(--mono-font); letter-spacing: 1px; } .rev-red, .rev-yellow, .rev-green, .rev-blue, .terminal-span { font-weight: bold; } .bt { /* Bold-Text = Bold + accentColor */ color: var(--accentColor); font-weight: bold; text-decoration-color: inherit; } .tb { /* Bold-Text + textColor */ color: var(--textColor); filter: unset; font-weight: bold; } div .tb { color: var(--textColorAlt); } .bt.bb, /* Big-Bar = Bold + accentColor + Vertical Bar [Body Text] */ .bt.bh, /* Header-Bar = Bold + accentColor + Vertical Bar [Header Text] */ .tb.bb { /* Big-Bar = Bold + textColor + Vertical Bar [Body Text] */ border-right: 2px solid; } .bt.bb, .bt.bh { border-color: var(--accentColor); } .tb.bb { border-color: var(--textColor); } div .tb.bb { color: var(--textColorAlt); } .bt.bh { border-right-width: medium; } .bt.bb::after, .bt.bh::after, .tb.bb::after { content: ":"; visibility: hidden; } /* -- Blinking Text Cursor ---- * Adapted From: * Word Processor Theme by stormbreath **/ #u-append-blink-bar p:last-child::after { position: relative; bottom: .067rem; left: .07rem; content: "█"; animation: blink 1.5s infinite; } @keyframes blink { to { opacity: 0; } } /* Adapted From: * Dustjacket Theme by Woedenaz **/ .fancyhr hr { border-top: 2vw solid; border-image-repeat: round; border-image-slice: 80 500 80 500 fill; border-image-source: url(https://lafundacionscp.wikidot.com/local--files/theme:flopstyle-dark/wl_hr.png); border-image-width: 10rem 80rem; filter: hue-rotate(var(--tint)); } .fancyborder { padding: 2vw; border: 2vw solid; border-image: url(https://lafundacionscp.wikidot.com/local--files/theme:flopstyle-dark/wl_border.png) 600 round; border-image-width: 6; } .lite-heading { /* -- Special Heading Area -- */ margin: 3rem -5.5%; padding: 0 5.5%; background: var(--fgColor); } .lite-heading hr { margin: 0 -5.5%; border: medium solid var(--accentColor); } .lite-heading h3 { color: var(--textColorAlt); filter: unset !important; } .image-showcase { /* -- Alternative Image Showcase -- */ width: 21rem; margin: 1rem auto; background: var(--bgColor); border: 7px solid var(--fgColor); } .scene-break { /* -- Fancy Scene Break -- */ width: 6rem; margin: 2rem; } .icon-tint { filter: invert(.4) sepia(.5) saturate(1500%) hue-rotate(var(--tint)); } /* -- ListPages Navigator ---- * Adapted From: * SCP-5552 by Captain Kirby **/ .listPagesNav { display: flex; flex-direction: row-reverse; justify-content: space-between; margin: 0 0 3rem; } .listPagesNav-prev, .listPagesNav-next { width: 45%; padding: 0 1%; background: var(--fgColor); } .listPagesNav-prev { float: left; border-left: thick solid var(--accentColor); text-align: left; } .listPagesNav-next { float: right; border-right: thick solid var(--accentColor); text-align: right; } .listPagesNav-prev p, .listPagesNav-next p { font: 1.25rem var(--header-font); letter-spacing: 1px; } @media (max-width: 767px) { .listPagesNav-prev p, .listPagesNav-next p { font-size: .95rem; } } .fade-away { /* -- Fades to Black -- */ background: linear-gradient( transparent, var(--keyColor)); } .whiteout { /* -- Fades to White -- */ background: linear-gradient( transparent, var(--textColor)); } .footing, .footing:after { position: relative; } .footing { /* -- Page Footing -- */ margin: 1rem 0; } .footing::before { position: absolute; right: 0; bottom: .13rem; left: 0; content: ""; border-bottom: 2px solid var(--accentColor); } .footing:after { display: block; top: .07rem; content: ""; border-bottom: thin solid var(--accentColorLite); } @media (max-width: 767px) { .footing::before, .footing:after { margin: 0 -5.5%; } } .related-flex { /* -- Related Articles Box -- */ display: flex; justify-content: center; } .related { margin: 1rem 0; padding: .02rem 1rem; color: var(--textColorAlt); background: var(--fgColor); border: thick solid var(--accentColor); font-weight: bold; } .related > p:nth-child(1)::before, .related > ol:nth-child(1)::before, .related > ul:nth-child(1)::before, .related > a:nth-child(1)::before { display: flex; padding: 0 0 .53rem; content: "Véase También:"; color: var(--accentColor); font: 1.25rem var(--header-font); letter-spacing: 1px; } .related > ol:nth-child(1)::before, .related > ul:nth-child(1)::before { margin-left: -2rem; } .series-nav { /* -- Series Navigator -- */ display: flex; justify-content: center; margin: 1rem 0; padding: .02rem 1rem; color: var(--textColorAlt); background: var(--fgColor); border-top-right-radius: .67rem; border-top-left-radius: .67rem; border-bottom: 2px solid var(--accentColor); font: 85% var(--header-font); } /* -- Earthworm Series Navigator -- * by Croquembouche **/ #page-content .earthworm .first, #page-content .earthworm .first:not(.true) img, #page-content .earthworm .hub, #page-content .earthworm .last, #page-content .earthworm .last:not(.true) img { background: var(--fgColor); border-color: var(--accentColor); } .earthworm .hub { font-size: 1.05rem; } #page-content .earthworm a { border-bottom: 0; } #page-content .earthworm a[href="/"] { color: var(--textColorAlt); filter: unset; } .earthworm p { cursor: text; } .bt, .listPagesNav-prev p, .listPagesNav-next p, .related > p:nth-child(1)::before, .related > ol:nth-child(1)::before, .related > ul:nth-child(1)::before, .related > a:nth-child(1)::before, #page-content .earthworm a, #toc .title, strong { filter: saturate(.85) brightness(1.15); } /* ---- YUI TABS ---- */ /* -- YUI TAB CUSTOMIZATION -- */ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav{ display: flex; flex-wrap: wrap; width: calc(100% - .13rem); margin: 0 auto; border-color: var(--accentColor); } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li{ /* -- Listitem Modifier -- */ display: flex; flex-grow: 2; margin: 0; padding: 0; background: var(--fgColor); font-size: 1.05rem; } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a{ /* -- Link Modifier -- */ /* -- Tab | [UNSELECTED] -- */ color: var(--textColorAlt); background: var(--fgColor); transition: all .2s ease-in-out; font-family: var(--header-font); } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a{ width: 100%; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{ /* -- Tab | [HOVER] -- */ color: var(--alphaColor); background: var(--accentColor); transition: all .2s ease-in-out; } .yui-navset .yui-nav li em{ border: 0; } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em{ padding-top: .47rem; padding-bottom: .47rem; text-align: center; text-overflow: ellipsis; overflow: hidden; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected{ /* -- Selection Modifier -- */ /* -- Tab | [SELECTED] -- */ flex-grow: 2; margin: 0; padding: 0; background: var(--accentColor); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em{ border: 0; } .yui-navset .yui-nav .selected a em{ padding-top: .47rem; padding-bottom: .47rem; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:active, .yui-navset .yui-nav .selected a:focus{ color: var(--fgColor); } .yui-navset .yui-content{ color: var(--textColorAlt); background: var(--fgColor); } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{ padding: .53rem; border: 0; line-height: 1.5; } /* -- YUI TAB ANIMATION -- * Courtesy Of Croquembouche **/ .yui-navset .yui-content > div{ display: block; transform-origin: 0 0; overflow: hidden; } #page-content .yui-navset .yui-content > div[style*="none"]{ display: block !important; flex: 0; max-height: 0; padding: 0 .53rem; border-width: 0; /* Next Transition Affects the One That DISAPPEARS */ transition: padding 0s ease-in-out .5s, border-width 0s ease-in-out .5s, flex .4s cubic-bezier(.18, .51, .54, .9) 0s; animation: tab-disappear .4s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content > div[style*="block"]{ display: block !important; flex: 1; max-height: 9999rem; /* Next Transition Affects the One That APPEARS */ transition: padding 0s ease-in-out .5s, border-width 0s ease-in-out .5s, flex .4s cubic-bezier(.18, .51, .54, .9) .5s; animation: tab-appear .4s ease-in-out .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; } } /* ---- WIKIWALK NAVIGATOR ---- */ .footer-wikiwalk-nav{ width: max-content; margin: 1rem auto; padding: .067rem 1rem; color: var(--textColorAlt); background: var(--fgColor); border-radius: .53rem; font-size: 85%; } /* ---- INTERWIKI ---- */ div.scpnet-interwiki-wrapper{ margin-bottom: 2rem; } iframe.scpnet-interwiki-frame{ background: var(--accentColorLite); } #interwiki{ --fgColor: none; background: 0; } #interwiki body{ overflow: hidden; } #interwiki .side-block{ background: 0; border: 0; box-shadow: none; } #interwiki .heading{ color: var(--textColorAlt); border-bottom-color: var(--textColor); font: bold .95rem "Josefin Sans", sans-serif; } #interwiki .menu-item img{ display: none; } #interwiki .menu-item a{ color: var(--alphaColor); transition: color .2s ease-in-out; } #interwiki .menu-item a:hover{ color: var(--keyColor); background-color: var(--alphaColor); text-decoration: none; } /* ---- CROQSTYLE ALTERATIONS ---- */ #edit-page-textarea{ font-family: unset; } tt{ padding: unset; background: unset; font-size: 110%; } .terminal, .terminal > .code{ background: var(--c-bg) !important; border: thick solid var(--c-comment) !important; } /* General Patches For: * ACS * Collapsibles * Info Bar * Info Module * Side-Bar Media * So Link Doesn't Override **/ .danger-diamond a:hover, .collapsible-block-folded a:hover, .collapsible-block-unfolded-link a:hover, .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover{ background: 0; } .info-container .collapsible-block-link, .info-container .collapsible-block-folded .collapsible-block-link{ background: var(--linkColour) !important; } /* ---- ACS PATCH ---- * Courtesy Of Nagiros **/ .anom-bar > .bottom-box{ /* Horizontal Bar */ -webkit-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important; -moz-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important; box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important; -webkit-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important; -moz-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important; box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important; } .bottom-box > .diamond-part{ /* Vertical Bar */ -webkit-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important; -moz-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important; box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important; -webkit-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important; -moz-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important; box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important; } .anom-bar-container.esoteric .text-part .main-class, .anom-bar-container.explained .text-part .main-class, .anom-bar-container.neutralized .text-part .main-class, .anom-bar-container.pending .text-part .main-class{ background-color: hsl(240, 4%, 27%, .5) !important; border-left-color: hsl(240, 5%, 49%) !important; background-color: rgba(var(--gray-bg, 66, 66, 72), .5) !important; border-left-color: rgb(var(--lg-bar, 118, 118, 130)) !important; } .danger-diamond > .arrows, .danger-diamond > .bottom-icon::before{ /* Inverted Arrows + Esoteric Icons */ -webkit-filter: invert(.9) !important; filter: invert(.9) !important; } .danger-diamond > .quadrants > .bottom-quad, /* Transparent Bottoms + Top Icon Backgrounds */ .anom-bar-container.explained .danger-diamond > .quadrants > .top-quad, .anom-bar-container.neutralized .danger-diamond > .quadrants > .top-quad, .anom-bar-container.pending .danger-diamond > .quadrants > .top-quad{ /* Body Background-Color */ background-color: hsl(0, 0%, 10%) !important; } .danger-diamond > .bottom-icon, /* Esoteric + Pending Icon Backgrounds */ .anom-bar-container.pending .danger-diamond > .top-icon::before{ background-color: hsl(0, 0%, 1%) !important; } .anom-bar > .bottom-box::before{ background-color: rgb(var(--white-bar, 205, 206, 208)); } .top-left-box > .item{ display: none; } /* ---- AUTHOR LABEL PATCH ---- */ #page-content .authorlink-wrapper{ margin-top: -.13rem; --author-right-adjust: 0; } /* ---- BETTERFOOTNOTES PATCH ---- */ :root{ --posX: calc(50% - 358px - 13rem); --fnLinger: 1.5s; --fnColor: var(--accentColor); } .fnnum{ filter: saturate(.85) brightness(1.15); font-size: .9rem; } .lightbox .fnnum::after{ color: var(--keyColor); } .fnnum:hover::after{ padding: 0 .13rem; } .fncon{ color: var(--textColorAlt); background: var(--fgColor); border-color: var(--accentColor); } .fncon::before{ color: var(--keyColor); } .fnnum:hover + .fncon{ right: calc(-8vw - 4rem); } .lightbox .fncon a{ filter: unset; } /* ---- FLOPS HEADER PATCH ---- */ .itemInfo, a.disruptionHeader{ font-family: var(--header-font); } .itemInfo.darkbox{ margin: 0 0 1.6rem; padding: .8rem 1.13rem; } table.darkbox tr td{ padding: 0; } .alignL span{ margin-right: .13rem; } .infofield_1, .infofield_2{ font-size: 0; } .infofield_1::before{ content: "ÍTEM #"; font-size: 1.25rem; } .infofield_2::before{ content: "CLASE"; font-size: 1.25rem; } /* ---- VOID POST PATCH ---- */ div.void.dark{ color: var(--textColorAlt); background: var(--fgColor); border-color: hsl(222, 20%, 9%); } .vusermod{ color: var(--textColorAlt) !important; font-weight: bold; } .vui{ color: hsl(0, 0%, 60%) !important; } .vactivity{ color: hsl(240, 100%, 69%) !important; } /* ---- PAGE TAGS ---- */ #main-content .page-tags{ border-top: thin solid var(--accentColorLite); } #main-content .page-tags span{ max-width: 100%; border-top: 9px solid transparent; } #main-content .page-tags a{ height: 1.108rem; margin: .18rem 0 .5rem 1rem; padding: .1875rem .3125rem .1875rem 0; background: var(--fgColor); border-top-right-radius: .27rem; border-bottom-right-radius: .27rem; font: 120%/1.108rem var(--body-font); } #main-content .page-tags a::before, #main-content .page-tags a::after{ position: relative; float: left; content: ""; } #main-content .page-tags a::after{ top: .3836rem; left: -.6818rem; width: .341rem; height: .341rem; background: var(--bgColor); border-radius: .1705rem; } #main-content .page-tags a::before{ top: -.1875rem; left: -.7501rem; border-color: transparent var(--fgColor) transparent transparent; border-style: solid; border-width: .75rem .75rem .75rem 0; } #main-content .page-tags a:hover{ color: var(--keyColor); background: var(--accentColor); } #main-content .page-tags a:hover::before{ border-color: transparent var(--accentColor) transparent transparent; } /* ---- SITE FOOTER ---- */ #footer, #footer a{ color: var(--textColor); background: 0; } #license-area{ color: var(--textColor); }
/* BACKEND */ @import url(https://lafundacionscp.wikidot.com/local--files/theme:flopstyle-dark/backend.css);
La fuente de ENCABEZADO es Montserrat.
La fuente del CUERPO es Inter.
La fuente del MONOESPACIADO es Fira Code.
La fuente de GUIÓN es Comic Neue.
Qué es esto
Un puñado de "mejoras" CSS varias que yo, Croquembouche, utilizo en un montón de páginas porque creo que las hace más fáciles de manejar.
Los cambios que hace este componente son un montón de modificaciones realmente triviales para facilitar la experiencia de escritura y para hacer la documentación de los componentes/temas un poco más fácil (lo que hago mucho). No cambia nada de la página visualmente para el lector — los cambios son para el escritor.
No esperaría que las traducciones de los artículos que usan este componente también lo usen, a menos que al traductor le guste y quiera usarlo de todos modos.
Este componente probablemente no entrará en conflicto con otros componentes o temas, e incluso si lo hace, probablemente no importará demasiado.
Uso
En cualquier wiki:
[[include :lafundacionscp:component:croqstyle]]
Este componente está diseñado para ser utilizado en otros componentes. Cuando lo utilice en otro componente, asegúrese de añadir esto dentro del bloque de [[iftags]] del componente, para que los usuarios de su componente no se vean obligados a utilizar también Croqstyle.
Componentes relacionados
Otros componentes de estilo personal (que sólo cambian un par de cosas):
Temas de estilo personal (que son revisiones visuales):
Cambios de CSS
Notas a pie de página de tamaño razonable
Evita que las notas a pie de página sean de un tamaño excesivo, para que se puedan leer realmente.
.hovertip { max-width: 400px; }
Edición/código monoespaciado
Hace que el cuadro de texto de edición sea monospace, y también cambia todo el texto monospace a Fira Code, la fuente monospace obviamente superior.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap'); :root { --mono-font: "Fira Code", Cousine, monospace; } #edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); } .code pre * { white-space: pre; } .code *, .pre * { font-feature-settings: unset; }
Fondos de teletipo
Añade un fondo gris claro a los elementos <tt> ({{text}}), para que los fragmentos de código destaquen más.
tt { background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4); font-size: 85%; padding: 0.2em 0.4em; margin: 0; border-radius: 6px; }
No más caras grandes
Evita que aparezcan imágenes grandes cuando pasas el ratón por encima de la imagen de avatar de alguien, porque son estúpidas y realmente molestas y puedes hacer clic en ellas si quieres ver la versión grande.
.avatar-hover { display: none !important; }
Salto saltito
Cualquier texto dentro de un div con clase nobreak tiene un ajuste de línea entre cada letra.
.nobreak { word-break: break-all; }
Colores del código
Añade los colores del código de mi terminal como variables. Tal vez cambie esto a un tema de terminal más común como Monokai o algo así en algún momento, pero por ahora es sólo mi tema personal, que se deriva de Tomorrow Night Eighties.
Además, al añadir la clase .terminal a un bloque de código falso como [[div class="code terminal"]] le da una especie de aspecto de pseudo-terminal con un fondo oscuro. No funciona con [[code]], porque Wikidot inserta un montón de resaltado de sintaxis que no puedes cambiar tú mismo sin un montón de CSS. Utilízalo solo para fragmentos de código sin [[code]].
Herramienta rápida para colorear un ejemplo de uso de un componente "estándar" de Wikidot con las variables anteriores: link
:root { --c-bg: #393939; --c-syntax: #e0e0e0; --c-comment: #999999; --c-error: #f2777a; --c-value: #f99157; --c-symbol: #ffcc66; --c-string: #99cc99; --c-operator: #66cccc; --c-builtin: #70a7df; --c-keyword: #cc99cc; } .terminal, .terminal > .code { color: var(--c-syntax); background: var(--c-bg); border: 0.4rem solid var(--c-comment); border-radius: 1rem; }
Modo de depuración
Dibuje líneas alrededor de cualquier cosa dentro de .debug-mode. El color de las líneas es rojo, pero depende de la variable CSS --debug-colour.
También puede añadir div.debug-info.over y div.debug-info.under dentro de un elemento para anotar las cajas de depuración - aunque tendrá que asegurarse de dejar suficiente espacio vertical para que la anotación no se superponga a lo que está por encima o por debajo.
…like this!
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after { outline: 1px solid var(--debug-colour, red); position: relative; } .debug-info { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Fira Code', monospace; font-size: 1rem; white-space: nowrap; } .debug-info.over { top: -2.5rem; } .debug-info.under { bottom: -2.5rem; } .debug-info p { margin: 0; }
/* 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; } } }