Blood Raven Theme

Link to article: Blood Raven Theme.

@import url(https://scp-wiki.wikidot.com/theme:bloodraven/code/1);


:root {
    --raven-color: #00C4F8;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-loader.gif");
}


:root {
    --raven-color: #F8B301;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-loader.gif");
}


:root {
    --raven-color: #00EE10;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-loader.gif");
}


:root {
    --raven-color: #F7F7F7;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-loader.gif");
}

::selection {
    background: var(--raven-color);
    color: #0F0F0F;
}

color: #f00000; text-decoration: underline dotted;

color: #0F0F0F; background-color: #DBDBDB;

```
color: #f00000;
```

```
header
```

[[module CSS]]
@import url(https://scp-wiki.wikidot.com/theme:bloodraven/code/1);
[[/module]]

[[include :scp-wiki:component:toggle-sidebar]]
[[div class="header"]]
[[/div]]

[[iftags +theme]]

[[include :scp-wiki:info:start]]
This is the BLOOD RAVEN THEME, a theme created by [[*user Dc_Yerko]] with indications of [[*user Kilerpoyo]] to be used in articles featuring the [https://scp-wiki.wikidot.com/valravn-corporation-hub Valravn Corporation].
[[include :scp-wiki:info:end]]

[[>]]
[[module Rate]]
[[/>]]

[[f>toc]]

+ Usage

This is the BLOOD RAVEN THEME, a theme created by [[*user Dc_Yerko]] with indications of [[*user Kilerpoyo]] to be used in articles featuring the [https://scp-wiki.wikidot.com/valravn-corporation-hub Valravn Corporation].

To import this theme, just put this line in the upper part of your article:

> @@[[include theme:bloodraven]]@@

The blood of our open veins will cover the corpses of our enemies.

+ Usage of Color Variations

This theme has color variations, that is, alternative versions of the same theme but with some, or all, of its colors changed. This theme has 4 different color variations.

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme:bloodraven/Screenshot_1.png|caption=FROSTBLOOD RAVEN|width=225px]]

++ FrostBlood Raven

This variation brings the bluest colors of winter and the fury of frostbyte to your screen.

Good for tales on winterlands.

To import the FrostBlood Raven variation, put the following at the upper part of your article:

> @@[[include theme:bloodraven |frostblood-raven= --]]]@@

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme:bloodraven/Screenshot_2.png|caption=SUNBLOOD RAVEN|width=225px]]

++ SunBlood Raven

This variation brings the yellow and orange colors of the sun bouncing off the snow and burning the eyes of our enemies.

Good for when we need to talk about money.

To import the SunBlood Raven variation, put the following at the upper part of your article:

> @@[[include theme:bloodraven |sunblood-raven= --]]]@@

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme:bloodraven/Screenshot_3.png|caption=ACIDBLOOD RAVEN|width=225px]]

++ AcidBlood Raven

This variation brings the green colors of the acidic blood that burns and corrodes the bodies of our enemies.

Good for when we are hacking and developing software.

To import the AcidBlood Raven variation, put the following at the upper part of your article:

> @@[[include theme:bloodraven |acidblood-raven= --]]]@@

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme:bloodraven/Screenshot_4.png|caption=PALEBLOOD RAVEN|width=225px]]

++ PaleBlood Raven

This variation brings the pale colors of the blood-stained snow grave of our enemies.

Good for ethereal tales and cold endings.

To import the PaleBlood Raven variation, put the following at the upper part of your article:

> @@[[include theme:bloodraven |paleblood-raven= --]]]@@

----

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme:bloodraven/Valravn%20Logo%20Final.png|caption=BLOOD RAVEN|width=225px]]

+* Examples

A horizontal line like the one above can be created with four dashes, like this: “@@----@@”. A small but thick separator hyphen can be created by placing the following: “@@+ -----@@”.

[[collapsible show="Titles" hide="Titles"]]
+* Title 1

++* Title 2

+++* Title 3

++++* Title 4

+++++* Title 5

++++++* Title 6
[[/collapsible]]

[[span style="color: #f00000; text-decoration: underline dotted;"]] [https://scp-yerko-7.wikidot.com/tema:necropolitics Visited Page] [[/span]]

[[span style="color: #0F0F0F; background-color: #DBDBDB;"]] [[[sangreparaeldiosdelasangre|New Page]]] [[/span]]

[[span style="color: #f00000;"]] [https://www.google.ko/ Not Visited Page] [[/span]]

[[tabview]]
[[tab Tabulator]]
This is a tab.
[[/tab]]
[[tab Tabulation]]
Hey, there's more text over here!

Open fire!
[[/tab]]
[[tab Long Tab]]

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 long tab. It contains a lot of text.
[[/tab]]
[[tab Longer Tab That's Actually Very Long As You Can See Here, Yeah]]
But just for the tab, here down there's nothing aside from me...

I feel lonely.
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
@@ @@
----
[[=]]
**This one was not empty. Ravens have located you and are on their way.**
[[/=]]
----
@@ @@
[[/tab]]
[[/tabview]]

> This is a quote box, created by putting “> ” at the beginning of each line. Note that the space after the symbol is always necessary, even when only an empty line is used to separate paragraphs.
>
> More text.
> -----
> This is a horizontal line. So much style.
>
>> And this is what we call //Inception//[[footnote]]Or Incepraven if you please.[[/footnote]].

||~ This is ||~ a table ||
|| I always forgot || how to use this things ||
|||| although it is not as difficult as it seems ||

[[footnoteblock]]

+ Source Code
[[collapsible show="Show Code" hide="Hide Code"]]

[[code type="CSS"]]
@import url('https://api.fonts.coollabs.io/css2?family=Tilt+Prism&display=swap');
@import url('https://scp-wiki.wikidot.com/local--files/theme:valravn/comic-runes.css');
@import url('https://api.fonts.coollabs.io/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Wallpoet&display=swap');

/* ROOT */

:root {
    --raven-color: #FF2424;
    --logo: url('https://scp-wiki.wdfiles.com/local--files/theme%3Abloodraven/Valravn%20Logo%20Final.png');
    --banner-top: url('https://scp-wiki.wdfiles.com/local--files/theme%3Abloodraven/header-final-1.png');
    --banner-mid: url('https://scp-wiki.wdfiles.com/local--files/theme%3Abloodraven/header-final-2.png');
    --fondo: url('https://scp-wiki.wdfiles.com/local--files/theme%3Abloodraven/fondo2.png');
    --scrollbar: url('https://scp-wiki.wdfiles.com/local--files/theme%3Abloodraven/patron-scrollbar.png');
    --banner-bot: url('https://scp-wiki.wdfiles.com/local--files/theme%3Abloodraven/fondo3-2.png');
    --loader: url("https://scp-wiki.wdfiles.com/local--files/theme%3Abloodraven/norse_loader.gif");
}

/* HEADER BACKGROUND */
 
div#container-wrap {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:bloodraven/fondo.png');
}

/* HEADER LOGO */
 
#header {
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-size: 12.8rem;
    background-position: 0 75%;
    height: 17.3rem;
    position: relative;
    z-index: 10;
    padding-bottom: 25px;
}

@media (max-width: 767px) {
    #header {
        background-position: 0 70%;
        margin-left: 0;
    }
}

/* ANIMATED HEADER TOP */

div#extra-div-1 {
    z-index: 1;
    height: 6rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-2980px);
}

div#extra-div-1::before {
    content: "";
    width: calc( 100vw + 2967px);
    height: 100%;
    position: absolute;
    background-repeat: repeat-x;
    background-position: top center;
    background-size: 100%;
    flex: 1;
    transform: translateX(2980px);
}

div#extra-div-1::before {
    background-image: var(--banner-top);
    background-position: top center;
    animation: der 80s linear infinite;
    animation-delay: -.25s
}

@keyframes der {
    from {
        transform: translateX(2980px)
    }

    to {
        transform: translateX(0)
    }
}

/* ANIMATED HEADER MID */

div#extra-div-2 {
    z-index: 1;
    width: 4px;
    height: 1.5rem;
    display: block;
    position: absolute;
    top: 17rem;
    left: 0;
    transform: translateX(-24px);
}

div#extra-div-2::before {
    content: "";
    width: calc( 100vw + 24px );
    height: 270%;
    position: absolute;
    background-repeat: repeat-x;
    background-position: center center;
    background-size: 1.5rem;
    flex: 1;
    transform: translateX(24x);
}

div#extra-div-2::before {
    background-image: var(--banner-mid);
    animation: izq 1.3s linear infinite;
    animation-delay: -.25s
}

@keyframes izq {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(24px)
    }
}

/* PREFERS REDUCED MOTION */

@media (prefers-reduced-motion) {
    div#extra-div-1::before {
        animation: none;
}
    div#extra-div-2::before {
        animation: none;
}
}

/* HEADER TITLE */
 
#header h1 {
    margin-left: 0;
    float: none;
    text-align: center;
    margin-top: 55x;
    padding: 0;
    max-height: 113px;
    filter: none;
}

#header h2 {
    margin-left: 175px;
    float: none;
    text-align: center;
    padding: 0;
    clear: left;
    font-size: 105%;
    max-height: 38px;
    filter: none;
}
 
#header h1 a {
    display: block;
    content: "";
    margin: 0;
    line-height: 0px;
    max-height: 0px;
    color: transparent;
    background: transparent;
    font-size: 113%;
    text-decoration: none;
    text-shadow: none;
    filter: none;
}
 
#header h1 a::before {
    display: inline-block;
    width: 80%;
    text-align: center;
    content: "VALRAVN CORPORATION";
    color: #FFF;
    font-size: 50px;
    position: absolute;
    top: 40%;
    left: 11%;
    padding-top: 25px;
    font-family: "Tilt Prism", serif;
    font-weight: bold;
}
 
@media (max-width: 767px) {
    #header h1 a::before {
        content: 'VALRAVN';
        font-size: 200%;
        left: 25%;
        text-align: left;
        text-shadow: 3px 3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, -3px -3px 0 #000, 3px 0px 0 #000, 0px 3px 0 #000, -3px 0px 0 #000, 0px -3px 0 #000;
    }
}

@media (max-width: 424px) {
    #header h1 a::before {
         font-size: 157%;
    }
}

/* HEADER SUBTITLE */
 
#header h2 span {
    position: relative;
    display: block;
    margin: 0;
    top: 60%;
    left: 20%;
    line-height: 0px;
    max-height: 0px;
    font-weight: bold;
    color: transparent;
    text-shadow: none;
    filter: none;
}
 
#header h2 span::before {
     position: absolute;
     content: 'We Feast On The Battlefield';
     font-family: 'comic_runesregular', 'nocurvesboustrophedonregular';
     display: block;
     margin: 0;
     line-height: 0px;
     max-height: 0px;
     font-weight: bold;
     color: #FFF;
     font-size: 175%;
     filter: none;
     padding-top: 5rem;
     padding-bottom: 0;
     padding-right: auto;
     padding-left: auto;
     text-align: center;
     text-shadow: 3px 3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, -3px -3px 0 #000, 3px 0px 0 #000, 0px 3px 0 #000, -3px 0px 0 #000, 0px -3px 0 #000;
}
 
@media (max-width: 767px) {
     #header h2 span {
          padding: 40px 0px;
          margin-top: -25px;
          margin-left: -100px;
     }
     #header h2 span::before {
          content: 'We Feast On The Battle';
          font-size: 165%;
     }
}

@media (max-width: 424px) {
     #header h2 span::before {
          content: 'We Feast On The Battle';
          font-size: 125%;
     }
}

/* RATING */
 
.page-rate-widget-box {
    margin-right: 0px;
    border: solid 2px var(--raven-color);
}
 
.creditRate {
    margin-right: 0px;
    border: solid 3px #0F0F0F;
    outline: solid 2px var(--raven-color);
}
 
.page-rate-widget-box .rate-points,
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
  background-color: transparent;
  border: 0;
  text-transform: capitalize;
  font-weight: bold;
    color: #0F0F0F;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    margin-right: 0px;
    margin-left: 0px;
}
div.page-rate-widget-box {
    background-color: var(--raven-color);
    border: solid var(--raven-color) 1px;
    border-radius: 0px;
    box-shadow: none;
}
div.page-rate-widget-box span.rate-points,
div.page-rate-widget-box span.cancel {
    background-color: var(--raven-color);
    border: 1px var(--raven-color);
}
div.page-rate-widget-box span.rateup,
div.page-rate-widget-box span.ratedown {
    background-color: #0F0F0F;
    margin-right: 0px;
    margin-left: 0px;
    color: #FFF;
}
div.page-rate-widget-box span.rateup a,
div.page-rate-widget-box span.ratedown a {
    color: #FFF;
}
div.page-rate-widget-box span.rateup a:hover {
    background: #0F0F0F;
    color: var(--raven-color);
}
div.page-rate-widget-box span.ratedown a:hover {
    background: #0F0F0F;
    color: var(--raven-color):
}
div.page-rate-widget-box span.cancel a {
    color: #0F0F0F;
}
div.page-rate-widget-box span.cancel a:hover {
    background: #0F0F0F;
    color: var(--raven-color);
    border-radius: 0px;
}
 
/* RATING WITH INFO */
 
#page-content .rate-box-with-credit-button {
    background-color: var(--raven-color); 
    border: 1px solid var(--raven-color);
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
    border-radius: 0px;
    box-shadow: none;
}

.creditRate {
    margin-right: 0 !important;
}

.creditButton p a {
    border-left-color: var(--raven-color) !important;
    color: #0F0F0F !important;
}

.creditButton p a:hover {
     color: #FFF !important;
}
 
#page-content .rate-box-with-credit-button .fa-info {
     border-color: var(--raven-color);
     color: #0F0F0F;
}
#page-content .rate-box-with-credit-button .fa-info:hover a {
     color: var(--raven-color);
}

.close-credits,
.credit-back {
    filter: hue-rotate(0deg) !important;
}
 
#page-content .modalbox {
    box-shadow: 0 2px 6px rgba(0,30,0,.5) !important;
}

/* BODY */
 
body {
    background-color: #0F0F0F;
    font-family: "Jost", sans-serif;
    font-size: 1.05em;
    color: #DBDBDB;
    background-image: var(--fondo);
    background-position: top center;
    background-size: contain;
}

body,
html {
    scroll-behavior: smooth;
}

@media (max-width: 767px) {
     body {
          background-image: none;
     }
}

#container-wrap-wrap {
    overflow-x: hidden;
}

/* LINKS */
 
a {
    color: var(--raven-color);
} 
 
a:visited {
    color: var(--raven-color);
    border-bottom: dotted 1px var(--raven-color);
}

a.newpage {
    color: #0F0F0F;
    background: #DBDBDB;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
}

/* CONTENT */

#main-content {
    background-color: #0F0F0F;
}

/* TOP BAR */
 
#top-bar {
    top: 17.6rem;
    right: 0;
    display: flex;
    justify-content: center;
    height: 3rem;
    line-height: 3rem;
    font-size: 15px;
    padding-top: 6px;
}
 
#top-bar a {
    color: var(--raven-color);
    background-color: #0F0F0F;
    font-weight: bold;
}
 
#top-bar ul li a {
    border: none;
    text-decoration: none;
    box-shadow: none;
    padding-top: 16px;
    padding-bottom: 16px;
    line-height: 1px;
    max-height: 1px;
    overflow: hidden;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background-color: #0F0F0F;
    color: var(--raven-color);
    border-left: dotted 2px var(--raven-color);
    border-right: dotted 2px var(--raven-color);
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-width: 0;
    width: 150px;
    line-height: 160%;
    height: auto;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: var(--raven-color);
    text-decoration: none;
    color: #FFF;
}
 
#top-bar ul li ul {
    border: none;
    box-shadow: none;
}
 
#top-bar ul li ul li ul {
    border: none;
    box-shadow: none;
}
 
.topbar_arrow {
    color: var(--raven-color);
}

/* MOBILE TOP BAR */

@media (max-width: 767px) {
    .mobile-top-bar {
        right: 0;
        display: flex;
        justify-content: center;
        height: 3rem;
        line-height: 3rem;
        font-size: 15px;
        padding-top: 6px;
    }
}

/* ACCOUNT */
 
#login-status {
    top: 0.18rem;
    right: 0.7rem;
    color: #FFF;
    background-color: #0F0F0F;
    padding: 0.2rem;
}

@media (max-width: 767px) {
    #login-status {
        top: 0rem;
    }
}
 
#login-status a {
    color: #FFF;
    background-color: #0F0F0F;
}
 
#account-topbutton {
    color: var(--raven-color);
    border: solid 2px var(--raven-color);
}

#account-topbutton:hover,
#account-topbutton:focus {
    color: #FFF;
    border: solid 2px var(--raven-color);
    background-color: var(--raven-color);
}
 
#account-options {
    border: solid 2px var(--raven-color);
    background-color: #0F0F0F;
    color: var(--raven-color);
}
 
#login-status ul a {
    color: var(--raven-color);
    font-weight: bold;
}
 
#login-status ul a:hover {
    color: #FFF;
    background-color: var(--raven-color);
}
 
/* SEARCH */
 
#search-top-box {
    top: 1.8em;
    right: 0.7rem;
}

@media (max-width: 767px) {
    #search-top-box {
        top: 1.8em;
    }
}
 
#search-top-box-input,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:focus {
    background: #0F0F0F;
    box-shadow: none;
    border-radius: 0px;
    color: #FFF;
    border: solid 2px #0F0F0F;
}
 
#search-top-box-input:hover,
#search-top-box-form input[type=submit]:hover {
    background: var(--raven-color);
    box-shadow: none;
    border: solid 2px var(--raven-color);
    color: #FFF;
}
 
#search-top-box-input:focus,
#search-top-box-form input[type=submit]:focus {
    background: #0F0F0F;
    border: solid 2px #0F0F0F;
    box-shadow: none;
    color: #FFF;
}

/* PAGE TITLE */
 
#page-title {
   font-family: "Wallpoet", sans-serif;
   text-align: center;
   color: var(--raven-color);
   font-size: 225%;
   border-bottom: solid 2px var(--raven-color);
   font-weight: bold;
}
 
@media (max-width: 767px) {
   #page-title {
      font-size: 225%;
   }
}

/* TITLES IN BODY */
 
h1 {
   font-family: "Wallpoet", sans-serif;
   color: var(--raven-color);
}
 
h2,
h3,
h4,
h5,
h6 {
   font-family: "Wallpoet", sans-serif;
   color: var(--raven-color);
}

/* COLLAPSIBLES */

#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: #0F0F0F;
    width: -moz-fit-content;
    width: fit-content;
    text-align: left;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "+ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "– ";
}
#page-content .collapsible-block-link {
    display: inline-block;
    text-decoration: none;
    color: var(--raven-color);
    border: solid 1px var(--raven-color);
    padding-left: 0.2rem;
    padding-right: 1rem;
    font-weight: bold;
}

/* SIDE BAR */
 
#side-bar .side-block {
    padding: 10px;
    border-top: solid 1px var(--raven-color);
    border-left: solid 1px var(--raven-color);
    border-right: solid 1px var(--raven-color);
    border-bottom: solid 1px var(--raven-color);
    margin-bottom: -1px;
    border-radius: 0px;
    box-shadow: none;
    background-color: #0F0F0F;
    font-size: 110%;
}

#side-bar .side-block img {
    display: none;
}
 
#side-bar .side-block a,
#side-bar .side-block a:visited,
#side-bar .side-block a.newpage {
    color: var(--raven-color);
    background: none;
}
 
#side-bar .side-block.media {
    border-top: none;
    background: #0F0F0F;
}

#side-bar .side-block.media img {
    display: initial;
}

#side-bar .side-block.resources {
    background: #0F0F0F;
}

#interwiki .heading,
#side-bar .heading {
    color: var(--raven-color);
    border-bottom: solid 1px var(--raven-color);
}

#side-bar,
#side-bar:is(:hover,:active,:focus-within)  {
    scrollbar-color: var(--raven-color) #0F0F0F;
}
 
/* SIDEBAR MENU */
 
@media (max-width: 767px) {
    #side-bar {
        opacity: 1;
        background: #0F0F0F;
    }
}
 
.open-menu a,
#top-bar .open-menu a {
    border: solid 2px var(--raven-color) !important;
    border-radius: 0px !important;
    background-color: #0F0F0F !important;
    color: #FFF !important;
    outline: solid 3px #0F0F0F !important;
}
 
.open-menu a:hover,
#top-bar .open-menu a:hover {
    border: solid 2px var(--raven-color);
    background-color: var(--raven-color);
    color: #FFF;
    box-shadow: none;
}

/* TABS */

.yui-navset .yui-content {
     background-color: #0F0F0F;
     border-top: solid 1px var(--raven-color);
     border-left: solid 2px var(--raven-color);
     border-right: solid 2px var(--raven-color);
     border-bottom: solid 2px var(--raven-color);
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
     border-color: var(--raven-color);
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     margin: 0 auto;
     box-shadow: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: var(--raven-color);
}
 
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a {
     border: unset;
     box-shadow: none;
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: var(--raven-color);
    color: #0F0F0F;
    font-weight: bold;
    border: 0px solid #f0000;
    border-bottom: solid 4px var(--raven-color);
    border-left: solid 2px #0F0F0F;
    border-right: solid 2px #0F0F0F;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: #0F0F0F;
    color: #DBDBDB;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
 
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {
    background: var(--raven-color);
    color: #FFF;
    border-bottom: solid 4px #0F0F0F;
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
     border: 0px;
     padding: .35em .75em;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     align-items: center;
     justify-content: center;
}
 
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
    margin: 0;
}
 
 .yui-navset .yui-nav li,
 .yui-navset .yui-navset-top .yui-nav li {
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}

/* TOC */

#toc {
    border: solid 2px var(--raven-color);
    background-color: #0F0F0F;
}

/* BLOCKQUOTE */
 
blockquote,
div.blockquote {
    background-color: #0F0F0F;
    border: solid 2px var(--raven-color);
    color: #DBDBDB;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 20px;
    padding-right: 20px;
}
 
blockquote blockquote {
    border: solid 2px var(--raven-color);
}
 
blockquote hr,
div.blockquote hr {
    background-color: var(--raven-color);
}
 
/* CODE */
 
.code {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:bloodraven/fondo-code.png');
    background-color: #0F0F0F;
    border: solid 2px var(--raven-color);
    color: var(--raven-color);
}
 
.hl-identifier {
    color: var(--raven-color);
}
 
.hl-code {
    color: var(--raven-color);
}
 
.hl-brackets {
    color: var(--raven-color);
}
 
.hl-reserved {
    color: #DBDBDB;
}
 
.hl-special {
    color: var(--raven-color);
}
 
.hl-string {
    color: #DBDBDB;
}
 
.hl-number {
    color: var(--raven-color);
}

.hl-var {
    color: var(--raven-color);
}

/* FOOTNOTES */
 
.footnotes-footer .title {
    color: var(--raven-color);
    font-family: "Wallpoet", sans-serif;
    font-weight: bold;
    font-size: 157%;
    text-align: center;
    border-top: solid 2px var(--raven-color);
    border-bottom: solid 2px var(--raven-color);
    padding: 7px;
}
 
.hovertip {
    background-color: #0F0F0F !important;
    border: solid 2px var(--raven-color) !important;
    color: #DBDBDB;
}
 
.footnote .f-heading, .equation .e-heading, .reference .r-heading {
    background-color: #0F0F0F;
    margin: 0px;
}
 
.footnote .f-content, .reference .r-content {
    color: #DBDBDB;
}
 
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    background-color: #0F0F0F;
    margin: 0px;
}
 
a.footnoteref {
    background-color: #0F0F0F;
    margin-right: 2px;
    margin-left: 2px;
    font-size: 113%;
    color: var(--raven-color);
    padding: 2px;
}

.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}

/* TABLES */
 
table.wiki-content-table th {
    background-color: #0F0F0F;
    color: var(--raven-color);
    border: solid 1px var(--raven-color);
}
 
table.wiki-content-table td {
    border: solid 1px var(--raven-color);
}

/* IMAGE BLOCK */
 
.scp-image-block {
    border: solid 1px var(--raven-color);
}
 
.scp-image-caption {
    background-color: #0F0F0F;
    border: solid 1px var(--raven-color);
    color: #DBDBDB;
}
 
.scp-image-block .scp-image-caption {
    background-color: #0F0F0F;
    border-top: solid 1px var(--raven-color);
}
 
.scp-image-block .scp-image-caption > p {
    background-color: #0F0F0F;
}

/* OWINDOW */
 
.owindow {
    background-color: #0F0F0F;
    color: #DBDBDB;
    border-top: solid 0px #0F0F0F;
    border-right: solid 0px #0F0F0F;
    border-left: solid 0px #0F0F0F;
    border-bottom: solid 0px #0F0F0F;
}

.owindow a {
    color: var(--raven-color);
}

.owindow h1 {
    color: var(--raven-color);
}
 
.owindow .title {
    background-color: var(--raven-color);
    color: #0F0F0F;
}
 
.owindow img {
    background-color: #0F0F0F !important;
}

.owindow .button-bar {
    margin: 0px;
    background-color: var(--raven-color);
}
 
.owindow .button-bar a {
    background-color: #0F0F0F;
    color: #FFF;
    border-top: solid 2px #0F0F0F;
    border-left: solid 1px var(--raven-color);
    border-right: solid 1px var(--raven-color);
    border-bottom: solid 2px #0F0F0F;
}
 
.owindow .button-bar a:hover {
    color: var(--raven-color);
    background-color: #0F0F0F;
}

.owindow.owait {
    border: solid 2px var(--raven-color);
}
 
.owindow.owait .content{
    padding-bottom: 2rem;
    background-image: var(--loader);
}

/* MODALBOX */
 
.modalbox {
    background: #0F0F0F !important;
    border-radius: 0px !important;
}
 
.modalbox h2 {
   font-weight: bold;
   font-size: 230%;
   margin-bottom: 0.4em;
   margin-top: 0.4em;
   color: var(--raven-color);
}
 
.modalbox hr {
    background-color: var(--raven-color);
    background-image: none;
}

/* SELECTION */
 
::selection {
    background: var(--raven-color);
    color: #FFF;
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 13px;
}

::-webkit-scrollbar-thumb {
    background: var(--raven-color);
    background-image: var(--scrollbar);
    background-size: contain;
    background-position: center center;
    border-top: solid 1px var(--raven-color);
    border-bottom: solid 1px var(--raven-color);
}

::-webkit-scrollbar-track {
    background: #0F0F0F;
    border-left: solid 1px var(--raven-color);
}

/* TEXT EDITOR */
 
 input.text,
 input.text:focus,
 input.text:hover{
     color: #A3A3A3;
     border-color: #A3A3A3;
     background-color: #212121;
}
 
.wd-editor-toolbar-panel div {
     filter: hue-rotate(62deg) invert(83%);
}
 
 textarea {
     color: #A3A3A3;
     border-color: #A3A3A3;
     background-color: #212121;
}
 
.change-textarea-size a{
     color: #A3A3A3;
     border-color: #A3A3A3;
     background-color: #212121;
}
 
 div#lock-info {
     background-color: #0F0F0F;
     color: #DBDBDB;
     border-color: var(--raven-color);
}
 div#lock-info span#lock-timer {
     color: var(--raven-color);
}
 
 div.buttons input, input.button, button, file, a.button {
     color: #FFF;
     border-color: var(--raven-color);
     background-color: #0F0F0F;
}

 div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover {
     background-color: var(--raven-color);
     color: #FFF;
}

/* FILE TAB HIGHLIGHT */

table.page-files .highlight {
    background-color: #0F0F0F;
    border: solid 2px var(--raven-color);
}

/* PAGER */

.pager a {
    background-color: #0F0F0F;
    border: solid 2px var(--raven-color);
    color: #DBDBDB;
}

.pager .current {
    background-color: var(--raven-color);
    border: solid 2px var(--raven-color);
    color: #DBDBDB;
}

/* HISTORY TAB */

table.page-history td.optionstd a {
    background-color: #0F0F0F;
    border: solid 2px var(--raven-color);
    color: #DBDBDB;
}

/* FOOTER */

#footer {
   background-image: var(--banner-bot);
   background-position: center center;
   background-repeat: repeat-x;
   background-color: #0F0F0F;
}

@media (max-width: 767px) {
   #footer {
      background-size: contain;
   }
}

#license-area {
   color: #FFF;
}
[[/code]]

[[/collapsible]]

[[/iftags]]

[!-- {$frostblood-raven}
[[module css]]

:root {
    --raven-color: #00C4F8;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/frostbyte-loader.gif");
}

[[/module]]
[!----]

[!----]

[!-- {$sunblood-raven}
[[module css]]

:root {
    --raven-color: #F8B301;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/sunkill-loader.gif");
}

[[/module]]
[!----]

[!-- {$acidblood-raven}
[[module css]]

:root {
    --raven-color: #00EE10;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/acidtaste-loader.gif");
}

[[/module]]
[!----]

[!-- {$paleblood-raven}
[[module css]]

:root {
    --raven-color: #F7F7F7;
    --logo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-logo.png');
    --banner-top: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-banner-top.png');
    --banner-mid: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-banner-mid.png');
    --fondo: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-fondo.png');
    --scrollbar: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-scrollbar.png');
    --banner-bot: url('https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-banner-bot.png');
    --loader: url("https://scp-yerko-7.wdfiles.com/local--files/tema:necropolitics/snowgrave-loader.gif");
}

::selection {
    background: var(--raven-color);
    color: #0F0F0F;
}

[[/module]]
[!----]

Blood Raven Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source