Flopstyle: DARK

Flopstyle: DARK
Bởi Author
Đăng vào 25 Nov 2022 15:22

Đây là một ví dụ về authorbox. Xem phần Thanh Cạnh tại wiki EN để tìm hiểu thêm.

Flopstyle: DARK
Việc cho tôi fork theme Penumbra là một sai lầm nghiêm trọng.

Đây là một ví dụ về sidebox.

⮤ Đây là một flavorbox ⮥

Xem phần Thanh Cạnh tại wiki EN để tìm hiểu thêm.

Flopstyle: DARK

Đánh Giá

Đánh Giá + Module Thông Tin

Thông Tin

---

Nếu bạn thích theme này, xem trang tác giả của tôi!

---

Module Thông Tin Riêng

Thông Tin

---

ĐÂY LÀ TRANG THEME DỊCH

---

Để truy cập hướng dẫn sử dụng các tính năng của theme, vui lòng truy cập tại

https://scp-wiki.wikidot.com/theme:flopstyle-dark

---

Để thêm theme Việt Hóa vào bài viết của bạn, thêm đoạn lệnh sau:

[[include :scp-vn:theme:flopstyle-dark |author=tên tác giả gốc tại wiki EN]]

Nếu theme được sử dụng trong một bài viết của wiki VN (không phải bản dịch), sử dụng cú pháp sau:

[[include :scp-vn:theme:flopstyle-dark |author=tên tác giả viết bài VN]]

Mã Nguồn

---

Hiện Mã Nguồn

/* FONTS */
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap);
/* YUI TAB BASE */
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);

/* Flopstyle: DARK
 * [2022 Wikidot Theme]
 * Created by Lt Flops
 * Forked From:
 *   Flopstyle CSS by Lt Flops
 *   PLACESTYLE CSS by Placeholder McD
 * Based On:
 *   Ad Astra Theme by NatVoltaic, stormbreath
 *   AZASTYLE CSS by Azamo
 *   BASALT Theme by Azamo, Placeholder McD
 *   BLANKSTYLE CSS by Placeholder McD, HarryBlank
 *   Night Rush Theme by Nagiros
 *   Paperstack Theme by EstrellaYoshte
 *   Penumbra Theme by EstrellaYoshte
**/
 
/* -------- HEADER AREA -------- */
/* ---- COMMON ---- */
 :root{
   /* -- CHANGEABLE COLORS -- */
     --accentColor: hsl(325, 85%, 55%);
     --accentColorLite: hsla(325, 85%, 65%, .5);
     --hue: 325deg;
     --tint: calc(var(--hue) - 40deg);
 
     --titleColor: var(--accentColor);
     --subtitleColor: var(--accentColor);
 
   /* -- STATIC COLORS -- */
     --textColor: hsl(212, 3%, 85%);
     --textColorAlt: hsl(212, 3%, 79%);
 
     --bgColor: hsl(222, 12%, 21%);
     background: var(--bgColor);
     --fgColor: hsl(222, 16%, 15%);
 
     --alphaColor: hsl(0, 0%, 100%);
     --keyColor: hsl(0, 0%, 5%);
 
     --bright-red: hsl(360, 89%, 62%);
     --strong-lime-green: hsl(120, 80%, 40%);
     --dark-grayish-blue: hsl(212, 15%, 63%);
 
   /* -- LOGO -- */
     --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png);
 
   /* -- FONTS -- */
     --header-font: "Montserrat", sans-serif;
     --body-font: "Inter", sans-serif;
     --script-font: Comic Sans, cursive;
 
   /* -- MISCELLANEOUS --
    *   Courtesy Of EstrellaYoshte
    */
     --side-bar-width: 17em;
     --content-wrap-width: 1080px;
}
 
 html{
     scroll-behavior: smooth;
}
 
 body{
   /* -- ACS COLORS --
    *   Courtesy of Nagiros
  **/
     --one-color: 40, 159, 107;   /* Green */
     --two-color: 117, 167, 242;   /* Blue */
     --three-color: 255, 226, 82;   /* Yellow */
     --four-color: 255, 141, 54;   /* Orange */
     --five-color: 255, 34, 67;   /* Red */
     --six-color: 161, 73, 248;   /* Violet */
 
     --white-bar: 205, 206, 208;   /* White */
     --lg-bar: 118, 118, 130;
     --gray-bg: 66, 66, 72;
 
     color: var(--textColor);
     background-image:
        linear-gradient(
          var(--fgColor) 0 90px,
          var(--bgColor) 200px 100%);
     background-repeat: no-repeat;
 
     font-family: var(--body-font);
     font-size: 15px;
     text-rendering: optimizeLegibility;
     overflow-wrap: break-word;
}
 
 #content-wrap{
     max-width: var(--content-wrap-width);
     margin: 2.5em auto 0;
}
 
 #side-bar{
     width: var(--side-bar-width);
}
 
 #main-content{
     top: -.8em;
}
 
 @media (max-width: 767px){
     #main-content{
          margin: 0 5%;
    }
}
 
 @media (min-width: 768px){
     #page-content{
          font-size: calc(15px * 1.05);
    }
}
 
/* ---- SCROLLBAR + SELECTION ---- */
 :root{
     scrollbar-color: var(--accentColor) var(--fgColor);
}
/* Cross-Browser Supports */
 ::-webkit-scrollbar{
     width: 1rem;
}
 ::-webkit-scrollbar-thumb{
     background: var(--accentColor);
}
 ::-webkit-scrollbar-track{
     background: var(--fgColor);
}
 ::selection{
     color: var(--keyColor);
     background: var(--accentColor);
}
 
/* ---- SITE BANNER ---- */
 div#container-wrap,
 #header{
     background: 0;
}
 #header h1,
 #header h2{
     float: none;
     margin: 0;
 
     text-align: center;
}
 #header h2{
     margin-top: .5em;
}
 #header h1 span,
 #header h2 span{
   /* Hides the Existing Text */
     display: none;
}
 #header h1 a::before{
   /* Sets the New Text's Content From Variable */
     content: var(--header-title, "TỔ CHỨC SCP");
 
     color: var(--titleColor);
 
     font-size: 1.1em;
}
 #header h2::before{
     content: var(--header-subtitle, "QUẢN THÚC - LƯU TRỮ - BẢO VỆ");
 
     color: var(--subtitleColor);
 
     font-size: 1.25em;
}
 #header h1 a::before,
 #header h2::before{
   /* Styles the New Text */
     font-family: var(--header-font);
     letter-spacing: 2px;
     text-shadow: none;
}
 @media (max-width: 767px){
     #header h2{
          margin-top: 0;
    }
     #header h1 a::before{
          font-size: calc(110% * .7);
    }
     #header h2::before{
          font-size: calc(125% * .7);
    }
}
 #extra-div-1{
     position: absolute;
     top: 0;
     width: 100%;
     height: 11.67em;
 
     background: var(--lgurl) center no-repeat;
     background-size: contain;
     filter: opacity(.33);
 
     z-index: 1;
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
    }
}
 #search-top-box-form input.button{
     margin: 0;
}
 #search-top-box-form input[type=submit]{
     background: var(--fgColor) !important;
     transition: color .2s ease-in-out;
}
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     border-radius: 0;
     box-shadow: none;
 
     font-family: var(--body-font);
     font-size: calc(15px * 1.05);
}
 #search-top-box-form input[type=submit]:hover{
     color: var(--accentColor);
     border-color: var(--accentColor);
}
 #search-top-box-form > input[type=text]{
     display: none;
}
 
/* ---- TOP-BAR ---- */
 #top-bar{
     display: flex;
     justify-content: center;
     right: 0;
}
 .top-bar::before{
     position: absolute;
     top: -.5em;
     left: calc(100% / 4);
     width: calc(100% / 2);
     height: 5px;
     content: "";
 
     background:
        linear-gradient(
          to right,
          transparent,
          var(--accentColor) 50%,
          transparent 100%);
}
 #top-bar,
 #top-bar a{
     color: var(--textColor);
     transition: 0;
}
 #top-bar ul li ul{
     border-color: var(--accentColor);
}
 #top-bar ul li ul a{
     color: var(--textColor);
}
 #top-bar ul li.sfhover a,
 #top-bar ul li:hover a{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 #top-bar ul li.sfhover ul li a,
 #top-bar ul li:hover ul li a{
     border-top-color: var(--bgColor);
}
 #top-bar ul li.sfhover a:hover,
 #top-bar ul li:hover a:hover{
     color: var(--accentColor);
   /* Top-Bar Hover Background-Color */
     background: var(--fgColor);
     transition: color .2s ease-in-out;
}
 @media (max-width: 767px){
     .mobile-top-bar{
          display: flex;
          justify-content: center;
          min-width: 100%;
          top: 0;
          left: 0;
    }
     .mobile-top-bar::before{
          position: absolute;
          top: -.425em;
          width: calc(100% / 1.2909);
          height: 5px;
          content: "";
 
          background:
             linear-gradient(
               to right,
               transparent,
               var(--accentColor) 50%,
               transparent 100%);
    }
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: var(--textColor);
     z-index: 1;
}
 @media (max-width: 767px){
     #login-status{
          top: 0;
          right: 0;
 
          z-index: 20;
    }
}
 #login-status a{
     color: var(--accentColor);
}
 #login-status ul a{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 #login-status ul a:hover{
     color: var(--accentColor);
     background: var(--bgColor);
}
 @media (max-width: 767px){
     #header .printuser{
          font-size: 0;
    }
}
 .printuser a{
     margin: 0;
}
 .printuser img.small{
     width: 18px;
     height: 18px;
     padding: 1px 4px 0 0;
 
     background-image: none !important;
}
 @media (max-width: 767px){
     #header .printuser img.small{
          transform: translate(0, 4px);
    }
}
 #my-account{
     display: none;
}
 #account-topbutton{
     border-color: var(--accentColor);
 
     font: unset;
}
 @media (max-width: 767px){
     #account-topbutton{
          margin: 0 0 0 5px;
    }
}
 #account-topbutton:hover{
     color: var(--fgColor);
     background: var(--accentColor);
}
 
/* ---- SIDE-BAR ---- */
 #top-bar .open-menu a{
     color: var(--accentColor);
     background: var(--fgColor);
     border: thin solid var(--accentColor);
     border-radius: 0;
     box-shadow: none;
}
 #top-bar .open-menu a:hover{
     padding: 0;
 
     color: var(--fgColor);
     background: var(--accentColor);
}
 @supports (-moz-appearance: none){
     #top-bar .open-menu a:hover{
          color: var(--fgColor);
          background: var(--accentColor);
    }
}
 #side-bar{
     padding: 1em 0;
 
     background: var(--fgColor);
}
 #side-bar .side-block{
     background: var(--fgColor);
     border: 0;
     box-shadow: none;
}
 #side-bar .side-block.media{
     background: var(--fgColor);
}
 .side-block.media a:hover{
     padding: 0;
}
 #side-bar .side-block.resources{
     background: var(--fgColor);
}
 .side-block.media > *{
     display: flex;
     justify-content: space-evenly;
}
 .menu-item > .image{
     display: none;
}
 #side-bar .heading{
     color: var(--textColorAlt);
     border-bottom-color: var(--textColor);
 
     font: bold 95% "Josefin Sans", sans-serif;
}
 @media (max-width: 767px){
     #top-bar .open-menu a:hover{
          box-shadow: none;
    }
     #side-bar .heading{
          margin-left: -1em;
          padding-left: 1em;
    }
     #side-bar:target{
          border: 0;
    }
     #side-bar .close-menu{
          position: fixed;
          display: block;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
 
          background: hsla(0, 0%, 0%, .3);
          background-position: 17em 50%;
          opacity: 0;
          transition:
             width .5s ease-in-out .1s,
             opacity 1s ease-in-out 0s;
 
          pointer-events: none;
          z-index: -1;
    }
     #side-bar:target .close-menu{
          right: 0;
          left: auto;
          width: calc(100% - var(--side-bar-width));
 
          opacity: 1;
 
          pointer-events: auto;
    }
     #side-bar:target .close-menu:hover{
          background: unset;
    }
}
 
/* -------- CONTENT AREA -------- */
/* ---- SIDEBOXES | TYPE 'A' ----
 * Adapted From:
 *   Penumbra Theme by EstrellaYoshte
**/
 .anchor{
     position: -webkit-sticky;
     position: sticky;
     top: 0;
 
     z-index: 5;
}
 .authorbox,
 .sidebox,
 .sidecontainer{
     position: absolute;
     width: calc((100vw - 870px) / 2);
     max-height: calc(100vh - 15rem);
     padding: .33rem 1.6rem;
 
     box-sizing: border-box;
 
     z-index: 5;
}
 .authorbox,
 .sidebox{
     font-size: 90%;
}
 .authorbox{
     right: 103.5%;
     max-width: calc((100vw - 921.2px) / 2) !important;
     margin-right: .53rem;
     padding-right: 1rem;
}
 .sidebox,
 .sidecontainer{
     left: 103.5%;
}
 @media (max-width: 1280px){
     .authorbox,
     .sidebox{
          display: none;
    }
}
 .authorbox .wiki-content-table,
 .sidebox .wiki-content-table{
     max-width: 20em !important;
}
 .sidebox img{
     width: 7.5em;
}
 .authorbox tr th,
 .authorbox tr td,
 .sidebox tr th,
 .sidebox tr td{
     padding: .27rem !important;
}
 .flavorbox{
     width: 75%;
     margin: auto auto .33rem;
     padding: 0 1rem;
 
     color: var(--textColorAlt);
     background: var(--fgColor);
     border: thin solid var(--accentColor);
}
 
/* ---- SIDEBOXES | TYPE 'B' ----
 *   Courtesy Of Woedenaz
**/
 .limit{
     line-height: 1.5;
}
 .limit br{
     display: block;
}
 .sidecontainer{
     margin-left: .53rem;
 
     color: var(--textColorAlt);
     background-color: var(--fgColor);
     border-top: medium solid var(--accentColor);
 
     overflow: auto;
}
 @media (max-width: 1280px){
     .sidecontainer{
          top: 1rem;
          right: calc(((100vw - 45.8rem) / 2) * -1);
          left: initial;
          width: auto;
          max-width: 65vw !important;
          padding-right: .4rem;
          padding-left: .4rem;
 
          background-color: hsla(0, 0%, 0%, 0);
          border: 0;
          -webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem));
          clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem));
          -webkit-transition:
             color .2s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s;
          transition:
             color .2s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s;
          -o-transition:
             color .2s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s;
          transition:
             color .2s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s;
          transition:
             color .2s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s;
 
          overflow-x: hidden;
          overflow-y: hidden;
          scrollbar-width: thin;
    }
     .sidecontainer::-webkit-scrollbar{
          width: .5rem;
    }
     .sidecontainer::before,
     .sidecontainer::after{
          position: absolute;
          right: 0;
          content: "";
    }
     .sidecontainer::before{
          top: calc(50% - .75rem);
          width: 0;
          height: 0;
 
          border-top: 11px solid transparent;
          border-right: 11px solid var(--accentColor);
          border-bottom: 11px solid transparent;
          transition: border .2s ease-in-out .1s;
 
          z-index: 10;
    }
     .sidecontainer::after{
          top: 0;
          width: 100%;
          max-width: .75rem;
          height: 100%;
          max-height: calc(100vh - 15rem);
 
          background: var(--fgColor);
          box-shadow: .125rem 0 0 0 var(--accentColor);
          transition:
             box-shadow .4s ease-in-out .1s,
             max-width .4s ease-in-out .1s;
 
          z-index: -1;
    }
     .sidecontainer > *{
          opacity: 0;
          -webkit-transition: opacity .2s ease-in-out .2s;
          -o-transition: opacity .2s ease-in-out .2s;
          transition: opacity .2s ease-in-out .2s;
    }
     .sidecontainer:hover,
     .sidecontainer:active{
          background-color: var(--fgColor);
          -webkit-clip-path: inset(-.125rem -.25rem 0 0);
          clip-path: inset(-.125rem -.25rem 0 0);
          -webkit-transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s;
          transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s;
          -o-transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s;
          transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s;
          transition:
             color .4s ease-in-out .2s,
             right .4s ease-in-out .1s,
             clip-path .4s ease-in-out .1s,
             box-shadow .4s ease-in-out .1s,
             -webkit-clip-path .4s ease-in-out .1s,
             -webkit-box-shadow .4s ease-in-out .1s;
 
          overflow-y: scroll;
    }
     .sidecontainer:hover::before,
     .sidecontainer:active::before{
          border: 0;
    }
     .sidecontainer:hover::after,
     .sidecontainer:active::after{
          right: 0;
          max-width: 100%;
 
          box-shadow: 0 -.125rem 0 0 var(--accentColor);
    }
     .sidecontainer:hover > *,
     .sidecontainer:active > *{
          opacity: 1;
          transition: opacity .4s ease-in-out .1s;
    }
}
 @media (max-width: 767px){
     .sidecontainer,
     .sidecontainer:hover,
     .sidecontainer:active{
          right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1.6rem);
    }
}
 
/* ---- FANCY COLLAPSIBLES ---- */
/* Base */
 .collapsible-block-folded,
 .collapsible-block-unfolded-link{
     margin: 1rem auto;
     padding: .53rem 1rem;
 
     background: var(--fgColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
 
     text-align: center;
}
 .collapsible-block-unfolded-link{
     border-top: thick solid var(--accentColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 .collapsible-block-unfolded > *:nth-child(3){
     border-top: 0;
     border-bottom: thick solid var(--accentColor);
}
 .collapsible-block-link{
     font: 1.35rem var(--header-font);
     letter-spacing: 1px;
 
     white-space: nowrap;
     word-break: break-all;
}
 @media (max-width: 767px){
     .collapsible-block-link{
          font-size: .85rem;
    }
}
 
/* Pseudo-elements */
 .collapsible-block-link::before{
     content: "+ ";
}
 .collapsible-block-link::after{
     content: " +";
}
 .collapsible-block-unfolded .collapsible-block-link::before,
 .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::before{
     content: "− "
}
 .collapsible-block-unfolded .collapsible-block-link::after,
 .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::after{
     content: " −"
}
 .collapsible-block-folded:hover,
 .collapsible-block-unfolded-link:hover{
     background-color: var(--accentColorLite);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 .collapsible-block-link:hover{
     padding: .067rem !important;
 
     color: var(--alphaColor);
     border-bottom: thin solid var(--alphaColor) !important;
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 
/* Side-bar Collapsible */
 #side-bar .collapsible-block-link{
     font-size: unset;
}
 #side-bar .collapsible-block-unfolded-link{
     border-bottom: 0;
}
 #side-bar .collapsible-block-unfolded-link .collapsible-block-link{
     color: var(--accentColor);
}
 #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover{
     color: var(--alphaColor);
}
 
/* Licensebox Collapsible */
 .licensebox .collapsible-block-content {
     text-align: center;
}
 
 .licensebox blockquote,
 .licensebox div.blockquote {
     text-align: left;
}
 
/* ---- INFO BAR ---- */
 .info-container{
     --barColour: var(--fgColor);
     --linkColour: var(--accentColor);
}
 .info-container .collapsible-block-link{
     font-size: 100%;
}
 .info-container .collapsible-block-unfolded-link{
     border: 0;
}
 .info-container div.collapsible-block-content{
     padding: 0 .53rem 3rem;
}
 @media (max-width: 767px){
     .info-container div.collapsible-block-content div{
          margin: 0;
    }
}
 .info-container .wiki-content-table{
     width: 90%;
}
 .info-container .collapsible-block-folded,
 .info-container .collapsible-block-unfolded-link{
     padding: 0;
}
 .info-container .collapsible-block-folded:hover,
 .info-container .collapsible-block-unfolded-link:hover{
      background-color: var(--accentColor);
     --linkColour: var(--fgColor);
}
 #u-author_block > p > a,
 #u-author_block > p > a:hover{
     border-bottom: thin solid var(--accentColor);
     box-shadow: none !important;
     transition: all .2s cubic-bezier(.77, 0, .18, 1) !important;
 
     font-weight: bold;
}
 #u-author_block > p > a:hover{
     padding: .8rem;
 
     color: var(--barColour);
     background: var(--linkColour);
}
 
/* -- INFO BAR PATCH --
 *   Courtesy Of Monkatraz
**/
 .info-container .collapsible-block-link,
 .info-container .collapsible-block-link:hover,
 .info-container .collapsible-block-unfolded-link,
 .info-container .collapsible-block-unfolded-link:hover{
     padding: 0 !important;
}
 .info-container .collapsible-block-link::before,
 .info-container .collapsible-block-unfolded-link::before,
 .info-container .collapsible-block-link::after,
 .info-container .collapsible-block-unfolded-link::after{
     display: none;
}
 
/* ---- PAGE RATING ---- */
 .page-rate-widget-box{
     display: flex;
     width: max-content;
     margin: .53rem auto;
     padding: .2rem;
 
     background: var(--fgColor);
     border-radius: 0;
     box-shadow:
        3px 0 0 0 var(--accentColor),
        -3px 0 0 0 var(--accentColor);
}
 div.page-rate-widget-box .rate-points{
     color: var(--textColorAlt);
     background: var(--fgColor);
     border: 0;
 
     text-transform: capitalize;
}
 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown,
 .page-rate-widget-box .cancel{
     background: var(--fgColor);
     border: 0;
}
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a,
 .page-rate-widget-box .cancel a{
     color: var(--textColorAlt);
}
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover,
 .page-rate-widget-box .cancel a:hover{
     color: var(--keyColor);
}
 .page-rate-widget-box .rateup a:hover{
     background-color: var(--strong-lime-green);
}
 .page-rate-widget-box .ratedown a:hover{
     background-color: var(--bright-red);
}
 .page-rate-widget-box .cancel a:hover{
     background-color: var(--dark-grayish-blue);
     border-radius: 0;
}
 
/* ---- INFO MODULE ---- */
 #page-content .creditRate{
     float: none;
     display: flex;
     width: max-content;
     margin: .53rem auto;
}
 #page-content .rate-box-with-credit-button{
     padding: .2rem 0;
 
     background: var(--fgColor);
     border: 0;
     border-radius: 0;
     box-shadow:
        3px 0 0 0 var(--accentColor),
        -3px 0 0 0 var(--accentColor);
}
 .creditRate .page-rate-widget-box{
     display: inline;
}
 #page-content .creditButton p a{
     padding: 0;
 
     border: 0;
 
     font-size: .9rem;
}
 .creditButton p a,
 .creditButtonStandalone p a{
   /* Affects creditButton + creditButtonStandalone */
     color: var(--textColorAlt);
}
 .rate-box-with-credit-button .fa-info:hover{
     color: var(--strong-lime-green);
}
 #page-content .modalbox{
     padding: .53rem;
 
     background: var(--bgColor);
     box-shadow: none;
}
 #page-content .modalbox .page-rate-widget-box{
     margin: auto;
}
 .close-credits,
 .credit-back{
     filter: invert(.4) sepia(.5) saturate(500%) hue-rotate(var(--tint));
}
 #page-content .close-credits{
     width: 4rem;
}
 
/* ---- STANDALONE INFO MODULE ---- */
 #page-content .creditButtonStandalone p a{
     padding: .2rem 0 !important;
 
     background: var(--fgColor);
     border-radius: 0;
     box-shadow:
        3px 0 0 0 var(--accentColor),
        -3px 0 0 0 var(--accentColor);
 
     font-size: .9rem;
}
 #page-content .creditButtonStandalone p a:hover{
     padding: .2rem 0 !important;
 
     color: var(--keyColor);
     background: var(--accentColor);
}
 
/* ---- BYLINE ---- */
 .byline{
     display: flex;
     margin-top: -.33rem;
 
     font-size: 85%;
     text-align: center;
}
 .byline p{
     display: flex;
     flex-direction: column;
     max-width: 50%;
     margin: auto;
 
     line-height: 0;
}
 .byline span:nth-of-type(1):before,
 .byline span:nth-of-type(2):before{
     padding-right: .27rem;
 
     color: var(--accentColor);
 
     font: 135%/1 "Lucida Sans Unicode", "Lucida Grande", "Arial Unicode MS", sans-serif;
}
 .byline span:nth-of-type(1):before{
     content: "✒"
}
 .byline span:nth-of-type(2):before{
     content: "⧗"
}
 .byline span:nth-of-type(2):after{
     content: " phút đọc"
}
 
/* ---- FORMATTING | [GENERAL] ---- */
 h1, h2, h3, h4, h5, h6{
     display: flex;
     justify-content: center;
 
     font-family: var(--header-font);
     line-height: 1.2;
     text-align: center;
     text-underline-offset: 25%;
}
 h1, h2, h3, h4{
     color: var(--accentColor);
}
 h5, h6{
     color: var(--textColorAlt);
}
 
 h1{ font-size: 1.95rem; }
 h2{ font-size: 1.55rem; }
 h3{ font-size: 1.35rem; }
 h4{ font-size: 1.25rem; }
 h5{ font-size: 1.05rem; }
 h6{ font-size: .95rem; }
 
 #page-title{
     display: none;
}
 .meta-title,
 #breadcrumbs,
 .pseudocrumbs{
     text-align: center;
}
 .meta-title{
     margin: 0;
 
     color: var(--accentColor);
     border: 0;
 
     font: 1.95rem var(--header-font);
     letter-spacing: 1px;
}
 .meta-title p{
     border-bottom: thin solid var(--accentColorLite);
}
 hr{
     height: 0;
     margin: 1rem 0;
 
     background: transparent;
     border-top: thin solid var(--accentColorLite);
}
 @media (max-width: 767px){
     .meta-title p{
          margin: 0 -5.5%;
    }
     #page-content > hr,
     #page-content > .list-pages-box > .list-pages-item > hr{
          margin: 3rem -5.5%;
    }
}
 *, a, span{
   /* No Line Breaks Mid-Word */
     word-break: normal;
}
 ul{
     list-style-type: "❖ ";
}
 li, p{
     line-height: 1.5;
     text-decoration-color: var(--textColor);
     text-underline-offset: 30%;
}
 ol li, ul li{
     margin: .27rem 0 .53rem;
}
 ol li::marker{
     font-weight: bold;
}
 #toc{
     background: var(--fgColor);
     border: 0;
     border-top: thick solid var(--accentColor);
}
 #toc .title{
     color: var(--accentColor);
}
 strong{
     color: var(--accentColor);
 
     text-decoration-color: inherit;
}
 
 #page-content h2,
 #page-content h3,
 #page-content h4{
     filter: saturate(.85) brightness(1.15);
}
 
/* Links */
 a,
 a.newpage,
 a:visited,
 #side-bar a:visited{
     color: var(--accentColor);
     transition: color .2s ease-in-out;
}
 a.newpage{
     filter: hue-rotate(30deg);
}
 a:hover,
 a.newpage:hover,
 a:visited:hover,
 #side-bar a:visited:hover{
     padding-bottom: .13rem;
 
     color: var(--keyColor);
     background-color: var(--accentColor);
 
     text-decoration: none;
}
 #page-content a{
     padding-bottom: .067rem;
 
     border-bottom: thin solid var(--accentColorLite);
}
 #page-content a:hover{
     padding-bottom: .13rem;
}
 #page-content a:hover,
 #page-content .rateup a, #page-content .ratedown a, #page-content .cancel a,
 #page-content .pseudocrumbs a,
 #page-content .creditButtonStandalone p a,
 #page-content a.disruptionHeader,
 #page-content .yui-nav li a,
 #page-content #toc a{
     border: 0;
}
 #page-content a.disruptionHeader{
     padding: .33rem 0;
}
 #page-content .yui-nav li a{
     padding: 0;
}
 
/* ---- FOOTNOTES ---- */
 sup{
     top: -.375em;
}
 #page-content a.footnoteref{
     border: 0;
 
     font-size: .9rem;
     font-weight: bold;
}
 #page-content a.footnoteref:hover{
     padding: 0 .13rem;
 
     color: var(--keyColor);
}
 .hovertip{
     font-size: 1rem;
 
     background: var(--fgColor) !important;
     border: thin solid var(--accentColor) !important;
}
 .footnotes-footer,
 .equation .e-footer,
 .footnote .f-footer,
 .reference .r-footer{
     display: none;
}
 
/* ---- IMAGE BLOCK ---- */
/* -- STANDARD -- */
 .scp-image-block{
     border-color: var(--accentColor);
     box-shadow: none;
     box-sizing: border-box;
}
 .scp-image-block .scp-image-caption{
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: var(--accentColor);
 
     font-size: 100%;
}
 .scp-image-block.block-right{
     margin-right: 0;
}
 @media (max-width: 540px){
     .scp-image-block.block-right,
     .scp-image-block.block-left{
          float: none;
 
          margin-right: auto;
          margin-left: auto;
    }
}
 @media only screen and (max-width: 600px){
     .scp-image-block.block-right{
          float: none;
    }
}
 
/* -- BS IMAGE --
 *   by Timothy Foster
**/
 .image-box{
     background: var(--fgColor) !important;
}
 
 .image-box-heading{
     color: var(--keyColor) !important;
 
     font: 1.25rem var(--header-font) !important;
}
 
 .image-box-link{
     padding: 0 !important;
 
     border: 0 !important;
}
 
 .image-box-caption{
     font-size: 100% !important;
}
 
/* Primary */
 .image-box-primary .image-box-link:hover{ background: var(--accentColorLite); }
 .image-box-primary{ border-color: var(--accentColor) !important; }
 .image-box-primary .image-box-heading{ background: var(--accentColor) !important; }
 .image-box-primary .image-box-caption{ color: var(--textColorAlt) !important; }
 
/* Info */
 .image-box-info .image-box-link:hover{ background: hsla(194, 66%, 71%, .5); }
 .image-box-info{ border-color: hsl(194, 66%, 61%) !important; }
 .image-box-info .image-box-heading{ background: hsl(194, 66%, 61%) !important; }
 
/* Success */
 .image-box-success .image-box-link:hover{ background: hsla(120, 39%, 64%, .5); }
 .image-box-success{ border-color: hsl(120, 39%, 54%) !important; }
 .image-box-success .image-box-heading{ background: hsl(120, 39%, 54%) !important; }
 
/* Danger */
 .image-box-danger .image-box-link:hover{ background: hsla(2, 64%, 68%, .5); }
 .image-box-danger{ border-color: hsl(2, 64%, 58%) !important; }
 .image-box-danger .image-box-heading{ background: hsl(2, 64%, 58%) !important; }
 
/* Warning */
 .image-box-warning .image-box-link:hover{ background: hsla(35, 84%, 72%, .5); }
 .image-box-warning{ border-color: hsl(35, 84%, 62%) !important; }
 .image-box-warning .image-box-heading{ background: hsl(35, 84%, 62%) !important; }
 
/* None */
 .image-box-none .image-box-link:hover{ background: hsla(0, 0%, 95%, .5); }
 .image-box-none .image-box-heading{ background: var(--textColorAlt) !important; }
 .image-box-none .image-box-caption{ color: var(--textColorAlt) !important; }
 
/* -- CENTERED IMAGES ON MOBILE ----
 * Courtesy Of:
 *   EstrellaYoshte
 *   PeppersGhost
**/
 .imagediv{
     float: right;
     margin: 1rem;
}
 @media (max-width: 540px){
     .imagediv{
          float: none;
 
          text-align: center;
    }
}
 
/* ---- TABLE STYLING ----
 * Adapted From:
 *   BLANKSTYLE CSS by Placeholder McD, HarryBlank
**/
 .table1{   /* Green */
   --accentColor: rgb(var(--one-color, 40, 159, 107));
   --accentColorLite: hsla(154, 60%, 49%, .5);
}
 .table2{   /* Blue */
   --accentColor: rgb(var(--two-color, 117, 167, 242));
   --accentColorLite: hsla(216, 83%, 80%, .5);
}
 .table3{   /* Yellow */
   --accentColor: rgb(var(--three-color, 255, 226, 82));
   --accentColorLite: hsla(50, 100%, 76%, .5);
}
 .table4{   /* Orange */
   --accentColor: rgb(var(--four-color, 255, 141, 54));
   --accentColorLite: hsla(26, 100%, 71%, .5);
}
 .table5{   /* Red */
   --accentColor: rgb(var(--five-color, 255, 34, 67));
   --accentColorLite: hsla(351, 100%, 67%, .5);
}
 .table6{   /* Violet */
   --accentColor: rgb(var(--six-color, 161, 73, 248));
   --accentColorLite: hsla(270, 93%, 73%, .5);
}
 .table0{   /* White */
   --accentColor: rgb(var(--white-bar, 205, 206, 208));
   --accentColorLite: hsla(212, 3%, 91%, .5);
}
 .table1 strong, .table2 strong, .table3 strong,
 .table4 strong, .table5 strong, .table6 strong,
 .table0 strong{
     filter: saturate(.85) brightness(1.15);
}
 #page-content .wiki-content-table tr th{
     padding: .4rem;
 
     color: var(--keyColor);
     background: var(--accentColor);
     border-color: var(--accentColor);
}
 #page-content .wiki-content-table tr th a{
     color: var(--alphaColor);
     border-color: var(--textColorAlt);
}
 #page-content .wiki-content-table tr th a:hover{
     color: var(--keyColor);
     background-color: var(--alphaColor);
}
 #page-content .wiki-content-table tr td{
     padding: .8rem;
 
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: var(--accentColor);
 
     line-height: 1.5;
}
 
/* ---- CELL SEPARATOR ----
 * Adapted From:
 *   BLANKSTYLE CSS by Placeholder McD, HarryBlank
**/
 .tableb table,
 .tableb .wiki-content-table{
     border-collapse: separate;
     border-spacing: .4rem;
}
 .tableb .scp-image-block{
     border: 0;
}
 .tableb .scp-image-block img,
 .tableb .scp-image-block .scp-image-caption{
     border: thin solid var(--accentColor);
}
 .tableb .scp-image-block .scp-image-caption{
     margin-top: .4rem;
}
 
/* ---- CUSTOM DIV BLOCKS ---- */
 .classification-header, .ethics-header, .miscomm-header,
 .oracle-header, .overwatch-header, .raisa-header,
 .warning-header{
     margin: 1rem 0;
     padding: 0 .53rem;
 
     background-position: top center;
     background-repeat: no-repeat;
     background-size: contain;
 
     text-align: center;
}
 .classification-header > p:nth-child(1)::before, .ethics-header > p:nth-child(1)::before,
 .miscomm-header > p:nth-child(1)::before, .oracle-header > p:nth-child(1)::before,
 .overwatch-header > p:nth-child(1)::before, .raisa-header > p:nth-child(1)::before{
     display: flex;
     justify-content: center;
     margin: .53rem 0;
     padding: 0 0 .8rem;
 
     font-family: var(--header-font);
     font-size: 1.35rem;
     letter-spacing: 1px;
}
 
 .classification-header{
   /* -- Classification Committee Header -- */
     color: var(--keyColor);
     background-image:
          linear-gradient(
               hsla(11, 30%, 85%, .7),
               hsla(11, 30%, 85%, .7)),
               url(https://i.imgur.com/wkUri0y.png);
     border: medium solid hsl(360, 26%, 26%);
     outline: 7px solid hsl(360, 0%, 76%);
}
 .classification-header > p:nth-child(1)::before{
     content: "FOUNDATION CLASSIFICATION COMMITTEE MEMO";
 
     color: hsl(360, 26%, 26%);
     border-bottom: medium solid hsl(360, 26%, 26%);
}
 .classification-header hr{
     border-color: hsl(360, 26%, 26%);
}
 
 .ethics-header{
   /* -- Ethics Committee Header -- */
     color: var(--keyColor);
     background-image:
          linear-gradient(
               hsla(212, 7%, 87%, .7),
               hsla(212, 7%, 87%, .7)),
               url(https://i.imgur.com/CQCcN7e.png);
     border: thick solid var(--keyColor);
}
 .ethics-header > p:nth-child(1)::before{
     content: "OFFICIAL ETHICS COMMITTEE MEMORANDUM";
 
     color: var(--fgColor);
     border-bottom: medium solid var(--fgColor);
}
 .ethics-header hr{
     border-color: var(--fgColor);
}
 
 .classification-header strong, .ethics-header strong{
     color: var(--keyColor);
}
 
 .miscomm-header{
   /* -- Miscommunications Notice -- */
     color: hsl(57, 98%, 68%);
     background-image:
          linear-gradient(
               hsla(9, 84%, 58%, .7),
               hsla(9, 84%, 58%, .7)),
               url(https://scp-wiki.wdfiles.com/local--files/desk-of-junior-designer-s-yvonne/miscdept.png);
     border: thin solid hsl(57, 98%, 68%);
     outline: 7px solid hsl(9, 51%, 47%);
}
 .miscomm-header strong{
     color: hsl(57, 98%, 68%);
}
 .miscomm-header > p:nth-child(1)::before{
     content: "NOTICE FROM THE FOUNDATION DEPARTMENT OF MISCOMMUNICATIONS";
 
     border-bottom: thin solid hsl(57, 98%, 68%);
}
 .miscomm-header hr{
     border-color: hsl(57, 98%, 68%);
}
 
 .oracle-header{
   /* -- ORACLE Header -- */
     color: var(--textColor);
     background-image:
        url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/spc_logo.png),
        url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/water_ripples.webp);
     background-position:
        top center,
        bottom center;
     background-size:
        contain,
        100%;
     border: thick solid var(--keyColor);
}
 .oracle-header > p:nth-child(1)::before{
     content: "FROM THE DESK OF ORACLE";
 
     border-bottom: medium solid var(--textColorAlt);
}
 .oracle-header hr{
     border-color: var(--textColor);
}
 
 .overwatch-header{
   /* -- Overwatch Header -- */
     color: var(--textColor);
     background-image:
          linear-gradient(
               hsla(205, 28%, 27%, .7),
               hsla(205, 28%, 27%, .7)),
               url(https://i.imgur.com/Q2TCZnd.png);
     border: thick solid hsl(205, 36%, 5%);
}
 .overwatch-header > p:nth-child(1)::before{
     content: "BY ORDER OF THE OVERWATCH COUNCIL";
 
     border-bottom: medium solid hsl(205, 36%, 5%);
}
 .overwatch-header hr{
     border-color: hsl(205, 36%, 5%);
}
 
 .raisa-header{
   /* -- RAISA Notice Header -- */
     color: var(--textColor);
     background-image:
          linear-gradient(
               hsla(60, 18%, 36%, .7),
               hsla(60, 18%, 36%, .7)),
               url(https://i.imgur.com/4uLBoQ3.png);
     border: thick solid hsl(0, 0%, 60%);
}
 .raisa-header > p:nth-child(1)::before{
     content: "NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION";
 
     border-bottom: medium solid hsl(0, 0%, 60%);
}
 .raisa-header hr{
     border-color: hsl(0, 0%, 60%);
}
 
 .warning-header{
   /* -- Warning Header (Adapted From 'SCP-3143' & 'SCP-5664') -- */
     color: var(--textColorAlt);
     background-attachment: fixed;
     background-color: hsl(356, 98%, 16%);
     background-image:
        url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_trans.png);
     background-position: center;
     background-size: 400px;
     border: thick solid var(--keyColor);
}
 .warning-header p:nth-child(1)::before{
     display: flex;
     justify-content: center;
     margin: .53rem 0;
     padding: 0 0 .8rem;
     content: "⚠ WARNING ⚠";
 
     border-bottom: medium solid var(--keyColor);
     filter: saturate(.85) brightness(1.15);
 
     font: 1.95rem var(--header-font);
}
 .warning-header hr{
     border-color: var(--keyColor);
}
 
 .oracle-header strong, .overwatch-header strong,
 .raisa-header strong, .warning-header strong{
     color: var(--textColorAlt);
}
 
 .classification-header h2, .ethics-header h2, .miscomm-header h2,
 .oracle-header h2, .overwatch-header h2, .raisa-header h2,
 .classification-header h3, .ethics-header h3, .miscomm-header h3,
 .oracle-header h3, .overwatch-header h3, .raisa-header h3,
 .classification-header h4, .ethics-header h4, .miscomm-header h4,
 .oracle-header h4, .overwatch-header h4, .raisa-header h4,
 .warning-header h2, .warning-header h3, .warning-header h4{
     color: inherit;
}
 
 .log-header, .report-box, .narration{
     margin: 1rem 0;
     padding: .02rem 1rem;
}
 
 div.blockquote.simple{
     margin: 1rem 0;
     padding: 0 1rem;
}
 
 .log-header{
   /* -- Interview/Incident/Exploration Log Header -- */
     color: var(--textColorAlt);
     background: var(--fgColor);
     border: thick dashed var(--accentColor);
     border-radius: 2rem;
}
 
 div.blockquote.larger, .darkbox.larger, .lightbox.larger, .report-box.larger{
   /* -- Larger Quote Size -- */
     font-size: 125%;
}
 
 blockquote, div.blockquote{
   /* -- Quote Block -- */
     padding: .02rem 1rem;
 
     color: var(--textColorAlt);
     background-color: var(--fgColor);
     border: 0;
     border-left: 7px dashed var(--accentColor);
     box-shadow: 5px 5px var(--bgColor);
}
 div.blockquote.solid{
   /* -- Alternative Quote 1 | Solid -- */
     border-left-style: solid;
}
 div.blockquote.classic{
   /* -- Alternative Quote 2 | Classic -- */
     border: medium solid var(--accentColor);
}
 div.blockquote.classic.curved{
   /* -- Alternative Quote 3 | Classic Curved -- */
     border-radius: 1.27rem;
}
 div.blockquote.lightweight{
   /* -- Alternative Quote 4 | Lightweight -- */
     border-left: 0;
}
 div.blockquote.simple{
   /* -- Alternative Quote 5 | Simple -- */
     color: var(--textColor);
     background: 0;
     border-left-style: solid;
}
 
 .darkbox, .lightbox{
     margin: 1rem 0;
 
     border-right: 7px solid var(--accentColor);
     border-left: 7px solid var(--accentColor);
}
 .darkbox{
     color: var(--textColorAlt);
     background: var(--fgColor);
 
     padding: .4rem .6rem;
}
 .lightbox{
     color: var(--fgColor);
     background: var(--textColorAlt);
 
     padding: .8rem;
}
 .lightbox hr{
     border-color: var(--keyColor);
}
 .lightbox h1, .lightbox h2, .lightbox h3,
 .lightbox h4, .lightbox h5, .lightbox h6{
     color: var(--fgColor);
}
 .lightbox strong,
 .lightbox a{
     font-weight: bold;
     filter: saturate(1.5) brightness(.5);
}
 .lightbox a:hover{
     color: var(--alphaColor);
     filter: unset;
}
 
 .report-box{
   /* -- Report Box -- */
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-top: 11px solid var(--accentColor);
}
 
 .red-tint, .orange-tint, .yellow-tint,
 .green-tint, .cyan-tint,
 .blue-tint, .magenta-tint, .grey-tint{
     color: var(--textColor);
     background: var(--fgColor);
     border: medium solid var(--accentColor);
}
 .red-tint, .red-tint hr, .red-tint h3{
   /* -- Alternative Report Block Colors -- */
   --fgColor: hsl(360, 48%, 45%);
   --accentColor: hsl(360, 62%, 75%);
   --accentColorLite: hsla(360, 62%, 85%, .5);
}
 .orange-tint, .orange-tint hr, .orange-tint h3{
   --fgColor: hsl(30, 48%, 35%);
   --accentColor: hsl(30, 50%, 73%);
   --accentColorLite: hsla(30, 50%, 83%, .5);
}
 .yellow-tint, .yellow-tint hr, .yellow-tint h3{
   --fgColor: hsl(60, 48%, 26%);
   --accentColor: hsl(60, 56%, 76%);
   --accentColorLite: hsla(60, 56%, 86%, .5);
}
 .green-tint, .green-tint hr, .green-tint h3{
   --fgColor: hsl(120, 48%, 29%);
   --accentColor: hsl(120, 56%, 76%);
   --accentColorLite: hsla(120, 56%, 86%, .5);
}
 .cyan-tint, .cyan-tint hr, .cyan-tint h3{
   --fgColor: hsl(180, 48%, 28%);
   --accentColor: hsl(180, 56%, 76%);
   --accentColorLite: hsla(180, 56%, 86%, .5);
}
 .blue-tint, .blue-tint hr, .blue-tint h3{
   --fgColor: hsl(240, 48%, 54%);
   --accentColor: hsl(240, 56%, 76%);
   --accentColorLite: hsla(240, 56%, 86%, .5);
}
 .magenta-tint, .magenta-tint hr, .magenta-tint h3{
   --fgColor: hsl(300, 48%, 41%);
   --accentColor: hsl(300, 56%, 76%);
   --accentColorLite: hsla(300, 56%, 86%, .5);
}
 .grey-tint, .grey-tint hr, .grey-tint h3{
   --fgColor: hsl(210, 24%, 39%);
   --accentColor: hsl(210, 12%, 75%);
   --accentColorLite: hsla(210, 12%, 85%, .5);
}
 .red-tint ::selection, .orange-tint ::selection, .yellow-tint ::selection,
 .green-tint ::selection, .cyan-tint ::selection,
 .blue-tint ::selection, .magenta-tint ::selection, .grey-tint ::selection{
     color: var(--keyColor);
}
 
 .overwatch-box{
   /* -- Overwatch Document Box -- */
     margin: 1rem 6rem;
     padding: .02rem 1rem;
 
     background: hsl(207, 24%, 25%);
     border: medium solid hsl(205, 36%, 5%);
}
 @media (max-width: 479px){
     .overwatch-box{
          margin: 1rem 0;
    }
}
 @media (min-width: 480px) and (max-width: 580px){
     .overwatch-box{
          margin: .53rem;
    }
}
 .overwatch-box strong{
     color: var(--textColorAlt);
}
 .overwatch-box hr{
     border-color: hsl(205, 36%, 5%);
}
 
 .narration{
   /* -- Mimics the Pages of a Book -- */
     border: 7px solid var(--fgColor);
}
 
 .journal{
   /* -- Page (Adapted From 'RAISA-007710') -- */
     margin: 1rem 0;
     padding: .73rem 1.33rem 1.33rem;
 
     background:
        linear-gradient(
          to top,
          hsl(225, 2%, 28%) 0%,
          hsl(0, 0%, 19%) 8%) 0 8px;
     background-size: 100% 1.33rem;
     border: thin solid gray;
}
 .journal p{
     margin: 0;
 
     font: 1.33rem/1.33rem var(--script-font);
}
 .journal strong{
     color: var(--textColor);
}
 .highlighter,
 .journal ::selection{
     padding: 0 .27rem;
     background: hsla(30, 99%, 59%, .3);
}
 
/* -- TEXT STYLE --
 *   by JaonHax
**/
/* External box */
 .text-container-wrap{
     background: var(--fgColor);
     border-color: var(--keyColor);
 
     pointer-events: all !important;
}
 .text-container-wrap h1, .text-container-wrap h2,
 .text-container-wrap h3, .text-container-wrap h4{
      color: var(--accentColor);
}
 .text-container-wrap h5, .text-container-wrap h6{
      color: var(--textColor);
}
 
/* Internal box */
 .text-container{
     background: var(--bgColor);
     box-shadow: none;
}
 
/* Messages */
 .recv .text{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 .sent .text{
     color: var(--alphaColor);
}
 .recv .text strong, .sent .text strong{
     color: var(--textColorAlt);
}
 .recv .text a{
     color: hsl(213, 94%, 58%);
     border-color: hsl(213, 94%, 58%) !important;
}
 .sent .text a{
     color: unset;
     border-color: var(--textColor) !important;
}
 .recv .text a:hover{
     color: var(--keyColor);
     background: hsl(213, 94%, 58%);
}
 .sent .text a:hover{
     background: hsl(214, 94%, 34%);
}
 
/* Selection */
 .text-container-wrap *::selection{
     background: hsla(214, 80%, 34%, .8) !important;
}
 
/* -- HAZARD BOX -- */
 .hazard-box{
   /* -- Overall -- */
     display: flex;
     align-items: center;
     margin: 1rem 0;
 
     background: var(--fgColor);
}
 .hazard-box-image{
   /* -- Image -- */
     width: calc(100% * .2);
     padding: .13rem 0 .13rem .53rem;
}
 .hazard-box-text{
   /* -- Text -- */
     width: 95%;
     margin: .27rem 0;
     padding: .27rem .53rem;
 
     color: var(--textColorAlt);
}
 .hazard-box-1{ border-left: 11px solid rgb(var(--one-color)); }   /* Green */
 .hazard-box-image-1{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(100deg) brightness(1.25);
}
 .hazard-box-2{ border-left: 11px solid rgb(var(--two-color)); }   /* Blue */
 .hazard-box-image-2{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(178deg) brightness(1.25);
}
 .hazard-box-3{ border-left: 11px solid rgb(var(--three-color)); }   /* Yellow */
 .hazard-box-image-3{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(12deg) brightness(1.75);
}
 .hazard-box-4{ border-left: 11px solid rgb(var(--four-color)); }   /* Orange */
 .hazard-box-image-4{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(341deg) brightness(1.25);
}
 .hazard-box-5{ border-left: 11px solid rgb(var(--five-color)); }   /* Red */
 .hazard-box-image-5{
     filter: invert(.4) sepia(.5) saturate(1000%) hue-rotate(303deg);
}
 .hazard-box-6{ border-left: 11px solid rgb(var(--six-color)); }   /* Violet */
 .hazard-box-image-6{
     filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(221deg) brightness(1.25);
}
 .hazard-box-0{ border-left: 11px solid rgb(var(--white-bar)); }   /* White */
 .hazard-box-image-0{
     filter: invert(.81);
}
 
/* ---- FORMATTING | [SPECIAL] ---- */
 .centered {
   /* -- Center-Aligns Text -- */
     text-align: center;
}
 
 .justified {
   /* -- Justify-Aligns Text -- */
     text-align: justify;
}
 
 .indented {
   /* -- Indents Block by ⅜-inch (Use Within Other Divs) -- */
     text-indent: 2.4rem;
}
 
 .indented .bibcite,
 .indented .bibitems,
 .indented .footnoteref,
 .indented .scp-image-block,
 .indented h1, .indented h2, .indented h3,
 .indented h4, .indented h5, .indented h6,
 .indented .image-container,
 .indented ol,
 .indented ul,
 .indented .centered,
 .indented .fncon,
 .indented .fncon::before {
     text-indent: 0;
}
 
 .end-mark > p:last-of-type::after {
     margin-left: .2rem;
     content: "❖";
 
     font-size: 1.25rem;
     line-height: 1;
}
 
 .rev-red {
   /* -- Red Document Revision Text -- */
     color: hsl(360, 80%, 70%);
}
 
 .rev-yellow {
   /* -- Yellow Document Revision Text -- */
     color: hsl(40, 80%, 45%);
}
 
 .rev-green {
   /* -- Green Document Revision Text -- */
     color: hsl(120, 40%, 55%);
}
 
 .rev-blue {
   /* -- Blue Document Revision Text -- */
     color: hsl(240, 80%, 80%);
}
 
 .terminal-span {
   /* -- Computer Terminal Text -- */
     font: 110%/1.5 var(--mono-font);
     letter-spacing: 1px;
}
 
 .rev-red, .rev-yellow,
 .rev-green, .rev-blue,
 .terminal-span {
     font-weight: bold;
}
 
 .bt {
   /* Bold-Text = Bold + accentColor */
     color: var(--accentColor);
 
     font-weight: bold;
     text-decoration-color: inherit;
}
 
 .tb {   /* Bold-Text + textColor */
     color: var(--textColor);
     filter: unset;
 
     font-weight: bold;
}
 
 div .tb {   color: var(--textColorAlt);   }
 
 .bt.bb,   /* Big-Bar = Bold + accentColor + Vertical Bar [Body Text] */
 .bt.bh,   /* Header-Bar = Bold + accentColor + Vertical Bar [Header Text] */
 .tb.bb {   /* Big-Bar = Bold + textColor + Vertical Bar [Body Text] */
     border-right: 2px solid;
}
 
 .bt.bb,
 .bt.bh {
     border-color: var(--accentColor);
}
 
 .tb.bb {
     border-color: var(--textColor);
}
 
 div .tb.bb {   color: var(--textColorAlt);   }
 
 .bt.bh {
     border-right-width: medium;
}
 
 .bt.bb::after,
 .bt.bh::after,
 .tb.bb::after {
     content: ":";
     visibility: hidden;
}
 
/* -- Blinking Text Cursor ----
 * Adapted From:
 *   Word Processor Theme by stormbreath
**/
 #u-append-blink-bar p:last-child::after {
     position: relative;
     bottom: .067rem;
     left: .07rem;
     content: "█";
 
     animation: blink 1.5s infinite;
}
 
 @keyframes blink {
     to {
          opacity: 0;
    }
}
 
/* Adapted From:
 *   Dustjacket Theme by Woedenaz
**/
 .fancyhr hr {
     border-top: 2vw solid;
     border-image-repeat: round;
     border-image-slice: 80 500 80 500 fill;
     border-image-source: url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_hr.png);
     border-image-width: 10rem 80rem;
     filter: hue-rotate(var(--tint));
}
 
 .fancyborder {
     padding: 2vw;
 
     border: 2vw solid;
     border-image: url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_border.png) 600 round;
     border-image-width: 6;
}
 
 .lite-heading {
   /* -- Special Heading Area -- */
     margin: 3rem -5.5%;
     padding: 0 5.5%;
 
     background: var(--fgColor);
}
 
 .lite-heading hr {
     margin: 0 -5.5%;
 
     border: medium solid var(--accentColor);
}
 
 .lite-heading h3 {
     color: var(--textColorAlt);
     filter: unset !important;
}
 
 .image-showcase {
   /* -- Alternative Image Showcase -- */
     width: 21rem;
     margin: 1rem auto;
 
     background: var(--bgColor);
     border: 7px solid var(--fgColor);
}
 
 .scene-break {
   /* -- Fancy Scene Break -- */
     width: 6rem;
     margin: 2rem;
}
 
 .icon-tint {
     filter: invert(.4) sepia(.5) saturate(1500%) hue-rotate(var(--tint));
}
 
/* -- ListPages Navigator ----
 * Adapted From:
 *   SCP-5552 by Captain Kirby
**/
 .listPagesNav {
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
     margin: 0 0 3rem;
}
 
 .listPagesNav-prev, .listPagesNav-next {
     width: 45%;
     padding: 0 1%;
 
     background: var(--fgColor);
}
 
 .listPagesNav-prev {
     float: left;
 
     border-left: thick solid var(--accentColor);
 
     text-align: left;
}
 
 .listPagesNav-next {
     float: right;
 
     border-right: thick solid var(--accentColor);
 
     text-align: right;
}
 
 .listPagesNav-prev p, .listPagesNav-next p {
     font: 1.25rem var(--header-font);
     letter-spacing: 1px;
}
 
 @media (max-width: 767px) {
     .listPagesNav-prev p, .listPagesNav-next p {
          font-size: .95rem;
    }
}
 
 .fade-away {
   /* -- Fades to Black -- */
     background:
        linear-gradient(
          transparent,
          var(--keyColor));
}
 
 .whiteout {
   /* -- Fades to White -- */
     background:
        linear-gradient(
          transparent,
          var(--textColor));
}
 
 .footing, .footing:after {
     position: relative;
}
 
 .footing {
   /* -- Page Footing -- */
     margin: 1rem 0;
}
 
 .footing::before {
     position: absolute;
     right: 0;
     bottom: .13rem;
     left: 0;
     content: "";
 
     border-bottom: 2px solid var(--accentColor);
}
 
 .footing:after {
     display: block;
     top: .07rem;
     content: "";
 
     border-bottom: thin solid var(--accentColorLite);
}
 
 @media (max-width: 767px) {
     .footing::before, .footing:after {
          margin: 0 -5.5%;
    }
}
 
 .related-flex {
   /* -- Related Articles Box -- */
     display: flex;
     justify-content: center;
}
 
 .related {
     margin: 1rem 0;
     padding: .02rem 1rem;
 
     color: var(--textColorAlt);
     background: var(--fgColor);
     border: thick solid var(--accentColor);
 
     font-weight: bold;
}
 
 .related > p:nth-child(1)::before,
 .related > ol:nth-child(1)::before,
 .related > ul:nth-child(1)::before,
 .related > a:nth-child(1)::before {
     display: flex;
     padding: 0 0 .53rem;
     content: "See Also:";
 
     color: var(--accentColor);
 
     font: 1.25rem var(--header-font);
     letter-spacing: 1px;
}
 
 .related > ol:nth-child(1)::before,
 .related > ul:nth-child(1)::before {
     margin-left: -2rem;
}
 
 .series-nav {
   /* -- Series Navigator -- */
     display: flex;
     justify-content: center;
     margin: 1rem 0;
     padding: .02rem 1rem;
 
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-top-right-radius: .67rem;
     border-top-left-radius: .67rem;
     border-bottom: 2px solid var(--accentColor);
 
     font: 85% var(--header-font);
}
 
/* -- Earthworm Series Navigator --
 *   by Croquembouche
**/
 #page-content .earthworm .first,
 #page-content .earthworm .first:not(.true) img,
 #page-content .earthworm .hub,
 #page-content .earthworm .last,
 #page-content .earthworm .last:not(.true) img {
     background: var(--fgColor);
     border-color: var(--accentColor);
}
 
 .earthworm .hub {
     font-size: 1.05rem;
}
 
 #page-content .earthworm a {
     border-bottom: 0;
}
 
 #page-content .earthworm a[href="/"] {
     color: var(--textColorAlt);
     filter: unset;
}
 
 .earthworm p {
     cursor: text;
}
 
 .bt,
 .listPagesNav-prev p, .listPagesNav-next p,
 .related > p:nth-child(1)::before,
 .related > ol:nth-child(1)::before,
 .related > ul:nth-child(1)::before,
 .related > a:nth-child(1)::before,
 #page-content .earthworm a,
 #toc .title,
 strong {
     filter: saturate(.85) brightness(1.15);
}
 
/* ---- YUI TABS ---- */
/* -- YUI TAB CUSTOMIZATION -- */
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .13rem);
     margin: 0 auto;
 
     border-color: var(--accentColor);
}
 .yui-navset .yui-nav li,
 .yui-navset .yui-navset-top .yui-nav li{   /* -- Listitem Modifier -- */
     display: flex;
     flex-grow: 2;
     margin: 0;
     padding: 0;
 
     background: var(--fgColor);
 
     font-size: 1.05rem;
}
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a{   /* -- Link Modifier -- */
   /* -- Tab | [UNSELECTED] -- */
     color: var(--textColorAlt);
     background: var(--fgColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
 
     font-family: var(--header-font);
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     width: 100%;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
   /* -- Tab | [HOVER] -- */
     color: var(--alphaColor);
     background: var(--accentColor);
     transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
 .yui-navset .yui-nav li em{
     border: 0;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding-top: .47rem;
     padding-bottom: .47rem;
 
     text-align: center;
     text-overflow: ellipsis;
 
     overflow: hidden;
}
 .yui-navset .yui-nav .selected,
 .yui-navset .yui-navset-top .yui-nav .selected{   /* -- Selection Modifier -- */
   /* -- Tab | [SELECTED] -- */
     flex-grow: 2;
     margin: 0;
     padding: 0;
 
     background: var(--accentColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: 0;
}
 .yui-navset .yui-nav .selected a em{
     padding-top: .47rem;
     padding-bottom: .47rem;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a:active,
 .yui-navset .yui-nav .selected a:focus{
     color: var(--fgColor);
}
 .yui-navset .yui-content{
     color: var(--textColorAlt);
     background: var(--fgColor);
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .53rem;
 
     border: 0;
 
     line-height: 1.5;
}
 
/* -- YUI TAB ANIMATION --
 *   Courtesy Of Croquembouche
**/
 .yui-navset .yui-content > div{
     display: block;
 
     transform-origin: 0 0;
 
     overflow: hidden;
}
 #page-content .yui-navset .yui-content > div[style*="none"]{
     display: block !important;
     flex: 0;
     max-height: 0;
     padding: 0 .53rem;
 
     border-width: 0;
   /* Next Transition Affects the One That DISAPPEARS */
     transition:
          padding 0s ease-in-out .5s,
          border-width 0s ease-in-out .5s,
          flex .4s cubic-bezier(.18, .51, .54, .9) 0s;
     animation: tab-disappear .4s ease-in-out 0s 1 both;
}
 #page-content .yui-navset .yui-content > div[style*="block"]{
     display: block !important;
     flex: 1;
     max-height: 9999rem;
 
   /* Next Transition Affects the One That APPEARS */
     transition:
          padding 0s ease-in-out .5s,
          border-width 0s ease-in-out .5s,
          flex .4s cubic-bezier(.18, .51, .54, .9) .5s;
     animation: tab-appear .4s ease-in-out .5s 1 both;
}
 @keyframes tab-disappear{
     0%{
          max-height: 9999rem;
    }
     1%{
          max-height: 100vh;
    }
     100%{
          max-height: 0;
    }
}
 @keyframes tab-appear{
     0%{
          max-height: 0;
    }
     99%{
          max-height: 100vh;
    }
     100%{
          max-height: 9999rem;
    }
}
 
/* ---- WIKIWALK NAVIGATOR ---- */
 .footer-wikiwalk-nav{
     width: max-content;
     margin: 1rem auto;
     padding: .067rem 1rem;
 
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-radius: .53rem;
 
     font-size: 85%;
}
 
/* ---- INTERWIKI ---- */
 div.scpnet-interwiki-wrapper{
     margin-bottom: 2rem;
}
 iframe.scpnet-interwiki-frame{
     background: var(--accentColorLite);
}
 #interwiki{
     --fgColor: none;
     background: 0;
}
 #interwiki body{
     overflow: hidden;
}
 #interwiki .side-block{
     background: 0;
     border: 0;
     box-shadow: none;
}
 #interwiki .heading{
     color: var(--textColorAlt);
     border-bottom-color: var(--textColor);
 
     font: bold .95rem "Josefin Sans", sans-serif;
}
 #interwiki .menu-item img{
     display: none;
}
 #interwiki .menu-item a{
     color: var(--alphaColor);
     transition: color .2s ease-in-out;
}
 #interwiki .menu-item a:hover{
     color: var(--keyColor);
     background-color: var(--alphaColor);
 
     text-decoration: none;
}
 
/* ---- CROQSTYLE ALTERATIONS ---- */
 #edit-page-textarea{
     font-family: unset;
}
 tt{
     padding: unset;
 
     background: unset;
 
     font-size: 110%;
}
 .terminal,
 .terminal > .code{
     background: var(--c-bg) !important;
     border: thick solid var(--c-comment) !important;
}
 
/* General Patches For:
 *   ACS
 *   Collapsibles
 *   Info Bar
 *   Info Module
 *   Side-Bar Media
 * So Link Doesn't Override
**/
 .danger-diamond a:hover,
 .collapsible-block-folded a:hover,
 .collapsible-block-unfolded-link a:hover,
 .rate-box-with-credit-button .fa-info:hover,
 #side-bar .side-block.media a:hover{
     background: 0;
}
 .info-container .collapsible-block-link,
 .info-container .collapsible-block-folded .collapsible-block-link{
     background: var(--linkColour) !important;
}
 
/* ---- ACS PATCH ----
 *   Courtesy Of Nagiros
**/
 .anom-bar > .bottom-box{
   /* Horizontal Bar */
     -webkit-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
     -moz-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
     box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
 
     -webkit-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     -moz-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
}
 .bottom-box > .diamond-part{
   /* Vertical Bar */
     -webkit-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
     -moz-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
     box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
 
     -webkit-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     -moz-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
     box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
}
 .anom-bar-container.esoteric .text-part .main-class,
 .anom-bar-container.explained .text-part .main-class,
 .anom-bar-container.neutralized .text-part .main-class,
 .anom-bar-container.pending .text-part .main-class{
     background-color: hsl(240, 4%, 27%, .5) !important;
     border-left-color: hsl(240, 5%, 49%) !important;
 
     background-color: rgba(var(--gray-bg, 66, 66, 72), .5) !important;
     border-left-color: rgb(var(--lg-bar, 118, 118, 130)) !important;
}
 .danger-diamond > .arrows,
 .danger-diamond > .bottom-icon::before{
   /* Inverted Arrows + Esoteric Icons */
     -webkit-filter: invert(.9) !important;
     filter: invert(.9) !important;
}
 .danger-diamond > .quadrants > .bottom-quad,   /* Transparent Bottoms + Top Icon Backgrounds */
 .anom-bar-container.explained .danger-diamond > .quadrants > .top-quad,
 .anom-bar-container.neutralized .danger-diamond > .quadrants > .top-quad,
 .anom-bar-container.pending .danger-diamond > .quadrants > .top-quad{
   /* Body Background-Color */
     background-color: hsl(0, 0%, 10%) !important;
}
 .danger-diamond > .bottom-icon,   /* Esoteric + Pending Icon Backgrounds */
 .anom-bar-container.pending .danger-diamond > .top-icon::before{
     background-color: hsl(0, 0%, 1%) !important;
}
 .anom-bar > .bottom-box::before{
     background-color: rgb(var(--white-bar, 205, 206, 208));
}
 .top-left-box > .item{
     display: none;
}
 
/* ---- AUTHOR LABEL PATCH ---- */
 #page-content .authorlink-wrapper{
     margin-top: -.13rem;
 
    --author-right-adjust: 0;
}
 
/* ---- BETTERFOOTNOTES PATCH ---- */
 :root{
     --posX: calc(50% - 358px - 13rem);
     --fnLinger: 1.5s;
     --fnColor: var(--accentColor);
}
 .fnnum{
     filter: saturate(.85) brightness(1.15);
 
     font-size: .9rem;
}
 .lightbox .fnnum::after{
     color: var(--keyColor);
}
 .fnnum:hover::after{
     padding: 0 .13rem;
}
 .fncon{
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: var(--accentColor);
}
 .fncon::before{
     color: var(--keyColor);
}
 .fnnum:hover + .fncon{
     right: calc(-8vw - 4rem);
}
 .lightbox .fncon a{
     filter: unset;
}
 
/* ---- FLOPS HEADER PATCH ---- */
 .itemInfo, a.disruptionHeader{
     font-family: var(--header-font);
}
 .itemInfo.darkbox{
     margin: 0 0 1.6rem;
     padding: .8rem 1.13rem;
}
 table.darkbox tr td{
     padding: 0;
}
 .alignL span{
     margin-right: .13rem;
}
 .infofield_1, .infofield_2{
     font-size: 0;
}
 .infofield_1::before{
     content: "ITEM #";
 
     font-size: 1.25rem;
}
 .infofield_2::before{
     content: "CLASS";
 
     font-size: 1.25rem;
}
 
/* ---- VOID POST PATCH ---- */
 div.void.dark{
     color: var(--textColorAlt);
     background: var(--fgColor);
     border-color: hsl(222, 20%, 9%);
}
 
 .vusermod{
     color: var(--textColorAlt) !important;
 
     font-weight: bold;
}
 
 .vui{
     color: hsl(0, 0%, 60%) !important;
}
 
 .vactivity{
     color: hsl(240, 100%, 69%) !important;
}
 
/* ---- PAGE TAGS ---- */
 #main-content .page-tags{
     border-top: thin solid var(--accentColorLite);
}
 #main-content .page-tags span{
     max-width: 100%;
 
     border-top: 9px solid transparent;
}
 #main-content .page-tags a{
     height: 1.108rem;
     margin: .18rem 0 .5rem 1rem;
     padding: .1875rem .3125rem .1875rem 0;
 
     background: var(--fgColor);
     border-top-right-radius: .27rem;
     border-bottom-right-radius: .27rem;
 
     font: 120%/1.108rem var(--body-font);
}
 #main-content .page-tags a::before,
 #main-content .page-tags a::after{
     position: relative;
     float: left;
     content: "";
}
 #main-content .page-tags a::after{
     top: .3836rem;
     left: -.6818rem;
     width: .341rem;
     height: .341rem;
 
     background: var(--bgColor);
     border-radius: .1705rem;
}
 #main-content .page-tags a::before{
     top: -.1875rem;
     left: -.7501rem;
 
     border-color: transparent var(--fgColor) transparent transparent;
     border-style: solid;
     border-width: .75rem .75rem .75rem 0;
}
 #main-content .page-tags a:hover{
     color: var(--keyColor);
     background: var(--accentColor);
}
 #main-content .page-tags a:hover::before{
     border-color: transparent var(--accentColor) transparent transparent;
}
 
/* ---- SITE FOOTER ---- */
 #footer,
 #footer a{
     color: var(--textColor);
     background: 0;
}
 #license-area{
     color: var(--textColor);
}

/* BACKEND */
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/backend.css);

---

Font chữ TIÊU ĐỀ là Montserrat.

Font chữ NỘI DUNG là Inter.

Font chữ ĐƠN CÁCH là Fira Code.

Font chữ SCRIPT là Comic Sans.

---

‡ Giấy Phép / Ghi Công

Trích dẫn:

"Flopstyle: DARK" bởi Lt Flops, từ Wiki SCP.
Nguồn: http://www.scp-wiki.wikidot.com/theme:flopstyle-dark.

Dịch bởi wolf20482, từ Wiki SCP-VN.
Nguồn bản dịch: http://scp-vn.wikidot.com/theme:flopstyle-dark.

Xuất bản dưới giấy phép CC-BY-SA

Để biết thêm thông tin, xem Hướng Dẫn Giấy Phép.
Hiện Giấy Phép

Tên tệp: alt_loader.gif
Tên: Loading-3-box
Tác giả: FNDE
Giấy phép: CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
Liên kết: Wikimedia Commons

Tên tệp: alt_logo_bw.png, alt_logo_trans.png, alt_logo_tyrian.png
Tác giả: JackalRelated
Giấy phép: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
Liên kết: Tự sáng tạo

Tên tệp: Larry_the_cat.jpg
Tên: Larry the cat sitting besides a wooden lawn chair in Auderghem, Belgium (DSCF2368)
Tác giả: Benoît Brummer
Giấy phép: Attribution 4.0 International (CC BY 4.0)
Liên kết: Wikimedia Commons

Tên tệp: spc_logo.png
Authors: GreenGolem and JackalRelated
Giấy phép: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
Liên kết: SPC Black Highlighter Theme - SCP Foundation
Chú thích: Chỉnh sửa bởi Lt Flops. Đảo ngược màu, chỉnh độ đậm nhạt.

Tên tệp: water_ripples.webp
Tên: Water ripples texture 3 of 3
Tác giả: Juan Tello
Giấy phép: Attribution 2.0 Generic (CC BY 2.0)
Liên kết: Flickr
Chú thích: Chỉnh sửa bởi Lt Flops. Sử dụng chế độ trộn "Difference", "Overlay". Thêm lớp phủ màu xanh dương nhạt.

Tên tệp: wl_border.png, wl_hr.png
Tác giả: Woedenaz
Giấy phép: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
Liên kết: Wanderers' Dust Jacket Theme - The Wanderers' Library

Tên tệp: pumpkin.png
Tên: Twemoji13 1f383
Tác giả: Twitter
Giấy phép: Attribution 4.0 International (CC BY 4.0)
Liên kết: Wikimedia Commons

Các logo của EstrellaYoshte được sử dụng nhiều trong theme này:

Tên tệp: witch.png, QQcBcvK.png, wkUri0y.png, CQCcN7e.png, Q2TCZnd.png, 4uLBoQ3.png
Tác giả: EstrellaYoshte
Giấy phép: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
Liên kết: Desk of Junior Designer S. Yvonne

Để biết thêm thông tin về nội dung trên wiki, ghé thăm Danh Sách Giấy Phép.

What this is

A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}