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.


Ceci est le thème d'[[[anderson-robotics-hub|Anderson Robotics]]. Pour l'utiliser sur votre article, copiez le code suivant en haut du code de votre page :

[[include theme:ar]]

Tous les articles postés sur le site doivent utiliser le code du dessus, mais il ne marchera pas sur votre page sandbox ! Pour cela, il vous faudra utiliser celui-ci :

[[include :fondationscp:theme:ar]]


logo-scp.svg

Image d'exemple.

Texte avec une note de bas de page1

Premier Titre

Premier Titre

Second Titre

Premier Titre

Second Titre

Troisième Titre

Premier Titre

Second Titre

Troisième Titre

Quatrième Titre

Premier Titre

Second Titre

Troisième Titre

Quatrième Titre

Cinquième Titre

Premier Titre

Second Titre

Troisième Titre

Quatrième Titre

Cinquième Titre
Sixième Titre

Ceci est un onglet.

Ceci est un bloc de citation faisable en mettant un chevron ">" suivi d'un espace au début de chaque ligne.
Plus de texte


C'est un trait horizontal

Blocs de citation imbriqués

Titre Titre Titre
Contenu Contenu Contenu
Contenu Longue cellule
Très longue cellule

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.

Conseil : La première section d'un document d'AR comporte une introduction souvent 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 est au-dessus du trait horizontal et c'est plus élégant.


/*-------------------------------------*\
 *       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;
 
    /* 1 Common */
    --ct_col_link: var(--hyperlink);
    --ct_col_link-visited: var(--hyperlink-visited);
    --ct_col_link-newpage: #4e93e2;
 
    /* 2 Sidebar */
    --ct_col_sidebar-elements: var(--hyperlink);
 
    /* 4 Rating module */
    --ct_col_rate-primary: var(--light-accent);
    --ct_col_rate-secondary: #fff;
    --ct_col_rate-cancel: #fff;
    --ct_col_rate-link-hover: var(--dark-accent);
    --ct_brd_rate-primary: solid 1px var(--dark-accent);
}
 
body {
    font-family: Montserrat,sans-serif;
}
textarea[name=source] {
    font-family: 'Roboto Mono',monospace;
}
 
/*--------------------*\
 *   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 .menu-item p::before,
#side-bar .collapsible-block-link::before, #side-bar .colmod-link-top a::before {
    display: none;
}
#side-bar div.menu-item a {
    font-weight: normal;
    color: var(--hyperlink) !important;
}
#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://fondationscp.wdfiles.com/local--files/theme%3Aar/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