Present Malice Theme

---

Theme Colors

Umbrella Red--umbrella-red##8F0000

Barry's Magnum--barry-magnum#E6E6E6

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Light S.T.A.R.S Blue--menu-blue#DCDAEB

Medium S.T.A.R.S Blue--light-stars-blue#525366

S.T.A.R.S Blue--stars-blue#000854

Wesker's Shades--weskers-shades#141414

Itchy. Tasty.--itchy-tasty#7E4026

Chris's Blood--chris-blood#B90000

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

---

Signature Care Pharmaceuticals Logo

Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:theme:present-malice]]

This theme also has code for Woedenaz's BHL Toggle Sidebar. If you want it removed, simply remove its include above.

---

Alternate Centered Header

This theme has code for Woedenaz's BHL Centered Header. If you want to add it, simply add:

[[include :scp-wiki:component:centered-header-bhl |malice=--]]]

after all of the includes above.

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

Just use your imagination and pretend there's `Lorem Ipsum` here.

Tabulation

Hey look, more text here.

How quaint.

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.

Empty Tab

Empty Tab

Empty Tab

"I have this!"

Empty Tab

something something Jill Sandwich

Empty Tab

Empty Tab

Will you use the INK RIBBON? [YES/NO]

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

And another¹

This is a	table
You should know	how to make these
already

---

The Header font is Anton.
The Title font is Courier Prime.
The Body font is DM Sans.
The "Monospace" font used is Zilla Slab.

---

[[iftags +component]]

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.

• Does NOT work on Sigma-9. This ONLY functions with Black Highlighter.
• Use this component by EstrellaYoshte instead if you intend to use Sigma-9.
• If you prefer, there is also a Collapsible Sidebar that functions on both BHL and Sigma-9.
  The collapsible sidebar functions via hovering rather than clicking and is slightly more visible than the Toggle Sidebar.

---

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

---

[[/iftags]]

[[div [[iftags -component]]style="display: none"[[/iftags]]]]

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            -webkit-transition:
                opacity var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg height='32px' id='Layer_1' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' width='32px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--swatch-menubg-color))) !important;
            -webkit-border-radius: var(--toggle-roundness, 50%);
            -moz-border-radius: var(--toggle-roundness, 50%);
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--swatch-border-color))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: -webkit-calc(var(--sidebar-width-on-desktop)*-1);
            left: -moz-calc(var(--sidebar-width-on-desktop)*-1);
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            -webkit-transition:
                left var(--sidebar-transition-timing);
            -o-transition:
                left var(--sidebar-transition-timing);
            -moz-transition:
                left var(--sidebar-transition-timing);
            transition:
                left var(--sidebar-transition-timing);
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            -webkit-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within~#main-content::before {
            width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
            width: -moz-calc(100% - var(--sidebar-width-on-desktop));
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
            -moz-box-orient: horizontal;
            -moz-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            width: -webkit-calc(100vw - (100vw - 100%));
            width: -moz-calc(100vw - (100vw - 100%));
            width: calc(100vw - (100vw - 100%));
            min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            -webkit-box-flex: 2;
            -webkit-flex-grow: 2;
            -moz-box-flex: 2;
            -ms-flex-positive: 2;
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: 45.8rem;
            max-width: 45.8rem;
            margin: 0 auto;
        }
 
        @media not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    -webkit-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -o-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -moz-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    padding-right: 0;
                    background-color: rgb(0, 0, 0, 0);
                    pointer-events: all;
                    overflow-x: visible;
                    overflow-y: visible;
                    z-index: 999;
                }
 
                #side-bar::-webkit-scrollbar {
                    opacity: 0;
                    -webkit-transition: opacity var(--sidebar-transition-timing);
                    transition: opacity var(--sidebar-transition-timing);
                }
 
                #side-bar .close-menu::before {
                    z-index: 999;
                }
 
                #side-bar .close-menu::after {
                    z-index: 998;
                }
 
                #side-bar:hover .close-menu::before {
                    opacity: 0;
                }
 
                #side-bar:hover {
                    left: 0;
                    background-color: rgba(var(--swatch-menubg-color), 1);
                    padding-right: 0;
                }
 
                #side-bar:hover::-webkit-scrollbar {
                    opacity: 1;
                }
 
                #side-bar:hover~#main-content::before {
                    width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
                    width: -moz-calc(100% - var(--sidebar-width-on-desktop));
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

/*
   Present Malice Theme
   [2021 Wikidot Theme]
   by JackalRelated
           and greatly inspired by Resident Evil (1996)
 
   Toggle Sidebar BHL by Woedenaz
*/
 
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "present-malice";
   --theme-name: "Present Malice Theme";
 
   --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:present-malice/umbrella-scp.png");
   --header-title: "SCP FOUNDATION";
   --header-subtitle: "SECURE. CONTAIN. PROTECT.";
 
   --body-font: "DM Sans", sans-serif;
   --header-font: "Anton", sans-serif;
   --title-font: "Courier Prime", sans-serif;
   --mono-font: "Zilla Slab", serif;
 
   --umbrella-red: 143, 0, 0;
   --alternate-white: 240, 235, 235;
   --itchy-tasty: 126, 64, 38;
   --stars-blue: 0, 8, 84;
   --light-stars-blue: 82, 83, 102;
   --menu-blue: 220, 218, 235;
   --chris-blood: 185, 0, 0;
   --chris-green: 9, 112, 0;
   --jill-grey: 198, 205, 215;
   --barry-magnum: 230, 230, 230;
   --barry-jacket: 165, 51, 51;
   --weskers-shades: 20, 20, 20;
 
   --white-monochrome: var(--jill-grey);
   --pale-gray-monochrome: var(--barry-magnum);
   --light-gray-monochrome: var(--barry-jacket);
   --gray-monochrome: var(--weskers-shades);
   --dark-gray-monochrome: var(--menu-blue);
   --black-monochrome: var(--weskers-shades);
   --pale-accent: var(--barry-jacket);
   --bright-accent: var(--chris-blood);
   --medium-accent: var(--umbrella-red);
   --dark-accent: var(--itchy-tasty);
 
   --swatch-menubg-color: var(--light-stars-blue);
   --swatch-menutxt-light-color: var(--alternate-white);
   --swatch-menutxt-dark-color: var(--alternate-white);
   --swatch-menubg-medium-color: var(--itchy-tasty);
   --swatch-menubg-medium-dark-color: var(--weksers-shades);
   --swatch-text-light: var(--alternate-white);
 
   --rating-module-color: var(--umbrella-red);
   --rating-module-button-color: var(--light-stars-blue);
   --rating-module-text-color: var(--dark-monochrome);
 
   --swatch-headerh1-color: var(--umbrella-red);
   --swatch-headerh2-color: var(--alternate-white);
   --swatch-topmenu-border-color: var(--weskers-shades);
   --swatch-topmenu-bg-color: var(--weskers-shades);
   --swatch-primary: var(--umbrella-red);
 
   --header-gradient-color-bottom: var(--weskers-shades);
   --header-gradient-color-middle: var(--weskers-shades);
   --header-gradient-color-top: var(--weskers-shades);
   --background-gradient-distance: 0rem;
   --diagonal-stripes: linear-gradient(transparent 0);
 
   --sidebar-transition-timing: 0.8s ease-in-out 0.1s;
 
   --hover-link-color: var(--umbrella-red);
 
   --toggle-button-bg: rgb(var(--weskers-shades));
   --toggle-border-color: rgb(var(--umbrella-red));
   --toggle-icon-color: rgb(var(--barry-magnum));
   --toggle-roundness: 0%;
 
}
 
/* HEADER AND TOPBAR */
#page-title {
  text-align: center;
}
 
#header h1 {
  font-weight: 400;
}
 
#header h1 a::before{
  color: rgb(var(--chris-blood));
}
 
#header h2 {
  text-indent: -0.2em;
}
 
#header-extra-div-1 {
   --drop-shadow: none;
   filter: drop-shadow(0rem 0rem 0rem var(--drop-shadow));
}
 
@media only screen and (max-width: 768px) {
    #header h2 {
        text-indent: 0em;
    }
}
 
#top-bar div.mobile-top-bar>ul>li>ul>li, #top-bar div.top-bar>ul>li>ul>li{
  background: rgb(var(--stars-blue));
} 
 
#top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:hover {
   background: rgb(var(--stars-blue));
}
 
#top-bar div.mobile-top-bar>ul>li>ul>li:hover, #top-bar div.top-bar>ul>li>ul>li:hover {
    background: rgb(var(--umbrella-red));
}
 
#login-status {
   color: rgb(var(--chris-blood));
}
 
#login-status ul a{
   background-color: rgb(var(--weskers-shades));
   color: rgb(var(--chris-blood));
}
 
#account-options {
   background-color: rgb(var(--weskers-shades));
   color: rgb(var(--chris-blood));
}
 
#search-top-box input.empty{
    color: rgb(var(--stars-blue));
    background: rgb(var(--light-stars-blue));
}
 
#search-top-box input{
    background: rgb(var(--stars-blue));
}
 
#search-top-box-input:focus, #search-top-box-input:hover {
    background: rgb(var(--stars-blue));
    color: rgb(var(--alternate-white));
}
 
#search-top-box-form input[type=submit] {
    background: rgb(var(--umbrella-red));
}
 
#search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    background: rgb(var(--chris-blood));
}
 
/* MISC. */
.page-rate-widget-box{
  background-color: rgb(var(--alternate-white));
}
 
hr {
   background-color: rgb(0, 0, 0, 0);
}
 
/* SCROLLBAR AND SIDEBAR */
 
html,body {
  scrollbar-color: 
    rgb(var(--umbrella-red)) 
    rgb(var(--weskers-shades));
}
 
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 18px;
  background: #transparent;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgb(var(--weskers-shades));
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgb(var(--umbrella-red));
  border: rgb(var(--weskers-shades)) 1px solid;
  border-radius: 0px;
}
 
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--chris-blood));
}
 
#side-bar .heading {
    background: rgb(var(--umbrella-red));
}
 
#side-bar .side-block.media,
#side-bar .side-block.resources {
    background-color: rgba(var(--stars-blue), .25);
}
 
.owindow .button-bar a{
    background-color: rgb(var(--umbrella-red));
    border: 1px solid rgb(var(--weskers-shades));
}
 
.owindow .button-bar a:hover{
    background-color: rgb(var(--stars-blue));
    border: 1px solid rgb(var(--weskers-shades));
}
 
/* TABLES / TABS(YUINAVS) */
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
   filter: hue-rotate(0deg);
   color: rgb(var(--alternate-white));
}
 
.yui-navset .yui-content {
   background-color: rgb(var(--alternate-white));
   border-color: rgb(var(--weskers-shades));
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    color: rgb(var(--barry-magnum));
}
 
table.wiki-content-table th, table.wiki-content-table tr {
    border: .0625rem solid rgba(var(--menu-blue),.25)!important;
}
 
table.wiki-content-table td {
    border: 1px solid #141414;
}
 
table.wiki-content-table {
    background-color: rgba(var(--menu-blue), .5);
}
 
table.form td div.sub, form div.sub {
    color: rgb(var(--umbrella-red));
}
 
/* FOOTERS AND BELOW */
#footer {
    color: rgb(var(--chris-blood, 66, 66, 72));
    background: rgb(var(--jill-grey, 100, 3, 15));
}
 
.footnotes-footer{
   color: rgb(var(--weskers-shades));
   background-color: rgba(var(--menu-blue), .5);
}
 
div#page-options-bottom-2>a, div#page-options-bottom>a {
   color: rgb(var(--alternate-white));
   background-color: rgb(var(--umbrella-red));
   border: .125rem solid rgba(var(--weskers-shades),1)
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, 
div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
  background-color: rgb(var(--stars-blue));
}
 
.page-source {
    background: rgb(var(--barry-magnum));
}
 
form#edit-page-form {
    background-color: rgba(var(--menu-blue), 1);
}
 
.change-textarea-size a {
    background-color: rgba(var(--chris-green));
}
 
#lock-info, div.note, input.checkbox, input.text, textarea {
    scrollbar-color: rgba(var(--umbrella-red), 1) rgba(var(--weskers-shades), 1);
    border: .0625rem solid rgba(var(--swatch-border-color),.25);
    background-color: rgb(var(--alternate-white));
    color: rgb(var(--swatch-text-general));
    font-family: var(--body-font);
}
 
div.buttons.alignleft>input {
    background-color: rgb(var(--umbrella-red));
}
 
/* TOGGLE SIDEBAR (BHL) CHANGES */
 
    @supports((display: -ms-grid) or (display: grid)) {
       @media only screen and (min-width: 769px) {
           #main-content::before {
               background: rgba(var(--stars-blue), .45) 1px 1px repeat;
           }
        }
    }
 
    #side-bar::-webkit-scrollbar-track,
    #side-bar:hover::-webkit-scrollbar-track {
        background-color: rgba(var(--weskers-shades), 0);
    }
 
    #side-bar::-webkit-scrollbar-thumb {
        background-color: rgb(var(--stars-blue));
    }
 
    #side-bar:hover::-webkit-scrollbar-thumb {
        background-color: rgb(var(--chris-blood));
    } 
}

Footnotes

1. And here's a footnote!