Penumbra Theme

Rating:

rating: +156

Rating w/ Credit Module:

rating: +156

Info

Info about your page.

More information about your page.

rating: +156

This is an aesthetic theme by EstrellaYoshte EstrellaYoshte forked from Paperstack Theme.

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

[[include :scp-wiki:theme:penumbra]]

You can also change the title, subtitle, header logo, and accent color with the following CSS module after the [[include]]:

:root {
--header-title: "BIG HEADER TITLE";
--header-subtitle: "small header subtitle";
--lgurl: url("your url here");
--accentColor: COLOR HERE;
}

By default, the accent color is #1EB5E8.

tb.png

Image.

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.

Hey look, more text here.

How quaint.

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

This is also 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

[[div class="darkbox"]]

[[div class="lightbox"]]

The sidebox div is set up as follow:

[[div class="limit"]] <— Set the start limit of the anchor
[[div class="anchor"]] <— Set sidebox's sticky position
[[div class="sidebox"]]
Some sidebox text here.
[[/div]]
[[/div]]

Text where sidebox scroll past.

[[/div]] <— Set the end limit of the anchor

With some finesse, it is possible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non molestie nulla. Morbi vitae massa auctor, porta arcu eget, dictum tellus. Etiam scelerisque aliquam ipsum, ac convallis lorem scelerisque eget.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In finibus purus non commodo porttitor. Integer sed felis dui. Nulla nec tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

to have multiple sideboxes

Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.

Sed non sollicitudin nisl. Suspendisse finibus, est et venenatis placerat, diam lorem porttitor elit, ac sollicitudin arcu erat et orci. Curabitur erat mi, congue quis imperdiet ut, fringilla vitae sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ante pretium est commodo convallis id a sapien. Morbi sit amet ultricies urna.

act like this.

Ut semper, tellus vel tristique convallis, nulla mi laoreet nisi, eu malesuada ipsum magna sed dolor. Pellentesque nec lorem eu ante tristique efficitur. Sed auctor tortor ipsum. Morbi laoreet interdum scelerisque. Vivamus id enim nisl. Donec vitae leo suscipit, venenatis tortor eget, laoreet diam.

Sed sollicitudin, arcu ut condimentum vulputate, dui diam convallis velit, vitae ultricies leo libero non metus. Vestibulum at aliquam nisi. Aenean molestie tortor orci, ac volutpat magna eleifend vitae. Morbi tristique risus tortor, feugiat efficitur augue imperdiet ut. Aliquam nec urna lacinia, pretium ligula ut, gravida ex.

Without the limit div, the anchor will be stickied across the entire page content once past its sticky position.

Note that the sidebox div minimizes on screenwidth of 1290px and below. (Thanks to Woedenaz Woedenaz for the code!)

The header font is Josefin Sans.

The monospace font is Fira Code.

Footnotes

. This is a footnote.

Source Code:

/*PenumbraTheme[2020WikidotTheme]ByEstrellaYoshteBased on:
 PaperstackThemebyEstrellaYoshteAdAstraThemebyNatVoltaicandstormbreathInkblotThemebyCroquemboucheAndersonRoboticsThemebyCroquemboucheBHLStyleCollapsiblebyMonkatraz*/
 
@importurl('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
 
@font-face{font-family: 'Josefin Sans';
 src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans.woff2) format("woff2");
 font-weight:normal;
 font-style:normal;
 font-display: swap;
}@font-face{font-family: 'Josefin Sans';
 src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Italic.woff2) format("woff2");
 font-weight:normal;
 font-style:italic;
 font-display: swap;
}@font-face{font-family: 'Josefin Sans';
 src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold.woff2) format("woff2");
 font-weight:bold;
 font-style:normal;
 font-display: swap;
}@font-face{font-family: 'Josefin Sans';
 src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold-Italic.woff2) format("woff2");
 font-weight:bold;
 font-style:italic;
 font-display: swap;
}:root{
 --body-font: InterVariable, BlinkMacSystemFont,'Segoe UI',Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
 --header-font: 'Josefin Sans', Verdana, Arial, Helvetica, sans-serif;
 --mono-font: 'Fira Code', 'Andale Mono', 'Courier New', Courier, monospace;
 
 --accentColor:#1EB5E8;
 --darkColor:#2F333C; 
 --darkerColor:#21252E;
 --lightColor:#EDEDED;
 --lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/logo.png");
}body{font-family: var(--body-font);
 font-size:.975em;
 line-height:1.375;
 color: var(--lightColor);
 background-color: var(--darkColor);
 background-image: linear-gradient(
 to bottom,
 var(--darkerColor), var(--darkerColor) 90px,
 var(--darkerColor) 90px, var(--darkColor) 200px,
 var(--darkColor) 200px, var(--darkColor) 100%);
 background-repeat:no-repeat;
 accent-color: var(--accentColor);
}#content-wrap{margin-top:1.25rem;
}input{color-scheme: dark; }
 
/* ---- SCROLLBAR ---- */
 
::-webkit-scrollbar{width:.625rem;
 height:.625rem;
 background:transparent;
}
 
::-webkit-scrollbar-track{background: var(--darkerColor);
}
 
::-webkit-scrollbar-thumb{background: var(--accentColor);
 border:none;
}:root{scrollbar-color: var(--accentColor) var(--darkerColor);
 scrollbar-width:thin;
}
 
/* ---- HEADER ---- */
 
div#container-wrap{background-image:none;
}#header{background-image:none;
 height:8.75rem;
}div#extra-div-1{height:164px;
 width:100%;
 top:0;
 position:absolute;
 background: var(--lgurl);
 background-size: contain;
 background-repeat:no-repeat;
 background-position:50%50%;
 z-index: -1;
}#headerh1, #headerh2{margin-left:0; float:none; text-align:center; }
/*Movethesubtitledownasmidge*/
#headerh2{margin-top:0.45rem; }#headerh1a{margin:auto;
 width: max-content;
}
/*Hidetheexistingtext*/
#headerh1span, #headerh2span{font-size:0; display:none; }
/*Stylethenewtext*/
#headerh1a::before, #headerh2::before{color: var(--accentColor);
 font-family: var(--header-font);
 text-shadow:none;
}
/*Setthenewtext'scontentfromvariable*/
#headerh1a::before{content: var(--header-title, "SCP FOUNDATION");
 font-weight:700;
 font-size: min(calc(1.125rem + 2.75vw), 2.875rem);
}#headerh2::before{content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
 font-weight:700;
 font-size: min(calc(.5rem + 1.75vw), 1.25rem);
}#login-status{color: var(--lightColor);
 width:100%;
 text-align:right;
}#login-statusa{color: var(--accentColor);
}#account-topbutton{border:none;
 margin-left:0.35em;
 padding:00.45em;
 font-size:1em;
 position:relative;
}#account-topbutton::before{content: "";
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 background-color: var(--accentColor);
 opacity:0.125;
}#account-options{width:6.25rem;
 background: var(--darkerColor);
 border:none;
 border-right:solid3px var(--accentColor);
}#account-options::before,
#account-options::after{content: "";
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 pointer-events:none;
}#account-options::before{background: rgba(0,0,0, .4);
}#account-options::after{background-color: var(--accentColor);
 mix-blend-mode: overlay;
}#account-options > ul{position:relative;
 z-index:1;
}#account-optionsula{color: var(--accentColor);
 background-color:transparent;
 font-weight:bold;
 letter-spacing:0.01em;
 padding:0.25em0.5em;
 text-align:right;
}#account-optionsula:hover{color: var(--darkerColor);
 background: var(--accentColor);
}#footer{background:transparent;
 color: var(--lightColor);
 font-size:0.625rem;
 margin-top:0.25em;
 padding:0.25em0.35em;
 display: flex!important;
 align-items:center;
 justify-content: flex-end;
 flex-wrap: wrap;
}#footer > a[href*="www.wikidot.com"]{color: var(--lightColor);
 padding:00.85ch 00.5ch;
 border-right:1pxsolid currentColor;
}#footer.options{float:none;
 order:2;
 width: max-content;
 font-size:0;
}#footer.optionsa{color: var(--lightColor);
 font-size:0.625rem;
 padding:00.85ch;
 border-right:1pxsolid currentColor;
}#footer.optionsa:last-child{border-right:none;
 padding-right:0;
}#license-area{color: var(--lightColor);
 background-color: var(--darkerColor);
 border-top:solid0.1rem var(--accentColor);
}#footer-bar{border:none;
 padding:001em;
 margin:0;
 max-width:100%;
 background-color: var(--darkerColor);
}#footer-bar.units{display: flex;
 flex-wrap: wrap;
 justify-content:center;
}#search-top-box{top:2.2rem!important;
 right:8px;
 z-index:8;
}#search-top-box-form > input[type=submit]{border:solid1px var(--lightColor);
 background: var(--darkerColor)!important;
 box-shadow:none;
 border-radius:0;
 color: var(--lightColor);
 transition: color 0.15s linear;
}#search-top-box-forminput[type=submit]:hover{border:solid1px var(--accentColor);
 box-shadow:none;
 color: var(--accentColor);
 appearance:none;
}#search-top-box-form > input[type=text]{display:none; }
 
/* ---- TOPBAR ---- */
 
#top-bar{top:8.4rem;
 display: flex;
 justify-content:center;
 right:0;
}@media (max-width: 768px) {.mobile-top-bar{display: flex;
 justify-content:center;
 max-width:100%;
 width:100%;
 left:0;
 }}#top-bar, #top-bara{color: var(--lightColor);
 transition: color 0s;
}#top-bar:is(.top-bar,.mobile-top-bar)>ul>li>a{letter-spacing:.075ch;
}#top-barulliul,
#top-barulliulliul{border-color: var(--accentColor);
 box-shadow:none;
}#top-barulli.sfhoverullia,
#top-barulli:hoverullia{border-top-color: var(--darkColor);
}#top-barulli.sfhovera,
#top-barulli:hovera{background: var(--darkerColor);
 color: var(--lightColor);
}#top-barulli.sfhovera:hover,
#top-barulli:hovera:hover{background: var(--darkerColor); /*topbarhoverbackgroundcolor*/
 color: var(--accentColor);
 transition: color 0.1s linear;
}
 
/* ---- SIDEBAR ---- */
 
div#side-bar{background: var(--darkerColor);
 clear:both;
 width:17rem;
 padding:0;
 border-radius:0;
 box-shadow:none;
 overflow-x:hidden;
 direction:rtl;
}#side-bar.side-block,
#interwiki.side-block{border:transparent;
 border-radius:0;
 padding:5px15px;
 box-shadow:none;
 background-color:transparent;
 direction:ltr;
}#side-bar.side-block.media{position:relative;
 background-color: var(--darkerColor);
 margin:0.75em0;
}#side-bar.side-block.media::before,
#side-bar.side-block.media::after{content: "";
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 pointer-events:none;
}#side-bar.side-block.media::before{background: rgba(0,0,0, .4);
}#side-bar.side-block.media::after{background-color: var(--accentColor);
 mix-blend-mode: overlay;
}#side-bar.side-block.media > *{display: flex;
 justify-content: space-evenly;
 position:relative;
 z-index:1;
}#side-bar.side-block.resources{background-color:transparent;
 position:relative;
 margin-bottom:0.25em;
 padding:0.75em15px0.5em;
}#side-bar.side-block.resources::before{content: "";
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 pointer-events:none;
 z-index: -1;
 background-color: var(--accentColor);
 opacity:0.125;
}#side-bar.collapsible-block-unfolded-link{border-bottom:solid1px var(--accentColor);
}#side-bar.collapsible-block-unfolded-link.collapsible-block-link{color: var(--accentColor);
}#side-bar.collapsible-block-folded.collapsible-block-link,
#side-bar.collapsible-block-unfolded-link.collapsible-block-link{font-family: var(--header-font);
}#side-bar.collapsible-block-unfolded-link.collapsible-block-link:hover{color:#ffffff;
}#side-bar.menu-itemimg, #interwiki.menu-itemimg{display:none; }#side-bar.heading,
#interwiki.heading{color: var(--lightColor);
 font-family: var(--header-font);
 font-size:0.94rem;
 border-bottom:solid1px var(--lightColor);
 margin-top:1.25em;
}#top-bardiv.open-menua{border-radius:0;
 box-shadow:none;
 color: var(--accentColor);
 background-color: var(--darkerColor);
 border:solid1px var(--darkerColor);
}
 
/* ---- Interwiki ---- */
iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper{position:relative;
 width:auto;
}div.scpnet-interwiki-wrapper{margin:0 -5px0.75em;
 background-color: var(--darkerColor);
}.scpnet-interwiki-wrapper::before,
.scpnet-interwiki-wrapper::after{content: "";
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 pointer-events:none;
}.scpnet-interwiki-wrapper::before{background: rgba(0,0,0, .4);
}.scpnet-interwiki-wrapper::after{background-color: var(--accentColor);
 mix-blend-mode: overlay;
}#interwiki{
 --accentColor:#888888;
 background:transparent;
}#interwikibody{background:transparent;
}#interwiki.side-block{margin-top:0;
 padding:015px;
}#interwiki.side-blocka,
#interwiki.side-blocka:visited{color: var(--accentColor);
}#interwiki.side-blocka:hover,
#interwiki.side-blocka:visited:hover{color:#ffffff;
}#interwiki.heading{color: var(--accentColor);
 border-bottom-color: currentColor;
}#interwiki.menu-itemimg{display:none;
}
/* ------------------- */
 
@media (max-width: 767px) {#main-content{padding:0;
 margin:05%;
 border-left:none;
 }#page-title{margin-top:0.7em;
 }#side-bar{background-color: var(--darkerColor);
 }#side-bar:target{border:none;
 box-shadow:none;
 }#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; left:auto;
 background: rgb(0,0,0,0.3);
 z-index: -1;
 opacity:0;
 pointer-events:none;
 }#side-bar:target.close-menu{width: calc(100% - 17rem);
 right:0;
 left:auto;
 opacity:1;
 pointer-events:auto;
 }#side-bar{top:0;
 }#search-top-box{top:107px;
 }}
 
/* ---- TABS ---- */
 
/* ---- YUITABBASE ---- */
.yui-navset.yui-nava,.yui-navset.yui-navset-top.yui-nava{background-color:inherit;background-image:inherit}.yui-navset.yui-nava:hover,.yui-navset.yui-nava:focus{background:inherit;text-decoration:inherit}.yui-navset.yui-nav.selecteda,.yui-navset.yui-nav.selecteda:focus,.yui-navset.yui-nav.selecteda:hover{color:inherit;background:inherit}.yui-navset.yui-nav,.yui-navset.yui-navset-top.yui-nav{border-color:inherit}.yui-navsetli{line-height:inherit}
 
/* ---- YUITABCUSTOMIZATION ----*/
 
 .yui-navset.yui-nav,
 .yui-navset.yui-navset-top.yui-nav{display: flex;
 flex-wrap: wrap;
 width: calc(100% - .125rem);
 margin:0auto;
 border-color: var(--accentColor);
 box-shadow:none;
}.yui-navset.yui-nava, /* ---- LinkModifier ---- */
 .yui-navset.yui-navset-top.yui-nava{color: var(--lightColor);
 font-weight:bold;
 /* ---- TabBackgroundColour | [UNSELECTED] ---- */
 background-color: var(--darkerColor);
 border: unset;
 box-shadow:none;
 box-shadow:none;
 transition: background-color 0.15s linear;
}.yui-navset.yui-nava:hover,
 .yui-navset.yui-nava:focus{color: var(--lightColor);
 /* ---- TabBackgroundColour | [HOVER] ---- */
 background-color: var(--accentColor);
}.yui-navset.yui-navli, /* ---- ListitemModifier ---- */
 .yui-navset.yui-navset-top.yui-navli{position:relative;
 display: flex;
 flex-grow:2;
 max-width:100%;
 margin:0;
 padding:0;
 color: var(--lightColor);
 background-color: var(--darkerColor);
 border-color:transparent;
 box-shadow:none;
}.yui-navset.yui-navlia,
 .yui-navset-top.yui-navlia,
 .yui-navset-bottom.yui-navlia{display: flex;
 align-items:center;
 justify-content:center;
 width:100%;
}.yui-navset.yui-navliem{border: unset;
}.yui-navset.yui-navaem,
 .yui-navset.yui-navset-top.yui-navaem{padding:.35em.75em;
 
 text-overflow: ellipsis;
 overflow:hidden;
 white-space:nowrap;
}.yui-navset.yui-nav.selected, /* ---- SelectionModifier ---- */
 .yui-navset.yui-navset-top.yui-nav.selected{flex-grow:2;
 margin:0;
 padding:0;
 /* ---- TabBackgroundColour | [SELECTED] ---- */
 background-color: var(--accentColor);
}.yui-navset.yui-nav.selecteda,
 .yui-navset.yui-nav.selectedaem{border:none;
}.yui-navset.yui-nav.selecteda{width:100%;
 color: var(--darkerColor);
 font-weight:bold;
}.yui-navset.yui-nav.selecteda:focus,
 .yui-navset.yui-nav.selecteda:active{color: var(--darkerColor);
 background-color: var(--accentColor);
}.yui-navset.yui-content{background-color: var(--darkerColor);
 box-shadow:none;
}.yui-navset.yui-content,
 .yui-navset.yui-navset-top.yui-content{padding:.5em;
 border:none;
}
 
/*---- TABANIMATIONbyCroquembouche ---- */
 
.yui-navset.yui-content > div{display:block;
 top:0;
 overflow:hidden;
 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(.18,.51,.54,.9) 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(.18,.51,.54,.9) 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; }}
 
/* ---- INFOBAR ---- */
 body{
 --barColour: var(--darkerColor);
 --linkColour: var(--lightColor);
}.info-container.collapsible-block-content{padding:0.5em30px;
}#page-content.info-container > .collapsible-block.collapsible-block-link{padding:0;
}.info-container.collapsible-block-content.wiki-content-table{width:100%;
}
 
/*Ayer'sinfo-barpatchbyMonkatraz*/
#page-content.info-container.collapsible-block-folded, #page-content.info-container.collapsible-block-unfolded-link{width:100%;
 max-width:100%;
 margin:0auto;
 padding:0;
 box-shadow:none;
}#page-content.info-container.collapsible-block-link::before, #page-content.info-container.collapsible-block-unfolded-link::before{content: " ";
 display:none;
}#page-content.info-container.collapsible-block-content::after{display:none;
}
 
/* ---- INFOPANE ---- */
 
#page-content.creditRate{margin: unset;
 margin-top:4px;
 margin-bottom:4px;
 margin-right:3px;
}#page-content.rate-box-with-credit-button{background-color: var(--darkerColor);
 border:solid2px var(--darkerColor);
 border-radius:0;
 box-shadow:3px0px0px0px var(--accentColor);
}#page-content.rate-box-with-credit-button.creditButtonpa{color:#ffffff;
 border-left-color:transparent;
}#page-content.rate-box-with-credit-button.page-rate-widget-box.cancel{border-radius:0;
}#page-content.rate-box-with-credit-button.page-rate-widget-box.rate-points{border-left:0;
}.rate-box-with-credit-button.page-rate-widget-box.cancela:hover{border-radius:0;
}#page-content.rate-box-with-credit-button.fa-info{color: var(--lightColor);
}#page-content.rate-box-with-credit-button.fa-info:hover{color: var(--accentColor);
}#page-content.creditButtonStandalonepa{background-color: var(--darkerColor);
 border:solid2px var(--darkerColor);
 border-radius:0;
 box-shadow:3px0px0px0px var(--accentColor);
 color: var(--lightColor);
}#page-content.creditButtonStandalonepa:hover{color: var(--accentColor);
}#page-content.modalbox{background: var(--darkColor) !important;
 color: var(--lightColor);
 box-shadow:none;
 border-radius:0;
}
 
/* ---- PAGERATING ---- */
 
.page-rate-widget-box{margin: unset;
 border-radius:0;
 border:solid2px var(--darkerColor);
 box-shadow:3px0px0px0px var(--accentColor);
 background-color: var(--darkerColor);
 margin-top:4px;
 margin-bottom:4px;
 margin-right:3px;
}div.page-rate-widget-box.rate-points{background-color: var(--darkerColor);
 border:none;
 color: var(--lightColor) !important;
 text-transform:capitalize;
}.page-rate-widget-box.rateup,
.page-rate-widget-box.ratedown{background-color: var(--darkerColor);
 border-top:none;
 border-bottom:none;
}.page-rate-widget-box.rateupa,
.page-rate-widget-box.ratedowna{background:transparent;
 color: var(--lightColor);
}.page-rate-widget-box.rateupa:hover,
.page-rate-widget-box.ratedowna:hover{background: var(--darkerColor);
 color: var(--accentColor);
}.page-rate-widget-box.cancel{background:transparent;
 background-color: var(--darkerColor);
 border:none;
}.page-rate-widget-box.cancela{color: var(--lightColor);
}.page-rate-widget-box.cancela:hover{background: var(--darkerColor);
 color: var(--accentColor);
}
 
/* ---- PAGEELEMENTS ---- */
 
.page-source, tt{font-family: var(--mono-font);
 font-size:0.87rem;
}.codepre, .codep, .code{font-family: var(--mono-font);
 font-size:0.87rem;
 color: var(--darkerColor);
}h1{color: var(--accentColor);
 font-family: var(--header-font);
 font-weight:bold;
}h2,
h3,
h4,
h5,
h6{color:inherit;
 font-family: var(--header-font);
 font-weight:bold;
}#page-title, .meta-title{color: var(--lightColor);
 font-family: var(--header-font);
 font-weight:bold;
 font-size:1.75em;
 text-align:center;
 border-color: currentColor;
}
 
/*Clickylinks*/
a,
a.newpage,
a:visited,
#side-bara,
#side-bara:visited{color: var(--accentColor);
 transition: color 0.15s linear;
}a:hover, a.newpage:hover, a:visited:hover, #side-bara:not(.close-menu):hover{color:#ffffff;
 text-decoration:none;
 background-color: var(--accentColor);
}a.newpage{filter: hue-rotate(180deg); }
 
/*patchforsidebarmedia, collapsibles, ACS, infobuttonandayersmodulesolinkdoesn'toverride*/
#page-content.collapsible-block-foldeda:hover, #page-content.collapsible-block-unfolded-linka:hover, #page-content.rate-box-with-credit-button.fa-info:hover, #side-bar.side-block.mediaa:hover, .danger-diamonda:hover, .printuser.avatarhover > a:first-child:hover{background:transparent;
}.info-container.collapsible-block-folded.collapsible-block-link, .info-container.collapsible-block-link{background: var(--linkColour) !important;
}
 
/*---------------------------*/
 
hr{background-color: var(--accentColor);
 margin:1.5rem 0;
}blockquote,
div.blockquote,
#toc{background-color: var(--darkerColor);
 border:solid2px var(--darkColor);
 box-shadow: -3px0px0px -0.1px var(--accentColor);
}.code{background-color:#F8F8F8;
 border:solid3px var(--darkColor);
 box-shadow:none;
}.scp-image-block{border:solid8px var(--darkerColor);
 border-bottom:solid0px var(--darkerColor);
 box-shadow:0px0.26rem 0px0px var(--accentColor);
 box-sizing: border-box;
}.scp-image-block.scp-image-caption{background-color: var(--darkerColor);
 border:solid4px var(--darkerColor);
 color: var(--lightColor);
 font-size:0.84rem;
}.scp-image-block.block-left{margin-left:0; }.scp-image-block.block-right{margin-right:0; }@media (max-width: 540px) {.scp-image-block.block-left, .scp-image-block.block-right{float:none; clear:both; margin-left:auto; margin-right:auto;
 }}#page-content.wiki-content-tabletrth{border:solid1px var(--accentColor);
 color: var(--accentColor);
 background-color: var(--darkerColor);
 /*setborderfortabletitle*/
}#page-content.wiki-content-tabletrtd{border:solid1px var(--accentColor);
 /*setborderfortablecontent*/
}
 
/*fancycollapsible*/
#page-content.collapsible-block-folded, #page-content.collapsible-block-unfolded-link{background: var(--darkerColor);
 transition:background0.25s linear;
 width: -moz-fit-content;
 width: fit-content;
 overflow:hidden;
 margin:auto;
 box-sizing: border-box;
}#page-content.collapsible-block-folded.collapsible-block-link::before{content: "▷ ";
}#page-content.collapsible-block-unfolded.collapsible-block-link::before{content: "▽ ";
}#page-content.collapsible-block-link{display:inline-block;
 padding:0.5rem 1rem;
 
 text-decoration:none;
 color: var(--lightColor);
 font-weight:bold;
 text-align:center;
}#page-content.collapsible-block-folded:hover, #page-content.collapsible-block-unfolded-link:hover{background: var(--accentColor);
}#page-content.collapsible-block-unfolded-link{box-shadow:0px -0.26rem 0px0px var(--accentColor);
}#page-content.collapsible-block-folded, #page-content.collapsible-block-unfolded-link{margin-top:10px;
 margin-bottom:10px;
}
 
/*Selection*/
::selection{background: var(--accentColor);
 color:#ffffff;
}
 
/*Footnotes*/
.hovertip{font-size:.9rem;
 background-color: var(--darkerColor) !important;
 border:solid1px var(--accentColor) !important;
}.footnotes-footer{background-color: var(--darkerColor);
 padding-left:1.4rem;
 padding-right:1.4rem;
 padding-bottom:1.5rem;
 box-shadow: -0.24rem 0px0px0px var(--accentColor);
}.footnotes-footer.title{color: var(--lightColor);;
}.footnote.f-footer, .equation.e-footer, .reference.r-footer{display:none;
}
 
/*Tags*/
#main-content.page-tagsa{margin-top:.18rem;
}.page-tagsspan{border-top:1pxsolid var(--lightColor);
}
 
/*Pop-UpWindows*/
.owindow{background-color: var(--darkerColor);
 border-color: var(--accentColor);
}.owindow.modal-header{background-color: var(--darkerColor);
}.owindow.modal-bodyimg{background-color:transparent !important;
}.owindow.title{background-color: var(--darkerColor);
 color: #var(--accentColor);
 border-bottom:1pxsolid var(--darkColor);
}.owindow.button-bara{background-color: var(--darkerColor);
 border-color: var(--accentColor);
 color: var(--lightColor);
}.owindow.button-bara:hover{background-color: var(--accentColor);
}.owindow.owait.content{background-image:none;
 padding:0.25rem 1.5rem 1.5rem;
}.owindow.owait.content::after{content: " ";
 display:block;
 width:1.6rem;
 height:1.6rem;
 margin: -1rem auto;
 margin-top:0.85rem;
 border-radius:50%;
 border:0.375rem solidblack;
 border-color: var(--accentColor) var(--darkColor) var(--darkColor);
 animation: loading 0.75s linear infinite;
}@keyframesloading{
 0% {transform: rotate(0deg);
 }
 100% {transform: rotate(360deg);
 }}
 
/*EditButtons*/
.buttons.btn{background-color: var(--darkerColor);
 border-color: var(--accentColor);
 color: var(--accentColor);
 padding:0.45em0.625em;
 font-weight:bold;
 transition: color 0.15s linear;
 cursor:pointer;
}.buttons.btn:hover{background-color: var(--accentColor);
 color: var(--darkerColor);
}
 
/*EditLockInfo*/
#lock-info{background-color: var(--darkerColor);
 border-color: var(--lightColor);
}
 
/*CloseButtonforPageSource, Rating, Etc*/
a.action-area-close:hover{background-color: var(--accentColor);
}
 
/*History*/
.pager.current{background-color: var(--accentColor);
 border-color: var(--lightColor);
}.pagera,
table.page-historytd.optionstda{border-color: currentColor;
}
 
/*HistoryCompare*/
.inline-diffins, .inline-diffdel{color: var(--darkerColor);
}
 
/*PageSource*/
.page-source{border:none;
 padding:1.5em1.75em;
 background-color: var(--darkerColor);
}
 
/* ---- CUSTOMSYNTAX ---- */
 
.darkbox{background-color: var(--darkerColor);
 border-left:solid0.26rem var(--accentColor);
 border-right:solid0.26rem var(--accentColor);
 padding:.4rem;
 margin-top:12px;
 margin-bottom:12px;
}.lightbox{background-color: var(--lightColor);
 color: var(--darkerColor);
 border-left:solid0.26rem var(--accentColor);
 border-right:solid0.26rem var(--accentColor);
 padding:.4rem;
 margin-top:12px;
 margin-bottom:12px;
}.lightboxh2, .lightboxh3, .lightboxh4, .lightboxh5, .lightboxh6{color: var(--darkerColor);
}
 
/*authorlabelcompatibility*/
#page-content.authorlink-wrapper{margin-top: -0.1rem;
 --author-right-adjust:0;
 --swatch-background:33, 37, 46;
 --swatch-text-general:237, 237, 237;
}
 
/*------------------------------------*/
 
.limit{margin-bottom: -1rem;
 z-index:5;
 
}.anchor{position: sticky;
 height:0;
 top:0;
 z-index:5;
}.sidebox{background-color: var(--darkerColor);
 border-top:solid2px var(--accentColor);
 padding:.14rem;
 margin-top:0;
 margin-bottom:8px;
 width: calc((100vw - 870px)/2);
 max-height: calc(100vh - 18rem);
 position:absolute;
 top:0;
 left:103.5%;
 z-index:5;
 overflow:auto;
 box-sizing: border-box;
}
/*Sideboxmobileoptimization, courtesyofWoed*/
@media (max-width: 1290px) {.sidebox{
 --arrow-size:1.25rem;
 width:auto;
 max-width:65vw!important;
 border:none;
 padding-left:0.4rem; padding-right:0.4rem;
 top:0.75rem;
 right: calc(((100vw - 45.8rem)/2) * -1);
 left: initial;
 clip-path:inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
 transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, background-position-x .25s ease-out;
 background-image: conic-gradient(from 44.9deg, var(--accentColor) 45deg 90deg, transparent90.1deg);
 background-repeat:no-repeat;
 background-size: var(--arrow-size);
 background-position-x:100%;
 scrollbar-width:none;
 }.sidebox::-webkit-scrollbar{width:0px; }.sidebox > *{opacity:0;
 transition: opacity 0.2s ease-in-out 0.2s;
 }.sidebox:is(:hover,:focus-within) {clip-path:inset(-0.125rem -0.25rem 00);
 background-position-x: calc(100% + var(--arrow-size));
 }.sidebox:is(:hover,:focus-within) > *{opacity:1;
 }}@media (max-width:768px) {.sidebox, .sidebox:is(:hover,:focus-within) {right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
 }}

[フレーム]

_cc theme

page revision: 154, last edited: 19 Oct 2025 05:45

Discuss (17)

SCP Foundation

Secure, Contain, Protect

Info