Croqstyle CSS

您現在最好給我停下來

本頁面內包含基金會維基內部使用的模板

嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面


評分: 0+x

這是什麼

這是些被我,CroquemboucheCroquembouche,使用在許多頁面上的各種「改進用」CSS代碼,因為我認為它能讓我更輕易地去處理問題。

這個組件做出了一些小小的調整,使得人們能得到更為舒適的書寫體驗,並且在編篡組件/外觀主題時也能更加輕鬆一點(我很常這麼覺得)。對於讀者來說,這沒有對任何可看的部分做出任何的變化 —— 真正有感的是寫的人。

我並不期望有使用該組件的文章在被翻譯過後也跟著使用這個組件,除非譯者喜歡這個組件並無論如何都想要使用它。

這個組件基本上不會與其它的組件或外觀主題相互衝突,而若即便發生了,那可能也不會造成顯著的影響。

使用方法

在任何頁面上加入以下的代碼:

[[include :scp-zh-tr:component:croqstyle]]

這個組件是設計給其它的組件所使用的。如果你在其它組件裡使用到的話,請確保將其添加在那個組件的[[iftags]]區塊裡面,這樣你組件的使用者就不會被迫跟著使用Croqstyle了。

相關組件

其它的個人設計組件(也是做出了一些改動):

個人設計主題(對整體外觀做了大幅調整):

CSS修改

合理化大小的腳註

讓有比較多內容的腳註不再會有十萬八千里那麼長,讓你可以真正意義上地去讀它們了。

.hovertip { max-width: 400px; }

等寬字體式編輯/編碼

讓你的編輯文字視窗套用等寬字體,並同時將Fira Code作為所有等寬字體使用的字型,那顯然比原本的還要更加優越。

@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; }

打字機體的背景顏色

為<tt>元素({{text}})添加了淡灰色的背景,讓代碼片段能在文中較為突顯出來。

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;
}

大臉照退散

停用了當你把游標懸浮於某人的頭像上時會顯示放大版圖片的功能,因為那很蠢而且相當煩人,如果真的想要看較大的圖片只需要點一下就好了。

.avatar-hover { display: none !important; }

斷斷續續

所有被包覆在nobreak這個class的div裡面的文字,將會以每個英文字母為標準來做換行。1

.nobreak { word-break: break-all; }

代碼著色

我把我終端上的代碼顏色作為變數加了上來。也許在未來的某一天,我會把它換成其他更為廣泛使用的終端主題配色,像是Monokai或者其他的,但現在就是我所使用的個人主題配色,沿襲自Tomorrow Night Eighties。

與此同時,我也添加了.terminal這個class來呈現出一個假的代碼區塊,當你使用[[div class="code terminal"]]並搭背著深色背景時,它看起來就會有點偽終端的樣子。這不會在[[code]]上起作用,因為Wikidot插入了一大堆凸顯用的語法,所以如果你想修改的話也得用上大量的CSS。僅供非[[code]]的代碼片段使用。

一個能能用上述變數對『標準』的Wikidot組件用例作顏色變換的快速工具:連結

: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裡面的所有東西都會被框線所包圍。線條的顏色是紅色,但實際上將取決於--debug-colour這個CSS變數。

你也可以在一個元素之中加入div.debug-info.overdiv.debug-info.under來標註出除錯區塊 —— 不過你要確保有偽這些標註預留足夠的垂直空間,以避免與上方或下方的東西相互重疊到。

……就像這個!

.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; }
除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License