AR Theme
STÁTI
Tuten šablon jest používati jen SCP Wiki.
PROSITI NECHATI TUTEN STRÁNKA
BEZ POVOLENIE ZŘIEDITELE
This is a template page used internally by the SCP Wiki. Please do not touch this page without staff permission.
This is the CSS theme for Anderson Robotics, made by Croquembouche, with help from
Jacob Conwell and
OthellotheCat.
Usage
To import this theme to your page, put the following anywhere inside it:
[[include component:ar-theme]]
Source code
/*-------------------------------------*\ * 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-cs.wdfiles.com/local--files/component%3Aar-theme/ar_bg.png) top left repeat-x; } #header { background-image: url(http://scp-cs.wdfiles.com/local--files/component%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: "Andersonova Robotika"; 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: "Více než Lidé"; 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 { 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: 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-cs.wdfiles.com/local--files/component%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: "Náhodný "; } #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: "(001–999)"; } #side-bar .menu-item > a[href="/scp-series-2"]::after { content: "(1000–1999)"; } #side-bar .menu-item > a[href="/scp-series-3"]::after { content: "(2000–2999)"; } #side-bar .menu-item > a[href="/scp-series-4"]::after { content: "(3000–3999)"; } #side-bar .menu-item > a[href="/scp-series-5"]::after { content: "(4000–4999)"; } #side-bar .menu-item > a[href="/scp-series-6"]::after { content: "(5000–5999)"; }
revize stránky: 17, naposledy editováno: 03 May 2020 08:38