Flop风格：浅色

Sigma-9 版式中心 » Flop风格：浅色

Flop风格：浅色
作者： Lt Flops
发布于 2020 年 5 月 23 日

这是authorbox的一个使用例子。参阅侧边框小节以获得更多信息。

⮤ 这是一个flavorbox ⮥

如果要创建一个额外作者栏flavorbox，复制以下div¹
然后把它粘贴到authorbox里：

[[div class="flavorbox"]]

评分模块：

带著作信息的评分模块：

著作信息

感谢 stormbreath的帮助，还有感谢 Croquembouche对版式的审查。

选择的CSS样式基于SCP格式资源（在需要时标注作者）。

示例格式

▷ 显示额外功能 ◁

△ 隐藏额外功能 △

每个div块示例都包含：

可见的外观。
使用方法。
有些还可能包括对预期用途的简要描述。

RAISA通知版头

— Maria Jones，RAISA主管

[[div class="raisa-header"]]
++++* 标题
----
文本
[[/div]]

漂亮的版头

— Maria Jones，主管，像个童话 ✧･ﾟ: *✧･ﾟ:*

[[div class="pink-header"]]
++++* 标题
----
文本
[[/div]]

来自Desk of ORACLE版头

— Nathan Jones，CICAPOCO委员长

[[div class="oracle-header"]]
[[div class="img-resize"]]
[[image URL_HERE]]
[[/div]]
++++* 标题
----
文本
[[/div]]

来自中央情报协调和项目行动指挥部（CICAPOCO）的通知

[[div class="cicapoco-header"]]
[[div class="img-resize"]]
[[image URL_HERE]]
[[/div]]
++++* 来自中央情报协调和项目行动指挥部（CICAPOCO）的通知
----
文本
[[/div]]

⚠️ 内容警告 ⚠️

[[div class="content-warning"]]
⚠️ **内容警告** ⚠️
文本
[[/div]]

常规引用框

[[div class="blockquote"]]
文本
[[/div]]

变体引用框

[[div class="alt-blockquote"]]
文本
[[/div]]

轻量版引用框

[[div class="lightweight"]]
文本
[[/div]]

带装饰的引用框

[[div class="card-block"]]
文本
[[/div]]

记录版头

用于采访/探索记录

[[div class="log-header"]]
+++* 标题
----
文本
[[/div]]

报告框

用于内部文档

[[div class="report-box"]]
+++* 标题
----
文本
[[/div]]

带阴影的报告框

[[div class="report-box realistic-shadow"]]

报告框变体：

[[div class="report-box red-tint"]]

[[div class="report-box orange-tint"]]

[[div class="report-box yellow-tint"]]

[[div class="report-box green-tint"]]

[[div class="report-box cyan-tint"]]

[[div class="report-box blue-tint"]]

[[div class="report-box magenta-tint"]]

[[div class="report-box grey-tint"]]

监督者文档框

[[div class="o5-box"]]
文本
[[/div]]

假的“页面源代码”框

[[div class="faux-source"]]
文本
[[/div]]

旁白框

差燃洲终输理批路源建低。没拿问商鲁督后形。掉拉关激容物费态实呼星标这。孩何盾般法由冲静村深法措兴，怎染附给真置均卫离型。测策乡轻协流使之前红布人准章技比。²

机看宁员连威毫短城上孩知十高。号粉和固领举小威。坏律并染径补观府冷属。续蒸静低向验衡何真大著脸实切门冷吸，乡毫轮映人华培断。括在扩希用延织平缺轮多计控单构能。家制未冲经各保呼缺苏。

[[div class="narration justified indented"]]
文本
[[/div]]

警告：提醒框

用于吓飞你的读者

[[div class="warning-notice"]]
+* 警告
----
文本
[[/div]]

主题： 日记框

用于增加代入感

[[div class="journal"]]
文本
[[/div]]

提醒：这个div不允许你创建双换行符。想实现双换行符的效果，按下面做：

1.在每行文本末尾按回车键。
2.在新的一行中，用两组（即每边一组）的@@围住一个空格。³
3.再按下回车键然后继续你的写作。

短信框😳

[[div class="sms-message"]]
文本
[[/div]]

如果是单个短信框，在框下加入以下代码。
如果是多个短信框，在最后一个框下加入以下代码。

[[div style="clear: left;"]]
[[/div]]

这是什么？

这是一个 Lt Flops创建的版式。它是Sigma-10（维基的版式⁴）的美学改进和扩展。

你只应该在知道你在做什么的时候才使用这个。

这个版式不兼容于黑色标记笔、玄武岩和Sigma+。

深色模式的对应版式

Flop风格：深色

如何使用

要使用这个版式，请复制以下代码并粘贴到你的页面顶部：

[[include :scp-wiki-cn:theme:flopstyle]]

如果你想把这个版式与其他的Sigma版式一起用，先粘贴Flop风格，然后在下一行粘贴你选择的其他版式。可能还需要一些微调。

另外，还请注意本版式使用了以下组件：

Croq 风格 CSS，作者 Croquembouche
渐显（设置在speed=1），作者 Croquembouche
切换侧边栏，作者 EstrellaYoshte

本版式被设计成可以与以下组件一同使用……

居中页眉 Sigma-9

要使用这个组件，请将以下代码粘贴到Flop风格之后。如果你的页面使用了别的自定义Sigma版式，请将以下代码粘贴到这个自定义Sigma版式之后：

[[include :scp-wiki-cn:component:centered-header-sigma-9]]

你可以根据需要来修改标题、副标题、标题颜色、副标题颜色和版头标志。只需要把以下代码粘贴到居中页眉的include之后，然后进行相应的版式设置：

[[module CSS]]
:root{
--header-title: "标题";
--header-subtitle: "副标题";
--titleColor: 标题颜色;
--subtitleColor: 副标题颜色;
--lgurl: url(版头标志的图像链接);
}
[[/module]]

Flops的版头样版

侧边框

改编自 EstrellaYoshte的半影版式。

侧边框是内置组件，有两种类型：

authorbox
sidebox

使用说明因类型而异。

authorbox不会在width=1280px⁵和更小的屏幕上显示，这包含了手机屏幕。它可以被用于显示页面和作者信息。
sidebox会在width=1280px和更小的屏幕上折叠到页面边缘。在这些屏幕上，可以通过点击或将光标悬停在其上来查看内容。它可以被用于显示额外的信息。

在设置这些之前，请你思考一下——很大一部分的SCP维基用户使用移动设备来浏览维基。

1.作者栏authorbox

（看左上方）

默认情况下，authorbox被强制使用。它会在所有包含了Flop风格：浅色的页面上预载。如果你想删除它，请把以下代码：

[[include :scp-wiki-cn:theme:flopstyle]]

修改为以下代码：

[[div style="display: none;"]]
[[include :scp-wiki-cn:theme:flopstyle]]
[[/div]]

替代选项1：在删除authorbox后，你可以将其重建为一个显示你想要的信息的自定义版本。此功能对于合著、重写或翻译的页面特别有用。这里有一份创建authorbox的代码可供你参考：

[[div class="anchor"]]设定作者栏的固定位置。
[[div class="authorbox"]]

[[module ListPages name="="]]
||~ %%title%% ||
||= **作者：** %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]

|| 可选的额外文本 ||

[[/div]]
[[/div]]设置限制锚点的结束位置。

默认情况下，authorbox使用ListPages来自动显示数据⁶。理论上你可以复制authorbox里ListPages的部分然后粘贴到任何维基页面上，这些字段将以该页面特有的方式填充。当然，你可以根据需要更改这些字段中的任何一个。

你也可以编辑你的authorbox来让它显示你页面的独特文本，比如一个给读者的提醒。

一个authorbox示例就在页面左边。

flavorbox是你唯一一个应该用在authorbox里的div。

替代选项2：如果你想，你可以把authorbox移到页面右手边。想要这种效果的话，复制以下代码并把他粘贴到一个CSS模块里，并放在页面顶端⁷：

.authorbox{
right: unset;
left: 103.5%;
padding: 0 0 0 1em;
}

如果你有一个这样做了的页面，我建议不要在同一页面里继续插入任何一个sidebox，否则页面会变得相当混乱。

如果你打算在你的页面上插入sidecontainers⁸，我强烈建议在此时使用默认authorbox。原因是，当右侧authorbox和sidecontainer被一同使用时，它们会重叠，看着会很凌乱。这可能会让读者感到困惑，所以，最好还是不要立于危墙之下。

2.侧框栏Sidebox

sidebox是可选项。它要像这样设置：

[[div class="limit"]] 设置限制锚点的开始位置。
[[div class="anchor"]] 设定侧框栏的固定位置。
[[div class="sidebox"]]
你想要的sidebox内的文本。
[[/div]]
[[/div]]
与sidebox关联的文本。
[[/div]] 设置限制锚点的结束位置。

我建议在sidebox的关联文本后插入手动换行符。你可以通过用两组（即每边一组）的@@围住一个空格来实现这个效果。⁹当页面滚动过去时，sidebox会出现在此文本旁边。

▷ 显示示例 ◁

△ 隐藏示例 △

通过一些技巧，你可以

础於善存行州妒故培。跳星映关刘贵人接果令。居再法色谈啊责罪杨怕营交异乐，听次面六此应米某务旧读，能集操青报二消直创。待丰希松粒促请响井检布汉制业九，害道军系评温久耐决如略。具棉庆呼绝攻规让朝府产歌秋混证斤。关燃府然配坐粉虽久环垂乡里。粒养右总决鸡针足验射货岁共交。¹⁰

迅般破陈校识医稳游参川关读良新率。义急音径岁中蒸波垂称承否据室题。交毛负顾月省歌稳波是乡乎静。据岁吧氢露础市西冲常流陆汽平旧。物针六车子末爱千识银兰明安。相前病花去也造鲁钢家率护单呼杨於文。械下处争备令流黑字虽领所创。纸指伯盟冲期转极剂到，职友铁主造自倍耐杂切任而状。晶践察阻夜策煤意模道历！苏市波微神营终击只复号。

有多个侧框栏，

识挥走冲水践众医。劳专变道母受鲁轴打若展烧群选研之材。通乙促举宪包夜笑进制微！古响名化欢动调母视任突。演延宜石圆职尽模剂朝。我仅雨意器讲坚黄仍证，接的双备合孩永际费益计动核反。心白资拿氢苏尼看边表使上信装。养冷显球宽格发判为配明怀离材，同重额书家愿必附说马草谓教。

将品粒配杀端甲东构都停结西茶路。波也两别装适型妒证。原节革处划顶细怀，病船混用相距血七华架利够财既怀胜。态聚却母溶至占要料。病基族富属简味调伯航言。财季纪钟航苦精边伟啊门察是。倍星损球发早据位永挥，纸度仍思达海抓必面练二代化。类海之高析练延配就重肥余写斯国。女施并命几较密思叶严松李践台止，才弦派冲击金对部西找想下片挥。

它们会像这样运作。

语散卫你祖谈花陆渐重后！顺误情乐则移离做，析肉食冷探机字末卫油教束还战宣，快茶量祖共刚房设。犯二待员著林列材已队住。愿英今供假我酒守女放处候青架表假考，找诉袁制毫公意乾计与林仅滑然。师读国环仍掉系会缩区你核，里注三露父细香曾作亲品注轴早！

语滑状界达呀我意边适阳公身。题普卫卫论起送轮布度，资验来部刑破晶磁能止，包底苦室包脱章认。脱射担社钟值协云复州实染第的祖！之倍留改载年责举凯喜视提征准。跟营护该还理长季艺源位况。委病轮压长宗听文项德次由模。屋含停衣卫完千找南差。牛时具帮液待及厂。束胡假逐势写留吸影变精差宜。

△ 隐藏示例 △

记住limit这个div。没有limit，anchor就会导致当你滚动到它的起始位置后持续在页面中显示。

其他的可修改部分

如果有必要，你还可以编辑这些CSS属性中的任何一个，以更好地适配你的页面。¹¹¹²¹³这个列表没有包含Flop风格提供的所有样式——但至少这是个好的起点。

更改著作信息栏属性

body{ /* -- 根据网站版式重新着色 -- */
--barColour: 信息栏颜色;
}
#u-author_block{
display: none;
}
.translation_block{
display: none;
}

更改版头副标题颜色

.lite-heading h3{ /* -- 根据网站版式重新着色 -- */
color: 版头颜色;
}

更改带装饰的引用框和左侧边栏颜色

:root{
--accentColor: 颜色;
}

更改简单警告版头标志

（图片必须是透明的）

.warning-notice{
background-image: url(图像链接);
background-size: 400px;
}

更改高级警告版头标志

（图片必须是透明的）

.council{
background-image: url(图像链接);
}

更改系列导航背景¹⁴

.series-nav{
background: linear-gradient(to bottom right, 第一颜色, 第二颜色);
}

隐藏页面标题

#page-title{
display: none;
}

隐藏脚注页脚

.footnotes-footer{
display: none;
}

源代码

▷ 展示源代码 ◁

△ 隐藏源代码 △

/* ==== FONTS ==== */
 
/**
 * Architects Daughter
 *
 * By
 * Kimberly Geswein
 * License
 * Open Font License (OFL)
 * Source Link
 * https://fonts.google.com/specimen/Architects+Daughter/about
**/
 
 @import url(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap);
 
/**
 * Montserrat
 *
 * By
 * Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly
 * License
 * Open Font License (OFL)
 * Source Link
 * https://fonts.google.com/specimen/Montserrat/about
**/
 
 @import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);

/* ==== Flopstyle: LITE ==== */
 
/**
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Select CSS Styles Are Credited Where Necessary
**/
 
/* ==== HEADER AREA ==== */
 
/* == COMMON == */
 
 :root {
    /* = COLOUR SCHEME = */
    --alpha: hsl(0, 0%, 100%);
    --key: hsl(0, 0%, 5%);
 
    --accentColor: hsl(0, 100%, 30%);
    --vivid-lime-green: hsl(112, 77%, 48%);
}
 
 :root {
    /* = YUI TAB COLOUR SCHEME = */
    --darkAccent: hsl(360, 94%, 20%);
    --liteAccent: hsl(360, 100%, 27%);
    --alfaAccent: hsl(360, 100%, 95%);
}
 
 :root {
    /* = FONTS = */
    --header-font: "Montserrat", sans-serif;
    --script-font: "Architects Daughter", cursive;
}
 
 body {
    color: var(--key);
}
 
 #search-top-box,
 #top-bar,
 #login-status {
    right: 0;
}
 
/* == SITE BANNER == */
 
 #header h1 a,
 #header h1 a::before {
    color: hsl(0, 0%, 93%);
 
    font-family: var(--header-font);
    font-weight: 800;
    text-shadow: none;
}
 
 #header h2 span,
 #header h2 span::before {
    color: hsl(60, 62%, 85%);
 
    font-family: var(--header-font);
    font-weight: 400;
    text-shadow: none;
}
 
/* == SEARCH == */
 
 #search-top-box-input,
 #search-top-box-form input[type="submit"] {
    background: hsl(0, 0%, 20%);
    border-color: hsl(0, 0%, 60%);
    border-radius: 0;
}
 
 #search-top-box-form input[type="submit"] {
    font-size: unset;
}
 
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus {
    background: hsl(0, 0%, 30%);
    border-color: hsl(0, 0%, 70%);
}
 
/* == TOP MENU == */
 
 #top-bar ul li ul {
    top: 22px;
}
 
/* == SIDE MENU == */
 
 #top-bar .open-menu a {
    border-radius: unset;
}
 
 #side-bar .side-block {
    border-color: hsl(0, 0%, 20%);
    border-radius: 0;
}
 
 #side-bar .heading {
    color: var(--key);
    border-bottom: 1px solid hsl(0, 0%, 20%);
}
 
/* == INTERWIKI == */
 
 div.scpnet-interwiki-wrapper {
    margin-bottom: 2rem;
}
 
 iframe.scpnet-interwiki-frame {
    width: 15.127rem;
    min-height: 8rem;
    margin-left: 4px;
 
    background: hsl(127, 050%, 94%);
    border: 1px solid hsl(0, 0%, 20%);
}
 
 #interwiki body {
    overflow: hidden;
}
 
 #interwiki .side-block {
    padding: 5px;
 
    background: 0;
    border: 0;
    box-shadow: none;
}
 
 #interwiki .heading {
    color: var(--key);
    border-bottom: 1px solid hsl(0, 0%, 20%);
}
 
 #interwiki .menu-item img {
    display: none;
}
 
/* ==== CONTENT AREA ==== */
 
/* == SIDEBOXES == */
 
/**
 * Adapted From
 * Penumbra Theme by EstrellaYoshte
**/
 
 .limit {
    line-height: 1.5;
    z-index: 5;
}
 
 .limit br {
    display: block;
}
 
 .anchor {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
 
    z-index: 5;
}
 
 .authorbox,
 .sidebox {
    position: absolute;
    width: calc((100vw - 870px) / 2);
    max-height: calc(100vh - 18rem);
    margin-right: 8px;
    padding: .3rem 1.5rem;
 
    box-sizing: border-box;
 
    z-index: 5;
}
 
 .authorbox {
    top: .5rem;
    right: 103.5%;
    max-width: calc((100vw - 921.2px) / 2) !important;
    padding-right: 1rem;
 
    font-size: 95%;
}
 
 .sidebox {
    left: 103.5%;
    margin-left: 1rem;
    padding-left: 1rem;
 
    background: var(--alpha);
    border: 1px solid hsl(0, 0%, 73%);
    border-left: 8px solid var(--accentColor);
}
 
 .authorbox tr :is(th, td),
 .sidebox tr :is(th, td) {
    padding: .2rem !important;
}
 
 .flavorbox {
    width: 75%;
    margin: auto auto 5px;
    padding: 0 1rem;
 
    border: 1px solid #888;
}
 
/* == SIDEBOX MOBILE CUSTOMIZATION == */
 
/**
 * Courtesy Of
 * Woedenaz
**/
 
 @media (max-width: 767.9px) {
     .sidebox,
     .sidebox:hover {
     right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1rem);
    }
}
 
 @media (max-width: 1199.9px) {
     .authorbox {
     display: none;
     visibility: hidden;
    }
 
     .sidebox {
     top: .75rem;
     right: calc(((100vw - 45.8rem) / 2) * -1);
     left: initial;
     width: auto;
     max-width: 65vw !important;
     padding: 0 .4rem;
 
     background: var(--accentColor);
     border: 1px solid hsl(0, 0%, 73%);
     border-left: 8px solid var(--accentColor);
     border-radius: 0;
 
     overflow: visible;
     -webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
     clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
     -webkit-transition:
     color .2s ease-in-out .1s,
     -webkit-box-shadow .5s ease-in-out .1s,
     -webkit-clip-path .5s ease-in-out .1s;
     -o-transition:
     color .2s ease-in-out .1s,
     box-shadow .5s ease-in-out .1s,
     clip-path .5s ease-in-out .1s;
     transition:
     color .2s ease-in-out .1s,
     box-shadow .5s ease-in-out .1s,
     clip-path .5s ease-in-out .1s,
     -webkit-box-shadow .5s ease-in-out .1s,
     -webkit-clip-path .5s ease-in-out .1s;
    }
 
     .sidebox::before,
     .sidebox::after {
     content: " ";
     position: absolute;
     right: 0;
    }
 
     .sidebox::before {
     top: calc(50% - .75rem);
     width: 0;
     height: 0;
 
     border-top: .75rem solid transparent;
     border-right: .75rem solid var(--accentColor);
     border-bottom: .75rem solid transparent;
 
     transition: border .1s ease-in-out .1s;
     z-index: 10;
    }
 
     .sidebox::after {
     width: 100%;
     max-width: .75rem;
     height: 100%;
     max-height: calc(100vh - 18rem);
     top: 0;
 
     background: var(--alpha);
 
     transition:
     max-width .5s ease-in-out .1s,
     box-shadow .5s ease-in-out .1s;
     z-index: -1;
    }
 
     .sidebox > * {
     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;
    }
 
     .sidebox:hover {
     overflow: visible;
     -webkit-clip-path: inset(-.125rem -.25rem 0 0);
     clip-path: inset(-.125rem -.25rem 0 0);
     -webkit-transition:
     right .5s ease-in-out .1s,
     color .5s ease-in-out .2s,
     -webkit-box-shadow .5s ease-in-out .1s,
     -webkit-clip-path .5s ease-in-out .1s;
     -o-transition:
     right .5s ease-in-out .1s,
     color .5s ease-in-out .2s,
     box-shadow .5s ease-in-out .1s,
     clip-path .5s ease-in-out .1s;
     transition:
     right .5s ease-in-out .1s,
     color .5s ease-in-out .2s,
     box-shadow .5s ease-in-out .1s,
     clip-path .5s ease-in-out .1s,
     -webkit-box-shadow .5s ease-in-out .1s,
     -webkit-clip-path .5s ease-in-out .1s;
    }
 
     .sidebox:hover::before {
     border-top: 0 solid transparent;
     border-bottom: 0 solid transparent;
    }
 
     .sidebox:hover::after {
     right: 0;
     max-width: 100%;
    }
 
     .sidebox:hover > * {
     opacity: 1;
    }
}
 
/* == COLLAPSIBLES == */
 
 .collapsible-block-link {
    font-size: 120%;
    font-weight: bold;
}
 
 :is(div) .collapsible-block {
    /* = For Collapsibles Inside Divs = */
    padding: 1rem 0;
}
 
 .licensebox .collapsible-block-folded,
 .licensebox .collapsible-block-unfolded-link {
     margin: auto;
 
     text-align: center;
}
 
 .licensebox .collapsible-block-content {
    text-align: center
}
 
 .licensebox :is(blockquote, div.blockquote) {
    text-align: left;
}
 
/* == INFO BAR == */
 
 .info-container {
    --barColour: hsl(0, 89%, 18%);
}
 
 .info-container .collapsible-block-link {
    font-size: 100%;
}
 
 .info-container div.collapsible-block-content {
    padding: 0 .6rem 3rem;
}
 
 .info-container .wiki-content-table {
    width: 90%;
}
 
/* == PAGE RATING == */
 
 .page-rate-widget-box,
 div.page-rate-widget-box .rate-points {
    border-radius: 0;
 
    text-transform: capitalize;
}
 
 .page-rate-widget-box {
    margin-right: 0;
}
 
 .page-rate-widget-box .cancel,
 .page-rate-widget-box .cancel a:hover {
    border-radius: 0 !important;
}
 
/* == INFO MODULE == */
 
 .creditRate {
    margin-right: 0 !important;
}
 
 .rate-box-with-credit-button {
    border-radius: 0 !important;
    box-shadow: none !important;
}
 
 :is(.creditButton, .creditButtonStandalone) p a:hover {
    color: var(--vivid-lime-green) !important;
}
 
 div.credit.first .wiki-content-table {
    width: 100%;
}
 
/* == FORMATTING | [GENERAL] == */
 
 #page-title,
 .meta-title {
    padding-bottom: 0;
 
    font-family: var(--header-font);
    font-weight: 600;
}
 
 #page-content :is(h1, h2, h3, h4, h5, h6) {
    display: flex;
    flex-direction: column;
    justify-content: center;
 
    font-family: var(--header-font);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-underline-offset: 25%;
    word-break: unset;
}
 
 #page-content h2 {
    font-weight: bold;
}
 
 #page-content a {
    padding-bottom: 1px;
 
    border-bottom: thin solid;
}
 
 #page-content :is(.disruptionHeader, .footnoteref, .bibcite),
 #page-content :is(.rateup a, .ratedown a, .cancel a, .yui-nav a) {
    /* = Avoid Special Links = */
    border: 0;
}
 
 #page-content :is(.creditButton, .creditButtonStandalone) p a {
    /* = Avoid Special Links = */
    border-bottom: 0;
}
 
 #page-content a:hover {
    border-bottom-width: 2px;
 
    text-decoration: none;
}
 
 #page-content .footnoteref a:hover {
    text-decoration: underline;
}
 
 #main-content :is(#breadcrumbs, #page-options-container) a:hover,
 :is(#footer, #license-area) a:hover {
    padding-bottom: 1px;
 
    border-bottom: thin solid;
 
    text-decoration: none;
}
 
 hr {
     height: 0;
     margin: 1rem 0;
 
     background: 0;
     border-top: 1px solid hsl(0, 0%, 67%);
}
 
 ol li {
    margin: 0 0 1rem;
}
 
 ul {
    margin: 1rem 0;
}
 
 li, p {
    text-underline-offset: 30%;
}
 
 #toc {
    line-height: 1.5;
}
 
 .footnotes-footer,
 .bibitems {
    padding: 0 0 .5rem;
}
 
 #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,
 #top-bar ul li ul,
 #side-bar .side-block,
 .page-rate-widget-box,
 .scp-image-block {
    box-shadow: none;
}
 
/* == IMAGE BLOCK == */
 
 .scp-image-block .scp-image-caption {
    font-size: 95%;
    line-height: 1.35;
    text-underline-offset: 30%;
}
 
 .scp-image-block.block-right {
    margin: 0 0 1rem 2rem;
}
 
/* == CUSTOM DIV BLOCKS == */
 
 .raisa-header,
 .pink-header,
 .oracle-header,
 .cicapoco-header {
    margin-bottom: 1rem;
    padding: 0 .5rem;
 
    border: 1px solid;
 
    text-align: center;
}
 
 .raisa-header {
    /* = RAISA Notice Header = */
    background: hsl(60, 65%, 85%);
    border-color: hsl(0, 0%, 60%);
}
 
 .pink-header {
    /* = Pretty Header = */
    background: hsl(350, 100%, 85%);
    border-color: hsl(0, 4%, 36%);
}
 
 .pink-header hr {
    border-color: hsl(0, 4%, 36%);
}
 
 .oracle-header {
    /* = SPC From the Desk of ORACLE Header = */
    color: hsl(208, 100%, 97%);
    background: hsl(208, 67%, 44%);
    border-color: var(--key);
}
 
 .oracle-header hr {
    border-color: hsl(208, 100%, 97%);
}
 
 .img-resize img {
    /* = Header Icons = */
    float: left;
    width: auto;
    height: 8rem;
    margin: .5rem;
}
 
 .cicapoco-header {
    /* = SPC's RAISA-Equivalent Header = */
    background: lightblue;
    border-color: hsl(195, 50%, 39%);
}
 
 .cicapoco-header hr {
    border-color: hsl(195, 50%, 39%);
}
 
 .content-warning {
    /* = Content Warning = */
    width: 75%;
    margin: 1rem auto;
    padding: 0 1rem;
 
    background: var(--alpha);
    border: 3px double var(--key);
 
    text-align: center;
}
 
 blockquote, div.blockquote,
 .alt-blockquote, .lightweight {
    margin: 1rem 3rem;
    padding: 0 1rem;
}
 
 blockquote, div.blockquote {
    /* = Regular Quote Block = */
    background: hsl(0, 0%, 96%);
    border: 3px double hsl(0, 0%, 60%);
}
 
 :is(blockquote, div.blockquote) table.wiki-content-table th {
    background: hsl(0, 0%, 89%);
}
 
 .alt-blockquote {
    /* = Alternative Quote Block = */
    background: hsl(0, 0%, 96%);
    border: 1px solid hsl(0, 0%, 60%);
    border-radius: 1rem;
}
 
 .lightweight {
    /* = Lightweight Quote Block = */
    background: hsl(0, 0%, 90%);
}
 
 .card-block {
    /* = Decorative Quote Block = */
    margin: 1rem 0;
    padding: .6rem 1.2rem;
 
    background: hsl(220, 15%, 93%);
    border-left: 8px solid var(--accentColor);
    border-radius: .5rem;
}
 
 blockquote hr, div.blockquote hr, .alt-blockquote hr, .lightweight hr, .card-block hr {
    border-color: hsl(0, 0%, 67%);
}
 
 .log-header {
    /* = Interview/Exploration Log Header = */
    margin-bottom: 1rem;
    padding: 0 1rem;
 
    background: hsl(0, 0%, 96%);
    border: 3px dashed hsl(0, 0%, 60%);
    border-radius: 2rem;
}
 
 .report-box {
    /* = Report Block = */
    margin: 1rem 0;
    padding: 0 1rem;
 
    background: var(--alpha);
    border: medium solid var(--key);
}
 
 .report-box hr {
    border-color: var(--key);
}
 
 .realistic-shadow {
    /* = Better Shadows = */
    margin: 1rem 0 2rem;
 
    box-shadow:
     0 1px 1px hsla(0, 0%, 0%, .23),
     0 2px 2px hsla(0, 0%, 0%, .18),
     0 4px 4px hsla(0, 0%, 0%, .15),
     0 8px 8px hsla(0, 0%, 0%, .13);
}
 
 .report-box.red-tint {
    /* = Alternative Report Block Variants = */
    background: hsl(360, 91%, 86%);
    border-color: hsl(360, 62%, 66%);
}
 
 .report-box.red-tint hr {
    border-color: hsl(360, 62%, 66%);
}
 
 .report-box.orange-tint {
    background: hsl(30, 91%, 86%);
    border-color: hsl(30, 62%, 66%);
}
 
 .report-box.orange-tint hr {
    border-color: hsl(30, 62%, 66%);
}
 
 .report-box.yellow-tint {
    background: hsl(60, 91%, 86%);
    border-color: hsl(60, 62%, 66%);
}
 
 .report-box.yellow-tint hr {
    border-color: hsl(60, 62%, 66%);
}
 
 .report-box.green-tint {
    background: hsl(120, 91%, 86%);
    border-color: hsl(120, 62%, 66%);
}
 
 .report-box.green-tint hr {
    border-color: hsl(120, 62%, 66%);
}
 
 .report-box.cyan-tint {
    background: hsl(180, 91%, 86%);
    border-color: hsl(180, 62%, 66%);
}
 
 .report-box.cyan-tint hr {
    border-color: hsl(180, 62%, 66%);
}
 
 .report-box.blue-tint {
    background: hsl(240, 91%, 86%);
    border-color: hsl(240, 62%, 66%);
}
 
 .report-box.blue-tint hr {
    border-color: hsl(240, 62%, 66%);
}
 
 .report-box.magenta-tint {
    background: hsl(300, 91%, 86%);
    border-color: hsl(300, 62%, 66%);
}
 
 .report-box.magenta-tint hr {
    border-color: hsl(300, 62%, 66%);
}
 
 .report-box.grey-tint {
    background: hsl(210, 9%, 86%);
    border-color: hsl(210, 15%, 42%);
}
 
 .report-box.grey-tint hr {
    border-color: hsl(210, 15%, 42%);
}
 
 .report-box:is(.red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint) blockquote hr,
 .report-box:is(.red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint) div.blockquote hr {
    border-color: hsl(0, 0%, 67%);
}
 
 div.o5-box {
    /* = Overseer Document Block = */
    margin: 1rem 6rem;
    padding: 0 1rem;
 
    background: hsl(0, 0%, 75%);
    border: medium solid var(--key);
}
 
 div.o5-box hr {
    border-color: var(--key);
}
 
 .faux-source {
    /* = Mimics Page Source = */
    margin-bottom: 1rem;
    padding: 0 2rem;
 
    background: var(--alpha);
    border: 1px dashed hsl(0, 0%, 67%);
 
    font-family: var(--mono-font);
}
 
 .narration {
    /* = Mimics the Pages of a Book = */
    margin: 1rem 0;
    padding: 0 1rem;
 
    background: var(--alpha);
    border: 1px solid hsl(0, 0%, 63%);
}
 
 .warning-notice {
    /* = Simple Warning Block (Adapted From SCP-3143) = */
    padding: 0 1rem;
 
    background: var(--alpha);
    background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
    background-position: center;
    background-repeat: no-repeat;
    border: medium solid var(--key);
 
    text-align: center;
}
 
 .warning-notice hr {
    border-color: var(--key);
}
 
 .journal {
    /* = Journal Block (Adapted From SCP-4003) = */
    margin: 1rem 0;
    padding: .9rem;
 
    background-image:
       linear-gradient(to top,
     hsl(201, 33%, 84%) 0%,
     hsl(60, 29%, 89%) 8%);
    background-position: 0 8px;
    background-size: 100% 1.3rem;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: .9rem;
 
    font-family: var(--script-font);
}
 
 .journal p {
    margin: 0;
 
    font-size: 1.3rem;
    line-height: 1.3rem;
}
 
 .sms-message {
    /* = SMS Message Block = */
    float: left;
    clear: left;
    width: 22.4rem;
    margin: 0 0 1rem;
    padding: 0 1.2rem;
 
    background: hsl(0, 0%, 75%);
    border-radius: 2rem;
 
    font-size: 112.5%;
    text-align: center;
}
 
/* == 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: 2rem;
}
 
 .indented :is(h1, h2, h3, h4, h5, h6, ol, ul, .bibcite, .bibitems, .footnoteref, .scp-image-block, .image-container, .centered, .fncon, .fncon::before) {
    text-indent: 0;
}
 
 .rev-red,
 .rev-green,
 .rev-blue,
 .rev-yellow,
 .terminal-span {
    font-weight: bold;
}
 
 .rev-red {
    /* = Red Document Revision Text = */
    color: var(--liteAccent);
}
 
 .rev-green {
    /* = Green Document Revision Text = */
    color: hsl(120, 100%, 27%);
}
 
 .rev-blue {
    /* = Blue Document Revision Text = */
    color: hsl(240, 100%, 27%);
}
 
 .rev-yellow {
    /* = Yellow Document Revision Text = */
    color: hsl(40, 100%, 40%);
}
 
 .terminal-span {
    /* = Computer Terminal Text = */
    font-family: var(--mono-font);
    font-size: 110%;
    letter-spacing: .3px;
}
 
/* == Blinking Text Cursor == */
 
/**
 * Adapted From
 * Your Very First SCP! by The Great Hippo
**/
 
 .blinkbar{color: var(--key); animation: blink 1.5s infinite;}
 @keyframes blink{to{opacity:.0}}
 @keyframes flicker{0%{opacity:.9890}5%{opacity:.5842}10%{opacity:.9865}20%{opacity:.0412}20%{opacity:.6255}25%{opacity:.3157}30%{opacity:.7328}35%{opacity:.4654}40%{opacity:.9128}45%{opacity:.2449}50%{opacity:.5485}55%{opacity:.6438}60%{opacity:.1180}65%{opacity:.9085}70%{opacity:.0266}75%{opacity:.6795}80%{opacity:.7812}85%{opacity:.0117}90%{opacity:.2239}95%{opacity:.8897}100%{opacity:.2260}}
 @keyframes overlay-anim{0%{visibility:hidden}10%{visibility:hidden}11%{visibility:visible}50%{visibility:hidden}100%{visibility:hidden}}
 
 .lite-heading {
    /* = Special Heading Area (Adapted From SCP-4058) = */
    clear: both;
    margin: 3.6rem auto;
}
 
 .lite-heading h3 {
    color: var(--liteAccent);
}
 
 .lite-heading hr {
    width: 55%;
    margin: auto;
 
    border-width: medium;
}
 
 div.image-showcase {
    /* = Alternative Image Showcase = */
    width: 25rem;
    margin-bottom: 1rem;
 
    background: var(--alpha);
    border: 3px ridge var(--key);
}
 
 div.image-showcase.block-center {
    margin-right: auto;
    margin-left: auto;
}
 
 .scene-break {
    /* = Fancy Scene/Section Break = */
    width: 3.6rem;
    margin: 2rem 0;
}
 
 .listPagesNav {
    margin-bottom: 5rem;
}
 
 .listPagesNav-prev,
 .listPagesNav-next {
    /* = ListPages Navigation (Adapted from SCP-5552) = */
    width: 45%;
    margin: 0 0 1rem;
    padding: 0 2%;
 
    background: hsl(0, 0%, 90%);
    border: 1px solid hsl(0, 0%, 60%);
}
 
 .listPagesNav-prev {
    float: left;
 
    text-align: left;
}
 
 .listPagesNav-next {
    float: right;
 
    text-align: right;
}
 
 .fade-away {
    background:
       linear-gradient(
     to bottom,
     var(--alpha),
     var(--key));
}
 
 .footing::before {
    /* = Page Footing = */
    content: " ";
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
 
    border-bottom: 2px solid hsl(0, 0%, 47%);
}
 
 .footing {
    position: relative;
    bottom: -2px;
    margin-bottom: 2px;
 
    border-bottom: 1px solid hsl(0, 0%, 47%);
}
 
 .related-flex {
    /* = Related Articles Box = */
    display: flex;
    justify-content: center;
}
 
 .related {
    margin: 1rem 0;
    padding: 0 1rem;
 
    background: var(--alpha);
    border: thick solid hsla(0, 0%, 60%, .5);
 
    text-align: left;
}
 
 .series-nav {
    /* = Series Navigation = */
    margin: .5rem 0;
 
    background:
       linear-gradient(to bottom right,
     hsla(0, 0%, 100%, 1),
     hsla(0, 0%, 50%, .5));
    border: outset 1.5px var(--key);
    border-radius: 2rem;
 
    font-size: 85%;
    font-weight: bold;
    text-align: center;
}
 
/* == ADVANCED WARNING HEADER == */
 
/**
 * Adapted From
 * SCP-001-JP - indonootoko's Proposal by indonootoko
**/
 
 .orderwrapper {
    position: relative;
    width: auto;
 
    text-align: center;
}
 
 .council {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 295px;
    height: 295px;
    margin: auto;
 
    background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 295px 295px;
}
 
 .ordertitle {
    position: absolute;
    top: 27px;
    right: 0;
    left: 0;
}
 
 .ordertitle h1 {
    color: var(--key);
 
    font-size: 220%;
    line-height: 90%;
}
 
 .orderdescription {
    position: absolute;
    top: 93px;
    right: 0;
    left: 0;
    width: 100%;
}
 
 .orderdescription h1 {
    color: var(--key);
 
    font-size: 120%;
}
 
 .orderdescription p {
    color: var(--key);
 
    font-size: 90%;
}
 
 .itemno {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
}
 
 .itemno h1 {
    color: var(--key);
 
    font-size: 170%;
}
 
/* ==== YUI TABS ==== */
 
/* == YUI TAB BASE == */
 
 @import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);
 
/* == YUI TAB CUSTOMIZATION == */
 
/**
 * Adapted From
 * Black Highlighter Theme by Woedenaz
**/
 
 .yui-navset * {
    transition:
     color 80ms cubic-bezier(.4, 0, .2, 1),
     background 80ms cubic-bezier(.4, 0, .2, 1);
}
 
 :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav {
    display: flex;
    flex-wrap: wrap;
 
    border-color: var(--darkAccent);
}
 
 :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav a {
    /* = Link Modifier = */
    color: var(--key);
    /* = Tab Background Colour | [UNSELECTED] = */
    background: var(--alfaAccent);
    /* == */
}
 
 :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav li {
    /* = Listitem Modifier = */
    display: flex;
    flex-grow: 2;
    margin: 0;
    padding: 0;
 
    color: var(--alpha);
    background: var(--darkAccent);
 
    font-size: 1.05rem;
}
 
 :is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-nav li a {
    width: 100%;
 
    border: 0;
}
 
 :is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav .selected {
    /* = Selection Modifier = */
    flex-grow: 2;
    margin: 0;
    padding: 0;
 
    color: var(--alpha);
    /* = Tab Background Colour | [SELECTED] = */
    background: var(--darkAccent);
    /* == */
}
 
 .yui-navset .yui-nav li em {
    border: 0;
}
 
 .yui-navset :is(.yui-nav, .yui-nav .selected, .yui-navset-top .yui-nav) a em {
    padding-top: .47rem;
    padding-bottom: .47rem;
 
    text-align: center;
}
 
 .yui-navset :is(.yui-content, .yui-navset-top .yui-content) {
    padding: .53rem;
 
    border-color: hsl(0, 0%, 60%);
 
    line-height: 1.5;
}
 
 .yui-navset .yui-nav .selected a {
    color: var(--alpha);
    background: var(--darkAccent);
}
 
 .yui-navset .yui-nav a:is(:hover, :focus) {
    color: var(--alpha);
    /* = Tab Background Colour | [HOVER] = */
    background: var(--liteAccent);
    /* == */
}
 
 .yui-navset .yui-nav .selected :is(a, a em) {
    border: 0;
}
 
 .yui-navset .yui-nav .selected a:is(:hover, :active, :focus) {
    background: var(--darkAccent);
 
    cursor: default;
}
 
/* == WIKIWALK NAVIGATOR == */
 
 .footer-wikiwalk-nav {
    text-align: center;
}
 
/* == BETTERFOOTNOTES PATCH == */
 
 :root {
    --posX: calc(50% - 358px - 13rem) !important;
    --fnLinger: 1.5s !important;
}
 
 .fnnum {
    font-size: 90%;
}
 
 .fnnum:hover + .fncon {
    right: calc(-8vw - 4rem) !important;
}
 
/* == CROQSTYLE PATCH == */
 
 #edit-page-textarea {
    font-family: unset;
}
 
 tt {
    margin: unset;
    padding: unset;
    background: unset;
    border-radius: unset;
    font-size: unset;
}
 
/* == FLOPS HEADER PATCH == */
 
 #page-content .disruptionHeader {
    padding-bottom: .4em;
}
 
/* == PAGE TAGS == */
 
 #main-content .page-tags {
    border-top: 1px solid hsl(0, 0%, 73%);
}
 
 #main-content .page-tags a {
    display: inline-block;
    height: .8125rem;
    margin: 0 0 .5rem .75rem;
    padding: .1875rem .3125rem .1875rem 0;
 
    color: hsl(0, 0%, 95%);
    background: hsl(0, 0%, 27%);
    border-bottom-right-radius: .25rem;
    border-top-right-radius: .25rem;
 
    font-size: .6875rem; /* 11px */
    font-weight: normal;
    line-height: .8125rem; /* 13px */
}
 
 #main-content .page-tags a::before {
    width: 0;
    height: 0;
    top: -.1875rem;
    left: -.625rem;
    padding: 0 .0625rem .1875rem;
 
    border-color: transparent hsl(0, 0%, 27%) transparent transparent;
    border-style: solid;
    border-width: .5rem .5rem .5rem 0;
}
 
 #main-content .page-tags a::before,
 #main-content .page-tags a::after {
    content: "";
    position: relative;
    float: left;
}
 
 #main-content .page-tags a::after {
    top: .2813rem;
    left: -.5rem;
    width: .25rem;
    height: .25rem;
 
    background: var(--alpha);
    border-radius: .125rem;
}
 
 #main-content .page-tags span {
    max-width: 100%;
 
    border-top: .5rem solid transparent;
}
 
/* == SHOW-CHANGES HIGHLIGHTS == */
 
 .inline-diff ins::before {
    color: hsl(240, 100%, 93%);
}
 
 .inline-diff del::before {
    color: hsl(0, 100%, 90%);
}
 
 .inline-diff ins + del::before,
 .inline-diff del + ins::before {
    color: transparent;
}
 
 .inline-diff br + ins::before,
 .inline-diff br + del::before,
 .inline-diff ins:first-of-type::before,
 .inline-diff del:first-of-type::before {
    content: "\f111";
    position: absolute;
    left: -1rem;
    display: inline-block;
 
    font: normal normal normal 16px/1 "FontAwesome";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}
 
/* ==== BREAKPOINTS ==== */
 
/* == BREAKPOINTS KEY == */
 
/**
 * Dbl-Extra-Small: ≤383.9px
 * Extra-Small: 384px … 575.9px
 * Small: 576px … 767.9px
 * Medium: 768px … 983.9px
 * Large: 984px … 1199.9px
 * Extra-Large: 1200px … 1391.9px
 * Dbl-Extra-Large: ≥1392px
**/
 
/* == DBL-EXTRA-SMALL MEDIA QUERY == */
 
 @media (max-width: 383.9px) {
     #header h1 a {
     font-size: 75%;
    }
 
     div.image-showcase {
     width: 90%;
    }
 
     div.o5-box {
     margin: 1rem 0;
    }
}
 
/* == EXTRA-SMALL MEDIA QUERY == */
 
 @media (min-width: 384px) and (max-width: 575.9px) {
     #header h1 a {
     font-size: 85%;
    }
 
     div.image-showcase {
     width: 100%;
    }
 
     div.o5-box {
     margin: .5rem;
    }
}
 
/* == SMALL MEDIA QUERY == */
 
 @media (max-width: 767.9px) {
     .open-menu a:hover {
     box-shadow: none;
    }
 
     .info-container div.collapsible-block-content div {
     margin-right: 0;
     margin-left: 0;
    }
 
     blockquote, div.blockquote,
    .alt-blockquote, .lightweight {
     margin: 1rem 0;
    }
}
 
/* == REDUCED MOTION ACCESSIBILITY == */
 
 @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
     animation-duration: .001s !important;
     animation-iteration-count: 1 !important;
     transition-duration: .001s !important;
    }
}

Footnotes

这是什么

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

版式

页面版本: 18, 最后编辑于: 04 Apr 2025 16:17

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