customization-guide > CSS 结构和样式指南
CSS 结构和样式指南
Notionpresso 提供了灵活且可扩展的 CSS 结构。本节将介绍 CSS 变量系统、主要样式设计要点以及缩进应用原理。
CSS 变量系统
Notionpresso 使用 CSS 变量定义全局样式。这使得主题更改和整体样式调整变得容易。
主要的 CSS 变量如下:
.notion {
--notion-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
"Segoe UI Emoji", "Segoe UI Symbol";
--notion-max-width: 720px;
--notion-header-height: 45px;
--notion-indent: 27px;
/* 颜色变量 */
--fg-color: rgb(55, 53, 47);
--fg-color-0: rgba(55, 53, 47, 0.09);
--fg-color-1: rgba(55, 53, 47, 0.16);
--fg-color-2: rgba(55, 53, 47, 0.4);
--fg-color-3: rgba(55, 53, 47, 0.6);
--fg-color-4: #000;
--fg-color-5: rgb(233, 233, 231);
--fg-color-6: rgba(55, 53, 47, 0.8);
--fg-color-icon: var(--fg-color);
--bg-color: #fff;
--bg-color-0: rgba(135, 131, 120, 0.15);
--bg-color-1: rgb(247, 246, 243);
--bg-color-2: rgba(135, 131, 120, 0.15);
--select-color-0: rgb(46, 170, 220);
--select-color-1: rgba(35, 131, 226, 0.28);
--select-color-2: #d9eff8;
}
通过重新定义这些变量,可以轻松更改整体样式。
主要样式设计要点
-
类命名规则: 所有类都以
notion-
开头。这可以防止样式冲突。例如:
.notion-block
,.notion-h1
,.notion-toggle
-
块级样式: 所有块级元素都应用
notion-block
类。.notion-block { display: block; }
-
颜色应用: 颜色通过 CSS 变量应用。
.notion-text { color: var(--fg-color); }
-
响应式设计: 使用
--notion-max-width
变量实现响应式设计。.notion-body { width: 100%; max-width: var(--notion-max-width); margin: 0 auto; }
缩进应用原理
Notionpresso 使用递归结构实现缩进。这通过 CSS 处理如下:
.notion-block > .notion-block {
margin-left: var(--notion-indent);
}
.notion-block > .notion-display-contents > .notion-block {
margin-left: var(--notion-indent);
}
这些 CSS 规则自动应用于嵌套块。可以通过调整 --notion-indent
变量轻松更改缩进程度。
暗模式和自定义主题
Notionpresso 默认支持暗模式。暗模式通过以下方式实现:
[data-theme="dark"] .notion {
--fg-color: rgba(255, 255, 255, 0.9);
--bg-color: #2f3437;
/* 其他暗模式相关变量... */
}
此外,可以轻松应用自定义主题。使用 data-theme
属性应用所需的主题:
<Notion data-theme="custom">{/* Notion 内容 */}</Notion>
并且可以在 CSS 中定义样式如下:
.notion[data-theme="custom"] {
--fg-color: #333;
--bg-color: #f4f4f4;
/* 其他自定义主题相关变量... */
}
使用这种方法,可以通过选择器优先级轻松覆盖默认样式。
样式定制示例
-
全局字体更改:
.notion[data-theme="custom"] { --notion-font: "Roboto", sans-serif; }
-
标题样式更改:
.notion[data-theme="custom"] .notion-h1 { font-size: 2.5em; color: var(--select-color-0); border-bottom: 2px solid var(--fg-color-1); }
-
缩进调整:
.notion[data-theme="custom"] { --notion-indent: 20px; }
-
暗模式实现:
[data-theme="dark"] .notion[data-theme="custom"] { --fg-color: rgba(255, 255, 255, 0.9); --bg-color: #2f3437; /* 其他颜色变量也应适当调整 */ }
通过遵循这些 CSS 结构和样式指南,可以使用 Notionpresso 实现一致且易于维护的样式。此外,可以根据需要进行更详细的定制。