飘渺之地
飘渺之地
作者 Miyoki FainthMiyoki Fainth
发布于 03 Jun 2023 06:52
评分: +20+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, 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):

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

评分: +20+x
Image Unavailable

我们走吧。


嗨,你好!

欢迎来到汵月的小世界!uwu

L.Fainth

25:60

您已成功添加“L.Fainth”为好友,开始聊天吧!

耶!
诶等等,你是谁啊?


如你所见,我有很多名字。但不论是汵月L.Fainth又或是MiyokiEkkita,它们所指代的一直都是那个可恶的玩意:其具体表现为一拥有社交焦虑的男性人类,时不时变成女的

emmm…好像没太听懂诶,能详细介绍一下咩?


从主观角度来说,我是超酷蝾螈教会的一名主教,在我的身后有千百万名信徒,他们都戴着那标志着超酷身份的黑色墨镜,代表着这个教会中那些酷酷的教义。作为现实扭曲者,我掌控着世间的杂鱼之力,并会在适当的时机从某个偏僻角落窜出,将这个美丽的世界污染成上面有一个废物的美丽世界。哈哈,太邪恶辣!1

😨


而从客观角度来说,我只是The Backrooms中文维基的一名底层写手,无耻地霸占着几个毫无意义的编号页面,连吃自助餐都不敢去那几个有厨师在的柜台取我爱吃的东西,被懒惰、社恐和难以集中的注意力所折磨。

😨
那…你有没有什么兴趣爱好之类的?


我有很多喜欢的东西!比如各种怪谈及科幻文学、音乐相关、养鱼、核类艺术、lxtxlxtx、Minecraft、发电、芒果冰激凌和睡觉等等()

就这些嘛?

昂,就这些。
😎

😎


❤️翻译作品❤️



以下为我的翻译作品!好耶!

隐秘层级 - 出口(旧)

原作者为HikarinuHikarinu

Joke Entity 418 - 咖啡与罪恶

原作者为EpicNecromancer1EpicNecromancer1


❤️原创作品❤️



以下为我的原创作品!好耶!

原创层级/隐秘层级/子区集/房间

Level C-430 - "雾林"

http://backrooms-wiki-cn.wikidot.com/level-c-430

"天空是忧郁的灰色,与朦胧的灰雾融合在了一起;在林中,还弥漫着迷人的、不含一点水汽的蓝色浓雾。"

评分:64
评分人数:68





(与7sunami7sunami合著)

Level C-900 - "不眠之夜"

http://backrooms-wiki-cn.wikidot.com/level-c-900

"今夜,在狂风暴雨的掩护下,犯罪即将发生…"

评分:68
评分人数:78




2022 后室0.5K “阈限”竞赛第五名。


Level C-939 - "山雨"

http://backrooms-wiki-cn.wikidot.com/level-c-939

"一场山雨,带走了我对家乡的全部记忆。"

评分:32
评分人数:38




2024 一元复始竞赛第八名。



Entity C-79 - "意识终端"

http://backrooms-wiki-cn.wikidot.com/entity-c-79

"这是结束,但也是新的开始。"

评分:36
评分人数:42




2022 “死亡”竞赛第十名。



原创物品


暂无:(

暂无:(

原创故事/POI/搞笑文章


暂无:(

📁杂物堆📂





后室神风站

点此前往


🏆成就🏆



✍留言板✍


范例:xiaoxuxu233xiaoxuxu233:饱满的

Kunieda LynneKunieda Lynne: 酷炫的

CraexxeusCraexxeus:高端的

TylersssTylersss:潮流的


author:分类页面的授权形式另行在各页面说明。
Pages categorised as author: are attributed in undesignated protocols as are stated on each of them.