#side-bar {
/* ===SECONDARY & TERTIARY COLORS=== */
/* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
/* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
--swatch-secondary-color: var(--swatch-menubg-dark-color);
--swatch-tertiary-color: var(--swatch-menubg-medium-color);
--swatch-alternate-color: var(--swatch-menubg-light-color);
/* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
--swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
--swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
/* ===SIDE-BAR ELEMENTS=== */
/* ===SIDE-BAR GENERAL=== */
--sidebar-bg-color: var(--swatch-menubg-dark-color);
--sidebar-resources-bg-color: 0,0,0,0;
--sidebar-media-bg-color: 0,0,0,0;
/* ===SIDEBLOCK MENU=== */
--sideblock-heading-border-color: var(--bright-accent);
--sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
--sideblock-heading-text-color: var(--swatch-text-tertiary-color);
/* ===MENU-ITEMS=== */
--sidebar-border-color: var(--swatch-primary), 0.08;
--sidebar-subtest-color: var(--swatch-text-tertiary-color);
--sidebar-links-text: var(--swatch-text-tertiary-color);
--sidebar-links-hover-bg-color: var(--bright-accent);
--sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
/* ===SIDEBAR COLLAPSIBLES=== */
/*Folded Colors */
--sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
--sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
--sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
--sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
/*Unfolded Colors */
--sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
--sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
--sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
--sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
/* Unfolded Body Colors */
--sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
--sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
scrollbar-color:
rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
rgba(var(--swatch-secondary-color), 0.05); /* Track */
border-color: rgba(var(--swatch-secondary-color), 0.4);
}
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
scrollbar-color:
rgb(var(--swatch-primary-darker), 1) /* Thumb */
rgb(var(--swatch-menubg-dark-color), 1); /* Track */
}
#side-bar:focus-within {
scrollbar-color:
rgb(var(--swatch-primary-darker), 1) /* Thumb */
rgb(var(--swatch-menubg-color), 1); /* Track */
}
#side-bar::-webkit-scrollbar-track {
background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
#side-bar .side-block.media a:any-link {
background: rgba(var(--swatch-menubg-light-color),0.75) !important;
}
#side-bar .side-block.media a::before {
background: rgb(var(--social-color));
}
#side-bar .side-block.media a img {
filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color),0));
transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
#side-bar .side-block.media a:focus-within img {
filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
box-shadow: inherit;
}
#side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
filter: invert(1);
}
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
background-color: rgb(var(--swatch-menubg-dark-color));
}
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
mix-blend-mode: lighten;
}
<html>
<head>
</head>
<body>
<script type="text/javascript">
function sendStyle() {
try {
window.parent.window.interwikiFrame.bhlDark();
} catch(e) {}
}
sendStyle();
</script>
</body>
</html>
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; }
Czy ze światem jest w ogóle coś nie tak, czy po prostu od zawsze tak było? Czy jesteśmy w stanie wskazać jedno pojedyncze zdarzenie w przeszłości, które spowodowało, że anomalie wymknęły się spod kontroli?
Kto wzniecił pożar?
Nic się nie zmieniło. Nie, sądzę, że od zawsze tak było. Czytałem raporty, teksty "alchemiczne", stare opracowania dotyczące memetyki, przepowiednie, rytuały, przepisy, zapisy spotkań. Sprzeczne efemerydy, z których wszystkie opisywały to samo wydarzenie inaczej. Wielokrotnie czytałem wszelakie relacje i nie mogę w pełni pojąć, co zmieniło się tego dnia i czy w ogóle coś się zmieniło.
Jestem przekonany, że to wszystko to tylko przesądy. Prekursorzy GOC, Inicjatywa, podobnie jak wszelakie tego typu inne okultystyczne stowarzyszenia w tamtych czasach głównie stwarzały jedynie pozory. Mówiło się, że jest się zdolnym wróżbitą, żeby zaimponować innym szlachcicom. Mówiło się, że obcowało się z bogiem, bądź udało ci się udoskonalić leczniczą nalewkę, aby zyskać status. Do tego typu rzeczy należy podchodzić z przymrużeniem oka.
Czy mamy dowody na to, że wcześniej przed tym dniem nie istniały anomalie? Jeśli tak, to może byłaby to jakaś wskazówka.
Dziś niebo nad nami jest upstrzone piórami ptaków wędrującymi donikąd, a w dole nad wodą znajdują się ich głowy.
Horyzont jest zabarwiony zacieniowanym statycznym fioletem, a ja po prostu obserwuję to prawdziwe i pierwotne wszystko. Wszystko, które poszło w diabły, a ta skała wydaje się być moją klatką Faradaya. Nie mogę być już pewien, czym w ogóle jestem.
Czy tylko ja potrafię się jeszcze bać? Mogę być jedynym, który czeka na coś osobliwego. Wszystko inne jest już nieistotne. Szczury mnożą się od wieków, ale to nie powinno potrwać jeszcze długo.
Jest rok 3053, a ja widziałem już wszystko.
Zacznijmy od końca.
- - - - - - - - -
Kanon Szczurze Gniazdo opowiada o skutkach zniszczenia LTE-0913-Ex-Machina, filaru utrzymującego naszą rzeczywistość. Skutkiem tego jest powstanie i coraz częstsze występowanie obiektów SCP oraz bardzo stopniowa kompletna degradacja rzeczywistości, wraz z niekontrolowanym rozmnożeniem się anomalii.
Jest kilka różnych aspektów dotyczących tego uniwersum, które różnią się od typowego kanonu uniwersum Fundacji, czasem żartobliwie nazywanego kanonem "Dreadlords" ze względu na jego mroczną tematykę, a są nimi:
- GOC jest odpowiedzialne za powstanie anomalii w wyniku zabicia przez nich Boga. Są tego świadomi i desperacko chcą naprawić swój błąd;
- Administrator i inne osoby z najwyższego szczebla kierownictwa Fundacji sami są anomaliami i nie stoją po stronie normalności, jaką my znamy. Gromadzą anomalne obiekty, czasem niechętnie je niszczą. Większość pracowników Fundacji nie zdaje sobie z tego jednak sprawy i wierzy, że działają dla jakiegoś większego dobra;
- Rebelia Chaosu odłączyła się w czasie II wojny światowej po tym, jak cześć członków Fundacji dowiedziała się o jej prawdziwej naturze. Ze względu na wpływy Fundacji są oni aktywnie demonizowani i prześladowani oraz muszą czasami robić straszne rzeczy, aby przetrwać w świecie przychylnym Fundacji.
Koniec: Ta część skupia się przede wszystkim na zniszczeniu LTE-0913-Ex-Machina, jego naturze, przyczynach jego zniszczenia oraz dawnych korzeniach GOC w odniesieniu do kanonu Szczurzego Gniazda.
Era Informacji: Ostatni wiek dominacji człowieka.
Ostatnia Era: Wiek pośredni, w którym ludzkość walczy o przetrwanie. Niektóre odizolowane miejsca są jeszcze względnie zdatne do zamieszkiwania, podczas gdy w innych panuje chaos.
Era Zgnilizny: Czasy, w których przyziemni ludzie, flora i fauna są niezwykle rzadcy. Nadnaturalne stworzenia i obiekty stają się normą.
Szczurze Gniazdo: Stan całkowitego chaosu, rozpad wszechświata. Rzeczywistość w tym momencie jest zupełnie inna od tej naszej bądź absolutnie nie do poznania. Niekoniecznie jest to "koniec świata", raczej koniec świata, jaki my znamy.
Dodatkowa uwaga: W Szczurzym Gnieździe nie ma kanonu, to nie jest seria sama w sobie. Nie ma ostatecznego końca ani początku historii, jest to po prostu swego rodzaju platforma do pisania, podobnie jak wiki. Nie ma żadnych specjalnych wymogów ani pozwoleń potrzebnych do dodania artykułów do kanonu.
