Cửa Tiệm Kì Bí Của Oliver

Cửa Tiệm Kì Bí Của Oliver
Byㅤ Suzu-HitsujiSuzu-Hitsuji
Published on 04 Mar 2023 16:26

đánh giá: +2+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; }

đánh giá: +2+x
Tác giả BitOddInnitBitOddInnit
Đăng vào ngày 4 tháng 3 năm 2023

Canon Hub » NIGHTFALL Hub » Cửa Tiệm Kì Bí Của Oliver

Úi, một vị khách kìa. Nào, mời vào, mời vào. Ra đường vào giờ này là nguy hiểm lắm đấy.

Úi chết, quên mất phép tắc rồi? Tôi là Oliver, rất vui được làm quen. Còn bạn?

█████████?

Nghe lạ thật. Bạn không phải dân từ Ilcana à? Không hử? À.

Tôi thấy bạn đây có vẻ hứng thú với các sản phẩm của tôi đấy. Chắc là tôi cũng nên giải thích sơ qua về nơi này trước nhỉ, nhất là khi bạn vừa chạy vào đây để trú mưa nữa. Ở đây tôi có bán những món đồ kì bí, những món đồ trang sức nhỏ với vài đặc điểm chẳng ai giải thích nổi. Mà cũng chẳng có gì quá nghiêm trọng đâu. Tôi cũng chẳng muốn Fundamentum sờ gáy tí nào hết. Chỉ là vài món đồ kì diệu nho nhỏ mà thôi.

Mọi thứ ở đây đều là để bán hết nên cứ thoải mái xem qua, và cũng đừng ngại đặt câu hỏi về các món đồ mà bạn quan tâm nhé, tôi sẵn lòng cho bạn biết tất cả về thứ mà bạn muốn.


Một Chiếc Đồng Hồ Bỏ Túi Được Trang Trí Một Cách Đầy Công Phu
À, cái này trông hoài niệm ghê. Một trong những món đồ nhỏ đầu tiên mà tôi tìm ra. Lần đầu phát hiện trong đống đồ của mẹ tôi khi đang phân chia tài sản theo di chúc của bà ấy. Khi cầm nó, bạn sẽ luôn luôn biết chính xác rằng bây giờ là mấy giờ, ít nhất là trong khoảng thời gian của ngày cũ. Muốn thử không?

Bây giờ là mấy giờ?

Mười hai giờ kém mười?

Chính xác luôn. Thật kì diệu đúng không?

Một Con Dao Găm Bị Hỏng
Ấy, cẩn thận ngón tay, chắc chắn bạn không muốn ngón tay của mình bị cắt đâu đúng không?

Hửm, nó để làm gì á? Thì, lùi lại chút đi… Đây! Như bạn đã thấy đấy, nó đang phát sáng. Một cách tự nhiên! Rất là tiện lợi để có thể di chuyển trong cái màn đêm vĩnh cửu này kiêm một công cụ tự vệ hữu ích đề phòng lũ côn đồ muốn moi tiền hoặc giết chết bạn. Chỉ cần cẩn thận để không bị bắt khi đang tàng trữ cái này là được, không là cớm bắt hết cả lũ đi đấy.

Chân Dung Của Một Người Phụ Nữ Với Con Mèo
Có phải là bạn định khen là tranh trông đẹp lắm đúng không? Đây chính là tranh vẽ Nữ Hoàng Irene Von Xeraphon, cùng với con mèo cưng Berry của bà. Hãy chú ý vào đôi mắt đi. Thấy nó đang nhìn theo bạn không? Giờ thì nhìn vào đuôi con mèo này. Nhìn ra chỗ khác một lúc rồi lại nhìn đuôi con mèo đi.

Nó di chuyển á? Ừ, đúng rồi đấy.

Không dám chắc ư? Vậy thì làm lại đi. Tôi chắc chắn là bán sẽ nhận ra sự khác biệt trong lần này thôi.

Một Tẩu Hút Thuốc Cũ Bẩn
A, cái này là chiếc tẩu cũ của ông tôi này. Ông có sở trường là đi tìm mấy thứ như này lắm, cú như là chúng bị ông thu hút vậy. Khi bạn thổi vào nó, một ít khói có màu sặc sỡ sẽ bay ra đấy, hút gì cũng được kể cả thuốc lá. Mùi cũng khá dễ chịu, không giống như mấy cái xì gà kinh tởm mà mấy lão đô đốc cứ hút phì phèo kia.

Một Cái Kinh Lọc
Tôi thích cái này lắm này. Cứ cầm nó lên và nhìn qua tấm kính đó là bạn sẽ hiểu tại sao.

Thấy màu sắc cứ bay quanh quanh như mấy đám mây nhỏ đó không? Giờ thì thử lấy một cái rồi ném lên trần nhà đi.

À há! Bạn trông có vẻ thích thú với nó rồi đấy. Chơi đùa với cái thứ nhỏ bé này và ném những đám mây sắc màu đó ra xung quanh cũng là một cách trị liệu khá hay. Đôi khi tôi cũng tự hỏi rằng liệu chúng là cái gì…

Một Cái La Bàn Làm Từ Máu Và Xương
A! Cái này đúng là một thứ khá kì lạ nhỉ? Do bình thường có mấy ai thấy được cái la bàn được chạm khắc từ xương thế này đâu.

Thấy cái kim đang trôi nổi trên đống máu không? Trông khá mờ đục, có lẽ bạn cần phải nheo mắt thì mới thấy được rằng cái la bàn đang chỉ về phía máu vừa đổ xuống. Tôi nghĩ là nó cũng chỉ định vị được ở mấy chỗ gần gần thôi nên nếu bạn là người chảy máu thì nó cũng chẳng hữu ích lắm. Nhưng nếu bạn chẳng sao cả ơ? Nó sẽ có công dụng khác.

Nên khi sử dụng cái này thì có lẽ bạn sẽ muốn đi ngược lại nơi mà nó chỉ tới đấy! Ha!

Một Bức Ảnh Chụp Gia Đình Bạn
A, cái này khiến tôi đặc biệt hứng thú này. Tôi vẫn chưa nhận ra rằng loại ma pháp nào đang hoạt động trong bức tranh đó, nhưng đôi khi một chút bí ẩn cũng có cái hay mà, đúng chứ?

Trong cái khung gỗ gụ được trang trí một cách công phu, bạn sẽ có thể nhìn thấy hình ảnh gia đình của chính bản ở một nơi nào đó có lẽ là bạn có nhớ tới? Đừng có lo lắng, bạn của tôi, tôi không phải là cái lũ lừa đảo nào đó đâu, cái này chỉ đơn giản là một trò ma thuật liên quan tới ánh sáng nào đó thôi.

Nó sẽ thay đổi khi bạn nhìn vào nó lần nữa, thấy chưa? Đáng chú ý phết nhỉ? Cá nhân tôi lại cảm thấy có chút quan tâm về những món đồ rẻ tiền này. Như là tại sao nó lại biết mặt gia đình tôi? Cũng như gia đình của bạn? Liệu nó có đang tìm cách đánh lừa chúng ta không?

Hoặc có thể là do bạn lạc quan hơn tôi nhiều. Có lẽ là nó đang chúc chúng ta hạnh phúc với cảm giác hoài niệm kia. Một nguồn dinh dưỡng trong suy nghĩ…

Một Khẩu Blunderbuss Sống
Điểm thú vị của cái này là. Nó hoạt động như một sinh vật sống vậy. Nếu là bạn thì tôi sẽ phải cẩn thận khi nhắm bắn bằng khẩu súng này lắm đấy. Với cả những thứ nó bắn ra hình như là mấy mảnh xương nhọn và răng. Xương nào á? Tôi cũng chịu.

Mà có vẻ nó cũng biết nói đấy, người đã bán cho tôi cái này bảo là khẩu súng này cứ thủ thỉ với anh ta mãi thôi và cứ khi nào định bóp cò là nó cứ la toáng lên.


A, rời đi sớm vậy ư? Tiếc thật đấy, bạn đã khiến tôi thấy rất vui rồi. Nhớ là bạn có thể quay lại đây bất cứ lúc nào nhé, chỗ này lúc nào cũng mở cửa hết.

Tèn ten, giờ thì


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