The Hunters Theme

Rating:

rating: +2+–x

Rating w/ Info Pane:

theme for ellie

  • rework the title for legibility
  • figure out if I need tabs or tables
  • h1 color
  • general adjustments
  • search-bar

This is The Hunters Theme, intended for use with on pages for the Supernatural Affairs Canon. To use this theme on an article, paste the following into your page:

[[include :scptestwiki:sigma:supernatural-affairs]]

sighting3.jpg

An example image.

Header

Header Level 2

Header Level 3

A link. | A visited link. | A new link. 
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');
 
/* ==== HEADER ==== */
body {
    color: #eaeaea;
    background-color: hsl(90, 25%, 30%);
    background-image: linear-gradient(
        hsl(90, 25%, 15%),
        hsl(90, 25%, 30%) 400px);
}
 
div#container-wrap {
    background-image: url(none);
}
 
div#extra-div-1 {
    height: 140px;
    width: 100%;
    top: 0;
    position: absolute;
    background: url(http://scptestwiki.wdfiles.com/local--files/sigma%3Asupernatural-affairs/hunterbanner.jpg);
    background-size: 100% auto;
    background-position: 0% 85%;
}
 
div#extra-div-2 {
    height: 22px;
    width: 100%;
    top: 140px;
    position: absolute;
    background-image: linear-gradient(to top, #201101, #4d2803);
} /* Brown-top bar */
 
#header {
    background-image: url("http://scptestwiki.wdfiles.com/local--files/sigma%3Asupernatural-affairs/sau.png");
}
 
#header h1 a,
#header h2 span {
    color: transparent;
    text-shadow: none;
    font-family: 'Caesar Dressing', cursive;
}
 
#header h1 a::before {
    content: 'Supernatural affaIrs';
    color: #603112;
    text-shadow: 3px 2px 0px #000;
}
 
#header h2 span::before {
    content: 'subtitle text goes here!';
    color: #fff694;
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}
 
@media (max-width: 767px) {
    #header h1 a::before {
        font-size: 80%;
        text-shadow: 1px 1px 0px #000;
     }
}
 
/* ----- Log-In Status ----- */
#login-status {
    color: #fff;
    text-shadow: -1px 1px 0px #10220d;
}
 
#login-status a {
    color: #fff;
}
 
#account-options {
    background: transparent;
    border-color: transparent;
}
 
#account-options ul {
    border: 3px solid #3d2308;
    background: #124819;
}
 
#account-options ul li a {
    color: #dc8945;
}
 
#account-options ul li:hover {
    background: #dc8945;
}
 
#account-options ul li:hover a {
    color: #fff;
    text-decoration: none;
}
 
/* ==== SEARCH-BAR ==== */
#search-top-box-input {
     background: #50310c;
     border: outset 2px #603112;
     box-shadow: none;
     border-radius: 0;
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
     background: #8d6431;
     border: outset 2px #603112;
     box-shadow: none;
}
 
#search-top-box-form input[type=submit] {
     background-color: #603112;
     background-image: linear-gradient(148deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.4) 61%, rgba(0,0,0,.6) 100%);
     border-radius: 0;
     border: 2px outset #3b1b04;
}
 
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: #603112;
    background-image: linear-gradient(148deg, rgba(0,0,0,.2) 30%, rgba(0,0,0,.5) 61%, rgba(0,0,0,.7) 100%);
    border: 2px outset #3b1b04;
}
 
/* ==== TOP-BAR ==== */
#top-bar a {
    color: #ccc
}
 
#top-bar ul li ul {
    border-width: 0 3px 3px 3px;
    border-color: #3d2308;
    background: #124819;
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
   border-top-color: transparent;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #124819;
    color: #dc8945;
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #dc8945; /* top bar hover background color */
    color: #fff;
}
 
/* ==== SIDE-BAR ==== */
#side-bar .side-block,
#interwiki .side-block {
    border-radius: 0;
    box-shadow: none;
    border: 4px outset #1e1001;
    color: #9c7036;
}
 
#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources,
#interwiki .side-block {
    background: #09200c;
}
 
#side-bar a,
#side-bar a.newpage,
#side-bar a:visited,
#interwiki a,
#interwiki a:visited {
    color: #dc8945;
}
 
#side-bar .heading,
#interwiki .heading {
    color: #9c7036;
    border-color: #9c7036;
}
 
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #9c7036;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    color: #9c7036;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #dc8945;
}
 
#interwiki .menu-item > .image {
    filter: hue-rotate(60deg) brightness(240%) sepia(55%);
}
 
#interwiki body {
    background-image: none;
}
 
#top-bar .open-menu a {
    border: 0.2em outset #1e1001;
    background-color: #364428;
    color: #1e1001;
    border-radius: 0;
}
 
@media (max-width: 767px) {
    #side-bar {
        background-color: #1e3921;
    }
 }
 
/* ==== FOOTER ==== */
#footer {
    background: #281605;
}
 
#license-area {
     color: #fff;
}
 
/* ==== OTHER STRUCTURAL ELEMENTS ==== */
 
a {
    color: #ffbe4c;
}
 
a:visited {
    color: #e08e00;
}
 
a.newpage {
   color: #f6aa74;
}
 
/* ----- Selection ----- */
::selection {
    background: #83cf9a;
    color: #221201;
}
 
/* ----- Footnotes ----- */
.hovertip {
    border: 3px outset #1e1001 !important;
    background: #1e3921 !important;
}
 
/* ----- Scrollbar ----- */
::-webkit-scrollbar-thumb {
    background: #1e1001;
}
 
/* ----- Edit-Lock Info ----- */
#lock-info {
    border: 3px outset #1e1001;
    background: #1e3921;
}
 
/* ----- Pop-Up Windows ----- */
.owindow {
    border: 3px outset #1e1001;
    background: #1e3921;
}
 
.owindow .modal-header {
    background-color: #1e3921;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: #0a1a0c;
    outline: 1px solid #0a1a0c;
    border-bottom: 1px solid #1e1001;
}
 
.owindow .button-bar a  {
    border: 2px outset #1e1001;
    background: #0b250e;
    color: #f4e4d7;
    padding: 2px 3px;
}
 
.owindow .button-bar a:hover {
    background-color: #0c1c09;
    color: #f4e4d7;
}
 
/* ----- Edit Buttons ----- */
.buttons .btn {
    border: 3px outset #1e1001;
    background: #1e3921;
    color: #f4e4d7;
    padding: 2px 3px;
}
 
.buttons .btn:hover {
    background-color: #0c1c09;
    color: #f4e4d7;
}
 
/* ----- Close Button for Page Source, Rating, Etc ----- */
 a.action-area-close:hover {
    background-color: #1e3921;
}
 
/* ----- Page-History Current ----- */
.pager a {
    border: 1px solid #271903;
}
 
.pager .current {
    border: 3px outset #1e1001;
    background: #1e3921;
}
 
/* ----- Code ----- */
.code {
    border: 3px outset #1e1001;
    background-color: #1e3921;
    font-size: 14px;
}
 
/* code highlighter stuff */
.hl-identifier,
.hl-code,
.hl-brackets {
    color: #ccc;
}
 
.hl-var {
    color: #47f48b;
}
 
.hl-special,
.hl-quotes {
    color: #f84848;
}
 
.hl-reserved {
    color: #ff7b0d;
}
 
.hl-number,
.hl-string {
    color: #d3cd8b;
}
 
/* Page Revisions Readability */
del,
ins {
    color: #333;
}
 
/* ==== RATING AND INFO MODULES ==== */
.page-rate-widget-box {
    border: 3px outset #1e1001;
    background: #1e3921;
    border-radius: 0;
    box-shadow: none;
}
 
.page-rate-widget-box .rate-points {
    background-color: transparent !important;
    border: none;
    border-radius: 0;
    color: #dc8945 !important;
    text-transform: capitalize;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: transparent ;
    border-top: none;
    border-bottom: none;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #dc8945;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #dc8945;
    color: #fff;
    border-top: none;
    border-bottom: none;
}
 
.page-rate-widget-box .cancel {
    background: transparent;
    border: none;
    border-radius: 0;
}
.page-rate-widget-box .cancel a {
    color: #dc8945;
}
.page-rate-widget-box .cancel a:hover {
    background: #dc8945;
    color: #fff;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button {
    background-color: #1e3921;
    border: 3px outset #1e1001;
    border-radius: 0;
    box-shadow: none;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box {
    border: none;
}
 
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: transparent;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
 
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
     color: #dc8945;
}
#page-content .rate-box-with-credit-button .fa-info:hover {
     color: white;
}
 
#page-content .modalbox {
     background: hsl(90, 25%, 15%) !important;
     color: #fff;
     border: 3px outset #1e1001;
     box-shadow: none;
     border-radius: 0;
}
 
.close-credits,
.credit-back {
    filter: hue-rotate(60deg) brightness(400%);
}
 
/* Ayer's Info Module */
.info-container {
    --barColour: #2d1600;
    --linkColour: #eaeaea;
}
 
.info-container .collapsible-block-unfolded {
    border: 1px solid #2d1600;
}
 
/* ==== PAGE ELEMENTS ==== */
h1 {
    color: #2d1600;
}
 
#page-title {
   color: #dc8945;
   border-color: #dc8945;
}
 
blockquote,
div.blockquote {
    background: #1e3921;
    border: 3px outset #1e1001;
}
 
hr {
    background: #1e1001;
}
 
.scp-image-block {
    border: outset 4px #603112;
    box-shadow: none;
}
 
.scp-image-block .scp-image-caption {
    background-color: #1e3920;
    border-top: none;
}
theme
page revision: 170, last edited: 16 Apr 2022 21:48
Edit Rate (+2) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License