我把笔记属性yaml改成了一个悬浮卡片

Aordian · 2025 年7 月 31 日 04:51

笔记属性显示在第一行看起来很难受，我把它做成了一个悬浮卡片，把鼠标悬停在右上角的触发小球就可以优雅的展开内容卡片了。

Aordian · 2025 年7 月 31 日 04:52

把鼠标移开卡片区域就是这样
屏幕截图 2025-07-31 125206

被水淹没 · 2025 年7 月 31 日 06:17

好想法，我是放在右边栏方便随时查看

（ob的功能，设置-编辑器-属性隐藏，设置-核心插件-属性列表打开）

jsye · 2025 年7 月 31 日 09:28

这个是怎么设置的还是说用了什么插件呢

Aordian · 2025 年7 月 31 日 13:01

现在发现了一个问题，就是在选择列表的时候卡片会消失，正在修复中。。。

Aordian · 2025 年7 月 31 日 13:03

纯css代码。
【【obsidian笔记属性】把笔记属性换成右上角悬停小球，优雅】【obsidian笔记属性】把笔记属性换成右上角悬停小球，优雅_哔哩哔哩_bilibili

PlayerMiller · 2025 年7 月 31 日 13:15

选择列表的时候卡片会消失

纯 CSS 咩。

这里有前例悬浮Yaml区的CSS，使Front matter悬浮显示看样子能解决你这个问题，你可以参考看看。

自己第一次用纯 CSS 设悬浮的，基本上都会遇到这个问题，也不是一回两回了。

Aordian · 2025 年7 月 31 日 14:03

这是怎么办到的？能分享一下吗?

被水淹没 · 2025 年8 月 1 日 02:38

（ob的功能，设置-编辑器-属性隐藏，设置-核心插件-属性列表打开）

青柠 · 2025 年8 月 1 日 07:56

obsidian有自带的设置可以放到侧边栏

Aordian · 2025 年8 月 3 日 16:53

/* 确保容器正确约束 */
.workspace-leaf-content {
  position: relative;
  overflow: visible; /* 允许卡片展开 */
}

.metadata-container {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  z-index: 100;
  overflow: hidden;
  background: linear-gradient(135deg, var(--interactive-accent), #6C5CE7);
  border-radius: 50%;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.1),
    0 0 0 1px var(--background-modifier-border),
    inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  transition:
    width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 0.4s ease 0.1s;
}

.metadata-content {
  opacity: 0;
  padding: 0;
  width: 350px;
  height: 0;
  transition:
    opacity 0.3s ease 0.15s,
    padding 0.3s ease 0.15s,
    height 0.3s ease 0.15s;
  pointer-events: none;
  position: relative;
  background: var(--background-primary);
  border-radius: 12px;
}

/* 增强的悬停和焦点状态 */
.metadata-container:hover,
.metadata-container:focus-within,
.metadata-container.is-active {
  width: 350px;
  height: auto;
  min-height: 150px;
  border-radius: 12px;
  transition-delay: 0s;
}

.metadata-container:hover .metadata-content,
.metadata-container:focus-within .metadata-content,
.metadata-container.is-active .metadata-content {
  opacity: 1;
  padding: 16px;
  height: auto;
  pointer-events: auto;
}

/* 增加更大的hover保护区域 */
.metadata-container::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
  pointer-events: auto;
}

/* 触发指示器 */
.metadata-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 101;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::before {
    content: "i";
    font-size: 16px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
  }
}

.metadata-container:hover .metadata-trigger,
.metadata-container:focus-within .metadata-trigger,
.metadata-container.is-active .metadata-trigger {
  opacity: 0;
  transform: scale(1.5) rotate(90deg);
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 确保子元素不会破坏hover状态 */
.metadata-content * {
  pointer-events: auto;
}

/* 添加延迟收缩 */
.metadata-container {
  transition-delay: 0s;
}

.metadata-container:not(:hover):not(:focus-within):not(.is-active) {
  transition-delay: 0.2s; /* 200ms延迟收缩 */
}

Aordian · 2025 年8 月 4 日 04:15

已经修复了动画不流畅和鬼畜卡顿的问题，应该是完整版了。

/* 确保容器正确约束 */
.workspace-leaf-content {
  position: relative;
  overflow: visible; /* 允许卡片展开 */
}

.metadata-container {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;/*小球的宽度*/
  height: 36px;/*小球的高度*/
  z-index: 100;
  overflow: hidden;
  background: linear-gradient(135deg, var(--interactive-accent), #6C5CE7);
  border-radius: 13%;/*悬浮触发器的圆角*/
  box-shadow:/*背景颜色*/
    0 3px 10px rgba(0,0,0,0.1),
    0 0 0 1px var(--background-modifier-border),
    inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  transition:
    width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),/*卡片展开瞬间的宽度变化速度*/
    height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),/*卡片展开瞬间的高度变化速度*/
    border-radius 0.4s ease 0.1s;/*卡片展开瞬间的圆角变化*/
}

.metadata-content {
  opacity: 0;
  padding: 0;
  width: 360px;/*卡片内容的宽度*/
  height: 0;
  transition:
    opacity 0.3s ease 0.15s,
    padding 0.3s ease 0.15s,
    height 0.3s ease 0.15s;
  pointer-events: none;
  position: relative;
  background: var(--background-primary);
  border-radius: 12px;/*卡片内容的圆角*/
}

/* 增强的悬停和焦点状态；卡片的尺寸，注意不是内容的尺寸 */
.metadata-container:hover,
.metadata-container:focus-within,
.metadata-container.is-active {
  width: 368px;/*卡片的宽度*/
  height: auto;/*卡片高度自动*/
  min-height: 150px;
  border-radius: 13px;/*卡片的圆角*/
  transition-delay: 0s;
}

.metadata-container:hover .metadata-content,
.metadata-container:focus-within .metadata-content,
.metadata-container.is-active .metadata-content {
  opacity: 1;
  padding: 16px;
  height: auto;
  pointer-events: auto;
}

/* 增加更大的hover保护区域 */
.metadata-container::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
  pointer-events: auto;
}

/* 触发指示器 */
.metadata-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  z-index: 101;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::before {
    content: "i";
    font-size: 16px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
  }
}

.metadata-container:hover .metadata-trigger,
.metadata-container:focus-within .metadata-trigger,
.metadata-container.is-active .metadata-trigger {
  opacity: 0;
  transform: scale(1.5) rotate(90deg);
  transition:
    opacity 0.1s ease, 
    transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 确保子元素不会破坏hover状态 */
.metadata-content * {
  pointer-events: auto;
}

/* 添加延迟收缩 */
.metadata-container {
  transition-delay: 0s;
}

.metadata-container:not(:hover):not(:focus-within):not(.is-active) {
  transition-delay: 0.005s; /* 极短的延迟收缩：这个值高了会让你的卡片收缩时慢半拍 */
}

Livx · 2025 年8 月 5 日 05:39

可以问一下笔记属性中的英文字体是什么吗？

青柠 · 2025 年8 月 5 日 09:12

majw · 2025 年8 月 12 日 05:17

针对最新版反馈几个问题：

悬浮球上面的“笔”字能不能改成一个可自定义的图标？或者悬浮球本身就直接用一个图标
使用了这个CSS片段之后，侧边栏中的属性也会缩成悬浮球，能不能让侧边栏中的YAML属性正常显示？
如图，白色框左侧和下边的边距都是正常的，但右边却没有边距，甚至超出了外框
如图，建议把“笔记属性”的颜色改成白色，或者深褐色，黑色之类，否则看不清楚

xyxxyx · 2025 年8 月 18 日 13:01

可以请问一下笔记属性中的日期怎么改成年月日吗搜了好多帖子和视频，也研究了obsidian的设置好久……改来改去还是日月年