Theme Squares

FERMATI SUBITO

Questa è una pagina template utilizzata dal sito della Fondazione SCP.

PER FAVORE, NON TOCCARE QUESTA PAGINA
SENZA IL PERMESSO DELLO STAFF


Cos'è questo

Un component che crea dei riquadri che mostrano i colori di un tema CSS.

Creato da WoedenazWoedenaz e CroquemboucheCroquembouche.

Questo component è pensato per essere usato nelle pagine dei temi CSS, ma può essere usato in quasi ogni pagina se desiderato.

Utilizzo:

Nella pagina desiderata:

[[include :fondazionescp:component:theme-squares -=-
| color1-name=My Favourite Colour
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]

Si noti il "-=-" dopo il nome del component. Esso deve essere incluso — altrimenti tutto questo testo che spiega come si usa il component apparirà nella pagina.

Per questo component vi sono tre parametri per colore. Rimpiazza N col numero del colore
For this component, there are three parameters per color. Replace N with the number of the color.

colorN-name Il nome del colore. Scegli quello che preferisci!
colorN-variable Il nome della variabile CSS1 che contiene il colore.
La variabile dovrebbe essere formata da tre numeri separati da virgola che rappresentano i valori RGB del colore. Questo è coerente con le variabili di colore dei temi BHL.
Se le tue variabili contengono qualcos'altro (ad esempio, un intero colore RGB/RGBA o un colore in valori hex), dovrai sovrascrivere il colore di background mediante CSS.
colorN-info Informazioni sul colore, solitamente i valori RGB. Meglio tenerle brevi.
Se non vuoi testo, scrivi invece @@ @@.
colorN-has-light-text
Opzionale. Default: 0
O 0 or 1. Determina il colore del font nel riquadro; utile per assicurarsi vi sia abbastanza contrasto tra il colore dello sfondo e quello del testo..
Se 1, il valore di --swatch-text-light viene utilizzato, or bianco (255, 255, 255) se non definito. Altrimenti --swatch-text-dark, o nero (0, 0, 0). Come in tutti gli stili BHL con variabili CSS di colori, sono previsti tre numeri che rappresentino i valori RGB.

Un colore può essere usato solo se è esposto come variabile CSS. Tutti i colori in un tema Black Highlighter hanno una variabile CSS corrispondente di default, quindi per i temi BHL il component dovrebbe funzionare immediatamente. Tuttavia, il tema Sigma9 non usa variabili CSS, per cui le uniche variabili CSS disponibili sono quelle definite nel tuo tema.
This component can hold a maximum of 6 primary colors and 12 secondary colors. I recommend two primary colors and no more than six secondary colors.

Per aggiungere un colore primario basta aggiungere le prime tre dei parametri più sopra nell'include, come mostrato nell'esempio.

Per aggiungere un colore secondario il processo è lo stesso, ma rimpiazza 'color' con 'subcolor'.

Esempio

Ecco un esempio più lungo, tratto dal BHL.

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

Questo produce i seguenti riquadri colorati:

bhl-squares.png

Aggiustamenti

Puoi rifinire l'aspetto del component col CSS

L'intero component ha la classe .colors-container e ogni CSS che lo riguarda dovrebbe includere quella classe per assicurarsi che null'altro nella pagina sia affetto. Ogni riquadro colorato ha la classe .color. I colori primari hanno un parent .colors e i colori secondari hanno un parent .subcolor-

Per sovrascrivere lo sfondo di un riquadro serve usare !important.

Per esempio, il tema Laughter and Knives aggiunge un gradiente nello sfondo del nono colore secondario così:

.colors-container .subcolors .color:nth-of-type(9) {
    background: var(--pastel-rainbow) !important;
}

Strumento per convertire sintassi preesistente in argomenti per questo component

{$color1-name}{$color1-variable}{$color1-info}
{$color2-name}{$color2-variable}{$color2-info}
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
{$subcolor1-name}{$subcolor1-variable}{$subcolor1-info}
{$subcolor2-name}{$subcolor2-variable}{$subcolor2-info}
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
Salvo diversa indicazione, il contenuto di questa pagina è sotto licenza Creative Commons Attribution-ShareAlike 3.0 License