What this is
A bunch of miscellaneous CSS 'improvements' that I, 
Croquembouche, 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.
.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; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 0.5em;
z-index: 5;
font-family: 'Nanum Gothic', san-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
border: 0.2em solid #888;
background-color: #fff;
border-radius: 3em;
color: #888;
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 708px;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -18rem;
width: 15.25rem;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
}
#side-bar:target {
left: 0;
}
#side-bar:focus-within:not(:target) {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 19.75em;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
/* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
@supports (-moz-appearance:none) {
#top-bar .open-menu a {
pointer-events: none;
}
#side-bar:not(:target) .close-menu {
display: block;
pointer-events: none;
user-select: none;
}
/* This pseudo-element is meant to overlay the regular sidebar button
so the fixed positioning (top, left, right and/or bottom) has to match */
#side-bar .close-menu::before {
content: "";
position: fixed;
z-index: 5;
display: block;
top: 0.5em;
left: 0.5em;
border: 0.2em solid transparent;
width: 30px;
height: 30px;
font-size: 30px;
line-height: 0.9em;
pointer-events: all;
cursor: pointer;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:focus-within .close-menu::before {
pointer-events: none;
}
}
}
PHÂN LOẠI QUẢN THÚC:
euclid
PHÂN LOẠI BỔ SUNG:
{$secondary-class}
PHÂN LOẠI HIỂM HỌA:
caution
Mã vật thể: {$item-number}
Phân loại Quản thúc:
{$container-class}
Phân loại Bổ sung:
{$secondary-class}
Phân loại Quy mô:
{$disruption-class}
Phân loại Hiểm họa:
{$risk-class}
Một con đường thuộc môi trường hoạt động của SCP-7533
Mã vật thể: SCP-7533
Phân loại: Euclid
Quy trình Quản thúc Đặc biệt: Do đặc tính của SCP-7533, việc quản thúc hiện tại là bất khả thi. Thành viên của Đội Đặc nhiệm Cơ động Ifalos-Rho (“Cuộc Truy Bắt Chết Người”) cần theo dấu SCP-7533 mọi lúc, đồng thời cập nhật vị trí và hành vi của dị thể cho nghiên cứu viên. Cần giới hạn môi trường hoạt động của dị thể bằng những thủ thuật được nhân viên Tổ Chức thực hiện tại khu vực được đề cập.
Không nhân sự nào được quyền tiếp xúc với SCP-7533 tại mọi thời điểm, và những cá nhân bước vào vùng hoạt động của dị thể với ý định tiếp cận nó phải được coi là đã mất tích.
Mọi hiện tượng mà nhân viên cho là bất thường, gây mê hoặc, nổi bật hoặc đối lập hoàn toàn với những sự kiện thông thường cần được thông báo cho trạm y tế gần nhất. Nếu chứng kiến bất kỳ sự việc nào như trên, hãy thông báo cho giám sát viên của bạn.
Mô tả: SCP-7533 là mã định danh cho một ảnh ảo của một con cá cần câu trưởng thành, di chuyển quanh các khu đô thị thuộc quốc đảo Nhật Bản. Mặc dù SCP-7533 ưu tiên những khu vực trên do nguồn thức ăn sẵn có, nó thường di chuyển trên những con đường hẻm tối nhỏ hẹp ít người lui tới, hệ thống đường ngầm và các hầm bảo trì trong hầu hết thời gian.
Trong trạng thái thụ động, SCP-7533 hiện diện giống một khoảng không vô thể nổi bật do hiện tượng khúc xạ, với hiệu ứng quan sát được giống như trên bề mặt nhựa đường nóng, được bao quanh một lớp bóng màu hồng. Thực thể chỉ thể hiện trạng thái chủ động khi săn mồi; khi đó, hình ảnh của nó sẽ trở nên đục dần và có thể quan sát bằng mắt thường.
Kích cỡ chính xác của SCP-7533 hiện chưa rõ, với chiều dài ước lượng qua hình ảnh vào khoảng 2.1 - 2.3m. Giống như các loài sinh vật không dị thường tương ứng, nó có thị lực kém, răng quá khổ và sống lưng phát quang với độ lệch đáng kể so với thông thường. “Mồi câu” của SCP-7533 có hình dạng của một chiếc đèn dầu phát ra một ánh sáng hồng, với cường độ tương đương với đèn ống neon. Nó còn phát ra tiếng ồn nhỏ và có cường độ sáng thay đổi liên tục, mặc dù độ đậm của bóng không thay đổi, và phần bóng có màu hồng Baker-Miller trong mọi trường hợp.
SCP-7533 chủ yếu săn các loài động vật lớn, với con người chiếm đa số trong các loài từng chạm trán với sinh vật này. Mặc dù có thị lực kém, SCP-7533 có khả năng săn mồi lão luyện, có thể đột ngột di chuyển với tốc độ cao trong thời gian ngắn để tiếp cận con mồi, nhưng nhanh chóng đuối sức ngay sau đó. Vì hạn chế này, SCP-7533 thường chọn những vị trí cơ hội để thu hút con mồi, và nó thực hiện điều này một cách tương đối dễ dàng.
Ánh sáng phát ra từ SCP-7533 đã được chứng minh là có ảnh hưởng xấu đến nhận thức nhằm gây suy yếu và thao túng con mồi, với phạm vi của hiệu ứng chưa được làm rõ. Các ảo giác như hoang tưởng nghe nhìn, hiệu ứng giống ảo ảnh, các biểu hiện sợ hãi, hoảng loạn, mất tập trung và bối rối đều đã được báo cáo, và các hiệu ứng này thường dẫn đến việc nạn nhân vô thức đưa bản thân đến gần vị trí của SCP-7533 để dễ dàng bị bắt.
Cần lưu ý rằng những ảo giác mà SCP-7533 gây ra là độc nhất đối với mỗi cá nhân, và do đó, có thể sử dụng những mâu thuẫn trong các hiện tượng được quan sát để phân biệt ảo giác với thực tế. Hiện chưa rõ liệu sinh vật này săn mồi vì thú vui hay để duy trì sự sống.
Phụ lục 7533.1 – Phát Hiện
SCP-7533 đã được Tổ Chức lưu tâm sau cái chết của Hinata Ito vào ngày 18/04/2018. Người đi cùng với anh là Akira Nakamura đã báo cáo cho chính quyền địa phương, nơi các nhân viên ngầm thuộc Tổ Chức đã nhanh chóng để ý và nắm quyền tiếp quản. Sau khi theo dõi đoạn ghi hình trong điện thoại của Nakamura về sự việc trên, Tổ Chức đã xác định một quy trình quản thúc dạng giám sát cần phải được thực hiện.
Đoạn video đã được ghi chép lại và phiên dịch từ tiếng Nhật.
Bản Ghi Video Phát Hiện:
Nguồn: Hình ảnh ghi lại từ điện thoại di động của Akira Nakamura vào ngày 18/04/2018.
Nhân chứng: Akira Nakamura và Hinata Ito (Đã chết)
[BẮT ĐẦU BẢN GHI]
Video bắt đầu với hình ảnh của một cá nhân nam có dáng người cao, được cho là Hinata Ito, đang đi xuống một con hẻm được chiếu sáng rực rỡ bằng đèn neon tại Shibuya, Nhật Bản. Anh ta cười và đáng chú ý là đang say. Đằng sau máy quay, có thể nghe thấy Akira đang cười cùng với bạn của mình.
Hinata: Cậu có nghe tiếng đó không? Ai đó phải sửa cái đèn đó đi, haha, cái tiếng ù đó ồn thật!
Akira: Tôi có nghe thấy cái gì đâu. Có khi tôi phải uống nhiều nữa, hahaha
Cả hai tiếp tục cười đùa trong khi đoạn video quay quanh con hẻm, cho thấy nhiều loại bảng hiệu và đèn neon. Các lối vào khách sạn tình yêu, mũi tên chỉ vào những con hẻm tối và biển hiệu cửa hàng nhấp nháy được hiển thị nổi bật với màu sắc rực rỡ. Họ tiếp tục đi, trong khi những ánh đèn dần chuyển sang một màu hồng duy nhất.
Hinata: Wao! Chuyện gì xảy ra với mấy cái đèn vậy? Cậu có nghĩ cái này là do một khách sạn tình yêu nào đó làm không nhỉ? Cậu có muốn vào chung với tớ không Akira? Anh ta cười đùa, có cử chỉ hôn hướng về phía điện thoại.
Akira: cười thành tiếng Cậu đang nói nhảm gì đấy, cơ mà đúng là có mấy khách sạn ảo ma thật. Có một cái khách sạn mà Haru ở chung với bạn của cô ấy có nguyên một con khủng long và CẢ một cái hồ bơi trong phòng đó luôn.
Hinata: Gì á? Thật luôn à? Hay vậy ta. Anh ta quay đi khỏi hướng của máy quay và phấn khởi chỉ về hướng một biển báo neon màu hồng sáng rực đang nhấp nháy Đi theo nó đi! Tớ có linh cảm tốt về nó đấy.
Đoạn ghi hình tiếp tục, đi theo Hinata xuống một con hẻm tối. Anh ta dừng trước một gian hàng trống. Ánh sáng duy nhất chiếu xuyên qua cửa sổ là ánh đèn neon màu hồng chói đáng quan ngại tràn ra từ căn phòng đằng sau.
Hinata: Ê cái cửa này không có khóa! Vô xem thử đi.
Akira: bối rối Tôi không chắc lắm đâu. Có cái gì mờ ám ở đây. Tôi có linh cảm xấu về vụ này đấy.
Hinata được trông thấy mở cánh cửa trước khi Akira nói xong, và đã bước vào căn phòng, tiếp tục di chuyển về phía nguồn sáng.
Hinata: Thôi nào! Mạo hiểm chút đi chứ!
Một tiếng thở dài vang lên khi Akira thận trọng bước vào. Video quay quanh căn phòng một cách chậm rãi, với cả căn phòng được bao quanh bằng một lớp giấy dán tường và lớp sơn màu hồng sáng rực.
Akira: Sao nó lại hồng thế nhỉ? Làm gì có ai tỉnh táo mà lại thích cái kiểu này cơ chứ — Ê đừng đi vào sâu như thế chứ! Nơi này làm tôi rợn cả tóc gáy lên đấy.
Tiếng bước chân của Hinata vang lên ở xa, trong khi giọng của anh ta vọng lại trong đoạn ghi hình
Hinata: Thôi nào, nhanh chân lên! Cậu phải nhìn chỗ này mà xem! Ở đây như cái nhà cười vậy. Tớ không biết nó có phải là một cửa hàng tình dục hay là kho chứa đồ của một cái khách sạn tình yêu không nữa. Tiếng cười của anh ta tiếp tục vang vọng khắp hành lang
Akira đi vào sảnh của căn phòng phía sau. Những chiếc gương với đủ các loại kích cỡ được treo lên tường, và trên trần nhà có một sợi dây lộn xộn hướng vào sâu trong tòa nhà. Khi anh ta quay sang nhìn bản thân trong gương, video quay được một ánh sáng mờ ảo cùng với hiệu ứng nhiễu trong giây lát. Máy quay ghi lại hình ảnh Akira cau mày và lắc đầu nhẹ, thể hiện sự bối rối. Hinata không xuất hiện trong khung hình, nhưng có thể nghe thấy giọng anh cầu xin Akira đi xuống dưới tầng hầm từ một quãng xa, cùng với một tiếng hét chói tai và im lặng ngay sau đó.
Góc nhìn của máy quay mờ dần khi Akira chạy về phía cầu thang, lao về phía bóng tối và cất tiếng gọi Hinata. Tiếng bước chân đi xuống vang lên, đồng thời tiếng ù ồn hơn trong khi Akira tiến đến cuối cầu thang.
Một tiếng hét giật mình xuất hiện khi máy quay rớt xuống sàn nhà. Những tiếng thở mạnh và tiếng chửi rủa được ghi lại khi máy quay được nhặt lên. Sau khi căn chỉnh lại từ cú rơi và bóng tối xung quanh, máy quay tập trung vào ánh đèn neon mờ ảo và hình bóng cái xác của Hinata Ito. Một tiếng cắn "phập" được nghe thấy khi SCP-7533 nuốt trọn phần đầu và biến mất nhanh như nó xuất hiện.
Tiếng thở nặng nề được ghi lại. Tiếng ồn của đèn to hơn khi chúng dần được bật lên, nhấn chìm khung cảnh trong ánh sáng màu hồng chói lòa. Chiếc điện thoại được giật lại một cách vội vã và video tắt ngay sau đó.
Hình ảnh cuối cùng của Hinata Ito
[KẾT THÚC BẢN GHI]
Sau khi đoạn video được thu hồi từ cảnh sát, Akira Nakamura đã được cấp thuốc lú đều đặn và sự kiện dần bị lãng quên. Xác của Hinata Ito đã được nhân viên Tổ Chức thu hồi và tiêu hủy.
