版式：极限运动

---

+ Show component code

:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                padding 300ms linear,
                margin 300ms linear;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }

暗流--gray-monochrome(41,47,64)

香橙--bright-accent(217,117,30)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

浮灰--very-light-gray-monochrome(116,122,140)

雾空--pale-gray-monochrome(167,198,217)

意志蓝--medium-accent(54,74,115)

深邃--dark-accent(41,47,64)

浮晖--white-monochrome(242,242,242)

非黑--black-monochrome(38,38,38)

落霞--alt-accent(242,136,75)

阴天--light-gray-monochrome(213,237,242)

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

这个版式由Liurd修改自新阈限 黑色标记笔版式，参考了半影版式的代码。若要在您的页面中使用本主题，将如下代码插入您页面中的任何位置：

[[include :backrooms-wiki-cn:theme:e-e-a]]

版式示例

配图由L fainth 不匹配任何一个现有的用户名拍摄。

可以使用五个连字符"-----" 创建水平线，如果未将其放置在任何内容（例如引用块）中，则可以扩展到整个页面。分隔本文档各部分的行是水平线。

---

可以通过在行首加上1-6个之间的"+"字符来创建标题。

标题示例

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

分页1

这是一个分页。

分页2

看看我，我这有更多文字！

可真是古朴风格。

长分页

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

这是一个长分页，它能容纳很多字符。

不知道为啥，这个空分页贼拉长。我想知道是咋回事儿？

空分页

空分页

空分页

空分页

空分页

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字

---

一条分割线

嵌套块引用¹

这是一个	表格
你应该早就	知道怎么
制作它了吧

---

脚²
这段文本
放在这里
你们就能
看到不同
格式以及
其它东西
看起^来是
怎么_运作
包括那些不存在
以及存在的链接！
还有特殊警告
或者风险更低的
或者安全的！

---

[[note]]

[[span class="dblock"]] [[/span]]

[[span class="bblock"]] [[/span]]

[[/note]]

[[div class="lightblock"]]
这个东西用来让你看看链接颜色
[[/div]]

[[div class="darkblock"]]
这个东西用来让你看看链接颜色
[[/div]]

[[div class="styled-quote"]]

[[/div]]

[[div class="dark-styled-quote"]]

[[/div]]

[[div class="glassblock"]]

[[/div]]

[[div class="hoverblock"]]
试试把鼠标放在这里
[[/div]]

[[div class="light-hoverblock"]]
试试把鼠标放在这里
[[/div]]

[[div class="dark-hoverblock"]]
试试把鼠标放在这里
[[/div]]

[[div class="white-hoverblock"]]
试试把鼠标放在这里
[[/div]]

[[div class="inset-hoverblock"]]
试试把鼠标放在这里
[[/div]]

[[div class="shadow-hoverblock"]]
试试把鼠标放在这里
[[/div]]

[[div class="transparent-hoverblock"]]
试试把鼠标放在这里
没错，这是一个div！
[[/div]]

[[div class="glassblock hoverblock"]]
哦你可以给一个div上两个class
[[/div]]

---

+ 显示版式代码

:root {
    --theme-base: "black-highlighter";
    --theme-id: "e-e-a";
    --theme-name: "E.E.A. Theme";
    --logo-image: url("https://s1.ax1x.com/2022/11/28/zU7g3T.png");
    --logo-2: url("https://s1.ax1x.com/2022/11/28/zUTYy4.png");
    --header-title: "E.E.A.";
    --header-subtitle: "The Extreme Explorers Association";
    --white-monochrome: 242,242,242;
    --very-light-gray-monochrome: 116,122,140;
    --pale-gray-monochrome: 167,198,217;
    --light-gray-monochrome: 101,136,166;
    --gray-monochrome: 41,47,64;
    --dark-gray-monochrome: 41,47,64;
    --black-monochrome: 38,38,38;
    --bright-accent: 217,117,30;
    --medium-accent: 54,74,115;
    --dark-accent: 41,47,64;
    --pale-accent: 41,47,64;
    --alt-accent: 242,136,75;
    --link-color: var(--bright-accent);
    --visited-link-color:var(--pale-gray-monochrome);
 
    --diagonal-stripes:repeating-linear-gradient(-45deg,rgba(var(--pale-gray-monochrome),0.1),
hsla(0,0%,100%,0) 0.25vh,rgba(var(--light-gray-monochrome),0.1) 0.35vh,
rgba(var(--light-gray-monochrome),0.2) 5vh);
    --background-gradient-distance:120rem;
    --gradient-header: linear-gradient(to bottom right, rgba(var(--bright-accent)) 0%, rgba(var(--alt-accent), 0.90) 60%, rgba(var(--dark-accent), 0.90) 200%);
    --body-width-on-desktop:44rem;
 
    --tabs-hover-txt:var(--white-monochrome);
 
   --swatch-topmenu-border-color: var(--dark-gray-monochrome);
   --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
   --swatch-background: var(--black-monochrome);
   --swatch-text-general: var(--swatch-text-light);
 
   --rating-module-button-color: var(--white-monochrome);
   --rating-module-text-color: var(--swatch-menutxt-light-color);
 
   --footnotes-footer-bg-color: var(--dark-gray-monochrome);
 
}
@keyframes rotateheader {
 
0%{
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}
 
10%{
    transform:rotate(80deg);
    -ms-transform:rotate(80deg); /* IE 9 */
    -webkit-transform:rotate(80deg); /* Safari and Chrome */
}
 
20%{
    transform:rotate(-100deg);
    -ms-transform:rotate(-100deg); /* IE 9 */
    -webkit-transform:rotate(-100deg); /* Safari and Chrome */
}
 
22%{
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}
 
30%{
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
}
 
35%{
    transform:rotate(50deg);
    -ms-transform:rotate(50deg); /* IE 9 */
    -webkit-transform:rotate(50deg); /* Safari and Chrome */
}
 
41%{
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}
 
50%{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
}
 
65%{
    transform:rotate(135deg);
    -ms-transform:rotate(135deg); /* IE 9 */
    -webkit-transform:rotate(135deg); /* Safari and Chrome */
}
 
80%{
    transform:rotate(200deg);
    -ms-transform:rotate(200deg); /* IE 9 */
    -webkit-transform:rotate(200deg); /* Safari and Chrome */
}
 
100%{
    transform:rotate(360deg);
    -ms-transform:rotate(360deg); /* IE 9 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
}
 
}
@keyframes rotateheader2 {
 
0%{
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}
 
10%{
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* IE 9 */
    -webkit-transform:rotate(45deg); /* Safari and Chrome */
}
 
33%{
    transform:rotate(-120deg);
    -ms-transform:rotate(-120deg); /* IE 9 */
    -webkit-transform:rotate(-120deg); /* Safari and Chrome */
}
 
43%{
    transform:rotate(-75deg);
    -ms-transform:rotate(-75deg); /* IE 9 */
    -webkit-transform:rotate(-75deg); /* Safari and Chrome */
}
 
66%{
    transform:rotate(-240deg);
    -ms-transform:rotate(-240deg); /* IE 9 */
    -webkit-transform:rotate(-240deg); /* Safari and Chrome */
}
 
76%{
    transform:rotate(-195deg);
    -ms-transform:rotate(-195deg); /* IE 9 */
    -webkit-transform:rotate(-195deg); /* Safari and Chrome */
}
 
100%{
    transform:rotate(-360deg);
    -ms-transform:rotate(-360deg); /* IE 9 */
    -webkit-transform:rotate(-360deg); /* Safari and Chrome */
}
}
 
@keyframes h1-appear
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}
 
@-webkit-keyframes h1-appear /* Safari and Chrome */
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}
 
@keyframes h2-appear
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}
 
@-webkit-keyframes h2-appear /* Safari and Chrome */
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}
 
body{
    background-color:rgb(var(--black-monochrome));
    color:rgb(var(--white-monochrome));
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   background-image: var(--logo-2);
   background-size:auto calc(var(--header-height-on-desktop) - 2rem);
   background-position: left .75rem top 1.1875rem;
   background-repeat: no-repeat;
   transform-origin: 3.5rem 3.9375rem;
   opacity: 1;
    animation:rotateheader 5s linear alternate infinite;
    -webkit-animation:rotateheader 5s linear alternate infinite; /* Safari 和 Chrome */
    z-index:-1;
}
 
#header::after {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   top:0;
   background-image: var(--logo-image);
   background-size:auto calc(var(--header-height-on-desktop) - 2rem);
   background-position: left .75rem top 1.1875rem;
   background-repeat: no-repeat;
   transform-origin: 3.5rem 3.9375rem;
   opacity: 1;
    animation:rotateheader2 6s infinite;
    -webkit-animation:rotateheader2 6s infinite; /* Safari 和 Chrome */
    z-index:-1;
}
 
#header h1, #header h1 a {
   animation:h1-appear 3s ease-in-out  alternate;
   -webkit-animation:h1-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}
 
#header h2, #header h2 span, #header h2 span::before {
   animation:h2-appear 3s ease-in-out  alternate;
   -webkit-animation:h2-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}
 
#header h1 a::before {
   text-shadow: 2px 2px 0 rgb(var(--black-monochrome));
}
 
#header h2 span::before {
   text-shadow: 2px 2px 0 rgb(var(--black-monochrome));
   font-weight: bolder;
}
 
#page-title{
    color:rgb(var(--pale-gray-monochrome));
}
 
.code pre span[class*="hl-"] {
    -webkit-filter: invert(1) hue-rotate(180deg);
    filter: invert(1) hue-rotate(180deg);
}
 
.code{
  background-color:rgb(var(--dark-accent));
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):not([href*="classification-committee-memo"]):not([href*="anomaly-classification-system-guide"]):not([href*="classification-committee-memo"]) {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    box-decoration-break: clone;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--bright-accent));
    transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 200ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="classification-committee-memo"]):not([href*="anomaly-classification-system-guide"]):not([href*="classification-committee-memo"]):not(.fa-info):hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--bright-accent));
    text-decoration: none;
    color: rgb(var(--dark-accent))
}
 
a {
    color: inherit;
}
 
.scp-image-block a {
     box-shadow:none;
}
 
 #page-content .collapsible-block-folded,
    #page-content .collapsible-block-unfolded-link {
        background: rgb(var(--black-monochrome));
        transition: background 0.25s linear;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        white-space: nowrap;
        overflow: hidden;
        margin: auto;
    }
 
    #page-content .collapsible-block-folded .collapsible-block-link::before {
        content: "◢ ";
    }
 
    #page-content .collapsible-block-folded .collapsible-block-link::after {
        content: " ◣";
    }
 
    #page-content .collapsible-block-unfolded .collapsible-block-link::before {
        content: "◤ ";
    }
 
    #page-content .collapsible-block-unfolded .collapsible-block-link::after {
        content: " ◥";
    }
 
.scp-image-caption {
    background-color: rgb(var(--black-monochrome))!important;
}
 
    #page-content .collapsible-block-link {
        text-decoration: none;
        color: rgb(var(--white-monochrome));
        font-weight: 700;
    }
 
    #page-content .collapsible-block-link:hover {
        color: rgb(var(--black-monochrome));
    }
 
    #page-content .collapsible-block-folded:hover,
    #page-content .collapsible-block-unfolded-link:hover {
        background: rgb(var(--swatch-primary));
    }
 
    #page-content .collapsible-block-unfolded-link {
        box-shadow: 0rem -0.26rem 0rem 0rem rgb(var(--swatch-primary));
    }
 
    #page-content .collapsible-block-folded,
    #page-content .collapsible-block-unfolded-link {
        margin-top: 0.625rem;
        margin-bottom: 0.625rem;
    }
 
    #page-content table.wiki-content-table td,
    #page-content div.b-tables table.wiki-content-table td {
        background-color: rgb(var(--black-monochrome));
        color: rgb(var(--white-monochrome));
    }
 
    #page-content table.wiki-content-table th,
    #page-content div.b-tables table.wiki-content-table th {
        background: rgb(var(--pale-gray-monochrome));
        color: rgb(var(--black-monochrome));
    }
 
.yui-navset .yui-nav .selected{
    transform:translateY(0rem);
    box-shadow:0 0 0 0rem rgb(var(--tabs-selected-outline));
}
 
 .page-rate-widget-box {
    background-color:rgb(var(--pale-gray-monochrome));
}
 
.wiki-note {
    color:rgb(var(--black-monochrome));
}
 
.dblock:hover{
    color:inherit;
}
 
.bblock:hover {
    color:rgb(var(--white-monochrome));
}
 
.styled-quote {
    background-color: rgb(var(--medium-accent));
    border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0.05rem 0.1rem 0.3rem rgba(var(--pale-gray-monochrome), .25);
}
 
.dark-styled-quote {
    background-color: rgb(var(--gray-monochrome));
    color: rgb(var(--black-monochrome));
    border-left: 0.5rem solid rgba(var(--light-gray-monochrome));
    color: rgb(var(--white-monochrome));
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0.05rem 0.1rem 0.3rem rgba(var(--pale-gray-monochrome), .25);
}
 
.lightblock {
    background-color: rgb(var(--medium-accent));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(var(--pale-gray-monochrome), .25);
}
 
.darkblock {
    background-color: rgb(var(--gray-monochrome));
    color: rgb(var(--white-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(var(--pale-gray-monochrome), .25);
}
 
.glassblock {
   background-image: linear-gradient(-30deg,
      rgba(var(--light-gray-monochrome),.8) -80%,
      rgba(var(--white-monochrome),.2) 100%);
   border: solid rgb(var(--pale-accent)) 2px;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(var(--pale-gray-monochrome), .25);
}
 
.hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out;
   transform: translateY(0em);
}
 
.hoverblock:hover,.hoverblock:focus{
 box-shadow: 0px 4px 20px 0 rgba(var(--pale-gray-monochrome), .25);
 transform: translateY(-.3em);
}
 
.light-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
   transform: translateY(0em);
}
 
.light-hoverblock:hover,.light-hoverblock:focus{
   background-color: rgb(var(--medium-accent));
   box-shadow: 0px 4px 20px 0 rgba(var(--pale-gray-monochrome), .25);
   transform: translateY(-.3em);
}
 
.dark-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
   transform: translateY(0em);
}
 
.dark-hoverblock:hover,.dark-hoverblock:focus{
   background-color: rgb(var(--gray-monochrome));
   color: rgb(var(--white-monochrome));
   box-shadow: 0px 4px 20px 0 rgba(var(--pale-gray-monochrome), .25);
   transform: translateY(-.3em);
}
 
.transparent-hoverblock{
   color:transparent;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
   transform: translateY(0em);
}
 
.transparent-hoverblock:hover,.transparent-hoverblock:focus{
   color: rgb(var(--white-monochrome));
   box-shadow: 0px 4px 20px 0 rgba(var(--pale-gray-monochrome), .25);
   transform: translateY(-.3em);
}
 
.white-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: box-shadow 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out;
   transform: translateY(0em);
}
 
.white-hoverblock:hover,.white-hoverblock:focus{
 box-shadow: 0px 4px 20px 0 rgba(var(--white-monochrome), .25);
 color: rgb(var(--black-monochrome));
   background-color: rgb(var(--white-monochrome));
   transform: translateY(-.3em);
}
 
.inset-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: box-shadow 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out;
   transform: translateY(0em);
}
 
.inset-hoverblock:hover,.hoverblock:focus{
 box-shadow: inset 0px 4px 20px 0 rgba(var(--pale-gray-monochrome), .25);
    background-color: rgb(var(--black-monochrome));
   transform: translateY(.3em);
}
 
.shadow-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
   box-shadow: 4px 4px 0 0 rgba(var(--light-gray-monochrome));
    border: 0.3rem solid rgba(var(--light-gray-monochrome));
}
 
.shadow-hoverblock:hover,.shadow-hoverblock:focus{
   color: rgb(var(--white-monochrome));
   box-shadow: 20px 20px 0px 0 rgba(var(--light-gray-monochrome));
   transform: translate(-.3em);
}

脚注

1. 这是一个脚注！

2. 注