对高亮复习插件的优化

隐藏按钮优化

对”高亮复习“插件中“隐藏挖空”按钮进行了优化，使得“隐藏”的动作更加符合直觉。

插件作者 Achuan-2

优化前 👇

优化后 👇

主要变动

把按钮的宽和高都设置成了 16px（之前是 20）

background-color: var(--b3-theme-error);

👇

background-color: var(--b3-theme-hide: #999999); /* 这里设置成灰色 */

.cloze-hide-btn::before {
content: "×";👈
font-weight: bold;
}

👇

.cloze-hide-btn::before {
content: "-";👈
font-weight: bold;
}

/* ------------------ 高亮挖空 ----------------------- */
/* 高亮挖空的样式 */
.b3-typography mark,
.b3-typography span[data-type~=mark],
.protyle-wysiwyg mark,
.protyle-wysiwyg span[data-type~='mark'] {
color: transparent !important;
transition: color 0.5s ease-in-out;
}
/* 悬浮高亮挖空显示文字的样式 */
.b3-typography mark:hover,
.b3-typography span[data-type~=mark]:hover,
.protyle-wysiwyg mark:hover,
.protyle-wysiwyg span[data-type~='mark']:hover {
color: var(--b3-protyle-inline-mark-color) !important;
transition: color 0.5s ease-in-out;
}

/* ------------------ 挖空块 ----------------------- */

.protyle-wysiwyg [data-node-id][custom-hide="true"]{
border: 2px dashed  rgba(92, 135, 138, 0.322) !important;
background-color: rgba(92, 135, 138, 0.222);
background-image: -webkit-gradient(linear,
0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent),
to(transparent));
background-size: 10px 10px;
border: 2px dashed  rgba(92, 135, 138, 0.322) !important;
border-radius: 0.5em;
transform: perspective(1000px) rotateX(180deg);
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out, border-color 0.6s ease-in-out, background-image 0.6s ease-in-out;
cursor: pointer;
position: relative;
}

.protyle-wysiwyg [data-node-id][custom-hide="true"] *{
opacity: 0;
transition: opacity 0.6s ease-in-out;
}

.protyle-wysiwyg [data-node-id][custom-hide="true"].cloze-revealed{
transform: perspective(1000px) rotateX(0deg);
background-color: transparent;
background-image: none;
border-color: var(--b3-theme-on-background);
cursor: default;
}

.protyle-wysiwyg [data-node-id][custom-hide="true"].cloze-revealed * {
opacity: 1;
}

.protyle-wysiwyg .protyle-wysiwyg__embed [data-node-id][custom-hide="true"].cloze-revealed{
transform: perspective(1000px) rotateX(0deg);
background-color: transparent;
background-image: none;
border-color: var(--b3-theme-on-background);

}

.protyle-wysiwyg .protyle-wysiwyg__embed [data-node-id][custom-hide="true"].cloze-revealed * {
opacity: 1;
}

/* 隐藏按钮样式 */
.cloze-hide-btn {
position: absolute;
top: -8px;
right: -8px;
width: 16px;
height: 16px;
background-color: var(--b3-theme-hide: #999999); /* 这里设置成灰色 */
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0.8;
transition: opacity 0.2s ease;
}

.cloze-hide-btn:hover {
opacity: 1;
transform: scale(1.1);
}

.cloze-hide-btn::before {
content: "-";
font-weight: bold;
}

我的疑问

1. 这段代码中哪一段可以实现”鼠标悬浮在按钮上，显示”隐藏挖空““这个功能？
2. 发帖时最后插入代码块，想要在下面继续写文字，无法直接通过点击下面的空行来创建新行，我采用的方法是：选中代码块中的其中一行，一直按”↓“才在下面创建了新行。几个问题如果有知道的 uu 希望回复一下，感谢！

致谢

感谢 @Achuan-2 作者，也感谢他一直以来的分享，希望大家多多支持优质创作者！