/* CSS, das erscheint, wenn es jemand mit @import anstatt mit [[include]] zu importieren versucht */ /* Wenn ihr das wirklich wollt, könnte ihr das umgehen, indem ihr einfach /code/2 anstatt /code/1 importoiert. Aber TUT ES NICHT */ #page-content::before { content: "Bitte importiert das Anderson Robotics CSS-Theme mit [[include :scp-wiki:theme:ar]] - versucht bitte nicht, es mit @import zu importieren. Danke!"; padding: 2em; border: 1px solid red; color: red; display: block; }
Dies ist ein CSS-Theme für Anderson Robotics, erstellt von Croquembouche mit der Hilfe von Jacob Conwell und OthellotheCat.
Der erste Abschnitt eines AR-Dokuments sollte eine Einleitung haben, gefolgt von einer horizontalen Strich, gefolgt vom Bewertungsmodul, gefolgt von was auch immer.
Dies ist natürlich optional, aber damit sitzt das Bewertungsmodul über der horizontalen Strich und sieht verdammt schick aus.
Einsatz
Um dieses Theme euerer Seite hinzuzufügen, setzt das folgende irgendwo in sie ein:
[[include theme:ar]]
Wenn ihr eine Seite mit der Sigma-9-Toggle-Sidebar-Komponente benutzt, setzt das Theme direkt danach ein.
Beispiele
Dies ist etwas mehr Text, um euch zu zeigen, wie ein Absatz aussieht, wenn Sie dieses Thema verwenden. Es ist nicht besonders wichtig, also werde ich so lange tippen, bis ich nichts mehr zu sagen habe. Oh, das war schnell.
This is a tab view.
The Anderson-Theme hat animierte Tabs. Klicke auf einen anderen Tab um die schicke Motion Action zu sehen.
Du machst das toll. Ich glaube an dich.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Das ist ein langer Tab. Der enthält einen Haufen Text.
Farben
Source-Code
/*-------------------------------------*\ * ANDERSON ROBOTICS THEME * * von Croquembouche * * Sep 2018 * \*-------------------------------------*/ /*-----------------------*\ * Fonts und Farben * \*-----------------------*/ @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; --border-colour: rgba(0,0,0,0.12); } body { font-family: Montserrat,sans-serif; } textarea[name=source] { font-family: 'Roboto Mono',monospace; } a { color: var(--hyperlink); } a:visited { color: var(--hyperlink-visited); } /*--------------------*\ * Titles/Headers * \*--------------------*/ h1, h2, h3, h4, h5, h6, #page-title { font-family: Raleway,sans-serif; } h1, #page-title { 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 var(--border-colour); padding: 2em 2em 2em 4em; } /*------------------*\ * Top Header * \*------------------*/ div#container-wrap { background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_bg.png) top left repeat-x; } #header { background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aar/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: "Mehr als menschlich"; color: #eee; } #search-top-box-input { 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: var(--dark-accent); border: none; box-shadow: none; } #search-top-box-form input[type=submit] { padding: 0 0.5em; border: 1px solid var(--dark-accent); border-radius: 0; color: #fff; background: var(--light-accent); font-family: 'Roboto Mono',monospace; } #search-top-box-form input[type=submit]:hover { border: 1px solid var(--dark-accent); border-radius: 0; 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: var(--light-accent); } /*----------------------------------------*\ * Höheneinstellung für Central Border * \*----------------------------------------*/ #content-wrap { margin-top: 0; min-height: 1660px; } /*------------------*\ * Side Bar * \*------------------*/ #side-bar { background-color: white; } #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; display: flex; justify-content: space-evenly; align-items: center; } */ #side-bar div.menu-item a { font-weight: normal; flex: 1; } #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; padding: 0.4em 0; font-size: 12.8px; } #side-bar .menu-item > a:hover { background-color: rgba(0,0,0,0.04); color: #202124; text-decoration: none; } /*--------------------*\ * Horizontale Linien * \*--------------------*/ hr { background-color: var(--border-colour); } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 3em -2em 3em -4em; } /*-------------------*\ * Blockquotes * \*-------------------*/ blockquote, div.blockquote { border: 1px solid var(--border-colour); background-color: transparent; } /*-----------------------*\ * Bewertung & 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: var(--light-accent) !important; border-color: var(--dark-accent); border-radius: 0; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #fff; border-color: var(--dark-accent); } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: var(--dark-accent); } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { color: #fff; background-color: var(--light-accent); } .page-rate-widget-box .cancel { background-color: var(--light-accent); 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: var(--dark-accent); background-color: var(--light-accent); } .rate-box-with-credit-button { background-color: var(--light-accent); border: 1px solid var(--dark-accent); 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); } .creditButton p a { border-left-color: #fff; } #main-content .page-tags { margin-top: 3em; } #main-content .page-tags span { border-color: var(--border-colour); margin-left: -4.7em; padding-left: 4.7em; } /*------------------*\ * Tabs * \*------------------*/ .yui-navset.yui-navset-top { 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 var(--border-colour); 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 var(--border-colour); } .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 var(--dark-accent); 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 var(--border-colour); 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; } } /*--------------------*\ * Tabellen * \*--------------------*/ table.wiki-content-table td { border-color: var(--border-colour); } table.wiki-content-table th { border-color: var(--border-colour); background-color: #f5f5f5; } /*------------------*\ * Bilder * \*------------------*/ #page-content .scp-image-block { border-color: var(--border-colour); box-shadow: none; } #page-content .scp-image-block .scp-image-caption { border-color: var(--border-colour); background-color: #f5f5f5; } /*-------------------*\ * Animation * \*-------------------*/ #header::before { content: ""; background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_logo_blue.png); position: absolute; opacity: 0; transform-origin: 50% 50%; transform: translate (0,0) scale(1,1); animation-fill-mode: forwards; zoom: 1; } /*------------------*\ * Mobile * \*------------------*/ #side-bar .close-menu { transition: width 0.5s ease-in-out 0.1s, opacity 1s ease-in-out 0s; background: rgba(0,0,0,0.3); background-position: 19em 50%; opacity: 0; } #side-bar:target .close-menu { width: calc(100% - 19em); right: 0; left: auto; opacity: 1; pointer-events: auto; } .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; } @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 { display: block; position: fixed; width: 100%; height: 100%; top: 0; right: 0; background-position: 19em 50%; z-index: -1; opacity: 0; pointer-events: none; } #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; } } /*--------------------*\ * Reaktionsfähigkeit * \*--------------------*/ @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; } } /*-----------------------------------------*\ * MANUELLE SIDE-BAR-Einstellungen * *-----------------------------------------* * Die sind für Side-Bar-CSS-Errors. * * Sie müssenmanuell neueingerichtet * * werden wann auch immer der Side * * Bar aktualisiert wird. Sie müssen auch * * für Übersetzungen dieses Themes geändert werden.* \*-----------------------------------------*/ #side-bar .menu-item > a[href*="/random:random-tale"]::before { content: "Random "; } #side-bar .menu-item > a[href*="/most-recently-edited"]::before { content: "Recent "; } #side-bar .menu-item > a[href*="/scp-series"] { display: inline-block; } #side-bar div.menu-item a { flex: 1; } /*------------------------*\ * Anpassungen für DE * \*------------------------*/ #side-bar div.menu-item p { margin: 0; font-size: 0; display: flex; justify-content: space-evenly; align-items: center; } #side-bar div.menu-item p::before { background-image: none; } #side-bar .menu-item > p > img { display: none; } #side-bar .menu-item > p > a { transition: all 0.1s ease-in-out; display: block; color: #5f6368; margin: 0; padding: 0.4em 0; font-size: 12.8px; } #side-bar .menu-item > p > a:hover { background-color: rgba(0,0,0,0.04); color: #202124; text-decoration: none; } #side-bar .menu-item > p > a[href*="/scp-series"] { display: inline-block; } #side-bar .collapsible-block:first-child { margin:0; border: none; } #side-bar .collapsible-block-unfolded-link { border-bottom: none; margin-bottom: 1em; } #side-bar .collapsible-block, #side-bar .colmod-block { 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 .collapsible-block-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link, #side-bar .colmod-link-top a { color: #202124; font-size: 1.2em; font-weight: normal; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link::before, #side-bar .colmod-link-top a:last-child::before, #side-bar .collapsible-block-folded .collapsible-block-link::before, #side-bar .colmod-link-top a:first-child::befor { filter: hue-rotate(200deg); margin-right: .2em; } #top-bar .dark-mode { --ct_dm_col_theme-switch-bg: var(--dark-accent); } #top-bar .ct-theme-switch p { box-shadow: none; } #top-bar .ct-theme-switch a:hover { color: var(--ct_dm_col_theme-switch-txt); }