如图所示，悬浮Yaml区的CSS，使Front matter悬浮显示。可根据自己的需求，调整参数
/* =================== 浮动式YAML元数据 =================== */
/* 整体容器样式 - 修复悬停区域问题 */
.metadata-container {
position: absolute; /* 绝对定位脱离文档流 */
top: 5%; /* 距离顶部5%位置 */
left: 88%; /* 默认靠右显示(距离左侧) */
min-width: 59%; /* 最小宽度 */
max-width: 59%; /* 最大宽度 */
padding: 1px 1px; /* 内边距 */
border: 1px solid transparent; /* 透明边框(为悬停效果预留) */
border-radius: var(--radius-m); /* 使用主题定义的圆角 */
font-size: var(--font-ui-big); /* 使用主题大字体 */
z-index: 500; /* 确保悬浮在其他内容上方 */
transition: all 0.4s ease; /* 所有属性添加0.2秒渐变效果 */
background-color: hsla(var(--color-accent-hsl), 0.01); /* 半透明背景 */
backdrop-filter: blur(10px); /* 背景模糊效果 */
/* 关键修复：确保容器包含所有子元素 */
overflow: visible !important; /* 允许内容溢出容器 */
contain: layout style paint !important; /* 优化渲染性能 */
}
/* 悬停状态 - 包含下拉菜单区域 */
.metadata-container:hover,
.metadata-container:focus-within, /* 当内部元素获得焦点时 */
.metadata-container:focus { /* 容器本身获得焦点时 */
background-color: hsla(var(--color-accent-hsl), 0.01); /* 保持半透明背景 */
border: 1px solid var(--background-modifier-border); /* 显示边框 */
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 添加阴影 */
left: 40%; /* 悬停时左移，展开显示位置 */
}
/* 标题样式 */
.metadata-properties-title {
display: block; /* 块级显示 */
padding: 1px 20px; /* 内边距 */
margin: 0; /* 外边距清零 */
font-weight: 600; /* 加粗字体 */
font-size: var(--font-smaller); /* 较小字体 */
color: var(--text-accent); /* 使用主题强调色 */
border: 1px solid hsla(var(--color-accent-hsl), 0.2); /* 半透明边框 */
background-color: hsla(var(--color-accent-hsl), 0.1); /* 半透明背景 */
border-radius: var(--radius-m); /* 圆角 */
transition: all 0.2s ease; /* 过渡动画 */
cursor: default; /* 默认光标(非可点击) */
width: fit-content; /* 宽度自适应内容 */
}
/* 悬停时的标题样式 */
.metadata-container:hover .metadata-properties-title,
.metadata-container:focus .metadata-properties-title,
.metadata-container:focus-within .metadata-properties-title {
border: none; /* 移除边框 */
background-color: transparent; /* 透明背景 */
color: var(--text-normal); /* 使用正常文本颜色 */
padding: 0; /* 移除内边距 */
margin-bottom: 12px; /* 底部外边距 */
}
/* 标题前的文本 */
.metadata-container:hover .metadata-properties-title::before,
.metadata-container:focus .metadata-properties-title::before,
.metadata-container:focus-within .metadata-properties-title::before {
content: "属性: "; /* 添加前缀文本 */
font-weight: normal; /* 正常字重 */
color: var(--text-faint); /* 使用弱化文本色 */
}
/* 内容区域默认隐藏 */
.metadata-content {
display: none; /* 初始隐藏内容 */
position: relative; /* 相对定位(为子元素定位参考) */
}
/* 悬停时显示内容区域 */
.metadata-container:hover .metadata-content,
.metadata-container:focus .metadata-content,
.metadata-container:focus-within .metadata-content {
display: block; /* 显示内容区域 */
}
/* 属性项样式 */
.metadata-property {
display: flex; /* 弹性布局 */
padding: 8px 0; /* 垂直内边距 */
border-bottom: 1px solid var(--background-modifier-border); /* 底部分隔线 */
transition: all 0.2s ease; /* 过渡动画 */
position: relative; /* 相对定位 */
}
.metadata-property:last-child {
border-bottom: none; /* 最后一项无底部分隔线 */
}
.metadata-property:hover {
background-color: hsla(var(--color-accent-hsl), 0.05); /* 悬停背景色 */
border-radius: var(--radius-s); /* 圆角 */
padding: 8px; /* 增加内边距 */
margin: 0 -8px; /* 负外边距扩展悬停区域 */
}
.metadata-property-key {
min-width: 100px; /* 键名最小宽度 */
font-weight: 500; /* 中等字重 */
font-size: var(--font-big); /* 大字体 */
color: var(--text-normal); /* 正常文本色 */
}
.metadata-property-key::after {
content: ':'; /* 添加冒号后缀 */
margin-right: 8px; /* 右侧间距 */
color: var(--text-faint); /* 弱化文本色 */
}
.metadata-property-value {
flex: 1; /* 占据剩余空间 */
font-size: var(--font-big); /* 大字体 */
}
/* 标签样式 */
.multi-select-pill {
display: inline-block; /* 行内块显示 */
background: hsla(var(--color-accent-hsl), 0.1); /* 半透明背景 */
color: var(--color-accent); /* 强调色文本 */
border-radius: var(--radius-s); /* 小圆角 */
padding: 3px 8px; /* 内边距 */
margin: 2px 4px 2px 0; /* 外边距 */
font-size: var(--font-big); /* 大字体 */
border: 1px solid hsla(var(--color-accent-hsl), 0.3); /* 半透明边框 */
}
/* 下拉菜单容器 */
.metadata-content .multi-select-container {
position: relative; /* 相对定位 */
z-index: 600; /* 高于容器层级 */
display: inline-block; /* 行内块显示 */
}
.metadata-content .multi-select-dropdown {
position: absolute; /* 绝对定位 */
top: 100%; /* 从容器底部开始 */
left: 0; /* 左侧对齐 */
z-index: 700; /* 最高层级 */
width: auto; /* 自适应宽度 */
min-width: 100%; /* 最小宽度100% */
background: var(--background-primary); /* 使用主题背景色 */
border: 1px solid var(--background-modifier-border); /* 边框 */
border-radius: var(--radius-m); /* 圆角 */
box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 阴影 */
margin-top: 4px; /* 顶部间距 */
}
/* 确保下拉菜单被视为容器的一部分 */
.metadata-container .multi-select-dropdown {
position: absolute; /* 绝对定位 */
top: 100%; /* 从容器底部开始 */
left: 0; /* 左侧对齐 */
}
/* 防止下拉菜单关闭 */
.metadata-container:has(.multi-select-dropdown:hover) {
left: 40% !important; /* 保持展开位置 */
background-color: hsla(var(--color-accent-hsl), 0.01) !important; /* 背景 */
border: 1px solid var(--background-modifier-border) !important; /* 边框 */
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; /* 阴影 */
}
.metadata-container:has(.multi-select-dropdown:hover) .metadata-content {
display: block !important; /* 保持内容显示 */
}
/* 使用:focus-within保持状态 */
.metadata-container:has(.multi-select-dropdown:focus-within) {
left: 40% !important; /* 保持展开位置 */
background-color: hsla(var(--color-accent-hsl), 0.01) !important; /* 背景 */
border: 1px solid var(--background-modifier-border) !important; /* 边框 */
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; /* 阴影 */
}
.metadata-container:has(.multi-select-dropdown:focus-within) .metadata-content {
display: block !important; /* 保持内容显示 */
}
