@import url("https://rsms.me/inter/inter.css"); @import "tailwindcss"; @import "tw-animate-css"; @import "./iconfont.css"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Wolai 设计系统颜色变量 */ --color-wolai-bg: #FFFFFF; --color-wolai-bg-sidebar: #F7F7F5; --color-wolai-bg-hover: #EFEFEF; --color-wolai-bg-active: #E8E8E7; --color-wolai-text-primary: #37352F; --color-wolai-text-secondary: #9B9A97; --color-wolai-border: #E9E9E8; --color-wolai-brand: #22A559; --font-wolai-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Helvetica, Arial, sans-serif; } :root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } html, body, #__next { height: 100%; min-height: 100%; } /* Wolai 字体栈 */ body { font-family: -apple-system, "Microsoft YaHei", sans-serif; color: #37352F; background-color: #FFFFFF; } /* 滚动条美化 - 悬停时显示 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } :hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); } /* BlockNote 变量覆盖 */ :root { --bn-colors-editor-background: #FFFFFF; --bn-colors-editor-text: #37352F; --bn-font-family: -apple-system, "Microsoft YaHei", sans-serif; --bn-border-radius: 4px; } /* 调整编辑器内容宽度 */ .bn-editor { padding-left: 5rem; padding-right: 5rem; max-width: 900px; margin: 0 auto; } /* 说明:leptos-tiptap / ProseMirror 需要最基础的 white-space 与换行样式, 否则浏览器输入与光标行为会不稳定,并触发 ProseMirror 警告。 */ .ProseMirror { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .ProseMirror pre { white-space: pre-wrap; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @layer base { * { @apply border-border outline-ring/50; } html { font-family: "Inter", system-ui, sans-serif; } body { @apply bg-background text-foreground; } } @layer components { .wolai-hover { @apply transition-colors duration-150 hover:bg-gray-50; } .wolai-selected { @apply border-l-2 border-blue-500 bg-blue-50; } .wolai-blue { @apply cursor-pointer text-[#2563eb] hover:underline; } .wolai-editor .bn-block-outer { padding: 2px 0; } .wolai-editor .bn-inline-content a { color: #2563eb; text-decoration: underline; } .wolai-editor .bn-drag-handle { opacity: 0; transition: opacity 0.2s ease; } .wolai-editor .bn-block-group:hover .bn-drag-handle { opacity: 1; } .wolai-editor.wolai-heading-numbering { counter-reset: wolai-h1 wolai-h2 wolai-h3 wolai-h4 wolai-h5; } /* 说明:BlockNote 的 heading 主要由 .bn-block-content[data-content-type=heading] 承载。 为避免不同渲染结构导致“标题编号”失效,这里以块级容器为准实现编号。 */ .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"]:not([data-level]), .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="1"] { counter-increment: wolai-h1; counter-reset: wolai-h2; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"]:not([data-level])::before, .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="1"]::before { content: counter(wolai-h1) ". " !important; color: #94a3b8; margin-right: 8px !important; display: inline-flex; align-items: baseline; flex: 0 0 auto; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="2"] { counter-increment: wolai-h2; counter-reset: wolai-h3; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="2"]::before { content: counter(wolai-h1) "." counter(wolai-h2) ". " !important; color: #94a3b8; margin-right: 6px !important; display: inline-flex; align-items: baseline; flex: 0 0 auto; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="3"] { counter-increment: wolai-h3; counter-reset: wolai-h4; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="3"]::before { content: counter(wolai-h1) "." counter(wolai-h2) "." counter(wolai-h3) ". " !important; color: #cbd5f5; margin-right: 4px !important; display: inline-flex; align-items: baseline; flex: 0 0 auto; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="4"] { counter-increment: wolai-h4; counter-reset: wolai-h5; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="4"]::before { content: counter(wolai-h1) "." counter(wolai-h2) "." counter(wolai-h3) "." counter(wolai-h4) ". " !important; color: #d0d7e7; margin-right: 4px !important; display: inline-flex; align-items: baseline; flex: 0 0 auto; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="5"] { counter-increment: wolai-h5; } .wolai-editor.wolai-heading-numbering .bn-block-content[data-content-type="heading"][data-level="5"]::before { content: counter(wolai-h1) "." counter(wolai-h2) "." counter(wolai-h3) "." counter(wolai-h4) "." counter(wolai-h5) ". " !important; color: #d4d4d8; margin-right: 4px !important; display: inline-flex; align-items: baseline; flex: 0 0 auto; } .wolai-editor-show-structure .bn-block-outer { outline: 1px dashed #d4d4d8; border-radius: 8px; padding: 4px 8px; } .wolai-advanced-todo { display: flex; align-items: center; gap: 10px; } .wolai-advanced-todo__status { border-radius: 999px; border: 1px solid #c7d2fe; padding: 2px 10px; font-size: 12px; cursor: pointer; background-color: #eef2ff; color: #312e81; } .wolai-advanced-todo__status.status-doing { border-color: #fcd34d; background-color: #fff7ed; color: #92400e; } .wolai-advanced-todo__status.status-done { border-color: #4ade80; background-color: #ecfdf5; color: #047857; } .wolai-advanced-todo__status.status-cancelled { border-color: #fecdd3; background-color: #fff1f2; color: #9f1239; } .wolai-progress { border-radius: 12px; padding: 12px; border: 1px solid #e5e7eb; background-color: #f8fafc; margin: 8px 0; } .wolai-progress__header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #475569; margin-bottom: 8px; } .wolai-progress__mode { font-size: 11px; border-radius: 12px; background-color: #e0edff; color: #1d4ed8; padding: 2px 8px; } .wolai-progress__bar { position: relative; width: 100%; height: 10px; border-radius: 999px; background-color: #e4e4e7; overflow: hidden; cursor: pointer; } .wolai-progress__fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: inherit; background-image: linear-gradient(90deg, #60a5fa, #2563eb); } .wolai-progress__percent { display: block; margin-top: 6px; font-size: 12px; color: #1d4ed8; font-weight: 600; } .wolai-progress__description { font-size: 13px; color: #6b7280; margin-top: 6px; } .wolai-media { position: relative; margin: 24px 0; border-radius: 18px; /* 说明:Wolai 的附件/媒体块在选中时不显示蓝色外框(ProseMirror-selectednode 默认会加 outline)。 */ outline: none !important; } /* 说明:文件附件需要表现为“普通行”,不应该出现外层大卡片/大外框 */ .wolai-media--file { margin: 0; border-radius: 4px; } .wolai-media--file::after { content: none; } .wolai-media--file .wolai-media__canvas { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } .wolai-media--file .wolai-media__figure { background: transparent; border-radius: 0; overflow: visible; } .wolai-media::after { content: ""; position: absolute; inset: -8px; border: 1px solid transparent; border-radius: 24px; transition: border-color 0.2s ease; pointer-events: none; } .wolai-media:hover::after { border-color: rgba(37, 99, 235, 0.15); } .wolai-media--empty { border: 1px dashed #bed5ff; background-color: #fff; padding: 20px; border-radius: 16px; } .wolai-media__canvas { position: relative; border-radius: 18px; overflow: hidden; background-color: #fff; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.05); margin: 0 auto; } .wolai-media__figure { border-radius: inherit; overflow: hidden; background-color: #fff; } .wolai-media__figure img { width: 100%; border-radius: inherit; object-fit: cover; } .wolai-media__figure--border img { border: 1px solid #e2e8f0; } .wolai-media__figure figcaption { padding: 8px 12px; } .wolai-media__figure--center figcaption { text-align: center; } .wolai-media__figure--right figcaption { text-align: right; } .wolai-media__quickbar { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; padding: 4px; border-radius: 9999px; background-color: rgba(15, 23, 42, 0.85); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35); opacity: 0; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; } .wolai-media:hover .wolai-media__quickbar, .wolai-media:focus-within .wolai-media__quickbar { opacity: 1; transform: translateY(0); pointer-events: auto; } .wolai-media__quickbutton { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9999px; background-color: transparent; color: #e2e8f0; border: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .wolai-media__quickbutton:hover, .wolai-media__quickbutton:focus-visible { background-color: rgba(255, 255, 255, 0.15); color: #fff; outline: none; } .wolai-media__hint { margin-top: 6px; font-size: 12px; color: #94a3b8; text-align: left; } .wolai-media__resize-handle { position: absolute; top: 50%; width: 12px; height: 44px; border-radius: 2px; background: rgba(15, 23, 42, 0.5); transform: translateY(-50%); opacity: 0; transition: opacity 0.15s ease; cursor: ew-resize; z-index: 20; } .wolai-media__resize-handle--left { left: -6px; } .wolai-media__resize-handle--right { right: -6px; } .wolai-media:hover .wolai-media__resize-handle, .wolai-media:focus-within .wolai-media__resize-handle { opacity: 1; } .wolai-media__resize-handle.is-dragging { background: rgba(37, 99, 235, 0.85); } .online-table-block { position: relative; } .online-table-block:hover .wolai-table-resize-handle, .online-table-block:focus-within .wolai-table-resize-handle { opacity: 1; } .wolai-table-resize-handle { position: absolute; background: rgba(37, 99, 235, 0.12); border-radius: 999px; transition: opacity 0.15s ease, background 0.2s ease, transform 0.12s ease; opacity: 0; z-index: 40; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08); } .wolai-table-resize-handle.is-dragging { background: rgba(37, 99, 235, 0.38); } .wolai-table-resize-handle--left, .wolai-table-resize-handle--right { top: 50%; width: 10px; height: 34px; transform: translateY(-50%); cursor: ew-resize; } .wolai-table-resize-handle--left { left: 6px; } .wolai-table-resize-handle--right { right: 6px; } .wolai-table-resize-handle--top, .wolai-table-resize-handle--bottom { left: 50%; width: 34px; height: 10px; transform: translateX(-50%); cursor: ns-resize; } .wolai-table-resize-handle--top { top: 6px; } .wolai-table-resize-handle--bottom { bottom: 6px; } .wolai-table-resize-handle--top-left, .wolai-table-resize-handle--top-right, .wolai-table-resize-handle--bottom-left, .wolai-table-resize-handle--bottom-right { width: 12px; height: 12px; border-radius: 6px; } .wolai-table-resize-handle--top-left { top: 6px; left: 6px; cursor: nwse-resize; } .wolai-table-resize-handle--bottom-right { bottom: 6px; right: 6px; cursor: nwse-resize; } .wolai-table-resize-handle--top-right { top: 6px; right: 6px; cursor: nesw-resize; } .wolai-table-resize-handle--bottom-left { bottom: 6px; left: 6px; cursor: nesw-resize; } /* 提升 Luckysheet 内联编辑浮层的层级,避免被全屏遮罩挡住 */ .luckysheet-input-box, #luckysheet-rich-text-editor { z-index: 100 !important; } /* Wolai 编辑器样式 */ .wolai-editor .bn-block-content { color: #37352F; line-height: 1.6; } /* 页面选项:小字体(覆盖 BlockNote 的 .bn-default-styles 默认字号) */ .wolai-small-text .wolai-editor.bn-default-styles, .wolai-small-text .wolai-editor .bn-default-styles { font-size: 15px; } /* 自定义页面:字体 */ .wolai-page-font-song { font-family: "宋体", SimSun, "Songti SC", serif; } .wolai-page-font-song .wolai-editor.bn-default-styles, .wolai-page-font-song .wolai-editor .bn-default-styles { font-family: "宋体", SimSun, "Songti SC", serif; } .wolai-page-font-kai { font-family: "楷体", "楷体_GB2312", SimKai, STKaiti, serif; } .wolai-page-font-kai .wolai-editor.bn-default-styles, .wolai-page-font-kai .wolai-editor .bn-default-styles { font-family: "楷体", "楷体_GB2312", SimKai, STKaiti, serif; } /* 自定义页面:布局密度(紧凑/默认/宽容) */ .wolai-page-density-compact .wolai-editor .bn-block-content { line-height: 1.45; padding-top: 1px; padding-bottom: 1px; } .wolai-page-density-spacious .wolai-editor .bn-block-content { line-height: 1.75; padding-top: 6px; padding-bottom: 6px; } /* 页面选项:小字体(强制覆盖 BlockNote 默认字号) */ .wolai-small-text .wolai-editor.bn-default-styles, .wolai-small-text .wolai-editor .bn-default-styles, .wolai-editor.wolai-small-text.bn-default-styles, .wolai-editor.wolai-small-text .bn-default-styles { font-size: 15px !important; } /* 自定义页面:字体(强制覆盖 BlockNote 默认字体) */ .wolai-page-font-song .wolai-editor.bn-default-styles, .wolai-page-font-song .wolai-editor .bn-default-styles, .wolai-editor.wolai-page-font-song.bn-default-styles, .wolai-editor.wolai-page-font-song .bn-default-styles { font-family: "宋体", SimSun, "Songti SC", serif !important; } .wolai-page-font-kai .wolai-editor.bn-default-styles, .wolai-page-font-kai .wolai-editor .bn-default-styles, .wolai-editor.wolai-page-font-kai.bn-default-styles, .wolai-editor.wolai-page-font-kai .bn-default-styles { font-family: "楷体", "楷体_GB2312", SimKai, STKaiti, serif !important; } /* 自定义页面:布局密度(强制覆盖 BlockNote 默认行高/间距) */ .wolai-page-density-compact .wolai-editor .bn-block-content, .wolai-editor.wolai-page-density-compact .bn-block-content { line-height: 1.45 !important; padding-top: 1px !important; padding-bottom: 1px !important; } .wolai-page-density-spacious .wolai-editor .bn-block-content, .wolai-editor.wolai-page-density-spacious .bn-block-content { line-height: 1.75 !important; padding-top: 6px !important; padding-bottom: 6px !important; } .wolai-page-density-compact .wolai-editor h1 { margin-top: 1.2em; } .wolai-page-density-spacious .wolai-editor h1 { margin-top: 1.8em; } .wolai-page-density-compact .wolai-editor h2, .wolai-page-density-compact .wolai-editor h3 { margin-top: 1.1em; } .wolai-page-density-spacious .wolai-editor h2, .wolai-page-density-spacious .wolai-editor h3 { margin-top: 1.6em; } /* 自定义页面:隐藏子页面(仅隐藏通过 /ym 创建的子页面块) */ .wolai-hide-child-pages [data-child-page="true"] { display: none !important; } /* 标题样式 */ .wolai-editor h1 { font-size: 30px; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; color: #37352F; line-height: 1.3; } .wolai-editor h2 { font-size: 24px; font-weight: 600; margin-top: 1.4em; margin-bottom: 0.4em; color: #37352F; line-height: 1.4; } .wolai-editor h3 { font-size: 20px; font-weight: 600; margin-top: 1.3em; margin-bottom: 0.4em; color: #37352F; line-height: 1.4; } /* 列表样式 */ .wolai-editor ul, .wolai-editor ol { padding-left: 1.5em; } .wolai-editor li { margin: 2px 0; } /* 引用块样式 */ .wolai-editor blockquote { border-left: 3px solid #E9E9E8; padding-left: 1em; color: #9B9A97; font-style: italic; } /* 代码块样式 */ .wolai-editor pre { background-color: #F7F7F5; border-radius: 4px; padding: 1em; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 14px; } /* 分割线样式 */ .wolai-editor hr { border-color: #E9E9E8; margin: 1.5em 0; } /* 链接样式 */ .wolai-editor a { color: #2563eb; text-decoration: underline; } .wolai-editor a:hover { color: #1d4ed8; } /* Slash 菜单样式 */ .bn-suggestion-menu { background-color: #FFFFFF; border: 1px solid #E9E9E8; border-radius: 4px; box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; } .bn-suggestion-menu-item:hover, .bn-suggestion-menu-item.selected { background-color: #EFEFEF; } .bn-suggestion-menu-item-title { color: #37352F; font-weight: 500; } .bn-suggestion-menu-item-subtext { color: #9B9A97; } .bn-suggestion-menu-item-group-title { color: #9B9A97; font-size: 12px; font-weight: 600; } }