更好的脚注
注意
此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。
未经组件作者或工作人员允许,请勿修改此页的内容。
更好当然是主观上来说的,但是你见即所得。
这是一个模仿如于SCP-4485中所示的自定义脚注组件。
例子:
文字.脚注中的文本。
文字.脚注中的文本。更多文字。
蚊子.脚注中的文本。。更多文字。
没在脚注里的文字。
如何使用:
把这条代码一次放入:
[[include :scp-wiki-cn:component:betterfootnotes]]
为每一条脚注都复制以下结构:
[[span class="fnnum"]].[[/span]][[span class="fncon"]]脚注文字。[[/span]]
注意:
- fnnum的span类型中含有一个句点,因其需要至少一个非空格字符才能正确解析。
- 脚注上标的颜色可以用以下代码自定义:
[[module CSS]]
:root {
--fnColor: COLOR HERE;
}
[[/module]]
否则默认为#E6283C.
- 没有底部脚注列表。
- 也可用于Sigma-9,但可能并不是无缝贴合。
- 特别感谢Woedenaz Woedenaz 的完美设计观念,以及Placeholder McD Placeholder McD 来烦扰鼓励我做出这个组件。
源代码:
:root{ --posX: calc(50% - 358px - 12rem); --fnTransition:0.3s; --fnLinger:0.15s; --fnInteract: calc(var(--fnTransition) + var(--fnLinger)); } /*--- FootnoteAuto-counter --*/ #main-content{counter-reset: megacount; } /*--- FootnoteSuperscriptNumber --*/ .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; } /*--- FootnoteContentWrapper --*/ .fncon{position:absolute; right: calc(var(--posX) + 80px); line-height:1.2; padding:0.82rem; width:10.3rem; background:white; border:2pxsolidblack; 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; 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.32em0.08rem; } /*--- MobileQuery --*/ @mediaonlyscreenand (max-width: 1279px) {.fncon{position:fixed; bottom:1.3rem; left: calc(11% - 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:11%; transition: opacity 0.15s linear, left var(--fnTransition) cubic-bezier(.08,.72,.5,.94); }}
页面版本: 7, 最后编辑于: 19 Feb 2023 06:04