/* 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);
 @import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&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 基金会";
   --header-subtitle: "15 年的刮石混凝土，人员";
   --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", "ZCOOL KuaiLe", cursive;
   --subtitle-font: "Comic Neue", "Noto Sans SC", cursive;
   --body-font: "Inter", "Noto Sans SC", 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 ---- */
 #search-top-box{
     top: 1em;
     width: 90%;
}
 
 @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.wdfiles.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);
}

收起代码

标题字体为 Sriracha / 站酷快乐体。

副标题字体为 Comic Neue / Noto Sans SC。

正文字体为 Inter / Noto Sans SC。

等宽字字体为 Fira Code。

‡ 授权 / 引用

▷ 显示代码 ◁

△ 隐藏代码 △

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap);
 
/* Centered Header Sigma-9
 * [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%3Acentered-header-sigma-9/logo.svg);
}
 
/* ---- SITE HEADER ---- */
 div#header{
     background-image: none;
}
 #header::before{
     position: absolute;
     width: 100%;
     height: 100%;
     top: .45rem;
     left: 0;
     content: " ";
 
     background-image: var(--lgurl);
     background-position: center top;
     background-repeat: no-repeat;
     background-size: auto 8rem;
 
     opacity: .35;
     pointer-events: none;
     z-index: -1;
}
 #header h1,
 #header h2{
     float: none;
     margin-left: 0;
 
     text-align: center;
}
 
/* Move the Subtitle Down a Smidge */
 #header h2{
     margin-top: .45rem;
}
 
/* Hide the Existing Text */
 #header h1 span,
 #header h2 span{
     display: none;
 
     font-size: 0;
}
 
/* Style the New Text */
 #header h1 a::before,
 #header h2::before{
     font-family: "Montserrat", "Arial", sans-serif;
     text-shadow: none;
}
 #header h1 a::before{
     position: relative;
     bottom: .15em;
     color: var(--titleColor);
}
 #header h2::before{
     position: relative;
     bottom: .3em;
     color: var(--subtitleColor);
}
 
/* Set the New Text's Content From Variable */
 #header h1 a::before{
     content: var(--header-title, "SCP基金会");
 
     font-size: 115%;
     font-weight: bold;
}
 #header h2::before{
     content: var(--header-subtitle, "控制 - 收容 - 保护");
 
     font-size: 130%;
     font-weight: 600;
}
 
/* ---- LOGIN ---- */
 #login-status{
     top: .5rem;
     left: 0;
     right: initial;
 
     z-index: 1;
}
 
/* ---- SEARCH ---- */
 #search-top-box{
     top: .5rem;
     right: 0;
}
 #search-top-box-input{
     border-radius: 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: unset;
}
 
/* ---- TOP BAR ---- */
 #top-bar{
     display: flex;
     justify-content: center;
     right: 0;
}
 #top-bar ul li ul{
     box-shadow: none;
 
     overflow: hidden;
}
 
/* ---- PAGE TITLE ---- */
 .meta-title,
 #page-title{
     text-align: center;
}
 
/* ---- BREADCRUMBS ---- */
 .pseudocrumbs,
 #breadcrumbs{
     text-align: center;
}
 
/* ---- MOBILE DISPLAY ---- */
 @media (max-width: 767px){
     #login-status{
         left: 5.15rem;
 
         z-index: 20;
    }
     #search-top-box{
         width: unset;
    }
     .mobile-top-bar{
         position: relative;
         display: flex;
         justify-content: center;
         left: 0;
    }
}

这是什么

我 Croquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。

用法

在任意维基上：

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

该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。

CSS修改

大小合理的脚注

不让脚注达到一百万里那么宽，让你能确实地阅读脚注。

.hovertip { max-width: 400px; }

等宽字体编辑/代码

使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。

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

电传打字机背景

给<tt>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。

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

不要大脸

禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。

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

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

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

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。

还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

: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中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。

你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。

……就像这样！

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

版式

页面版本: 3, 最后编辑于: 05 Aug 2023 06:30

编辑评分 (+9) 标签讨论 (5) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护

这是什么？

如何使用

示例格式

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

源代码

标题字体为 Sriracha / 站酷快乐体。

副标题字体为 Comic Neue / Noto Sans SC。

这是什么

用法

相关组件

CSS修改

大小合理的脚注

等宽字体编辑/代码

电传打字机背景

不要大脸

碎裂碎裂

代码颜色

调试模式

其它有趣的网站

RTD1261 MediaPlayer

kinDIY

The Backrooms X

MIS 213-2