War On All Fronts Theme (Sigma-9)

Rating:

rating: +10+x

Rating w/ Info Pane:

rating: +10+x

This is a theme for the War on All Fronts Canon. An equivalent of version for the Black Highlighter base theme can be found HERE. To use this theme on an article, paste the following into your page:

[[include theme:war-on-all-fronts-sigma]]

Header

Header Level 2

Header Level 3

Unvisited Link (Visited Link)

This theme has a special horizontal rule (seen below) that users can use, which can be used with the following code:

[[div_ class="woaf-hr"]]
[[/div]]
/* ---------------------------------
War on All Fronts (Sigma-9)
2020 Wikidot Theme
Created by stormbreath
Header image created by EstrellaYoshte
--------------------------------- */
 
/* -------------- ROOT -------------- */
@import url('https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap');
 
:root {
   --deepsea: linear-gradient(to bottom,
       rgb(0,0,101),
       rgb(23,0,82),
       rgb(0,0,0))
}
 
/* -------------- HEADER -------------- */
div#container-wrap {
    background: url(none);
}
 
div#extra-div-1 {
    height: 140px;
    width: 100%;
    top: 0;
    position: absolute;
    background-color: rgb(23,0,127);
    background-image: var(--deepsea);
}
 
div#extra-div-2 {
    height: 23px;
    width: 100%;
    top: 140px;
    position: absolute;
    background: linear-gradient(to top,
      rgb(59, 59, 59),      
      rgb(83, 83, 83));
    border-bottom: 2px solid rgba(188, 184, 185, 0.5);
}
 
#header {
    background-image: url("http://scptestwiki.wdfiles.com/local--files/component%3Awoaf-theme/mksjr2.png");
}
 
#header h1 a {
    color: transparent;
    text-shadow: none;
    font-family: 'Saira Stencil One', cursive;
}
 
#header h1 a::before {
    content: "War on All Fronts";
    color: rgb(173,171,181);
    text-shadow: 3px 3px 5px #000000;
    font-variant: small-caps;
}
 
#header h2 span {
    color: transparent;
    text-shadow: none;
    font-family: 'Saira Stencil One', cursive;
}
#header h2 span::before {
    content: "We're Going To Need a Bigger Boat";
    color: rgb(173,171,181);
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
    font-variant: small-caps;
}
 
/*-------------- LOG-IN INFO -------------- */
#login-status {
    font-weight: bold;
    color: rgb(173,171,181);
}
 
#login-status a {
    color: white;
}
 
#login-status ul {
    background-color: rgb(23,0,127);
    background-image: var(--deepsea);
}
 
#login-status ul a {
    color: rgb(173,171,181);
    background: transparent;
}
 
#login-status ul a:hover {
   color: white;
}
 
/* -------------- SEARCH-BAR -------------- */
#search-top-box-input {
    background-color: #003;
}
#search-top-box-input:hover,
#search-top-box-input:focus {
    background-color: #336;
}
#search-top-box-form input[type=submit] {
    background-color: #336;
    background: linear-gradient(to bottom, #669, #336, #003);
}
 
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: #669;
    background: linear-gradient(to bottom, #99c, #669, #336);
}
 
/* -------------- TOP-BAR -------------- */
#top-bar ul li ul {
    background-color: rgb(23,0,127);
    background-image: var(--deepsea);
    border: solid 1px rgb(0,0,102);
}
 
#top-bar ul li:hover a[href="javascript:;"] {
    background: rgb(41,41,41);
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-top: 1px solid transparent;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: transparent;
    color: rgb(173,171,181);
}
 
#top-bar ul li ul a {
    color: rgb(173,171,181);
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: rgba(195, 200, 220);
    color: #10b;
}
 
/* -------------- BODY -------------- */
body {
    background: linear-gradient(to bottom,
        rgb(200,200,200),
        rgb(245,245,245) 400px
    );
}
 
h1, #page-title {
    color: rgb(44,46,100);
}
 
#page-title {
   border-color: rgb(44,46,100);
   font-family: 'Saira Stencil One', cursive;
   text-align: center;
}
 
::-webkit-scrollbar {
    width: initial;
    height: initial;
}
 
::-webkit-scrollbar-thumb {
    background-color: rgb(175, 175, 175, .7);
    border-radius: 5px;
    border: 1px solid black;
}
 
::-webkit-scrollbar-track {
    background-color: rgb(23,0,127);
    background-image: var(--deepsea);
}
 
::selection {
    background: rgba(35, 35, 180, 0.25);
}
 
/* -------------- SIDE-BAR -------------- */
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage {
    color: rgb(173,171,181);
}
 
#side-bar .side-block {
    background-color: rgb(23,0,127);
    background-image: var(--deepsea);
    border: 1px solid black;
    box-shadow: 0 2px 6px rgba(0,0,102,.5);
    color: white;
}
 
#side-bar .side-block.media,
#side-bar .side-block.resources {
    background-color: rgb(23,0,127);
    background-image: var(--deepsea);
}
 
#side-bar .heading {
    color: white;
    border-color: white;
}
 
iframe.scpnet-interwiki-frame,
.side-block .menu-item > .image {
    filter: grayscale(100%) invert(1);
}
 
/* -------------- FOOTER -------------- */
#footer {
    background: rgb(23,0,82);
}
 
/* -------------- LINKS -------------- */
a {
    color: rgb(17,0,187);
}
 
a.newpage {
    color: rgb(17,102,221);
}
 
a:visited {
    color: rgb(17,0,153);
}
 
/* -------------- PAGE EDITING OPTIONS -------------- */
.buttons .btn,
#lock-info {
    border-color: rgb(100,100,100);
    background-color: rgb(235,235,235);
}
 
/* -------------- RATING MODULE -------------- */
.page-rate-widget-box .rate-points {
    background-color: #336 !important;
    border: solid 1px #336;
    text-transform: capitalize;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #f0f6ff;
    border-top: solid 1px #336;
    border-bottom: solid 1px #336;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    color: #336;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover{
    background: #336;
    color: #f0ffff;
}
 
.page-rate-widget-box .cancel {
    background-color: #336;
    border: solid 1px #336;
}
 
.page-rate-widget-box .cancel a {
    color: #669;
}
 
.page-rate-widget-box .cancel a:hover {
    background: #336;
    color: #f0ffff;
}
 
/* Info Module */
#page-content .rate-box-with-credit-button{
    background-color: #336;
    border: solid 1px #336;
}
 
#page-content .creditButton p a {
    border-left-color: #669;
}
 
.close-credits,
.credit-back {
     filter: hue-rotate(260deg)
}
 
#page-content .modalbox {
    box-shadow: 0 2px 6px rgba(0, 0, 100,.5);
    background: linear-gradient(
        rgb(200,200,200) 51px,
        rgb(240,240,240) 51px,
        rgb(240,240,240)) !important;
}
 
.info-container {
    --barColour: #336;
}
 
/* -------------- OTHER ELEMENTS -------------- */
blockquote,
div.blockquote,
.code {
     background: rgb(235, 235, 235);
}
 
table.wiki-content-table th {
    background-color: rgb(225,225,225);
}
 
.scp-image-block {
    border: solid 1px rgb(0,0,102);
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
 
.scp-image-block .scp-image-caption {
    background-color: rgb(235,235,235);
    border-top: solid 1px rgb(0,0,102);
}
 
div.woaf-hr {
     height: .3em;
     background: linear-gradient(to right,
         rgb(0,0,0),
         rgb(23,0,82),
         rgb(0,0,101),
         rgb(23,0,82),
         rgb(0,0,0));
     margin: 1em 0;
     border-radius: 5px;
}
 
div.woaf-hr p,
div.woaf-hr ul {
    display: none;
}
 
/* -------------- TABS -------------- */
/* Tab CSS is taken from the Black Highlighter Theme and minified to reduce length. */
.yui-navset .yui-content{background-color:inherit}.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.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{background:inherit;color:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav,.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}.yui-navset *{transition:background-color 80ms cubic-bezier(0.4,0.0,0.2,1),color 80ms cubic-bezier(0.4,0.0,0.2,1)}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{zoom:unset;display:flex;flex-wrap:wrap;border-color:#19148c;width:calc(100% - 0.125rem);margin:0 auto;border:0;box-shadow:0 calc(0.0625rem * 5) 0 0 #19148c}.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{zoom:unset;background-image:none;background-color:#f4f4f4;border:unset;color:#0c0c0c}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{zoom:unset;background-color:#0f0364;color:#fcfcfc}.yui-navset .yui-nav li,.yui-navset .yui-navset-top .yui-nav li{background-color:#f4f4f4;border-color:transparent;max-width:100%;padding:0;margin:0;zoom:unset;display:flex;position:relative;flex-grow:2;box-shadow:0 0 0 .0625rem #19148c}.yui-navset .yui-nav li a,.yui-navset-top .yui-nav li a,.yui-navset-bottom .yui-nav li a{display:flex;vertical-align:bottom;zoom:unset;width:100%;align-items:center;justify-content:center}.yui-navset .yui-nav a em,.yui-navset .yui-navset-top .yui-nav a em{padding:.35em .75em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.yui-navset .yui-nav li em{border:unset!important}.yui-navset .yui-nav .selected,.yui-navset .yui-navset-top .yui-nav .selected{padding:0;margin:0;flex-grow:2;background-color:#19148c;}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a em{border:none;border-color:transparent}.yui-navset .yui-nav .selected a{color:#fcfcfc!important;width:100%;background-image:none}.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:active{background-color:#19148c;color:#fcfcfc}.yui-navset .yui-nav .selected a:hover{cursor:default}.yui-navset .yui-content{background-color:rgb(235,235,235); box-shadow:inset 0 calc(0.0625rem * 5) 0 0 rgba(25,20,140,.75);}.yui-navset .yui-content,.yui-navset .yui-navset-top .yui-content{border-color:#aaa}.yui-navset-left .yui-content{border-left-color:#f4f4f4}
 
/* -------------- MOBILE VIEW -------------- */
@media (max-width: 767px) {
    #side-bar {
         background-color: rgb(23,0,127);
         background-image: var(--deepsea);
     }
 
    .open-menu a {
        border: 0.2em solid rgb(0,0,102) !important;
        color: rgb(0,0,102) !important;
    }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License