Flopstyle: LITE CSS
Flopstyle: LITE CSS
Autora: Lt FlopsLt Flops
Traductor: morhadowmorhadow
Publicado el 13 May 2021 14:49

Este es un ejemplo funcional de la authorbox.

Para obtener más información y saber cómo editar esto en su propia página, consulte la subsección de Cajas Laterales.

⮤ Esto es un flavorbox

Para crear uno, copie el siguiente div
y péguelo dentro de su authorbox:

[[div class="flavorbox"]]

quien me dio el poder de editar el CSS cometió un grave error

Flopstyle: LITE

Temas de Sigma-9 » Flopstyle: LITE

Puntuación:

Puntuación: +4+x

Puntuación c/ Panel de Información:

Puntuación: +4+x

Ejemplo de Formato

¿Qué es Esto?


Este es un estilo de tema creado por Lt FlopsLt Flops para ser usado en sus artículos.

Es una mejora estética sobre Sigma-9 (el tema principal de la Wiki) y existe para que pueda ser fácilmente actualizado, independientemente de las páginas que lo usan. Es de esperar que el CSS cambie con el tiempo.

Por favor, utilice esto si entiende lo que está haciendo.

Este tema es incompatible con Black Highlighter y BASALT. Este tema no proporciona ninguna mejora sobre Black Highlighter o BASALT. Si su página utiliza Black Highlighter o BASALT, no importe este tema, o introducirá nuevos errores.

Contraparte del Modo Oscuro

Flopstyle: OSCURO


Cómo Utilizarlo


Para utilizar este tema, copie esta sintaxis en la parte superior de su página:

[[include :lafundacionscp:theme:flopstyle]]

Si desea utilizar este tema con otro tema de Sigma-9, pegue Flopstyle primero y su tema elegido en la siguiente línea. Es posible que sea necesario realizar algunos ajustes.

Tenga en cuenta también que este tema utiliza los siguientes componentes:

Este tema fue diseñado con los siguientes componentes en mente:

Puede alterar la cabecera, la subcabecera, el color de la cabecera, el color de la subcabecera y el logotipo de la cabecera como considere oportuno. Solo tiene que pegar esta sintaxis después del include del Encabezado Centrado, y luego darle el estilo correspondiente:

[[module CSS]]
:root{
--header-title: "TÍTULO";
--header-subtitle: "SUBTÍTULO";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;
--lgurl: url(URL_AQUI);
}
[[/module]]

Cabecera de Flops1


[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

Cajas laterales


Adaptado del Tema Penumbra por EstrellaYoshteEstrellaYoshte.

Las cajas laterales son un componente incorporado que viene en dos tipos:

  1. authorbox
  2. sidebox

Cada tipo tiene sus propias instrucciones de uso.

Nota: La authorbox no se muestra en pantallas de width=1280px y menores, lo que incluye las pantallas móviles. La sidebox se hunde en el borde de la página en pantallas de width=1280px y más pequeñas, y en esas pantallas, se puede acceder tocando con el dedo/pasando el cursor sobre él.

Por favor, tenga en cuenta estas condiciones antes de configurar estos elementos - un gran porcentaje de los usuarios de la Wiki SCP navegan a través de dispositivos móviles.


1. Authorbox

(Vea la parte superior izquierda)

Por defecto, la authorbox está sacada. Aparece en todas las páginas que utilizan Flopstyle. Si desea removerla, por favor reemplace esto:

[[include theme:flopstyle]]

Con esto:

[[div style="display: none;"]]
[[include theme:flopstyle]]
[[/div]]

Alternativa 1: Después de eliminar la authorbox, puede reemplazarla con una versión personalizada que muestre la información que desee. Esta funcionalidad puede ser especialmente útil para páginas con coautoría, reescritas o traducidas. Como referencia, este es el código que crea la authorbox:

[[div class="anchor"]] Establece la posición adhesiva de la caja de autor.
[[div class="authorbox"]]

[[module ListPages name="="]]
||~ %%title%% ||
||= **Autor:** %%created_by_linked%% ||
||~ Publicado el %%created_at|%d %b %Y%% ||
[[/module]]

|| Texto Opcional ||

[[/div]]
[[/div]] Establece el límite final del anclaje.

Por defecto, la authorbox hace uso de ListPages para automatizar los metadatos mostrados. Teóricamente, puede copiar la parte de ListPages del authorbox en cualquier página Wiki, y esos campos se rellenarán de forma exclusiva para esa página. Por supuesto, puede cambiar cualquiera de estos campos si lo desea.

También puede editar su authorbox personalizada para mostrar un texto de sabor adaptado a su página, como una nota para los lectores.

Vea en la parte izquierda de la página un ejemplo de authorbox.

Alternativa 2: Si lo desea, puede elegir que la authorbox se muestre en el lado derecho de la página. Si desea esto, pegue esto en un módulo CSS en su página:

.authorbox{
right: unset;
left: 103.5%;
}

Si tienes una página que hace esto, te recomiendo que no introduzca sidebox es en esa misma página, o resultará un poco lioso.


2. Sidebox


La sidebox está sacada. Se configura así:

[[div class="limit"]] Establece el límite de inicio del anclaje.
[[div class="anchor"]] Establece la posición adhesiva de la caja lateral.
[[div class="sidebox"]]
Texto deseado de la sidebox aquí.
[[/div]]
[[/div]]
Texto al que se asocia la sidebox.
[[/div]] Establece el límite final del anclaje.

Recomiendo insertar un salto de línea manual después del texto asociado a la sidebox. Puede conseguirlo encerrando un espacio con dos conjuntos de @@ (uno a cada lado). La sidebox aparecerá junto a este texto al pasar por él.



Sin el limit del div, 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.

Varios Porciones Modificables


Si es necesario, puedes editar cualquiera de estas propiedades CSS para adaptarlas mejor a tu página. Esta lista no cubre todos los estilos que ofrece Flopstyle, pero es un buen punto de partida.

Cambiar las Propiedades de la Barra de Información

body{ /* -- Recoloración según el Tema del Sitio -- */
--barColour: COLOUR_HERE;
}
#u-author_block{
display: none;
}
.translation_block{
display: none;
}


Cambiar el Color de los Subtítulos de la Cabecera

.lite-heading h3{ /* -- Recolour according to Site Theme -- */
color: COLOUR_HERE;
}


Cambiar el Color de los Bordes del Bloque de la Tarjeta y de la Caja Lateral

:root{
--accentColor: COLOUR_HERE;
}


Cambiar el Logotipo de la Cabecera de Advertencia Simple

(The image must be transparent)

.warning-notice{
background-image: url(URL_HERE);
background-size: 400px;
}


Cambiar el Logotipo de la Cabecera de Advertencia Avanzada

(The image must be transparent)

.council{
background-image: url(URL_HERE);
}


Cambiar el Fondo de Navegación de Series

.series-nav{
background: linear-gradient(to bottom right, hsla(0, 0%, 100%, 1), COLOUR_HERE);
}


Ocultar el Título de la Página

#page-title{
display: none;
}


Ocultar el Pie de Página de las Notas a pie de página

.footnotes-footer{
display: none;
}


Lista de Tareas Personales de Flops (por favor, ignórela)


  1. Derrotar a las fuerzas nefastas del Esqueumorfismo. [COMPLETADO]
  2. Actualizar el diseño de la página del tema. [COMPLETADO]
  3. Terminar de revisar todos mis artículos en busca de CSS que pueda añadir a Flopstyle.
    • Caja de "Artículos Relacionados". [COMPLETADO]
    • Caja de "Advertencia de Amenaza".
  4. Terminar de actualizar todos mis artículos con Flopstyle.

Código Fuente

Puntuación: +4+x

Qué es esto

Un puñado de "mejoras" CSS varias que yo, CroquemboucheCroquembouche, 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;
    }
    }
}

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