Sigma Themes » SAPPHIRE Theme Redux
Rating
Rating + Info Module
Standalone Info Module
How to Use
Copy this syntax and paste it onto the top of your page:
[[include :scp-wiki:theme:saphir]]
This theme makes use of the following components and their variables:
What is this theme used for?
This theme represents the Group of Interest SAPPHIRE from the French SCP Branch.
For further information:
The Society of the Atheist Partisans of Progress for the Halt of the Irrational and Religious Enemy, better known as "SAPPHIRE" ("SAPHIR" in French, La Société Athée Pour la Halte de l'Idéologie Religieuse), is a Group of Interest most established in Western Europe, but also present in Eastern countries, Northern Africa, and the East Coast of the United States.
The oldest known actions linked to SAPPHIRE date back to 1909, although the organization remained obscure until the 1960s, when SAPPHIRE seemingly went through a major expansion. The precise cause for this is unknown.
SAPPHIRE opposes all forms of belief, religion, and superstition, which they regard as the underlying cause of the woes affecting mankind, as well as SCP objects, which they consider to be the source of the aforementioned beliefs, religions, and superstitions.
In spite of the ideal of rationality and humanism SAPPHIRE claims to adhere to, they do not hesitate to use anomalous means for terrorist purposes, committing attacks against both traditional and occult religions, the primary victims of these attacks often being civilians. Attacks can also be directed against superstitions, targeting civilian clairvoyance enthusiasts, or rival organizations (including the Foundation).
— Selection from the SAPPHIRE Hub
Created and written by DrGemini
Translated into English by Skodamz
Example Formatting

Image Block
header | header | header |
---|---|---|
cell-content | cell-content | cell-content |
L1 Heading
L2 Heading
L3 Heading
L4 Heading
L5 Heading
L6 Heading
bold | italic | underline | strikethrough | teletype | superscriptsubscript
Type 4 hyphens ---- to create a horizontal rule.
fake code selector {
fake code property: fake code value;
}
A link
A link you have probably visited
A link that does not exist
- numbered list
- list item
- list item
- bulleted list
- list item
- list item
- Tabulator
- Tabulation
- Long Tab
- This empty tab has a really long name for some odd reason. I wonder why that is?
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
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 a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a blockquote.
More text
That's a horizontal rule.
Nested blockquote
Example GOI Format

Title
By Firstname Bunchofnumbers
SECTION HEADING
The SAPPHIRE Format is known in-universe as the “Zetetic Bulletin”.1 For an example of the format in action, see:
Open the format by pasting the following div before or after the rating module:2
[[div class="sapphire-block"]]
The SAPPHIRE Format is a mock essay or dissertation. Each paragraph is indented3 and the entire format's text is justified. Both these properties are pre-baked into the theme's CSS.
Next, indicate the format's title and in-universe author's name (not your own):
++* Title
+++* By Name
Then, a section heading, which is often used several times throughout the format:
[[div class="lite-heading"]]
----
++++ SECTION HEADING
----
[[/div]]
For quoted passages:
[[div class="excerpt"]]
Text here.
[[/div]]
Example:
Ignorance more frequently begets confidence than does knowledge: it is those who know little, and not those who know much, who so positively assert that this or that problem will never be solved by science.[1]
If your article has any footnotes or bibliographic citations, place their respective blocks at the end of all inner elements. If you're unsure about how to set up a bibliography, Wikidot provides a short explanation. Any bibliography section should come after the footnotes:
~~~~
[[footnoteblock]]
Finally, close the format. Include SAPPHIRE's watchword for extra points:
----
+++* When in doubt, doubt.
[[/div]]
And you're done!
When in doubt, doubt.
The following is for a Series and is not a part of the SAPPHIRE Format:
[[div class="saphir-nav"]]
<< [[size 120%]][[[non-prophet-organization-hub|A NON-PROPHET ORGANIZATION]]][[/size]] >>
[[/div]]
Source Code
/* ==== FONTS ==== */ /** * Merriweather * * By * Sorkin Type * License * Open Font License (OFL) * Source Link * https://fonts.google.com/specimen/Merriweather/about **/ @import url(https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap); /** * Special Elite * * By * Astigmatic * License * Apache License, Version 2.0 (Apache-2.0) * Source Link * https://fonts.google.com/specimen/Special+Elite/about **/ @import url(https://fonts.googleapis.com/css2?family=Special+Elite&display=swap); /** * Tinos * * By * Steve Matteson * License * Apache License, Version 2.0 (Apache-2.0) * Source Link * https://fonts.google.com/specimen/Tinos/about **/ @import url(https://fonts.googleapis.com/css2?family=Tinos&display=swap);
/* ==== SAPPHIRE Theme Redux ==== */ /** * [2024 Wikidot Theme] * Forked by Lt Flops * Originally Created by DrGemini * * Based On * Thème de SAPHIR by DrGemini * Source Link * https://fondationscp.wikidot.com/theme:saphir **/ /* ==== HEADER AREA ==== */ /* == COMMON == */ :root { /* = SITE BANNER = */ --header-title: "SAPHIR"; --header-subtitle: "WHEN IN DOUBT, DOUBT"; --titleColor: var(--key); --subtitleColor: var(--midnight-blue); --lgurl: none; } :root { /* = OVERALL COLOUR DEFINITIONS = */ --alpha: hsl(0, 0%, 100%); --key: hsl(0, 0%, 5%); --dark-forest: hsl(0, 0%, 13%); --eggshell: hsl(66, 41%, 87%); --pale-goldenrod: hsl(66, 41%, 77%); --grey: hsl(204, 4%, 65%); --rifle-green: hsl(204, 4%, 23%); --platinum: hsl(236, 29%, 90%); --ultramarine: hsl(236, 80%, 60%); --desat-dark-blue: hsl(236, 20%, 50%); --navy-blue: hsl(236, 100%, 25%); --midnight-blue: hsl(236, 64%, 23%); --onyx: hsl(238, 49%, 10%); --patriarch: hsl(296, 100%, 25%); /* = SAPHIR NAV COLOUR DEFINITIONS = */ --mid-jungle-green: hsl(206, 49%, 14%); --carolina-blue: hsl(236, 65%, 80%); } :root { /* = FONTS = */ --body-font: "Merriweather", serif; --sub-font: "Special Elite", system-ui; --euphoric-font: "Tinos", serif; } body { font-family: var(--body-font); } #content-wrap { padding-top: 5.8rem; } /* == SITE BANNER == */ div#container-wrap { background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Asaphir/saphir-header.png) top left repeat-x; } #header :is(h1 a, h2)::before { text-shadow: -2px -2px var(--alpha), 0 -2px var(--alpha), 2px -2px var(--alpha), 2px 0 var(--alpha), 2px 2px var(--alpha), 0 2px var(--alpha), -2px 2px var(--alpha), -2px 0 var(--alpha); } #header h1 a::before { top: 2rem; font-family: var(--body-font); font-weight: 900; } #header h2::before { top: 3rem; font-family: var(--sub-font); font-size: 20pt; } #page-title, .meta-title { color: var(--midnight-blue); font-family: var(--sub-font); font-weight: 700; } /* == SEARCH == */ #search-top-box-input, #search-top-box-form input[type="submit"] { color: var(--dark-forest); background-color: var(--eggshell); border-color: var(--dark-forest); } #search-top-box-input:is(:hover, :focus), #search-top-box-form input[type="submit"]:is(:hover, :focus) { color: var(--key); background-color: var(--pale-goldenrod); border-color: var(--key); } /* == TOP MENU == */ #top-bar { top: 14.55rem; } #top-bar ul li:is(.sfhover, :hover) a { color: var(--navy-blue); } /* == LOGIN == */ #login-status, #login-status a { color: var(--key); } #login-status { padding: 2px 5px; font-family: var(--sub-font); background: var(--eggshell); border: thin solid var(--key); } #login-status ul a { color: var(--navy-blue); } #account-topbutton { padding: 0; border: 0; } #account-options { margin-top: 2px; background: var(--eggshell); border-color: var(--key); } #account-options li a:hover { background: var(--pale-goldenrod); } /* == SIDE MENU == */ #top-bar .open-menu a { color: var(--midnight-blue); background: var(--eggshell); border-color: var(--key); } /* ==== CONTENT AREA ==== */ /* == INFO BAR == */ .info-container { --barColour: var(--rifle-green); } /* == PAGE RATING == */ .page-rate-widget-box { display: flex; width: max-content; margin: auto; } div.page-rate-widget-box .rate-points { background: var(--rifle-green); border-color: var(--rifle-green); } .page-rate-widget-box :is(.rateup, .ratedown) { border-top-color: var(--rifle-green); border-bottom-color: var(--rifle-green); } .page-rate-widget-box .cancel { background: var(--rifle-green); border-color: var(--rifle-green); } .page-rate-widget-box :is(.rateup, .ratedown) a { color: var(--rifle-green); } .page-rate-widget-box .cancel a { color: var(--grey); } .page-rate-widget-box :is(.rateup, .ratedown, .cancel) a:hover { color: var(--alpha); background: var(--rifle-green); } /* == INFO MODULE == */ #page-content .creditRate { float: none; display: flex; align-items: center; width: max-content; margin: auto !important; } #page-content .rate-box-with-credit-button { background: var(--rifle-green); border-color: var(--rifle-green); } #page-content .creditRate .page-rate-widget-box { display: inline; } .creditButton p a { margin-left: -2px; border-left-color: var(--grey); } .creditButtonStandalone p a { background: var(--rifle-green); border: thin solid var(--rifle-green); border-radius: 0; box-shadow: none; } .creditButtonStandalone p a:hover { background: var(--rifle-green); text-decoration: none; } /* == FORMATTING | [GENERAL] == */ #page-content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--body-font); } h1 { color: var(--midnight-blue); } #page-content h1 { font-style: italic; } a, #side-bar a { color: var(--navy-blue); } a:visited { color: var(--patriarch); } ul { list-style-type: "⬥ "; } /* == FORMATTING | [SPECIAL] == */ .footing, .footing::before { border-bottom-color: var(--rifle-green); } /* == SAPPHIRE GOI FORMAT == */ .sapphire-block { margin: 1rem 0; padding: 1rem 1rem .5rem; color: var(--dark-forest); background: var(--carolina-blue); border: thick solid var(--onyx); font-family: var(--euphoric-font); font-size: 14pt; text-align: justify; word-break: unset; } .sapphire-block p:not(:first-of-type) { text-indent: 2rem; } .sapphire-block a { text-indent: 0; } .sapphire-block :is(h1, h2, h3, h4, h5, h6) { color: var(--midnight-blue); } .sapphire-block h2 { font-size: 150%; font-weight: bold; } .sapphire-block h3 { font-size: 130%; } .sapphire-block h4 { font-size: 120%; } .sapphire-block hr { border-color: var(--onyx); border-width: medium; } .sapphire-block h3:last-of-type { font-style: italic; } .sapphire-block .lite-heading h4 { color: var(--midnight-blue); } .sapphire-block .excerpt { margin: 1rem 2rem; padding: 0 1rem; background-color: var(--platinum); border: thin solid var(--onyx); } /* == SAPPHIRE RATING ALTERATION == */ .sapphire-block :is(div.page-rate-widget-box .rate-points) { background: var(--midnight-blue); border-color: var(--midnight-blue); } .sapphire-block .page-rate-widget-box :is(.rateup, .ratedown) { border-top-color: var(--midnight-blue); border-bottom-color: var(--midnight-blue); } .sapphire-block .page-rate-widget-box .cancel { background: var(--midnight-blue); border-color: var(--midnight-blue); } .sapphire-block .page-rate-widget-box :is(.rateup, .ratedown) a { color: var(--midnight-blue); } .sapphire-block .page-rate-widget-box .cancel a { color: var(--desat-dark-blue); } .sapphire-block .page-rate-widget-box :is(.rateup, .ratedown, .cancel) a:hover { color: var(--alpha); background: var(--midnight-blue); } /* == SAPPHIRE INFO MODULE ALTERATION == */ .sapphire-block .rate-box-with-credit-button .creditButton { background: var(--midnight-blue); } .sapphire-block .creditButtonStandalone p a { background: var(--midnight-blue); border-color: var(--midnight-blue); } .sapphire-block .creditButtonStandalone p a:hover { background: var(--midnight-blue); } /* == NAVIGATION == */ .saphir-showcase, .saphir-nav { color: var(--key); background: var(--carolina-blue); border: thin solid var(--mid-jungle-green); border-radius: .6rem; box-shadow: inset 0 -5px 0 hsla(0, 0%, 0%, .2), inset 0 1px hsla(0, 100%, 100%, .3), inset 0 5px hsla(0, 100%, 100%, .2), inset 0 5px 10px hsla(0, 100%, 100%, .25), inset 0 -7.5px 15px hsla(0, 0%, 0%, .1); text-shadow: 1px 1px 2px hsla(0, 0%, 0%, .35); } .saphir-showcase { margin-bottom: 1.6rem; padding: 1.6rem; } .saphir-nav { margin: 1rem 0; padding: 0 .8rem .4rem; font-weight: bold; font-size: 85%; text-align: center; } .saphir-showcase :is(h3, h4) { color: var(--midnight-blue); } .hub-entry table { line-height: 1.5; } .hub-entry table :is(td, th) { padding: .4rem; border: thin solid var(--desat-dark-blue); } .hub-entry table th { color: var(--alpha); background: var(--desat-dark-blue); } .hub-entry table th:nth-child(2) { width: 30%; } /* ==== YUI TABS ==== */ /* == YUI TAB CUSTOMIZATION == */ :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav { border-color: var(--rifle-green); } :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav a { /* = Tab Background Colour | [UNSELECTED] = */ background: var(--grey); /* == */ } .yui-navset .yui-nav li { background: var(--rifle-green); } .yui-navset .yui-nav .selected { /* = Tab Background Colour | [SELECTED] = */ background: var(--rifle-green); /* == */ } .yui-navset .yui-nav .selected a { background: var(--rifle-green); } .yui-navset .yui-nav a:is(:hover, :focus) { /* = Tab Background Colour | [HOVER] = */ background: var(--ultramarine); /* == */ } .yui-navset .yui-nav .selected a:is(:hover, :active, :focus) { background: var(--rifle-green); } /* ==== BREAKPOINTS ==== */ /* == BREAKPOINTS KEY == */ /** * 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-SMALL MEDIA QUERY == */ @media (max-width: 383.9px) { .sapphire-block .excerpt { margin: 1rem 0; } } /* == EXTRA-SMALL MEDIA QUERY == */ @media (min-width: 384px) and (max-width: 575.9px) { .sapphire-block .excerpt { margin: .5rem; } } /* == SMALL MEDIA QUERY == */ @media (max-width: 767.9px) { #search-top-box { margin-top: 7px; } #login-status { margin-top: 4px; } #account-options { right: -1px; } } /* == MEDIUM MEDIA QUERY == */ @media (min-width: 768px) and (max-width: 983.9px) { #login-status { margin-left: 1.2rem; } } @media (min-width: 768px) { #account-options { left: 6px; } }
The HEADER and BODY font is Merriweather.
The SPECIAL font is Special Elite.
The GOI FORMAT font is Tinos.
Cite this page as:
"SAPPHIRE Theme Redux" by Lt Flops, from the SCP Wiki. Source: https://scpwiki.com/theme:saphir. Licensed under CC-BY-SA.
For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.
Filename(s): saphir-header.png, sapphire-logo.png
Name(s): SAPHIR Header, SAPHIR Logo
Author: DrGemini
License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
This presentation page contains an excerpt from The Descent of Man, and Selection in Relation to Sex (1874) by Charles Darwin (Public Domain).
Rating:
Rating w/ Info Pane:
-
Info
Thank you to
stormbreath for his help, and
Croquembouche for looking this over.
Select CSS styles are based on the SCP Style Resource (attributed where necessary).
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]]

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]]

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
_
or
|
[[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

[[div class="image-showcase block-center"]]
[[=image URL_HERE]]
[[/div]]
Fancy Scene/Section Break

[[=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:
[[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. 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+.
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
- Fade In (set at speed=1) by
Croquembouche
- Toggle Sidebar by
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
[[include :scp-wiki:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]
Sideboxes
Adapted from Penumbra Theme by 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 ==== */ /** * Architects Daughter * * By * Kimberly Geswein * License * Open Font License (OFL) * Source Link * https://fonts.google.com/specimen/Architects+Daughter/about **/ @import url(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap); /** * Montserrat * * By * Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly * License * Open Font License (OFL) * Source Link * https://fonts.google.com/specimen/Montserrat/about **/ @import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
/* ==== Flopstyle: LITE ==== */ /** * [2020 Wikidot Theme] * Created by Lt Flops * Select CSS Styles Are Credited Where Necessary **/ /* ==== HEADER AREA ==== */ /* == COMMON == */ :root { /* = COLOUR SCHEME = */ --alpha: hsl(0, 0%, 100%); --key: hsl(0, 0%, 5%); --accentColor: hsl(0, 100%, 30%); --vivid-lime-green: hsl(112, 77%, 48%); } :root { /* = YUI TAB COLOUR SCHEME = */ --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; } /* == SITE BANNER == */ #header h1 a, #header h1 a::before { color: hsl(0, 0%, 93%); font-family: var(--header-font); font-weight: 800; text-shadow: none; } #header h2 span, #header h2 span::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-form input[type="submit"] { background: hsl(0, 0%, 20%); border-color: hsl(0, 0%, 60%); border-radius: 0; } #search-top-box-form input[type="submit"] { font-size: unset; } #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type="submit"]:hover, #search-top-box-form input[type="submit"]:focus { background: hsl(0, 0%, 30%); border-color: hsl(0, 0%, 70%); } /* == TOP MENU == */ #top-bar ul li ul { top: 22px; } /* == SIDE MENU == */ #top-bar .open-menu a { border-radius: unset; } #side-bar .side-block { border-color: hsl(0, 0%, 20%); border-radius: 0; } #side-bar .heading { color: var(--key); border-bottom: 1px solid 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: 1px solid hsl(0, 0%, 20%); } #interwiki body { overflow: hidden; } #interwiki .side-block { padding: 5px; background: 0; border: 0; box-shadow: none; } #interwiki .heading { color: var(--key); border-bottom: 1px solid hsl(0, 0%, 20%); } #interwiki .menu-item img { display: none; } /* ==== CONTENT AREA ==== */ /* == SIDEBOXES == */ /** * Adapted From * Penumbra Theme by EstrellaYoshte **/ .limit { line-height: 1.5; z-index: 5; } .limit br { 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: 1px solid hsl(0, 0%, 73%); border-left: 8px solid var(--accentColor); } .authorbox tr :is(th, td), .sidebox tr :is(th, td) { padding: .2rem !important; } .flavorbox { width: 75%; margin: auto auto 5px; padding: 0 1rem; border: 1px solid #888; } /* == SIDEBOX MOBILE CUSTOMIZATION == */ /** * Courtesy Of * 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: 1px solid hsl(0, 0%, 73%); border-left: 8px solid 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 solid transparent; border-right: .75rem solid var(--accentColor); border-bottom: .75rem solid transparent; 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 0 0); clip-path: inset(-.125rem -.25rem 0 0); -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: 0 solid transparent; border-bottom: 0 solid transparent; } .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 { /* = For Collapsibles Inside Divs = */ 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; } /* == INFO BAR == */ .info-container { --barColour: hsl(0, 89%, 18%); } .info-container .collapsible-block-link { font-size: 100%; } .info-container div.collapsible-block-content { padding: 0 .6rem 3rem; } .info-container .wiki-content-table { width: 90%; } /* == PAGE RATING == */ .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 .cancel a:hover { border-radius: 0 !important; } /* == INFO MODULE == */ .creditRate { margin-right: 0 !important; } .rate-box-with-credit-button { border-radius: 0 !important; box-shadow: none !important; } :is(.creditButton, .creditButtonStandalone) p a: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-content h2 { font-weight: bold; } #page-content a { padding-bottom: 1px; border-bottom: thin solid; } #page-content :is(.disruptionHeader, .footnoteref, .bibcite), #page-content :is(.rateup a, .ratedown a, .cancel a, .yui-nav a) { /* = Avoid Special Links = */ border: 0; } #page-content :is(.creditButton, .creditButtonStandalone) p a { /* = Avoid Special Links = */ border-bottom: 0; } #page-content a:hover { border-bottom-width: 2px; text-decoration: none; } #page-content .footnoteref a:hover { text-decoration: underline; } #main-content :is(#breadcrumbs, #page-options-container) a:hover, :is(#footer, #license-area) a:hover { padding-bottom: 1px; border-bottom: thin solid; text-decoration: none; } hr { height: 0; margin: 1rem 0; background: 0; border-top: 1px solid hsl(0, 0%, 67%); } ol li { margin: 0 0 1rem; } ul { margin: 1rem 0; } li, p { text-underline-offset: 30%; } #toc { line-height: 1.5; } .footnotes-footer, .bibitems { padding: 0 0 .5rem; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus, #top-bar ul li ul, #side-bar .side-block, .page-rate-widget-box, .scp-image-block { box-shadow: none; } /* == IMAGE BLOCK == */ .scp-image-block .scp-image-caption { font-size: 95%; line-height: 1.35; text-underline-offset: 30%; } .scp-image-block.block-right { margin: 0 0 1rem 2rem; } /* == CUSTOM DIV BLOCKS == */ .raisa-header, .pink-header, .oracle-header, .cicapoco-header { margin-bottom: 1rem; padding: 0 .5rem; border: 1px solid; text-align: center; } .raisa-header { /* = RAISA Notice Header = */ background: hsl(60, 65%, 85%); border-color: hsl(0, 0%, 60%); } .pink-header { /* = Pretty Header = */ background: hsl(350, 100%, 85%); border-color: hsl(0, 4%, 36%); } .pink-header hr { border-color: hsl(0, 4%, 36%); } .oracle-header { /* = SPC From the Desk of ORACLE Header = */ color: hsl(208, 100%, 97%); background: hsl(208, 67%, 44%); border-color: var(--key); } .oracle-header hr { border-color: hsl(208, 100%, 97%); } .img-resize img { /* = Header Icons = */ float: left; width: auto; height: 8rem; margin: .5rem; } .cicapoco-header { /* = SPC's RAISA-Equivalent Header = */ background: lightblue; border-color: hsl(195, 50%, 39%); } .cicapoco-header hr { border-color: hsl(195, 50%, 39%); } .content-warning { /* = Content Warning = */ width: 75%; margin: 1rem auto; padding: 0 1rem; background: var(--alpha); border: 3px double var(--key); text-align: center; } blockquote, div.blockquote, .alt-blockquote, .lightweight { margin: 1rem 3rem; padding: 0 1rem; } blockquote, div.blockquote { /* = Regular Quote Block = */ background: hsl(0, 0%, 96%); border: 3px double hsl(0, 0%, 60%); } :is(blockquote, div.blockquote) table.wiki-content-table th { background: hsl(0, 0%, 89%); } .alt-blockquote { /* = Alternative Quote Block = */ background: hsl(0, 0%, 96%); border: 1px solid hsl(0, 0%, 60%); border-radius: 1rem; } .lightweight { /* = Lightweight Quote Block = */ background: hsl(0, 0%, 90%); } .card-block { /* = Decorative Quote Block = */ margin: 1rem 0; padding: .6rem 1.2rem; background: hsl(220, 15%, 93%); border-left: 8px solid var(--accentColor); border-radius: .5rem; } blockquote hr, div.blockquote hr, .alt-blockquote hr, .lightweight hr, .card-block hr { border-color: hsl(0, 0%, 67%); } .log-header { /* = Interview/Exploration Log Header = */ margin-bottom: 1rem; padding: 0 1rem; background: hsl(0, 0%, 96%); border: 3px dashed hsl(0, 0%, 60%); border-radius: 2rem; } .report-box { /* = Report Block = */ margin: 1rem 0; padding: 0 1rem; background: var(--alpha); border: medium solid var(--key); } .report-box hr { border-color: var(--key); } .realistic-shadow { /* = Better Shadows = */ margin: 1rem 0 2rem; box-shadow: 0 1px 1px hsla(0, 0%, 0%, .23), 0 2px 2px hsla(0, 0%, 0%, .18), 0 4px 4px hsla(0, 0%, 0%, .15), 0 8px 8px hsla(0, 0%, 0%, .13); } .report-box.red-tint { /* = Alternative Report Block Variants = */ background: hsl(360, 91%, 86%); border-color: hsl(360, 62%, 66%); } .report-box.red-tint hr { border-color: hsl(360, 62%, 66%); } .report-box.orange-tint { background: hsl(30, 91%, 86%); border-color: hsl(30, 62%, 66%); } .report-box.orange-tint hr { border-color: hsl(30, 62%, 66%); } .report-box.yellow-tint { background: hsl(60, 91%, 86%); border-color: hsl(60, 62%, 66%); } .report-box.yellow-tint hr { border-color: hsl(60, 62%, 66%); } .report-box.green-tint { background: hsl(120, 91%, 86%); border-color: hsl(120, 62%, 66%); } .report-box.green-tint hr { border-color: hsl(120, 62%, 66%); } .report-box.cyan-tint { background: hsl(180, 91%, 86%); border-color: hsl(180, 62%, 66%); } .report-box.cyan-tint hr { border-color: hsl(180, 62%, 66%); } .report-box.blue-tint { background: hsl(240, 91%, 86%); border-color: hsl(240, 62%, 66%); } .report-box.blue-tint hr { border-color: hsl(240, 62%, 66%); } .report-box.magenta-tint { background: hsl(300, 91%, 86%); border-color: hsl(300, 62%, 66%); } .report-box.magenta-tint hr { border-color: hsl(300, 62%, 66%); } .report-box.grey-tint { background: hsl(210, 9%, 86%); border-color: hsl(210, 15%, 42%); } .report-box.grey-tint hr { 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) blockquote hr, .report-box:is(.red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint) div.blockquote hr { border-color: hsl(0, 0%, 67%); } div.o5-box { /* = Overseer Document Block = */ margin: 1rem 6rem; padding: 0 1rem; background: hsl(0, 0%, 75%); border: medium solid var(--key); } div.o5-box hr { border-color: var(--key); } .faux-source { /* = Mimics Page Source = */ margin-bottom: 1rem; padding: 0 2rem; background: var(--alpha); border: 1px dashed hsl(0, 0%, 67%); font-family: var(--mono-font); } .narration { /* = Mimics the Pages of a Book = */ margin: 1rem 0; padding: 0 1rem; background: var(--alpha); border: 1px solid hsl(0, 0%, 63%); } .warning-notice { /* = Simple Warning Block (Adapted From SCP-3143) = */ padding: 0 1rem; 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: medium solid var(--key); text-align: center; } .warning-notice hr { border-color: var(--key); } .journal { /* = Journal Block (Adapted From SCP-4003) = */ margin: 1rem 0; padding: .9rem; background-image: linear-gradient(to top, hsl(201, 33%, 84%) 0%, hsl(60, 29%, 89%) 8%); background-position: 0 8px; background-size: 100% 1.3rem; border: 1px solid hsl(0, 0%, 80%); border-radius: .9rem; font-family: var(--script-font); } .journal p { margin: 0; font-size: 1.3rem; line-height: 1.3rem; } .sms-message { /* = SMS Message Block = */ float: left; clear: left; width: 22.4rem; margin: 0 0 1rem; padding: 0 1.2rem; background: hsl(0, 0%, 75%); border-radius: 2rem; font-size: 112.5%; text-align: center; } /* == FORMATTING | [SPECIAL] == */ .centered { /* = Center-Aligns Text = */ text-align: center; } .justified { /* = Justify-Aligns Text = */ text-align: justify; } .indented { /* = Indents Block by ⅜-inch (Use Within Other Divs) = */ 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 { /* = Red Document Revision Text = */ color: var(--liteAccent); } .rev-green { /* = Green Document Revision Text = */ color: hsl(120, 100%, 27%); } .rev-blue { /* = Blue Document Revision Text = */ color: hsl(240, 100%, 27%); } .rev-yellow { /* = Yellow Document Revision Text = */ color: hsl(40, 100%, 40%); } .terminal-span { /* = Computer Terminal Text = */ font-family: var(--mono-font); font-size: 110%; letter-spacing: .3px; } /* == Blinking Text Cursor == */ /** * Adapted From * Your Very First SCP! by The Great Hippo **/ .blinkbar{color: var(--key); animation: blink 1.5s infinite;} @keyframes blink{to{opacity:.0}} @keyframes flicker{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}} @keyframes overlay-anim{0%{visibility:hidden}10%{visibility:hidden}11%{visibility:visible}50%{visibility:hidden}100%{visibility:hidden}} .lite-heading { /* = Special Heading Area (Adapted From SCP-4058) = */ clear: both; margin: 3.6rem auto; } .lite-heading h3 { color: var(--liteAccent); } .lite-heading hr { width: 55%; margin: auto; border-width: medium; } div.image-showcase { /* = Alternative Image Showcase = */ width: 25rem; margin-bottom: 1rem; background: var(--alpha); border: 3px ridge var(--key); } div.image-showcase.block-center { margin-right: auto; margin-left: auto; } .scene-break { /* = Fancy Scene/Section Break = */ width: 3.6rem; margin: 2rem 0; } .listPagesNav { margin-bottom: 5rem; } .listPagesNav-prev, .listPagesNav-next { /* = ListPages Navigation (Adapted from SCP-5552) = */ width: 45%; margin: 0 0 1rem; padding: 0 2%; background: hsl(0, 0%, 90%); border: 1px solid 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 { /* = Page Footing = */ content: " "; position: absolute; right: 0; bottom: 1px; left: 0; border-bottom: 2px solid hsl(0, 0%, 47%); } .footing { position: relative; bottom: -2px; margin-bottom: 2px; border-bottom: 1px solid hsl(0, 0%, 47%); } .related-flex { /* = Related Articles Box = */ display: flex; justify-content: center; } .related { margin: 1rem 0; padding: 0 1rem; background: var(--alpha); border: thick solid hsla(0, 0%, 60%, .5); text-align: left; } .series-nav { /* = Series Navigation = */ margin: .5rem 0; background: linear-gradient(to bottom right, hsla(0, 0%, 100%, 1), hsla(0, 0%, 50%, .5)); border: outset 1.5px var(--key); border-radius: 2rem; font-size: 85%; font-weight: bold; text-align: center; } /* == ADVANCED WARNING HEADER == */ /** * Adapted From * SCP-001-JP - indonootoko's Proposal by indonootoko **/ .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: 295px 295px; } .ordertitle { position: absolute; top: 27px; right: 0; left: 0; } .ordertitle h1 { color: var(--key); font-size: 220%; line-height: 90%; } .orderdescription { position: absolute; top: 93px; right: 0; left: 0; width: 100%; } .orderdescription h1 { color: var(--key); font-size: 120%; } .orderdescription p { color: var(--key); font-size: 90%; } .itemno { position: absolute; right: 0; bottom: 18px; left: 0; } .itemno h1 { color: var(--key); font-size: 170%; } /* ==== YUI TABS ==== */ /* == YUI TAB BASE == */ @import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css); /* == YUI TAB CUSTOMIZATION == */ /** * Adapted From * Black Highlighter Theme by Woedenaz **/ .yui-navset * { transition: color 80ms cubic-bezier(.4, 0, .2, 1), background 80ms 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-nav a { /* = Link Modifier = */ color: var(--key); /* = Tab Background Colour | [UNSELECTED] = */ background: var(--alfaAccent); /* == */ } :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav li { /* = Listitem Modifier = */ 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-nav li a { width: 100%; border: 0; } :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav .selected { /* = Selection Modifier = */ flex-grow: 2; margin: 0; padding: 0; color: var(--alpha); /* = Tab Background Colour | [SELECTED] = */ background: var(--darkAccent); /* == */ } .yui-navset .yui-nav li em { border: 0; } .yui-navset :is(.yui-nav, .yui-nav .selected, .yui-navset-top .yui-nav) a em { 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 .selected a { color: var(--alpha); background: var(--darkAccent); } .yui-navset .yui-nav a:is(:hover, :focus) { color: var(--alpha); /* = Tab Background Colour | [HOVER] = */ background: var(--liteAccent); /* == */ } .yui-navset .yui-nav .selected :is(a, a em) { border: 0; } .yui-navset .yui-nav .selected a:is(:hover, :active, :focus) { background: var(--darkAccent); cursor: default; } /* == WIKIWALK NAVIGATOR == */ .footer-wikiwalk-nav { text-align: center; } /* == BETTERFOOTNOTES PATCH == */ :root { --posX: calc(50% - 358px - 13rem) !important; --fnLinger: 1.5s !important; } .fnnum { font-size: 90%; } .fnnum:hover + .fncon { right: calc(-8vw - 4rem) !important; } /* == CROQSTYLE PATCH == */ #edit-page-textarea { font-family: unset; } tt { margin: unset; padding: unset; background: unset; border-radius: unset; font-size: unset; } /* == FLOPS HEADER PATCH == */ #page-content .disruptionHeader { padding-bottom: .4em; } /* == PAGE TAGS == */ #main-content .page-tags { border-top: 1px solid hsl(0, 0%, 73%); } #main-content .page-tags a { display: inline-block; height: .8125rem; margin: 0 0 .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-tags a::before { width: 0; height: 0; top: -.1875rem; left: -.625rem; padding: 0 .0625rem .1875rem; border-color: transparent hsl(0, 0%, 27%) transparent transparent; border-style: solid; border-width: .5rem .5rem .5rem 0; } #main-content .page-tags a::before, #main-content .page-tags a::after { content: ""; position: relative; float: left; } #main-content .page-tags a::after { top: .2813rem; left: -.5rem; width: .25rem; height: .25rem; background: var(--alpha); border-radius: .125rem; } #main-content .page-tags span { max-width: 100%; border-top: .5rem solid transparent; } /* == SHOW-CHANGES HIGHLIGHTS == */ .inline-diff ins::before { color: hsl(240, 100%, 93%); } .inline-diff del::before { color: hsl(0, 100%, 90%); } .inline-diff ins + del::before, .inline-diff del + ins::before { color: transparent; } .inline-diff br + ins::before, .inline-diff br + del::before, .inline-diff ins:first-of-type::before, .inline-diff del:first-of-type::before { content: "\f111"; position: absolute; left: -1rem; display: inline-block; font: normal normal normal 16px/1 "FontAwesome"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; } /* ==== BREAKPOINTS ==== */ /* == BREAKPOINTS KEY == */ /** * 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-SMALL MEDIA QUERY == */ @media (max-width: 383.9px) { #header h1 a { font-size: 75%; } div.image-showcase { width: 90%; } div.o5-box { margin: 1rem 0; } } /* == EXTRA-SMALL MEDIA QUERY == */ @media (min-width: 384px) and (max-width: 575.9px) { #header h1 a { font-size: 85%; } div.image-showcase { width: 100%; } div.o5-box { margin: .5rem; } } /* == SMALL MEDIA QUERY == */ @media (max-width: 767.9px) { .open-menu a:hover { box-shadow: none; } .info-container div.collapsible-block-content div { margin-right: 0; margin-left: 0; } blockquote, div.blockquote, .alt-blockquote, .lightweight { margin: 1rem 0; } } /* == REDUCED MOTION ACCESSIBILITY == */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /* Centered Header Sigma * [2021 Wikidot Component] * By Lt Flops (CC BY-SA 3.0) * Forked from: * Penumbra Theme by EstrellaYoshte * Also based on: * Centered Header BHL by Woedenaz **/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/lgbtqp_logo.svg); } /* ---- SITE BANNER ---- */ #header, div#header{ background-image: none; } #header::before{ position: absolute; width: 100%; height: 100%; content: ""; background-image: var(--lgurl); background-position: center top; background-repeat: no-repeat; background-size: auto 9em; opacity: .33; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } #header h1 span, #header h2 span{ /* Hide the Existing Text */ display: none; } #header h1 a::before, #header h2::before{ /* Style the New Text */ font-family: "Montserrat", "Arial", sans-serif; text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--titleColor); font-size: 115%; font-weight: 700; } #header h2::before{ position: relative; top: .1em; color: var(--subtitleColor); font-size: 130%; font-weight: 600; } #header h1 a::before{ /* Set the New Text's Content From Variable */ content: var(--header-title, "SCP FOUNDATION"); } #header h2::before{ content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT"); } /* ---- SEARCH ---- */ #search-top-box{ top: 1em; right: 0; } #search-top-box-form input.button{ margin-right: 0; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ border-radius: 0; box-shadow: none; font-size: 100%; } /* ---- TOP BAR ---- */ #top-bar{ right: 0; display: flex; justify-content: center; } #top-bar ul li ul{ border-bottom: 1px solid hsl(0, 0%, 40%); box-shadow: none; } /* ---- LOGIN ---- */ #login-status{ top: 1.1em; right: initial; color: hsl(0, 0%, 87%); } #account-topbutton{ border-color: hsl(0, 0%, 87%); font-size: 100%; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title{ text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{ text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px){ #search-top-box{ top: 1.85em; width: unset; } .mobile-top-bar{ position: relative; left: 0; display: flex; justify-content: center; } #login-status{ top: 0; right: 0; } #header .printuser{ font-size: 0; } #header .printuser img.small{ margin: 0; transform: translate(6px, 4px); } #my-account{ display: none; } #account-topbutton{ margin-left: 2px; } }