SAPPHIRE Theme

Link to article: SAPPHIRE Theme.

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Asapphire/1);

/* ---- PRESENTATION ---- */
.templateInfo {
    margin: 1em 0;
    padding: 1em 1em 0;
    background: hsl(0,0%,100%);
    border: 1px solid hsl(0,0%,87%);
}

```
margin-right: 2em;
```
```
margin-right: 2em;
```

```
templateInfo
```
```
templateInfo
```
```
code
```
```
templateInfo
```
```
code
```
```
templateInfo
```
```
sapphire-block
```
```
sapphire-heading-2
```
```
sapphire-heading-3
```
```
sapphire-lite-hr
```
```
sapphire-heading-4
```
```
sapphire-lite-hr
```
```
code
```
```
sapphire-block
```
```
code
```
```
sapphire-heading-2
```
```
sapphire-heading-3
```
```
code
```
```
sapphire-hr
```
```
sapphire-heading-4
```
```
sapphire-hr
```
```
code
```
```
sapphire-excerpt
```
```
sapphire-excerpt
```
```
code
```
```
sapphire-heading-3
```
```
templateInfo
```

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Asapphire/1);
[[/module]]

[[include :scp-wiki:component:interwiki-style
|priority=1
|theme=https://scp-wiki.wdfiles.com/local--code/theme%3Asapphire/1
]]

[[iftags +theme]]
[[module CSS]]
/* ---- PRESENTATION ---- */
.templateInfo {
    margin: 1em 0;
    padding: 1em 1em 0;
    background: hsl(0,0%,100%);
    border: 1px solid hsl(0,0%,87%);
}
[[/module]]

[[>]]
[[span style="margin-right: 2em;"]]**Rating:**[[/span]]
[[module Rate]]
[[span style="margin-right: 2em;"]]**Rating w/ Info Pane:**[[/span]]
[[include :scp-wiki:info:start]]
[[<]]
**SAPPHIRE Theme**
**Author:** [[*user Lt Flops]]
**Published on 19 Jun 2019**

Thank you to [[*user Uncle Nicolini]] and [[*user stormbreath]] for their help.
[[/<]]
[[include :scp-wiki:info:end]]
[[/>]]

[[div class="templateInfo"]]
[[=]]
+* What Is This?
[[/=]]
----
This is a theme for the French GOI "SAPPHIRE".
[[/div]]

[[div class="templateInfo"]]
[[=]]
+* How to Use
[[/=]]
----
To use this theme, please copy this syntax onto the top of your page:

[[div class="code"]]
@@[[include :scp-wiki:theme:sapphire]]@@
[[/div]]

**What is this theme used for?**

This theme exists to represent one interpretation of the Group of Interest "SAPPHIRE" from the **[[[https://fondationscp.wikidot.com/|French SCP Branch]]]**. For more information:

> **The Society of the Atheist Partisans of Progress for the Halt of the Irrational and Religious Enemy**, better known as "**SAPPHIRE**", is a Group of Interest mostly established in all of Western Europe, but also present in Eastern countries, Northern Africa, as well as the East Coast of the United States.
> 
> The oldest known actions linked to SAPPHIRE date back to 1909, although the organization stayed very vague until the 1960s, when SAPPHIRE seemingly went through a major expansion. The precise cause for this is unknown.
> 
> SAPPHIRE advocates to fight any form of belief, religion and superstition that they believe is the underlying cause of the woes affecting mankind, as well as SCP objects that 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 and commit attacks against both traditional and occult religions, the primary victims of the attack often being civilians. Those attacks can also be directed against superstitions, as they target clairvoyance enthusiast civilians, or rival organizations including the Foundation.
> ----
> [[>]]
> --Selection from the **[[[saphir-centre|SAPPHIRE Hub]]]**
> //Created and written by// [[*user DrGemini]]
> //Translated into English by// [[*user Skodamz]]
> [[/>]]

This theme is suitable for use in SAPPHIRE's GOI Format, Tales, and other pages.
[[/div]]

[[div class="templateInfo"]]
[[=]]
+* Example Formatting
[[/=]]
[[/div]]

[[include component:image-block
|width=200px
|name=sapphire-header.png
|caption=Image Block]]

+ L1 Heading

++ L2 Heading

+++ L3 Heading

++++ L4 Heading

+++++ L5 Heading

++++++ L6 Heading

**bold** | //italic// | __underline__ | --strikethrough-- | {{teletype}} | ^^superscript^^,,subscript,,

Type 4 hyphens ("@@----@@") to create a horizontal rule.

----

> Block Quote
>> Nested Block Quote

||~ header ||~ header ||~ header ||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content || cell-content || cell-content || cell-content ||

[[toc]]

[[div class="code"]]
@@fake code selector{@@
@@  fake code property: fake code value;@@
@@}@@
[[/div]]

[[[main|A link]]] ([https://google.com A link you probably visited])

[[collapsible show="+ A collapsible" hide="- A collapsible"]]
Something inside the collapsible
[[/collapsible]]

# numbered list
# list item
# list item

* bulleted list
* list item
* list item

[[tabview]]
[[tab First Tab]]
Tab content
[[/tab]]
[[tab Second Tab]]
Tab content
[[/tab]]
[[tab Third Tab]]
Tab content
[[/tab]]
[[tab Fourth Tab]]
Tab content
[[/tab]]
[[tab Fifth Tab]]
Tab content
[[/tab]]
[[/tabview]]

[[div class="templateInfo"]]
[[=]]
+* Example GOI Format
[[/=]]
[[/div]]

[[div class="sapphire-block"]]

[[=image https://scp-wiki.wdfiles.com/local--files/theme%3Asapphire/sapphire-logo.png width="400px"]]

= [[span class="sapphire-heading-2"]]Placeholder[[/span]]
= [[span class="sapphire-heading-3"]]By Person Name[[/span]]

@@ @@
[[div class="sapphire-lite-hr"]]
----
[[/div]]
= [[span class="sapphire-heading-4"]]SECTION HEADING[[/span]]
[[div class="sapphire-lite-hr"]]
----
[[/div]]
@@ @@

The SAPPHIRE Format is known in-universe as the "Zetetic Bulletin". For an example of the format in action, see: **[[[https://scp-wiki.wikidot.com/zetetic-bulletin-wu-xing-iris|The Myth of the Wu Xing Iris]]]** by **[[*user Uncle Nicolini]]**.

Format background and border:

[[div class="code"]]
@@[[div class="sapphire-block"]]@@
[[/div]]

SAPPHIRE Formats are mock essays or dissertations. Each new paragraph is indented, and the entire format's text alignment property is **justified**, which is pre-baked into the theme's code. The font properties are also baked in.

Next, the format title and in-universe author name:

[[div class="code"]]
@@= [[span class="sapphire-heading-2"]]Placeholder[[/span]]@@
@@= [[span class="sapphire-heading-3"]]By Person Name[[/span]]@@
[[/div]]

And the section header, which is used several times throughout the format:

[[div class="code"]]
@@[[div class="sapphire-hr"]]@@
@@----@@
@@[[/div]]@@
@@= [[span class="sapphire-heading-4"]]SECTION HEADING[[/span]]@@
@@[[div class="sapphire-hr"]]@@
@@----@@
@@[[/div]]@@
[[/div]]

For quoted text passages:

[[div class="code"]]
@@[[div class="sapphire-excerpt"]]@@
Text here.
@@[[/div]]@@
[[/div]]

Example:

[[div class="sapphire-excerpt"]]
When in doubt,
Doubt.
[[/div]]

Finally, close the background, border, & font by putting the following at the end of all inner elements:

[[div class="code"]]
@@[[/div]]@@
[[/div]]

----

= [[span class="sapphire-heading-3"]]//When in doubt, doubt.//[[/span]]

[[/div]]

[[div class="templateInfo"]]
[[=]]
+* Source Code
[[/=]]
[[/div]]

[[=]]
[[collapsible show="▷ Show Code ◁" hide="△ Hide Code △"]]
[[/=]]
[[<]]

[[code type="CSS"]]
@import url(https://fonts.googleapis.com/css?family=Tinos&display=swap);

/* SAPPHIRE Theme
 * [2019 Wikidot Theme]
 * Based on Aelanna's Sigma-9 Theme as edited by Dr Devan
 * Inspired by DrGemini's SCP-FR Group of Interest "SAPHIR"
 * Created by stormbreath, Lt Flops, and Uncle Nicolini for the 2019 International GOI Contest
 * Logo Design by Ihp sourced from https://pixabay.com/vectors/diamond-cut-polished-jewelry-312696/
 */

/* GLOBAL WIDTH */
body {
     background-color: #e5e5e5;
     color: #0c0c0c;

     --neutral: #e5e5e5;
     --key: #17181c;
     --sapphire-muted: #151a61;
     --sapphire: #000880;
     --sapphire-mid: #2634f2;
     --sapphire-light: #666999;
     --white-sapphire: #ebebf0;
     --gray-sapphire: #5b5b5d;
     --light: #bbb;
     --mid-light: #999;
     --mid: #9b9ca1;
     --mid-dark: #666;
     --dark: #333;
     --grad-1: #5b5b5b;
     --grad-2: #878787;
}
div#container-wrap {
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Asapphire/sapphire-body-bg.png);
}

/* COMMON */
 h1, 
 #page-title {
     color: #151a61;
     color: var(--sapphire-muted);
}
 h1 {
     margin-top: 0;
     padding: 0;
     font-weight: bold;
}
 #page-title {
     border-color: #0d0e26;
}
 a {
     color: #000880;
     color: var(--sapphire);
}
 a.newpage {
     color: #151a61;
     color: var(--sapphire-muted);
     font-weight: bold;
}
 #side-bar a {
     color: #151a61;
     color: var(--sapphire-muted);
}
 a:visited {
     color: #151a61;
     color: var(--sapphire-muted);
}
 a.collapsible-block-link {
     font-weight: bold;
}
 hr{
     display: block;
     background: #0d0e26;
     border: 0;
     padding: 0;
     margin: 1em 0;
     height: 1px;
}

/* HEADER */
 #header {
     background: none;
}
 #header h1 {
     background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Asapphire/sapphire-header.png) no-repeat; /* Logo modified by Ihp under CC BY-SA 3.0 */
     background-size: contain;
     display: block;
     height: 139px;
     max-height: 139px;
     width: 100%;
     max-width: 271px;
     position: relative;
     top: 32px;
}
 #header h1 a {
     display: block;
     margin: 0;
     padding: 0;
     height: 139px;
     max-height: 139px;
     width: 100%;
     max-width: 271px;
}
 #header h2 {
     display: none;
}
 #search-top-box-input {
     border: solid 1px #e5e5e5;
     border: solid 1px var(--neutral);
     color: #2634f2;
     color: var(--sapphire-mid);
     background-color: #17181c;
     background-color: var(--key);
}
 #search-top-box-input:hover, 
 #search-top-box-input:focus {
     border: solid 1px #ebebf0;
     border: solid 1px var(--white-sapphire);
     color: white;
     background-color: #5b5b5d;
     background-color: var(--gray-sapphire);
}
 #search-top-box-form input[type=submit] {
     border: solid 1px #e5e5e5;
     border: solid 1px var(--neutral);
     color: #e5e5e5;
     color: var(--neutral);
     background-color: #333;
     background-color: var(--dark);  
     background: linear-gradient(to bottom, #878787, #5b5b5b, #333);	 
     background: linear-gradient(to bottom, var(--grad-2), var(--grad-1), var(--dark));
}
 #search-top-box-form input[type=submit]:hover, 
 #search-top-box-form input[type=submit]:focus {
     border: solid 1px white;
     color: white;
     text-shadow: 0 0 1px rgba(255,255,255,.25);
     background-color: #9b9ca1;
     background-color: var(--mid);
     background: linear-gradient(to bottom, #e5e5e5, #878787, #5b5b5b);
     background: linear-gradient(to bottom, var(--neutral), var(--grad-2), var(--grad-1));
}
 #login-status {
     color: #e5e5e5;
     color: var(--neutral);
}
 #login-status a {
     color: #e5e5e5;
     color: var(--neutral);
}
 #login-status ul a {
     color: #000880;
     color: var(--sapphire);
}
 #account-topbutton {
     background: #bbb;
     background: var(--light);
     color: #000880;
     color: var(--sapphire);
}

/* ADJUST MOBILE IMAGE SIZE */
 #header h1 {
     padding: 0;
     float: left;
     max-height: 95px;
}
 @media (max-width: 479px) {
     #header {
         background-size: 150px 75px;
         background-position: 1em;
    }
}
 @media (min-width: 480px) and (max-width: 580px) {
     #header {
         background-size: 180px 90px;
         background-position: 1em;
    }
}
 @media (min-width: 581px) and (max-width: 767px) {
     #header {
         background-size: 210px 105px;
         background-position: 1em;
    }
}
 @media (min-width: 768px) and (max-width: 979px) {
     #header {
         background-size: 240px 120px;
         background-position: 1em;
    }
}
 @media (max-width: 979px) and (min-width: 768px) {
     #header {
         background-size: auto 88px;
    }
}
 @media (max-width: 767px) and (min-width: 581px) {
     #header {
         background-size: auto 77px;
    }
}
 @media (max-width: 580px) and (min-width: 480px) {
     #header {
         background-size: auto 66px;
    }
}
 @media (max-width: 479px) {
     #header {
         background-size: auto 65px;
    }
}

/* HIDE THE HEADER TEXT */
 #header h1 a {
     color: transparent;
     text-shadow: none;
}
 #header h2 span {
     color: transparent;
     text-shadow: none;
}

/* TOP MENU */
 #top-bar a {
     color: #bbb;
     color: var(--light);
}
 #top-bar ul li ul {
     border: solid 1px #666;
     border: solid 1px var(--mid-dark);
     box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
 #top-bar ul li a {
     border-left: solid 1px rgba(64,64,64,.1);
     border-right: solid 1px rgba(64,64,64,.1);
}
 #top-bar ul li.sfhover a, 
 #top-bar ul li:hover a {
     background: #333;
     background: var(--dark);
     color: #e5e5e5;
     color: var(--neutral);
     border-left: solid 1px rgba(64,64,64,1);
     border-right: solid 1px rgba(64,64,64,1);
}
 #top-bar ul li.sfhover ul li a, 
 #top-bar ul li:hover ul li a {
     border-top: 1px solid #333;
     border-top: 1px solid var(--dark);
}
 #top-bar ul li.sfhover a:hover, 
 #top-bar ul li:hover a:hover {
     background: #999;
     background: var(--mid-light);
}
 #top-bar ul li ul a, 
 #top-bar a:hover {
     color: #e5e5e5;
     color: var(--neutral);
}

/* SIDE MENU */
 .menu-item > .image {
     filter: hue-rotate(236deg) saturate(50%) brightness(111%) !important;
     -webkit-filter: hue-rotate(236deg) saturate(50%) brightness(111%) !important;
}
 #side-bar .side-block {
     border: 1px solid #333;
     border: 1px solid var(--dark);
     background: #e5e5e5;
     background: var(--neutral);
     border-radius: 0px;
     box-shadow: 0 2px 6px rgba(102,102,102,.5);
}
 #side-bar .heading {
     color: #333;
     color: var(--dark);
     border-bottom: solid 1px #000880;
     border-bottom: solid 1px var(--sapphire);
}
 #side-bar p {
     margin: 0;
}
 #side-bar div.menu-item {
     margin: 2px 0;
}
 #side-bar .collapsible-block-folded {
     background: none;
}
 #side-bar .collapsible-block-unfolded-link {
     border-bottom: solid 1px #333;
     border-bottom: solid 1px var(--dark);
}
 #side-bar .collapsible-block-unfolded-link .collapsible-block-link {
     color: #333;
     color: var(--dark);
}
 #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
     color: #666;
     color: var(--mid-dark);
}
 #side-bar .floating-ad img {
     border-radius: 0px;
     filter: hue-rotate(236deg) saturate(50%) brightness(111%);
     -webkit-filter: hue-rotate(236deg) saturate(50%) brightness(111%);
}

/* SIDEBAR CHANGES PER NAV UPDATE */
 #side-bar .side-block[style="background-color: #fff0f0;"] {
     background-color: #E5E5E5 !important;
     background-color: var(--neutral) !important;
}
 #side-bar .side-block[style="background-color: #e5e5ff;"] {
     background-color: #E5E5E5 !important;
     background-color: var(--neutral) !important;
}

/* YUI-TABS */
 .yui-navset .yui-content {
     background-color: #e5e5e5;
     background-color: var(--neutral);
}
 .yui-navset .yui-nav a, 
 .yui-navset .yui-navset-top .yui-nav a {
     background-color: #333;
     background-color: var(--dark);
}
 .yui-navset .yui-nav .selected a, 
 .yui-navset .yui-nav .selected a:focus, /* NO FOCUS EFFECT FOR SELECTED */
 .yui-navset .yui-nav .selected a:hover { /* NO HOVER EFFECT FOR SELECTED */
     background: #333;
     background: var(--dark); /* SELECTED TAB BACKGROUND */
     color: white;
}
 .yui-navset .yui-nav a:hover, 
 .yui-navset .yui-nav a:focus {
     background: #bbb;
     background: var(--light);
     text-decoration: none;
}
 .yui-navset .yui-nav, 
 .yui-navset .yui-navset-top .yui-nav {
     border-color: #333;
     border-color: var(--dark);
}
 .yui-navset li {
     line-height: normal;
}

/* AYERS' INFO MODULE */
 :root {
     --cutColour: #050505;
     --barColour: #151A61;
}

/* INFO PANE */
 .rate-box-with-credit-button {
     background-color: #151a61 !important; 
     background-color: var(--sapphire-muted) !important;
     border: 1px solid #151a61 !important;
     border: 1px solid var(--sapphire-muted) !important;
     border-radius: 0 !important;
     box-shadow: 1px 1px 3px rgba(0,0,0,.5) !important;
}
 .rate-box-with-credit-button .creditButton p a {
     border-left-color: #666999 !important;
     border-left-color: var(--sapphire-light);
}
 .rate-box-with-credit-button .page-rate-widget-box .cancel {
     border-radius: 0;
}
 .rate-box-with-credit-button .fa-info:hover {
     color: #666999 !important;
     color: var(--sapphire-light) !important;
}
 .rate-box-with-credit-button .page-rate-widget-box .rate-points {
     border-left: 0;
}
 .close-credits {
     filter: hue-rotate(236deg);
}
 .modalbox {
     box-shadow: 0 1px 10px rgba(39,51,221,.3) !important;
}

/* RATING MODULE */
 div.page-rate-widget-box .rate-points {
     background-color: #151a61;
     background-color: var(--sapphire-muted);
     border: solid 1px #151a61;
     border: solid 1px var(--sapphire-muted);
     border-radius: 0;
}
 .page-rate-widget-box .rateup, 
 .page-rate-widget-box .ratedown {
     background-color: #e5e5e5;
     background-color: var(--neutral);
     border-top: solid 1px #151a61;
     border-top: solid 1px var(--sapphire-muted);
     border-bottom: solid 1px #151a61;
     border-bottom: solid 1px var(--sapphire-muted);
     font-weight: bold;
}
 .page-rate-widget-box .rateup a, 
 .page-rate-widget-box .ratedown a {
     background: none;
     color: #151a61;
     color: var(--sapphire-muted);
     padding: 0 4px;
     margin: 0 1px;
}
 .page-rate-widget-box .rateup a:hover, 
 .page-rate-widget-box .ratedown a:hover {
     background: #151a61;
     background: var(--sapphire-muted);
     color: white;
     text-decoration: none;
}
 .page-rate-widget-box .cancel {
     background-color: #151a61;
     background-color: var(--sapphire-muted);
     border: solid 1px  #151a61;
     border: solid 1px var(--sapphire-muted);
     border-left: 0;
     border-radius: 0;
}
 .page-rate-widget-box .cancel a {
     background: transparent;
     color: #666999;
     color: var(--sapphire-light);
}
 .page-rate-widget-box .cancel a:hover {
     border-radius: 0;
     background: #151a61;
     background: var(--sapphire-muted);
     color: white;
     text-decoration: none;
}
 @media (max-width: 767px) {
     #top-bar .open-menu a {
         border: 0.2em solid #999;
         border: 0.2em solid var(--mid-light);
         background-color: white;
         color: #999;
         color: var(--mid-light);
    }
     #side-bar {
         background-color: #666999;
         background-color: var(--sapphire-light);
    }
}

/*INTERWIKI */
 #interwiki body{
     overflow: hidden;
}
 #interwiki .side-block{
     background: hsl(127, 50%, 94%);
     border-color: var(--dark);
     border-radius: 0;
     box-shadow: 0 2px 6px hsla(0, 0%, 40%, .5);
}
 #interwiki .heading{
     color: var(--dark);
     border-color: var(--sapphire);
}


/* SAPPHIRE FORMAT */
 .sapphire-block {
     border: 5px solid #0d0e26;
     background-color: #abafed;
     padding: 0 1em;
     margin: 1em 0;

     color: #222;
     font-family: 'Tinos', serif;
     font-size: 12.5pt;
     text-align: justify;
     word-break: unset;
}
 .sapphire-block hr {
     background-color: #0d0e26;
     border: none;
     margin: auto;
     height: 2px;
     width: 100%;
}
 .sapphire-lite-hr hr {
     background-color: #0d0e26;
     border: none;
     margin: auto;
     height: 2px;
     width: 45%;
}
 div.sapphire-excerpt {
     border: 1px solid #0d0e26;
     background-color: #dedfed;
     padding: 0 1em;
     margin: 1em 2em;
}
 .sapphire-heading-2,
 .sapphire-heading-3,
 .sapphire-heading-4 {
     color: #151a61;
     color: var(--sapphire-muted);
     font-weight: bold;
     word-break: unset;
     line-height: 120%;
}
 .sapphire-heading-2 { font-size: 150%; }
 .sapphire-heading-3 { font-size: 130%; }
 .sapphire-heading-4 { font-size: 120%; }

/* MOBILE VIEW */
 @media (max-width: 479px) {
     div.sapphire-excerpt {
         margin: 1em 0;
    }
}
 @media (min-width: 480px) and (max-width: 580px) {
     div.sapphire-excerpt {
         margin: 0.5em;
    }
}
[[/code]]
[[/<]]
[[/collapsible]]
[[/iftags]]

SAPPHIRE Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source