CSS AZASTYLE
CSS BLANKSTYLE
Placeholder McDPlaceholder McD,
HarryBlankHarryBlank
Publicado Marzo 2021
Gracias a stormbreathstormbreath, EstrellaYoshteEstrellaYoshte, y CroquemboucheCroquembouche por crear colectivamente la mayor parte del código que se incluye en este tema.
Puntuación: 0+–x

Info

CSS BLANKSTYLE
Por: Placeholder McDPlaceholder McD, HarryBlankHarryBlank

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

Puntuación: 0+–x

¿Qué es Esto?

Esto es CSS Blankstyle: un estilo visual creado por Placeholder McDPlaceholder McD y HarryBlankHarryBlank para su uso en los artículos de este último. Existe para que pueda ser fácilmente actualizado y aplicado en una amplia gama de trabajos. Funciona esencialmente como una variante de tema claro del Tema Penumbra de EstrellaYoshteEstrellaYoshte, además de varias salvedades específicas de Blank.

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

Como usarlo

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

[[include theme:blankstyle]]

Tenga en cuenta que este tema incluye los siguientes componentes:

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

Este tema toma prestado el código del Bloque de Imágenes 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). También toma prestada la genial tecnología de sidebox de Estrella del Tema Penumbra, y la mayor parte de su código se deriva del Tema Paperstack.

Para conocer algunas de las características adicionales de CSS BLANKSTYLE, dirígete al hilo de discusión y consulta las notas de parche.

TABLAS COLOREADAS AL ESTILO ACS

Las siguientes tablas con celdas de cabecera de colores personalizados pueden utilizarse envolviendo la tabla en un div, denominados "table1" a "table5", respectivamente.Tenga en cuenta que al envolver un scp-image-block en uno de estos divs se aplicará lo mismo a su título. Tenga en cuenta, también, que esta es una nota de pie de página de Mejores Notas al Pie, y los detalles para su uso se pueden encontrar en el enlace anterior.. Estos corresponden a los 5 niveles básicos de la Barra de Componente de ACS.

Esta es una tabla normal;
testearla es aburrido.
Esta es una tabla VERDE;
testearla es divertido.
Esta es una tabla AZUL;
testearla también es divertido.
Esta es una tabla AMARILLA;
testearla también es divertido.
Esta es una tabla NARANJA;
testearla también es divertido.
Esta es una tabla ROJA;
testearla no es tan divertido.

El div tableb también separará las celdas dentro de sus tablas.

Esta es una tabla ROTA;
¡testearla es bastante divertida!

Harry ha estado formateando sus tablas manualmente durante mucho, mucho tiempo. Qué friki.

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;
    }
    }
}
+ CÓDIGO

Puntuación: 0+–x

CSS AZASTYLE

- ¡Pronto habrá una gran actualización! -

AZASTYLE es una extensión minimalista del BLANKSTYLE de HarryBlankHarryBlank construido específicamente para su uso en los artículos de LirynLiryn.

Puede importarlo pegando el siguiente texto en la parte superior de su página:

[[include :lafundacionscp:theme:azastyle]]

Existe para que el formato preferido por dicha usuaria pueda ser fácilmente copiado y editado en todas sus obras.

Si usted no es LirynLiryn y estás usando este tema, recuerda que puede cambiar inesperadamente.

Variantes del Tema

Insertando diferentes variables en el bloque de inclusión del tema, se puede seleccionar una variante de tema prefabricada, así:

Variante de En Guardia 43

[[include :lafundacionscp:theme:azastyle canada=a]]

 Site-43.png
og43_themevariant.png

[[include :lafundacionscp:theme:azastyle poland=a]]

 Site-120.png
f120a_themevariant.png

Variante de S&C Plásticos

[[include :lafundacionscp:theme:azastyle slothspit=a]]

 Big87.png
s&c_themevariant.png

Variante del Área-150

[[include :lafundacionscp:theme:azastyle wyoming=a]]

 Area-150.png
twig1_themevariant.png

+ Mostrar más variantes

Ejemplos

lgtrans.png

IMAGEN

¡Esto es un span bt!

¡Bloque de citas en colores!

bloque de citas dentro de un div table1

bloque de citas dentro de un div table2

bloque de citas dentro de un div table3

bloque de citas dentro de un div table4

bloque de citas dentro de un div table5

bloque de citas dentro de un div table6

Título del Documento:

Subtítulo del Documento

Autor
Afiliación

lgtrans.png

I. NOMBRE DEL CAPÍTULO

Contenido del documento.

Cree estos con [[div class="paper"]]!

Cree estos conh [[div class="quote"]]!

— Albert Einstein, 1984

Cree estos con [[div class="box"]]!

[[=]]
[[collapsible show="+ Mostrar código fuente" hide="- Cerrar"]]

/*
 
    AZASTYLE CSS
    [2022 Wikidot Theme]
    By Azamo
 
    Based on:
       BLANKSTYLE CSS by HarryBlank, Placeholder McD
 
*/
 
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
 
:root {
   --header-title: "FUNDACIÓN SCP";
   --header-subtitle: "SEGURIDAD - CONTENCIÓN - PROTECCIÓN";
   --accent: 10, 10, 10;
   --logoimg: url(https://lafundacionscp.wdfiles.com/local--files/theme%3Apaperstack/lgtrans.png);
}
 
/* Disables BLANKSTYLE fade-in */
/* --- */
@keyframes fadeIn {
   from {
      opacity: 1;
   }
   to {
      opacity: 1;
   }
}
/* --- */
 
/* MAIN */
 
body {
   color: black;
   background-image: linear-gradient( to bottom, rgba(var(--accent), 0.25), #ffffff 70px, #ffffff 100px, #ffffff 100%);
}
 
 ol li {
     margin: 0 0 1em;
}
 ul{
     margin:1em 0;
}
 li, p {
     line-height: 1.6;
     text-underline-offset: 40%;
}
 
div#extra-div-1 {
   background-image: var(--logoimg);
   opacity: 75%;
}
 
#header h1 a::before {
   font-size: 1em;
   -webkit-text-stroke: 2px black;
}
 
#header h2 {
   margin-top: 0.9rem;
}
 
#main-content {
   top: -0.5rem;
}
 
#top-bar div.open-menu a {
   border: none;
   background: rgb(var(--accent));
   color: white;
}
 
#top-bar,
#top-bar a {
   top: 10rem;
   font-weight: bold;
   color: black;
}
 
.mobile-top-bar {
   left: unset;
}
 
#page-content .divider > hr,
div.paper hr {
   background: transparent !important;
   border-top: double 4px black;
}
 
#side-bar {
   background: white;
}
 
#side-bar .side-block.media,
#side-bar .side-block.resources,
#side-bar .side-block {
   border: solid 2px black;
   background: rgb(var(--accent));
   background: linear-gradient(0deg, rgba(var(--accent), 1) 0%, rgba(var(--accent), 0.8) 100%);
}
 
#side-bar .side-block.resources a,
#side-bar .side-block a {
   color: white;
}
 
#side-bar .collapsible-block-folded {
   text-align: center;
}
 
#side-bar .collapsible-block-unfolded-link {
   border-bottom: solid 1px white;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
   color: white;
}
 
#side-bar .heading {
   color: #ffffffc2;
   border-color: white;
   text-transform: uppercase;
   font-family: 'Montserrat', sans-serif;
}
 
#side-bar .menu-item.small {
   color: #ffffffc2;
}
 
/* ----------------- */
/* CONTENT */
 
::selection {
   background: rgb(var(--accent));
   text-shadow: none;
   color: white;
}
 
.scp-image-block .scp-image-caption {
   background-color: black !important;
   color: #ffffff;
   margin-top: 10px;
}
 
.scp-image-block {
   border: none;
}
 
.scp-image-block img {
   border: solid 1px black;
   box-sizing: border-box;
}
 
.scp-image-caption a {
   color: #ec7f8f;
}
 
.blockquote,
div.blockquote,
blockquote {
   border: solid 1px grey;
}
 
.table1 .blockquote,
.table1 div.blockquote,
.table1 blockquote {
   background: rgb(224, 255, 212);
}
 
.table2 .blockquote,
.table2 div.blockquote,
.table2 blockquote {
   background: rgb(226, 244, 255);
}
 
.table3 .blockquote,
.table3 div.blockquote,
.table3 blockquote {
   background: rgb(255, 245, 189);
}
 
.table4 .blockquote,
.table4 div.blockquote,
.table4 blockquote {
   background: rgb(255, 203, 148);
}
 
.table5 .blockquote,
.table5 div.blockquote,
.table5 blockquote {
   background: rgb(255, 207, 207);
}
 
.table6 .blockquote,
.table6 div.blockquote,
.table6 blockquote {
   background: rgba(255, 218, 255);
}
 
#page-content a.collapsible-block-link:not(.licensebox a.collapsible-block-link, .info-container a.collapsible-block-link) {
   font-weight: 600;
   color: white;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 7px;
   padding-right: 9px;
   background: rgb(var(--accent));
   border-radius: 6px;
   margin-top: 10px;
   margin-bottom: 12px;
}
 
tt,
.page-source,
pre {
   font-family: 'Fira Code', monospace;
}
 
.paper {
   border: solid 1px grey;
   padding: 3rem 1.5rem 1.5rem 1.5rem;
   margin: 1.3rem auto 1.3rem auto;
}
 
.quote {
   margin: auto;
   width: 90%;
   border: solid 3px #a6864c;
   background: #fff3cc;
   padding: 0.5rem 0.5rem 0.5rem 1rem;
}
 
.box {
   background: white;
   border: double 3px black;
   padding: 0.7rem;
   margin: 1rem auto 1rem auto;
   width: 80%;
}
 
.accentbox {
   background: rgba(var(--accent), 0.9);
   color: white;
   border: solid 4px black;
   padding: 0.5rem 0.8rem 0.5rem 0.8rem;
   margin: 1.5rem auto 1.5rem auto;
   width: 80%;
   text-indent: 8px;
}
 
h1, h2 {
   color: rgb(var(--accent));
}
 
.authorlink-wrapper > a {
   background: white;
   font-weight: bold;
   border: solid 1px black;
   padding: 0 4px 2px 6px;
}
 
.authorlink-wrapper > a::before {
   color: black;
}
 
.authorlink-wrapper {
   margin-top: 1px !important;
}
 
.info-container {
   --barColour: rgba(var(--accent), 0.8);
   --linkColour: white;
}
 
.anom-bar-container, .anom-bar-container * {
   font-family: 'Montserrat', Inter, sans-serif !important;
}
 
.acs-extra-1, .acs-extra-2, .acs-extra-3, .acs-extra-4 {
   font-family: 'Montserrat', Inter, sans-serif !important;
}
 
.sidebox th {
   color: white;
   background: rgb(var(--accent)) !important;
   font-family: 'Montserrat', Verdana, sans-serif;
}
 
.bt {
   font-family: 'Montserrat', Verdana, sans-serif;
   font-weight: bold;
}
 
/* ----------------- */
/* MISC */
 
.page-options-bottom {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: center;
   justify-content: center;
}
 
.page-options-bottom a {
   margin: 3px;
   color: white;
   background: rgba(0, 0, 0, 0.8);
   background: linear-gradient(0deg, rgba(var(--accent), 1) 0%, rgba(var(--accent), 0.8) 100%);
   padding: 7px 15px 7px 15px;
   text-decoration: none;
   font-size: 90%;
}
 
.page-options-bottom a:hover {
   background: rgba(var(--accent), 0.7);
}
 
#main-content .page-tags {
   border-top: 4px double black;
}
 
#main-content .page-tags a {
   display: inline-block;
   height: .8125rem;
   margin: 0 0 .5rem .75rem;
   padding: .1875rem .3125rem .1875rem 0;
   color: white;
   background-color: rgb(var(--accent));
   border-bottom-right-radius: .25rem;
   border-top-right-radius: .25rem;
   line-height: 13px;
   line-height: .8125rem;
   font-size: 11px;
   font-size: .6875rem;
   font-weight: bold;
}
 
#main-content .page-tags a:before {
   width: 0;
   height: 0;
   top: -.1875rem;
   left: -.625rem;
   padding: 0 .0625rem .1875rem;
   border-color: transparent rgb(var(--accent)) transparent transparent;
   border-style: solid;
   border-width: .5rem .5rem .5rem 0;
}
 
#main-content .page-tags a:before,
#main-content .page-tags a:after {
   content: "";
   position: relative;
   float: left;
}
 
#main-content .page-tags a:after {
   width: .25rem;
   height: .25rem;
   top: .2813rem;
   left: -.5rem;
   background-color: white;
   border-radius: .125rem;
}
 
#main-content .page-tags span {
   max-width: 100%;
   border-top: .5rem solid transparent;
}
 
#page-tags-input {
   font-weight: bold;
   word-spacing: 8px;
}
 
#edit-page-form input.text {
   font-family: 'Montserrat', sans-serif;
   font-size: 120%;
}
 
#edit-page-form>table.form>tbody>tr>td:nth-child(1) {
   font-weight: bold;
}
 
.edit-help-34 {
   font-size: 85%;
   opacity: 60%;
   transition-duration: 0.3s;
}
 
.edit-help-34:hover {
   opacity: 100%;
}
 
textarea,
#edit-page-form input.text {
   outline: none;
}
 
textarea:focus-visible,
#edit-page-form input.text:focus-visible {
   outline: solid 1px black;
}
 
.wd-editor-toolbar-panel {
   filter: invert(1) hue-rotate(180deg);
}
 
#action-area>p {
   font-size: 85%;
   color: darkslategrey;
}
 
#action-area>p:nth-child(5)>a {
   display: block;
   text-align: center;
   font-size: 120%;
   font-weight: bold;
}
 
#who-rated-page-area>div {
   column-count: 4;
}
 
@media (max-width: 900px) {
   #who-rated-page-area>div {
      column-count: 3;
   }
}
 
@media (max-width: 700px) {
   #who-rated-page-area>div {
      column-count: 2;
   }
}
 
@media (max-width: 540px) {
   #who-rated-page-area>div {
      column-count: 1;
   }
}
 
#page-content .content-warning.creditRate {
   padding-top: 8px;
   padding-right: 21px;
}

Site lafundacionscp does not allow cross-site includes.

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