Obsidian 学习笔记

Appearance

Callout 标注框美化 ​

Callout 是 Obsidian 中最常用的内容标注方式。通过 CSS 可以自定义 Callout 的颜色、圆角、图标和动画。

基础样式调整 ​

css
/* 全局 Callout 样式 */
.callout {
  border-radius: 8px;
  margin: 1em 0;
  padding: 0.8em 1em;
  border-left: 4px solid;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* 标题样式 */
.callout-title {
  font-weight: 600;
  font-size: 0.95em;
}

/* 内容样式 */
.callout-content {
  margin-top: 0.5em;
  font-size: 0.95em;
}

自定义颜色 ​

css
/* 信息 - 蓝色 */
.callout[data-callout="info"] {
  --callout-color: 59, 130, 246;
  --callout-bg: rgba(59, 130, 246, 0.08);
}

/* 提示 - 绿色 */
.callout[data-callout="tip"] {
  --callout-color: 34, 197, 94;
  --callout-bg: rgba(34, 197, 94, 0.08);
}

/* 警告 - 黄色 */
.callout[data-callout="warning"] {
  --callout-color: 245, 158, 11;
  --callout-bg: rgba(245, 158, 11, 0.08);
}

/* 错误 - 红色 */
.callout[data-callout="danger"],
.callout[data-callout="error"] {
  --callout-color: 239, 68, 68;
  --callout-bg: rgba(239, 68, 68, 0.08);
}

/* 成功 - 绿色 */
.callout[data-callout="success"] {
  --callout-color: 22, 163, 74;
  --callout-bg: rgba(22, 163, 74, 0.08);
}

/* 问题 - 橙色 */
.callout[data-callout="question"] {
  --callout-color: 249, 115, 22;
  --callout-bg: rgba(249, 115, 22, 0.08);
}

/* 引用 - 紫色 */
.callout[data-callout="quote"] {
  --callout-color: 124, 58, 237;
  --callout-bg: rgba(124, 58, 237, 0.08);
}

/* 示例 - 青色 */
.callout[data-callout="example"] {
  --callout-color: 6, 182, 212;
  --callout-bg: rgba(6, 182, 212, 0.08);
}

自定义类型 ​

css
/* 定义框 */
.callout[data-callout="definition"] {
  --callout-color: 139, 92, 246;
  --callout-icon: lucide-book-open;
}

/* 定理框 */
.callout[data-callout="theorem"] {
  --callout-color: 59, 130, 246;
  --callout-icon: lucide-lightbulb;
}

/* 框架框 */
.callout[data-callout="framework"] {
  --callout-color: 168, 85, 247;
  --callout-icon: lucide-layout-template;
}

/* 使用方法 */

使用：

markdown
> [!definition] 定义
> 这是一个自定义的定义 Callout。

> [!theorem] 定理
> 这是一个自定义的定理 Callout。

折叠样式 ​

css
/* 可折叠 Callout */
.callout.is-collapsible {
  cursor: pointer;
}

/* 折叠指示器 */
.callout .callout-fold {
  transition: transform 0.2s ease;
}

.callout.is-collapsed .callout-fold {
  transform: rotate(-90deg);
}

/* 折叠时隐藏内容 */
.callout.is-collapsed .callout-content {
  display: none;
}

花式效果 ​

左边框渐变 ​

css
/* Callout 左边框渐变 */
.callout {
  border-left: 4px solid transparent;
  border-image: linear-gradient(to bottom, var(--callout-color), transparent) 1;
}

毛玻璃效果 ​

css
/* 半透明毛玻璃 */
.callout {
  backdrop-filter: blur(8px);
  background: rgba(var(--callout-color), 0.05) !important;
  border: 1px solid rgba(var(--callout-color), 0.2);
}

相关内容 ​