Codename: PeppersGhost

Link to article: Codename: PeppersGhost.

Module Styles

• 
  /*-----------------------------------------------*\
   *       ANDERSON ROBOTICS/Peppo edit     *
  \*-----------------------------------------------*/
  
  /*-----------------------*\
   *   Fonts and Colours   *
  \*-----------------------*/
  
  @import url('https://fonts.googleapis.com/css?family=Teko:300,400,600&display=swap');
  
  :root {
      --light-accent: #b81818;
      --dark-accent: #5e1c1c;
      --hyperlink: #c23030;
          --hyperlink-visited: #690e0e;
  }
  
  /*------------------*\
   *    Top Header    *
  \*------------------*/
  
  div#container-wrap {
      background: url(https://topia.wdfiles.com/local--files/peppo-woowoo/pep_bg.png) top left repeat-x;
  }
  
  #login-status {color: #271010;}
  
  #login-status a {color: #881717;}
  
  #header { background-image: initial; }
  
  #header::before {
      content: "";
      background-image: initial;
      visibility: hidden;
  }
  
  #header h1 a::before {
      content: "Shhhhh.";
      color: #b81818;
  }
  
  #header h2 span::before {
      content: "They're sleeping.";
      color: #b81818;
  }
  
  /*------------------*\
   *    Search bar    *
  \*------------------*/
  
  #search-top-box-input {
      background-color: white;
      border: rgba(184,24,24,0.5) 1px solid;
      border-radius: 0;
      padding: 0.15rem 0.15rem 0.2rem 0.15rem;
  }
  
  #search-top-box-input:hover, #search-top-box-input:focus {
      background-color: #b81818;
      border: rgba(184,24,24,0) 1px solid;
      box-shadow: none;
  }
  
  #search-top-box input.empty {text-align:center;}
  
  #search-top-box input.empty:hover, #search-top-box input.empty:focus {color: #fff;}
  
  #search-top-box-form input[type=submit] {
      padding: 0.3rem;
      border-radius: 0.5rem;
      border: rgba(0,0,0,0) 1px solid;
      background: #b81818;
      background: var(--light-accent);
      font-family: 'Roboto Mono',monospace;
      box-shadow:none;
      margin-left: 0.3rem;
  }
  
  #search-top-box-form input[type=submit]:hover {
      border: 1px solid #b81818;
      border: 1px solid var(--light-accent);
      border-radius: 0;
      background: white;
      color: #b81818;
      box-shadow:none;
      padding: 0.3rem;
      border-radius: 0.5rem;
  }
  
  
  #search-top-box-form input.button.btn{
      text-transform: uppercase;
      letter-spacing: 0.1em;
  }
  
  /*-----------------------*\
   *   Formatting tweaks   *
  \*-----------------------*/
  
  .new-page-box {display:none;}
  
  #page-title {display: none;}
  
  #breadcrumbs {margin:0;}
  
  #content-wrap {overflow-x: hidden;}
  
  /*------------------*\
   *       Tabs       *
  \*------------------*/
  
  .yui-navset .yui-nav .selected {padding: 0 0.5em !important;}
  
  #page-content .yui-navset .yui-content > div[style*="block"] {overflow:visible}
  
  .yui-navset .yui-content > div { background-color:transparent !important; border:none !important; padding: 0em !important; }
  
  #page-content .yui-navset .yui-content > div[style*="none"] {padding: 0em !important;}
  
  .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
      border: 1px solid #ff8a84;
      padding: 0.05em 0 0 0;
  }
  
  /*------------------*\
   *    widen ur wurld    *
  \*------------------*/
  
  #side-bar {width:10rem;}
  #main-content {margin-left:12em}
  
  /*------------------*\
   *    stop havin rating border    *
  \*------------------*/
  div.page-rate-widget-box .rate-points {
  border:none;
  padding: 2px 10px;
  }
  .page-rate-widget-box .ratedown, .page-rate-widget-box .rateup {
  border-top:none;
  border-bottom:none;
  padding:2px
  }
  .page-rate-widget-box .cancel {
  border:none;
  padding:2px;
  }
  
  /*------------------*\
   *    Responsive    *
  \*------------------*/
  
  @media (max-width: 767px) {
  
      #main-content {
          margin: 0 1.5% 0 1.5% !important;
          max-width: 900px;
          padding: 1rem 0rem !important;
      }
  
      #page-options-container {max-width: 95%;}
  
      #content-wrap {0 0.4rem 0 0.25rem}
  }

Inline Styles

• font-family: 'Teko', sans-serif; font-size: 3.8em; line-height:1em; color:#b81818

• font-family: 'Teko', sans-serif; font-size: 2em;

Includes

• theme:ar
• :scp-wiki:component:collapsible-sidebar [info]

CSS Classes

• (none)

Page Source

[[>]]
[[module rate]]
[[/>]]

[[include theme:ar]]
[[include fragment:peppo-card-grid
| cardBG=#1c1c1c
| color1 = #b81818
| color2= white
]]
[!-- [[include :scp-wiki:component:collapsible-sidebar]] --]
[[span style="font-family: 'Teko', sans-serif; font-size: 3.8em; line-height:1em; color:#b81818"]]Works by PeppersGhost[[/span]]

[[span style="font-family: 'Teko', sans-serif; font-size: 2em;"]]SORT BY:[[/span]]
[[tabview]]
[[tab Highested Rated]]
[[include fragment:peppo-card-collection
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
]]
[[/tab]]
[[tab Newest]]
[[include fragment:peppo-card-collection
| orderNew = articleOrder
| orderOld = null
| orderRate = null
| orderNum = null
]]
[[/tab]]
[[tab Oldest]]
[[include fragment:peppo-card-collection
| orderNew = null
| orderOld = articleOrder
| orderRate = null
| orderNum = null
]]
[[/tab]]
[[tab Item #]]
[[include fragment:peppo-card-collection
| orderNew = null
| orderOld = null
| orderRate = null
| orderNum = articleOrder
]]
[[/tab]]
[[tab Only Tales]]
[[include fragment:peppo-card-collection
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
| SCP = none
| GOI = none
]]
[[/tab]]
[[tab Only GoI]]
[[include fragment:peppo-card-collection
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
| SCP = none
| tale = none
]]
[[/tab]]
[[/tabview]]

[[module css]]

/*-----------------------------------------------*\
 *       ANDERSON ROBOTICS/Peppo edit     *
\*-----------------------------------------------*/

/*-----------------------*\
 *   Fonts and Colours   *
\*-----------------------*/

@import url('https://fonts.googleapis.com/css?family=Teko:300,400,600&display=swap');

:root {
    --light-accent: #b81818;
    --dark-accent: #5e1c1c;
    --hyperlink: #c23030;
        --hyperlink-visited: #690e0e;
}

/*------------------*\
 *    Top Header    *
\*------------------*/

div#container-wrap {
    background: url(https://topia.wdfiles.com/local--files/peppo-woowoo/pep_bg.png) top left repeat-x;
}

#login-status {color: #271010;}

#login-status a {color: #881717;}

#header { background-image: initial; }

#header::before {
    content: "";
    background-image: initial;
    visibility: hidden;
}

#header h1 a::before {
    content: "Shhhhh.";
    color: #b81818;
}

#header h2 span::before {
    content: "They're sleeping.";
    color: #b81818;
}

/*------------------*\
 *    Search bar    *
\*------------------*/

#search-top-box-input {
    background-color: white;
    border: rgba(184,24,24,0.5) 1px solid;
    border-radius: 0;
    padding: 0.15rem 0.15rem 0.2rem 0.15rem;
}

#search-top-box-input:hover, #search-top-box-input:focus {
    background-color: #b81818;
    border: rgba(184,24,24,0) 1px solid;
    box-shadow: none;
}

#search-top-box input.empty {text-align:center;}

#search-top-box input.empty:hover, #search-top-box input.empty:focus {color: #fff;}

#search-top-box-form input[type=submit] {
    padding: 0.3rem;
    border-radius: 0.5rem;
    border: rgba(0,0,0,0) 1px solid;
    background: #b81818;
    background: var(--light-accent);
    font-family: 'Roboto Mono',monospace;
    box-shadow:none;
    margin-left: 0.3rem;
}

#search-top-box-form input[type=submit]:hover {
    border: 1px solid #b81818;
    border: 1px solid var(--light-accent);
    border-radius: 0;
    background: white;
    color: #b81818;
    box-shadow:none;
    padding: 0.3rem;
    border-radius: 0.5rem;
}


#search-top-box-form input.button.btn{
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/*-----------------------*\
 *   Formatting tweaks   *
\*-----------------------*/

.new-page-box {display:none;}

#page-title {display: none;}

#breadcrumbs {margin:0;}

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

/*------------------*\
 *       Tabs       *
\*------------------*/

.yui-navset .yui-nav .selected {padding: 0 0.5em !important;}

#page-content .yui-navset .yui-content > div[style*="block"] {overflow:visible}

.yui-navset .yui-content > div { background-color:transparent !important; border:none !important; padding: 0em !important; }

#page-content .yui-navset .yui-content > div[style*="none"] {padding: 0em !important;}

.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
    border: 1px solid #ff8a84;
    padding: 0.05em 0 0 0;
}

/*------------------*\
 *    widen ur wurld    *
\*------------------*/

#side-bar {width:10rem;}
#main-content {margin-left:12em}

/*------------------*\
 *    stop havin rating border    *
\*------------------*/
div.page-rate-widget-box .rate-points {
border:none;
padding: 2px 10px;
}
.page-rate-widget-box .ratedown, .page-rate-widget-box .rateup {
border-top:none;
border-bottom:none;
padding:2px
}
.page-rate-widget-box .cancel {
border:none;
padding:2px;
}

/*------------------*\
 *    Responsive    *
\*------------------*/

@media (max-width: 767px) {

    #main-content {
        margin: 0 1.5% 0 1.5% !important;
        max-width: 900px;
        padding: 1rem 0rem !important;
    }

    #page-options-container {max-width: 95%;}

    #content-wrap {0 0.4rem 0 0.25rem}
}
[[/module]]