本站基于CSS的组件

写在前面

众所周知，HTML中有一个叫做 class 的标签，被广泛的使用于 <div> 、 <span> 等元素。
而 class 这个属性的作用，则是为元素提供一个或多个类名，这些类名可以在CSS中引用，以添加样式，或者在JavaScript中引用，以操纵元素。

当然……你也看到了页面的标题，这就说明这整个页面列出的 class="xxx" 都是和CSS关联的。

也就是这样了……所以说……在下面找到自己想使用的组件吧……以及mr是会将CSS源码和组件放在一起的喵~

该页面的CSS组件顺序按照“自定义CSS样式”内顺序进行排列。

全站默哀

该组件仅在国家出现重大伤亡事件、国家公祭日、网站成员逝世等事件发生后启用。
启用后将持续24小时后关闭（部分情况下可能会持续一周）。

关闭状态

/* 全站默哀
    html {
    filter: grayscale(100%);
    }
 */

开启状态

/* 全站默哀 */
    html {
    filter: grayscale(100%);
    }

社交媒体方块

由于此组件不适用于正常文章中的使用，故仅展示代码。

 /* 社交媒体CSS */
    .social-media {
        border: 2px solid #ccc; /* 边框样式 */
        padding: 2px; /* 内边距 */
        border-radius: 5px; /* 边框圆角 */
    }

    .social-media ul {
        list-style: none; /* 去除列表样式 */
        padding: 0;
    }

    .social-media ul li {
        display: inline-block; /* 内联块元素 */
        margin-right: 10px; /* 社交媒体图标之间的间距 */
    }

    .social-media ul li:last-child {
        margin-right: 0; /* 最后一个社交媒体图标无间距 */
    }

    .interactive-channels {
        border: 2px solid #ccc; /* 设置边框宽度和颜色 */
        padding: 2px; /* 可选：添加内边距以增加内容与边框之间的间距 */
        border-radius: 5px; /* 边框圆角 */
        margin-top: 2px;
    }

    .interactive-channels h3 {
        margin-top: 0; /* 可选：如果你想要标题紧贴边框，则可以去除顶部外边距 */
    }

    .interactive-channels ul {
        list-style: none; /* 去除列表样式 */
        padding: 0;
    }

文字黑幕

 /* 黑幕CSS */
.text-mask{
    color:transparent;
    background:#444;
    transition:all 0.2s;
}
#article-container .text-mask *{
    color:transparent;
    transition:all 0.2s;
}
.text-mask:hover{
    color:unset;
    background:unset;
    transition:all 0.2s;
}
.text-mask:hover *{
    color:unset;
    transition:all 0.2s;
}
#article-container .text-mask:hover a{
    color:#49b1f5;
    transition:all 0.2s;
}

这是一个可以用黑条来盖住文字，但是当鼠标/手指移到黑条上，黑条就会显出字来的小组件。
适用于： <span>

使用示例

不要这样对待山雨……<span class="text-mask">因为…山雨…会坏掉的♡……</span>

<b>粗体测试，<span class="text-mask">这行文字使用了粗体。</span></b>
<i>斜体测试，<span class="text-mask">这行文字使用了斜体。</span></i>
链接测试，<span class="text-mask">这行文字里面<a href="https://mount-rain.link/">存有链接</a>。</span>

重要备注

在使用此组件时，发现问题：

• 当 <u> 与 <del> 在 <span class="text-mask"> 外放置时，黑幕内的下划线&删除线正常显示
• 当 <u> 与 <del> 在 <span class="text-mask"> 内放置时，黑幕内的所有内容不显示（变为透明）

<u><span class="text-mask">下划线正常，内容正常</span></u>
<del><span class="text-mask">删除线正常，内容正常</span></del>

<span class="text-mask"><u>下划线不显示，内容不显示</u></span>
<span class="text-mask"><del>删除线不显示，内容不显示</del></span>

所以，请各位用户避免在使用此组件同时使用下划线与删除线，若必须使用，请放在span外面用。
此问题不影响粗体与斜体在黑幕中的表现，只影响下划线、删除线。

文字模糊

/* 文字模糊CSS */
.text-blur {
    filter: blur(5px);
    transition: all 0.3s ease;
    color: transparent;
    text-shadow: 0 0 8px rgba(0,0,0,0.5);
}

#article-container .text-blur * {
    transition: all 0.3s ease;
    color: transparent;
}

.text-blur:hover {
    filter: blur(0);
    color: unset;
    text-shadow: none;
    transition: all 0.3s ease;
}

.text-blur:hover * {
    filter: blur(0);
    color: unset;
    text-shadow: none;
    transition: all 0.3s ease;
}

#article-container .text-blur:hover a {
    color: #49b1f5;
    transition: all 0.3s ease;
}

这是一个可以用模糊效果盖住文字，但是当鼠标/手指移到文字上，文字就会显示出来的小组件。
适用于： <span>

使用示例

不要这样对待山雨……<span class="text-blur">因为…山雨…会坏掉的♡……</span>

<b>粗体测试，<span class="text-blur">这行文字使用了粗体。</span></b>
<i>斜体测试，<span class="text-blur">这行文字使用了斜体。</span></i>
链接测试，<span class="text-blur">这行文字里面<a href="https://mount-rain.link/">存有链接</a>。</span>

重要备注

在使用此组件时，发现问题：

• 当 <u> 与 <del> 在 <span class="text-blur"> 外放置时，模糊内的下划线&删除线正常显示
• 当 <u> 与 <del> 在 <span class="text-blur"> 内放置时，模糊内的所有内容不显示（变为透明）

<u><span class="text-blur">下划线正常，内容正常</span></u>
<del><span class="text-blur">删除线正常，内容正常</span></del>

<span class="text-blur"><u>下划线不显示，内容不显示</u></span>
<span class="text-blur"><del>删除线不显示，内容不显示</del></span>

所以，请各位用户避免在使用此组件同时使用下划线与删除线，若必须使用，请放在span外面用。
此问题不影响粗体与斜体在模糊中的表现，只影响下划线、删除线。

备忘条

 /* 备忘条CSS */
.memo-block {
    background-color: #FFFFE0; /* 黄色背景颜色 */
    padding: 15px; /* 内边距 */
    margin: 20px auto; /* 外边距，居中对齐 */
    border-radius: 4px; /* 圆角边框 */
    font-family: Arial, sans-serif; /* 字体 */
    font-size: 14px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    max-width: 600px; /* 最大宽度 */
    width: 90%; /* 宽度设置为页面宽度的90% */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

.memo-block .memo-title {
    font-weight: bold; /* 标题加粗 */
    margin-bottom: 10px; /* 标题与内容的间距 */
    color: #000000; /* 标题颜色 */
    text-align: center; /* 标题居中 */
}

.memo-block .memo-content {
    line-height: 1.6; /* 行高 */
}

 /* 红色备忘条CSS */
.memo-block-red {
    background-color: #fadbd8; /* 浅红色背景颜色 */
    padding: 15px; /* 内边距 */
    margin: 20px auto; /* 外边距，居中对齐 */
    border-radius: 4px; /* 圆角边框 */
    font-family: Arial, sans-serif; /* 字体 */
    font-size: 14px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    max-width: 600px; /* 最大宽度 */
    width: 90%; /* 宽度设置为页面宽度的90% */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

.memo-block-red .memo-title {
    font-weight: bold; /* 标题加粗 */
    margin-bottom: 10px; /* 标题与内容的间距 */
    color: #000000; /* 红色标题颜色 */
    text-align: center; /* 标题居中 */
}

.memo-block-red .memo-content {
    line-height: 1.6; /* 行高 */
}

这个模块可以在文章或者设定中作为提示或者补充出现，比butterfly版式的note更加适合文章写作。
适用于： <div>

使用示例

<div class="memo-block">
    <div class="memo-title">来自 山雨的湖边小屋 的备忘</div>
    <div class="memo-content">
        <p>如你所见，这是一个备忘块。</p>
        <p>可以像这样<br>换行，也可以分p展示内容。</p>
    </div>
</div>

<div class="memo-block-red">
    <div class="memo-title">来自 山雨的湖边小屋 的重要备忘</div>
    <div class="memo-content">
        <p>如你所见，这是一个重要备忘块。</p>
        <p>可以像这样<br>换行，也可以分p展示内容。</p>
    </div>
</div>

示亡号

span.died {
    border-style: solid;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

示亡号，也叫示殁号，其形式是一个黑色长方框套在已经去世的人的姓名的外面，表示当前文字所表述的时间环境下此人已经逝世。
——摘自Wikipedia

示亡号套在姓名的外面，标明当前表述的时间环境下此人已经逝世。常见于作品发表时的署名、被授予荣誉奖项等场合，若其成员于此不久前逝世，可在姓名上加示亡号。此外，示亡号通常仅标识近期逝世的人物，对于当前表述的时间环境而言，若对应人物逝世已久，则一般不用示亡号。
——摘自Wikipedia

该组件仅适用于 <span>

使用示例

以下文字仅用于示例，没有实际含义。
本文章由<span class="died">Tortoise God</span>创作，Mount Rain做出部分改动。遵循CC BY-SA 4.0协议。