Quantum Dark Theme

Rating:

Rating con modulo scp-wiki:info:start/more/end:

• 

  close

  Info

  ---

  X

  Info about your page.

  ---

  More information about your page.

  ---

Rating con modulo author-label-source start/end:

QuantumCryptographer

Testo in grassetto: Testo.

Questo è un tema creato da QuantumCryptographer a partire dalla DarkMode (già presente sul sito) creata da Dr_Grom. Questo tema è una modifica puramente estetica del tema di base della SCP Foundation, ovvero Sigma-9.

Per importare questo tema, inserire il seguente codice all'inizio:

[[include :fondazionescp:theme:quantumdark]]

---

Collapsible - Click me

Didascalia immagine

Header h1

Header h2

h3

h4

h5

h6

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.¹

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Longer Tab

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

---

Schema Colori

Questo tema utilizza il seguente schema di colori:

Descrizione	Variabile	Valore
Accent Color	ct_col_link	#e11
Link già visitato	ct_col_link-visited	#50C878
Header h1	ct_col_h1-txt	#e11

Lo schema colori slegato dalle variabili è invece il seguente:

Descrizione	Colore
Background (main content)	#19191B
Testo (main content)	#d8d8d8
Sfondo image-caption	#333
Sfondo blockquote	#202023

▶ Spiegazione Dettagliata

Accent Color: L'accent color è controllato dalla variabile ct_col_link. L'accent color ha molteplici ramificazioni: influenza il colore dei link "nuovi" (non già visitati), il colore dei collapsible, il colore dei tags, eccetera. È quindi uno dei colori più impattanti all'interno di un color-scheme.

Link già visitato: Il colore dei link già visitati è controllato dalla variabile ct_col_link-visited. Esempio di un link: SCP-001-IT.

Header h1: L'header h1 è l'header di default più grande, nonché colorato diversamente (al contrario degli altri). In codice Wikidot, è quello che si ottiene anteponendo + al testo. Il suo colore è controllato dalla variabile ct_col_h1-txt.

Page Title: Il Page Title, ovvero il titolo della pagina (e.g., "Quantum Dark Theme"), è controllato dalla variabile ct_col_page-title, valorizzata (come sempre) nella root del CSS. È interessante osservare che questa variabile è legata alla variabile ct_col_h1-txt, quindi, modificando ct_col_h1-txt, si cambierà automaticamente anche il colore del Page Title. Ciò è conseguenza del seguente codice sorgente di Sigma 9:

--ct_col_page-title: var(--ct_col_h1-txt);

In conclusione, la variabile ct_col_h1-txt influenza sia il colore dell'header h1 (come si ci aspetta dal nome) sia (un po' inaspettatamente) il colore del Page Title.

---

Templates-IT (Troubleshooting)

Bisogna prestare un minimo di attenzione quando si utilizzano i Templates-IT con questo tema. In generale, è sufficiente dichiarare esplicitamente il colore del testo per risolvere eventuali difetti estetici (attualmente presenti anche con la DarkMode). È sufficiente fare un singolo esempio per chiarire il concetto.

▶ Esempio: Post-it

Utilizzandolo normalmente, otterreste il seguente effetto:

Testo del post-it.

che è alquanto sgradevole, esteticamente. Il testo all'interno del post-it è di colore #d8d8d8 (ovvero il colore del tema), mentre il codice del post-it normalmente presuppone che il testo sia del colore di default di Sigma-9, che è invece #333. Per risolvere il problema, è quindi sufficiente ridichiarare il colore, ovvero così:

.post-it_quantumdark{
    background-color: lemonchiffon;
    padding: 16px;
    font-family: 'Satisfy';
    font-size: 18px;
    border-radius: 5px;
    width: 85%;
    margin: 0 auto;
    color: #333;
}

dove è stata aggiunta in fondo la riga di codice: color: #333; (e ho anche cambiato il nome della div in .post-it_quantumdark, ma questo non è necessario). Utilizzando questo post-it "patchato" per essere compatibile con il tema Quantum Dark, otteniamo quindi:

Testo del post-it.

ovvero l'effetto desiderato.

Importante: Il codice CSS qui presentato per il post-it, ovvero .post-it_quantumdark, è retro-compatibile con Sigma-9, anche senza la DarkMode. Ciò significa che potete utilizzarlo sempre e funzionerà sia con la DarkMode che senza. Questo avviene poiché altro non è stato fatto se non ripristinare il colore del testo al suo valore originale.

In altre parole, potete utilizzare .post-it_quantumdark in tutti i vostri lavori e ciò correggerà automaticamente il difetto estetico presente con la DarkMode di Dr_Grom (e, di conseguenza, anche quello con il tema Quantum Dark).

Note a piè di pagina

1. This is a footnote.

---

Source Code:

/*
    Quantum Dark Theme
    [2022 Wikidot Theme - CC BY-SA 3.0]
    By QuantumCryptographer
    Applicable to -IT version of Sigma-9
*/
 
/* ROOT VARIABILES */
:root{
   --ct_col_h1-txt: #e11;
   --ct_col_link: #e11;
   --ct_col_link-visited: #50C878;
   --txtarea_scrollbar_track: #afafaf;
   --txtarea_scrollbar_thumb: #e5e5e5;
}
 
/* --- LINK COLOR --- */
a {
   color: var(--ct_col_link);
}
a:visited {
   color: var(--ct_col_link-visited);
}
 
/* --- H1 and PAGE-TITLE COLOR --- */
h1, #page-title {
   color: var(--ct_col_h1-txt);
}
 
/* --- TOP PART --- */
div#container-wrap{
   background: url(http://aisen.wikidot.com/local--files/theme:black/body_bg.png) top left repeat-x;
}
 
/*--- SIDE BAR ---*/
 
#side-bar .heading {
    border-bottom: 1px solid #766;
    color: #ff8c00;
}
 
#side-bar .side-block {
   background-color: #19191b;
   border: 1px solid #766;
}
#side-bar:target .close-menu {
   background: rgba(0,0,0,0.4) 1px 1px repeat;
}
#side-bar div.menu-item a {
   color: #c11;
}
#side-bar .side-block.yellow {
    background: #1f1f17;
}
#side-bar .side-block.green {
    background: #171f17;
}
#side-bar .side-block.blue {
    background: #17171f;
}
#side-bar .side-block.red {
    background: #1f1010;
}
 
/* ---- MAIN BODY ---- */
 
#content-wrap{
   background-color: #19191B
   color: #d8d8d8;
}
 
#container-wrap-wrap{
   background-color: #19191B;
   color: #d8d8d8;
}
 
/* --- BLOCKQUOTE --- */
 
blockquote, div.blockquote, .borderless-tabs .yui-content blockquote {
   background-color: #202023;
   color: #d8d8d8;
}
 
/* SCP IMAGE CAPTION */
 
.scp-image-block .scp-image-caption{
   background-color: #333;
   color: #d8d8d8;
}
 
/* INPUT: TextArea */
 
input.text, textarea {
    background: #070709;
    border-color: #666;
    color: #d8d8d8;
}
 
/* Scrollbar Patch */
#edit-page-textarea::-webkit-scrollbar-track {
    background: var(--txtarea_scrollbar_track);
}
#edit-page-textarea::-webkit-scrollbar-thumb {
    background: var(--txtarea_scrollbar_thumb);
}
 
/* --- TEXT-COLOR PATCHES --- */
 
table.wiki-content-table th{
   color: #333;
}
.yui-navset .yui-content {
   color: #333;
}
#lock-info {
   background-color: #333;
   color: #d8d8d8;
}
.code{
   color: #333;
}
 
/* Rating Modules */
#page-content .authorbox{
   color: #333;
}
.modalbox{
   color: #333;
}
.modalbox .credit {
    color: #333;
}
.modalbox .modalbox-title {
    color: #333;
}
.creditButton a {
    color: #fff6f0;
}
 
/* Interwiki Frame */
.scpnet-interwiki-frame {
    filter: invert(80%) hue-rotate(187deg) brightness(.35) saturate(5.3);
}