/* FONTS */
 @import url(https://fonts.googleapis.com/css2?family=Sriracha&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&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);
 
/* Pack of Peanuts Theme
 * [2022 Wikidot Theme]
 * Created by Lt Flops
 * Based On:
 *   Cosmonaut Theme by EstrellaYoshte
 *   Flopstyle: DARK by Lt Flops
**/
 
/* -------- HEADER AREA -------- */
/* ---- COMMON ---- */
 :root{
   /* -- CENTERED HEADER VARS -- */
   --header-title: "SCP FOUNDATION";
   --header-subtitle: "15 Years of Scraping Concrete, Personnel";
   --titleColor: var(--textColor);
   --subtitleColor: hsl(357, 75%, 37%);
   --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Apack-of-peanuts/173-icon.png);
 
   /* -- COLORS -- */
   --textColor: hsl(0, 0%, 5%);
   --bgColor: hsl(36, 57%, 87%);
     background: var(--bgColor);
 
   --milk: hsl(0, 0%, 95%);
   --sugar: hsl(60, 54%, 87%);
   --peanut-lite: hsl(36, 63%, 68%);
   --peanut-dark: hsl(36, 43%, 58%);
   --jellybean: hsl(114, 42%, 53%);
   --juice: hsl(357, 70%, 45%);
   --chocolate: hsl(80, 3%, 19%);
 
   --contour: hsla(0, 0%, 20%, .5);
 
   /* -- FONTS -- */
   --title-font: "Sriracha", cursive;
   --subtitle-font: "Comic Neue", cursive;
   --body-font: "Inter", sans-serif;
 
   /* -- MISCELLANEOUS --
    *   Courtesy Of EstrellaYoshte
    */
   --side-bar-width: 16.5rem;
   --body-width: 55.53rem;
}
 
 body{
     color: var(--textColor);
     background-image:
        linear-gradient(
          var(--bgColor) 20rem 27rem,
          var(--sugar) 35rem 100%);
 
     font: 15px var(--body-font);
     text-rendering: optimizeLegibility;
     overflow-wrap: break-word;
}
 
 #content-wrap{
     display: flex;
     justify-content: space-between;
     max-width: 100%;
     padding-top: 1em;
}
 
 #content-wrap::after{
     width: max(calc(100vw - var(--side-bar-width) - var(--body-width)));
     max-width: var(--side-bar-width);
     content: "";
}
 
 #side-bar{
     width: var(--side-bar-width);
}
 
 #main-content{
     width: 55.53rem;
     margin: 0;
     padding: 2em 1em;
 
     box-sizing: border-box;
 
     z-index: 0;
}
 
 @media (max-width: 767px){
     #main-content{
          margin: 0 5%;
    }
}
 
 @media (min-width: 768px){
     #page-content{
          font-size: calc(15px * 1.05);
    }
}
 
/* ---- SCROLLBAR + SELECTION ---- */
 :root{
     scroll-behavior: smooth;
     scrollbar-color: var(--subtitleColor) var(--chocolate);
}
 
/* Cross-Browser Supports */
 ::-webkit-scrollbar{
     width: 1rem;
}
 
 ::-webkit-scrollbar-thumb{
     background: var(--subtitleColor);
}
 
 ::-webkit-scrollbar-track{
     background: var(--chocolate);
}
 
 ::selection{
     background: hsla(114, 42%, 53%, .55);
}
 
/* ---- SITE BANNER ---- */
 div#container-wrap{
     background: 0;
}
 
 #header{
     height: 15rem;
}
 
  #header::before{
     background-size: auto 15em;
     opacity: 1;
}
 
 #header h1 a::before{
     top: 7.4rem;
 
     font-family: var(--title-font);
     font-size: 125%;
}
 
 #header h2::before{
     top: 7.8rem;
 
     font-family: var(--subtitle-font);
     font-size: 155%;
}
 
 @media (max-width: 767px){
     #header h2::before{
          font-size: 135%;
    }
}
 
/* ---- SEARCH ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 2.85em;
    }
}
 
 #search-top-box-form input[type=submit]{
     padding: .47rem .47rem .4rem;
 
     color: var(--milk);
     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{
     background: var(--juice);
     border-color: var(--juice);
     border-radius: 1rem;
 
     font-family: var(--body-font);
     font-size: calc(15px * 1.05);
}
 
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:active,
 #search-top-box-form input[type=submit]:focus{
     color: var(--jellybean);
}
 
 #search-top-box-form > input[type=text]{
     width: 8rem;
     padding: .47rem .47rem .4rem;
 
     border: 2px solid var(--chocolate);
}
 
/* ---- TOP-BAR ---- */
 #top-bar{
     top: 17rem;
}
 
 #top-bar a{
     color: var(--milk);
}
 
 .top-bar,
 .mobile-top-bar,
 #top-bar ul li a{
     border-right: thin solid var(--chocolate);
     border-left: thin solid var(--chocolate);
}
 
 .top-bar,
 .mobile-top-bar{
     height: 2rem;
}
 
 #top-bar ul li a{
     padding: .4rem min(.75vw, 1rem) .33rem;
}
 
 #top-bar ul li.sfhover a,
 #top-bar ul li:hover a{
     color: var(--juice);
     border-radius: 0;
}
 
 #extrac-div-1,
 #extrac-div-2{
     position: absolute;
     width: 100%;
}
 
 #extrac-div-1{
     top: 0;
     height: 17rem;
 
     background: var(--peanut-dark);
     background-image: url(https://scp-wiki.wikidot.com/local--files/theme:pack-of-peanuts/concrete.png);
     background-repeat: repeat-x;
}
 
 #extrac-div-2{
     top: 16.8rem;
     height: 2rem;
 
     background: var(--juice);
     border-top: medium solid var(--chocolate);
     border-bottom: medium solid var(--chocolate);
}
 
/* ---- LOGIN ---- */
 #login-status{
     padding: .53rem 1rem;
 
     color: var(--milk);
     background: var(--juice);
     border-radius: 1rem;
}
 
 @media (max-width: 767px){
     #login-status{
          top: .28em;
          left: unset;
          padding: .27rem .53rem .53rem;
    }
}
 
 #login-status ul a{
     color: var(--subtitleColor);
     background: var(--peanut-lite);
}
 
 #login-status ul a:hover{
     background: var(--peanut-dark);
     border-radius: 0;
}
 
 #account-options{
     border-color: var(--chocolate);
}
 
 @media (max-width: 767px){
     #header .printuser img.small{
          transform: translate(4px, 4px);
    }
}
 
 #my-account{
     display: none;
}
 
 #account-topbutton{
     color: var(--textColor) !important;
     background: var(--milk) !important;
     border-color: var(--milk);
     border-radius: .53rem;
     transition: all .2s ease-in-out;
}
 
  #account-topbutton:hover,
  #account-topbutton:active{
     background: var(--jellybean) !important;
     border-color: var(--jellybean);
     transition: all .2s ease-in-out;
}
 
/* ---- SIDE-BAR ---- */
 #top-bar .open-menu a{
     color: var(--juice);
     background: var(--milk);
     border: 2px solid var(--juice);
}
 
  #top-bar .open-menu a:hover{
     padding: 0;
 
     color: var(--jellybean);
     background: var(--juice);
     box-shadow: none;
}
 
 @supports (-moz-appearance: none){
     #top-bar .open-menu a:hover{
          color: var(--jellybean);
          background: var(--juice);
    }
}
 
 @media (max-width: 767px){
     #side-bar:target{
          background-color: var(--sugar);
          border: 0;
          border-right: 2px solid var(--chocolate);
    }
}
 
 @media (min-width: 768px){
     #side-bar{
          position: -webkit-sticky;
          position: sticky;
          top: 0;
          left: 0;
          height: calc(100vh - 2rem);
          margin: 0;
          padding: 1rem;
 
          text-align: left;
 
          direction: rtl;
          overflow-x: hidden;
          overflow-y: scroll;
          will-change: transform;
    }
}
 
 #side-bar .side-block,
 #interwiki .side-block{
     border: 2px solid hsl(357, 100%, 20%);
     box-shadow: 3px 3px var(--contour);
}
 
 #side-bar .side-block.media{
     border: 2px solid hsl(240, 100%, 20%);
}
 
 #side-bar .side-block.resources{
     border: 2px solid hsl(127, 100%, 20%);
}
 
/* ---- COLLAPSBILES ---- */
  .licensebox .collapsible-block-link{
     color: var(--juice);
}
 
   .licensebox .collapsible-block-link:hover{
     color: var(--milk);
}
 
/* ---- PAGE RATING ---- */
 .page-rate-widget-box{
     margin-right: 0;
 
     box-shadow: 3px 5px var(--contour);
}
 
 div.page-rate-widget-box .rate-points,
 .page-rate-widget-box .cancel{
     background-color: var(--juice);
     border-color: var(--chocolate);
 
     text-transform: capitalize;
}
 
 .page-rate-widget-box .rate-points,
 #action-area .page-rate-widget-box .rate-points{
     padding: 1px 10px !important;
}
 
 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown{
     padding: 1px;
 
     background-color: var(--milk);
     border-color: var(--chocolate);
}
 
 .page-rate-widget-box .cancel{
     padding: 1px;
}
 
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a{
     color: var(--chocolate);
}
 
 .page-rate-widget-box .cancel a{
     color: var(--milk);
}
 
 .page-rate-widget-box .rateup:hover,
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown:hover,
 .page-rate-widget-box .ratedown a:hover{
     background: var(--chocolate);
}
 
 .page-rate-widget-box .rateup a:hover{
     color: var(--jellybean);
}
 
 .page-rate-widget-box .ratedown a:hover{
     color: var(--juice);
}
 
 .page-rate-widget-box .cancel:hover,
 .page-rate-widget-box .cancel a:hover{
     background: var(--juice);
}
 
 .page-rate-widget-box .cancel a:hover{
     color: var(--textColor);
}
 
/* ---- FORMATTING | [GENERAL] ---- */
 h1, h2, h3, h4, h5, h6{
     display: flex;
     justify-content: center;
 
     text-align: center;
}
 
 h2, h3, h4, h5, h6{
     font-family: var(--subtitle-font);
     line-height: 1.2;
}
 
 h1,
 #page-title,
 .meta-title{
     color: var(--subtitleColor);
 
     font-family: var(--title-font);
     line-height: .95;
}
 
 #page-title,
 .meta-title{
     border-color: var(--chocolate);
}
 
 hr{
     height: 0;
     margin: 1rem 0;
 
     background: transparent;
     border-top: thin solid var(--chocolate);
}
 
 *, a, span{
   /* No Line Breaks Mid-Word */
     word-break: normal;
}
 
 li, p{
     line-height: 1.5;
     text-decoration-color: var(--textColor);
     text-underline-offset: 30%;
}
 
 #toc{
     background: var(--peanut-lite);
     border: 2px solid var(--juice);
}
 
/* Links */
 a,
 a.newpage,
 a:visited,
 #side-bar a:visited{
     color: var(--juice);
     transition: color .2s ease-in-out;
}
 
 a:hover,
 a.newpage:hover,
 a:visited:hover,
 #side-bar a:visited:hover{
     padding-bottom: .13rem;
 
     color: var(--milk);
     background-color: var(--juice);
     border-radius: .33rem;
 
     text-decoration: none;
}
 
 #page-content a{
     padding-bottom: .067rem;
 
     border-bottom: thin solid var(--juice);
}
 
 #page-content a:hover{
     padding: .2rem .2rem .13rem;
}
 
 #page-content a:hover,
 #page-content .rateup a, #page-content .ratedown a,
 #page-content .cancel a, #page-content .cancel a:hover,
 #page-content .pseudocrumbs a,
 #page-content .creditButtonStandalone p a,
 #page-content .yui-nav li a,
 #page-content #toc a{
     border: 0;
}
 
 #page-content h1 a{
     padding-bottom: 0;
}
 
 #page-content .cancel a:hover{
     padding-bottom: .067rem;
}
 
 #page-content .yui-nav li a{
     padding: 0;
}
 
 #side-bar .side-block.media a:hover{
     padding: 0;
 
     background: 0;
}
 
/* ---- IMAGE BLOCK ---- */
 .scp-image-block{
     border: thin solid var(--chocolate);
     border-radius: 1rem;
     box-shadow: 3px 3px var(--contour);
}
 
 .scp-image-block.block-right{
     margin-right: 0;
}
 
 .scp-image-block .scp-image-caption{
     position: relative;
     top: 1px;
     right: 1px;
 
     background: var(--peanut-lite);
     border: thin solid var(--chocolate);
     border-radius: 1rem;
}
 
/* ---- TABLES ---- */
 table.wiki-content-table th{
     color: var(--milk);
     background: var(--juice);
     border-color: var(--chocolate);
}
 
 table.wiki-content-table td{
     border-color: var(--chocolate);
}
 
/* ---- CUSTOM DIV BLOCKS ---- */
 blockquote,
 div.blockquote{
     padding: 2rem;
 
     background: hsla(36, 57%, 68%, .55);
     border: none;
     border-radius: 40% 40% / 20% 20%;
}
 
/* ---- 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(--chocolate);
}
 
 .yui-navset .yui-nav li,
 .yui-navset .yui-navset-top .yui-nav li{   /* -- Listitem Modifier -- */
     display: flex;
     flex-grow: 2;
     margin: 0;
     padding: 0;
 
     color: var(--milk);
     background: var(--juice);
 
     font-size: 1.05rem;
}
 
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a{   /* -- Link Modifier -- */
   /* -- Tab | [UNSELECTED] -- */
     color: var(--textColor);
     background: var(--milk);
     transition: all .2s ease-in-out;
 
     font-family: var(--subtitle-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] -- */
     background: var(--juice);
     transition: all .2s ease-in-out;
}
 
 .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;
 
     color: var(--milk);
     background: var(--juice);
}
 
 .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-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .53rem;
 
     border: 0;
 
     line-height: 1.5;
}
 
/* ---- CROQSTYLE ALTERATIONS ---- */
 #edit-page-textarea{
     font-family: unset;
}
 
 tt{
     padding: unset;
 
     background: unset;
 
     font-size: unset;
}
 
 .code{
     background: var(--peanut-lite);
     border: 2px solid var(--juice);
}
 
 .terminal,
 .terminal > .code{
     background: var(--c-bg) !important;
     border: medium solid var(--c-comment) !important;
}
 
/* ---- SITE FOOTER ---- */
 #edit-page-title{
     width: 85%;
     padding: .2rem;
 
     color: var(--juice);
 
     font: 155% var(--title-font);
}
 
 #footer{
     margin-top: 0;
 
     background: var(--juice);
}
 
 #license-area{
     color: var(--milk);
     background: var(--chocolate);
}

Hide Code

The TITLE font is Sriracha.

The SUBTITLE font is Comic Neue.

The BODY font is Inter.

The MONOSPACE font is Fira Code.

‡ Licensing / Citation

▷ Show Code ◁

△ Hide Code △

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma
 * [2021 Wikidot Component]
 * By Lt Flops (CC BY-SA 3.0)
 * Forked from:
   * Penumbra Theme by EstrellaYoshte
 * Also based on:
   * Centered Header BHL by Woedenaz
**/
 
/* ---- VARS ---- */
 :root{
     --titleColor: hsl(0, 0%, 95%);
     --subtitleColor: hsl(60, 62%, 85%);
     --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/lgbtqp_logo.svg);
}
 
/* ---- SITE BANNER ---- */
 #header,
 div#header{
     background-image: none;
}
 
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 9em;
     opacity: .33;
}
 
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
 #header h1 span,
 #header h2 span{
   /* Hide the Existing Text */
     display: none;
}
 
 #header h1 a::before,
 #header h2::before{
   /* Style the New Text */
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 
 #header h1 a::before{
     position: relative;
     bottom: .15em;
 
     color: var(--titleColor);
 
     font-size: 115%;
     font-weight: 700;
}
 
 #header h2::before{
     position: relative;
     top: .1em;
 
     color: var(--subtitleColor);
 
     font-size: 130%;
     font-weight: 600;
}
 
 #header h1 a::before{
   /* Set the New Text's Content From Variable */
     content: var(--header-title, "SCP FOUNDATION");
}
 
 #header h2::before{
     content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: 1em;
     right: 0;
}
 
 #search-top-box-form input.button{
     margin-right: 0;
}
 
 #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-size: 100%;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     right: 0;
     display: flex;
     justify-content: center;
}
 
 #top-bar ul li ul{
     border-bottom: 1px solid hsl(0, 0%, 40%);
     box-shadow: none;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: 1.1em;
     right: initial;
 
     color: hsl(0, 0%, 87%);
}
 
 #account-topbutton{
     border-color: hsl(0, 0%, 87%);
 
     font-size: 100%;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 1.85em;
          width: unset;
    }
 
     .mobile-top-bar{
          position: relative;
          left: 0;
          display: flex;
          justify-content: center;
    }
 
     #login-status{
          top: 0;
          right: 0;
    }
 
     #header .printuser{
          font-size: 0;
    }
 
     #header .printuser img.small{
          margin: 0;
 
          transform: translate(6px, 4px);
    }
 
     #my-account{
          display: none;
    }
 
     #account-topbutton{
          margin-left: 2px;
    }
}

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):

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; }

_cc _licensebox theme

page revision: 43, last edited: 12 Nov 2022 22:22

Edit Rate (+48) Tags Discuss (2) History Files Print Site tools + Options

SCP Foundation

Secure, Contain, Protect

What Is This?

How to Use

Example Formatting

L1 Heading

L2 Heading

L3 Heading

L4 Heading

L5 Heading

L6 Heading

Source Code