您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您現在最好給我停下來
本頁面內包含基金會維基內部使用的模板。
嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面
當然,所謂的「更好」是個主觀概念,但所見即所得。
這個組件仿造了SCP-4485裡面所能看到的自定義註解。
範例:
文字.註解裡的文字。
文字.註解裡的文字。和更多的文字。
文字.註解裡的文字。。更多文字。
沒有註解的文字。
如何使用:
請在文章裡面添加以下的代碼,一次就好:
[[include :scp-zh-tr:component:betterfootnotes]]
每當你要使用到註解的時候,請複製以下的架構:
[[span class="fnnum"]].[[/span]][[span class="fncon"]]註解裡的文字。[[/span]]
備註:
- fnnum這個span class裡面包含有一個英文句點,這是因為它需要至少一個非空格字符才能夠正常解析。
- 你可以透過以下的方式來自定義註解上標數字的顏色:
[[module CSS]]
:root {
--fnColor: 在這裡輸入顏色;
}
[[/module]]
沒有修改的話預設顏色是#E6283C.
- 在底下不會有註解列表。
- 可以跟Sigma-9一起使用,但可能不會那麼的完美。
- 特別感謝Woedenaz他那無可挑剔的設計感,以及Placeholder McD騷擾鼓勵著我完成這份作品。
原始碼:
:root { --posX: calc(50% - 358px - 12rem); --fnTransition: 0.3s; --fnLinger: 0.15s; --fnInteract: calc(var(--fnTransition) + var(--fnLinger)); } /*--- Footnote Auto-counter --*/ #main-content { counter-reset: megacount; } /*--- Footnote Superscript Number --*/ .fnnum { display: inline-block; width: max-content; text-indent: -0.475ex; vertical-align: super; line-height: 80%; word-break: initial; text-decoration: none; font-weight: bold; font-style: initial; color: transparent; position: relative; font-size: 80%; padding: .15em .05em; margin-right: -0.25em; counter-increment: megacount; -webkit-user-select: none; user-select: none; } .fnnum::after { content: "" counter(megacount); color: var(--fnColor, #E6283C); } .fnnum:hover { text-decoration: none; cursor: pointer; background-color: var(--fnColor, #E6283C); } .fnnum:hover::after { color: white; } /*--- Footnote Content Wrapper --*/ .fncon { position: absolute; right: calc(var(--posX) + 80px); line-height: 1.25; padding: 0.8125rem; width: 12.5rem; box-sizing: border-box; background: white; border: .125rem solid black; font-size: .9125rem; font-weight: initial; font-style: normal; text-align: initial; visibility: hidden; opacity: 0; z-index: 9; transition: opacity 0.15s linear var(--fnLinger), right var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger), visibility 0.01s linear var(--fnInteract); } .fnnum:hover + .fncon, .fncon:hover { opacity: 1; z-index: 10; right: var(--posX); visibility: visible; transition: opacity 0.15s linear, right var(--fnTransition) cubic-bezier(.08,.72,.5,.94); } .fncon::before { position: absolute; top: 0; left: 0; transform: translateX(-52%) translateY(-55%) scale(1.15); background-color: var(--fnColor, #E6283C); color: white; content: counter(megacount); font-size: initial; font-weight: bold; font-style: initial; padding: 0.18rem 0.32em 0.08rem; } /*--- Mobile Query --*/ @media only screen and (max-width: 1279px) { .fncon { position: fixed; bottom: 1.5rem; left: calc(15% - 50px); width: 70%; transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger), visibility 0.01s linear var(--fnInteract); } .fnnum:hover + .fncon, .fncon:hover { left: 15%; transition: opacity 0.15s linear, left var(--fnTransition) cubic-bezier(.08,.72,.5,.94); } }