BetterFootnotes (Ghi Chú Ổn Hơn)

LƯU Ý:

Đây là trang component được sử dụng nội bộ bởi Wiki SCP-VN. Trang này được tạo để sử dụng và thêm vào các trang khác.

Tốt hơn khác với hoàn toàn, nhưng những gì bạn đang thấy đây chính là những gì bạn nhận được.

Đây là component bắt chước ghi chú cá nhân tại SCP-4485.

Các Ví Dụ:

Văn Bản.Văn bản trong ghi chú.
Văn Bản.Văn bản trong ghi chú. và nhiều văn bản hơm.
Văn Bản.Văn bản trong ghi chú.. Thêm văn bản.
Văn Bản không có Ghi Chú.

Hướng Dẫn Sử Dụng:

Thêm cái này:

[[include :scp-vn:component:betterfootnotes]]

Sao chép đoạn sau cho từng ghi chú:

[[span class="fnnum"]].[[/span]][[span class="fncon"]]Văn bản trong ghi chú.[[/span]]

Lưu ý:

- Cấp span fnnum có chứa một dấu chấm, do nó cần một ký tự khác dấu cách để hoạt động.

- Màu của văn tự ghi chú có thể được chỉnh theo sau:

[[module CSS]]
:root {
--fnColor: MÀU Ở ĐÂY;
}
[[/module]]

Hoặc không sẽ mặc định là #E6283C.

- Sẽ không có danh sách ghi chú ở cuối.

- Hoạt động với Sigma-9, nhưng không phải hoàn toàn trơn tru.

- Đặc biệt cảm ơn Woedenaz vì khả năng cảm thụ thiết kế tuyệt vời, và Placeholder McD vì đã ép buộc động viên tôi làm cái này.

---

Mã Nguồn:

: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);
    }
}