CSS PLACESTYLE
CSS PLACESTYLE
Traducido por: morhadowmorhadow
PUBLICADO: 10 Nov 2022 19:50

La tabla de información de la página de arriba es generada automáticamente por un módulo de Listpages dentro del authorbox, una sidebox a la izquierda. Se aplica automáticamente a todas las páginas que incluyen esta página, a menos que envuelva el include de Placestyle en un div display: none;. Se sitúa en el lado izquierdo para que pueda utilizarse sin problemas junto con las sideboxes tradicionales. No se muestra en los móviles.

placeholderword.png

.

Puntuación: +2+–x

Info

PLACESTYLE CSS
Por: Placeholder McDPlaceholder McD

Gracias a CroquemboucheCroquembouche, EstrellaYoshteEstrellaYoshte y NagirosNagiros por crear colectivamente la mayor parte del código que se incluye en este tema.

Puntuación: +2+–x

¿Qué es esto?

Este es el CSS Placestyle: un fork del Tema Penumbra de EstrellaYoshteEstrellaYoshte creado por Placeholder McDPlaceholder McD para su uso en sus artículos. Existe para que pueda ser fácilmente actualizado y aplicado en una amplia gama de trabajos. Es básicamente Penumbra, menos algunas cosas que no quería, ¡más algunas cosas que me gustan del CSS Blankstyle de HarryBlankHarryBlank, y algunos extras!

Es casi seguro que no funcionará con otros temas, sobre todo con Black Highlighter. No lo use a menos que sepa en qué se está metiendo.

Cómo Usarlo

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

[[include theme:placestyle]]

Tenga en cuenta que este tema incluye los siguientes componentes:

Si utiliza este tema junto con el módulo de información sobre tarifas, envuelva el módulo en un [[div]] para asegurarse de que el panel de información no se retrase con el Fundido de Entrada.

Este tema toma prestado el código del Bloque de Imagen de Peppo de PeppersGhostPeppersGhost y EstrellaYoshte que centra las imágenes base y los bloques de imágenes para que aparezcan de forma más estética en pantallas más pequeñas (léase: móviles). Todo el código de este tema se deriva del Tema Penumbra.

Gracias a CroquemboucheCroquembouche, EstrellaYoshteEstrellaYoshte y NagirosNagiros por crear colectivamente la mayor parte del código que se incluye en este tema.

La celda de la tabla anterior está dentro de un sidebox normal. Los sideboxes pueden adjuntarse sólo a secciones específicas de texto utilizando el div limit. Si se desplaza por el código de esta página, notará que el cuadro lateral no continúa más allá del encabezado de CÓDIGO FUENTE.

Las principales diferencias entre CSS PLACESTYLE y Penumbra son

  • La fuente del cuerpo (Verdana) coincide con Sigma-9
  • la fuente del título (Monserrat) coincide con Blankstyle
  • el scp-image-block simplificado se asemeja a Sigma-9
  • las tablas tienen relleno interno (excepto en la sidebox) como Blankstyle
  • las celdas de la cabecera de la tabla se colorean según accentColor
  • div tableb separa las celdas (¡y los títulos de las imágenes!) dentro de sus tablas como Blankstyle
  • fondo transparente de la caja lateral como Blankstyle
  • El span bt pone en negrita y colorea el texto (según accentColor) como el Tema de Ad Astra de NatVoltaicNatVoltaic y stormbreathstormbreath's (es ligeramente más brillante que el accentColor que utilice, para facilitar la lectura)
  • botón cuadrado de la barra lateral
  • Mejores Notas al Pie se ajusta automáticamente según el accentColor
  • El componente ACS se recolorea para adaptarse a los temas oscuros como el Tema Night Rush de NagirosNagiros'
  • El componente ACS no tiene el texto "ITEM#:" en su esquina superior izquierda, como Blankstyle
  • Los desplegables con hideLocation="both" se muestran de forma más intuitiva
  • la authorbox, una sidebox a la izquierda que muestra la información del autor a través de listpages, se añade automáticamente a cualquier página que utilice este tema (a menos que envuelva el include en un div style="display: none;". No interfieren con las sideboxes normales.

EJEMPLOS

Las notas de los parches se pueden encontrar en el hilo de discusión original.

CÓDIGO FUENTE:

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

Included page "acs-animation" does not exist (create it now)

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