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

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


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.


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)

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