component:ar-theme

魔法の言葉、CSS!

これは本Wiki内部で使用されているテンプレートページです。

このページに触れないでください
特に下のボタンを押さないでください

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 Croquembouche , with help from Jacob Conwell Jacob Conwell and OthellotheCat OthellotheCat .

The first section of an AR document should have an introduction, followed by a horizontal rule, followed by the rating module, followed by whatever.

This is optional of course, but it means the rating module sits on top of the horizontal rule and it looks slick as hell.

Bewertung: 0

Usage

To import this theme to your page, put the following anywhere inside it:

[[include component:ar-theme]]

Please do not import this theme using the standard CSS @import method. No one can stop you from doing that, but importing the theme using [[include]] adds your page to a list of Backlinks. This is useful for seeing what pages would be affected when this theme is updated, and allows any errors caused by that to be noticed and corrected much faster.

You can view any page's Backlinks by clicking "+ Options" at the bottom of the page, then "Backlinks".

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

Titles can be created by putting between one and six plus "+" at the start of the line

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

This is a tab view.

The logic behind tabs have been adjusted to account for transitions. Click another tab to see the slick, smooth action.

Hey look, more text here.

How quaint.

This is a long tab. It contains a lot of text.

This is a blockquote, created by putting "> " at the start of each line.

More text

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

The theme colours are:

#295183 - Light accent
#1e3c62 - Dark accent
#0366d6 - Hyperlink
rgba(0,0,0,0.12) - Borders

The body font is Montserrat. The header font is Raleway. The monospace font used in the top header is Roboto Mono.

Source code

/*-------------------------------------*\
 *ANDERSONROBOTICSTHEME* 
\*-------------------------------------*/
 
/*-------------------*\
 *Fonts* 
\*-------------------*/
 
@importurl('https://fonts.googleapis.com/css?family=Montserrat:400,600|Raleway|Roboto+Mono');
 
body{font-family: Montserrat,sans-serif;
}textarea[name=source]{font-family: 'Roboto Mono',monospace;
}a{color:#0366d6;
}a:visited{color:#0361cc;
}
 
/*--------------------*\
 *Titles/Headers* 
\*--------------------*/
 
h1, h2, h3, h4, h5, h6, #page-title{font-family: Raleway,sans-serif;
}h1, #page-title{color:#295183;
}#page-title{font-size:3em;
 border:none;
 padding:0;
 margin:0.5em00.3em0;
}#breadcrumbs{position:absolute;
 top:1.5em;
 opacity:0.6;
}#main-content{border-left:1pxsolid rgba(0,0,0,0.12);
 margin:02em020em;
 padding:2em2em2em4em;
}
 
/*------------------*\
 *TopHeader* 
\*------------------*/
 
div#container-wrap{background: url(http://scp-wiki.wdfiles.com/local--files/component%3Aar-theme/ar_bg.png) topleftrepeat-x;
}#header{background-image: url(http://scp-wiki.wdfiles.com/local--files/component%3Aar-theme/ar_circle.png);
}#headerh1a{background:transparent;
 font-family: 'Roboto Mono',sans-serif;
 text-decoration:none;
 text-shadow:none;
 letter-spacing: -0.05em;
 font-weight:400;
 /*hiderealheader*/
 line-height:0px;
 max-height:0px;
 color:transparent;
}#headerh1a::before{content: "Anderson Robotics";
 color:#fff;
}#headerh2span{background:transparent;
 font-family: 'Roboto Mono',sans-serif;
 text-shadow:none;
 letter-spacing: -0.05em;
 font-weight:500;
 color:#eee;
 /*hiderealheader*/
 line-height:0px;
 max-height:0px;
 color:transparent;
}#headerh2span::before{content: "More than Human";
 color:#eee;
}#search-top-box-input{background-color:#1e3c62;
 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;
 border:none;
 box-shadow:none;
}#search-top-box-forminput[type=submit]{padding:00.5em;
 border:1pxsolid#1e3c62;
 border-radius:0;
 color:#fff;
 background:#295183;
 font-family: 'Roboto Mono',monospace;
}#search-top-box-forminput[type=submit]:hover{border:1pxsolid#1e3c62;
 border-radius:0;
 background:#295183;
}#top-barulliula, #top-bara:hover, #top-barulli.sfhovera, #top-barulli:hovera{color:#295183;
}
 
/*----------------------------------------*\
 *HeightAdjustmentforcentralborder* 
\*----------------------------------------*/
 
#content-wrap{margin-top:0;
}#side-bar{top:1.5em;
}
 
/*------------------*\
 *SideBar* 
\*------------------*/
 
#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:1em1em00;
 border-top:1pxsolid rgba(0,0,0,.12);
 margin:1em calc(-1em + 2px) 1em0;
 font-weight:normal;
}#side-bardiv.menu-item{margin:0;
 font-size:0;
}#side-bardiv.menu-itema{font-weight:normal;
}#side-bar.menu-item > img{display:none;
}#side-bar.menu-item > a{transition:all0.1s ease-in-out;
 display:block;
 color:#5f6368;
 margin:0 calc(-1em - 1px) 0 -0.5em;
 padding:0.5em1em0.5em0.5em;
 font-size:12.8px;
 
 /*sidebarlinksextendtoleft: */
 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;
}
 
/*--------------------*\
 *HorizontalRules* 
\*--------------------*/
 
hr{background-color: rgba(0,0,0,0.12);
}#page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr{margin:3em -2em3em -4em;
}
 
/*-------------------*\
 *Blockquotes* 
\*-------------------*/
 
blockquote{border:1pxsolid 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:02px2px0 rgba(0,0,0,0.14), 03px1px -2px rgba(0,0,0,0.12), 01px5px0 rgba(0,0,0,0.2);
}.page-rate-widget-box.rate-points{background-color:#295183 !important;
 border-color:#1e3c62;
 border-radius:0;
}.page-rate-widget-box.rateup, .page-rate-widget-box.ratedown{background-color:#fff;
 border-color:#1e3c62;
}.page-rate-widget-box.rateupa, .page-rate-widget-box.ratedowna{color:#1e3c62;
}.page-rate-widget-box.rateupa:hover, .page-rate-widget-box.ratedowna:hover{color:#fff;
 background-color:#295183;
}.page-rate-widget-box.cancel{background-color:#295183;
 border-color:#1e3c62;
 border-radius:0;
}.page-rate-widget-box.cancela{color:#fff;
}.page-rate-widget-box.cancela:hover{border-radius:0;
 color:#1e3c62;
 background-color:#295183;
}#main-content.page-tags{margin-top:3em;
}#main-content.page-tagsspan{border-color: rgba(0,0,0,0.12);
 margin-left: -4.7em;
 padding-left:4.7em;
}
 
/*------------------*\
 *Tabs* 
\*------------------*/
 
.yui-navset.yui-navset-top{border-left:3pxsolid#295183;
}.yui-navset.yui-nav{position:relative;
 z-index:0;
 border:none;
 padding-left:0.2em;
}.yui-navset.yui-navli{padding:0;
 margin:0.2em0.3em;
 transition: transform 0.2s ease-in-out;
}.yui-navset.yui-navlia{background:transparent;
 color:#5f6368;
 border:1pxsolid rgba(0,0,0,0.12);
 transition:background0.1s ease-in-out,
 color 0.1s ease-in-out,
 border 0.1s ease-in-out;
}.yui-navset.yui-navlia:hover{background: rgba(0,0,0,0.04);
 color:#202124;
 border:1pxsolid rgba(0,0,0,0.12);
}.yui-navset.yui-navliaem{border:none;
 padding:0.5em0.5em calc(0.5em - 2px) 0.5em;
}.yui-navset.yui-nav.selected{padding:0;
 margin:0.2em0.3em;
 transform: scale(1.1);
}.yui-navset.yui-nav.selecteda, .yui-navset.yui-nav.selecteda:focus, .yui-navset.yui-nav.selecteda:hover{padding:0;
 border:1pxsolid#1e3c62;
 background:#295183;
}.yui-navset.yui-nav.selectedaem{padding:0.5em0.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:00;
}.yui-navset.yui-content > div{border:1pxsolid rgba(0,0,0,0.12);
 border-left:none;
 background-color:#f5f5f5;
 padding:0.25em0.5em;
 display:block;
 top:0;
 overflow:hidden;
 transform-origin:00;
}#page-content.yui-navset.yui-content > div > *{transform-origin:00;
}#page-content.yui-navset.yui-content > div[style*="none"]{display:block !important;
 flex:0;
 max-height:0;
 padding:00.5em;
 border-width:0;
 /*ThefollowingtransitionaffectstheonethatDISAPPEARS*/
 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 1both;
}#page-content.yui-navset.yui-content > div[style*="block"]{display:block !important;
 flex:1;
 max-height:9999rem;
 /*ThefollowingtransitionaffectstheonethatAPPEARS*/
 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 1both;
}@keyframestab-disappear{
 0% {max-height:9999rem; }
 1% {max-height:100vh; }
 100% {max-height:0; }}@keyframestab-appear{
 0% {max-height:0; }
 99% {max-height:100vh; }
 100% {max-height:9999rem; }}
 
/*--------------------*\
 *Tables* 
\*--------------------*/
 
table.wiki-content-tabletd{
 /*rgbaisuselesshere*/
 border-color:#e1e1e1;
}table.wiki-content-tableth{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-wiki.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:05%;
 border-left:none;
 }#page-title{margin-top:0.7em;
 }#side-bar{background-color:#fff;
 left: -19em;
 }#side-bar:target{border:none;
 box-shadow:3px01px -2px rgba(0,0,0,0.04), 1px05px0 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:19em50%;
 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-menua{border-radius:0;
 border:none !important;
 padding:0.1em;
 box-shadow:0px1px4px0 rgba(0, 0, 0, 0.2), 0px3px10px0 rgba(0, 0, 0, 0.19);
 color:#295183 !important;
 }}
 
/*--------------------*\
 *Responsivity* 
\*--------------------*/
 
@media (max-width: 479px) {#header::before{animation: logo-expand-479 3s ease-in-out 0s 1 forwards;
 background-size:55px;
 }}@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:1em4.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.8em4em;
 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.8em3.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* 
\*------------------*/
 
@keyframeslogo-expand-980{
 0%, 74% {background-size:80px80px;
 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:80px80px;
 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:80px80px;
 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;
 }}@keyframeslogo-expand-979-768{
 0%, 74% {background-size:70px70px;
 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:70px70px;
 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:70px70px;
 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;
 }}@keyframeslogo-expand-767-581{
 0%, 74% {background-size:70px70px;
 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:70px70px;
 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:70px70px;
 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;
 }}@keyframeslogo-expand-580-480{
 0%, 74% {background-size:66px66px;
 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:66px66px;
 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:66px66px;
 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;
 }}@keyframeslogo-expand-479{
 0%, 74% {background-size:55px55px;
 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:55px55px;
 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:55px55px;
 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;
 }}
 
/*-----------------------------------------*\
 *MANUALSIDEBARADJUSTMENTS**-----------------------------------------**Theseaccountforerrorsintheside-** -barCSS. Theyneedtobemanuallyre-** -adjustedwheneverthesidebaris**updated. Theywillalsoneedtobe**changedfortranslationsofthistheme.*
\*-----------------------------------------*/
 
#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: "(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)";
}

theme

Seiten Revision: 3, zuletzt bearbeitet: 14 Sep 2018 17:04

苔生す砂箱的な何か

実験場兼物置

Usage

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Source code

苔生す砂箱的な何か

実験場 兼 物置

Usage

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Source code

実験場兼物置