[css] 固定文档头

个人配合「层级导航」插件用于快速切换邻近文档。

用「（伪）文档面包屑」插件也行，写都写了就顺便发一下

效果 belike，按需添加隐藏标题、背景图、面包屑相关片段

.protyle-top{
    /* 隐藏题头图、背景相关元素 */
    .protyle-background
    {display:none!important}
}
/* 聚焦显示标题 */
.protyle-title{
  /* display:none; */
  opacity: 0;
    transition: opacity 0.3s ease;
    &:hover {
        opacity: 1;
    }
}
/* 当前文档面包屑浮动显示 */
.layout-tab-container .protyle-breadcrumb {
    opacity: 0;
    transition: opacity 0.3s ease;
    &:hover {
        opacity: 1;
    }
}
:root[data-theme-mode="dark"]{
  --white_level: 0.01;
}
:root[data-theme-mode="light"]{
  --white_level: 0.2;
}
.protyle-top{
    position: -webkit-sticky; 
    position: sticky;
    top: 0; 
    z-index: 3;
    padding: 4px;
   /* 移除到下面的内容以只是固定表头 */
    opacity: 0;
    transition: background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
    background-color: transparent;
    backdrop-filter: blur(0);
    &:hover {
        opacity: 1;
        background-color: rgba(255, 255, 255, var(--white_level)); 
        backdrop-filter: blur(10px); 
    }
   /* 移除到上面的内容以只是固定表头 */
}