CSS BLANKSTYLE

CSS BLANKSTYLE
Placeholder McD, HarryBlank
Publicado Marzo 2021

Gracias a stormbreath, EstrellaYoshte, y Croquembouche por crear colectivamente la mayor parte del código que se incluye en este tema.

Info

---

CSS BLANKSTYLE
Por: Placeholder McD, HarryBlank

Gracias a stormbreath, EstrellaYoshte, y Croquembouche por crear colectivamente la mayor parte del código que se incluye en este tema. Especialmente a Estrella.

---

¿Qué es Esto?

Esto es CSS Blankstyle: un estilo visual creado por Placeholder McD y HarryBlank 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 EstrellaYoshte, 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:

• Alternar Barra Lateral
• Fundido de Entrada (ajustado a speed=3)
• Animación de ACS
• Mejores Notas al Pie

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 PeppersGhost 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

/*
    BLANKSTYLE CSS
    [2021 Wikidot Theme]
    By Placeholder McD and HarryBlank
    Based on:
       Paperstack Theme by EstrellaYoshte
       Penumbra Theme by EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;1,800&display=swap');
 
#page-content { font-size: 0.8rem; }
 
#main-content {
    top: -1.6rem;
    padding: 0.2em;
}
 
div#container-wrap {
     background-image: none;
}
 
div#header {
    background-image: none;
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h2 { margin-top: 0.5rem; }
#header h1 span, #header h2 span { font-size: 0; display: none;}
#header h1 a::before, #header h2::before {
    color: #000;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif !important;
    text-shadow: none;
}
 
#header h1 a::before {
  content: var(--header-title, "SITIO-43 DE I\002B D");
  font-weight: 400;
  font-size: 1.3em;
}
 
#header h2::before {
  content: var(--header-subtitle, "SUBVIRTIENDO COSTUMBRES POPULARES");
  font-weight: 700;
  font-size: 1.3em;
}
 
@media (max-width: 707px) {
    #header h1 a::before {
        font-size: 1.6em;
    }
}
 
#login-status,
#login-status a {
    color: #333333;
}
 
#page-title {
    display: none;
}
 
#footer, #footer a {
    background: transparent;
    color: #333333;
}
 
#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: none;
    background: #333333;
    box-shadow: none;
    border-radius: 0px;
    color: #efefef;
}
 
#search-top-box input.empty {
    color: #999999;
}
 
#search-top-box {
    top: 2.3rem!important;
    right: 8px;
}
 
#top-bar {
   display: flex;
   justify-content: center;
   right: 0;
   top: 7.9rem;
}
 
#top-bar, #top-bar a {
    color: #333333;
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    color: #000;
    letter-spacing: 1px;
}
 
h1 {
    font-size: 2em;
}
 
h2 {
    font-size: 1.45em;
}
 
div#extra-div-1 {
    height: 160px;
    width: 100%;
    top: 0;
    position: absolute;
    background: url('https://lafundacionscp.wdfiles.com/local--files/theme%3Ablankstyle/43Head.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: -1;
}
 
@media (max-width: 707px) {
    div#extra-div-1 {
        top: 15px;
    }
}
 
body {
    background-image: linear-gradient(
        to bottom,
        #e0e0e0, #e0e0e0 90px,
        #e0e0e0 90px, #ffffff 200px,
        #ffffff 200px, #ffffff 100%);
    background-repeat: no-repeat;
}
 
:root {
  --timeScale: 1.5;
  --timeDelay: 1.5s;
  --posX: calc(50% - 358px - 13rem);
}
 
#page-content hr {
    background-color: #000;
}
 
#page-content tr th {
    padding: 6px;
    border: #000 1px solid;
}
 
#page-content tr td {
    padding: 12px;
    border: #000 1px solid;
    line-height: 1.4;
}
 
#page-content .sidebox tr td,
#page-content .sidebox tr th {
    padding: 0.35em;
}
 
#side-bar {
    border-right: 1px solid #333;
    background: #DDD;
}
 
#side-bar .side-block {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
}
 
#top-bar div.open-menu a {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
}
 
@media (max-width: 767px) {
    #side-bar:target {
        border: 1px black;
        box-shadow: none;
    }
}
 
#side-bar .side-block {
    border: 1px solid #333;
    border-radius: 0;
    box-shadow: none;
    background-color: #FDF6D7;
}
#side-bar .side-block.media {
    background-color:#D7EFE7;
}
#side-bar .side-block.resources {
    background-color:#F5D8E0;
}
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 4px;
}
#page-content .rate-box-with-credit-button {
    background-color: #ffffff;
    border: solid 1px #000;
    box-shadow: none;
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: #333333;
}
 
#page-content .rate-box-with-credit-button .fa-info:hover {
    background: #333333;
    color: #ffffff;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px #ffffff;
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
    box-shadow: none;
    border: solid 1px #000;
    margin: unset;
    margin-bottom: 4px;
    border-radius: 0;
}
 
div.page-rate-widget-box .rate-points {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: none;
    border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #ffffff;
    border-top: none;
    border-bottom: none;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #333333;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #333333;
    color: #ffffff;
}
 
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
}
 
.page-rate-widget-box .cancel a {
    color: #333333;
}
.page-rate-widget-box .cancel a:hover {
    background: #333333;
    color: #ffffff;
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
 
.anchor {
    position: sticky;
    height:0;
    top: 0;
}
.sidebox {
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
@media (max-width: 1290px) {
    .sidebox {
        display: none;
        visibility:hidden;
    }
}
 
.scp-image-block {
    box-shadow: none;
}
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: #333333;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: #333333;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: #efefef;
     border: unset;
     box-shadow: none;
     box-shadow: none;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ffffff;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: #333333;
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #ffffff;
     background-color: #ffffff;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: #333333;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #ffffff;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #ffffff;
     background-color: #333333;
}
 .yui-navset .yui-content {
    background-color: #ffffff;
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
    padding: .5em;
    border: 1px solid #333;
    box-sizing: border-box;
}
 
/*---- SCROLLBAR ----*/
 
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background: #FFF;
    border-left: 1px solid #333;
}
 
::-webkit-scrollbar-thumb {
     background: #CCC;
     border: #333 1px solid;
}
 
::-webkit-scrollbar-thumb:hover {
     background: #EEE;
}
 
/*---- CENTER IMAGES ON MOBILE courtesy of EstrellaYoshte and PeppersGhost ----*/
 
.imagediv {
    float: right;
    margin: 15px
}
 
@media (max-width: 540px) {
  .imagediv {
    float: none;
    text-align:center;
    margin: auto;
  }
}
 
@media only screen and (max-width: 600px) {
    .scp-image-block.block-right{
        float: none;
        margin: 10px auto;
    }
}
 
/*---- ACS-COLORED TABLE DIVS ----*/
 
#page-content .table1 tr th,
#page-content .table1 .scp-image-block .scp-image-caption {
    background-color: #D7EFE7;
}
 
#page-content .table2 tr th,
#page-content .table2 .scp-image-block .scp-image-caption {
    background-color: #D8ECF4;
}
 
#page-content .table3 tr th,
#page-content .table3 .scp-image-block .scp-image-caption {
    background-color: #FDF6D7;
}
 
#page-content .table4 tr th,
#page-content .table4 .scp-image-block .scp-image-caption {
    background-color: #FFDABF;
}
 
#page-content .table5 tr th,
#page-content .table5 .scp-image-block .scp-image-caption {
    background-color: #F5D8E0;
}
 
#page-content .table6 tr th,
#page-content .table6 .scp-image-block .scp-image-caption {
    background-color: rgba(146, 0, 255, 0.2);
}
 
.tableb .wiki-content-table {
    border-collapse: separate;
    border-spacing: 2px;
}
 
.tableb .scp-image-block {
    border: none;
}
 
.tableb .scp-image-block img {
    border: #000 1px solid;
    box-sizing: border-box;
}
 
.tableb .scp-image-block .scp-image-caption {
    margin-top: 2px;
    border: #000 1px solid;
    box-sizing: border-box;
}
 
.top-left-box > .item {
  display: none;
}
 
/* ---- WORDS NO LONGER BROKEN, THE CROQUEMBOUCHE HAS SPOKEN ---- */
span, a { word-break: normal !important }
 
.avatar-hover { display: none !important; }
 
#breadcrumbs, .pseudocrumbs {
    text-align: center;
    padding-top: 10px;
}
 
#main-content .page-tags span {
    max-width: 100%;
}
 
/* -- FANCY THINGS from Woedenaz's Dustjacket Theme -- */
 
.fancyhr hr {
    border-top: 2vw solid transparent;
    background-color: rgba(var(--bright-accent), 0);
    height: 0;
    box-sizing: border-box;
    border-image-source: url('http://lafundacionscp.wdfiles.com/local--files/theme%3Adustjacket-sigma/wl_hr.png');
    border-image-repeat: round round;
    background: none;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}
 
.fancyborder {
    box-sizing: border-box;
    border: 2vw solid rgba(0,0,0,0.5);
    border-image: url('https://lafundacionscp.wdfiles.com/local--files/theme%3Adustjacket-sigma/wl_border.png') 600 round;
    border-image-width: 6;
    padding: 2vw;
}