更好的脚注

我和我的小伙伴们都惊呆了！！

此页为于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%;
     }
}