Thème d'Anderson Robotics (sigma9)

EH TOI LÀ !

Cette page est utilisée en interne par le Wiki SCP,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.


/* CSS that appears when someone tries to import via @import instead of [[include]] */
/* If you really want, you can get around this by just importing /code/2 instead of /code/1 */
#page-content::before {
    content: "Please import the Anderson Robotics CSS theme via [[include :scp-wiki:component:ar-theme]] - please do not attempt to import the theme via @import. Thank you!";
    padding: 2em;
    border: 1px solid red;
    color: red;
    display: block;
}

Cette page est utilisée en interne par le Wiki SCP. Merci de ne pas modifier cette page sans la permission du staff.

Vous vous trouvez sur la page du thème CSS d'Anderson Robotics, créé par CroquemboucheCroquembouche avec l'aide de Jacob ConwellJacob Conwell et OthellotheCatOthellotheCat.

La première section d'un document d'AR doit comporter une introduction, suivie d'un trait horizontal et d'un module de notation/crédits, suivis de n'importe quoi.

C'est bien sûr optionnel, mais grâce à cela le module de notation au-dessus du trait horizontal et c'est plus élégant.


notation: 0+x

Utilisation

Pour appliquer ce thème sur une page, mettez ceci après le module de crédits :

[[include component:ar-theme]]

Veuillez ne pas importer ce thème en utilisant la méthode standard CSS @import. Personne ne vous empêchera de le faire, mais en important le thème via [[include]], votre page sera ajoutée à une liste de liens entrants. Cela permet de voir quelles pages seraient affectées si ce thème était mis à jour, et permet de détecter et corriger beaucoup plus rapidement les erreurs.

Vous pouvez voir les liens entrants d'une page en cliquant sur "+ Options" en bas, puis sur "Liens entrants".


Exemples

ar_logo_blue.png

Logo commercial d'Anderson Robotics, aux alentours de 1998.

Un trait horizontal peut être créé grâce à 5 traits d'union "-----", il s'étend sur toute la largeur de la page s'il n'est pas placée à l'intérieur de quelque chose (par exemple un bloc de citation). Les lignes séparant les sections de ce document sont des traits horizontaux.

Les titres peuvent être créés en mettant entre un et six plus "+" au début d'une ligne.

Ceci est un onglet.

Les onglets sont soumis à un système de transition. Cliquez sur l'onglet suivant pour voir apparaître son contenu de façon fluide et lisse.

Ceci est un bloc de citation, il est possible d'en faire en mettant ">" au début de chaque ligne.

Plus de texte


C'est un trait horizontal

Blocs de citation imbriqués

C'est un tableau
Tu devrais déjà savoir
comment les faire

Les couleurs utilisées dans le thème sont :

  • #295183 - Léger contraste
  • #1e3c62 - Fort contraste
  • #0366d6 - Hyperlien
  • rgba(0,0,0,0.12) - Bordures

La police d'écriture de la zone de contenu est Montserrat. La police d'écriture de l'en-tête est Raleway. La police monospace utilisée dans l'en-tête supérieur est Roboto Mono.


Code source

/*-------------------------------------*\
 *       ANDERSON ROBOTICS THEME       * 
\*-------------------------------------*/
 
/*-----------------------*\
 *   Fonts and Colours   * 
\*-----------------------*/
 
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600|Raleway|Roboto+Mono');
 
:root {
    --light-accent: #295183;
    --dark-accent: #1e3c62;
    --hyperlink: #0366d6;
    --hyperlink-visited: #0361cc;
}
 
body {
    font-family: Montserrat,sans-serif;
}
textarea[name=source] {
    font-family: 'Roboto Mono',monospace;
}
 
a {
    color: #0366d6;
    color: var(--hyperlink);
}
a:visited {
    color: #0361cc;
    color: var(--hyperlink-visited);
}
 
/*--------------------*\
 *   Titles/Headers   * 
\*--------------------*/
 
h1, h2, h3, h4, h5, h6, #page-title {
    font-family: Raleway,sans-serif;
}
h1, #page-title {
    color: #295183;
    color: var(--light-accent);
}
#page-title {
    font-size: 3em;
    border: none;
    padding: 0;
    margin: 0.5em 0 0.3em 0;
}
#breadcrumbs {
    position: absolute;
    top: 1.5em;
    opacity: 0.6;
}
 
#main-content {
    border-left: 1px solid rgba(0,0,0,0.12);
    margin: 0 2em 0 20em;
    padding: 2em 2em 2em 4em;
}
 
/*------------------*\
 *    Top Header    * 
\*------------------*/
 
div#container-wrap {
    background: url(http://scp-sandbox-3.wdfiles.com/local--files/collab%3Aar-theme/ar_bg.png) top left repeat-x;
}
#header {
    background-image: url(http://scp-sandbox-3.wdfiles.com/local--files/collab%3Aar-theme/ar_circle.png);
}
 
#header h1 a {
    background: transparent;
    font-family: 'Roboto Mono',sans-serif;
    text-decoration: none;
    text-shadow: none;
    letter-spacing: -0.05em;
    font-weight: 400;
    /* hide real header */
    line-height: 0px;
    max-height: 0px;
    color: transparent;
}
#header h1 a::before {
    content: "Anderson Robotics";
    color: #fff;
}
#header h2 span {
    background: transparent;
    font-family: 'Roboto Mono',sans-serif;
    text-shadow: none;
    letter-spacing: -0.05em;
    font-weight: 500;
    color: #eee;
    /* hide real header */
    line-height: 0px;
    max-height: 0px;
    color: transparent;
}
#header h2 span::before {
    content: "Au-delà de l'Humain";
    color: #eee;
}
 
#search-top-box-input {
    background-color: #1e3c62;
    background-color: var(--dark-accent);
    border: none;
    box-shadow: none;
    border-radius: 0;
    font-family: 'Roboto Mono',monospace;
}
#search-top-box-input:hover, #search-top-box-input:focus {
    background-color: #1e3c62;
    background-color: var(--dark-accent);
    border: none;
    box-shadow: none;
}
#search-top-box-form input[type=submit] {
    padding: 0 0.5em;
    border: 1px solid #1e3c62;
    border: 1px solid var(--dark-accent);
    border-radius: 0;
    color: #fff;
    background: #295183;
    background: var(--light-accent);
    font-family: 'Roboto Mono',monospace;
}
#search-top-box-form input[type=submit]:hover {
    border: 1px solid #1e3c62;
    border: 1px solid var(--dark-accent);
    border-radius: 0;
    background: #295183;
    background: var(--light-accent);
}
 
#top-bar ul li ul a, #top-bar a:hover, #top-bar ul li.sfhover a, #top-bar ul li:hover a {
    color: #295183;
    color: var(--light-accent);
}
 
/*----------------------------------------*\
 *  Height Adjustment for central border  * 
\*----------------------------------------*/
 
#content-wrap {
    margin-top: 0;
    min-height: 1660px;
}
#side-bar {
    top: 1.5em;
}
 
/*------------------*\
 *     Side Bar     * 
\*------------------*/
 
#side-bar .side-block {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent !important;
    padding: 0;
}
#side-bar .heading {
    border: none;
    border-radius: 0;
    color: #202124;
    font-size: 1.2em;
    padding: 1em 1em 0 0;
    border-top: 1px solid rgba(0,0,0,.12);
    margin: 1em calc(-1em + 2px) 1em 0;
    font-weight: normal;
}
#side-bar div.menu-item {
    margin: 0;
    font-size: 0;
}
#side-bar div.menu-item a {
    font-weight: normal;
}
#side-bar .menu-item > img {
    display: none;
}
#side-bar .menu-item > a {
    transition: all 0.1s ease-in-out;
    display: block;
    color: #5f6368;
    margin: 0 calc(-1em - 1px) 0 -0.5em;
    padding: 0.5em 1em 0.5em 0.5em;
    font-size: 12.8px;
 
    /* sidebar links extend to left: */
    margin-left: -99rem;
    padding-left: 99rem;
}
#side-bar .menu-item > a:hover {
    background-color: rgba(0,0,0,0.04);
    color: #202124;
    text-decoration: none;
}
 
/*--------------------*\
 *  Horizontal Rules  * 
\*--------------------*/
 
hr {
    background-color: rgba(0,0,0,0.12);
}
#page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
    margin: 3em -2em 3em -4em;
}
 
/*-------------------*\
 *    Blockquotes    * 
\*-------------------*/
 
blockquote,
div.blockquote {
    border: 1px solid rgba(0,0,0,0.12);
    background-color: transparent;
}
 
/*-----------------------*\
 *     Rating & Tags     * 
\*-----------------------*/
 
hr + div[style="text-align: right;"] {
    position: relative;
}
hr + div[style="text-align: right;"] .page-rate-widget-box {
    top: calc(-3em - 8px);
    right: 0;
    position: absolute;
}
 
.page-rate-widget-box {
    border-radius: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.page-rate-widget-box .rate-points {
    background-color: #295183 !important;
    background-color: var(--light-accent) !important;
    border-color: #1e3c62;
    border-color: var(--dark-accent);
    border-radius: 0;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
    background-color: #fff;
    border-color: #1e3c62;
    border-color: var(--dark-accent);
}
.page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a {
    color: #1e3c62;
    color: var(--dark-accent);
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover {
    color: #fff;
    background-color: #295183;
    background-color: var(--light-accent);
}
.page-rate-widget-box .cancel {
    background-color: #295183;
    background-color: var(--light-accent);
    border-color: #1e3c62;
    border-color: var(--dark-accent);
    border-radius: 0;
}
.page-rate-widget-box .cancel a {
    color: #fff;
}
.page-rate-widget-box .cancel a:hover {
    border-radius: 0;
    color: #1e3c62;
    color: var(--dark-accent);
    background-color: #295183;
    background-color: var(--light-accent);
}
 
.rate-box-with-credit-button .creditButton {
    background-color: #295183 !important;
    border-color: #1e3c62 !important;
    border-radius: 0;
}
.creditButton a{
    color: #fff6f0;
}
.creditButton a:hover {
    color: #1e3c62;
}
 
#main-content .page-tags {
    margin-top: 3em;
}
#main-content .page-tags span {
    border-color: rgba(0,0,0,0.12);
    margin-left: -4.7em;
    padding-left: 4.7em;
}
 
/*------------------*\
 *       Tabs       * 
\*------------------*/
 
.yui-navset.yui-navset-top {
    border-left: 3px solid #295183;
    border-left: 3px solid var(--light-accent);
}
.yui-navset .yui-nav {
    position: relative;
    z-index: 0;
    border: none;
    padding-left: 0.2em;
}
.yui-navset .yui-nav li {
    padding: 0;
    margin: 0.2em 0.3em;
    transition: transform 0.2s ease-in-out;
}
.yui-navset .yui-nav li a {
    background: transparent;
    color: #5f6368;
    border: 1px solid rgba(0,0,0,0.12);
    transition: background 0.1s ease-in-out,
                color 0.1s ease-in-out,
                border 0.1s ease-in-out;
}
.yui-navset .yui-nav li a:hover {
    background: rgba(0,0,0,0.04);
    color: #202124;
    border: 1px solid rgba(0,0,0,0.12);
}
.yui-navset .yui-nav li a em {
    border: none;
    padding: 0.5em 0.5em calc(0.5em - 2px) 0.5em;
}
.yui-navset .yui-nav .selected {
    padding: 0;
    margin: 0.2em 0.3em;
    transform: scale(1.1);
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
    padding: 0;
    border: 1px solid #1e3c62;
    border: 1px solid var(--dark-accent);
    background: #295183;
    background: var(--light-accent);
}
.yui-navset .yui-nav .selected a em {
    padding: 0.5em 0.5em calc(0.5em - 2px) 0.5em;
    border: none;
}
 
.yui-navset .yui-content {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border: none;
    padding: 0;
    position: relative;
    margin-top: 0.2em;
    transform-origin: 0 0;
}
.yui-navset .yui-content > div {
    border: 1px solid rgba(0,0,0,0.12);
    border-left: none;
    background-color: #f5f5f5;
    padding: 0.25em 0.5em;
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div > * {
    transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
                border-width 0s linear 0.5s,
                flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
                border-width 0s linear 0.5s,
                flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/*--------------------*\
 *       Tables       * 
\*--------------------*/
 
table.wiki-content-table td {
    /* rgba is useless here */
    border-color: #e1e1e1;
}
table.wiki-content-table th {
    border-color: #e1e1e1;
    background-color: #f5f5f5;
}
 
/*------------------*\
 *      Images      * 
\*------------------*/
 
#page-content .scp-image-block {
    border-color: rgba(0,0,0,0.12);
    box-shadow: none;
}
#page-content .scp-image-block .scp-image-caption {
    border-color: rgba(0,0,0,0.12);
    background-color: #f5f5f5;
}
 
/*-------------------*\
 *     Animation     * 
\*-------------------*/
 
#header::before {
    content: "";
    background-image: url(http://scp-sandbox-3.wdfiles.com/local--files/collab%3Aar-theme/ar_logo_blue.png);
    position: absolute;
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: translate (0,0) scale(1,1);
    transform-origin: 50% 50%;
    transform: translate (0,0) scale(1,1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    zoom: 1;
}
 
/*------------------*\
 *      Mobile      * 
\*------------------*/
 
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: #fff;
        left: -19em;
    }
    #side-bar:target {
        border: none;
        box-shadow: 3px 0 1px -2px rgba(0,0,0,0.04), 1px 0 5px 0 rgba(0,0,0,0.2);
    }
    #side-bar .close-menu {
        transition: width 0.5s ease-in-out 0.1s,
                    opacity 1s ease-in-out 0s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
        background-position: 19em 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 19em);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
        margin: 3em -5.5%;
    }
    #breadcrumbs {
        position: relative;
        top: 0;
        font-style: italic;
    }
    #side-bar {
        top: 0;
    }
    #side-bar .heading {
        padding-left: 1em;
        margin-left: -1em;
    }
    #search-top-box {
        top: 107px;
    }
    .open-menu a {
        border-radius: 0;
        border: none !important;
        padding: 0.1em;
        box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19);
        color: #295183 !important;
        color: var(--light-accent) !important;
    }
}
 
/*--------------------*\
 *    Responsivity    * 
\*--------------------*/
 
@media (max-width: 479px) {
    #header::before {
        animation: logo-expand-479 3s ease-in-out 0s 1 forwards;
        background-size: 55px;
    }
    #search-top-box {
        display: none;
    }
}
@media (max-width: 580px) and (min-width: 480px) {
    #header::before {
        animation: logo-expand-580-480 3s ease-in-out 0s 1 forwards;
        background-size: 66px;
    }
}
@media (max-width: 767px) and (min-width: 581px) {
    #header {
        background-position: 1em 4.3em;
        background-size: 70px;
    }
    #header::before {
        animation: logo-expand-767-581 3s ease-in-out 0s 1 forwards;
        background-size: 70px;
    }
    #search-top-box-input.empty {
        width: initial;
    }
}
@media (max-width: 979px) and (min-width: 768px) {
    #header {
        background-position: 1.8em 4em;
        background-size: 70px;
    }
    #header::before {
        animation: logo-expand-979-768 3s ease-in-out 0s 1 forwards;
        animation-fill-mode: forwards;
        background-size: 70px;
    }
}
@media (min-width: 980px) {
    #header {
        background-position: 1.8em 3.7em;
        background-size: 80px;
    }
    #header::before {
        animation: logo-expand-980 3s ease-in-out 0s 1 forwards;
        animation-fill-mode: forwards;
        background-size: 80px;
    }
}
 
/*------------------*\
 *     Keyframes    * 
\*------------------*/
 
@keyframes logo-expand-980 {
        0%, 74% {
                background-size: 80px 80px;
                top: 3.7em;
                left: 1.8em;
                height: 80px;
                width: 80px;
                -webkit-transform: translate(0px,16.31px) scale(0.43,0.43);
                transform: translate(0px,16.31px) scale(0.43,0.43);
                opacity: 0;
        }
        75% {
                background-size: 80px 80px;
                top: 3.7em;
                left: 1.8em;
                height: 80px;
                width: 80px;
                -webkit-transform: translate(0px,16.31px) scale(0.43,0.43);
                transform: translate(0px,16.31px) scale(0.43,0.43);
                opacity: 1;
        }
        100% {
                background-size: 80px 80px;
                top: 3.7em;
                left: 1.8em;
                height: 80px;
                width: 80px;
                -webkit-transform: translate(0,0) scale(1,1);
                transform: translate(0,0) scale(1,1);
                opacity: 1;
        }
}
@keyframes logo-expand-979-768 {
        0%, 74% {
                background-size: 70px 70px;
                top: 4em;
                left: 1.8em;
                height: 70px;
                width: 70px;
                -webkit-transform: translate(0px,14.15px) scale(0.43,0.43);
                transform: translate(0px,14.15px) scale(0.43,0.43);
                opacity: 0;
        }
        75% {
                background-size: 70px 70px;
                top: 4em;
                left: 1.8em;
                height: 70px;
                width: 70px;
                -webkit-transform: translate(0px,14.15px) scale(0.43,0.43);
                transform: translate(0px,14.15px) scale(0.43,0.43);
                opacity: 1;
        }
        100% {
                background-size: 70px 70px;
                top: 4em;
                left: 1.8em;
                height: 70px;
                width: 70px;
                -webkit-transform: translate(0,0) scale(1,1);
                transform: translate(0,0) scale(1,1);
                opacity: 1;
        }
}
@keyframes logo-expand-767-581 {
        0%, 74% {
                background-size: 70px 70px;
                top: 4.3em;
                left: 1em;
                height: 70px;
                width: 70px;
                -webkit-transform: translate(0px,14.15px) scale(0.43,0.43);
                transform: translate(0px,14.15px) scale(0.43,0.43);
                opacity: 0;
        }
        75% {
                background-size: 70px 70px;
                top: 4.3em;
                left: 1em;
                height: 70px;
                width: 70px;
                -webkit-transform: translate(0px,14.15px) scale(0.43,0.43);
                transform: translate(0px,14.15px) scale(0.43,0.43);
                opacity: 1;
        }
        100% {
                background-size: 70px 70px;
                top: 4.3em;
                left: 1em;
                height: 70px;
                width: 70px;
                -webkit-transform: translate(0,0) scale(1,1);
                transform: translate(0,0) scale(1,1);
                opacity: 1;
        }
}
@keyframes logo-expand-580-480 {
        0%, 74% {
                background-size: 66px 66px;
                top: 4.5em;
                left: 0.5em;
                height: 66px;
                width: 66px;
                -webkit-transform: translate(0px,13.28px) scale(0.43,0.43);
                transform: translate(0px,13.28px) scale(0.43,0.43);
                opacity: 0;
        }
        75% {
                background-size: 66px 66px;
                top: 4.5em;
                left: 0.5em;
                height: 66px;
                width: 66px;
                -webkit-transform: translate(0px,13.28px) scale(0.43,0.43);
                transform: translate(0px,13.28px) scale(0.43,0.43);
                opacity: 1;
        }
        100% {
                background-size: 66px 66px;
                top: 4.5em;
                left: 0.5em;
                height: 66px;
                width: 66px;
                -webkit-transform: translate(0,0) scale(1,1);
                transform: translate(0,0) scale(1,1);
                opacity: 1;
        }
}
@keyframes logo-expand-479 {
        0%, 74% {
                background-size: 55px 55px;
                top: 5.5em;
                left: 0em;
                height: 55px;
                width: 55px;
                -webkit-transform: translate(0px,10.9px) scale(0.43,0.43);
                transform: translate(0px,10.9px) scale(0.43,0.43);
                opacity: 0;
        }
        75% {
                background-size: 55px 55px;
                top: 5.5em;
                left: 0em;
                height: 55px;
                width: 55px;
                -webkit-transform: translate(0px,10.9px) scale(0.43,0.43);
                transform: translate(0px,10.9px) scale(0.43,0.43);
                opacity: 1;
        }
        100% {
                background-size: 55px 55px;
                top: 5.5em;
                left: 0em;
                height: 55px;
                width: 55px;
                -webkit-transform: translate(0,0) scale(1,1);
                transform: translate(0,0) scale(1,1);
                opacity: 1;
        }
}
 
/*-----------------------------------------*\
 *       MANUAL SIDE BAR ADJUSTMENTS       * 
 *-----------------------------------------*
 *  These account for errors in the side-  *
 *  -bar CSS. They need to be manually re- *
 *  -adjusted whenever the side bar is     *
 *  updated. They will also need to be     *
 *  changed for translations of this theme.*
\*-----------------------------------------*/
 
#side-bar .menu-item > a[href="/random:random-tale"]::before {
    content: "Random ";
}
#side-bar .menu-item > a[href="http://www.scp-wiki.net/most-recently-edited"]::before {
    content: "Recent ";
}
#side-bar .menu-item > a[href*="/scp-series"]::after {
    font-size: 80%;
    opacity: 0.5;
    margin-left: 0.5em;
}
#side-bar .menu-item > a[href="/scp-series"]::after {
    content: "(001999)";
}
#side-bar .menu-item > a[href="/scp-series-2"]::after {
    content: "(10001999)";
}
#side-bar .menu-item > a[href="/scp-series-3"]::after {
    content: "(20002999)";
}
#side-bar .menu-item > a[href="/scp-series-4"]::after {
    content: "(30003999)";
}
#side-bar .menu-item > a[href="/scp-series-5"]::after {
    content: "(40004999)";
}
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License