Flopstyle: LITE

Sigma Themes » Flopstyle: LITE

Flopstyle: LITE
By: Lt Flops Lt Flops
Published on 23 May 2020 04:51

This is a working example of the authorbox. Consult the Sideboxes subsection for further info.

⮤ This is a flavorbox ⮥

To create one, copy the following div
and paste it inside your authorbox:

[[div class="flavorbox"]]

Rating:

rating: +84

Rating w/ Info Pane:

rating: +84

Info

Thank you to stormbreath stormbreath for his help, and Croquembouche Croquembouche for looking this over.

Select CSS styles are based on the SCP Style Resource (attributed where necessary).

rating: +84

Example Formatting

Each div block example contains:

A visual appearance.
Usage syntax.
Some may also include a brief description of intended use.

RAISA Notice Header

— Maria Jones, Director, RAISA

[[div class="raisa-header"]]
++++* Heading
----
Text
[[/div]]

Pretty Header

— Maria Jones, Director, Fabulous ✧・゚: *✧・゚:*

[[div class="pink-header"]]
++++* Heading
----
Text
[[/div]]

spcheader.png

From the Desk of ORACLE Header

— Nathan Jones, Commissioner, CICAPOCO

[[div class="oracle-header"]]
[[div class="img-resize"]]
[[image URL_HERE]]
[[/div]]
++++* Heading
----
Text
[[/div]]

spcheader.png

NOTICE FROM THE CENTRAL INTELLIGENCE COORDINATION AND PROJECTS OPERATION COMMAND OFFICE

[[div class="cicapoco-header"]]
[[div class="img-resize"]]
[[image URL_HERE]]
[[/div]]
++++* NOTICE FROM THE CENTRAL INTELLIGENCE COORDINATION AND PROJECTS OPERATION COMMAND OFFICE
----
Text
[[/div]]

⚠️ CONTENT WARNING ⚠️

[[div class="content-warning"]]
⚠️ **CONTENT WARNING** ⚠️
Text
[[/div]]

Regular Quote Block

[[div class="blockquote"]]
Text
[[/div]]

Alternative Quote Block

[[div class="alt-blockquote"]]
Text
[[/div]]

Lightweight Quote Block

[[div class="lightweight"]]
Text
[[/div]]

Decorative Quote Block

[[div class="card-block"]]
Text
[[/div]]

Log Header

For Use Above Interview/Exploration Logs

[[div class="log-header"]]
+++* Heading
----
Text
[[/div]]

Report Block

For Internal Documentation

[[div class="report-box"]]
+++* Heading
----
Text
[[/div]]

Report Block w/ Realistic Shadow

[[div class="report-box realistic-shadow"]]

Report Block Alternatives:

[[div class="report-box red-tint"]]

[[div class="report-box orange-tint"]]

[[div class="report-box yellow-tint"]]

[[div class="report-box green-tint"]]

[[div class="report-box cyan-tint"]]

[[div class="report-box blue-tint"]]

[[div class="report-box magenta-tint"]]

[[div class="report-box grey-tint"]]

Overseer Document Block

[[div class="o5-box"]]
Text
[[/div]]

Faux "Page Source" Block

[[div class="faux-source"]]
Text
[[/div]]

Narration Block

Lorem ipsum dolor sit amet, quis habeo facilisi eum an. Habeo denique consequuntur nec at, id his agam inciderint. Ex veri doming disputationi quo, error clita eruditi ei quo. Melius labitur comprehensam pro cu. Ut dico veritus assueverit sed.

Duo justo vitae dicant cu, ut his vitae appetere eloquentiam. Repudiare consequat ei eum, ex eam vocibus denique iracundia. Vix vocent minimum sensibus in, ad quando phaedrum intellegam sed. Fastidii argumentum ne vel, ad sint errem.

[[div class="narration justified indented"]]
Text
[[/div]]

WARNING: NOTICE BLOCK

For Use When Scaring the Heck out of Your Reader

[[div class="warning-notice"]]
+* WARNING
----
Text
[[/div]]

Subject: Journal Block

For Use When You Want Authenticity

[[div class="journal"]]
Text
[[/div]]

Note: This div does not allow you to create a double linebreak. To achieve a double linebreak, do the following:

1. After each line of text, press enter.
2. In that new line, encase a space with two sets of @@ (one on each side).
3. Press enter again and continue.

SMS Message Block 😳

[[div class="sms-message"]]
Text
[[/div]]

For a single SMS Message Block, include the following code under it.
For multiple SMS Message Blocks, include the following code under the final one.

[[div style="clear: left;"]]
[[/div]]

Each special formatting example contains:

A visual appearance.
Usage syntax.

_{Red Document Revision Text}
Inoculation disseminated.

[[span class="rev-red"]] Text [[/span]]

_{Green Document Revision Text}
Outdated information appears in green.

[[span class="rev-green"]] Text [[/span]]

_{Blue Document Revision Text}
Inoculation completed!

[[span class="rev-blue"]] Text [[/span]]

_{Yellow Document Revision Text}
Loading paused. Refresh?

[[span class="rev-yellow"]] Text [[/span]]

_{Computer Terminal Text}
[REDACTION]
[EXPUNGEMENT]
[DATA LOST]

[[span class="terminal-span"]] [TEXT] [[/span]]

_{Blinking Text Cursor}
_

[[span class="blinkbar"]]|[[/span]]

_{Special Heading Area 1}

HEADING

SUBHEADING

[[div class="lite-heading"]]
----
++* HEADING
+++* SUBHEADING
----
[[/div]]

_{Special Heading Area 2}

ADDENDA MATERIALS

[[div class="lite-heading"]]
----
++* ADDENDA MATERIALS
----
[[/div]]

_{Alternative Image Showcase}

base_image_frame.png

[[div class="image-showcase block-center"]]
[[=image URL_HERE]]
[[/div]]

_{Fancy Scene/Section Break}

logo.png

[[=image URL_HERE class="scene-break"]]

_{ListPages Navigation}

Next Iteration ▷

◁ Back

[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[[>]]
**Next Iteration ▷**
[[/>]]
[[/div]]

[[div class="listPagesNav-prev"]]
**◁ Back**
[[/div]]
[[/div]]

_{Fade-Out Gradient}

[[div class="fade-away"]]

[[/div]]

_{Page Footing}

[[div class="footing"]]
[[/div]]

_{Related Articles Box}

See Also:

Front Page - SCP Foundation

[[div class="related-flex"]]
[[div class="related"]]
**__See Also:__**
* **[[[link-to-a-page|Custom Text]]]**
[[/div]]
[[/div]]

_{Series Navigation}

« Previous Article | Current Article | Next Article »

[[div class="series-nav"]]
« Previous Article | [[size 120%]]Current Article[[/size]] | Next Article »
[[/div]]

TITLE / WARNING

SUBTITLE / FOR DIVISION EYES ONLY / DOCUMENT TYPE

This file is classified under Level-X/XXXX clearance.
Unauthorized access is forbidden.

ITEM NUMBER / PROJECT NAME

Source Code

----
[[div class="orderwrapper"]]
[[div class="council"]]
[[/div]]
[[div class="ordertitle"]]
+* TITLE / WARNING
[[/div]]
[[div class="orderdescription"]]
_
+* SUBTITLE / FOR DIVISION NAME EYES ONLY / DOCUMENT TYPE
The following file is classified under Level X/XXXX.
Unauthorized access is forbidden.
[[/div]]
[[div class="itemno"]]
+* ITEM NUMBER / PROJECT NAME
[[/div]]
[[/div]]
----

What Is This?

This is a theme created by Lt Flops Lt Flops . It is an aesthetic improvement and extension of Sigma-10 (the Wiki's main theme).

Only use this if you understand what you're doing.

This theme is incompatible with Black Highlighter, BASALT, and Sigma+.

Dark Mode Counterpart

Flopstyle: DARK

How to Use

To use this theme, please copy and paste this syntax onto the top of your page:

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

If you wish to use this theme with another Sigma theme, paste Flopstyle first and your chosen theme in the next line. Some fine-tuning may be necessary.

Please also note that this theme uses the following components:

Croqstyle CSS by Croquembouche Croquembouche
Fade In (set at speed=1) by Croquembouche Croquembouche
Toggle Sidebar by EstrellaYoshte EstrellaYoshte

This theme was designed with the following component(s) in mind…

Centered Header Sigma

To use this component, please paste the following syntax after Flopstyle. If your page uses another custom Sigma theme, please paste the following syntax after the custom theme:

[[include :scp-wiki:component:centered-header-sigma-9]]

You may alter the header, sub-header, header colour, sub-header colour, and header logo as you see fit. Just paste this syntax after the Centered Header include, then style it accordingly:

[[module CSS]]
:root {
--header-title: "TITLE";
--header-subtitle: "SUBTITLE";
--titleColor: title_colour;
--subtitleColor: subtitle_colour;
--lgurl: url(URL_HERE);
}
[[/module]]

Flops Header

Sideboxes

Adapted from Penumbra Theme by EstrellaYoshte EstrellaYoshte .

Sideboxes are built-in components that come in two types:

authorbox
sidebox

Usage instructions vary depending on the type.

The authorbox does not display on screens below width=1200px, which includes mobile screens. It can be set up to display page and author information.
The sidebox collapses into the page edge on screens below width=1200px. On those screens, it can be accessed by tapping your finger or hovering your cursor over it. It can be set up to display additional narrative information.

Please consider these conditions before setting up these items — a large percentage of SCP Wiki users browse via mobile devices.

1. Authorbox

(See Top Left)

By default, the authorbox is opt-out. It comes preloaded on all pages that include Flopstyle: LITE. If you wish to remove it, please replace this:

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

With this:

[[div style="display: none;"]]
[[include :scp-wiki:theme:flopstyle]]
[[/div]]

Alternative 1: After removing the authorbox, you can replace it with a custom version that displays any information you desire. This functionality can be especially useful for co-authored, rewritten, or translated pages. For your reference, this is the code that creates the authorbox:

[[div class="anchor"]]Sets authorbox's sticky position.
[[div class="authorbox"]]

[[module ListPages name="="]]
||~ %%title%% ||
||= **By:** %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]

|| Optional Flavor Text ||

[[/div]]
[[/div]]Sets the end limit of the anchor.

By default, the authorbox makes use of ListPages to automate the metadata displayed. You could theoretically copy the ListPages portion of the authorbox onto any Wiki page, and these fields would populate in a way unique to that page. You may, of course, change any of these fields as desired.

You may also edit your custom authorbox to display flavor text tailored to your page, such as a note to readers.

See the left side of the page for an authorbox example.

flavorbox is the only div you should use inside an authorbox.

Alternative 2: If you want, you can move the authorbox to the right-hand side of the page. To do so, copy this syntax and paste it inside a CSS module at the top of your page:

.authorbox {
right: unset;
left: 103.5%;
padding: 0 0 0 1em;
}

If you have a page that does this, I recommend against inserting any sideboxes in that same page, or it will prove rather messy.

If you are planning on inserting any sidecontainers onto your page, I strongly recommend using the default authorbox. The reason being, when a right-hand authorbox and sidecontainer are used in tandem, they will overlap and become visually messy. This has the potential to be very confusing for readers. So, it's better staying on the safe side.

2. Sidebox

The sidebox is opt-in. It is set up like this:

[[div class="limit"]] Sets the start limit of the anchor.
[[div class="anchor"]] Sets sidebox's sticky position.
[[div class="sidebox"]]
Desired sidebox text here.
[[/div]]
[[/div]]
Text that the sidebox associates with.
[[/div]] Sets the end limit of the anchor.

I recommend inserting a manual linebreak after sidebox-associated text. You can achieve this by encasing a space with two sets of @@ (one on each side). The sidebox will appear alongside this text as you scroll past.

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.

which 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.

Remember the limit div. Without a limit, the anchor will remain present across the entire page content once you scroll past its starting position.

Misc. Changeable Portions

If necessary, you can also edit any of these CSS properties to better suit your page. This list does not cover all styles that Flopstyle offers — but it's a good place to start.

Change Info Bar Properties

.info-container {
/* = Recolour according to Site Theme = */
--barColour: bar_colour;
}

#u-author_block {
display: none;
}

Change Lite-Heading Subtitle Colour

.lite-heading h3 {
/* = Recolour according to Site Theme = */
color: lite_heading_colour;
}

Change Card-Block & Sidebox Border-Left Colour

:root {
--accentColor: accent_colour;
}

Change Simple Warning Header Logo

(The image must be transparent)

.warning-notice {
background-image: url(URL_HERE);
background-size: 400px;
}

Change Advanced Warning Header Logo

(The image must be transparent)

.council {
background-image: url(URL_HERE);
}

Change Series Navigation Background

.series-nav {
background:
linear-gradient(
to bottom right,
hsla(0, 0%, 100%, 1),
COLOUR_HERE);
}

Hide Page Title

#page-title {
display: none;
}

Hide Footnotes Footer

.footnotes-footer {
display: none;
}

Source Code

/* ==== FONTS ==== */
 
/***ArchitectsDaughter**By*KimberlyGeswein*License*OpenFontLicense (OFL)
 *SourceLink*https://fonts.google.com/specimen/Architects+Daughter/about**/
 
 @importurl(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap);
 
/***Montserrat**By*JulietaUlanovsky, SolMatas, JuanPablodelPeral, JacquesLeBailly*License*OpenFontLicense (OFL)
 *SourceLink*https://fonts.google.com/specimen/Montserrat/about**/
 
 @importurl(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);

/* ==== Flopstyle: LITE ==== */
 
/***[2020WikidotTheme]*CreatedbyLtFlops*SelectCSSStylesAreCreditedWhereNecessary**/
 
/* ==== HEADERAREA ==== */
 
/* == COMMON == */
 
 :root{
 /* = COLOURSCHEME = */
 --alpha: hsl(0, 0%, 100%);
 --key: hsl(0, 0%, 5%);
 
 --accentColor: hsl(0, 100%, 30%);
 --vivid-lime-green: hsl(112, 77%, 48%);
}:root{
 /* = YUITABCOLOURSCHEME = */
 --darkAccent: hsl(360, 94%, 20%);
 --liteAccent: hsl(360, 100%, 27%);
 --alfaAccent: hsl(360, 100%, 95%);
}:root{
 /* = FONTS = */
 --header-font: "Montserrat", sans-serif;
 --script-font: "Architects Daughter", cursive;
}body{color: var(--key);
}#search-top-box,
 #top-bar,
 #login-status{right:0;
}
 
/* == SITEBANNER == */
 
 #headerh1a,
 #headerh1a::before{color: hsl(0, 0%, 93%);
 
 font-family: var(--header-font);
 font-weight:800;
 text-shadow:none;
}#headerh2span,
 #headerh2span::before{color: hsl(60, 62%, 85%);
 
 font-family: var(--header-font);
 font-weight:400;
 text-shadow:none;
}
 
/* == SEARCH == */
 
 #search-top-box-input,
 #search-top-box-forminput[type="submit"]{background: hsl(0, 0%, 20%);
 border-color: hsl(0, 0%, 60%);
 border-radius:0;
}#search-top-box-forminput[type="submit"]{font-size: unset;
}#search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-forminput[type="submit"]:hover,
 #search-top-box-forminput[type="submit"]:focus{background: hsl(0, 0%, 30%);
 border-color: hsl(0, 0%, 70%);
}
 
/* == TOPMENU == */
 
 #top-barulliul{top:22px;
}
 
/* == SIDEMENU == */
 
 #top-bar.open-menua{border-radius: unset;
}#side-bar.side-block{border-color: hsl(0, 0%, 20%);
 border-radius:0;
}#side-bar.heading{color: var(--key);
 border-bottom:1pxsolid hsl(0, 0%, 20%);
}
 
/* == INTERWIKI == */
 
 div.scpnet-interwiki-wrapper{margin-bottom:2rem;
}iframe.scpnet-interwiki-frame{width:15.127rem;
 min-height:8rem;
 margin-left:4px;
 
 background: hsl(127, 050%, 94%);
 border:1pxsolid hsl(0, 0%, 20%);
}#interwikibody{overflow:hidden;
}#interwiki.side-block{padding:5px;
 
 background:0;
 border:0;
 box-shadow:none;
}#interwiki.heading{color: var(--key);
 border-bottom:1pxsolid hsl(0, 0%, 20%);
}#interwiki.menu-itemimg{display:none;
}
 
/* ==== CONTENTAREA ==== */
 
/* == SIDEBOXES == */
 
/***AdaptedFrom*PenumbraThemebyEstrellaYoshte**/
 
 .limit{line-height:1.5;
 z-index:5;
}.limitbr{display:block;
}.anchor{position: -webkit-sticky;
 position: sticky;
 top:0;
 
 z-index:5;
}.authorbox,
 .sidebox{position:absolute;
 width: calc((100vw - 870px) / 2);
 max-height: calc(100vh - 18rem);
 margin-right:8px;
 padding:.3rem 1.5rem;
 
 box-sizing: border-box;
 
 z-index:5;
}.authorbox{top:.5rem;
 right:103.5%;
 max-width: calc((100vw - 921.2px) / 2) !important;
 padding-right:1rem;
 
 font-size:95%;
}.sidebox{left:103.5%;
 margin-left:1rem;
 padding-left:1rem;
 
 background: var(--alpha);
 border:1pxsolid hsl(0, 0%, 73%);
 border-left:8pxsolid var(--accentColor);
}.authorboxtr:is(th, td),
 .sideboxtr:is(th, td) {padding:.2rem !important;
}.flavorbox{width:75%;
 margin:autoauto5px;
 padding:01rem;
 
 border:1pxsolid#888;
}
 
/* == SIDEBOXMOBILECUSTOMIZATION == */
 
/***CourtesyOf*Woedenaz**/
 
 @media (max-width: 767.9px) {.sidebox,
 .sidebox:hover{right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1rem);
 }}@media (max-width: 1199.9px) {.authorbox{display:none;
 visibility:hidden;
 }.sidebox{top:.75rem;
 right: calc(((100vw - 45.8rem) / 2) * -1);
 left: initial;
 width:auto;
 max-width:65vw !important;
 padding:0.4rem;
 
 background: var(--accentColor);
 border:1pxsolid hsl(0, 0%, 73%);
 border-left:8pxsolid var(--accentColor);
 border-radius:0;
 
 overflow:visible;
 -webkit-clip-path:inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
 clip-path:inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
 -webkit-transition:
 color .2s ease-in-out .1s,
 -webkit-box-shadow .5s ease-in-out .1s,
 -webkit-clip-path .5s ease-in-out .1s;
 -o-transition:
 color .2s ease-in-out .1s,
 box-shadow .5s ease-in-out .1s,
 clip-path .5s ease-in-out .1s;
 transition:
 color .2s ease-in-out .1s,
 box-shadow .5s ease-in-out .1s,
 clip-path .5s ease-in-out .1s,
 -webkit-box-shadow .5s ease-in-out .1s,
 -webkit-clip-path .5s ease-in-out .1s;
 }.sidebox::before,
 .sidebox::after{content: " ";
 position:absolute;
 right:0;
 }.sidebox::before{top: calc(50% - .75rem);
 width:0;
 height:0;
 
 border-top:.75rem solidtransparent;
 border-right:.75rem solid var(--accentColor);
 border-bottom:.75rem solidtransparent;
 
 transition: border .1s ease-in-out .1s;
 z-index:10;
 }.sidebox::after{width:100%;
 max-width:.75rem;
 height:100%;
 max-height: calc(100vh - 18rem);
 top:0;
 
 background: var(--alpha);
 
 transition:
 max-width .5s ease-in-out .1s,
 box-shadow .5s ease-in-out .1s;
 z-index: -1;
 }.sidebox > *{opacity:0;
 -webkit-transition: opacity .2s ease-in-out .2s;
 -o-transition: opacity .2s ease-in-out .2s;
 transition: opacity .2s ease-in-out .2s;
 }.sidebox:hover{overflow:visible;
 -webkit-clip-path:inset(-.125rem -.25rem 00);
 clip-path:inset(-.125rem -.25rem 00);
 -webkit-transition:right.5s ease-in-out .1s,
 color .5s ease-in-out .2s,
 -webkit-box-shadow .5s ease-in-out .1s,
 -webkit-clip-path .5s ease-in-out .1s;
 -o-transition:right.5s ease-in-out .1s,
 color .5s ease-in-out .2s,
 box-shadow .5s ease-in-out .1s,
 clip-path .5s ease-in-out .1s;
 transition:right.5s ease-in-out .1s,
 color .5s ease-in-out .2s,
 box-shadow .5s ease-in-out .1s,
 clip-path .5s ease-in-out .1s,
 -webkit-box-shadow .5s ease-in-out .1s,
 -webkit-clip-path .5s ease-in-out .1s;
 }.sidebox:hover::before {
 border-top: 0solidtransparent;
 border-bottom:0solidtransparent;
 }.sidebox:hover::after{right:0;
 max-width:100%;
 }.sidebox:hover > *{opacity:1;
 }
}
 
/* == COLLAPSIBLES == */
 
 .collapsible-block-link{font-size:120%;
 font-weight:bold;
}:is(div) .collapsible-block{
 /* = ForCollapsiblesInsideDivs = */
 padding:1rem 0;
}.licensebox.collapsible-block-folded,
 .licensebox.collapsible-block-unfolded-link{margin:auto;
 
 text-align:center;
}.licensebox.collapsible-block-content{text-align:center}.licensebox:is(blockquote, div.blockquote) {text-align:left;
}
 
/* == INFOBAR == */
 
 .info-container{
 --barColour: hsl(0, 89%, 18%);
}.info-container.collapsible-block-link{font-size:100%;
}.info-containerdiv.collapsible-block-content{padding:0.6rem 3rem;
}.info-container.wiki-content-table{width:90%;
}
 
/* == PAGERATING == */
 
 .page-rate-widget-box,
 div.page-rate-widget-box.rate-points{border-radius:0;
 
 text-transform:capitalize;
}.page-rate-widget-box{margin-right:0;
}.page-rate-widget-box.cancel,
 .page-rate-widget-box.cancela:hover{border-radius:0 !important;
}
 
/* == INFOMODULE == */
 
 .creditRate{margin-right:0 !important;
}.rate-box-with-credit-button{border-radius:0 !important;
 box-shadow:none !important;
}:is(.creditButton, .creditButtonStandalone) pa:hover{color: var(--vivid-lime-green) !important;
}div.credit.first.wiki-content-table{width:100%;
}
 
/* == FORMATTING | [GENERAL] == */
 
 #page-title,
 .meta-title{padding-bottom:0;
 
 font-family: var(--header-font);
 font-weight:600;
}#page-content:is(h1, h2, h3, h4, h5, h6) {display: flex;
 flex-direction: column;
 justify-content:center;
 
 font-family: var(--header-font);
 font-weight:600;
 line-height:1.2;
 text-align:center;
 text-underline-offset:25%;
 word-break: unset;
}#page-contenth2{font-weight:bold;
}#page-contenta{padding-bottom:1px;
 
 border-bottom:thinsolid;
}#page-content:is(.disruptionHeader, .footnoteref, .bibcite),
 #page-content:is(.rateupa, .ratedowna, .cancela, .yui-nava) {
 /* = AvoidSpecialLinks = */
 border:0;
}#page-content:is(.creditButton, .creditButtonStandalone) pa{
 /* = AvoidSpecialLinks = */
 border-bottom:0;
}#page-contenta:hover{border-bottom-width:2px;
 
 text-decoration:none;
}#page-content.footnoterefa:hover{text-decoration:underline;
}#main-content:is(#breadcrumbs, #page-options-container) a:hover,
 :is(#footer, #license-area) a:hover{padding-bottom:1px;
 
 border-bottom:thinsolid;
 
 text-decoration:none;
}hr{height:0;
 margin:1rem 0;
 
 background:0;
 border-top:1pxsolid hsl(0, 0%, 67%);
}olli{margin:001rem;
}ul{margin:1rem 0;
}li, p{text-underline-offset:30%;
}#toc{line-height:1.5;
}.footnotes-footer,
 .bibitems{padding:00.5rem;
}#search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-forminput[type=submit],
 #search-top-box-forminput[type=submit]:hover,
 #search-top-box-forminput[type=submit]:focus,
 #top-barulliul,
 #side-bar.side-block,
 .page-rate-widget-box,
 .scp-image-block{box-shadow:none;
}
 
/* == IMAGEBLOCK == */
 
 .scp-image-block.scp-image-caption{font-size:95%;
 line-height:1.35;
 text-underline-offset:30%;
}.scp-image-block.block-right{margin:001rem 2rem;
}
 
/* == CUSTOMDIVBLOCKS == */
 
 .raisa-header,
 .pink-header,
 .oracle-header,
 .cicapoco-header{margin-bottom:1rem;
 padding:0.5rem;
 
 border:1pxsolid;
 
 text-align:center;
}.raisa-header{
 /* = RAISANoticeHeader = */
 background: hsl(60, 65%, 85%);
 border-color: hsl(0, 0%, 60%);
}.pink-header{
 /* = PrettyHeader = */
 background: hsl(350, 100%, 85%);
 border-color: hsl(0, 4%, 36%);
}.pink-headerhr{border-color: hsl(0, 4%, 36%);
}.oracle-header{
 /* = SPCFromtheDeskofORACLEHeader = */
 color: hsl(208, 100%, 97%);
 background: hsl(208, 67%, 44%);
 border-color: var(--key);
}.oracle-headerhr{border-color: hsl(208, 100%, 97%);
}.img-resizeimg{
 /* = HeaderIcons = */
 float:left;
 width:auto;
 height:8rem;
 margin:.5rem;
}.cicapoco-header{
 /* = SPC'sRAISA-EquivalentHeader = */
 background: lightblue;
 border-color: hsl(195, 50%, 39%);
}.cicapoco-headerhr{border-color: hsl(195, 50%, 39%);
}.content-warning{
 /* = ContentWarning = */
 width:75%;
 margin:1rem auto;
 padding:01rem;
 
 background: var(--alpha);
 border:3pxdouble var(--key);
 
 text-align:center;
}blockquote, div.blockquote,
 .alt-blockquote, .lightweight{margin:1rem 3rem;
 padding:01rem;
}blockquote, div.blockquote{
 /* = RegularQuoteBlock = */
 background: hsl(0, 0%, 96%);
 border:3pxdouble hsl(0, 0%, 60%);
}:is(blockquote, div.blockquote) table.wiki-content-tableth{background: hsl(0, 0%, 89%);
}.alt-blockquote{
 /* = AlternativeQuoteBlock = */
 background: hsl(0, 0%, 96%);
 border:1pxsolid hsl(0, 0%, 60%);
 border-radius:1rem;
}.lightweight{
 /* = LightweightQuoteBlock = */
 background: hsl(0, 0%, 90%);
}.card-block{
 /* = DecorativeQuoteBlock = */
 margin:1rem 0;
 padding:.6rem 1.2rem;
 
 background: hsl(220, 15%, 93%);
 border-left:8pxsolid var(--accentColor);
 border-radius:.5rem;
}blockquotehr, div.blockquotehr, .alt-blockquotehr, .lightweighthr, .card-blockhr{border-color: hsl(0, 0%, 67%);
}.log-header{
 /* = Interview/ExplorationLogHeader = */
 margin-bottom:1rem;
 padding:01rem;
 
 background: hsl(0, 0%, 96%);
 border:3pxdashed hsl(0, 0%, 60%);
 border-radius:2rem;
}.report-box{
 /* = ReportBlock = */
 margin:1rem 0;
 padding:01rem;
 
 background: var(--alpha);
 border:mediumsolid var(--key);
}.report-boxhr{border-color: var(--key);
}.realistic-shadow{
 /* = BetterShadows = */
 margin:1rem 02rem;
 
 box-shadow:01px1px hsla(0, 0%, 0%, .23),
 02px2px hsla(0, 0%, 0%, .18),
 04px4px hsla(0, 0%, 0%, .15),
 08px8px hsla(0, 0%, 0%, .13);
}.report-box.red-tint{
 /* = AlternativeReportBlockVariants = */
 background: hsl(360, 91%, 86%);
 border-color: hsl(360, 62%, 66%);
}.report-box.red-tinthr{border-color: hsl(360, 62%, 66%);
}.report-box.orange-tint{background: hsl(30, 91%, 86%);
 border-color: hsl(30, 62%, 66%);
}.report-box.orange-tinthr{border-color: hsl(30, 62%, 66%);
}.report-box.yellow-tint{background: hsl(60, 91%, 86%);
 border-color: hsl(60, 62%, 66%);
}.report-box.yellow-tinthr{border-color: hsl(60, 62%, 66%);
}.report-box.green-tint{background: hsl(120, 91%, 86%);
 border-color: hsl(120, 62%, 66%);
}.report-box.green-tinthr{border-color: hsl(120, 62%, 66%);
}.report-box.cyan-tint{background: hsl(180, 91%, 86%);
 border-color: hsl(180, 62%, 66%);
}.report-box.cyan-tinthr{border-color: hsl(180, 62%, 66%);
}.report-box.blue-tint{background: hsl(240, 91%, 86%);
 border-color: hsl(240, 62%, 66%);
}.report-box.blue-tinthr{border-color: hsl(240, 62%, 66%);
}.report-box.magenta-tint{background: hsl(300, 91%, 86%);
 border-color: hsl(300, 62%, 66%);
}.report-box.magenta-tinthr{border-color: hsl(300, 62%, 66%);
}.report-box.grey-tint{background: hsl(210, 9%, 86%);
 border-color: hsl(210, 15%, 42%);
}.report-box.grey-tinthr{border-color: hsl(210, 15%, 42%);
}.report-box:is(.red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint) blockquotehr,
 .report-box:is(.red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint) div.blockquotehr{border-color: hsl(0, 0%, 67%);
}div.o5-box{
 /* = OverseerDocumentBlock = */
 margin:1rem 6rem;
 padding:01rem;
 
 background: hsl(0, 0%, 75%);
 border:mediumsolid var(--key);
}div.o5-boxhr{border-color: var(--key);
}.faux-source{
 /* = MimicsPageSource = */
 margin-bottom:1rem;
 padding:02rem;
 
 background: var(--alpha);
 border:1pxdashed hsl(0, 0%, 67%);
 
 font-family: var(--mono-font);
}.narration{
 /* = MimicsthePagesofaBook = */
 margin:1rem 0;
 padding:01rem;
 
 background: var(--alpha);
 border:1pxsolid hsl(0, 0%, 63%);
}.warning-notice{
 /* = SimpleWarningBlock (AdaptedFromSCP-3143) = */
 padding:01rem;
 
 background: var(--alpha);
 background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
 background-position:center;
 background-repeat:no-repeat;
 border:mediumsolid var(--key);
 
 text-align:center;
}.warning-noticehr{border-color: var(--key);
}.journal{ 
 /* = JournalBlock (AdaptedFromSCP-4003) = */
 margin:1rem 0;
 padding:.9rem;
 
 background-image:
 linear-gradient(to top,
 hsl(201, 33%, 84%) 0%,
 hsl(60, 29%, 89%) 8%);
 background-position:08px;
 background-size:100%1.3rem;
 border:1pxsolid hsl(0, 0%, 80%);
 border-radius:.9rem;
 
 font-family: var(--script-font);
}.journalp{margin:0;
 
 font-size:1.3rem;
 line-height:1.3rem;
}.sms-message{
 /* = SMSMessageBlock = */
 float:left;
 clear:left;
 width:22.4rem;
 margin:001rem;
 padding:01.2rem;
 
 background: hsl(0, 0%, 75%);
 border-radius:2rem;
 
 font-size:112.5%;
 text-align:center;
}
 
/* == FORMATTING | [SPECIAL] == */
 
 .centered{
 /* = Center-AlignsText = */
 text-align:center;
}.justified{
 /* = Justify-AlignsText = */
 text-align:justify;
}.indented{
 /* = IndentsBlockby 3⁄8-inch (UseWithinOtherDivs) = */
 text-indent:2rem;
}.indented:is(h1, h2, h3, h4, h5, h6, ol, ul, .bibcite, .bibitems, .footnoteref, .scp-image-block, .image-container, .centered, .fncon, .fncon::before) {text-indent:0;
}.rev-red,
 .rev-green,
 .rev-blue,
 .rev-yellow,
 .terminal-span{font-weight:bold;
}.rev-red{
 /* = RedDocumentRevisionText = */
 color: var(--liteAccent);
}.rev-green{
 /* = GreenDocumentRevisionText = */
 color: hsl(120, 100%, 27%);
}.rev-blue{
 /* = BlueDocumentRevisionText = */
 color: hsl(240, 100%, 27%);
}.rev-yellow{
 /* = YellowDocumentRevisionText = */
 color: hsl(40, 100%, 40%);
}.terminal-span{
 /* = ComputerTerminalText = */
 font-family: var(--mono-font);
 font-size:110%;
 letter-spacing:.3px;
}
 
/* == BlinkingTextCursor == */
 
/***AdaptedFrom*YourVeryFirstSCP! byTheGreatHippo**/
 
 .blinkbar{color: var(--key); animation:blink1.5s infinite;}@keyframesblink{to{opacity:.0}}@keyframesflicker{0%{opacity:.9890}5%{opacity:.5842}10%{opacity:.9865}20%{opacity:.0412}20%{opacity:.6255}25%{opacity:.3157}30%{opacity:.7328}35%{opacity:.4654}40%{opacity:.9128}45%{opacity:.2449}50%{opacity:.5485}55%{opacity:.6438}60%{opacity:.1180}65%{opacity:.9085}70%{opacity:.0266}75%{opacity:.6795}80%{opacity:.7812}85%{opacity:.0117}90%{opacity:.2239}95%{opacity:.8897}100%{opacity:.2260}}@keyframesoverlay-anim{0%{visibility:hidden}10%{visibility:hidden}11%{visibility:visible}50%{visibility:hidden}100%{visibility:hidden}}.lite-heading{
 /* = SpecialHeadingArea (AdaptedFromSCP-4058) = */
 clear:both;
 margin:3.6rem auto;
}.lite-headingh3{color: var(--liteAccent);
}.lite-headinghr{width:55%;
 margin:auto;
 
 border-width:medium;
}div.image-showcase{
 /* = AlternativeImageShowcase = */
 width:25rem;
 margin-bottom:1rem;
 
 background: var(--alpha);
 border:3pxridge var(--key);
}div.image-showcase.block-center{margin-right:auto;
 margin-left:auto;
}.scene-break{
 /* = FancyScene/SectionBreak = */
 width:3.6rem;
 margin:2rem 0;
}.listPagesNav{margin-bottom:5rem;
}.listPagesNav-prev,
 .listPagesNav-next{
 /* = ListPagesNavigation (AdaptedfromSCP-5552) = */
 width:45%;
 margin:001rem;
 padding:02%;
 
 background: hsl(0, 0%, 90%);
 border:1pxsolid hsl(0, 0%, 60%);
}.listPagesNav-prev{float:left;
 
 text-align:left;
}.listPagesNav-next{float:right;
 
 text-align:right;
}.fade-away{background:
 linear-gradient(
 to bottom,
 var(--alpha),
 var(--key));
}.footing::before{
 /* = PageFooting = */
 content: " ";
 position:absolute;
 right:0;
 bottom:1px;
 left:0;
 
 border-bottom:2pxsolid hsl(0, 0%, 47%);
}.footing{position:relative;
 bottom: -2px;
 margin-bottom:2px;
 
 border-bottom:1pxsolid hsl(0, 0%, 47%);
}.related-flex{
 /* = RelatedArticlesBox = */
 display: flex;
 justify-content:center;
}.related{margin:1rem 0;
 padding:01rem;
 
 background: var(--alpha);
 border:thicksolid hsla(0, 0%, 60%, .5);
 
 text-align:left;
}.series-nav{
 /* = SeriesNavigation = */
 margin:.5rem 0;
 
 background:
 linear-gradient(to bottomright,
 hsla(0, 0%, 100%, 1),
 hsla(0, 0%, 50%, .5));
 border:outset1.5px var(--key);
 border-radius:2rem;
 
 font-size:85%;
 font-weight:bold;
 text-align:center;
}
 
/* == ADVANCEDWARNINGHEADER == */
 
/***AdaptedFrom*SCP-001-JP - indonootoko'sProposalbyindonootoko**/
 
 .orderwrapper{position:relative;
 width:auto;
 
 text-align:center;
}.council{position:relative;
 top:0;
 right:0;
 bottom:0;
 left:0;
 width:295px;
 height:295px;
 margin:auto;
 
 background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
 background-position:center;
 background-repeat:no-repeat;
 background-size:295px295px;
}.ordertitle{position:absolute;
 top:27px;
 right:0;
 left:0;
}.ordertitleh1{color: var(--key);
 
 font-size:220%;
 line-height:90%;
}.orderdescription{position:absolute;
 top:93px;
 right:0;
 left:0;
 width:100%;
}.orderdescriptionh1{color: var(--key);
 
 font-size:120%;
}.orderdescriptionp{color: var(--key);
 
 font-size:90%;
}.itemno{position:absolute;
 right:0;
 bottom:18px;
 left:0;
}.itemnoh1{color: var(--key);
 
 font-size:170%;
}
 
/* ==== YUITABS ==== */
 
/* == YUITABBASE == */
 
 @importurl(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);
 
/* == YUITABCUSTOMIZATION == */
 
/***AdaptedFrom*BlackHighlighterThemebyWoedenaz**/
 
 .yui-navset*{transition:
 color 80ms cubic-bezier(.4, 0, .2, 1),
 background80ms cubic-bezier(.4, 0, .2, 1);
}:is(.yui-navset, .yui-navset.yui-navset-top) .yui-nav{display: flex;
 flex-wrap: wrap;
 
 border-color: var(--darkAccent);
}:is(.yui-navset, .yui-navset.yui-navset-top) .yui-nava{
 /* = LinkModifier = */
 color: var(--key);
 /* = TabBackgroundColour | [UNSELECTED] = */
 background: var(--alfaAccent);
 /* == */
}:is(.yui-navset, .yui-navset.yui-navset-top) .yui-navli{
 /* = ListitemModifier = */
 display: flex;
 flex-grow:2;
 margin:0;
 padding:0;
 
 color: var(--alpha);
 background: var(--darkAccent);
 
 font-size:1.05rem;
}:is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-navlia{width:100%;
 
 border:0;
}:is(.yui-navset, .yui-navset.yui-navset-top) .yui-nav.selected{
 /* = SelectionModifier = */
 flex-grow:2;
 margin:0;
 padding:0;
 
 color: var(--alpha);
 /* = TabBackgroundColour | [SELECTED] = */
 background: var(--darkAccent);
 /* == */
}.yui-navset.yui-navliem{border:0;
}.yui-navset:is(.yui-nav, .yui-nav.selected, .yui-navset-top.yui-nav) aem{padding-top:.47rem;
 padding-bottom:.47rem;
 
 text-align:center;
}.yui-navset:is(.yui-content, .yui-navset-top.yui-content) {padding:.53rem;
 
 border-color: hsl(0, 0%, 60%);
 
 line-height:1.5;
}.yui-navset.yui-nav.selecteda{color: var(--alpha);
 background: var(--darkAccent);
}.yui-navset.yui-nava:is(:hover, :focus) {color: var(--alpha);
 /* = TabBackgroundColour | [HOVER] = */
 background: var(--liteAccent);
 /* == */
}.yui-navset.yui-nav.selected:is(a, aem) {border:0;
}.yui-navset.yui-nav.selecteda:is(:hover, :active, :focus) {background: var(--darkAccent);
 
 cursor:default;
}
 
/* == WIKIWALKNAVIGATOR == */
 
 .footer-wikiwalk-nav{text-align:center;
}
 
/* == BETTERFOOTNOTESPATCH == */
 
 :root{
 --posX: calc(50% - 358px - 13rem) !important;
 --fnLinger:1.5s !important;
}.fnnum{font-size:90%;
}.fnnum:hover + .fncon{right: calc(-8vw - 4rem) !important;
}
 
/* == CROQSTYLEPATCH == */
 
 #edit-page-textarea{font-family: unset;
}tt{margin: unset;
 padding: unset;
 background: unset;
 border-radius: unset;
 font-size: unset;
}
 
/* == FLOPSHEADERPATCH == */
 
 #page-content.disruptionHeader{padding-bottom:.4em;
}
 
/* == PAGETAGS == */
 
 #main-content.page-tags{border-top:1pxsolid hsl(0, 0%, 73%);
}#main-content.page-tagsa{display:inline-block;
 height:.8125rem;
 margin:00.5rem .75rem;
 padding:.1875rem .3125rem .1875rem 0;
 
 color: hsl(0, 0%, 95%);
 background: hsl(0, 0%, 27%);
 border-bottom-right-radius:.25rem;
 border-top-right-radius:.25rem;
 
 font-size:.6875rem; /* 11px*/
 font-weight:normal;
 line-height:.8125rem; /* 13px*/
}#main-content.page-tagsa::before{width:0;
 height:0;
 top: -.1875rem;
 left: -.625rem;
 padding:0.0625rem .1875rem;
 
 border-color:transparent hsl(0, 0%, 27%) transparenttransparent;
 border-style:solid;
 border-width:.5rem .5rem .5rem 0;
}#main-content.page-tagsa::before,
 #main-content.page-tagsa::after{content: "";
 position:relative;
 float:left;
}#main-content.page-tagsa::after{top:.2813rem;
 left: -.5rem;
 width:.25rem;
 height:.25rem;
 
 background: var(--alpha);
 border-radius:.125rem;
}#main-content.page-tagsspan{max-width:100%;
 
 border-top:.5rem solidtransparent;
}
 
/* == SHOW-CHANGESHIGHLIGHTS == */
 
 .inline-diffins::before{color: hsl(240, 100%, 93%);
}.inline-diffdel::before{color: hsl(0, 100%, 90%);
}.inline-diffins + del::before,
 .inline-diffdel + ins::before{color:transparent;
}.inline-diffbr + ins::before,
 .inline-diffbr + del::before,
 .inline-diffins:first-of-type::before,
 .inline-diffdel:first-of-type::before{content: "\f111";
 position:absolute;
 left: -1rem;
 display:inline-block;
 
 font:normalnormalnormal16px/1 "FontAwesome";
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering:auto;
}
 
/* ==== BREAKPOINTS ==== */
 
/* == BREAKPOINTSKEY == */
 
/*** Dbl-Extra-Small: ≤383.9px* Extra-Small: 384px ... 575.9px* Small: 576px ... 767.9px* Medium: 768px ... 983.9px* Large: 984px ... 1199.9px* Extra-Large: 1200px ... 1391.9px* Dbl-Extra-Large: ≥1392px**/
 
/* == DBL-EXTRA-SMALLMEDIAQUERY == */
 
 @media (max-width: 383.9px) {#headerh1a{font-size:75%;
 }div.image-showcase{width:90%;
 }div.o5-box{margin:1rem 0;
 }}
 
/* == EXTRA-SMALLMEDIAQUERY == */
 
 @media (min-width: 384px) and (max-width: 575.9px) {#headerh1a{font-size:85%;
 }div.image-showcase{width:100%;
 }div.o5-box{margin:.5rem;
 }}
 
/* == SMALLMEDIAQUERY == */
 
 @media (max-width: 767.9px) {.open-menua:hover {
 box-shadow: none;
 }.info-containerdiv.collapsible-block-contentdiv{margin-right:0;
 margin-left:0;
 }blockquote, div.blockquote,
 .alt-blockquote, .lightweight{margin:1rem 0;
 }
}
 
/* == REDUCEDMOTIONACCESSIBILITY == */
 
 @media (prefers-reduced-motion: reduce) {*, *::before, *::after{animation-duration:.001s !important;
 animation-iteration-count:1 !important;
 transition-duration:.001s !important;
 }}

[フレーム]

theme

page revision: 498, last edited: 13 May 2024 12:39

Discuss (8)

SCP Foundation

Secure, Contain, Protect

Info

Example Formatting

RAISA Notice Header

Pretty Header

From the Desk of ORACLE Header

NOTICE FROM THE CENTRAL INTELLIGENCE COORDINATION AND PROJECTS OPERATION COMMAND OFFICE

Log Header

Report Block

Report Block w/ Realistic Shadow

WARNING: NOTICE BLOCK

HEADING

SUBHEADING

ADDENDA MATERIALS

TITLE / WARNING

SUBTITLE / FOR DIVISION EYES ONLY / DOCUMENT TYPE

ITEM NUMBER / PROJECT NAME

What Is This?

Dark Mode Counterpart

How to Use

Centered Header Sigma

Flops Header

Sideboxes

1. Authorbox

(See Top Left)

2. Sidebox

Misc. Changeable Portions

Change Info Bar Properties

Change Lite-Heading Subtitle Colour

Change Card-Block & Sidebox Border-Left Colour

Change Simple Warning Header Logo

Change Advanced Warning Header Logo

Change Series Navigation Background

Hide Page Title

Hide Footnotes Footer

Source Code