Chất Xúc Tác Màu Đỏ
Chất Xúc Tác Màu Đỏ
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 21 Sep 2022 16:01
đá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; }
/* 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;
}
 
@media (min-width: 768px) {
 
    #top-bar .mobile-top-bar {
        display: block;
    }
 
    #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: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        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;
    }
    }
}

đánh giá: +1+x


Một người đàn ông và một gã ma cà rồng ngồi với nhau tại nhà thờ, đắm mình trong ánh sáng bao trùm của vầng trăng đỏ máu. Họ đã từng là anh em. Nhưng nhiều thập kỉ khát máu trôi qua cộng với tham vọng chính trị mãi không nguôi. Lâu lắm rồi hai người mới được ở chung một căn phòng như thế này, và cái chết luôn có thể hàn gắn lại những mối liên kết đã tan vỡ một cách đầy lạ kì. Họ ngồi đó, ngồi trên băng ghế đối diện lối đi chính và nhìn chăm chăm vào một cơ thể vô hồn đang nằm ở phía trên với cánh tay được khoanh trước ngực, trên tay còn cầm một bông hoa hồng.

Xác chết đó hiện vẫn đang trong tình trạng nguyên bản nhất, dù nó đã bị nhấn chìm bởi giấc ngủ đầy thiêng liêng tại chu kì cuối của mặt trăng. Đây là cơ thể của một người phụ nữ, độ tuổi không quá ba mươi, mái tóc đen phủ lên hai bên bàn thờ. Mái tóc ấy phản chiếu lại ánh trăng đang rọi xuống từ ngoài cửa sổ, ánh lên một màu đỏ sẫm. Da cô nhợt nhạt, gân nổi lên khắp người, hốc mắt trũng sâu xuống, răng cũng đã bị mài sắc đi. Vết cắn ở cổ hầu như không thể nhìn thấy được nữa.

Gã ma cà rồng rón rén chạm vào răng nanh của mình rồi nói, "Lẽ ra phải làm nhiều hơn nữa mới đúng."

Chính trị gia cợt nhả khoanh tay lại và trả lời, "Tưởng anh đã làm quá nhiều luôn rồi ấy chứ."

Một cơn gió nhẹ thổi qua vết nứt trên cửa. Nó lao qua chỗ chính trị gia và đe dọa sẽ khiến cà vạt hắn rơi ra luôn. Chính trị gia cứ thế hếch mũi lên. Chiếc cà vạt vẫn không hề di chuyển lấy một li.

"Anh hút máu cổ hở?" Chính trị gia hỏi, chỉ vào vết thương đang mờ dần ở cổ thi thể kia.

Gã ma cà rồng nhảy vào chỗ ngồi, tay đút túi áo. Gã dịch sang phải, tựa đầu vào thành ghế, rồi nhún vai.

"Cô ta không còn khả năng điều trị được nữa đâu." Gã nói rồi nhổ nước bọt xuống đất. "Cả em lẫn bạn em đều thấy hết rồi mà."

Chính trị gia thở dài, "Mấy người từ tầng lớp quý tộc mới là đám kiểm soát nền kinh tế. Em và các đồng nghiệp chỉ có nhiệm vụ quản lý nó thôi. Nên đừng có quy hết vào em như thế chứ."

"Phì," Bàn tay trong túi áo của gã ma cà rồng nắm chặt lại. Ngón tay cũng bắt đầu dính máu, "Lại trốn tránh trách nhiệm như mọi khi rồi. Bao giờ em mới chịu trưởng thành lên đây hả?"

Chính trị gia dựng thẳng cổ áo lên. Từ lúc vào thánh đường này, đây là lần đầu tiên hắn rời mắt khỏi cái xác trên bệ thờ và nhìn xuống đất. Vẻ mặt cau có, nghiến răng nghiến lợi.

"Em là thành viên vĩ đại nhất sau vài thế kỉ của cơ quan quản lý Xerophylla. Thậm chí còn mang lại một sự thịnh vượng chưa từng thấy cho nơi đây chỉ trong vài thập kỉ. Em còn cứu được cả nhân loại khỏi cái chết đỏ rực đấy. Còn anh thì sao? Anh đã làm được gì rồi, hả?"

Ma cà rồng đổi chỗ ngồi, quay lưng về phía chính trị gia. Chính trị gia nhắm thẳng ánh mắt đầy buộc tội vào gã như muốn xuyên thủng người gã ma cà rồng vậy.

"Anh-"

Chính trị gia nhướn mày, "Để em đoán xem nhá. Anh đã trở thành sinh vật của bóng đêm? Khủng bố những cư dân vô tội? Ôi không, em hiểu rồi: Anh quyết định găm hàm răng hèn hạ nhuốm máu đấy vào cổ mẹ thay vì bỏ đi và giúp bà ấy!"

Giọng nói của chính trị gia biến thành tiếng hét, mang lại sự im lặng tràn ngập nơi đây. "Anh đã biến mẹ thành bầy tôi của lũ xấu xa đấy và còn chẳng thèm bảo vệ bà. Và trả ơn bà là một thằng con trai phế vật này đây–"

Giọng của chính trị gia nhỏ dần khi mắt hắn lại nhìn về phía thi thể phụ nữ kia. Cổ họng hắn nghẹn lại. Tuy đã chết rồi, nhưng mẹ của họ trông vẫn hạnh phúc biết bao. Giờ đầu hắn nhớ lại lúc chu kì mặt trăng cuối cùng, khi anh trai hắn đã đến gặp hắn từ trong bóng tối và nhờ một việc "quan trọng". Chính trị gia vẫn nhớ rõ rằng mình đã dẫn bà tới con hẻm nhỏ bên sông và nhớ như in mùi máu tanh xộc thẳng vào lỗ mũi.

Hắn nhớ lại hình ảnh những thứ đã từng bên trong người dân thành phố nẳm ngổn ngang dưới đất, bắn tung tóe lên tường, nội tạng của họ, vốn cũng chẳng còn nguyên vẹn nữa. Hình ảnh cái chĩa vỡ tan tành, ngọn đuốc văng khắp nơi và lọ nước thánh vỡ vụn đập vào mắt hắn. Hắn rùng mình, rùng mình khi nghĩ về đám ma cà rồng đã thoát khỏi đám cháy khi hắn lẫn anh trai lại gần người mẹ đang hấp hối.

Chính trị gia đã nghĩ rằng mình đã bị dụ vào bẫy. Hắn thề rằng, sẽ tận diệt dòng dõi của thứ quái vật đã lấy mạng mẹ hắn, sẽ tận diệt đám ma cà rồng kia. Nhưng đám quái này lại khác lũ còn lại. Chúng tàn tật, bị cụt hết tứ chi, da thịt khô héo cả với khuôn mặt biến dạng. Chúng mất khả năng tự vệ rồi ư?

Rồi hắn nhớ lại cảnh bọn ma cà rồng vơ vét nội tạng người như lũ gấu mèo và quá mải mê ăn uống và chăm sóc vết thương cho anh em. Đám đó đã lấp đầy thêm nỗi đau bằng cách để người dân phải hứng chịu cái chết đỏ tươi đấy, hoặc ít nhất thì đó là những gì hắn nghe được.

Máu từ ngực của mẹ hai người chảy ra, từ nơi cọc gỗ đâm xuyên qua người bà. Bà đã nói được những lời cuối với con trai mình, và cả hai người đã đưa bà từ con hẻm tới nhà thờ này, nơi bà đã nằm yên đó từ nãy đến giờ.

Chính trị gia bắt đầu bật khóc.

Gã ma cà rồng nói rằng: "Tầng lớp quý tộc biết cách chữa đấy – chắn chắn là em đã biết rồi – nhưng đời nào họ thèm truyền bá nó cho thường dân. Anh cứ tưởng là sẽ cứu được bà. Vì cái chết đỏ tươi không có ảnh hưởng tới bọn anh như các em, mỗi tội…"

Một tiếng sụt sịt. Một việc sửa sai. Một tiếng thở dài.

"Lòng thù hận của em đã ghim sâu tới nỗi quay lưng cả với người nhà luôn rồi ư?"

Chính trị gia lắc đầu, "Anh không phải người nhà của em."

Gã ma cà rồng hất đầu về phía thi thể, "Còn bà ấy thì sao?"

"Đừng có lôi Mẹ vào."

Mà cà rồng nhún vai. Gã đứng yên và xoay người lại cho tới khi mặt chạm mặt với chính trị gia. Một tia giận dữ vụt qua đôi mắt màu hổ phách của ma cà rồng nhưng sau đó đã thành một thứ khác. Sự đau buồn? Tiếc thương?

Mà cà rồng khẽ nói, "Bà ấy đã chết vì cái chết đỏ rực. Nên vụ này là do em ấy, em trai ạ. Cứ sỉ vả anh thế nào cũng được, cứ việc tuyệt giao vì những quyết định anh đã đưa ra đi, miễn sao đừng có đối xử với bà ấy như cách em đối xử với anh là được. Mẹ không có đòi bị nhiễm căn bệnh đấy–"

"Và bà ấy cũng không bảo là muốn thành ma cà rồng."

Gã ma cà rồng nhăn mặt lại. "Ít nhất thì anh đã cố làm mọi thứ có thể."

Hai anh em cứ nhìn nhau mãi. Bàn tay chính trị gia chậm rãi đưa về phía thắt lưng, nơi hiện đang giấu một khẩu súng lục với viên đạn bạc đã được linh mục ban phước. Ma cà rồng nhìn xuống hông em trai mình, mặt gã lộ rõ vẻ đau khổ. Vai gã chùng xuống.

Gã ma cà rồng nhìn mẹ, rồi lại quay sang nhìn em trai, xong lại nhìn về phía mẹ. Gã thở dài rồi chìa tay ra.

"Lại đây," Gã nói, rồi rời khỏi chỗ ngồi và tiến đến lối đi.

Chính trị gia nhăn mặt, "Em không nắm tay anh đâu."

Ma cà rồng nhíu mày, "Vậy thì đi cạnh anh, như một người anh em. Vì mẹ."

Chính trị gia cân nhắc về lời đề nghị này. Hắn đã bắn một phát về phía ma cà rồng rồi và chắn chắn còn đủ đạn dược để hạ gục bất kì kẻ địch nào đang rình rập ngoài cửa. Hắn nhìn chằm chằm vào đôi mắt màu hổ phách của ma cà rồng rồi ngẫm nghĩ. Một kí ức cũ đột nhiên ùa về.

Hắn nhớ lại khoảng thời gian vài năm trước khi cả hai người họ còn rất nhỏ, từ thuở rất lâu trước khi cái chết đỏ trỗi dậy nhấn chìm toàn bộ cõi Xerophylla. Khi đó, họ còn là những đứa trẻ thơ dại, chơi đùa tại bờ sông gần nhà thờ này ngay sau khi bài giảng đạo vào Chủ Nhật kết thúc. Hai người ném đá lên mặt hồ rồi cười cợt với nhau.

Một sự ấm áp mờ nhạt len lỏi vào con tim của vị chính trị gia. Hắn đưa tay về phía gã ma cà rồng và nắm lấy tay gã. Họ cùng nhau đến chỗ cầu thang và đi lên.

Lần đầu tiên sau nhiều năm hai người họ cùng nhau đứng đó trong im lặng với tư cách không phải là kẻ thù.

"Anh có nhớ hồi chúng ta còn nhỏ không," chính trị gia nói tiếp, "hồi đó mẹ đi chợ về với rất nhiều đồ từ tiệm tạp hóa với bộ đồ chơi cũ bằng gỗ để chúng ta chơi chung ấy?"

Gã ma cà rồng gật đầu. "Anh vẫn nhớ bộ xe lửa đấy."

"Em vẫn nhớ như in vẻ mặt của anh khi mẹ bảo đó là của cả hai chúng ta. Rồi anh sụp đổ luôn. Hồi đó anh còn không có đồ chơi của riêng mình, không có gì mới cả. Vậy em nên làm gì ngoài việc cho anh toàn bộ giờ? Và một người anh trai như nào đã tạo nên em của ngay hôm nay đây?"

"Em để dành đồ cũ cho anh?"

Chính trị gia nhìn vào ánh gã ma cà rồng và gặp đầu. "Đúng đấy. Lúc đó nó có vẻ rất quan trọng với anh và anh nghĩ em là loại người như nào chứ, làm sao mà em dám đoạt lấy nó từ tay anh được. Em đã có quá nhiều đồ chơi luôn rồi."

"Anh không nhớ luôn đấy." Gã ma cà rồng nhíu mày nói.

"Em cũng chẳng ngờ là anh lại trẻ con như thế luôn ấy." Chính trị gia nhún vai. Nước mắt bắt đầu chảy ra và hắn bắt đầu khóc thầm.

Gã ma cà rồng chọc ghẹo hắn rồi nói, "Giờ nhìn xem ai mới là người trẻ con ở đây nè."

Hai người đàn ông cười khúc khích với nhau, xen lẫn giữa tiếng cười và khóc thút thít. Chính trị gia mỉm cười.

Khi ánh trăng dần dần tan biến khỏi nhà thờ, cánh cửa mở ra. Hai anh em dồn hết sự chú ý sang một gã già xấu tính, giang hồ đang bước vào.

"Chào buổi tối, thưa các quý ông." Ông Filia nói với chất giọng ngọt ngào, nghe vẫn lẻo mép như mọi khi.

Chính trị gia và ma cà rồng nhìn nhau. Ông Filia đã dõi theo mọi nơi cái chết đó đi qua. Giờ thì cũng đến lúc họ phải để mẹ đi rồi. Ông Filia rút thước dây từ trong túi áo trong ra và bắt đầu đo đạc. Hai người bước xuống bệ thờ và đi ra chỗ lối vào, nơi đó con ngựa của Ông Filia đang sốt ruột khịt mũi.

Gã ma cà rồng quay mặt về phía em trai nhưng chính trị gia vẫn không chớp mắt nhìn về phía trước.

"Cảm ơn." Gã ma cà rồng mở lời, nở một nụ cười ấm áp với em trai, "Vì đã đến."

Chính trị gia nhíu mày như mọi lúc rồi chế giễu. Hắn gạt đi nước mắt và nói, "Em không có đến đây vì anh đâu."

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