Module Thông Tin Cảnh Báo Nội Dung

LƯU Ý:

Đây là trang component được sử dụng nội bộ bởi Wiki SCP-VN. Trang này được tạo để sử dụng và thêm vào các trang khác.

đánh giá: +1+x
đánh giá: +1+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
Theme Night Rush
cw-bhl-light.png
Theme Đen Tô Đậm
cw-bhl-dark.png
Theme Siêu Đen Tô Đâm·

Đây là component thêm một mục cảnh báo nội dung nhưng không gây khó chịu với độc giả do vướng víu. Nó được thiết kế nằm ngay dưới Module Thông Tin với mũi tên hướng vào nút thông tin.

Tất cả những gì nó làm là hướng sự chú ý vào module thông tin, nơi bạn viết cảnh báo nội dung của mình.

Độc giả muốn biết về cảnh báo nội dung có thể đọc nó. Độc giả muốn đọc bài mà không muốn cảnh báo nội dung nói trước kết cục tác phẩm có thể không đọc nó. Nhưng, tất cả người đọc đều biết tác phẩm có cảnh báo nội dung, và đó là những gì tối thiết ta cần.

Nếu bạn muốn tất cả độc giả của bạn đều đọc cảnh báo nội dung trước, thì bạn không nên dùng component này. Đặt nội dung cảnh báo vào thẳng bài viết sẽ là tốt nhất.

Vui lòng lưu ý rằng tác giả không bị buộc phải thêm cảnh báo nội dung, nhưng nếu bạn muốn có cảnh báo nội dung cho tác phẩm của mình, mong rằng component này sẽ giúp bạn.

Tôi không đảm bảo rằng component này sẽ hoạt động trơn tru trên toàn bộ theme (trừ Sigma-9 và BHL); nếu như nó hiễn thị lỗi, hãy hỏi tác giả theme ấy.

Sử Dụng

Thêm component này ngay dưới Module Thông Tin:

[[include :scp-vn:info:start]]
Thông tin về tác phẩm
⚠️ **Cảnh báo nội dung:** Tác phẩm này có cảnh báo nội dung
[[include :scp-vn:info:end]]

[[include :scp-vn:component:info-cw]]

Component này được cố tình thiết kế không có thêm tùy chọn tùy biến, do nó cần phải nghiêm túc và nằm ngoài vũ trụ, và việc giữ nguyên đồng nhất giữa các tác phẩm cũng cần thiết.

Nếu bạn muốn dùng cái này với Dải Thông Tin bởi AyersAyers, tôi khuyên dùng dạng viết giữa đơn giản như sau:

= ⚠️ cảnh báo nội dung

⚠️ cảnh báo nội dung

Nếu không có ngoại lệ được nêu, nội dung của trang này được xuất bản dưới giấy phép Creative Commons Attribution-ShareAlike 3.0 License