信息模块内容警告

注意


此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许,请勿修改此页的内容。


评分: +5+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; }
cw-s9-light.png
Sigma-9
cw-s9-dark.png
夜行 版式
cw-bhl-light.png
黑色标记笔 主题版式
cw-bhl-dark.png
超黑标记笔 主题版式

这是能够添加一个不太显眼的提醒的组件。其被设计为处在信息模块的下方,以将小箭头指向信息按钮。

它所能够做的就是将注意力直接引向信息模块,而你将会在此处写下你的内容警告。

介意内容警告的读者可以选择是否阅读。希望不被内容警告剧透的读者也可以忽略它。不过所有的读者都会注意到有个内容警告,这才是最重要的。

如果你希望你的所有读者都得阅读内容警告,那你就不应该使用这个组件。直接把内容警告放到文章中去。

请注意作者没有义务给他们的作品提供内容警告,但如果你选择了要这么做,希望这个组件能让其变得更简单点。

不保证这个组件与任何版式都能良好兼容运作(除了Sigma-9和黑标笔);如果不能的话,给版式创建者说明关于这个的漏洞。

用法

直接在信息模块下方引用该组件:

[[include :scp-wiki-cn:credit:start]]
有关文章的信息
⚠️ **内容警告:**本文包含有一个内容警告
[[include :scp-wiki-cn:credit:end]]

[[include :scp-wiki-cn:component:info-cw]]

该组件故意没有做任何内置的自定义选项,因为它应该是严肃的且在世界观外的,而在所有文章之间保持一致则有助于这一点。

如果你希望将这个与AyersAyers信息栏一同使用,我推荐直接用简单的居中文本就行了:

= ⚠️ 内容警告

⚠️ 内容警告

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License