[css] 优化文档题头图

我总感觉文档题头图和文档标题之间空着很大一行，仔细一看，原来有“添加标签”和“添加题头图”这两个操作按钮在那里，只读时不展示，占仍然占位，编辑时按钮会出来。

我感觉很不好，我用 CSS 将这占用的空行取消，编辑状态下需要使用这两个按钮时，在题头图的右侧区域显示，浮现在头图上面即可。

实践了一下，感觉很好，因为文档头部的位置没必要留那么大的空间，会压缩视野，编辑文档头图的时机小，它不是个强需求，许多时候可能文档创建的时候编辑一下，中途偶尔改改。所以将两个操作按钮浮在图上靠右侧放着，是理想状态。

知道了这个来龙去脉，想使用吗？下面的代码粘到设置中的外观中的 CSS 下代码片段即可：

/* 调整题头图容器 */
.protyle-background {
    position: relative; /* 设置相对定位，方便子元素绝对定位 */
}

/* 调整题头图图片 */
.protyle-background__img {
    width: 100%; /* 宽度自适应容器 */
    max-height: 200px; /* 限制最大高度 */
    height: auto; /* 保持宽高比 */
    object-fit: cover; /* 保持图片比例并覆盖容器 */
}

/* 默认隐藏操作按钮 */
.protyle-background__action {
    display: none; /* 默认隐藏 */
}

/* 编辑状态下显示操作按钮 */
.protyle-background--enable .protyle-background__action {
    display: block; /* 显示操作按钮 */
    position: absolute; /* 绝对定位，浮在图片上层 */
    bottom: 10px; /* 距离底部 10px */
    right: 10px; /* 距离右侧 10px */
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    padding: 5px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease; /* 添加淡入淡出效果 */
}

/* 编辑状态下，鼠标悬停或聚焦时显示操作按钮 */
.protyle-background--enable:hover .protyle-background__action,
.protyle-background--enable:focus-within .protyle-background__action {
    opacity: 1; /* 显示操作按钮 */
}

/* 只读状态下隐藏操作按钮 */
.protyle-background:not(.protyle-background--enable) .protyle-background__action {
    display: none !important; /* 强制隐藏 */
}

/* 为小屏幕设备优化题头图 */
@media (max-width: 768px) {
    .protyle-background__img {
        max-height: 150px; /* 在小屏幕上进一步减小高度 */
    }
}
​