Cercle Ariane

Ce thème a été réalisé par Praetor3005, avec comme base le code de MyrandFox "Deep Space". Un immense merci à SuperAgentsam03, Greencell, Fokyfebecr et LouIou pour leur aide à différents moments de la création. Logo réalisé par l'incroyable Mel-Raspberry. Merci à Frost Wick pour l'idée de logo !

Pour incorporer ce thème à votre page, mettez la ligne ci dessous n'importe où à l'intérieur de cette dernère (préférablement au début) :

[[include :fr-backrooms-wiki:theme:cercle-ariane]]

Exemples :

---

est-ce que ça valait vraiment le coup ?

Une ligne horizontale peut être créée avec 5 traits d'union "-----" et s'étend à travers toute la page si elle n'est pas placée dans quelque chose (ex un bloc note). Des lignes horizontales séparent les sections de ce document.

Des titres peuvent être créés en mettant entre un à six plus "+" au début de la ligne

+ Votre Titre

Premier Titre

Deuxième Titre

Troisième Titre

Quatrième Titre

Cinquième Titre

Sixième Titre

Dépliant (collapsible) CSS

[[collapsible show="+ Titles" hide="- Titles"]]
[[/collapsible]]

Onglet

Ceci est un onglet.

Mise en Onglet

Tiens regarde, plus de texte ici.

Quelle originalité.

Grand Onglet

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Ceci est un grand onglet. Il contient beaucoup de texte inutile.

Cet onglet a un nom très long pour une raison obscure. Je me demande pourquoi ?

Onglet Vide

Onglet Vide

Onglet Vide

Onglet Vide

Onglet Vide

TITRE DE L'ONGLET

CONTENU DE L'ONGLET

TITRE DE L'ONGLET

CONTENU DE L'ONGLET

Ceci est un bloc note, créé en mettant "> " au début de chaque ligne.
Plus de texte

---

Ceci est une ligne horizontale

bloc note emboîté

Ceci est un	tableau
Vous devriez déjà	savoir comment en
faire

Note¹
ce texte
est ici
pour que vous puissiez
voir à quoi
tout ressemble
avec différents
formats^et
autres_{modifications}
comme des liens qui n'existent pas
Et d'autres qui existent !

Citations et Blocs :

---

Blocs :

[[div class="darkblock"]]

[[/div]]

---

[[div class="lightblock"]]

[[/div]]

---

[[div class="lighterblock"]]

[[/div]]

---

Blocs de Citations :

[[div class="lightstyled-quote"]]

[[/div]]

---

[[div class="darkstyled-quote"]]

[[/div]]

---

Blocs avec Logo :

[[div class="light-logoblock"]]

[[/div]]

---

[[div class="dark-logoblock"]]

[[/div]]

---

[[div class="lightborder-logoblock"]]

[[/div]]

---

[[div class="darkborder-logoblock"]]

[[/div]]

---

Blocs avec Bordures :

[[div class="light-borderblock"]]

[[/div]]

---

[[div class="dark-borderblock"]]

[[/div]]

---

Blocs à Titres :

INSÉRER TEXTE

[[div class="light-titleblock"]]
[[span class="light-titlebox"]]INSÉRER TEXTE[[/span]]

[[/div]]

---

INSÉRER TEXTE

[[div class="dark-titleblock"]]
[[span class="dark-titlebox"]]INSÉRER TEXTE[[/span]]

[[/div]]

---

Autres Blocs :

[[div class="light-cabox"]]

[[/div]]

---

[[div class="dark-cabox"]]

[[/div]]

---

Code du Thème

@import url('https://fonts.googleapis.com/css2?family=Anuphan&display=swap');
 
/* I swear that is not Myrand's code */
 
@media screen and (prefers-reduced-motion: no-preference) {
    #page-title, #breadcrumbs, #page-content > * {
      animation-name: fadeIn;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
      animation-fill-mode: backwards;
    }
  }
  #page-title { animation-delay: 0s; }
 
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(0,30px);
    }
    to {
      opacity: 1;
      transform: translate(0,0);
    }
  }
 
:root {
   --fade-in-delay: 0.1s;
 
   --theme-base: "black-highlighter";
   --theme-id: "deep-space";
   --theme-name: "Deep Space";
 
   --logo-image: url("https://zupimages.net/up/23/30/foux.png");
   --header-title: "Cercle Ariane";
   --header-subtitle: "Envers et contre tout.";
 
   --body-font: 'Noto Sans', sans-serif;
   --header-font: 'Fantasque Sans Mono', Courier New, Ubuntu Mono, Consolas, monospace;
   --title-font: 'Anuphan', sans-serif;
   --mono-font: 'Anuphan', sans-serif;
 
   --white-monochrome: 255, 255, 255;
   --dark-gray-monochrome: 48,48,52;
   --pale-gray-monochrome: 255, 255, 255;
   --light-gray-monochrome: 160, 160, 160;
   --gray-monochrome: 72, 69, 60;
   --black-monochrome: 30, 30, 30;
   --bright-accent: 100, 91, 156;
   --medium-accent: 134, 118, 226;
   --dark-accent: 219, 91, 226;
   --pale-accent: 239, 167, 243;
 
     /* Primary Theme Colors */
    --swatch-background: var(--black-monochrome);
    --swatch-primary: var(--bright-accent);
    --swatch-primary-darker: var(--medium-accent);
    --swatch-primary-darkest: var(--black-monochrome);
    --swatch-secondary-color: var(--dark-gray-monochrome);
 
    /* Primary Text Colors */
    --swatch-text-dark: var(--white-monochrome);
    --swatch-text-light: var(--brightest-accent);
    --swatch-important-text: var(--brightest-accent);
    --barColour: var(--very-light-gray-monochrome);
    --linkColour: var(--dark-accent);
 
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--black-monochrome);
    --swatch-menubg-light-color: var(--dark-gray-monochrome);
    --swatch-menubg-medium-color: var(--medium-accent);
    --swatch-menubg-medium-dark-color: var(--gray-monochrome);
    --swatch-menubg-dark-color: var(--dark-gray-monochrome);
    --swatch-menubg-black-color: var(--black-monochrome);
    --swatch-menubg-hover-color: var(--black-monochrome);
    --swatch-menutxt-dark-color: var(--white-monochrome);
    --swatch-menutxt-light-color: var(--white-monochrome);
    --swatch-border-color: var(--bright-accent);
 
    /* Primary Header Colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
    --swatch-topmenu-border-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--black-monochrome);
 
    /* Link Colors */
    --link-color: var(--dark-accent);
    --visited-link-color: var(--dark-accent);
    --hover-link-color: var(--pale-accent);
    --sidebar-links-text: var(--swatch-menutxt-dark-color);
    --link-color-bright: var(--medium-accent);
 
   /* CECS Colors */
   --cecs-accent: var(--bright-accent) !important;
   --cecs-dark: 84,82,96 !important;
   --cecs-light: var(--white-monochrome) !important;
 
   /* Sidebar */
   --swatch-sidebar-collapsible-tab-bg: var(--bright-accent);
 
/* Rating Module Colors */
    --rating-module-button-color: var(--bright-accent);
    --rating-module-text-color: var(--white-monochrome);
    --rating-module-text-hover-color: var(--swatch-menutxt-light-color);
 
/* Header Gradients */
--gradient-header: none;
--diagonal-stripes: none;
}
 
#main-content {
   --tables-header-bg: 84,82,96;
 
   --pagetags-title-bg: var(--bright-accent);
   --pagetags-title-text: var(--white-monochrome);
   --pagetags-text-color: var(--dark-accent);
   --pagetags-text-hover-bg-color: var(--bright-accent);
}
 
/* Tag Hover Color Fix */
#main-content .page-tags span a:hover:not([href^="/system:page-tags/tag/_"]),
#main-content .page-tags span a:active:not([href^="/system:page-tags/tag/_"]) {
    color: rgb(var(--pure-white));
}
 
/* sd banner colours */
 
.sd-container {
   --sd-text:48,48,52;
   --sd-border:var(--medium-accent);
   --sd-bullets:var(--medium-accent);
   --sd-symbol:48,48,52;
   --sd-border-secondary:var(--sd-border);
   --sd-border-deadzone:var(--sd-border);
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }
 
#skrollr-body {
   background-image:
    radial-gradient(circle, rgb(var(--black-monochrome)) 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#container {
   background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   border-radius: 0em;
   -moz-border-radius: 0em;
   border: none;
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: none;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 1rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
}
 
#header h2, #header h2 span, #header h2 span::before {
   position: absolute;
   top: 2rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--newpage-color))
}
 
blockquote {
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
#toc {
background-color: #645b9c
}
 
.lightstyled-quote {
   background-color:rgb(var(--bright-accent));
   border-left: 0.5rem solid rgba(var(--medium-accent));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.darkstyled-quote {
   background-color:rgb(var(--dark-gray-monochrome));
   border-left: 0.5rem solid rgba(var(--bright-accent));
   color:rgb(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.darkstyled-quote a{
color: rgb(var(--swatch-menubg-medium-color));
}
.page-tags a {
color:rgb(var(--dark-accent));
}
 
.lightblock {
   background-color:rgb(var(--bright-accent));
   color:rgb(255,255,255);
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.lighterblock {
   background-color:rgb(var(--medium-accent));
   color:rgb(0,0,0);
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock {
   background-color:rgb(84,82,96);
   color:rgb(var(--white-monochrome));
   background-color:rgb(var(--dark-gray-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
  .light-logoblock{
    padding: 0.01rem 1rem;
    color:rgb(255, 255, 255);
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--bright-accent));
    }
 
    .light-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://zupimages.net/up/23/30/saye.png) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    }
 
  .dark-logoblock{
    padding: 0.01rem 1rem;
    color:rgb(255,255,255);
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--dark-gray-monochrome));
    }
 
    .dark-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://zupimages.net/up/23/30/saye.png) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    }
 
.light-borderblock {
    background-color:rgb(var(--bright-accent));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--medium-accent));
 }
 
.dark-borderblock {
    background-color:rgb(var(--dark-gray-monochrome));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--bright-accent));
 }
 
.lightborder-logoblock{
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    color:rgb(255, 255, 255);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--bright-accent));
     border: solid 0.3rem rgb(var(--medium-accent));
    }
 
    .lightborder-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://zupimages.net/up/23/30/saye.png) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    }
 
.darkborder-logoblock{
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    color:rgb(255, 255, 255);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--dark-gray-monochrome));
     border: solid 0.3rem rgb(var(--bright-accent));
    }
 
    .darkborder-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://zupimages.net/up/23/30/saye.png) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    }
 
.light-cabox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#645b9c;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #ffffff;
    box-sizing:border-box;
}
 
.dark-cabox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#545260;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #a497f7;
    box-sizing:border-box;
}
 
.light-titleblock {
        background-color: rgb(var(--bright-accent));
        color:rgb(var(--white-monochrome));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(255,255,255) 2px;
     }
 
     .light-titlebox{
       color: rgb(var(--dark-gray-monochrome));
       position: relative;
       top: -1.6rem;
       background-color: rgb(255,255,255);
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
 
.dark-titleblock {
        background-color: rgb(var(--dark-gray-monochrome));
        color:rgb(var(--white-monochrome));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(var(--bright-accent)) 2px;
     }
 
     .dark-titlebox{
       color: rgb(var(--white-monochrome));
       position: relative;
       top: -1.6rem;
       background-color: rgb(var(--bright-accent));
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
 
.top-box {
   border-color: rgb(91,90,102) !important;
}
 
.bottom-box ul li {
   color: white !important;
}
 
.bottom-box ul li:before {
   background: white!important;
}
 
.top-box .gradient-box {
  background: linear-gradient(90deg, rgba(59, 54, 59, 1) 0%, rgba(59, 54, 59, 0) 70%) !important;
}
 
.header-diamond {
   background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300.9 284.5' style='enable-background:new 0 0 300.9 284.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%233b363b;%7D .st1%7Bfill:%233b363b;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st1' points='73.4,32.6 0,105.4 13.6,105.4 86.4,32.6 '/%3E%3Cpolygon class='st1' points='26.5,105.4 40.1,105.4 112.9,32.6 99.3,32.6 '/%3E%3C/g%3E%3Cpolyline class='st1' points='287.3,105.4 214.5,32.6 227.5,32.6 287.3,91.9 '/%3E%3Cpolygon class='st1' points='274.4,105.4 260.8,105.4 188,32.6 201.6,32.6 '/%3E%3C/svg%3E") !important;
}
 
.top-box.class-unknown .header-diamond { filter: none !important; }
.top-box.class-unknown:before, .top-box.class-unknown .header-diamond .diamond-pattern{ opacity: 0.15 !important; }
 
.top-box .header-diamond .diamond-image {
   filter: brightness(0%) invert(100%);
}
 
.top-box.class-0,
.header-diamond .diamond-color.class-0 {
   background: rgb(195, 186, 285) !important;
}
 
.top-box.class-1,
.header-diamond .diamond-color.class-1 {
   background: rgb(160, 149, 222) !important;
}
 
.top-box.class-2,
.header-diamond .diamond-color.class-2 {
   background: rgb(134, 117, 226) !important;
}
 
.top-box.class-3,
.header-diamond .diamond-color.class-3 {
   background: rgb(164, 74, 243) !important;
}
 
.top-box.class-4,
.header-diamond .diamond-color.class-4 {
   background: rgb(186, 52, 243) !important;
}
 
.top-box.class-5,
.header-diamond .diamond-color.class-5 {
   background: rgb(155, 22, 207) !important;
}
 
.top-box.class-unknown,
.header-diamond .diamond-color.class-unknown {
   background: rgb(59, 54, 59) !important;
}
 
html body #content-wrap .yui-navset .yui-nav .selected a {
    color: rgb(var(--white-monochrome)) !important;
}
 
#header h1 a::before, #header h2 span::before {
    color: rgb(var(--white-monochrome));
}

Notes de bas de page

1. de bas de page