更好的脚注
注意
此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。
未经组件作者或工作人员允许,请勿修改此页的内容。
更好当然是主观上来说的,但是你见即所得。
这是一个模仿如于SCP-4485中所示的自定义脚注组件。
例子:
文本.脚注中的文本。
文本.脚注中的文本。和更多的文本。
文本.脚注中的文本。。更多的文本
不在脚注中的文本
如何使用:
把这条代码一次放入:
[[include :scp-wiki:component:betterfootnotes]]
为每一条脚注都复制以下结构:
[[span class="fnnum"]].[[/span]][[span class="fncon"]]脚注中的文本。[[/span]]
注意:
- fnnum的span类型中含有一个句点,因其需要至少一个非空格字符才能正确解析。
- 脚注上标的颜色可以用以下代码自定义:
[[module CSS]]
:root {
--fnColor: 此处为颜色;
}
[[/module]]
否则默认为#E6283C.
- 没有底部脚注列表。
- 也可用于Sigma-9,但可能并不是无缝贴合。
- 特别感谢Woedenaz的完美设计观念,以及
Placeholder McD来烦扰鼓励我做出这个组件。
源代码
:root { --posX: calc(50% - 358px - 12rem); } /*--- Footnote Auto-counter --*/ #page-content { counter-reset: megacount; } /*--- Footnote Superscript Number --*/ .fnnum { display: inline-block; text-indent: calc(-1% - 0.1em); overflow: hidden; line-height: 83%; text-decoration: none; font-weight: bold; font-style: initial; color: transparent; position: relative; top: -0.25em; font-size: 82%; padding: .15em calc(.21em - 0.4px) .12em calc(.11em - 1px); margin-left: -0.06em; margin-right: -0.25em; counter-increment: megacount; 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.2; padding: 0.82rem; width: 10.3rem; background: white; border: 2px solid black; font-weight: initial; font-style: initial; text-align: initial; pointer-events: none; opacity: 0; transition: opacity 0.15s linear, right 0.3s cubic-bezier(.08,.72,.5,.94); z-index: 9; } .fnnum:hover + .fncon { opacity: 1; right: var(--posX); } .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-left: 0.32em; padding-right: 0.32em; padding-top: 0.18rem; padding-bottom: 0.08rem; } /*--- Mobile Query --*/ @media only screen and (max-width: 1279px) { .fncon { position: fixed; bottom: 1.3rem; left: calc(11% - 50px); width: 70%; transition: opacity 0.15s linear, left 0.3s cubic-bezier(.08,.72,.5,.94); } .fnnum:hover + .fncon { left: 11%; } }
页面版本: 5, 最后编辑于: 20 Apr 2021 16:07