Greystyle

您正在查詢的標題為：關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

作品著作資訊

作者： Greyve
原文：Greystyle
譯者：Kikunai

資訊

▼ 訪談抄錄

▲ 關上

訪談抄錄

開始記錄

███

這是甚麼東西？

Greyve

Greystyle。下一個問題？

███

不，我是說這份抄錄。你不覺得很，呃，做作嗎？

Greyve

嗯，標題寫着的是Greystyle嘛。

███聳肩。

███

好吧。

Greyve

所以嗯，下一個問題？

███

好。這個外觀主題以甚麼作為基礎？

Greyve

主要是由 Woedenaz的半影BHL port過來，而半影BHL是 EstrellaYoshte的半影主題外觀port。

███

那這個外觀主題跟半影由甚麼分別？

Greyve

功能上相差不大，但你應該可以留意到兩者的外觀不同。我對網頁的整體界面做了一堆小調整，也添加了一些類似這個抄錄的客製格式。

███

酷。那為甚麼你弄了這個主題外觀？

Greyve

說實話，我想跟上潮流。我說啊，每個人都有自己的私人主題——看看Placestyle，或者Blankstyle，或者Flopstyle……

███

但你已經好像兩年沒寫過東西誒。

Greyve

就是重點。這是一份沉沒成本——我是說，你知道光研究BHL的源代碼就耗了多少時間嗎？我覺得花了這麼多時間製作一個主題會給我一個使用它的好動機。

███

好。那我猜你會定期更新主題？

Greyve

對。我的目的是整合一個供我文章使用的CSS格式，製作出滿足我的呃，特殊美學偏好。如果你也想使用這個主題也可以喔！還請記得這是個BHL主題外觀，所以跟其他基礎主題外觀不相容。

███

你的「特殊美學偏好」是甚麼？

Greyve

主要是極簡風格。這個主題基本上只有四種顏色，而且我移除了本身不屬於Wikidot跟沒有功能性用途的每一條線。

███

聽起來就像比較複雜的Basalt嘛。

Greyve

差不多啦。我還在等 Liryn將Foxtrot port 到 Basalt，那樣我就能保留半影的版頭格式。

███

嗯。那我現在要怎樣使用這個主題？

結束記錄

給沒耐性滿足我的meta文傾向的人看的總結：Greystyle是 Greyve製作的視覺性主題外觀，供其文章使用。本主題基本上是一個 Woedenaz的半影BHL輕便版，還有一些個人化的風格調整。

注意Greystyle與Sigma-9和Basalt不相容。

使用說明

如果想使用本主題外觀，請將以下代碼插入到頁面頂部：

[[include :scp-zh-tr:theme:black-highlighter-theme]]
[[include :scp-zh-tr:theme:greystyle]]

例子

Bone--white-monochrome(252, 252, 252)

Blood--accent-color(140, 0, 0)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Smoke--light-gray-monochrome(238, 238, 238)

Ash--gray-monochrome(56, 49, 49)

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

Iron--pale-gray-monochrome(196, 196, 196)

Rust--accent-color(140, 0, 0)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Charcoal--dark-gray-monochrome(38, 28, 28)

Ink--black-monochrome(14, 14, 14)

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

Header和標題字體是Josefin Sans。
Body字體是Oxygen。
Monospace字體是Fira Code。

使用-----創建水平線。

這是一個image block。

在一行的開端使用一至六個+號創建標題。

一級標題

二級標題

三級標題

四級標題

五級標題

六級標題

開啟

這是一個tab¹。

這是
一個
項目
符號
清單。

這是一個blockquote。

在一行的開端使用> ，或使用[[div class="blockquote"]]以創建blockquote。

這	是
一個	表格

客製

使用[[div class="floatbox"]]以建立。

使用[[span class="label"]]以建立標籤文字。

使用[[span class="redaction"]]以建立刪除文字。

使用[[span class="memetic"]]以建立模因文字。

使用[[div class="notation"]]以建立。

使用[[div class="jotting"]]以建立。

使用[[div class="document"]]以建立。不建議在其他div內使用。

這是一個灰色表格
使用[[div class="table0"]]以建立。

這是一個綠色表格
使用[[div class="table1"]]以建立。

這是一個藍色表格
使用[[div class="table2"]]以建立。

這是一個黃色表格
使用[[div class="table3"]]以建立。

這是一個橙色表格
使用[[div class="table4"]]以建立。

這是一個紅色表格
使用[[div class="table5"]]以建立。

這是一個紫色表格
使用[[div class="table6"]]以建立。

使用[[div class="overwatch-memo"]]以建立。

使用[[div class="ethics-memo"]]以建立。

使用[[div class="raisa-memo"]]以建立。

使用以下代碼建立div陰影：

[[div class="DIV CLASS shadow"]]
內容
[[/div]]

標題文字

使用以下代碼建立：

[[div class="headline"]]
標題文字
[[div class="DIV CLASS"]]
DIV內容
[[/div]]
[[/div]]

提案標題

副標題

日期
作者
部門
總部門

使用以下代碼建立：

[[div class="DIV CLASS"]]
[[div class="proposal-logo#"]]
[[/div]]
[[div class="proposal-title"]]
標題內容
[[/div]]
[[div class="proposal-subtitle"]]
副標題內容
[[/div]]
[[div class="proposal-author"]]
作者內容
[[/div]]
-----
提案內容
[[/div]]

proposal-logo1，proposal-logo2和proposal-logo3預設可用。使用以下代碼更改標誌，加上濾鏡，或是調整大小：

:root {
--proposal-logo-1: url("URL 1");
--proposal-logo2: url("URL 2");
--proposal1-logo3: url("URL 3");
--proposal-logo-filter: 濾鏡;
--proposal-logo-size: 大小;
}

抄錄

使用以下代碼建立：

[[div class="headline"]]
標題內容
[[div class="DIV CLASS"]]
[[div class="flank"]]
置中描述內容
[[/div]]
[[div class="transcript"]]
抄錄內容
[[/div]]
[[div class="flank"]]
置中描述內容
[[/div]]
[[/div]]
[[/div]]

開始記錄

講者

使用[[div class="di"]]建立對話。

講者

使用[[div class="sp"]]建立講者。
（譯註：將[[span style="white-space: nowrap"]]包着不想自動換行的文字。）

講者

使用[[div class="ac"]]建立動作。推薦在此之前插入一個空的[[div class="sp"]]。

結束記錄

也是一個無恥的自我推銷。

使用[[div class="linkbox"]]以建立。

這是亮色模式切換器，包括了只在亮色模式可見的內容。

這是暗色模式切換器，包括了只在暗色模式可見的內容。

使用以下代碼建立：

[[div class="mode1-changer"]]
亮色模式內容
[[/div]]
[[div class="mode2-changer"]]
暗色模式內容
[[/div]]

代碼

▼ 顯示代碼

▲ 隱藏代碼

/*
Greystyle
[2023 Wikidot Theme]
Created by Greyve
 
Forked from:
* Penumbra BHL by Woedenaz
 
Inspiration from:
* ADMONITION Theme by Liryn and Placeholder McD
* Basalt Theme by Liryn and Placeholder McD
* Black Highlighter Theme by Croquembouche and Woedenaz
* BLANKSTYLE CSS by HarryBlank and Placeholder McD
* Flopstyle: DARK by Lt Flops
* Paperstack Theme by EstrellaYoshte
* Penumbra by EstrellaYosthe
* Penumbra BHL by Woedenaz
* PLACESTYLE CSS by Placeholder McD
* Redtape Theme by Rounderhouse
* SYNTECH Theme by Greyve
* Twin Files Theme by JackalRelated
 
Components from:
* Centered BHL Header  by Woedenaz
* Toggle BHL Sidebar by Woedenaz
* BetterFootnotes by EstrellaYoshte
* ACS Animation by EstrellaYoshte
*/
 
/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
 
:root:lang(zh) {
  --text-tableofcontents: "目錄";
 
/* INTEGRATION */
    --theme-base: "black-highlighter";
    --theme-id: "greystyle";
    --theme-name: "Greystyle";
 
/* FONTS */
    --body-font: 'Oxygen', sans-serif;
    --header-font: 'Josefin Sans', sans-serif;
    --title-font: 'Josefin Sans', sans-serif;
    --mono-font: 'Fira Code', monospace;
    --ui-font: var(--body-font);
 
/* COLORS */
    /* Primary Colors */
    --white-monochrome: 252, 252, 252;
    --light-gray-monochrome: 238, 238, 238;
    --gray-monochrome: 56, 49, 49;
 
    --pale-gray-monochrome: 196, 196, 196;
    --dark-gray-monochrome: 28, 28, 28;
    --black-monochrome: 14, 14, 14;
 
    --accent-color: 140, 0, 0;
 
    --pale-accent: var(--accent-color);
    --bright-accent: var(--accent-color);
    --medium-accent: var(--accent-color);
    --dark-accent: var(--accent-color);
    --alt-accent: var(--accent-color);
 
    /* Custom Variable Colors */
    --bg-color1: var(--white-monochrome);
    --bg-color2: var(--light-gray-monochrome);
    --bg-color3: var(--accent-color);
    --bg-color4: var(--gray-monochrome);
 
    --txt-color1: var(--gray-monochrome);
    --txt-color2: var(--white-monochrome);
    --txt-color3: var(--accent-color);
    --txt-color4: var(--light-gray-monochrome);
 
    /* Secondary and Tertiary Colors */
    --swatch-primary: var(--accent-color);
    --swatch-primary-darker: var(--accent-color);
    --swatch-primary-darkest: var(--accent-color);
    --swatch-border-color: var(--dark-gray-monochrome);
    --swatch-secondary-color: var(--accent-color);
    --swatch-tertiary-color: var(--accent-color);
    --swatch-alternate-color: var(--alt-accent);
 
    /* Background Color */
    --background-color: var(--bg-color1);
    --background-gradient-color: var(--bg-color1);
 
    /* Text Colors */
    --swatch-text-general: var(--txt-color1);
    --swatch-text-light: var(--txt-color2);
    --swatch-text-dark: var(--txt-color1);
    --swatch-important-text: var(--txt-color3);
 
    --link-color: var(--txt-color3);
    --hover-link-color: var(--txt-color3);
 
    /* Menu Colors */
    --swatch-menutxt-general-color: var(--txt-color1);
    --swatch-menutxt-dark-color: var(--txt-color1);
    --swatch-menutxt-light-color: var(--txt-color2);
 
    --swatch-menubg-color: var(--bg-color1);
    --swatch-menubg-light-color: var(--bg-color3);
    --swatch-menubg-medium-color: var(--bg-color3);
    --swatch-menubg-medium-dark-color: var(--bg-color3);
    --swatch-menubg-dark-color: var(--bg-color3);
    --swatch-menubg-black-color:var(--bg-color4);
    --swatch-menubg-hover-color:var(--bg-color2);
 
    --swatch-background: var(--bg-color1);
    --swatch-headerh1-color: var(--bg-color3);
    --swatch-headerh2-color: var(--bg-color3);
 
    /* ACS Colors */
    --one-color: 76, 160, 108;
    --two-color: 67, 135, 190;
    --three-color: 245, 211, 1;
    --four-color: 233, 107, 40;
    --five-color: 197, 38, 50;
    --six-color: 98, 60, 122;
 
/* COMPONENTS */
    /* UI */
    --ui-button-txt: var(--txt-color1);
    --ui-button-bg: var(--bg-color2);
    --ui-button-hover-txt: var(--txt-color2);
    --ui-button-hover-bg: var(--bg-color3);
    --ui-button-hover-outline: transparent;
 
    /* Header */
    --logo-image: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --header-title: "SCP基金會";
    --header-subtitle: "控制，收容，保護";
    --header-h1-font-size: calc(1.4rem + (.025 * (100vw - 20rem)));
    --header-h2-font-size: calc(var(--base-font-size) * 1.25);
 
    --down-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26' overflow='visible' xml:space='preserve'%3E%3Cpath d='m15,26 15-26H0'/%3E%3C/svg%3E");
    --right-arrow-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30' overflow='visible' xml:space='preserve'%3E%3Cpath d='m26,15 -26,15 V0'/%3E%3C/svg%3E");
 
    --header-gradient-color-bottom: var(--bg-color1);
    --header-gradient-color-middle: var(--bg-color1);
    --header-gradient-color-top: var(--bg-color1);
    --diagonal-stripes: unset;
 
    --swatch-topmenu-border-color: var(--bg-color1);
    --swatch-topmenu-bg-color: var(--bg-color1);
 
    /* Toggle Sidebar */
    --sidebar-transition-timing: .7s ease-in-out .1s;
    --toggle-button-bg: rgb(var(--bg-color3));
    --toggle-border-color: transparent;
    --toggle-icon-color: rgb(var(--txt-color2));
    --toggle-roundness: 0;
 
    /* Rating Module */
    --rating-module-button-color: var(--bg-color2);
    --rating-module-button-cancel-color: var(--bg-color4);
    --rating-module-button-credit-color: var(--bg-color4);
    --rating-module-text-color: var(--txt-color1);
    --rating-module-text-hover-color: var(--txt-color2);
 
    /* Footnote Hoverbox */
    --hoverblock-bg: var(--bg-color2);
    --hoverblock-txt: var(--txt-color1);
    --hoverblock-header-bg: var(--bg-color3));
    --hoverblock-header-txt: var(--txt-color2);
    --hoverblock-footer-bg: var(--bg-color2);
    --hoverblock-footer-txt: var(--txt-color1);
 
    /* Modal */
    --modal-bg: var(--bg-color1);
    --modal-body-text: var(--txt-color1);
    --modal-body-header-txt: var(--txt-color1);
    --modal-header-txt: var(--txt-color2);
    --modal-header-bg: var(--bg-color3);
    --modal-header-stripe: var(--bg-color3);
 
    /* BetterFootnotes */
    --fnColor: rgb(var(--txt-color3));
    --posX: calc(50% + var(--body-width-on-desktop) / 2 + 2.5rem);
}
 
/* HEADER*/
#header {
    --swatch-headerh1-color: var(--txt-color1);
    --swatch-headerh2-color: var(--txt-color1);
 
    --search-icon-color: var(--txt-color1);
    --search-icon-hover-color: var(--txt-color2);
    --search-icon-hover-bg-color: var(--bg-color3);
 
    --search-icon-focus-color: var(--txt-color2);
    --search-icon-focus-bg-color: var(--bg-color3);
    --search-focus-outline-color: transparent;
    --search-focus-textbox-bg-color: var(--bg-color2);
    --search-focus-textbox-text-color: var(--txt-color1);
 
    --login-username-color: var(--txt-color1);
    --login-line-divider-color: var(--txt-color1);
    --login-myaccount-color: var(--txt-color1);
    --login-myaccount-hover-color: var(--txt-color2);
    --login-myaccount-underline-color: var(--bg-color3);
    --login-myaccount-hover-bg-color: var(--bg-color3);
 
    --login-dropdown-text-color: var(--txt-color1);
    --login-dropdown-bg-color: var(--bg-color2);
    --login-dropdown-bg-image: var(--bg-color2);
    --login-dropdown-border-color: transparent;
    --login-dropdown-text-hover-color: var(--txt-color2);
    --login-dropdown-bg-hover-color: var(--bg-color3);
}
 
/* Logo Changes */
/* Use https://codepen.io/sosuke/pen/Pjoqqp to filter the image color from black. */
:root:lang(zh) {
    --logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(25%);
}
 
#header::before {
    filter: var(--logo-filter);
}
 
/* Outline Correction */
#header h1 a::before {
    content: "";
}
 
#header h2 span::before {
    content: "";
}
 
/* Position Correction */
#header h1,
#header h1 a,
#header h1 a::before {
    top: -.25rem;
}
 
/* Login Arrow */
#login-status #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton::before,
#login-status:not(:focus-within) #account-topbutton:hover::before {
    --clip-path: polygon(30% 30%, 70% 30%, 50% 65%);
}
 
#login-status #account-options li>a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#login-status #account-options li>a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* Mobile Corrections */
@media only screen and (max-width:56.25rem) {
    :root:lang(zh) {
        --body-width-on-desktop: 100vw;
        --header-h1-font-size: calc(2rem + (.02 * (100vw - 20rem)));
        --header-h2-font-size: calc(var(--base-font-size) * 1.25);
    }
}
 
/* SELECTION */
::-moz-selection {
    background: rgba(var(--bg-color3), 1);
    color: rgb(var(--txt-color2));
    text-shadow: none;
    }
 
::selection {
    background: rgba(var(--bg-color3), 1);
    color: rgb(var(--txt-color2));
    text-shadow: none;
    }
 
/* TOPBAR */
#top-bar {
    --topmenu-category-color: var(--txt-color1);
    --topmenu-category-hover-color: var(--txt-color2);
    --topmenu-category-hover-bg: var(--bg-color3);
    --topmenu-hover-border-color: transparent;
 
    --mobile-topmenu-sidebar-button-color: var(--bg-color3);
 
    --dropdown-bg-color: var(--bg-color2);
    --dropdown-border-color: transparent;
    --dropdown-links-color: var(--txt-color1);
    --dropdown-links-hover-color: var(--txt-color2);
    --dropdown-links-hover-bg-color: var(--bg-color3);
 
    --topbar-height-on-desktop: 2rem;
    --topbar-height-on-mobile: 2rem;
}
 
#header div[class*=top-bar]>ul>li>ul li>a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#header div[class*=top-bar]>ul>li>ul li>a:active:before,
#header div[class*=top-bar]>ul>li>ul li>a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* SIDEBAR */
#side-bar {
    --sidebar-bg-color: var(--bg-color1);
    --sidebar-resources-bg-color: var(--bg-color2);
    --sidebar-media-bg-color: var(--bg-color2);
 
    --sideblock-heading-border-color: transparent;
 
    --sidebar-border-color: var(--bg-color1);
 
    --sidebar-links-text: var(--txt-color1);
    --sidebar-links-hover-bg-color: var(--bg-color3);
    --sidebar-links-hover-text-color: var(--txt-color2);
}
 
#side-bar .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
    text-transform: none;
    text-align: left;
    font-size: .95rem;
    text-indent: 0;
}
 
/* Background Changes */
@supports((display: -ms-grid) or (display: grid)) {
    @media only screen and (min-width: 769px) {
        #main-content::before {
            background: rgba(var(--bg-color2), .5) 1px 1px repeat;
            backdrop-filter: blur(.1rem);
            }
        }
    }
 
/* BREADCRUMBS */
#breadcrumbs a:before,
#breadcrumbs a:visited:before,
.pseudocrumbs a:before,
.pseudocrumbs a:visited:before {
    padding: 0;
    transform: skew(0deg);
    color: rgb(var(--txt-color3));
    box-shadow: inset 0 -.125rem 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1), color 300ms cubic-bezier(.4, 0, .2, 1), padding 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
}
 
#breadcrumbs a:active:before,
#breadcrumbs a:hover:before,
.pseudocrumbs a:active:before,
.pseudocrumbs a:hover:before {
    padding: 0;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}
 
/* SCROLLBAR*/
html,
body {
    scrollbar-color: rgb(var(--bg-color3)) rgb(var(--bg-color2));
}
 
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 16px;
    background: transparent;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgb(var(--bg-color2));
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--bg-color3));
}
 
/* TITLE */
#page-title::before,
.meta-title::before {
        content: none;
    }
 
#page-title::after,
.meta-title::after{
height: .125rem;
}
 
/* CONTENT*/
#main-content {
    /* UI */
    --ui-icon-color: var(--txt-color1);
    --ui-icon-bg: var(--bg-color2);
    --ui-icon-hover-color: var(--txt-color2);
    --ui-icon-hover-bg: var(--bg-color3);
 
    /* Table of Contents */
    --toc-header-bg-color: var(--bg-color3);
    --toc-header-text-color: var(--txt-color2);
    --toc-header-text-hover-color: var(--txt-color2);
    --toc-body-bg-color: var(--bg-color2);
    --toc-directory-lines-color: var(--bg-color2);
    --toc-body-link-color: var(--txt-color1);
    --toc-body-link-hover-color: var(--txt-color3);
    --toc-body-hover-arrow-color: var(--txt-color3);
 
    /* Tabs */
    --tabs-bg: var(--bg-color2);
    --tabs-txt: var(--txt-color1);
    --tabs-hover-bg: var(--bg-color3);
    --tabs-hover-txt: var(--txt-color2);
    --tabs-selected-bg: var(--bg-color3);
    --tabs-selected-txt: var(--txt-color2);
    --tabs-selected-outline: var(--bg-color3);
    --tabs-bottom-border-color: var(--bg-color3);
    --tabs-content-bg-color: var(--bg-color2);
    --tabs-content-border-color: var(--bg-color2);
 
    /* Footnote Block */
    --footnotes-footer-bg-color: var(--bg-color2);
    --footnotes-footer-colorbar-color: var(--bg-color3);
    --footnotes-footer-title-bg-color: var(--bg-color3);
    --footnotes-footer-title-text-color: var(--txt-color2);
    --footnotes-footer-num-color: var(--txt-color3);
    --footnotes-footer-num-hover-color: var(--txt-color3);
 
    /* Editor*/
    --editor-icon-color: var(--txt-color1);
    --editor-icon-bg: var(--bg-color1);
    --editor-icon-hover-color: var(--txt-color2);
    --editor-icon-hover-bg: var(--bg-color3);
    --editor-icon-submenu-bg: var(--bg-color3);
 
    /* Tags */
    --pagetags-title-bg: var(--bg-color3);
    --pagetags-title-text: var(--txt-color2);
    --pagetags-text-color: var(--txt-color1);
    --pagetags-text-hover-color: var(--txt-color2);
    --pagetags-text-hover-bg-color: var(--bg-color3);
}
 
/* RATING MODULE */
#page-content .rate-box-with-credit-button, .page-rate-widget-box {
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
/* Credit */
#page-content .rate-box-with-credit-button>.creditButton>p>a:after {
    background-color: rgb(var(--bg-color3));
}
 
/* POPUP */
div.odialog-shader{
    background-color: rgba(var(--bg-color3), .5) 1px 1px repeat;
    backdrop-filter: blur(.1rem);
}
 
#odialog-container div.owindow {
    box-shadow: none;
}
 
/* Header */
.owindow .modal-header {
    background-color: rgb(var(--bg-color2));
}
 
.owindow .title {
    color: var(--txt-color2);
    background-color: rgb(var(--bg-color3));
    border: none;
}
 
/* Body */
#odialog-container .content h1,
#odialog-container .modal-body h1 {
    box-shadow: none;
}
 
/* Footer */
#odialog-container .modal-footer {
    box-shadow: none;
}
 
/* Button Correction */
#odialog-container .title.modal-header :not(.page-rate-widget-box) :not(#search-top-box-form) > a.btn {
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:active,
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:hover,
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:focus-within {
    color: rgb(var(--txt-color2));
    background-color: rgb(var(--bg-color3));
    border: none;
}
 
/* DETAILS */
/* Watch */
div.page-watch-options a {
    padding: 0.15em;
    text-decoration: none !important;
    box-shadow: inset 0 -0.125em 0 0 rgba(var(--bg-color3), 1) !important;
    transition: box-shadow 300ms cubic-bezier(.4, .0, .2, 1), color 300ms cubic-bezier(.4, .0, .2, 1), padding 300ms cubic-bezier(.4, .0, .2, 1), margin 300ms cubic-bezier(.4, .0, .2, 1) !important;
}
 
div.page-watch-options a:hover {
    padding: .3em .25em .2em .25em !important;
    text-decoration: none !important;
    color: rgb(var(--txt-color2)) !important;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1) !important;
}
 
/* Revision */
#page-info {
    margin: .25em;
    font-family: var(--body-font) !important;
    font-size: .75rem !important;
}
 
div#page-info .odate {
    --MONO: 0;
    font-family: var(--body-font);
    font-size: .75rem;
}
 
/* TAGS*/
.page-tags span a {
    padding: .15em;
    color: rgb(var(--txt-color1));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: inset 0 -.125em 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, .0, .2, 1), color 300ms cubic-bezier(.4, .0, .2, 1), padding 300ms cubic-bezier(.4, .0, .2, 1), margin 300ms cubic-bezier(.4, .0, .2, 1);
}
 
.page-tags span a:hover {
    padding: .3em .25em .2em .25em;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}
 
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):before,
#main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]):before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):active:before,
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* ACTION AREA */
#action-area > p {
    background-color: rgb(var(--bg-color2)) !important;
    box-shadow: none !important;
}
 
#action-area a[onclick*=PageRateModule],
#action-area a.action-area-close,
table.page-history tr td.optionstd a,
body.print-body #print-options a,
#site-tools-box ul.nav li a,
#action-area h1+p+h2~div[style="padding-left:3em;"] > div a {
    border: none;
    box-shadow: none;
}
 
/* EDITOR */
/* Title */
#action-area h1:after {
    height: .125rem;
}
 
/* Border */
form#edit-page-form:not(.data-form),
form#edit-page-form .wd-editor-toolbar-panel {
    box-shadow: none;
}
 
/* Title */
form#edit-page-form #edit-page-title {
    background-color: rgb(var(--bg-color2));
}
 
form#edit-page-form #edit-page-title:focus-visible {
    background-color: rgb(var(--bg-color1));
    border: none;
}
 
/* Text Area */
form#edit-page-form #edit-page-textarea {
    border: none;
}
 
form#edit-page-form #edit-page-textarea:focus {
    border: none;
}
 
form#edit-page-form #wd-editor-toolbar-panel+div {
    box-shadow: none;
}
 
/* Help */
form#edit-page-form .edit-help-34 {
    background-color: rgb(var(--bg-color2));
}
 
/* Size Buttons */
form#edit-page-form .change-textarea-size {
    grid-gap: 0em;
    gap: 0em;
    background-color: rgb(var(--bg-color2));
}
 
form#edit-page-form .change-textarea-size a:active,
form#edit-page-form .change-textarea-size a:hover{
    border: .125rem solid rgb(var(--bg-color3));
}
 
/* Edit Comments */
form#edit-page-form #edit-page-comments {
    background-color: rgb(var(--bg-color2));
}
 
form#edit-page-form #edit-page-comments:focus-visible {
    background-color: rgb(var(--bg-color1));
    border: none;
}
 
/* HISTORY */
/* Per Page */
select#h-perpage {
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
/* Pager */
#action-area .pager span.current:not(:last-of-type)::before {
    display: none;
}
 
.pager .current {
    color: rgb(var(--txt-color2));
}
 
/* List*/
#revision-list .page-history tr:first-child {
    display: none;
}
 
table.page-history tr:nth-of-type(odd) {
    background-color: rgb(var(--bg-color2));
}
 
/* SOURCE */
.page-source {
    border: none;
    background-color: rgb(var(--bg-color2));
}
 
/* FOOTER */
/* Footer */
#footer {
    --footer-bg-color: var(--bg-color2);
    --footer-text-color: var(--txt-color1);
    --footer-link-color: var(--txt-color1);
    --footer-link-hover-color: var(--txt-color2);
    --footer-link-hover-bg-color: var(--bg-color3);
}
 
#footer a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#footer a:active:before,
#footer a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* Buttons */
:not(.page-rate-widget-box):not(#search-top-box-form)>.btn,
:not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input {
    border: none !important;
    box-shadow: none !important;
}
 
#odialog-container div.owindow {
    box-shadow: none;
}
 
/* License Area */
#license-area {
    --license-bg-color: var(--bg-color2);
    --license-text-color: var(--txt-color1);
    --license-link-color: var(--txt-color1);
    --license-link-hover-color: var(--txt-color2);
    --license-link-hover-bg-color: var(--bg-color3);
}
 
#license-area a:before {
    --clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
 
#license-area a:active:before,
#license-area a:hover:before {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
/* COMPONENTS */
/* Table of Contents */
#page-content div#toc {
    box-shadow: none;
}
 
/* Horizontal Rule */
hr {
        height: .125rem;
        margin: 1.25rem 0;
        background-color: rgb(var(--bg-color3));
        border-top: none;
}
 
/* Link */
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(#toc #toc-list a):not(#toc #toc-list a:visited):not(.fa.fa-info):not(.linkbox a):not(#action-area .btn):not(#rename-option-rename a):not(.danger-diamond a) {
    padding: .15em;
    margin: -.15em;
    color: rgb(var(--txt-color1));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: inset 0 -.125rem 0 0rem rgba(var(--bg-color3), 1);
    transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1), color 300ms cubic-bezier(.4, 0, .2, 1), padding 300ms cubic-bezier(.4, 0, .2, 1), margin 300ms cubic-bezier(.4, 0, .2, 1);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):hover:not(#toc #toc-list a):not(#toc #toc-list a:visited):not(.fa.fa-info):not(.linkbox a):not(#action-area .btn):hover:not(#rename-option-rename a):hover:not(.danger-diamond a):hover {
    padding: .3em .25em .2em .25em;
    margin: -.25em;
    text-decoration: none;
    color: rgb(var(--txt-color2));
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bg-color3), 1);
}
 
/* Collapsible */
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    overflow: hidden;
    margin: auto;
    box-sizing: border-box;
    background: rgb(var(--bg-color2));
    transition: background .25s linear;
}
 
#page-content .collapsible-block-link {
    display: inline-block;
    padding: .5rem 1rem;
    text-decoration: none;
    text-align: center;
    color: rgb(var(--txt-color1));
    font-weight: 700;
}
 
#page-content .collapsible-block-link:hover {
    color: rgb(var(--txt-color2));
}
 
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {
    background: rgb(var(--bg-color3));
}
 
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0rem -.25rem 0rem 0rem rgb(var(--bg-color3));
}
 
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
    margin-top: .75rem;
    margin-bottom: .75rem;
}
 
/* Image Block */
.scp-image-block {
    box-sizing: border-box;
    border: none;
    bottom-border: none;
    box-shadow: none;
}
 
:is(div.image-block, div.scp-image-block) {
    box-shadow: none;
}
 
:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
}
 
.block-right:is(div.image-block,div.scp-image-block) {
    margin: 1.25em 0 1.25em 1.25em;
}
 
.block-center:is(div.image-block,div.scp-image-block) {
    margin: 1.25em auto;
}
 
@media only screen and (max-width: 600px) {
    .scp-image-block {
        float: none;
        margin: 1.25rem auto;
    }
}
 
/* BetterFootnotes */
.fnnum::after {
    padding: .125rem;
}
 
.fncon {
    left: var(--posX);
    background: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
    padding: 1rem;
    width: 12rem;
}
 
.fncon::before {
    color: rgb(var(--txt-color2));
}
 
@media only screen and (max-width: 58.125rem) {
    .fncon {
        position: fixed;
        bottom: 1.25rem;
        left: calc(27.125vw - 3.125rem);
        width: 75%;
        transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.4, 0, .2, 1) var(--fnLinger), visibility 0.01s linear var(--fnInteract);
    }
 
    .fnnum:hover + .fncon, .fncon:hover {
        left: 27.125vw;
        transition: opacity 0.15s linear, left var(--fnTransition)  cubic-bezier(.4, 0, .2, 1);
    }
}
 
/* STANDARD */
/* Blockquote */
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: none;
}
 
/* Code */
.code {
    margin: 1.25em;
    padding: .825em 1.75em .825em 1.25em;
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color2));
    border: none;
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3));
}
 
.hl-code,
.hl-identifier,
.hl-brackets {
    color: rgb(var(--txt-color1));
}
 
.hl-var {
    color: rgb(76, 160, 108);
}
 
.hl-reserved {
    color: rgb(67, 135, 190);
}
 
.hl-number,
.hl-string {
    color: rgb(197, 38, 50);
}
 
.hl-quotes,
.hl-special {
    color: rgb(98, 60, 122);
}
 
/* Table */
 #page-content .wiki-content-table tbody tr th {
    padding: .4rem;
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
    border: .125rem solid rgb(var(--bg-color3)) !important;
}
 
 #page-content .wiki-content-table tbody tr td {
    padding: .8rem;
    line-height: 1.5;
    color: rgb(var(--txt-color1));
    background: rgb(var(--bg-color1));
    border: .125rem solid rgb(var(--bg-color3)) !important;
}
 
/* CUSTOM */
/* Label */
.label {
    padding: .125em;
    color: rgb(var(--txt-color2));
    white-space: nowrap;
    background: rgb(var(--bg-color3));
}
 
/* Memetic */
.memetic{
    filter: blur(.25rem);
}
 
/* Redaction */
.redaction{
    padding: .15em 0;
    color: rgb(var(--txt-color1));
    text-decoration: none;
    background-color: rgb(var(--txt-color1));
    transition: background-color 300ms cubic-bezier(.4, .0, .2, 1);
}
 
.redaction:hover {
    text-decoration: none;
    background-color: transparent;
}
 
/* Notation*/
.notation {
    margin: 1.25em;
    padding: .825em 1.75em .825em 1.25em;
    background-color: rgb(var(--bg-color1));
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3));
}
 
/* Jotting */
.jotting {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: 1px dashed rgb(var(--txt-color1));
}
 
/* Modal*/
.modal {
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}
 
/* Translucent*/
.translucent{
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgba(var(--bg-color2), .5);
    backdrop-filter: blur(.1rem);
}
 
/* Floatbox */
/* Adapted from Basalt */
#page-content div.floatbox {
    float: right;
    max-width: calc(var(--body-width-on-desktop)/2.5);
    box-sizing: border-box;
    margin: 1.25em;
    padding: .825em 1.25em;
    background-color: rgb(var(--bg-color2));
    border: none;
}
 
@media only screen and (max-width: 600px) {
    #page-content div:is(.floatbox) {
    float: none;
    width: 100%;
    margin: 1.25em;
    }
}
 
/* Document */
/* Adapted from Basalt */
.document {
    display: block;
    position: relative;
    max-width: 45rem;
    margin: 1.25em 1.25em 2.25em 1.25em;
    padding: 1.25em;
    color: rgb(var(--txt-color1));
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 10px rgba(var(--bg-color4), .5);
}
 
.document::before {
    top: 5px;
    left: -5px;
    transform: rotate(-2.5deg);
}
 
.document::after {
    top: 2.5px;
    right: -2.5px;
    transform: rotate(1.25deg);
}
 
.document::before,
.document::after {
    content: "";
    position: absolute;
    z-index: -1;
    height: 98%;
    width: 98%;
    background-color: rgb(var(--bg-color1));
    box-shadow: 0 0 10px rgba(var(--bg-color4), .5);
}
 
@media only screen and (max-width: 1020px) {
.document::before,
.document::after {
        display: none;
    }
}
 
/* Table Color */
/* Adapted from BLANKSTYLE CSS */
:root:lang(zh) {
    --table0-bg-color: 56, 49, 49;
    --table1-bg-color: var(--one-color);
    --table2-bg-color: var(--two-color);
    --table3-bg-color: var(--three-color);
    --table4-bg-color: var(--four-color);
    --table5-bg-color: var(--five-color);
    --table6-bg-color: var(--six-color);
 
    --table0-txt-color: var(--white-monochrome);
    --table1-txt-color: var(--white-monochrome);
    --table2-txt-color: var(--white-monochrome);
    --table3-txt-color: var(--gray-monochrome);
    --table4-txt-color: var(--white-monochrome);
    --table5-txt-color: var(--white-monochrome);
    --table6-txt-color: var(--white-monochrome);
}
 
.table0 {
    --bg-color3: var(--table0-bg-color);
    --txt-color2: var(--table0-txt-color);
}
 
.table1 {
    --bg-color3: var(--table1-bg-color);
    --txt-color2: var(--table1-txt-color);
}
 
.table2 {
    --bg-color3: var(--table2-bg-color);
    --txt-color2: var(--table2-txt-color);
}
 
.table3 {
    --bg-color3: var(--table3-bg-color);
    --txt-color2: var(--table3-txt-color);
}
 
.table4 {
    --bg-color3: var(--table4-bg-color);
    --txt-color2: var(--table4-txt-color);
}
 
.table5 {
    --bg-color3: var(--table5-bg-color);
    --txt-color2: var(--table5-txt-color);
}
 
.table6 {
    --bg-color3: var(--table6-bg-color);
    --txt-color2: var(--table6-txt-color);
}
 
/* Memo */
/* Adapted from Basalt*/
:root:lang(zh) {
    --memo-txt-color: var(--txt-color1);
    --memo-logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(20%);
    --memo-size: 5rem;
}
 
div[class$="-memo"] {
    color: rgb(var(--memo-txt-color));
    min-height: var(--memo-size);
    margin: 2.25rem auto;
    padding: 1.25rem;
    text-align: center;
    background: rgb(var(--memo-bg-color));
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    backdrop-filter: blur(.1rem);
}
 
div[class$="-memo"]::before{
    color: rgb(var(--memo-txt-color));
    z-index: 2;
    content: var(--memo-header);
    display: flex;
    flex-direction: column;
    margin: 0 auto 1.25rem auto;
    padding-top: .5em;
    font-family: var(--UI-font);
    font-weight: 700;
    font-size: 1.25em;
    text-align: center;
}
 
div[class$="-memo"]::after{
    content: "";
    position: absolute;
    height: 15rem;
    width: 15rem;
    top: 50%;
    left: 50%;
    margin-top: -7.5rem;
    margin-left: -7.5rem;
    min-height: var(--memo-size);
    background: var(--memo-logo);
    filter: var(--memo-logo-filter);
    background-size: calc(1.5 * var(--memo-size));
    background-repeat: no-repeat;
    background-position: center center;
}
 
div[class$="-memo"] > * {
    position: relative;
    z-index: 2;
}
 
.overwatch-memo {
    --memo-header: "來自監督者議會的指示";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/o5-logo.svg);
    --memo-bg-color: 252, 217, 217;
}
 
.ethics-memo {
    --memo-header: "來自倫理委員會的備忘";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/ec-logo.svg);
    --memo-bg-color: 217, 231, 252;
}
 
.raisa-memo {
    --memo-header: "來自紀錄及資訊安全管理部的通知";
    --memo-logo: url(http://scp-wiki.wikidot.com/local--files/theme:greystyle/raisa-logo.svg);
    --memo-bg-color: 252, 245, 196;
}
 
/* Shadow */
.shadow {
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}
 
.blockquote.shadow {
    box-shadow: 0 0 5px rgba(var(--bg-color4), .5);
}
 
.notation.shadow,
.code.shadow {
    box-shadow: inset .5rem 0 0 0 rgba(var(--bg-color3)), 0 0 5px rgba(var(--bg-color4), .5);
}
 
/* Headline */
.headline {
    padding: 0;
    margin: .5rem 1.25rem;
    background: none;
    border: none;
}
 
.headline > p {
    --wght: 700;
    font-size: 1.5em;
    font-family: var(--title-font);
    text-align: center;
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
    padding: .5rem 1.25rem;
    margin: 0;
}
 
.headline > div {
    position: relative;
    padding: .5rem 1.25rem;
    border-top: none;
    margin: 0;
}
 
/* Logo */
:root:lang(zh) {
    --logo1-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --logo2-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --logo3-bg: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
 
    --logo-bg-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%) opacity(20%);
    --logo-bg-size: 15rem;
}
 
.logo1,
.logo2,
.logo3 {
    position: relative;
}
 
.logo1::after,
.logo2::after,
.logo3::after {
    content: "";
    position: absolute;
    height: 40vw;
    width: 40vw;
    top: 50%;
    left: 50%;
    margin-top: -20vw;
    margin-left: -20vw;
    min-height: 15rem;
    filter: var(--logo-bg-filter);
}
 
.logo1 > *,
.logo2 > *,
.logo3 > * {
    position: relative;
    z-index: 2;
}
 
.logo1::after {
    background: var(--logo1-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.logo2::after {
    background: var(--logo2-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.logo3::after {
    background: var(--logo3-bg);
    background-size: var(--logo-bg-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
/* Proposal */
:root:lang(zh) {
    --proposal-logo1: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --proposal-logo2: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
    --proposal1-logo3: url("http://scp-wiki.wikidot.com/local--files/theme:greystyle/foundation-logo.svg");
 
    --proposal-logo-filter: invert(11%) sepia(2%) saturate(4457%) hue-rotate(314deg) brightness(95%) contrast(76%);
    --proposal-logo-size: 15rem;
}
 
.proposal-logo1,
.proposal-logo2,
.proposal-logo3 {
    min-height: 15rem;
    filter: var(--proposal-logo-filter);
}
 
.proposal-logo1 {
    background: var(--proposal-logo1);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.proposal-logo2 {
    background: var(--proposal-logo2);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.proposal-logo3 {
    background: var(--proposal-logo3);
    background-size: var(--proposal-logo-size);
    background-repeat: no-repeat;
    background-position: center center;
}
 
.proposal-title {
    font-size: 2em;
}
 
.proposal-subtitle {
    font-size: 1.5em;
}
 
.proposal-title,
.proposal-subtitle {
    position: relative;
    margin: .5rem 1.25rem;
    margin-bottom: 0;
    padding: .5rem 1.25rem;
    padding-bottom: 0;
    --wght: 700;
    font-family: var(--title-font);
    text-align: center;
    color: rgb(var(--txt-color1));
}
 
.proposal-title p,
.proposal-subtitle p {
    margin: 0;
}
 
.proposal-author {
font-style: italic;
text-align: right;
}
 
/* Transcript */
.flank {
    --wght: 700;
    text-align: center;
}
 
.flank p {
    margin: 0;
}
 
.transcript {
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: rgb(var(--txt-color1));
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-auto-rows: minmax(1em, auto);
}
 
.transcript p {
    margin: 0;
}
 
.sp {
    border-right: 1px solid rgb(var(--txt-color1));
    padding: .825em .825em 0 .825em;
    --wght: 700;
    text-align: right;
}
 
.di {
    padding: .825em 0 0 .825em;
}
 
.ac {
    padding: .825em 0 0 .825em;
    font-style: italic;
}
 
/* Mobile Correction */
@media only screen and (max-width: 56.25rem) {
    .transcript {
        display: inline;
    }
 
    .transcript::after {
        content: "\000a";
        white-space: pre;
    }
 
    .transcript .sp,
    .transcript .di,
    .transcript .ac {
        display: inline;
        padding: 0;
        margin: 0;
    }
 
    .sp::before,
    .di::before,
    .ac::before {
        content: "\000a";
        white-space: pre;
    }
 
    .sp {
        float: left;
        width: fit-content;
        border-right: none;
    }
 
    .sp p::after {
        content: ":\00a0"
    }
}
 
/* Linkbox*/
.linkbox {
    display: block;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin: .75rem auto;
    background: rgb(var(--bg-color2));
    transition: background .25s linear;
}
 
.linkbox p {
    margin: 0;
}
 
.linkbox a {
    display: inline-block;
    padding: .5rem 1rem;
    text-decoration: none;
    text-align: center;
    color: rgb(var(--txt-color1));
    font-weight: 700;
}
 
.linkbox:hover {
    color: rgb(var(--txt-color2));
    background: rgb(var(--bg-color3));
}
 
.linkbox a:hover {
    color: rgb(var(--txt-color2));
}
 
/* Mode Changer */
:root:lang(zh) {
    --mode1-display: inline;
    --mode2-display: none;
}
 
.mode1-changer {
    display: var(--mode1-display);
}
 
.mode2-changer {
    display: var(--mode2-display);
}
 
/* Member Changer */
.member-changer {
    display: inline;
    padding: 0 !important;
    margin: 0 !important;
}
 
.member-changer > .site-member {
    display: inline;
    padding: 0;
    margin: 0;
}
 
.member-changer .site-member:nth-child(2) {
    display: none;
}

/* DARK */
:root:lang(zh) {
    /* Primary Colors */
    --accent-color: 197, 38, 50;
 
    --bg-color1: var(--black-monochrome);
    --bg-color2: var(--dark-gray-monochrome);
    --bg-color3: var(--accent-color);
    --bg-color4: var(--black-monochrome);
 
    --txt-color1: var(--pale-gray-monochrome);
    --txt-color2: var(--pale-gray-monochrome);
    --txt-color3: var(--accent-color);
    --txt-color4: var(--black-monochrome);
 
    /* Logo Changes */
    --logo-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%) opacity(25%);
 
    /* Fixing the Text Color in a Single Dark Mode Theme Square */
    --swatch-text-dark: var(--black-monochrome);
 
    /* Color Table */
    --table0-txt-color: var(--pale-gray-monochrome);
    --table1-txt-color: var(--pale-gray-monochrome);
    --table2-txt-color: var(--pale-gray-monochrome);
    --table3-txt-color: var(--black-monochrome);
    --table4-txt-color: var(--pale-gray-monochrome);
    --table5-txt-color: var(--pale-gray-monochrome);
    --table6-txt-color: var(--pale-gray-monochrome);
 
    /* Logo Background */
    --logo-bg-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%) opacity(25%);
 
    /* Proposal Logo */
    --proposal-logo-filter: invert(61%) sepia(37%) saturate(0%) hue-rotate(195deg) brightness(110%) contrast(119%);
 
    /* Memo */
    --memo-txt-color: var(--txt-color4);
    --memo-logo-filter: invert(0%) sepia(55%) saturate(3607%) hue-rotate(44deg) brightness(94%) contrast(89%) opacity(25%);
 
    /* Mode Changer */
    --mode1-display: none;
    --mode2-display: inline;
}
 
/* Document */
.document {
    background-color: rgb(var(--bg-color2));
}
 
.document::before,
.document::after {
    background-color: rgb(var(--bg-color2));

/* WIDE */
#main-content {
    --body-width-on-desktop: 60vw;
    --header-width-on-desktop: 60vw;
}
 
@media only screen and (max-width: 78.75rem) {
    .fncon {
        position: fixed;
        bottom: 1.25rem;
        left: calc(20vw - 3.125rem);
            width: 75%;
        transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.4, 0, .2, 1) var(--fnLinger), visibility 0.01s linear var(--fnInteract);
    }
 
    .fnnum:hover + .fncon, .fncon:hover {
        left: 20vw;
        transition: opacity 0.15s linear, left var(--fnTransition)  cubic-bezier(.4, 0, .2, 1);
    }
}

/* HIDE TITLE */
#page-title {
    display: none !important;
}

+ 顯示組件代碼

- 隱藏組件代碼

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1.5em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

+ 顯示組件代碼

- 隱藏組件代碼

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 48.0625rem) {
    #side-bar .close-menu {
     display: block;
     position: fixed;
     top: 0.5rem;
     left: 0.5rem;
     width: 3rem;
     height: 3rem;
     background: unset;
     opacity: 1;
     pointer-events: all;
     z-index: -1;
    }
 
    #side-bar .close-menu img {
     color: transparent;
    }
 
    #side-bar .close-menu::before,
    #side-bar .close-menu::after {
     content: "";
     box-sizing: border-box;
     position: fixed;
     display: block;
     top: 0.5rem;
     left: 0.5rem;
     width: 3rem;
     height: 3rem;
     padding: 0;
     margin: 0;
     text-align: center;
     pointer-events: all;
     cursor: pointer;
     transition:
     opacity var(--sidebar-transition-timing);
    }
 
    #side-bar .close-menu::before {
     --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
     z-index: -1;
     background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
     -webkit-mask: var(--mask);
     mask: var(--mask);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: 50% 50%;
     mask-position: 50% 50%;
     -webkit-mask-size: 60%;
     mask-size: 60%;
    }
 
    #side-bar .close-menu::after {
     z-index: -2;
     background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
     border-radius: var(--toggle-roundness, 50%);
     border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
    }
 
    #side-bar:focus-within .close-menu,
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
     pointer-events: none;
    }
 
    #side-bar:focus-within .close-menu::before,
    #side-bar:focus-within .close-menu::after {
     opacity: 0;
     pointer-events: none;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
     opacity: 0;
     pointer-events: none;
    }
 
    #side-bar {
     display: block;
     position: fixed;
     top: 0;
     left: calc(var(--sidebar-width-on-desktop)*-1);
     z-index: 10;
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     margin-top: 0;
    }
 
    #side-bar:focus-within {
     left: 0;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
     left: 0;
    }
 
    #side-bar .side-block {
     margin-top: 1rem;
     background-color: rgb(0, 0, 0, 0);
     border-radius: 0;
     border-left-width: 0px;
     border-right-width: 0px;
    }
 
    #main-content::before {
     content: "";
     display: block;
     position: fixed;
     top: 0;
     right: 0;
     z-index: -1;
     opacity: 0;
     transition:
     opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     margin-left: var(--sidebar-width-on-desktop);
     background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
     padding-right: 0;
     width: 100%;
     height: 100vh;
     pointer-events: none;
     z-index: 99;
    }
 
    #side-bar:focus-within ~ #main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
    }
 
    @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
     padding: inherit;
    } }
 
    #content-wrap {
     display: flex;
     flex-direction: row;
     width: calc(100vw - (100vw - 100%));
     min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
     flex-grow: 2;
     height: auto;
     position: relative;
     margin: 0 auto;
     max-width: inherit;
    }
 
    #main-content {
     width: 100%;
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     max-width: var(--body-width-on-desktop, 45.75rem);
     margin: 0 auto;
    }
 
    #page-content {
     max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    @supports (-webkit-hyphens:none) {
     #side-bar {
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     padding-right: 0;
     background-color: rgb(0, 0, 0, 0);
     pointer-events: all;
     overflow-x: visible;
     overflow-y: visible;
     z-index: 999;
     }
 
     #side-bar::-webkit-scrollbar {
     opacity: 0;
     -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     }
 
     #side-bar .close-menu::before {
     z-index: 999;
     }
 
     #side-bar .close-menu::after {
     z-index: 998;
     }
 
     #side-bar:hover .close-menu::before,
     #side-bar:hover .close-menu::after {
     opacity: 0;
     }
 
     #side-bar:hover {
     left: 0;
     background-color: rgba(var(--swatch-menubg-color), 1);
     padding-right: 0;
     }
 
     #side-bar:hover::-webkit-scrollbar {
     opacity: 1;
     }
 
     #side-bar:hover~#main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
    }
}

en 外觀主題翻譯

頁面更改紀錄: 11, 最後編輯於: 19 Jan 2026 20:06

編輯評分 (0) 標籤討論歷程紀錄檔案打印網站工具 + 選項