diff --git a/rust/crates/mnote-web/src/routes/mod.rs b/rust/crates/mnote-web/src/routes/mod.rs index 729e8429..daf2d70c 100644 --- a/rust/crates/mnote-web/src/routes/mod.rs +++ b/rust/crates/mnote-web/src/routes/mod.rs @@ -8,6 +8,7 @@ pub(crate) mod evidence; mod gateway; mod health; mod hermes; +mod ui_debug; mod hermes_client; mod hermes_tools; mod kernel; @@ -788,7 +789,8 @@ pub fn build_router(state: AppState) -> Router { if enable_debug_shell_routes { router = router .route("/tree", get(tree::tree_shell)) - .route("/document-debug", get(editor::document_editor_shell)); + .route("/document-debug", get(editor::document_editor_shell)) + .route("/ui-debug/components", get(ui_debug::components_shell)); } router.with_state(state) diff --git a/rust/crates/mnote-web/src/routes/ui_debug.rs b/rust/crates/mnote-web/src/routes/ui_debug.rs new file mode 100644 index 00000000..50cf04c2 --- /dev/null +++ b/rust/crates/mnote-web/src/routes/ui_debug.rs @@ -0,0 +1,49 @@ +//! MNOTE UI Debug 路由 handler +//! +//! `/ui-debug/components` 调试组件矩阵页面。 +//! 仅在 `MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES=1` 时可用。 + +use crate::app::AppState; +use crate::context::RequestContext; +use crate::error::WebError; +use crate::routes::web_shell::load_sidebar_tree_html; +use crate::ssr::pages::ui_debug::UiDebugComponentsPage; +use axum::extract::{Extension, State}; +use axum::response::{Html, IntoResponse, Response}; + +/// GET /ui-debug/components +/// +/// 渲染组件矩阵调试页面。 +pub async fn components_shell( + State(state): State, + Extension(context): Extension, +) -> Result { + let workspace_id = "default"; + let sidebar_tree_html = + load_sidebar_tree_html(state.config(), &context, workspace_id, None) + .await + .unwrap_or_default(); + + let body_content = crate::ssr::render_view(leptos::view! { + + }); + + let full_page = format!( + r#" + + + + +UI Debug — 组件矩阵 — MNote + + +{body_content} +"#, + MNOTE_CSS = crate::ssr::MNOTE_CSS, + body_content = body_content, + ); + + Ok(Html(full_page).into_response()) +} diff --git a/rust/crates/mnote-web/src/ssr/pages/layout.rs b/rust/crates/mnote-web/src/ssr/pages/layout.rs index 6a8c7f7a..a799e522 100644 --- a/rust/crates/mnote-web/src/ssr/pages/layout.rs +++ b/rust/crates/mnote-web/src/ssr/pages/layout.rs @@ -129,6 +129,7 @@ pub fn PageLayout( class="mnote-workspace-source-trigger" data-testid="mnote-workspace-source-trigger" data-mnote-action="open-workspace-source-menu" + data-state="closed" aria-haspopup="menu" aria-expanded="false" title="切换我的空间或本地文件夹" @@ -150,6 +151,7 @@ pub fn PageLayout( aria-label="更多" data-testid="mnote-account-menu-trigger" data-mnote-action="open-account-menu" + data-state="closed" aria-haspopup="menu" aria-expanded="false" > @@ -178,7 +180,7 @@ pub fn PageLayout(
- +
- + - +
{children()}
- +
diff --git a/rust/crates/mnote-web/src/ssr/pages/mod.rs b/rust/crates/mnote-web/src/ssr/pages/mod.rs index db7c3624..d819cd77 100644 --- a/rust/crates/mnote-web/src/ssr/pages/mod.rs +++ b/rust/crates/mnote-web/src/ssr/pages/mod.rs @@ -7,3 +7,4 @@ pub mod home; pub mod layout; pub mod mindmap; pub mod search; +pub mod ui_debug; diff --git a/rust/crates/mnote-web/src/ssr/pages/ui_debug.rs b/rust/crates/mnote-web/src/ssr/pages/ui_debug.rs new file mode 100644 index 00000000..9a4c2b26 --- /dev/null +++ b/rust/crates/mnote-web/src/ssr/pages/ui_debug.rs @@ -0,0 +1,328 @@ +//! MNOTE UI Debug — 组件矩阵页面 (SSR) +//! +//! 调试用组件展示页面，通过 env var `MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES=1` 启用。 +//! 包含：Button 3×3×4 矩阵、Dialog/Modal、Popover/DropdownMenu、Toast、Input/Select/Textarea。 +//! 仅在生产环境关闭的调试路由下可访问。 + +use crate::ssr::pages::layout::PageLayout; +use leptos::prelude::*; + +/// UI Debug 组件矩阵页面 +/// +/// 展示设计系统组件矩阵，包含主题切换。 +/// 页面使用 `.ui-debug-*` 命名空间的 CSS 样式。 +#[component] +pub fn UiDebugComponentsPage( + #[prop(optional)] sidebar_tree_html: Option, + #[prop(optional)] workspace_name: Option, +) -> impl IntoView { + let sidebar_tree_html = sidebar_tree_html.unwrap_or_default(); + let workspace_name = workspace_name + .map(|v| v.trim().to_string()) + .filter(|v| !v.is_empty()) + .unwrap_or_else(|| "开发用户 的空间".to_string()); + + // Toast JS: 简单 toast 通知系统 + let toast_js = r##" +(function(){ + if (window.__mnoteUiDebugToastInited) return; + window.__mnoteUiDebugToastInited = true; + function showToast(message, kind) { + kind = kind || 'info'; + var container = document.getElementById('ui-debug-toast-container'); + if (!container) return; + var toast = document.createElement('div'); + toast.className = 'ui-debug-toast ui-debug-toast--' + kind; + toast.setAttribute('role', 'status'); + toast.setAttribute('aria-live', 'polite'); + toast.textContent = message; + container.appendChild(toast); + requestAnimationFrame(function() { toast.classList.add('ui-debug-toast--visible'); }); + setTimeout(function() { + toast.classList.remove('ui-debug-toast--visible'); + setTimeout(function() { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300); + }, 2800); + } + window.__mnoteUiDebugToast = showToast; + document.addEventListener('click', function(e) { + var trigger = e.target.closest('[data-ui-debug-toast]'); + if (!trigger) return; + var message = trigger.getAttribute('data-ui-debug-toast') || 'Toast message'; + var kind = trigger.getAttribute('data-ui-debug-toast-kind') || 'info'; + showToast(message, kind); + }); +})(); +"##; + + view! { + +
+ // Toast container +
+ + + // Page header with theme toggle +
+

"MNote UI Debug — 组件矩阵"

+
+ + +
+ // Theme JS + +
+ + // ─── Button 3×3×4 Matrix ─── +
+

"Buttons — 3 variant × 3 size × 4 state"

+
+ { + ["primary", "secondary", "outline"] + .iter() + .flat_map(|variant| { + ["sm", "md", "lg"] + .iter() + .flat_map(move |size| { + ["default", "hover", "active", "disabled"] + .iter() + .map(move |state| { + let is_disabled = *state == "disabled"; + let class = format!( + "ui-debug-btn ui-debug-btn--{} ui-debug-btn--{}", + variant, size + ); + let label = format!("{}-{}-{}", variant, size, state); + view! { + + } + }) + }) + }) + .collect::>() + } +
+
+ + // ─── Dialog / Modal ─── +
+

"Dialog / Modal"

+
+ + + +
+ // Dialog modal overlay + + // Dialog JS + +
+ + // ─── Popover / DropdownMenu ─── +
+

"Popover / DropdownMenu"

+
+
+ + +
+
+ + +
+
+ // Popover JS + +
+ + // ─── Toast triggers ─── +
+

"Toast 通知"

+
+ + + + +
+
+ + // ─── Input / Select / Textarea ─── +
+

"Input / Select / Textarea"

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + } +} diff --git a/rust/crates/mnote-web/src/ssr/styles.rs b/rust/crates/mnote-web/src/ssr/styles.rs index 49b73183..c806f9d0 100644 --- a/rust/crates/mnote-web/src/ssr/styles.rs +++ b/rust/crates/mnote-web/src/ssr/styles.rs @@ -7,6551 +7,25 @@ /// /// Wolai / Notion 风格：白色背景、近黑正文、浅色侧栏、极简边框。 /// 覆盖所有页面组件使用的 class 和 id。 -pub const MNOTE_CSS: &str = r##" -/* ===== 基础重置 ===== */ -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -/* ===== Wolai 设计变量（来自设计稿） ===== */ -:root { - /* 背景色 */ - --color-basic-50: #F7F7F5; - --color-basic-75: #F0F0EE; - --color-basic-100: #EBEBEB; - --color-basic-200: #E3E3E0; - --color-basic-300: #D4D4D1; - --color-basic-400: #C4C4C1; - --color-basic-500: #A9A9A6; - --color-basic-600: #9B9A97; - --color-basic-700: #6D6D69; - --color-basic-800: #504F4B; - --color-basic-900: #37352F; - - /* wolai 语义变量 */ - --wolai-bg: #FFFFFF; - --wolai-bg-sidebar: var(--color-basic-50); - --wolai-bg-hover: rgba(55, 53, 47, 0.08); - --wolai-bg-active: rgba(55, 53, 47, 0.12); - --wolai-text-primary: var(--color-basic-900); - --wolai-text-secondary: var(--color-basic-600); - --wolai-border: #E9E9E8; - --wolai-brand: #22A559; - --wolai-accent: #2563eb; - --wolai-accent-hover: #1d4ed8; - --wolai-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Helvetica, Arial, sans-serif; - --wolai-radius: 4px; -} - -/* ===== 基础排版 ===== */ -html, body { - height: 100%; -} - -body { - font-family: var(--wolai-font-sans); - color: var(--wolai-text-primary); - background: var(--wolai-bg); - line-height: 1.6; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - color: var(--wolai-accent); - text-decoration: none; - cursor: pointer; -} - -a:hover { - color: var(--wolai-accent-hover); -} - -[hidden] { - display: none !important; -} - -.mnote-symbol { - width: 18px; - height: 18px; - display: inline-flex; - flex: 0 0 auto; - color: currentColor; - fill: none; - stroke: currentColor; - stroke-width: 1.9; - stroke-linecap: round; - stroke-linejoin: round; - vertical-align: -0.18em; -} - -.mnote-symbol[data-icon="home"] { - stroke-width: 2; -} - -.mnote-symbol--document { - width: 56px; - height: 56px; - stroke-width: 1.35; -} - -.material-symbols-outlined { - font-family: var(--wolai-font-sans); - font-weight: normal; - font-style: normal; - font-size: 20px; - line-height: 1; - letter-spacing: 0; - text-transform: none; - display: inline-flex; - align-items: center; - justify-content: center; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-feature-settings: "liga"; - -webkit-font-smoothing: antialiased; - font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; -} - -.material-symbols-outlined::before { - content: ""; - display: block; - width: 1em; - height: 1em; - background: currentColor; - -webkit-mask: var(--mnote-icon-mask) center / contain no-repeat; - mask: var(--mnote-icon-mask) center / contain no-repeat; -} - -.material-symbols-outlined[data-icon="search"]::before { content: "⌕"; } -.material-symbols-outlined[data-icon="account_tree"]::before { content: "⌘"; } -.material-symbols-outlined[data-icon="bolt"]::before { content: "ϟ"; } -.material-symbols-outlined[data-icon="help"]::before { content: "?"; } -.material-symbols-outlined[data-icon="inventory_2"]::before { content: "▣"; } -.material-symbols-outlined[data-icon="more_horiz"]::before { content: "…"; } -.material-symbols-outlined[data-icon="menu"]::before { content: "☰"; } -.material-symbols-outlined[data-icon="home"]::before { content: "⌂"; } -.material-symbols-outlined[data-icon="star"]::before { content: "☆"; } -.material-symbols-outlined[data-icon="history"]::before { content: "◷"; } -.material-symbols-outlined[data-icon="auto_awesome"]::before { content: "✦"; } -.material-symbols-outlined[data-icon="folder_open"]::before, -.material-symbols-outlined[data-icon="drive_file_move"]::before { content: "▱"; } -.material-symbols-outlined[data-icon="delete"]::before { content: "⌫"; } -.material-symbols-outlined[data-icon="right_panel_open"]::before, -.material-symbols-outlined[data-icon="open_in_new"]::before { content: "↗"; } -.material-symbols-outlined[data-icon="share"]::before { content: "⇪"; } -.material-symbols-outlined[data-icon="link"]::before { content: "∞"; } -.material-symbols-outlined[data-icon="content_copy"]::before, -.material-symbols-outlined[data-icon="file_copy"]::before { content: "⧉"; } -.material-symbols-outlined[data-icon="tag"]::before { content: "#"; } -.material-symbols-outlined[data-icon="edit"]::before { content: "✎"; } -.material-symbols-outlined[data-icon="add"]::before { content: "+"; } -.material-symbols-outlined[data-icon="manage_search"]::before { content: "⌕"; } -.material-symbols-outlined[data-icon="subdirectory_arrow_right"]::before { content: "↳"; } - -.material-symbols-filled { - font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; -} - -/* 本地 SVG mask 图标，避免 Google Material Symbols 字体未加载时露出英文图标名。 */ -.material-symbols-outlined[data-icon]::before { content: ""; } -.material-symbols-outlined[data-icon="search"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m16 16 4.2 4.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="manage_search"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 17.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m15.5 15.5 4 4M8 8.5h5M8 11h5M8 13.5h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="account_tree"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6h4v4H6zM14 4h4v4h-4zM14 16h4v4h-4z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 8h2a2 2 0 0 0 2-2M10 8h2a2 2 0 0 1 2 2v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="bolt"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 4.5 13h6L9 22l10.5-13h-6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="help"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.8 9a2.4 2.4 0 0 1 4.6 1.1c0 1.7-1.7 2-2.2 3.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.1' fill='black'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="inventory_2"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5h16v4H4zM6 9.5h12V19H6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 13.5h5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="more_horiz"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='12' r='2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black'/%3E%3Ccircle cx='19' cy='12' r='2' fill='black'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="menu"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="home"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11 12 4l8 7v9H5v-9Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 20v-6h5v6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="star"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 2.7 5.4 6 .9-4.4 4.3 1 6-5.3-2.8-5.3 2.8 1-6-4.4-4.3 6-.9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="history"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7L4 8.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4v4.5h4.5M12 8v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="auto_awesome"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 1.6 5.2L19 10l-5.4 1.8L12 17l-1.6-5.2L5 10l5.4-1.8zM5.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8zM18.5 2.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z' fill='black'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="folder_open"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7.5h6l2 2H21v8.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a1.5 1.5 0 0 1 1.5-1.5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 18 7 11h14l-3 7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="drive_file_move"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h6l2 2h8v10H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m13 12 3 3-3 3M8 15h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="delete"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14M9 6V4h6v2M8 6l1 14h6l1-14M10.5 10v6M13.5 10v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="right_panel_open"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4zM14 5v14M8 12h6M11 9l3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="preview"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="download"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4v10M8.5 11.5 12 15l3.5-3.5M5 19h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="notes"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 5h12v14H6zM9 9h6M9 12h6M9 15h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="open_in_new"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6H5v13h13v-3M12 5h7v7M10 14 19 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="share"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='6' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='19' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m8.7 10.7 6.6-4.4M8.7 13.3l6.6 4.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } - -.material-symbols-outlined[data-icon="comment"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="mode_comment"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="person_add"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='8' r='3.2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3.5 20a5.5 5.5 0 0 1 11 0M18 8v6M15 11h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="slideshow"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v12H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m10 9 5 2-5 2zM9 21h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="travel_explore"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 11h14M11 4a10 10 0 0 1 0 14M11 4a10 10 0 0 0 0 14M16.5 16.5 21 21' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7.5 8.5h2.5l1 1.5 2.5-.5 1 2-2 1 .5 2.5h-3l-1.5-2-2 .5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="document_scanner"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3H5a2 2 0 0 0-2 2v2M17 3h2a2 2 0 0 1 2 2v2M7 21H5a2 2 0 0 1-2-2v-2M17 21h2a2 2 0 0 0 2-2v-2M7 8h10M7 12h10M7 16h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="article"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4h12v16H6zM9 8h6M9 12h6M9 16h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="sync"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6v5h-5M4 18v-5h5M7.5 9A6 6 0 0 1 18 6M16.5 15A6 6 0 0 1 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="drive_file_rename_outline"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 17-.5 3.5L7 20l11-11-3-3zM13 8l3 3M5 6h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="format_paint"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h10l2 3-2 3H5l-2-3zM9 13v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="link"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 14.5 14.5 9.5M10.8 6.2l1.1-1.1a4 4 0 0 1 5.7 5.7l-1.6 1.6M13.2 17.8l-1.1 1.1a4 4 0 0 1-5.7-5.7L8 11.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="content_copy"], -.material-symbols-outlined[data-icon="file_copy"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8h10v12H8zM6 16H4V4h10v2' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="tag"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4 5 20M19 4l-4 16M4 9h16M3 15h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="edit"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 17-.5 3.5L7 20l11-11-3-3zM13 8l3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="add"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="subdirectory_arrow_right"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4v7a3 3 0 0 0 3 3h8M14 10l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="account_circle"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M6.8 19a5.4 5.4 0 0 1 10.4 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="admin_panel_settings"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.9 8 7 10 4.1-2 7-5.5 7-10V6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m9 12 2 2 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="close"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6 18 18M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } -.material-symbols-outlined[data-icon="radio_button_unchecked"]::before { - width: .78em; - height: .78em; - background: transparent; - border: 2px solid currentColor; - border-radius: 999px; - -webkit-mask: none; - mask: none; -} - -/* ===== 滚动条（悬停时显示） ===== */ -::-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); -} - -/* ===== 页面布局：侧栏 + 内容 ===== */ -.mnote-shell { - display: flex; - height: 100vh; - width: 100%; - overflow: hidden; - background: var(--wolai-bg); -} - -.mnote-shell[data-mnote-sidebar-collapsed="true"] .mnote-sidebar, -.mnote-shell[data-mnote-sidebar-collapsed="true"] .wolai-sidebar, -.mnote-shell[data-mnote-sidebar-collapsed="true"] .mnote-sidebar-resizer { - display: none; -} - -.wolai-workspace-shell { - --wolai-bg-sidebar: #F7F7F6; - --wolai-bg-selected: #F8E6E7; - --wolai-accent-red: #E0525B; - --mnote-sidebar-width: 288px; -} - -.wolai-sidebar { - width: var(--mnote-sidebar-width); - background: var(--wolai-bg-sidebar); -} - -.mnote-sidebar-resizer { - display: block; - width: 6px; - min-height: 100vh; - cursor: col-resize; - position: relative; - flex: 0 0 auto; - overscroll-behavior: none; -} - -.mnote-sidebar-resizer::before { - content: ""; - position: absolute; - left: 2px; - top: 0; - bottom: 0; - width: 2px; - background: rgba(27, 28, 28, 0.08); -} - -.mnote-sidebar-resizer:hover::before, -html[data-mnote-sidebar-resizing="true"] .mnote-sidebar-resizer::before { - background: rgba(37, 99, 235, 0.42); -} - -.wolai-sidebar-header { - height: 52px; - gap: 10px; - padding: 12px 16px 8px; - justify-content: flex-start; - position: relative; -} - -.wolai-avatar { - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - background: #D6545D; - color: #fff; - font-size: 15px; - font-weight: 700; - flex: 0 0 auto; -} - -.wolai-sidebar-header .sidebar-workspace-name { - max-width: 190px; - color: #202124; - font-size: 16px; - font-weight: 650; -} - -.mnote-workspace-source-trigger { - min-width: 0; - flex: 1 1 auto; - display: inline-flex; - align-items: center; - gap: 4px; - border: 0; - background: transparent; - padding: 2px 4px; - border-radius: 4px; - cursor: pointer; -} - -.mnote-workspace-source-trigger:hover, -.mnote-workspace-source-trigger[aria-expanded="true"] { - background: var(--wolai-bg-hover); -} - -.wolai-sidebar-chevron { - margin-left: auto; - color: var(--wolai-text-secondary); - font-size: 16px; -} - -.mnote-workspace-source-menu { - position: absolute; - inset-inline-start: 0; - top: calc(100% + 6px); - z-index: 120; - width: 250px; - max-width: calc(100vw - 24px); - padding: 6px; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 8px; - background: #fff; - box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18); -} - -.mnote-workspace-source-menu__label { - padding: 8px 8px 4px; - color: var(--wolai-text-secondary); - font-size: 12px; -} - -.mnote-workspace-source-menu__item { - width: 100%; - display: block; - border: 0; - border-radius: 6px; - background: transparent; - padding: 8px; - color: var(--wolai-text-primary); - font-size: 13px; - line-height: 1.35; - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; -} - -.mnote-workspace-source-menu__item:hover { - background: var(--wolai-bg-hover); -} - -.mnote-workspace-source-menu__item--primary { - color: #1D4ED8; -} - -.mnote-local-folder-dialog__recent { - display: grid; - gap: 6px; - min-width: 0; -} - -.mnote-local-folder-dialog__recent button { - min-width: 0; - max-width: 100%; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 6px; - background: #fff; - padding: 7px 9px; - color: var(--wolai-text-primary); - font-size: 13px; - line-height: 1.4; - text-align: left; - cursor: pointer; - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; -} - -.mnote-local-folder-dialog__recent button:hover { - background: var(--wolai-bg-hover); -} - -.mnote-account-menu{inset-inline-start:auto;right:8px;top:calc(100% - 10px);width:194px}.mnote-account-menu__item{display:flex;align-items:center;gap:10px}.mnote-account-menu__logout{color:#C2410C}.mnote-account-menu__logout:hover{background:#FFF7ED}.mnote-account-menu__error{padding:6px 8px 2px;color:#B91C1C;font-size:12px}.mnote-profile-dialog{position:fixed;inset:0;z-index:1200;display:grid;place-items:center}.mnote-profile-dialog__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.22)}.mnote-profile-dialog__panel{position:relative;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border:1px solid var(--wolai-border);border-radius:8px;background:#fff;box-shadow:0 18px 54px rgba(15,23,42,.18);padding:20px}.mnote-profile-dialog__header,.mnote-profile-dialog__identity,.mnote-profile-dialog__list>div,.mnote-profile-dialog__list dd{display:flex;align-items:center}.mnote-profile-dialog__header{justify-content:space-between;margin-bottom:18px}.mnote-profile-dialog__eyebrow,.mnote-profile-dialog__identity span,.mnote-profile-dialog__list dt{color:var(--wolai-text-secondary);font-size:13px}.mnote-profile-dialog__header h2{font-size:20px}.mnote-profile-dialog__close,.mnote-profile-dialog__list button{border:0;border-radius:6px;background:transparent;color:var(--wolai-text-secondary);cursor:pointer}.mnote-profile-dialog__close{width:32px;height:32px}.mnote-profile-dialog__identity{gap:12px;padding:12px;border-radius:8px;background:var(--wolai-bg-sidebar)}.mnote-profile-dialog__avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:#D6545D;color:#fff;font-weight:650}.mnote-profile-dialog__list{margin-top:16px}.mnote-profile-dialog__list>div{justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--wolai-border)}.mnote-profile-dialog__list dd{min-width:0;gap:8px;max-width:280px;font-size:13px;text-align:right;overflow-wrap:anywhere}.mnote-profile-dialog__list code{font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:12px;white-space:normal} - -.wolai-quick-actions { - flex: 0 0 auto; - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 8px; - padding: 8px 12px 18px; - position: relative; -} - -.wolai-quick-actions a, -.wolai-quick-actions button { - height: 28px; - justify-content: center; - padding: 0; - margin: 0; - color: #4B4B4B; - border: 0; - background: transparent; - cursor: pointer; -} - -.wolai-quick-actions a .nav-icon, -.wolai-quick-actions button .nav-icon { - margin: 0; -} - -.wolai-sidebar-section { - padding: 4px 8px 14px; -} - -.wolai-section-title { - height: 28px; - display: flex; - align-items: center; - gap: 4px; - color: #B5B5B2; - font-size: 14px; - padding: 0 8px; -} - -.wolai-section-icon { - color: #FFB33F; -} - -.wolai-section-caret { - color: #B5B5B2; -} - -.wolai-section-add { - margin-left: auto; - width: 24px; - height: 24px; - border: 0; - border-radius: 6px; - background: transparent; - color: #B5B5B2; - font-size: 22px; - line-height: 1; - cursor: pointer; -} - -.wolai-section-add:hover { - background: var(--wolai-bg-hover); - color: #555; -} - -.wolai-page-row { - min-height: 38px; - display: flex; - align-items: center; - gap: 8px; - border-radius: 6px; - padding: 0 12px; - color: #535353; - font-size: 17px; - line-height: 1.2; -} - -.wolai-page-row:hover { - background: var(--wolai-bg-hover); - color: #202124; -} - -.wolai-muted-row { - color: #747471; -} - -.wolai-active-row { - background: var(--wolai-bg-selected); - color: var(--wolai-accent-red); -} - -.wolai-row-icon { - width: 22px; - color: #111; - text-align: center; - flex: 0 0 auto; -} - -.wolai-sidebar-footer { - margin-top: auto; - display: grid; - grid-template-columns: 1fr 1fr; - border-top: 1px solid var(--wolai-border); - background: #FBFBFA; -} - -.wolai-footer-entry { - height: 46px; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - color: #6D6D69; - font-size: 15px; -} - -.wolai-footer-entry + .wolai-footer-entry { - border-left: 1px solid var(--wolai-border); -} - -.wolai-topbar { - height: 46px; - display: flex; - align-items: center; - justify-content: space-between; - flex: 0 0 auto; - padding: 0 18px; - color: #222; - font-size: 17px; -} - -.wolai-topbar-left, -.wolai-topbar-actions { - display: flex; - align-items: center; - gap: 12px; -} - -.wolai-topbar-actions { - color: #222; - font-size: 20px; -} - -.wolai-menu-icon { - color: #4A4A4A; - font-size: 22px; -} - -.wolai-home-icon { - color: #000; - font-size: 24px; - font-weight: 700; -} - -.wolai-floating-actions { - position: fixed; - right: 24px; - bottom: 24px; - display: flex; - flex-direction: column; - gap: 16px; - z-index: 20; -} - -.wolai-floating-button { - width: 50px; - height: 50px; - border: 1px solid #ECECF1; - border-radius: 50%; - background: #fff; - color: #222; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); - font-size: 18px; - cursor: pointer; -} - -/* 侧栏导航 */ -.mnote-sidebar { - width: 288px; - flex-shrink: 0; - background: var(--wolai-bg-sidebar); - border-right: 1px solid var(--wolai-border); - display: flex; - flex-direction: column; - overflow-y: auto; - user-select: none; -} - -.mnote-sidebar-header { - padding: 14px 16px 10px; - display: flex; - align-items: center; - justify-content: space-between; -} - -.mnote-sidebar-brand { - font-size: 15px; - font-weight: 600; - color: var(--wolai-text-primary); - text-decoration: none; -} - -.mnote-sidebar-brand:hover { - color: var(--wolai-text-primary); -} - -.mnote-sidebar-nav { - flex: 1; - padding: 4px 8px; -} - -.mnote-sidebar-nav.wolai-quick-actions { - flex: 0 0 auto; -} - -.wolai-sidebar-body { - flex: 1 1 auto; - min-height: 0; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.mnote-sidebar-nav a, -.mnote-sidebar-nav button { - display: flex; - align-items: center; - height: 30px; - padding: 4px 8px; - margin-bottom: 2px; - border-radius: var(--wolai-radius); - font-size: 14px; - line-height: 1.4; - color: var(--wolai-text-primary); - text-decoration: none; - transition: none; -} - -.mnote-sidebar-nav a:hover, -.mnote-sidebar-nav button:hover { - background: var(--wolai-bg-hover); -} - -.mnote-sidebar-nav a.active { - background: var(--wolai-bg-active); -} - -.mnote-sidebar-nav a .nav-icon, -.mnote-sidebar-nav button .nav-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - margin-right: 5px; - font-size: 18px; - flex-shrink: 0; -} - -/* 工作区名称 */ -.sidebar-workspace-name { - font-size: 12px; - color: var(--wolai-text-secondary); - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* 侧栏页面树区 */ -.sidebar-tree-section { - border-top: 1px solid var(--wolai-border); - margin-top: 4px; - padding-top: 4px; -} - -.sidebar-tree-divider { - display: none; -} - -.sidebar-tree { - padding: 2px 0; -} - -.sidebar-tree .tree-root { - list-style: none; - padding: 0; - margin: 0; -} - -.sidebar-tree .tree-empty { - padding: 6px 8px 8px; - color: var(--wolai-text-secondary); - font-size: 13px; - line-height: 1.5; -} - -.sidebar-tree .tree-node { - list-style: none; - padding: 0; - margin: 0; -} - -.sidebar-tree .tree-row { - display: flex; - align-items: center; - height: 30px; - padding: 0 8px; - border-radius: var(--wolai-radius); - cursor: pointer; - font-size: 14px; - color: var(--wolai-text-primary); - gap: 2px; -} - -.sidebar-tree .tree-row:hover { - background: var(--wolai-bg-hover); -} - -.sidebar-tree .tree-row[data-active="true"] { - background: var(--wolai-bg-active); -} - -.sidebar-tree .tree-row[data-active="true"] .tree-link-title { - font-weight: 500; -} - -.sidebar-tree .tree-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - flex-shrink: 0; - border: none; - background: none; - cursor: pointer; - font-size: 12px; - color: var(--wolai-text-secondary); - padding: 0; - border-radius: 3px; -} - -.sidebar-tree .tree-toggle:hover { - background: var(--wolai-bg-hover); -} - -.sidebar-tree .tree-spacer { - display: inline-flex; - width: 20px; - height: 20px; - flex-shrink: 0; -} - -.sidebar-tree .tree-kind-badge { - display: none; -} - -.sidebar-tree .tree-link { - flex: 1; - display: flex; - align-items: center; - border: none; - background: none; - cursor: pointer; - padding: 0 4px; - font-size: 14px; - color: var(--wolai-text-primary); - overflow: hidden; - min-width: 0; -} - -.sidebar-tree .tree-link-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.sidebar-tree .tree-actions { - display: none; - gap: 2px; - flex-shrink: 0; -} - -.sidebar-tree .tree-row:hover .tree-actions { - display: flex; -} - -.sidebar-tree .tree-action { - display: inline-flex; - align-items: center; - justify-content: center; - width: 22px; - height: 22px; - border: none; - background: none; - cursor: pointer; - font-size: 14px; - color: var(--wolai-text-secondary); - border-radius: 3px; - padding: 0; -} - -.sidebar-tree .tree-action:hover { - background: var(--wolai-bg-hover); -} - -.sidebar-tree .tree-children { - list-style: none; - padding: 0; - margin: 0; -} - -.sidebar-tree .tree-children--collapsed { - display: none; -} - -/* 树行缩进 — 通过嵌套深度自动偏移 */ -.sidebar-tree .tree-node .tree-children .tree-row { - padding-left: 28px; -} - -.sidebar-tree .tree-node .tree-children .tree-children .tree-row { - padding-left: 48px; -} - -.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-row { - padding-left: 68px; -} - -.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-children .tree-row { - padding-left: 88px; -} - -/* 内容区域 */ -.mnote-main { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - background: var(--wolai-bg); -} - -.mnote-content { - flex: 1; - min-height: 0; - overflow-y: auto; - padding: 0; -} - -.mnote-content:has(.document-workspace) { - overflow: hidden; -} - -/* ===== 首页 ===== */ -.mnote-home { - max-width: 720px; - margin: 0 auto; - padding: 72px 64px; -} - -.mnote-home-icon { - width: 96px; - height: 96px; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto 22px; - color: #000; - font-size: 92px; - line-height: 1; -} - -.mnote-home h1 { - text-align: center; - font-size: 44px; - font-weight: 700; - letter-spacing: 0; - margin-bottom: 34px; - color: var(--wolai-text-primary); -} - -.mnote-home p { - font-size: 16px; - color: var(--wolai-text-secondary); - line-height: 1.6; - margin-bottom: 32px; -} - -.mnote-home-links { - display: flex; - flex-direction: column; - gap: 8px; - max-width: 360px; - margin: 0 auto; -} - -.mnote-home-links a { - display: flex; - align-items: center; - gap: 8px; - padding: 2px 0; - border-radius: var(--wolai-radius); - font-size: 21px; - font-weight: 650; - color: var(--wolai-text-primary); - text-decoration: none; - transition: background-color 80ms ease; -} - -.mnote-home-links a:hover { - background: var(--wolai-bg-hover); -} - -.mnote-home-links a::before { - content: none; -} - -.mnote-home-links a span { - width: 26px; - text-align: center; - color: #111; -} - -/* ===== 文档壳 ===== */ -.document-shell { - width: 100%; - min-height: 100vh; - margin: 0 auto; -} - -.document-shell-header { - padding: 48px 0 0; - margin: 0 auto 8px; - max-width: 760px; -} - -.document-shell-header h1 { - font-size: 40px; - font-weight: 700; - line-height: 1.2; - color: var(--wolai-text-primary); - word-break: break-word; - padding: 3px 0; -} - -#mnote-editor-island { - margin: 0 15px; - max-width: 760px; - width: calc(100% - 30px); - min-height: 300px; - padding-bottom: 48px; -} - -#mnote-editor-island .bn-editor { - padding: 0; - max-width: none; - margin: 0; -} - -/* ===== 搜索壳 ===== */ -#mnote-search-shell { - max-width: 800px; - min-height: 100vh; - margin: 0 auto; - padding: 48px 64px; -} - -#mnote-search-shell header { - margin-bottom: 24px; -} - -#mnote-search-shell h1 { - font-size: 32px; - font-weight: 700; - color: var(--wolai-text-primary); - margin-bottom: 4px; -} - -.search-meta, -.search-query { - color: var(--wolai-text-secondary); - font-size: 14px; -} - -#mnote-search-island { - min-height: 200px; -} - -/* ===== 思维导图壳 ===== */ -#mnote-mindmap-shell { - max-width: 1000px; - min-height: 100vh; - margin: 0 auto; - padding: 48px 64px; -} - -#mnote-mindmap-shell header { - margin-bottom: 24px; -} - -#mnote-mindmap-shell h1 { - font-size: 32px; - font-weight: 700; - color: var(--wolai-text-primary); -} - -#mnote-mindmap-island { - min-height: 400px; -} - -/* ===== 认证页面 ===== */ -.mnote-auth { - position: relative; - display: grid; - min-height: 100vh; - place-items: center; - padding: 48px 20px; - background: #FFFFFF; -} - -.mnote-auth-brand { - position: fixed; - top: 28px; - left: 34px; - display: inline-flex; - align-items: center; - gap: 10px; - color: #37352F; - font-size: 18px; - font-weight: 650; - letter-spacing: 0; -} - -.mnote-auth-brand:hover { - color: #37352F; -} - -.mnote-auth-brand-mark { - display: inline-flex; - width: 32px; - height: 32px; - align-items: center; - justify-content: center; - border-radius: 6px; - background: #37352F; - color: #FFF; - font-size: 18px; - font-weight: 700; - line-height: 1; -} - -.mnote-auth-panel { - width: min(100%, 360px); - color: #37352F; -} - -.mnote-auth-heading { - margin-bottom: 30px; - text-align: center; -} - -.mnote-auth-heading h1 { - margin: 0 0 8px; - color: #37352F; - font-size: 28px; - font-weight: 650; - line-height: 1.25; - letter-spacing: 0; -} - -.mnote-auth-heading p { - color: #9B9A97; - font-size: 14px; - line-height: 1.5; -} - -.mnote-auth-form { - display: grid; - gap: 12px; -} - -.mnote-auth-field { - display: grid; - gap: 7px; - color: #6D6D69; - font-size: 13px; - line-height: 1.3; -} - -.mnote-auth-field input { - width: 100%; - height: 42px; - border: 1px solid #DCDAD6; - border-radius: 4px; - background: #FFF; - color: #37352F; - font: 400 15px/1.4 var(--wolai-font-sans); - letter-spacing: 0; - outline: none; - padding: 0 12px; -} - -.mnote-auth-field input::placeholder { - color: #B5B1AA; -} - -.mnote-auth-field input:focus { - border-color: #A8A39A; - box-shadow: 0 0 0 2px rgba(55, 53, 47, 0.08); -} - -.mnote-auth-message { - min-height: 20px; - color: #9B9A97; - font-size: 13px; - line-height: 20px; - text-align: center; -} - -.mnote-auth-message[data-type="error"] { - color: #D14343; -} - -.mnote-auth-message[data-type="success"] { - color: #23834D; -} - -.mnote-auth-submit { - width: 100%; - height: 42px; - border: 0; - border-radius: 4px; - background: #37352F; - color: #FFF; - cursor: pointer; - font: 600 15px/1 var(--wolai-font-sans); - letter-spacing: 0; -} - -.mnote-auth-submit:hover { - background: #2F2D29; -} - -.mnote-auth-submit:disabled { - cursor: default; - opacity: .58; -} - -.mnote-auth-quick-login { - width: 100%; - height: 42px; - border: 1px solid #DCDAD6; - border-radius: 4px; - background: #FFF; - color: #37352F; - cursor: pointer; - font: 500 14px/1 var(--wolai-font-sans); - letter-spacing: 0; -} - -.mnote-auth-quick-login:hover { - background: #F7F7F5; -} - -.mnote-auth-quick-login:disabled { - cursor: default; - opacity: .58; -} - -.mnote-auth-switch { - display: block; - margin: 18px auto 0; - border: 0; - background: transparent; - color: #6D6D69; - cursor: pointer; - font: 400 14px/1.4 var(--wolai-font-sans); - letter-spacing: 0; -} - -.mnote-auth-switch:hover { - color: #37352F; -} - -@media (max-width: 640px) { - .mnote-auth { - align-items: start; - padding-top: 132px; - } - - .mnote-auth-brand { - top: 24px; - left: 22px; - } -} - -/* ===== ProseMirror 兼容 ===== */ -.ProseMirror { - white-space: pre-wrap; - word-break: break-word; - overflow-wrap: anywhere; -} - -.ProseMirror pre { - white-space: pre-wrap; -} - -/* ===== 响应式 ===== */ - - -.wolai-search-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-start;justify-content:center;padding:92px 24px 24px;background:rgba(0,0,0,.32);pointer-events:none} -.wolai-search-overlay[hidden]{display:none!important} -.wolai-search-dialog{width:min(680px,100%);max-height:min(720px,calc(100vh - 128px));overflow:hidden;display:flex;flex-direction:column;background:#FFF;border:1px solid rgba(27,28,28,.10);border-radius:6px;box-shadow:0 18px 48px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.08);color:#37352F;pointer-events:auto} -.wolai-search-input-row{display:flex;align-items:center;min-height:58px;padding:0 12px 0 18px;border-bottom:1px solid rgba(27,28,28,.08)} -.wolai-search-input-icon{width:22px;height:22px;color:#8B8780;margin-right:10px} -.wolai-search-input{flex:1 1 auto;min-width:0;height:56px;border:0;outline:none;background:transparent;color:#24211D;font:400 18px/1.4 var(--wolai-font-sans);letter-spacing:0} -.wolai-search-input::placeholder{color:#A29E97} -.wolai-search-input::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none;display:none} -.wolai-search-close{width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:#8B8780;cursor:pointer;font-size:20px;line-height:1} -.wolai-search-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 8px;border-bottom:1px solid rgba(27,28,28,.06);color:#A7A39D;font-size:12px;line-height:1} -.wolai-search-options[hidden]{display:none!important} -.wolai-search-options-left,.wolai-search-options-right,.wolai-search-switch-control,.wolai-search-sort-control{display:inline-flex;align-items:center} -.wolai-search-options-left{min-width:0;flex-wrap:wrap;gap:8px 12px} -.wolai-search-options-right{margin-left:auto;flex:0 0 auto} -.wolai-search-switch-control,.wolai-search-sort-control{gap:5px;white-space:nowrap} -.wolai-search-switch,.wolai-search-sort-value{border:0;background:transparent;cursor:pointer;font:inherit;letter-spacing:0} -.wolai-search-switch{position:relative;width:28px;height:16px;border-radius:999px;background:#D6D4D0;box-shadow:inset 0 0 0 1px rgba(27,28,28,.04)} -.wolai-search-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:999px;background:#FFF;box-shadow:0 1px 2px rgba(15,23,42,.22)} -.wolai-search-switch.is-on{background:#C9C7C3} -.wolai-search-switch.is-on::after{transform:translateX(12px)} -.wolai-search-sort-value{display:inline-flex;align-items:center;gap:3px;color:#6D6A65} -.wolai-search-sort-value::after{content:"⌄";color:#B8B4AD;font-size:13px;line-height:1} -.wolai-search-result-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;color:#8B8780;font-size:12px;line-height:1.3;border-bottom:1px solid rgba(27,28,28,.06)} -.wolai-search-results{overflow:auto;padding:6px} -.wolai-search-result-row{width:100%;min-height:54px;display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit} -.wolai-search-result-row:hover{background:rgba(55,53,47,.08)} -.wolai-search-source-group{border-radius:4px} -.wolai-search-source-group + .wolai-search-source-group{margin-top:4px} -.wolai-search-source-header{width:100%;min-height:46px;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit} -.wolai-search-source-header:hover{background:rgba(55,53,47,.08)} -.wolai-search-source-main{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:3px} -.wolai-search-source-results{padding-left:18px} -.wolai-search-source-results[hidden]{display:none!important} -.wolai-search-source-chevron{flex:0 0 auto;margin-top:2px;color:#8B8780;font-size:11px;line-height:1.35} -.wolai-search-result-icon{width:18px;height:18px;margin-top:2px;color:#8B8780} -.wolai-search-result-main{min-width:0;display:flex;flex-direction:column;gap:3px} -.wolai-search-result-title{color:#2F2D29;font-size:14px;line-height:1.35;word-break:break-word} -.wolai-search-result-title mark,.wolai-search-result-snippet mark{padding:0 1px;border-radius:2px;background:#FFE9E6;color:#D83A32} -.wolai-search-result-snippet,.wolai-search-empty{color:#8B8780;font-size:12px;line-height:1.35} -.wolai-search-result-path{display:flex;align-items:center;gap:8px;color:#A09B93;font-size:11px;line-height:1.3;min-width:0} -.wolai-search-result-path span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} -.wolai-search-result-type{flex:0 0 auto;padding:1px 5px;border-radius:4px;background:rgba(55,53,47,.06);color:#6F6A63;text-transform:uppercase;font-size:10px;letter-spacing:0} -.wolai-search-empty,.wolai-search-recent{padding:28px 12px 32px;text-align:center;color:#8B8780;font-size:12px;line-height:1.35} - -@media (max-width: 768px) { - .mnote-sidebar { - width: 200px; - } - - .mnote-home { - padding: 48px 24px; - } - - .mnote-home h1 { - font-size: 28px; - } - - .document-shell-header { - padding: 24px 0 0; - max-width: 100%; - } - - .document-shell-header h1 { - font-size: 28px; - line-height: 36px; - } - - #mnote-editor-island { - margin: 0 24px; - width: auto; - padding-bottom: 24px; - } - - #mnote-search-shell, - #mnote-mindmap-shell { - padding: 24px; - } - - #mnote-search-shell h1, - #mnote-mindmap-shell h1 { - font-size: 24px; - } -} - -@media (max-width: 480px) { - .mnote-sidebar { - width: 100%; - height: auto; - border-right: none; - border-bottom: 1px solid var(--wolai-border); - } - - .mnote-shell { - flex-direction: column; - } - - .mnote-home { - padding: 32px 16px; - } - - .mnote-home h1 { - font-size: 24px; - } - - .document-shell-header { - padding: 16px 0 0; - } - - .document-shell-header h1 { - font-size: 24px; - } - - #mnote-editor-island { - margin: 0 16px; - width: auto; - padding-bottom: 16px; - } -} - -/* ===== Stitch 260429 UI parity overrides ===== */ -:root { - --atelier-surface: #FAF9F9; - --atelier-sidebar: #F5F5F5; - --atelier-sidebar-hover: #ECEBE9; - --atelier-sidebar-active: #E3E2E2; - --atelier-document: #FFFFFF; - --atelier-text: #1B1C1C; - --atelier-text-muted: #8A8782; - --atelier-text-soft: #B7B4AF; - --atelier-outline: #EAEAEA; - --atelier-primary: #006E28; - --atelier-primary-container: #31AA4D; - --atelier-secondary: #2367F6; - --atelier-shadow: 0 16px 32px rgba(27, 28, 28, 0.04); -} - -html, -body { - background: var(--atelier-document); -} - -body { - color: var(--atelier-text); - font-family: Inter, var(--wolai-font-sans); - letter-spacing: 0; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -.mnote-shell, -.wolai-workspace-shell { - background: var(--atelier-document); -} - -.mnote-sidebar, -.wolai-sidebar { - width: var(--mnote-sidebar-width, 248px); - background: var(--atelier-sidebar); - border-right: 0; - box-shadow: none; - overflow: hidden; -} - -.mnote-sidebar-header, -.wolai-sidebar-header { - height: 40px; - padding: 8px 12px; - gap: 8px; -} - -.wolai-avatar { - width: 24px; - height: 24px; - border-radius: 5px; - background: #D6534D; - font-size: 14px; - font-weight: 650; -} - -.wolai-sidebar-header .sidebar-workspace-name, -.sidebar-workspace-name { - max-width: 160px; - color: var(--atelier-text); - font-size: 16px; - font-weight: 700; - line-height: 24px; -} - -.wolai-sidebar-chevron { - color: #55514C; - font-size: 17px; -} - -.wolai-quick-actions { - grid-template-columns: repeat(7, minmax(0, 1fr)); - gap: 10.4px; - padding: 5px 8px 11px; -} - -.wolai-quick-actions a, -.wolai-quick-actions button, -.mnote-sidebar-nav a { - border-radius: 4px; -} - -.wolai-quick-actions a, -.wolai-quick-actions button { - height: 30px; - color: #3F3D39; - font-size: 14px; -} - -.wolai-quick-actions a:hover, -.wolai-quick-actions button:hover { - background: rgba(27, 28, 28, 0.07); -} - -.wolai-sidebar-body { - padding-bottom: 0; -} - -.wolai-sidebar-section { - padding: 0 8px 18px; -} - -.wolai-my-pages-section { - flex: 1 1 auto; - min-height: 0; - display: flex; - flex-direction: column; -} - -.wolai-section-title, -.wolai-sidebar-tabs { - height: 32px; - display: flex; - align-items: center; - gap: 6px; - padding: 0 8px; - color: var(--atelier-text-muted); - font-size: 16px; - line-height: 24px; - font-weight: 500; -} - -.wolai-section-icon { - color: #FF9F1A; -} - -.wolai-section-caret { - color: var(--atelier-text-soft); - font-size: 13px; -} - -.wolai-sidebar-tabs { - gap: 16px; - margin-bottom: 6px; -} - -.wolai-sidebar-tab { - display: inline-flex; - align-items: center; - gap: 5px; - min-height: 26px; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - color: var(--atelier-text-muted); - font: inherit; - line-height: 1; - white-space: nowrap; - cursor: pointer; -} - -.wolai-sidebar-tab:hover { - color: var(--atelier-text); -} - -.wolai-sidebar-tab-active { - color: var(--atelier-text); - border-bottom: 2px solid var(--atelier-primary-container); -} - -.wolai-sidebar-tab-muted { - color: #9B9892; -} - -.wolai-sidebar-tab-panels { - flex: 1 1 auto; - min-height: 0; - overflow-y: auto; - overscroll-behavior: contain; -} - -.wolai-sidebar-tab-panel[hidden] { - display: none !important; -} - -.wolai-folder-icon { - color: #A8A49E; - font-size: 15px; -} - -.wolai-section-add { - margin-left: auto; - width: 22px; - height: 22px; - border-radius: 4px; - color: var(--atelier-text-soft); - font-size: 20px; -} - -.wolai-section-add:hover { - background: var(--atelier-sidebar-hover); - color: var(--atelier-text); -} - -.wolai-section-add + .wolai-section-add { - margin-left: 2px; -} - -.wolai-section-add .material-symbols-outlined { - width: 15px; - height: 15px; - font-size: 15px; - display: block; - color: currentColor; -} - -.wolai-page-row { - min-height: 30px; - gap: 7px; - margin: 1px 4px; - padding: 0 8px 0 12px; - border-radius: 4px; - color: #2D2E2E; - font-size: 14px; - line-height: 1.2; -} - -.wolai-page-row:hover { - background: var(--atelier-sidebar-hover); -} - -.wolai-page-row[data-active="true"], -.wolai-active-row { - background: var(--atelier-sidebar-active); - color: var(--atelier-text); -} - -.wolai-row-caret { - width: 12px; - flex: 0 0 12px; - color: #B8B5AF; - font-size: 16px; -} - -.wolai-row-icon { - width: 20px; - color: #111111; - font-size: 16px; -} - -.wolai-row-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; - min-width: 0; -} - -.wolai-row-more { - width: 26px; - height: 26px; - flex: 0 0 26px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 0; - border-radius: 4px; - background: transparent; - color: #8C8983; - opacity: 0; - cursor: pointer; -} - -.wolai-page-row:hover .wolai-row-more, -.wolai-row-more:focus-visible, -.wolai-row-more[aria-expanded="true"] { - opacity: 1; -} - -.wolai-row-more:hover { - background: #E7E4E0; - color: #4B4945; -} - -.wolai-row-more .material-symbols-outlined { - font-size: 18px; - line-height: 1; -} - -.sidebar-tree-section { - border-top: 0; - margin-top: 0; - padding-top: 0; -} - -.sidebar-tree { - padding: 0; -} - -.sidebar-tree .tree-empty { - padding: 6px 12px; - color: var(--atelier-text-soft); - font-size: 13px; -} - -.sidebar-tree .tree-row { - height: 32px; - gap: 0; - margin: 0 5px; - padding: 0; - border-radius: 4px; - color: #2D2E2E; - font-size: 16px; - line-height: 24px; -} - -.sidebar-tree .tree-row:hover { - background: var(--atelier-sidebar-hover); -} - -.sidebar-tree .tree-row[data-active="true"], -.sidebar-tree .tree-row[data-selected="true"] { - background: rgba(55, 53, 47, 0.08); - color: #2D2E2E; -} - -.sidebar-tree .tree-row[data-drop-feedback="true"], -.sidebar-tree .tree-row[data-drop-target="true"], -.sidebar-tree .tree-root[data-drop-target="true"] { - background: rgba(0, 110, 40, 0.12); - box-shadow: inset 0 0 0 1px rgba(0, 110, 40, 0.28); -} - -.sidebar-tree .tree-toggle, -.sidebar-tree .tree-spacer { - width: 20px; - height: 24px; - color: #B8B5AF; - font-size: 16px; -} - -.sidebar-tree .tree-toggle { - padding: 0; - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 1; - font-size: 0; -} - -.sidebar-tree .tree-toggle:hover { - background: rgba(27, 28, 28, 0.06); -} - -.sidebar-tree .tree-toggle::before { - content: ""; - width: 0; - height: 0; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 5px solid currentColor; - display: block; - transform-origin: 50% 50%; -} - -.sidebar-tree .tree-row[aria-expanded="true"] > .tree-toggle::before { - transform: rotate(90deg); -} - -.sidebar-tree .tree-row[data-active="true"] .tree-toggle { - color: #8F8A84; -} - -.sidebar-tree:not([data-tree-shell-mode="filetree"]) .tree-kind-badge[data-kind="page"] { - display: none; -} - -.sidebar-tree .tree-kind-badge { - --mnote-filetree-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h7l3 3v9H3zM10 2v3h3' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 4h5l1 2h8v8H1z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-markdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h5l3 3v9H4zM9 2v3h3M6 8h4M6 10h4M6 12h2' fill='none' stroke='black' stroke-width='1.35'/%3E%3C/svg%3E"); - --mnote-filetree-icon-table: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13v11h-13zM1.5 6h13M1.5 9.5h13M6 2.5v11m4-11v11' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3h13v10h-13zM3 11l3-3 2 2 2-2 3 3M5 6h.1' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-mindmap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h3v3H3zM10 2h3v3h-3zM10 11h3v3h-3zM6 6l4-2M6 6l4 6' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h7l3 3v9H3zM4.5 9h7M4.5 11h7M10 2v3h3' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-word: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h10v12H3zM5 5h6M5 8h6M5 11h4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-ppt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H2zM5 14h6M8 11v3M5 6h6M5 8h4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12v12H2zM2 6h12M2 10h12M6 2v12m4-12v12' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); - --mnote-filetree-icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5 2 8l3 3V9H4V7h1zm6 0v2h1v2h-1v2l3-3zm-2-2H7L5 13h2z'/%3E%3C/svg%3E"); - --mnote-filetree-icon-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 3h12v10H2zm1 3v6h10V6zm0-2v1h10V4z'/%3E%3C/svg%3E"); - --mnote-filetree-icon-config: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h10v2H3zm0 3h10v2H3zm0 3h10v2H3zM5 3h2v4H5zm4 3h2v4H9z'/%3E%3C/svg%3E"); - --mnote-filetree-icon-office: var(--mnote-filetree-icon-word); - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-file); - width: 20px; - height: 20px; - display: inline-flex; - align-items: center; - justify-content: center; - flex: 0 0 20px; - color: #9A958F; - overflow: visible; - position: relative; -} - -.sidebar-tree .tree-kind-badge::before { - content: ""; - width: 14px; - height: 14px; - display: block; - background: currentColor; - -webkit-mask: var(--mnote-filetree-icon-mask) center / contain no-repeat; - mask: var(--mnote-filetree-icon-mask) center / contain no-repeat; -} - -.sidebar-tree .tree-row[data-index-status="indexed"] .tree-kind-badge::after, -.sidebar-tree .tree-row[data-index-status="indexing"] .tree-kind-badge::after, -.sidebar-tree .tree-row[data-index-status="failed"] .tree-kind-badge::after { - position: absolute; - left: -1px; - bottom: 1px; - width: 9px; - height: 9px; - border-radius: 2px; - color: #FFFFFF; - font-size: 8px; - line-height: 9px; - font-weight: 700; - text-align: center; - box-shadow: 0 0 0 1px #FFFFFF; -} - -.sidebar-tree .tree-row[data-index-status="indexed"] .tree-kind-badge::after { - content: "✓"; - background: #38B86E; -} - -.sidebar-tree .tree-row[data-index-status="indexing"] .tree-kind-badge::after { - content: "…"; - background: #D99A2B; -} - -.sidebar-tree .tree-row[data-index-status="failed"] .tree-kind-badge::after { - content: "x"; - background: #D94841; -} - -.sidebar-tree .tree-kind-badge[data-kind="page"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-file); -} - -.sidebar-tree[data-tree-shell-mode="filetree"] .tree-kind-badge[data-kind="page"]::before, -.sidebar-tree .tree-kind-badge[data-kind="document"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-file); -} - -.sidebar-tree .tree-kind-badge[data-kind="index"]::before, -.sidebar-tree .tree-kind-badge[data-kind="markdown"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-markdown); -} - -.sidebar-tree .tree-kind-badge[data-kind="index"], -.sidebar-tree .tree-kind-badge[data-kind="markdown"], -.sidebar-tree .tree-kind-badge[data-kind="code"] { - color: #111111; -} - -.sidebar-tree .tree-kind-badge[data-kind="code"]::before { --mnote-filetree-icon-mask: var(--mnote-filetree-icon-code); } -.sidebar-tree .tree-kind-badge[data-kind="web"]::before { --mnote-filetree-icon-mask: var(--mnote-filetree-icon-web); } -.sidebar-tree .tree-kind-badge[data-kind="config"]::before { --mnote-filetree-icon-mask: var(--mnote-filetree-icon-config); } - -.sidebar-tree .tree-kind-badge[data-kind="folder"]::before, -.sidebar-tree .tree-kind-badge[data-kind="asset_folder"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-folder); -} - -.sidebar-tree .tree-kind-badge[data-kind="folder"], -.sidebar-tree .tree-kind-badge[data-kind="asset_folder"] { - color: #B8751A; -} - -.sidebar-tree .tree-kind-badge[data-kind="image"] { - color: #5B6CF0; -} - -.sidebar-tree .tree-kind-badge[data-kind="image"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-image); -} - -.sidebar-tree .tree-kind-badge[data-kind="mindmap"] { - color: #4F8F68; -} - -.sidebar-tree .tree-kind-badge[data-kind="mindmap"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-mindmap); -} - -.sidebar-tree .tree-kind-badge[data-kind="pdf"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-pdf); -} - -.sidebar-tree .tree-kind-badge[data-kind="pdf"] { - color: #E74C3C; -} - -.sidebar-tree .tree-kind-badge[data-kind="office"]::before, -.sidebar-tree .tree-kind-badge[data-kind="onlyoffice"]::before, -.sidebar-tree .tree-kind-badge[data-kind="word"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-word); -} - -.sidebar-tree .tree-kind-badge[data-kind="ppt"]::before, -.sidebar-tree .tree-kind-badge[data-kind="presentation"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-ppt); -} - -.sidebar-tree .tree-kind-badge[data-kind="sheet"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-sheet); -} - -.sidebar-tree .tree-kind-badge[data-kind="office"], -.sidebar-tree .tree-kind-badge[data-kind="onlyoffice"], -.sidebar-tree .tree-kind-badge[data-kind="web"], -.sidebar-tree .tree-kind-badge[data-kind="word"] { - color: #4F7DF3; -} - -.sidebar-tree .tree-kind-badge[data-kind="ppt"], -.sidebar-tree .tree-kind-badge[data-kind="presentation"] { - color: #D94841; -} - -.sidebar-tree .tree-kind-badge[data-kind="sheet"] { - color: #2F9E44; -} - -.sidebar-tree .tree-kind-badge[data-kind="table"]::before { - --mnote-filetree-icon-mask: var(--mnote-filetree-icon-table); -} - -.sidebar-tree .tree-kind-badge[data-kind="table"], -.sidebar-tree .tree-kind-badge[data-kind="config"] { - color: #5572A2; -} - -.sidebar-tree .tree-link { - padding: 0 2px; - color: inherit; - font-size: 16px; -} - -.sidebar-tree .tree-link-title { - font-weight: 400; -} - -.sidebar-tree .tree-row[data-active="true"] .tree-link-title { - font-weight: 400; -} - -.sidebar-tree .tree-actions { - gap: 1px; - margin-left: auto; -} - -.sidebar-tree .tree-action { - width: 24px; - height: 24px; - color: #B3B3B3; - border-radius: 4px; -} - -.sidebar-tree .tree-action:hover { - background: rgba(27, 28, 28, 0.07); - color: var(--atelier-text); -} - -.mnote-tree-context-menu { - position: fixed; - z-index: 1000; - width: 220px; - min-width: 220px; - max-width: min(320px, calc(100vw - 16px)); - padding: 6px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 6px; - background: #FFFFFF; - box-shadow: 0 8px 20px rgba(27, 28, 28, 0.12); - backdrop-filter: blur(24px); - color: var(--atelier-text); -} - -.mnote-tree-context-menu__item { - width: 100%; - height: 30px; - min-height: 30px; - display: flex; - align-items: center; - gap: 8px; - padding: 4px 8px; - border: 0; - border-radius: 5px; - background: transparent; - color: inherit; - font: inherit; - font-size: 14px; - line-height: 22px; - text-align: left; - cursor: pointer; -} - -.mnote-tree-context-menu__item:hover { - background: #F4F3F3; -} - -.mnote-tree-context-menu__item:disabled { - opacity: 0.45; - cursor: default; -} - -.mnote-tree-context-menu__item--danger { - color: #D64545; -} - -.mnote-tree-context-menu__item--danger:hover { - background: rgba(214, 69, 69, 0.08); -} - -.mnote-tree-context-menu__icon { - width: 18px; - flex: 0 0 18px; - color: #6D6A65; - font-size: 18px; -} - -.mnote-tree-context-menu__icon::before { - font-size: 18px; -} - -.mnote-tree-context-menu__item--danger .mnote-tree-context-menu__icon { - color: currentColor; -} - -.mnote-tree-context-menu__label { - min-width: 0; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-tree-context-menu__shortcut { - color: #A19D97; - font-size: 12px; -} - -.mnote-tree-context-menu__separator { - height: 1px; - margin: 6px 0; - background: rgba(27, 28, 28, 0.08); -} - -.mnote-attachment-actions { - position: fixed; - z-index: 1100; - display: inline-flex; - align-items: center; - gap: 2px; - height: 28px; - padding: 2px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 6px; - background: #FFFFFF; - box-shadow: 0 6px 18px rgba(27, 28, 28, 0.12); -} - -.mnote-attachment-actions[hidden] { - display: none !important; -} - -.mnote-attachment-action { - width: 24px; - height: 24px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 0; - border-radius: 4px; - background: transparent; - color: #6D6A65; - cursor: pointer; -} - -.mnote-attachment-action:hover { - background: #F4F3F3; - color: #37352F; -} - -.mnote-attachment-action .material-symbols-outlined { - font-size: 18px; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row, -.document-shell .editor-surface .ProseMirror a[href*="/api/local-folder/files/open"] { - display: inline-flex !important; - align-items: center !important; - gap: 7px !important; - max-width: 100% !important; - min-height: 28px !important; - padding: 2px 4px !important; - border-radius: 4px !important; - color: #37352f !important; - font-weight: 500 !important; - line-height: 1.4 !important; - text-decoration: none !important; -} - -.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-missing="true"], -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-missing { - color: #9f1239 !important; - background: #fff1f2 !important; - box-shadow: inset 0 0 0 1px #fecdd3 !important; -} - -.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-unauthorized="true"], -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-unauthorized { - color: #92400e !important; - background: #fffbeb !important; - box-shadow: inset 0 0 0 1px #fde68a !important; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row::before, -.document-shell .editor-surface .ProseMirror a[href*="/api/local-folder/files/open"]::before { - content: "" !important; - display: inline-block !important; - width: 18px !important; - height: 18px !important; - flex: 0 0 18px !important; - border-radius: 4px !important; - background: #6b7280; - box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12) !important; -} - -.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-missing="true"]::before, -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-missing::before { - background: #e11d48 !important; -} - -.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-unauthorized="true"]::before, -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-unauthorized::before { - background: #d97706 !important; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-word::before { - background: #4f7df3; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-ppt::before, -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-pdf::before { - background: #d94841; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-sheet::before { - background: #2f9e44; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-code::before { - background: #111111; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row::after { - content: "" !important; - display: none !important; -} - -.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row[data-file-size]::after { - content: "◔ " attr(data-file-size) !important; - display: inline-block !important; - margin-left: 4px !important; - color: #9ca3af !important; - font-size: 12px !important; - line-height: 1 !important; - white-space: nowrap !important; -} - -.sidebar-tree .tree-node .tree-children .tree-row { - padding-left: 20px; -} - -.sidebar-tree .tree-node .tree-children .tree-children .tree-row { - padding-left: 32px; -} - -.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-row { - padding-left: 44px; -} - -.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-children .tree-row { - padding-left: 56px; -} - -.wolai-file-tree-section { - padding-top: 2px; -} - -.wolai-explorer-title { - margin-bottom: 4px; -} - -.wolai-sidebar-footer { - flex: 0 0 auto; - border-top: 0; - background: var(--atelier-sidebar); -} - -.wolai-footer-entry { - height: 44px; - gap: 8px; - color: #55514C; - font-size: 14px; -} - -.wolai-footer-entry + .wolai-footer-entry { - border-left: 1px solid rgba(27, 28, 28, 0.08); -} - -.mnote-main, -.mnote-content { - background: var(--atelier-document); -} - -.mnote-admin-policy-page{width:min(1080px,calc(100vw - 64px));margin:40px auto 64px}.mnote-admin-policy-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center}.mnote-admin-policy-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.22)}.mnote-admin-policy-modal__panel{position:relative;width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border:1px solid var(--wolai-border);border-radius:8px;background:#fff;box-shadow:0 18px 54px rgba(15,23,42,.18);padding:20px}.mnote-admin-policy-modal__close{position:absolute;right:14px;top:14px;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--wolai-text-secondary);cursor:pointer}.mnote-admin-policy-dialog__content{padding-right:28px}.mnote-admin-policy-header{margin-bottom:20px}.mnote-admin-policy-eyebrow{color:var(--wolai-text-secondary);font-size:13px}.mnote-admin-policy-header h1,.mnote-admin-policy-header h2{font-size:22px;font-weight:650}.mnote-admin-policy-header p,.mnote-admin-policy-note{color:var(--wolai-text-secondary);font-size:14px}.mnote-admin-policy-summary,.mnote-admin-policy-panel,.mnote-admin-policy-form{border:1px solid var(--wolai-border);border-radius:8px;background:#fff}.mnote-admin-policy-summary{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:16px;margin-bottom:16px}.mnote-admin-policy-summary-label{display:block;color:var(--wolai-text-secondary);font-size:12px}.mnote-admin-policy-summary code,.mnote-admin-policy-json{white-space:pre-wrap;overflow-wrap:anywhere;font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:12px}.mnote-admin-policy-panel,.mnote-admin-policy-form{padding:16px;margin-bottom:16px}.mnote-admin-policy-panel-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.mnote-admin-policy-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:16px}.mnote-admin-policy-form{display:flex;flex-direction:column;gap:12px}.mnote-admin-policy-form label{display:flex;flex-direction:column;gap:6px;color:var(--wolai-text-secondary);font-size:12px}.mnote-admin-policy-form input,.mnote-admin-policy-form select{min-height:34px;border:1px solid var(--wolai-border);border-radius:6px;padding:6px 8px;background:#fff}.mnote-admin-policy-form button,.mnote-admin-policy-panel button,.mnote-admin-policy-row button{min-height:34px;border:1px solid var(--wolai-border);border-radius:6px;padding:6px 12px;background:var(--wolai-bg-sidebar);cursor:pointer}.mnote-admin-policy-row button{margin-top:8px;color:#B91C1C}.mnote-admin-policy-json{min-height:48px;max-height:320px;overflow:auto;border-radius:6px;background:var(--wolai-bg-sidebar);padding:10px}.mnote-admin-policy-debug{margin-top:12px}.mnote-admin-policy-table{display:grid;gap:8px}.mnote-admin-policy-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(120px,.5fr) minmax(0,.8fr);gap:12px;border:1px solid var(--wolai-border);border-radius:8px;padding:12px}.mnote-admin-policy-row>div{min-width:0}.mnote-admin-policy-row strong,.mnote-admin-policy-root-link{overflow-wrap:anywhere}.mnote-admin-policy-row strong,.mnote-admin-policy-root-link,.mnote-admin-policy-row span{display:block;min-width:0}.mnote-admin-policy-root-link{color:var(--wolai-text-primary);font-weight:650;text-decoration:none}.mnote-admin-policy-root-link:hover{text-decoration:underline}.mnote-admin-policy-row span{color:var(--wolai-text-secondary);font-size:12px;overflow-wrap:anywhere}.mnote-admin-policy-badge{display:inline-flex!important;margin:2px 4px 2px 0;border-radius:999px;padding:2px 8px;background:var(--wolai-bg-sidebar);font-size:12px}.mnote-admin-policy-badge[data-value="write"]{background:#DCFCE7}.mnote-admin-policy-badge[data-value="read"]{background:#DBEAFE}.mnote-admin-policy-badge[data-value="已撤销"]{background:#FEE2E2}.mnote-admin-policy-empty{border:1px dashed var(--wolai-border);border-radius:8px;padding:18px;color:var(--wolai-text-secondary);background:var(--wolai-bg-sidebar);font-size:13px}@media(max-width:960px){.mnote-admin-policy-summary,.mnote-admin-policy-grid,.mnote-admin-policy-row{grid-template-columns:1fr}.mnote-admin-policy-dialog__content{padding-right:0}} - -.mnote-trash-workbench { - width: min(860px, calc(100vw - 64px)); - margin: 52px auto; - color: var(--atelier-text); -} - -.mnote-trash-modal { - position: fixed; - inset: 0; - z-index: 1200; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: 48px 32px; - background: rgba(25, 24, 22, 0.34); -} - -.mnote-trash-modal__backdrop { - position: absolute; - inset: 0; -} - -.mnote-trash-modal__panel { - position: relative; - width: min(944px, calc(100vw - 96px)); - height: min(870px, calc(100vh - 112px)); - overflow: hidden; - border: 1px solid rgba(27, 28, 28, 0.14); - border-radius: 6px; - background: var(--atelier-document); - box-shadow: 0 18px 52px rgba(27, 28, 28, 0.22); -} - -.mnote-trash-modal__content { - height: 100%; - overflow: auto; -} - -.mnote-trash-modal__content .mnote-trash-workbench { - width: auto; - margin: 28px 32px 40px; -} - -.mnote-trash-modal__close { - position: absolute; - top: 12px; - right: 14px; - z-index: 1; - width: 32px; - height: 32px; - margin: 0; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 6px; - background: #FFFFFF; - color: #37352F; - font: inherit; - font-size: 20px; - line-height: 28px; - cursor: pointer; -} - -.mnote-trash-modal__close:hover { - background: #F7F7F6; -} - -@media (max-width: 720px) { - .mnote-trash-modal { - padding: 24px 12px; - } - - .mnote-trash-modal__panel { - width: calc(100vw - 24px); - height: min(780px, calc(100vh - 48px)); - } - - .mnote-trash-modal__content .mnote-trash-workbench { - margin: 22px 18px 32px; - } -} - -.mnote-trash-header { - margin-bottom: 28px; -} - -.mnote-trash-header h1 { - margin: 0 0 8px; - font-size: 30px; - font-weight: 650; - line-height: 38px; -} - -.mnote-trash-header p { - margin: 0; - color: #6D6A65; - font-size: 14px; - line-height: 22px; -} - -.mnote-trash-status[data-type="error"] { - color: #C93A32; -} - -.mnote-trash-status[data-type="success"] { - color: #23834D; -} - -.mnote-trash-section { - margin-top: 28px; -} - -.mnote-trash-section-title { - display: flex; - min-height: 32px; - align-items: center; - justify-content: space-between; - gap: 16px; -} - -.mnote-trash-section h2 { - margin: 0; - color: #5A5A5A; - font-size: 13px; - font-weight: 600; - line-height: 20px; -} - -.mnote-trash-section h2 span { - color: #9B9A97; - font-weight: 500; -} - -.mnote-trash-row { - display: flex; - min-height: 44px; - align-items: center; - justify-content: space-between; - gap: 16px; - border-top: 1px solid rgba(27, 28, 28, 0.08); -} - -.mnote-trash-row-main { - display: flex; - min-width: 0; - align-items: center; - gap: 10px; -} - -.mnote-trash-title { - min-width: 0; - overflow: hidden; - color: var(--atelier-text); - font-size: 14px; - font-weight: 500; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-trash-meta, -.mnote-trash-kind, -.mnote-trash-note, -.mnote-trash-empty { - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.mnote-trash-actions { - display: flex; - flex: 0 0 auto; - align-items: center; - gap: 8px; -} - -.mnote-trash-actions button { - height: 28px; - padding: 0 10px; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 4px; - background: #FFFFFF; - color: #37352F; - font: inherit; - font-size: 12px; - cursor: pointer; -} - -.mnote-trash-section-title button { - height: 28px; - padding: 0 10px; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 4px; - background: #FFFFFF; - color: #37352F; - font: inherit; - font-size: 12px; - cursor: pointer; -} - -.mnote-trash-actions button:hover:not(:disabled) { - background: #F7F7F6; -} - -.mnote-trash-section-title button:hover:not(:disabled) { - background: #F7F7F6; -} - -.mnote-trash-actions button:disabled, -.mnote-trash-section-title button:disabled { - color: #9B9A97; - cursor: default; -} - -.wolai-topbar { - height: 40px; - padding: 0 20px 0 22px; - background: rgba(255, 255, 255, 0.92); - color: #5A5A5A; - font-size: 14px; - line-height: 1; - backdrop-filter: blur(16px); -} - -.wolai-topbar-left, -.wolai-topbar-actions { - gap: 10px; -} - -.wolai-breadcrumb { - display: flex; - align-items: center; - gap: 9px; - min-width: 0; - color: #6D6A65; -} - -.wolai-breadcrumb-root { - white-space: nowrap; -} - -.wolai-breadcrumb-separator { - color: #D0CDC8; -} - -.wolai-breadcrumb-current { - display: inline-flex; - align-items: center; - gap: 5px; - min-width: 0; - color: var(--atelier-text); - font-weight: 500; -} - -.wolai-home-icon { - color: #111111; - font-size: 16px; -} - -.wolai-icon-button { - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 0; - border-radius: 4px; - background: transparent; - color: #5A5A5A; - font: inherit; - font-size: 18px; - line-height: 1; - cursor: pointer; -} - -.wolai-icon-button:hover { - background: #F4F3F3; - color: var(--atelier-text); -} - -.wolai-menu-button { - color: #3D3B37; - font-size: 21px; -} - -.wolai-public-pill { - height: 22px; - display: inline-flex; - align-items: center; - gap: 5px; - padding: 0 8px; - border: 0; - border-radius: 3px; - background: #ECFCEF; - color: #087B31; - font-size: 12px; - font-weight: 500; -} - -.wolai-ai-inline { - color: var(--atelier-primary-container); -} - -.document-shell { - box-sizing: border-box; - width: min(100%, 760px); - min-height: calc(100vh - 40px); - padding: 68px 0 160px; - margin: 0 auto; -} - -.document-workspace { - --mnote-secondary-pane-width: minmax(320px, 42%); - --mnote-secondary-pane-resizer-width: 6px; - display: grid; - grid-template-columns: minmax(0, 1fr); - align-items: stretch; - width: 100%; - height: 100%; - min-width: 0; - min-height: 0; - overflow: hidden; -} - -.document-workspace[data-has-secondary-pane="true"] { - grid-template-columns: minmax(0, 1fr) var(--mnote-secondary-pane-resizer-width) var(--mnote-secondary-pane-width); -} - -.mnote-navigation-page-host { - width: 100%; - height: 100%; - min-width: 0; - min-height: 0; - overflow: auto; - background: var(--wolai-bg-main); -} - -.mnote-navigation-page { - width: min(960px, calc(100% - 64px)); - margin: 0 auto; - padding: 56px 0 96px; -} - -.mnote-navigation-page__header { - margin-bottom: 28px; -} - -.mnote-navigation-page__header h1 { - margin: 0; - font-size: 28px; - font-weight: 650; - line-height: 1.25; - color: var(--wolai-text-primary); -} - -.mnote-navigation-page__header p { - margin: 8px 0 0; - color: var(--wolai-text-secondary); - font-size: 13px; - line-height: 1.5; - overflow-wrap: anywhere; -} - -.mnote-navigation-page__section { - margin-top: 24px; -} - -.mnote-navigation-page__notice { - margin: 0 0 20px; - padding: 10px 12px; - border: 1px solid rgba(210, 180, 90, 0.42); - border-radius: 6px; - background: rgba(255, 247, 221, 0.72); - color: var(--wolai-text-primary); - font-size: 13px; - line-height: 1.5; -} - -.mnote-navigation-page__notice span { - display: block; - margin-top: 4px; - color: var(--wolai-text-secondary); - overflow-wrap: anywhere; -} - -.mnote-navigation-page__section h2 { - margin: 0 0 10px; - font-size: 13px; - font-weight: 650; - color: var(--wolai-text-secondary); -} - -.mnote-navigation-page__section p { - margin: 0; - color: var(--wolai-text-secondary); - font-size: 13px; -} - -.mnote-navigation-page__item { - display: flex; - align-items: center; - min-height: 34px; - padding: 6px 8px; - border-radius: 6px; - color: var(--wolai-text-primary); - font-size: 14px; - line-height: 1.4; - text-decoration: none; - overflow-wrap: anywhere; -} - -.mnote-navigation-page__item:hover { - background: var(--wolai-bg-sidebar); -} - -.document-main-editor-group { - min-width: 0; - min-height: 0; - height: 100%; - display: flex; - flex-direction: column; - overflow-y: auto; - overscroll-behavior: contain; -} - -.mnote-main-tab-panels { - min-width: 0; - min-height: 0; - flex: 1 1 auto; - display: flex; - flex-direction: column; -} - -.mnote-main-tab-panels > [data-mnote-page-tab-panel] { - min-width: 0; - min-height: 0; - flex: 1 1 auto; - display: flex; - flex-direction: column; -} - -.mnote-main-tab-strip { - min-height: 36px; - display: flex; - align-items: flex-end; - gap: 1px; - border-bottom: 1px solid #E9E9E8; - background: #FAFAF9; - padding: 0 10px; - position: sticky; - top: 0; - z-index: 20; -} - -.mnote-main-tab { - height: 36px; - max-width: 240px; - min-width: 0; - display: inline-flex; - align-items: center; - gap: 7px; - border: 0; - border-radius: 6px 6px 0 0; - background: transparent; - color: #6B6862; - padding: 0 9px; - cursor: pointer; - font-size: 13px; - line-height: 20px; -} - -.mnote-main-tab:hover { - background: #F4F3F3; - color: #1B1C1C; -} - -.mnote-main-tab:focus-visible { - outline: 2px solid #2F80ED; - outline-offset: -2px; -} - -.mnote-main-tab.is-active { - background: #FFF; - color: #1B1C1C; - box-shadow: inset 0 1px 0 #E9E9E8, inset 1px 0 0 #E9E9E8, inset -1px 0 0 #E9E9E8; -} - -.mnote-main-tab.is-close-guarded { - outline: 2px solid #E03E3E; - outline-offset: -2px; -} - -.mnote-main-tab.is-close-guarded .mnote-main-tab-close { - opacity: 0.65; -} - -.mnote-close-guard-notice { - display: flex; - align-items: center; - min-height: 34px; - padding: 7px 16px; - border-bottom: 1px solid #fecaca; - background: #fff3f3; - color: #991b1b; - font-size: 13px; - line-height: 1.45; - transition: opacity 160ms ease; -} - -.mnote-close-guard-notice.is-hiding { - opacity: 0; - pointer-events: none; -} - -.mnote-main-tab-badge { - width: 14px; - height: 14px; - flex: 0 0 14px; - border-radius: 2px; - background: #6b7280; - box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); -} - -.mnote-main-tab[data-mnote-tab-kind="page"] .mnote-main-tab-badge, -.mnote-main-tab[data-mnote-tab-badge-kind="code"] .mnote-main-tab-badge { - background: #111111; -} - -.mnote-main-tab[data-mnote-tab-badge-kind="word"] .mnote-main-tab-badge { - background: #4f7df3; -} - -.mnote-main-tab[data-mnote-tab-badge-kind="ppt"] .mnote-main-tab-badge { - background: #d94841; -} - -.mnote-main-tab[data-mnote-tab-badge-kind="pdf"] .mnote-main-tab-badge { - background: #e74c3c; -} - -.mnote-main-tab[data-mnote-tab-badge-kind="file"] .mnote-main-tab-badge { - background: #6b7280; -} - -.mnote-main-tab[data-mnote-tab-badge-kind="sheet"] .mnote-main-tab-badge { - background: #2f9e44; -} - -.mnote-main-tab[data-mnote-tab-badge-kind="image"] .mnote-main-tab-badge { - background: #5b6cf0; -} - -.mnote-main-tab-title { - min-width: 0; - line-height: 20px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-main-tab-close { - width: 18px; - height: 18px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 0; - border-radius: 4px; - background: transparent; - color: inherit; - padding: 0; - cursor: pointer; -} - -.mnote-main-tab-close:hover { - background: rgba(55, 53, 47, 0.12); -} - -.mnote-main-tab-panels { - min-width: 0; -} - -.mnote-resource-tab-host[hidden], -.mnote-resource-tab-panel[hidden], -[data-mnote-page-tab-panel][hidden] { - display: none !important; -} - -.mnote-resource-tab-host { - flex: 1 1 auto; - min-height: 0; -} - -.mnote-resource-tab-panel-root { - min-height: 0; - height: 100%; -} - -.mnote-resource-tab-panel { - min-height: calc(100vh - 76px); - height: 100%; - min-width: 0; -} - -.mnote-resource-tab-passive-shell { - min-height: calc(100vh - 80px); - background: #FFF; -} - -.mnote-knowledge-rag-toolbar { - display: flex; - align-items: center; - gap: 8px; - min-height: 40px; - padding: 6px 12px; - border-bottom: 1px solid rgba(55, 53, 47, 0.12); - background: #FFF; - color: #37352f; - font-size: 13px; - box-sizing: border-box; -} - -.mnote-knowledge-rag-status { - flex: 1 1 auto; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: #787774; -} - -.mnote-knowledge-rag-toolbar button { - flex: 0 0 auto; - height: 28px; - border: 1px solid rgba(55, 53, 47, 0.16); - border-radius: 4px; - padding: 0 9px; - background: #FFF; - color: #37352f; - font: inherit; - cursor: pointer; -} - -.mnote-knowledge-rag-toolbar button:hover:not(:disabled) { - background: rgba(55, 53, 47, 0.06); -} - -.mnote-knowledge-rag-toolbar button:disabled { - cursor: default; - color: #a8a29e; - background: #f7f6f3; -} - -.mnote-knowledge-rag-task-dock { - position: fixed; - top: 12px; - right: 12px; - bottom: 12px; - z-index: 89; - color: #37352f; - font-size: 13px; - pointer-events: none; -} - -.mnote-knowledge-rag-task-toggle { - position: relative; -} - -.mnote-knowledge-rag-task-badge { - position: absolute; - top: 2px; - right: 2px; - min-width: 14px; - height: 14px; - padding: 0 3px; - border-radius: 999px; - background: #d1453b; - color: #fff; - font-size: 10px; - line-height: 14px; - text-align: center; - box-sizing: border-box; - pointer-events: none; -} - -.mnote-knowledge-rag-task-drawer { - width: min(440px, calc(100vw - 24px)); - height: 100%; - pointer-events: auto; -} - -.mnote-knowledge-rag-task-drawer[hidden] { - display: none !important; -} - -.mnote-knowledge-rag-task-panel { - height: 100%; - display: flex; - flex-direction: column; - gap: 12px; - padding: 14px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 14px; - background: rgba(255, 255, 255, 0.98); - box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14); - box-sizing: border-box; -} - -.mnote-knowledge-rag-task-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; -} - -.mnote-knowledge-rag-task-head > div { - min-width: 0; -} - -.mnote-knowledge-rag-task-head strong { - display: block; - color: #1B1C1C; - font-size: 16px; - font-weight: 650; - line-height: 22px; -} - -.mnote-knowledge-rag-task-head span { - display: block; - margin-top: 2px; - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.mnote-knowledge-rag-task-close { - flex: 0 0 auto; - width: 28px; - height: 28px; - border: 0; - border-radius: 6px; - background: transparent; - color: #787774; - cursor: pointer; -} - -.mnote-knowledge-rag-task-close:hover { - background: rgba(55, 53, 47, 0.08); - color: #37352f; -} - -.mnote-knowledge-rag-task-tabs { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 4px; - padding: 3px; - border-radius: 8px; - background: #F4F3F2; -} - -.mnote-knowledge-rag-task-tabs button { - min-width: 0; - height: 28px; - border: 0; - border-radius: 6px; - background: transparent; - color: #5A5A5A; - font-size: 12px; - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-knowledge-rag-task-tabs button[aria-selected="true"] { - background: #FFF; - color: #1B1C1C; - box-shadow: 0 1px 4px rgba(27, 28, 28, 0.08); -} - -.mnote-knowledge-rag-task-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; -} - -.mnote-knowledge-rag-task-toolbar span { - color: #8B8782; - font-size: 12px; -} - -.mnote-knowledge-rag-task-toolbar button, -.mnote-knowledge-rag-task-actions button { - min-height: 28px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 6px; - background: #FFF; - color: #1B1C1C; - font-size: 12px; - cursor: pointer; -} - -.mnote-knowledge-rag-task-toolbar button:disabled { - color: #AAA6A0; - cursor: default; -} - -.mnote-knowledge-rag-task-list { - min-height: 0; - overflow: auto; - display: flex; - flex-direction: column; - gap: 8px; -} - -.mnote-knowledge-rag-task-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: start; - gap: 12px; - padding: 10px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 8px; - background: #FFF; -} - -.mnote-knowledge-rag-task-main { - min-width: 0; - display: grid; - gap: 5px; -} - -.mnote-knowledge-rag-task-title-line { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; -} - -.mnote-knowledge-rag-task-main strong { - display: block; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: #1B1C1C; - font-size: 13px; - font-weight: 600; - line-height: 18px; -} - -.mnote-knowledge-rag-task-main em { - flex: 0 0 auto; - padding: 1px 6px; - border-radius: 999px; - background: #F0EFED; - color: #8B8782; - font-size: 10px; - font-style: normal; - line-height: 15px; -} - -.mnote-knowledge-rag-task-row[data-mnote-knowledge-rag-task-category="attention"] .mnote-knowledge-rag-task-main em { - background: #FEE2E2; - color: #B3261E; -} - -.mnote-knowledge-rag-task-row[data-mnote-knowledge-rag-task-category="active"] .mnote-knowledge-rag-task-main em { - background: #DBEAFE; - color: #1D4ED8; -} - -.mnote-knowledge-rag-task-main span { - display: block; - min-width: 0; - overflow: hidden; - color: #787774; - font-size: 12px; - line-height: 17px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-knowledge-rag-task-progress { - position: relative; - height: 4px; - overflow: hidden; - border-radius: 999px; - background: #ECE9E4; -} - -.mnote-knowledge-rag-task-progress i { - display: block; - height: 100%; - border-radius: inherit; - background: #5B8DEF; -} - -.mnote-knowledge-rag-task-progress[data-progress-mode="indeterminate"] i { - width: 40%; - animation: mnote-task-progress-slide 1.15s ease-in-out infinite; -} - -@keyframes mnote-task-progress-slide { - 0% { - transform: translateX(-120%); - } - 100% { - transform: translateX(260%); - } -} - -.mnote-knowledge-rag-task-empty { - padding: 24px 12px; - border: 1px dashed rgba(27, 28, 28, 0.12); - border-radius: 8px; - color: #787774; - text-align: center; -} - -.mnote-knowledge-rag-task-actions { - display: grid; - flex: 0 0 auto; - gap: 6px; -} - -.mnote-knowledge-rag-task-actions button { - padding: 0 8px; -} - -.mnote-knowledge-rag-task-actions button[data-mnote-knowledge-rag-task-delete] { - color: #b3261e; -} - -@media (max-width: 720px) { - .mnote-knowledge-rag-task-dock { - left: 12px; - } - - .mnote-knowledge-rag-task-drawer { - width: 100%; - } - - .mnote-knowledge-rag-task-row { - grid-template-columns: 1fr; - } - - .mnote-knowledge-rag-task-actions { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } -} - -.mnote-resource-tab-frame, -.mnote-resource-tab-image, -.mnote-resource-tab-text-shell { - width: 100%; - min-height: calc(100vh - 80px); - border: 0; - background: #FFF; -} - -.mnote-resource-tab-image { - display: block; - object-fit: contain; - padding: 28px; -} - -.mnote-resource-tab-image-shell { - position: relative; - min-height: calc(100vh - 80px); - overflow: auto; - background: #FFF; -} - -.mnote-resource-tab-bbox-highlight { - position: absolute; - border: 2px solid rgba(37, 99, 235, 0.9); - background: rgba(37, 99, 235, 0.16); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); - pointer-events: none; - z-index: 2; -} - -.editor-surface .ProseMirror [data-mnote-evidence-text-highlight="true"], -.mnote-resource-tab-text-shell [data-mnote-evidence-text-highlight="true"] { - outline: 2px solid rgba(37, 99, 235, 0.9); - outline-offset: 3px; - background: rgba(37, 99, 235, 0.1); -} - -.mnote-resource-tab-text-shell { - padding: 34px 48px; -} - -.mnote-resource-tab-code-shell { - display: flex; - flex-direction: column; - width: 100%; - min-height: calc(100vh - 80px); - background: #FFF; - color: #37352F; -} - -.mnote-resource-tab-code-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - height: 42px; - padding: 0 18px; - border-bottom: 1px solid rgba(55, 53, 47, 0.1); - background: #FAFAF8; - box-sizing: border-box; -} - -.mnote-resource-tab-code-title { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 13px; - font-weight: 600; -} - -.mnote-resource-tab-code-meta { - flex: 0 0 auto; - font-size: 12px; - color: #73726E; -} - -.mnote-resource-tab-code-preview { - flex: 1 1 auto; - min-height: 0; - margin: 0; - padding: 18px 22px 48px; - overflow: auto; - background: #1F2328; - color: #F0F3F6; - font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; - white-space: pre; - tab-size: 2; - box-sizing: border-box; -} - -.mnote-resource-tab-error { - display: flex; - place-items: center; - justify-content: center; - width: 100%; - min-height: calc(100vh - 80px); - background: #FFF; - color: #73726e; - font-size: 14px; - line-height: 1.6; - padding: 48px; - box-sizing: border-box; -} - -.mnote-resource-tab-error[data-resource-tab-error="true"] { - display: flex; -} - -.mnote-resource-tab-error-inner { - max-width: 420px; - text-align: center; - border: 1px solid var(--color-basic-200, #E3E3E0); - border-radius: 6px; - padding: 24px 28px; - background: var(--color-basic-50, #F7F7F5); -} - -.mnote-resource-tab-error-inner h1 { - margin: 0 0 8px; - font-size: 15px; - font-weight: 600; - color: var(--color-basic-900, #37352F); -} - -.mnote-resource-tab-error-inner p { - margin: 0; - font-size: 13px; - color: var(--color-basic-600, #9B9A97); -} - -.mnote-resource-tab-mindmap-shell { - width: 100%; - max-width: none; - height: 100%; - min-height: calc(100vh - 80px); - margin: 0; - padding: 0; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.mnote-resource-tab-mindmap-root { - width: 100%; - height: 100%; - min-height: calc(100vh - 80px); - overflow: hidden; - flex: 1 1 auto; -} - -.document-pane[data-pane-role="secondary"] .mnote-resource-tab-mindmap-shell, -[data-testid="mnote-secondary-editor-tab-host"] .mnote-resource-tab-mindmap-shell { - width: 100%; - padding: 0; -} - -.mnote-resource-tab-mindmap-shell [data-testid="mnote-mindmap-editor-root"] { - width: 100%; - height: 100%; - min-height: calc(100vh - 80px); - overflow: hidden; -} - -.mnote-resource-tab-editor-root { - min-height: calc(100vh - 112px); -} - -.document-pane { - min-width: 0; -} - -.document-pane[hidden] { - display: none !important; -} - -.document-pane-resizer { - display: none; - width: var(--mnote-secondary-pane-resizer-width); - min-height: calc(100vh - 40px); - cursor: col-resize; - position: relative; -} - -.document-workspace[data-has-secondary-pane="true"] .document-pane-resizer { - display: block; -} - -.document-pane-resizer::after { - content: ""; - position: absolute; - left: 2px; - top: 64px; - bottom: 48px; - width: 2px; - border-radius: 999px; - background: rgba(27, 28, 28, 0.08); -} - -.document-shell-header { - max-width: none; - padding: 0; - margin: 0 0 50px; -} - -.document-pane-header-row { - display: flex; - align-items: flex-start; - gap: 12px; -} - -.document-pane-header-row .document-title-heading { - flex: 1; - min-width: 0; -} - -.document-page-icon { - display: none; -} - -.mnote-material-page-icon { - width: 72px; - height: 72px; - font-size: 72px; -} - -.mnote-material-page-icon::before { - font-size: 72px; -} - -.document-title-heading, -.document-shell-header h1 { - padding: 0; - margin: 0; - color: var(--atelier-text); - font-size: 34px; - font-weight: 600; - line-height: 44px; - letter-spacing: 0; - text-align: left; -} - -.document-title-input { - width: 100%; - min-height: 44px; - display: block; - resize: none; - overflow: hidden; - border: 0; - outline: none; - background: transparent; - color: inherit; - font: inherit; - line-height: inherit; - letter-spacing: 0; - text-align: inherit; -} - -.document-title-input::placeholder { - color: #B8B5AF; -} - -.document-title-input[data-title-save-status="error"] { - text-decoration: underline; - text-decoration-color: #D6545D; - text-underline-offset: 6px; -} - -.document-pane-close { - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-top: 8px; - border: 0; - border-radius: 4px; - background: transparent; - color: #6D6A65; - cursor: pointer; - flex: 0 0 auto; -} - -.document-pane-close:hover { - background: #F4F3F3; - color: #1B1C1C; -} - -.document-shell-meta { - display: none; -} - -.document-shell-meta span { - display: inline-flex; - align-items: center; - gap: 6px; -} - -.mnote-editor-conflict-panel { - display: flex; - flex-direction: column; - gap: 10px; - margin: -28px 0 28px; - padding: 14px 16px; - border: 1px solid #E2B86C; - border-radius: 8px; - background: #FFF8E6; - color: var(--wolai-text-primary); -} - -.mnote-editor-conflict-panel h2 { - margin: 0; - font-size: 15px; - font-weight: 650; - line-height: 22px; -} - -.mnote-editor-conflict-panel p { - margin: 0; - color: var(--wolai-text-secondary); - font-size: 13px; - line-height: 20px; -} - -.mnote-conflict-meta { - margin: 0; - color: var(--wolai-text-secondary); - font-size: 12px; - line-height: 18px; -} - -.mnote-conflict-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.mnote-conflict-actions button { - min-height: 30px; - border: 1px solid rgba(27, 28, 28, 0.16); - border-radius: 6px; - padding: 5px 10px; - background: #fff; - color: var(--wolai-text-primary); - cursor: pointer; - font-size: 13px; -} - -.mnote-conflict-actions button:hover { - background: var(--wolai-bg-hover); -} - -.mnote-conflict-diff-panel { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; - margin-top: 4px; -} - -.mnote-conflict-diff-panel[hidden] { - display: none; -} - -.mnote-conflict-diff-panel h3 { - margin: 0 0 6px; - font-size: 12px; - font-weight: 650; - color: var(--wolai-text-secondary); -} - -.mnote-conflict-diff-panel pre, -.mnote-conflict-merge-box textarea, -.mnote-conflict-diff-status { - min-height: 96px; - max-height: 260px; - overflow: auto; - border-radius: 6px; - background: rgba(255, 255, 255, 0.7); - padding: 10px; - white-space: pre-wrap; - overflow-wrap: anywhere; - font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; - font-size: 12px; - line-height: 18px; -} - -.mnote-conflict-merge-box { - grid-column: 1 / -1; -} - -.mnote-conflict-merge-box textarea { - width: 100%; - min-height: 132px; - resize: vertical; -} - -@media (max-width: 768px) { - .mnote-conflict-diff-panel { - grid-template-columns: 1fr; - } -} - -#mnote-editor-island { - width: 100%; - max-width: none; - min-height: 360px; - margin: 0; - padding: 0 0 48px; -} - -#mnote-leptos-tiptap-island-editor-root { - min-height: 320px; -} - -[data-editor-host-kind="leptos_tiptap_island"] { - min-height: 320px; -} - -#mnote-leptos-tiptap-island-editor-root .editor-surface { - border: 0 !important; - box-shadow: none !important; - background: transparent !important; - padding: 0 !important; -} - -[data-editor-host-kind="leptos_tiptap_island"] .editor-surface { - border: 0 !important; - box-shadow: none !important; - background: transparent !important; - padding: 0 !important; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror, -.ProseMirror { - color: var(--atelier-text); - font-size: 16px; - line-height: 24px; - outline: none; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror { - width: 100% !important; - min-height: 280px; - margin: 0 !important; - padding: 0 !important; -} - -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { - width: 100% !important; - min-height: 280px; - margin: 0 !important; - padding: 0 !important; -} - -#mnote-leptos-tiptap-island-editor-root .block-handle-shell { - left: -32px !important; - z-index: 80; - opacity: 1; - pointer-events: none; - transition: opacity 120ms ease, transform 120ms ease; -} - -#mnote-leptos-tiptap-island-editor-root .block-handle-shell:hover, -#mnote-leptos-tiptap-island-editor-root .block-handle-shell[data-dragging="true"] { - opacity: 1; -} - -#mnote-leptos-tiptap-island-editor-root .block-handle-shell .block-handle-insert, -#mnote-leptos-tiptap-island-editor-root .block-handle-shell .block-handle-trigger { - pointer-events: auto; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror p { - margin: 0 0 8px; -} - -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p { - margin: 0 0 8px; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror ul, -#mnote-leptos-tiptap-island-editor-root .ProseMirror ol { - margin: 4px 0 8px; - padding-left: 1.5em; -} - -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ul, -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ol { - margin: 4px 0 8px; - padding-left: 1.5em; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror li { - margin: 2px 0; - padding-left: 2px; -} - -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror li { - margin: 2px 0; - padding-left: 2px; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror blockquote { - margin: 8px 0; - padding: 2px 0 2px 14px; - border-left: 3px solid #D9D6D0; - color: #5F5B56; -} - -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror blockquote { - margin: 8px 0; - padding: 2px 0 2px 14px; - border-left: 3px solid #D9D6D0; - color: #5F5B56; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror input[type="checkbox"] { - width: 16px; - height: 16px; - margin: 0 8px 0 0; - vertical-align: -3px; - accent-color: #2EA44F; -} - -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror input[type="checkbox"] { - width: 16px; - height: 16px; - margin: 0 8px 0 0; - vertical-align: -3px; - accent-color: #2EA44F; -} - -#mnote-leptos-tiptap-island-editor-root .ProseMirror h1, -#mnote-leptos-tiptap-island-editor-root .ProseMirror h2, -#mnote-leptos-tiptap-island-editor-root .ProseMirror h3 { - line-height: 1.2; - letter-spacing: 0; -} - -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h1, -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h2, -[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h3 { - line-height: 1.2; - letter-spacing: 0; -} - -.mnote-workspace-active-state { - padding-top: 10px; -} - -.mnote-workspace-active-link { - display: inline-flex; - align-items: center; - gap: 8px; - min-height: 30px; - color: var(--atelier-text); - font-size: 15px; - text-decoration: underline; - text-decoration-color: #D7D4CE; - text-underline-offset: 5px; -} - -.mnote-workspace-active-link::before { - content: "▤"; - color: #A19D97; - text-decoration: none; -} - -.wolai-floating-actions { - right: 24px; - bottom: 44px; - flex-direction: column-reverse; - gap: 16px; - z-index: 50; -} - -.wolai-floating-button { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 999px; - cursor: pointer; -} - -.wolai-floating-button--tasks { - width: 40px; - height: 40px; - border: 1px solid rgba(27, 28, 28, 0.1); - background: rgba(255, 255, 255, 0.86); - color: #5A5A5A; - box-shadow: 0 10px 24px rgba(27, 28, 28, 0.08); - backdrop-filter: blur(16px); - font-size: 18px; -} - -.wolai-floating-button--ai { - width: 40px; - height: 40px; - border: 1px solid rgba(27, 28, 28, 0.1); - background: #FFFFFF; - color: #5A5A5A; - box-shadow: 0 10px 24px rgba(27, 28, 28, 0.08); - font-size: 18px; -} - -.document-shell[data-page-wide-layout="true"] { - width: min(100%, 980px); -} - -.document-pane[data-pane-role="secondary"] .document-shell { - width: min(100%, 820px); - padding-left: 28px; - padding-right: 20px; -} - -.document-pane[data-pane-role="secondary"] .document-shell-header { - margin-bottom: 36px; -} - -.document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror, -.document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror p, -.document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror li { - font-size: 15px; - line-height: 22px; -} - -.document-shell[data-page-small-text="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror, -.document-shell[data-page-small-text="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p, -.document-shell[data-page-small-text="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror li { - font-size: 15px; - line-height: 22px; -} - -.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror p, -.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ul, -.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ol, -.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror blockquote { - margin-bottom: 4px; -} - -.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p, -.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ul, -.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ol, -.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror blockquote { - margin-bottom: 4px; -} - -.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror p, -.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ul, -.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ol, -.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror blockquote { - margin-bottom: 14px; -} - -.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p, -.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ul, -.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ol, -.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror blockquote { - margin-bottom: 14px; -} - -.document-shell[data-page-font="song"] .document-title-input, -.document-shell[data-page-font="song"] #mnote-leptos-tiptap-island-editor-root .ProseMirror { - font-family: "Noto Serif SC", "Songti SC", serif; -} - -.document-shell[data-page-font="song"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { - font-family: "Noto Serif SC", "Songti SC", serif; -} - -.document-shell[data-page-font="kai"] .document-title-input, -.document-shell[data-page-font="kai"] #mnote-leptos-tiptap-island-editor-root .ProseMirror { - font-family: "STKaiti", "KaiTi", serif; -} - -.document-shell[data-page-font="kai"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { - font-family: "STKaiti", "KaiTi", serif; -} - -.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror { - counter-reset: mnote-heading; -} - -.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { - counter-reset: mnote-heading; -} - -.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror h1::before, -.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror h2::before, -.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror h3::before { - counter-increment: mnote-heading; - content: counter(mnote-heading) ". "; - color: #8B8782; - font-weight: 500; -} - -.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h1::before, -.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h2::before, -.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h3::before { - counter-increment: mnote-heading; - content: counter(mnote-heading) ". "; - color: #8B8782; - font-weight: 500; -} - -.wolai-page-settings-popover { - position: fixed; - top: 52px; - right: 18px; - z-index: 90; -} - -.wolai-page-settings-panel { - width: min(360px, calc(100vw - 24px)); - display: flex; - flex-direction: column; - gap: 12px; - padding: 14px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 14px; - background: rgba(255, 255, 255, 0.98); - box-shadow: 0 18px 48px rgba(27, 28, 28, 0.12); -} - -.mnote-settings-panel-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.mnote-settings-panel-head strong { - color: #1B1C1C; - font-size: 14px; - line-height: 20px; -} - -.mnote-settings-panel-close { - width: 28px; - height: 28px; - border: 0; - border-radius: 6px; - background: transparent; - color: #8B8782; - cursor: pointer; - font-size: 18px; - line-height: 1; -} - -.mnote-settings-panel-close:hover { - background: #F4F3F3; - color: #1B1C1C; -} - -.mnote-local-index-settings-panel { - width: min(386px, calc(100vw - 24px)); -} - -.mnote-knowledge-rag-settings-panel { - width: min(440px, calc(100vw - 24px)); - max-height: calc(100vh - 72px); - overflow-y: auto; -} - -.mnote-knowledge-rag-meta { - display: flex; - flex-direction: column; - gap: 5px; -} - -.mnote-knowledge-rag-meta div { - display: grid; - grid-template-columns: 72px minmax(0, 1fr); - gap: 8px; - align-items: baseline; - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.mnote-knowledge-rag-meta code { - min-width: 0; - overflow: hidden; - color: #1B1C1C; - font: 11px/16px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-knowledge-rag-source-list, -.mnote-knowledge-rag-source-inputs { - display: flex; - flex-direction: column; - gap: 6px; -} - -.mnote-knowledge-rag-source-tools { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.mnote-knowledge-rag-control-group .wolai-page-settings-index-actions { - justify-content: flex-start; -} - -.mnote-knowledge-rag-source-filters { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.mnote-knowledge-rag-source-filters button { - border: 1px solid #E3E1DE; - border-radius: 6px; - background: #FFFFFF; - color: #5F5A54; - font-size: 11px; - line-height: 18px; - padding: 2px 7px; - white-space: nowrap; -} - -.mnote-knowledge-rag-source-filters button[data-active="true"] { - border-color: #B8DDBB; - background: #EAF7EA; - color: #166534; -} - -.mnote-knowledge-rag-source-filters button span { - color: #8B8782; - font-variant-numeric: tabular-nums; -} - -.mnote-knowledge-rag-source-row, -.mnote-knowledge-rag-source-input-row { - display: grid; - grid-template-columns: 12px minmax(0, 1fr) auto; - align-items: center; - gap: 8px; -} - -.mnote-knowledge-rag-source-input-row { - grid-template-columns: minmax(0, 1fr) 56px 28px; -} - -.mnote-knowledge-rag-input-status { - color: #8B8782; - font-size: 11px; - line-height: 16px; - text-align: right; - white-space: nowrap; -} - -.mnote-knowledge-rag-input-status[data-status="done"] { - color: #15803D; -} - -.mnote-knowledge-rag-input-status[data-status="running"], -.mnote-knowledge-rag-input-status[data-status="retry"] { - color: #B45309; -} - -.mnote-knowledge-rag-input-status[data-status="failed"] { - color: #B91C1C; -} - -.mnote-knowledge-rag-source-main { - display: flex; - min-width: 0; - flex-direction: column; - gap: 2px; -} - -.mnote-knowledge-rag-source-main strong { - overflow: hidden; - color: #1B1C1C; - font-size: 12px; - font-weight: 600; - line-height: 17px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-knowledge-rag-source-main span { - overflow: hidden; - color: #8B8782; - font: 11px/16px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-knowledge-rag-source-progress { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 8px; - align-items: center; - width: 100%; -} - -.mnote-knowledge-rag-source-progress div { - height: 5px; - overflow: hidden; - border-radius: 999px; - background: #ECE9E3; -} - -.mnote-knowledge-rag-source-progress i { - display: block; - height: 100%; - border-radius: inherit; - background: #2F7D4A; -} - -.mnote-knowledge-rag-source-progress[data-progress-mode="indeterminate"] i { - width: 38%; - animation: mnote-task-progress-slide 1.15s ease-in-out infinite; -} - -.mnote-knowledge-rag-source-progress span { - max-width: 72px; - overflow: hidden; - color: #5F5A54; - font: 10px/14px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mnote-knowledge-rag-source-actions { - display: flex; - gap: 6px; - justify-content: flex-end; -} - -.mnote-knowledge-rag-source-actions button { - min-width: 0; - border: 1px solid #E3E1DE; - border-radius: 6px; - background: #FFFFFF; - color: #5F5A54; - font-size: 11px; - line-height: 18px; - padding: 2px 6px; - white-space: nowrap; -} - -.mnote-knowledge-rag-source-actions button:hover:not(:disabled) { - background: #F4F3F3; - color: #1B1C1C; -} - -.mnote-knowledge-rag-source-actions button:disabled { - opacity: 0.45; -} - -.wolai-page-settings-tabs { - display: flex; - gap: 6px; -} - -.wolai-page-settings-tab { - height: 30px; - padding: 0 10px; - border: 0; - border-radius: 8px; - background: transparent; - color: #6D6A65; - font-size: 13px; - cursor: pointer; -} - -.wolai-page-settings-tab.is-active { - background: #F4F3F3; - color: #1B1C1C; - font-weight: 600; -} - - -/* 扩展面板 */ -.mnote-extensions-panel { - gap: 12px; -} -.mnote-extensions-subtabs { - display: flex; - gap: 4px; - border-bottom: 1px solid #E5E4E4; - padding-bottom: 8px; -} -.mnote-extensions-subtab { - padding: 4px 12px; - border-radius: 6px; - font-size: 13px; - border: none; - background: transparent; - color: #787877; - cursor: pointer; -} -.mnote-extensions-subtab:hover { - background: #F4F3F3; -} -.mnote-extensions-subtab.is-active { - background: #F4F3F3; - color: #1B1C1C; - font-weight: 600; -} -.mnote-extensions-subpanel { - display: flex; - flex-direction: column; - gap: 6px; - max-height: 300px; - overflow-y: auto; -} -.mnote-extensions-item { - padding: 8px 10px; - background: #F9F8F8; - border-radius: 8px; - display: flex; - flex-direction: column; - gap: 4px; -} -.mnote-extensions-item-row { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 13px; -} -.mnote-extensions-label { - color: #787877; -} -.mnote-extensions-detail { - color: #AEADAB; - font-size: 12px; - max-width: 180px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.mnote-extensions-source { - color: #AEADAB; - font-size: 11px; -} -.mnote-extensions-agent-name { - font-weight: 600; - color: #1B1C1C; - font-size: 13px; - margin-bottom: 4px; -} -.mnote-extensions-tool-item { - padding: 2px 0 2px 12px; - font-size: 12px; - color: #585857; - display: flex; - justify-content: space-between; -} -.mnote-extensions-tool-name { - font-family: monospace; - font-size: 11px; -} -.mnote-extensions-tool-disabled { - color: #D15251; - font-size: 10px; -} -.mnote-extensions-loading { - color: #AEADAB; - font-size: 13px; -} -.mnote-extensions-error { - color: #D15251; - font-size: 13px; -} -.mnote-extensions-item-actions { - display: flex; - gap: 8px; - padding-top: 4px; -} -.mnote-status-ready { - color: #409440; - font-weight: 500; -} -.mnote-status-pending { - -/* 知识库详情面板 */ -.mnote-knowledge-rag-detail-tabs { - display: flex; - gap: 2px; - border-bottom: 1px solid #E5E4E4; - padding: 0 16px 0 16px; - margin-bottom: 8px; -} -.mnote-knowledge-rag-detail-tab { - padding: 6px 14px; - border-radius: 6px 6px 0 0; - font-size: 13px; - border: none; - background: transparent; - color: #787877; - cursor: pointer; -} -.mnote-knowledge-rag-detail-tab:hover { - background: #F4F3F3; -} -.mnote-knowledge-rag-detail-tab.is-active { - background: #F4F3F3; - color: #1B1C1C; - font-weight: 600; -} -.mnote-knowledge-rag-detail-panel { - padding: 0 16px 12px 16px; - max-height: 400px; - overflow-y: auto; -} -.mnote-kb-search-form { - display: flex; - gap: 8px; - margin-bottom: 12px; -} -.mnote-kb-search-input { - flex: 1; - padding: 6px 10px; - border: 1px solid #E5E4E4; - border-radius: 6px; - font-size: 13px; - outline: none; -} -.mnote-kb-search-input:focus { - border-color: #8F8E8C; -} -.mnote-kb-search-results { - display: flex; - flex-direction: column; - gap: 6px; -} -.mnote-kb-search-result-item { - padding: 8px 10px; - background: #F9F8F8; - border-radius: 8px; - display: flex; - flex-direction: column; - gap: 4px; -} -.mnote-kb-search-result-header { - display: flex; - justify-content: space-between; - align-items: center; -} -.mnote-kb-search-result-index { - font-weight: 600; - color: #1B1C1C; - font-size: 12px; -} -.mnote-kb-search-result-score { - font-size: 12px; - color: #409440; - font-weight: 500; -} -.mnote-kb-search-result-source { - font-size: 11px; - color: #AEADAB; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.mnote-kb-search-result-preview { - font-size: 12px; - color: #585857; - line-height: 1.5; -} -.mnote-kb-search-result-citation { - font-size: 11px; - color: #7B7A79; - font-family: monospace; -} -.mnote-kb-params-form { - display: flex; - flex-direction: column; - gap: 12px; -} -.mnote-kb-params-row { - display: flex; - align-items: center; - gap: 10px; -} -.mnote-kb-params-label { - font-size: 13px; - color: #585857; - min-width: 90px; -} -.mnote-kb-params-select { - flex: 1; - padding: 4px 8px; - border: 1px solid #E5E4E4; - border-radius: 6px; - font-size: 13px; - outline: none; - background: #fff; -} -.mnote-kb-params-number { - width: 80px; - padding: 4px 8px; - border: 1px solid #E5E4E4; - border-radius: 6px; - font-size: 13px; - outline: none; -} -.mnote-kb-params-range { - flex: 1; - accent-color: #409440; -} -.mnote-kb-params-range-value { - -/* 仪表盘 */ -.mnote-dashboard-panel { - padding: 4px 0; -} -.mnote-dashboard-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; -} -.mnote-dashboard-card { - padding: 12px; - background: #F9F8F8; - border-radius: 8px; - display: flex; - flex-direction: column; - gap: 4px; -} -.mnote-dashboard-card-title { - font-size: 12px; - color: #AEADAB; - font-weight: 500; -} -.mnote-dashboard-card-value { - font-size: 18px; - font-weight: 700; - color: #1B1C1C; -} -.mnote-dashboard-card-desc { - font-size: 11px; - color: #AEADAB; -} - - font-size: 13px; - color: #1B1C1C; - font-weight: 500; - min-width: 32px; - text-align: right; -} - - color: #F09B26; - font-weight: 500; -} - -.wolai-page-settings-section { - display: flex; - flex-direction: column; - gap: 8px; -} - -.wolai-page-settings-section[hidden] { - display: none !important; -} - -.wolai-page-settings-index-panel { - display: flex; - flex-direction: column; - gap: 10px; -} - -.wolai-page-settings-index-status { - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-settings-index-group { - display: flex; - flex-direction: column; - gap: 6px; -} - -.wolai-page-settings-index-title { - color: #1B1C1C; - font-size: 13px; - font-weight: 600; - line-height: 18px; -} - -.wolai-page-settings-index-list { - display: flex; - flex-direction: column; - gap: 6px; -} - -.wolai-page-settings-index-range-list { - display: flex; - flex-direction: column; - gap: 6px; -} - -.wolai-page-settings-index-range-row { - display: grid; - grid-template-columns: 12px minmax(0, 1fr) 28px; - align-items: center; - gap: 8px; -} - -.wolai-page-settings-index-status-dot { - width: 9px; - height: 9px; - border-radius: 999px; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(27, 28, 28, 0.08); -} - -.wolai-page-settings-index-status-dot[data-index-status="indexed"] { - background: #22C55E; -} - -.wolai-page-settings-index-status-dot[data-index-status="indexing"] { - background: #F59E0B; -} - -.wolai-page-settings-index-status-dot[data-index-status="fault"] { - background: #EF4444; -} - -.wolai-page-settings-index-path { - width: 100%; - min-width: 0; - height: 32px; - border: 1px solid #E2DFDA; - border-radius: 6px; - padding: 0 9px; - background: #FFFFFF; - color: #1B1C1C; - font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; -} - -.wolai-page-settings-index-path:disabled { - background: #F7F6F4; - color: #A19D97; -} - -.wolai-page-settings-index-root-hint { - color: #8B8782; - font-size: 11px; - white-space: nowrap; -} - -.wolai-page-settings-index-remove, -.wolai-page-settings-index-add { - border: 1px solid #D8D4CE; - border-radius: 6px; - background: #FFFFFF; - color: #1B1C1C; - cursor: pointer; - font-size: 12px; -} - -.wolai-page-settings-index-remove { - width: 28px; - height: 28px; - padding: 0; - font-size: 16px; - line-height: 1; -} - -.wolai-page-settings-index-add { - width: fit-content; - min-height: 30px; - padding: 5px 10px; -} - -.wolai-page-settings-index-remove:hover:not(:disabled), -.wolai-page-settings-index-add:hover:not(:disabled) { - background: #F4F3F3; -} - -.wolai-page-settings-index-remove:disabled, -.wolai-page-settings-index-add:disabled { - cursor: default; - color: #A19D97; - background: #F7F6F4; -} - -.wolai-page-settings-index-schedule { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(96px, .7fr); - gap: 8px; -} - -.wolai-page-settings-index-schedule label { - display: flex; - min-width: 0; - flex-direction: column; - gap: 4px; - color: #8B8782; - font-size: 12px; - line-height: 16px; -} - -.wolai-page-settings-index-schedule select, -.wolai-page-settings-index-schedule input[type="time"], -.wolai-page-settings-index-schedule input[type="date"] { - width: 100%; - min-height: 30px; - border: 1px solid #E2DFDA; - border-radius: 6px; - padding: 4px 8px; - background: #FFFFFF; - color: #1B1C1C; - font-size: 12px; -} - -.wolai-page-settings-index-inline { - grid-column: 1 / -1; - flex-direction: row !important; - align-items: center; -} - -.wolai-page-settings-index-inline input { - width: 14px; - height: 14px; -} - -.wolai-page-settings-index-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.wolai-page-settings-index-actions button { - min-height: 30px; - border: 1px solid #D8D4CE; - border-radius: 6px; - padding: 5px 10px; - background: #FFFFFF; - color: #1B1C1C; - cursor: pointer; - font-size: 12px; -} - -.wolai-page-settings-index-row, -.wolai-page-settings-index-empty { - padding: 8px 10px; - border-radius: 8px; - background: #F7F6F4; -} - -.wolai-page-settings-index-row { - display: flex; - min-width: 0; - flex-direction: column; - gap: 2px; -} - -.wolai-page-settings-index-row.is-tag { - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 8px; -} - -.wolai-page-settings-index-row-title { - min-width: 0; - overflow: hidden; - color: #1B1C1C; - font-size: 13px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-settings-index-row-meta, -.wolai-page-settings-index-row-snippet, -.wolai-page-settings-index-empty { - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-setting-row { - min-height: 48px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 8px 0; -} - -.wolai-page-setting-row.is-pending { - opacity: 0.72; -} - -.wolai-page-setting-copy { - display: flex; - min-width: 0; - flex-direction: column; - gap: 3px; -} - -.wolai-page-setting-label { - color: #1B1C1C; - font-size: 14px; - line-height: 20px; -} - -.wolai-page-setting-hint, -.wolai-page-settings-global-note { - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-setting-checkbox { - width: 16px; - height: 16px; - flex: 0 0 auto; -} - -.wolai-page-setting-select { - min-width: 96px; - height: 30px; - padding: 0 10px; - border: 1px solid rgba(27, 28, 28, 0.1); - border-radius: 8px; - background: #FFF; - color: #1B1C1C; - font-size: 13px; -} - -.wolai-page-settings-actions { - display: flex; - flex-direction: column; - gap: 6px; - padding-top: 4px; - border-top: 1px solid rgba(27, 28, 28, 0.06); -} - -.wolai-page-settings-action { - min-height: 34px; - display: flex; - align-items: center; - justify-content: flex-start; - padding: 0 10px; - border: 0; - border-radius: 8px; - background: transparent; - color: #1B1C1C; - font-size: 13px; - cursor: pointer; -} - -.wolai-page-settings-action:hover { - background: #F4F3F3; -} - -.wolai-page-settings-action.is-disabled { - color: #A19D97; - cursor: not-allowed; -} - -.wolai-page-settings-action.is-danger { - color: #C44B55; -} - -.wolai-page-settings-stats { - display: flex; - flex-wrap: wrap; - gap: 8px 12px; - padding-top: 4px; - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-history-drawer { - position: fixed; - inset: 0; - z-index: 88; - background: rgba(27, 28, 28, 0.04); -} - -.wolai-page-history-drawer[hidden] { - display: none !important; -} - -.wolai-page-history-panel { - position: absolute; - top: 16px; - right: 16px; - bottom: 16px; - width: min(380px, calc(100vw - 24px)); - display: flex; - flex-direction: column; - gap: 14px; - padding: 16px; - border-left: 1px solid rgba(27, 28, 28, 0.08); - background: #FFF; - box-shadow: -18px 0 42px rgba(27, 28, 28, 0.12); -} - -.wolai-page-history-header, -.wolai-page-share-header, -.wolai-page-ai-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; -} - -.wolai-page-history-title, -.wolai-page-share-title, -.wolai-page-ai-title { - color: #1B1C1C; - font-size: 16px; - font-weight: 600; - line-height: 24px; -} - -.wolai-page-history-subtitle, -.wolai-page-share-subtitle, -.wolai-page-ai-subtitle { - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.wolai-surface-close { - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 0; - border-radius: 8px; - background: transparent; - color: #5A5A5A; - cursor: pointer; -} - -.wolai-surface-close:hover { - background: #F4F3F3; -} - -.wolai-page-history-list { - display: flex; - flex: 1 1 auto; - flex-direction: column; - gap: 10px; - overflow: auto; -} - -.wolai-page-history-item { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 12px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 10px; - background: #FFF; -} - -.wolai-page-history-item-title { - color: #1B1C1C; - font-size: 13px; - font-weight: 500; - line-height: 20px; -} - -.wolai-page-history-item-meta, -.wolai-page-history-empty, -.wolai-page-share-copy, -.wolai-page-share-footer, -.wolai-page-ai-empty, -.wolai-page-ai-message-role { - color: #8B8782; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-history-item-ghost, -.wolai-page-ai-ghost, -.wolai-page-ai-tab, -.wolai-page-ai-model-chip, -.wolai-page-share-copy-button { - height: 30px; - padding: 0 10px; - border: 0; - border-radius: 8px; - background: #F4F3F3; - color: #1B1C1C; - font-size: 12px; - cursor: pointer; -} - -.wolai-page-ai-ghost--danger { - color: #B33A3A; -} - -.wolai-page-share-dialog { - position: fixed; - inset: 0; - z-index: 92; - display: flex; - align-items: center; - justify-content: center; - padding: 16px; - background: rgba(27, 28, 28, 0.12); -} - -.wolai-page-share-dialog[hidden] { - display: none !important; -} - -.wolai-page-share-card { - width: min(460px, calc(100vw - 24px)); - display: flex; - flex-direction: column; - gap: 16px; - padding: 18px; - border-radius: 16px; - background: #FFF; - box-shadow: 0 18px 48px rgba(27, 28, 28, 0.18); -} - -.wolai-page-share-state { - display: flex; - flex-direction: column; - gap: 8px; -} - -.wolai-public-pill--inline { - width: fit-content; -} - -.wolai-page-share-url-row { - display: flex; - gap: 8px; -} - -.wolai-page-share-url { - flex: 1 1 auto; - height: 34px; - padding: 0 10px; - border: 1px solid rgba(27, 28, 28, 0.1); - border-radius: 8px; - background: #FFF; - color: #1B1C1C; - font-size: 13px; -} - -.wolai-page-ai-drawer { - position: fixed; - top: 12px; - right: 12px; - bottom: 12px; - z-index: 89; - --mnote-page-ai-width: 440px; -} - -.wolai-page-ai-drawer[hidden] { - display: none !important; -} - -.wolai-page-ai-panel { - width: min(var(--mnote-page-ai-width), calc(100vw - 24px)); - height: 100%; - display: flex; - flex-direction: column; - gap: 12px; - padding: 14px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 14px; - background: rgba(255, 255, 255, 0.98); - box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14); -} - -.wolai-page-ai-resize-handle { - position: absolute; - top: 10px; - bottom: 10px; - left: -6px; - width: 12px; - cursor: col-resize; - touch-action: none; -} - -.wolai-page-ai-resize-handle::before { - position: absolute; - top: 14px; - bottom: 14px; - left: 5px; - width: 2px; - border-radius: 999px; - background: transparent; - content: ""; -} - -.wolai-page-ai-resize-handle:hover::before, -.wolai-page-ai-drawer[data-page-ai-resizing="true"] .wolai-page-ai-resize-handle::before { - background: rgba(27, 28, 28, 0.18); -} - -html[data-mnote-page-ai-resizing="true"] { - cursor: col-resize; - user-select: none; -} - -.wolai-page-ai-header-copy { - display: flex; - flex-direction: column; - gap: 4px; -} - -.wolai-page-ai-header-actions { - display: inline-flex; - align-items: center; - gap: 4px; -} - -.wolai-page-ai-icon { - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 0; - border-radius: 6px; - background: transparent; - color: #5A5A5A; - font-size: 16px; - line-height: 1; - cursor: pointer; -} - -.wolai-page-ai-icon-svg { - width: 16px; - height: 16px; - display: block; - fill: currentColor; -} - -.wolai-page-ai-icon:hover, -.wolai-page-ai-icon.is-active { - background: #F3F3F2; - color: #1B1C1C; -} - -.wolai-page-ai-statuslabel, -.wolai-page-ai-profile-select span, -.wolai-page-ai-context-select span, -.wolai-page-ai-skill-search span, -.wolai-page-ai-memory-scope, -.wolai-page-ai-skill-source { - display: block; - color: #8B8782; - font-size: 11px; - line-height: 16px; -} - -.wolai-page-ai-subtitle { - display: flex; - min-width: 0; - flex-wrap: wrap; - gap: 4px 8px; -} - -.wolai-page-ai-subtitle span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-subtitle span:not(:first-child)::before, -.wolai-page-ai-chat-meta span:not(:first-child)::before { - margin-right: 8px; - color: #C9C5BE; - content: "·"; -} - -.wolai-page-ai-runtime-strip { - display: flex; - width: 100%; - min-height: 28px; - flex-wrap: wrap; - align-items: center; - gap: 6px; - padding: 0 14px 8px; - border: 0; - background: transparent; - color: #6B6762; - cursor: pointer; - font-size: 11px; - line-height: 16px; - text-align: left; -} - -.wolai-page-ai-runtime-strip:hover span { - border-color: rgba(27, 28, 28, 0.16); - background: #F1F1EF; -} - -.wolai-page-ai-runtime-strip span { - max-width: 100%; - overflow: hidden; - padding: 2px 6px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 6px; - background: #F8F8F7; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-statusvalue { - display: block; - min-width: 0; - overflow: hidden; - color: #1B1C1C; - font-size: 12px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-settings-link { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 34px; - padding: 0 10px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 8px; - background: #FFF; - color: #1B1C1C; - font-size: 12px; - text-decoration: none; - cursor: pointer; -} - -.wolai-page-ai-settings-link:disabled { - color: #AAA6A0; - cursor: not-allowed; -} - -.wolai-page-ai-settings-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) 132px; - gap: 8px; -} - -.wolai-page-ai-profile-select, -.wolai-page-ai-context-select, -.wolai-page-ai-skill-search, -.wolai-page-ai-agent-profile { - display: grid; - gap: 4px; - min-width: 0; -} - -.wolai-page-ai-profile-select select, -.wolai-page-ai-context-select select, -.wolai-page-ai-skill-search input, -.wolai-page-ai-skill-search select, -.wolai-page-ai-agent-profile select { - width: 100%; - min-width: 0; - height: 34px; - padding: 0 10px; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 8px; - background: #FFF; - color: #1B1C1C; - font-size: 12px; -} - -.wolai-page-ai-agent-profile { - margin-top: 8px; -} - -.wolai-page-ai-inline-error { - padding: 8px 10px; - border: 1px solid rgba(198, 80, 80, 0.18); - border-radius: 8px; - background: #FFF5F5; - color: #9F2D2D; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-ai-body { - display: flex; - min-height: 0; - flex: 1 1 auto; - flex-direction: column; - gap: 10px; -} - -.wolai-page-ai-panel-section { - display: flex; - min-height: 0; - flex: 1 1 auto; - flex-direction: column; - gap: 10px; -} - -.wolai-page-ai-panel-section[hidden] { - display: none !important; -} - -.wolai-page-ai-drawer:not([data-page-ai-page="chat"]) .wolai-page-ai-footer { - display: none; -} - -.wolai-page-ai-chat-meta { - display: flex; - min-height: 24px; - align-items: center; - gap: 8px; - overflow: hidden; - color: #8B8782; - font-size: 11px; - line-height: 16px; -} - -.wolai-page-ai-session-summary { - min-width: 0; - max-width: 190px; - overflow: hidden; - padding: 0; - color: #5A5A5A; - font: inherit; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-settings-head { - display: grid; - grid-template-columns: auto minmax(0, 1fr); - gap: 8px; - align-items: center; -} - -.wolai-page-ai-back { - height: 30px; - padding: 0 8px; - border: 0; - border-radius: 6px; - background: transparent; - color: #5A5A5A; - font-size: 12px; - cursor: pointer; -} - -.wolai-page-ai-back:hover { - background: #F3F3F2; - color: #1B1C1C; -} - -.wolai-page-ai-settings-tabs { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 4px; - padding: 2px; - border-radius: 8px; - background: #F3F3F2; -} - -.wolai-page-ai-suggestions { - display: flex; - flex-direction: column; - gap: 8px; -} - -.wolai-page-ai-suggestions[hidden] { - display: none !important; -} - -.wolai-page-ai-suggestions-header, -.wolai-page-ai-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; -} - -.wolai-page-ai-intents { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: 6px; -} - -.wolai-page-ai-suggestion-list, -.wolai-page-ai-toolbar { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.wolai-page-ai-tools-panel { - display: grid; - gap: 8px; - padding: 10px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 8px; - background: #FAFAFA; -} - -.wolai-page-ai-tools-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - color: #8B8782; - font-size: 11px; - line-height: 16px; -} - -.wolai-page-ai-tools-head span:last-child { - min-width: 0; - overflow: hidden; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-tool-list { - display: grid; - max-height: 140px; - gap: 6px; - overflow: auto; -} - -[data-page-ai-tool-list].wolai-page-ai-tool-list { - max-height: min(420px, calc(100vh - 330px)); -} - -.wolai-page-ai-tool-row { - display: grid; - gap: 2px; - padding: 6px 8px; - border-radius: 8px; - background: #FFF; -} - -.wolai-page-ai-tool-name { - overflow: hidden; - color: #1B1C1C; - font-size: 12px; - font-weight: 600; - line-height: 16px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-tool-meta { - overflow: hidden; - color: #8B8782; - font-size: 11px; - line-height: 16px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-changed-files { - overflow: auto; - text-overflow: clip; - white-space: pre-wrap; -} - -.wolai-page-ai-provider-group { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.wolai-page-ai-suggestion { - min-height: 30px; - padding: 6px 9px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 8px; - background: #FFF; - color: #1B1C1C; - font-size: 12px; - text-align: left; - cursor: pointer; -} - -.wolai-page-ai-conversation { - display: flex; - min-height: 0; - flex: 1 1 auto; - flex-direction: column; - gap: 10px; - overflow: auto; -} - -.wolai-page-ai-memory-grid { - display: flex; - min-height: 0; - flex: 1 1 auto; - flex-direction: column; - gap: 10px; - overflow: auto; -} - -.wolai-page-ai-settings-stack { - display: grid; - gap: 10px; -} - -.wolai-page-ai-memory-card { - display: grid; - gap: 8px; - padding: 10px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 8px; - background: #FFF; -} - -.wolai-page-ai-memory-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 8px; -} - -.wolai-page-ai-memory-title, -.wolai-page-ai-skill-name { - color: #1B1C1C; - font-size: 13px; - font-weight: 600; - line-height: 18px; -} - -.wolai-page-ai-memory-editor { - width: 100%; - min-height: 118px; - padding: 10px; - border: 1px solid rgba(27, 28, 28, 0.1); - border-radius: 8px; - background: #FAFAFA; - color: #1B1C1C; - font-size: 12px; - line-height: 18px; - resize: vertical; -} - -.wolai-page-ai-skills-toolbar { - display: grid; - grid-template-columns: minmax(0, 1fr); - align-items: end; - gap: 8px; -} - -.wolai-page-ai-skill-filter-toggle { - display: inline-flex; - grid-column: 1 / -1; - min-height: 34px; - align-items: center; - gap: 6px; - color: #5A5A5A; - font-size: 12px; - line-height: 18px; - white-space: nowrap; -} - -.wolai-page-ai-skill-filter-toggle input { - width: 14px; - height: 14px; - margin: 0; -} - -.wolai-page-ai-skill-list { - display: flex; - min-height: 0; - flex: 1 1 auto; - flex-direction: column; - gap: 4px; - overflow: auto; -} - -.wolai-page-ai-skill-group { - display: grid; - gap: 4px; -} - -.wolai-page-ai-skill-group-head { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - gap: 8px; - padding: 6px 8px 2px; - border: 0; - border-radius: 6px; - background: transparent; - color: #8B8782; - font-size: 11px; - line-height: 16px; - cursor: pointer; -} - -.wolai-page-ai-skill-group-head:hover { - background: #F7F7F6; - color: #5A5A5A; -} - -.wolai-page-ai-skill-group-title { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 5px; -} - -.wolai-page-ai-skill-group-chevron { - width: 12px; - color: #AAA6A0; - text-align: center; -} - -.wolai-page-ai-skill-row { - display: flex; - min-height: 38px; - align-items: flex-start; - justify-content: space-between; - gap: 10px; - padding: 8px; - border: 0; - border-radius: 6px; - background: transparent; -} - -.wolai-page-ai-skill-row:hover { - background: #F7F7F6; -} - -.wolai-page-ai-skill-copy { - display: grid; - gap: 2px; - min-width: 0; - flex: 1 1 auto; -} - -.wolai-page-ai-skill-main { - display: grid; - min-width: 0; - gap: 2px; -} - -.wolai-page-ai-skill-name { - min-width: 0; - overflow: visible; - text-overflow: clip; - white-space: normal; - word-break: break-word; -} - -.wolai-page-ai-skill-desc { - overflow: hidden; - color: #5A5A5A; - font-size: 11px; - line-height: 15px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - text-overflow: clip; - white-space: normal; -} - -.wolai-page-ai-skill-source { - padding: 0; - border-radius: 0; - background: transparent; - color: #8B8782; - font-size: 10px; - line-height: 14px; - white-space: normal; - word-break: break-word; -} - -.wolai-page-ai-skill-switch { - position: relative; - width: 32px; - height: 18px; - flex: 0 0 32px; - border: 0; - border-radius: 999px; - background: #D8D6D1; - cursor: pointer; -} - -.wolai-page-ai-skill-switch span { - position: absolute; - top: 2px; - left: 2px; - width: 14px; - height: 14px; - border-radius: 50%; - background: #FFF; - box-shadow: 0 1px 3px rgba(27, 28, 28, 0.16); - transition: transform 0.16s ease; -} - -.wolai-page-ai-skill-switch.is-on { - background: #F97316; -} - -.wolai-page-ai-skill-switch.is-on span { - transform: translateX(14px); -} - -.wolai-page-ai-skill-readonly-badge { - flex: 0 0 auto; - margin-top: 2px; - padding: 2px 6px; - border-radius: 999px; - background: #F0EFED; - color: #8B8782; - font-size: 10px; - line-height: 14px; -} - -.wolai-page-ai-message { - display: flex; - flex-direction: column; - gap: 4px; - padding: 10px 12px; - border-radius: 12px; - background: #F7F7F7; -} - -.wolai-page-ai-message--history { - position: relative; - display: grid; - grid-template-columns: 24px minmax(0, 1fr) auto; - width: 100%; - min-height: 58px; - align-items: flex-start; - gap: 6px; - padding: 8px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 8px; - text-align: left; -} - -.wolai-page-ai-message--history.is-active { - border-color: rgba(27, 28, 28, 0.28); - background: #F4F8FF; -} - -.wolai-page-ai-message--history.is-selected { - border-color: rgba(37, 99, 235, 0.36); - background: #F5F8FF; -} - -.wolai-page-ai-history-selection { - display: flex; - min-width: 0; - align-items: center; - justify-content: flex-end; - gap: 6px; - color: #5A5A5A; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-ai-history-selection[hidden] { - display: none !important; -} - -.wolai-page-ai-session-check { - width: 20px; - height: 20px; - margin-top: 1px; - padding: 0; - border: 1px solid rgba(27, 28, 28, 0.18); - border-radius: 6px; - background: #FFF; - color: #2563EB; - cursor: pointer; - opacity: 0; -} - -.wolai-page-ai-session-check span { - display: grid; - width: 100%; - height: 100%; - place-items: center; - font-size: 12px; - line-height: 1; -} - -.wolai-page-ai-message--history:hover .wolai-page-ai-session-check, -.wolai-page-ai-message--history:focus-within .wolai-page-ai-session-check, -.wolai-page-ai-message--history.is-selected .wolai-page-ai-session-check { - opacity: 1; -} - -.wolai-page-ai-session-check[aria-checked="true"] { - border-color: rgba(37, 99, 235, 0.5); - background: #EAF1FF; -} - -.wolai-page-ai-message--user { - background: #F4F8FF; -} - -.wolai-page-ai-message[data-page-ai-streaming="true"] .wolai-page-ai-message-role::after { - content: " · 输出中"; -} - -.wolai-page-ai-message-text { - color: #1B1C1C; - font-size: 13px; - line-height: 20px; - white-space: pre-wrap; -} - -.wolai-page-ai-message-text > * { - white-space: normal; -} - -.wolai-page-ai-message-text p, -.wolai-page-ai-message-text ul, -.wolai-page-ai-message-text ol, -.wolai-page-ai-message-text pre, -.wolai-page-ai-message-text table { - margin: 6px 0; -} - -.wolai-page-ai-message-text h1, -.wolai-page-ai-message-text h2, -.wolai-page-ai-message-text h3, -.wolai-page-ai-message-text h4, -.wolai-page-ai-message-text h5, -.wolai-page-ai-message-text h6 { - margin: 8px 0 4px; - color: #1B1C1C; - font-size: 14px; - font-weight: 700; - line-height: 20px; -} - -.wolai-page-ai-message-text ul, -.wolai-page-ai-message-text ol { - padding-left: 18px; -} - -.wolai-page-ai-message-text a { - color: #2563EB; - overflow-wrap: anywhere; - text-decoration: underline; - text-underline-offset: 2px; -} - -.wolai-page-ai-message-text pre { - overflow: auto; - padding: 8px 10px; - border-radius: 6px; - background: #F7F6F4; - font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; -} - -.wolai-page-ai-message-text code { - border-radius: 4px; - padding: 1px 3px; - background: #F1F0EE; - font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; -} - -.wolai-page-ai-message-text pre code { - padding: 0; - background: transparent; -} - -.wolai-page-ai-message-text hr { - height: 1px; - margin: 8px 0; - border: 0; - background: rgba(27, 28, 28, 0.12); -} - -.wolai-page-ai-plan-card { - gap: 10px; - border: 1px solid rgba(14, 116, 144, 0.22); - background: #F0F9FF; - color: #0F172A; -} - -.wolai-page-ai-plan-card-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 10px; -} - -.wolai-page-ai-plan-card-title-wrap { - display: grid; - min-width: 0; - gap: 1px; -} - -.wolai-page-ai-plan-card-kicker { - color: #0369A1; - font-size: 11px; - line-height: 16px; - font-weight: 600; -} - -.wolai-page-ai-plan-card-title { - color: #0C4A6E; - font-size: 14px; - line-height: 20px; -} - -.wolai-page-ai-plan-card-badge { - display: inline-flex; - flex-shrink: 0; - align-items: center; - border-radius: 999px; - padding: 2px 8px; - background: #BAE6FD; - color: #075985; - font-size: 11px; - line-height: 16px; - font-weight: 600; -} - -.wolai-page-ai-plan-card-markdown { - display: grid; - gap: 6px; - color: #1E293B; - font-size: 13px; - line-height: 20px; -} - -.wolai-page-ai-plan-card-markdown > * { - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -.wolai-page-ai-plan-card-markdown .wolai-page-ai-markdown-table-wrap { - border: 1px solid rgba(14, 116, 144, 0.16); - border-radius: 8px; - background: rgba(255, 255, 255, 0.72); -} - -.wolai-page-ai-plan-step-list { - display: grid; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; -} - -.wolai-page-ai-plan-step-item { - display: flex; - align-items: flex-start; - gap: 8px; - min-width: 0; - padding: 8px 10px; - border: 1px solid rgba(255, 255, 255, 0.78); - border-radius: 8px; - background: rgba(255, 255, 255, 0.78); - color: #334155; - font-size: 12px; - line-height: 18px; -} - -.wolai-page-ai-plan-step-item[data-status="completed"] { - border-color: rgba(16, 185, 129, 0.28); - background: rgba(236, 253, 245, 0.88); -} - -.wolai-page-ai-plan-step-item[data-status="inProgress"] { - border-color: rgba(245, 158, 11, 0.28); - background: rgba(255, 251, 235, 0.9); -} - -.wolai-page-ai-plan-step-status { - display: inline-flex; - width: 18px; - height: 18px; - flex: 0 0 18px; - align-items: center; - justify-content: center; - border-radius: 999px; - background: #E2E8F0; - color: #475569; - font-size: 11px; - line-height: 18px; - font-weight: 700; -} - -.wolai-page-ai-plan-step-status[data-status="completed"] { - background: #BBF7D0; - color: #166534; -} - -.wolai-page-ai-plan-step-status[data-status="inProgress"] { - background: #FDE68A; - color: #92400E; -} - -.wolai-page-ai-plan-step-text { - min-width: 0; - overflow-wrap: anywhere; -} - -.wolai-page-ai-plan-card-actions { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: 6px; -} - -.wolai-page-ai-plan-card-button { - height: 30px; - padding: 0 10px; - border: 1px solid rgba(14, 116, 144, 0.14); - border-radius: 999px; - background: rgba(255, 255, 255, 0.86); - color: #0F172A; - font-size: 12px; - font-weight: 600; - cursor: pointer; -} - -.wolai-page-ai-plan-card-button--primary { - border-color: #0284C7; - background: #0284C7; - color: #FFFFFF; -} - -.wolai-page-ai-plan-card-button--danger { - color: #B33A3A; -} - -.wolai-page-ai-permission-card { - gap: 10px; - border: 1px solid rgba(180, 83, 9, 0.18); - background: #FFF7ED; -} - -.wolai-page-ai-permission-card-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 10px; -} - -.wolai-page-ai-permission-badge { - display: inline-flex; - flex-shrink: 0; - align-items: center; - border-radius: 999px; - padding: 2px 8px; - background: #FED7AA; - color: #9A3412; - font-size: 11px; - line-height: 16px; - font-weight: 600; -} - -.wolai-page-ai-permission-summary { - display: grid; - gap: 6px; -} - -.wolai-page-ai-permission-row { - display: grid; - grid-template-columns: 54px minmax(0, 1fr); - gap: 8px; - align-items: start; - padding: 7px 8px; - border: 1px solid rgba(180, 83, 9, 0.12); - border-radius: 8px; - background: rgba(255, 255, 255, 0.74); -} - -.wolai-page-ai-permission-row span { - color: #9A3412; - font-size: 11px; - line-height: 17px; - font-weight: 600; -} - -.wolai-page-ai-permission-row strong { - min-width: 0; - overflow-wrap: anywhere; - color: #1B1C1C; - font-size: 12px; - line-height: 18px; - font-weight: 600; -} - -.wolai-page-ai-permission-card .wolai-page-ai-message-actions, -.wolai-page-ai-permission-dialog .wolai-page-ai-message-actions { - margin-top: 8px; - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.wolai-page-ai-markdown-table-wrap { - max-width: 100%; - overflow-x: auto; -} - -.wolai-page-ai-markdown-table-wrap table { - width: 100%; - border-collapse: collapse; - table-layout: auto; - background: #FFFFFF; -} - -.wolai-page-ai-markdown-table-wrap th, -.wolai-page-ai-markdown-table-wrap td { - min-width: 72px; - border: 1px solid rgba(27, 28, 28, 0.12); - padding: 5px 7px; - text-align: left; - vertical-align: top; -} - -.wolai-page-ai-markdown-table-wrap th { - background: #F7F6F4; - font-weight: 700; -} - -button.wolai-page-ai-message-text { - width: 100%; - border: 0; - padding: 0; - background: transparent; - text-align: left; - cursor: pointer; -} - -button.wolai-page-ai-history-main { - display: grid; - gap: 1px; - min-width: 0; -} - -button.wolai-page-ai-history-main strong, -button.wolai-page-ai-history-main span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-message-actions { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.wolai-page-ai-history-actions { - grid-column: 3; - grid-row: 1; - position: static; - z-index: 2; - flex-wrap: nowrap; - justify-content: flex-end; - opacity: 1; - pointer-events: auto; - background: transparent; -} - -.wolai-page-ai-message--history:hover .wolai-page-ai-history-actions, -.wolai-page-ai-message--history:focus-within .wolai-page-ai-history-actions { - opacity: 1; - pointer-events: auto; -} - -.wolai-page-ai-permission-dialog { - position: fixed; - right: 28px; - bottom: 28px; - z-index: 80; - max-width: min(360px, calc(100vw - 32px)); -} - -.wolai-page-ai-permission-panel { - display: grid; - gap: 10px; - padding: 14px; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 8px; - background: #FFFFFF; - box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16); -} - -.wolai-page-ai-tool-details { - display: grid; - gap: 6px; -} - -.wolai-page-ai-tool-details summary { - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - gap: 8px; - align-items: center; - color: #1B1C1C; - cursor: pointer; - list-style: none; -} - -.wolai-page-ai-tool-details summary::-webkit-details-marker { - display: none; -} - -.wolai-page-ai-tool-details summary::before { - content: "▸"; - color: #8B8782; -} - -.wolai-page-ai-tool-details[open] summary::before { - content: "▾"; -} - -.wolai-page-ai-tool-details summary strong { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-tool-details summary span { - min-width: 0; - overflow: hidden; - color: #8B8782; - font-size: 11px; - line-height: 16px; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-tool-group-list { - display: grid; - gap: 8px; - margin-top: 8px; -} - -.wolai-page-ai-thought-group-list { - min-width: 0; - margin-top: 8px; - padding-left: 10px; - border-left: 2px solid rgba(27, 28, 28, 0.12); - color: #6F6B66; - font-size: 12px; - line-height: 18px; - white-space: pre-wrap; -} - -.wolai-page-ai-tool-item { - display: grid; - gap: 4px; - min-width: 0; - padding: 8px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 6px; - background: rgba(255, 255, 255, 0.58); -} - -.wolai-page-ai-tool-item-head { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(92px, auto); - gap: 8px; - align-items: center; -} - -.wolai-page-ai-tool-item-head strong { - min-width: 0; - overflow: hidden; - color: #1B1C1C; - font-size: 12px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-tool-item-head span { - min-width: 0; - overflow: hidden; - color: #8B8782; - font-size: 11px; - line-height: 16px; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-footer { - position: relative; - z-index: 20; - display: flex; - flex-direction: column; - gap: 8px; -} - -.wolai-page-ai-tab { - min-height: 28px; - padding: 0 8px; - border: 0; - border-radius: 6px; - background: transparent; - color: #5A5A5A; - font-size: 12px; - cursor: pointer; -} - -.wolai-page-ai-tab.is-active { - background: #1B1C1C; - color: #FFF; -} - -.wolai-page-ai-model-chip.is-active { - background: #1B1C1C; - color: #FFF; -} - -.wolai-page-ai-composer { - position: relative; - z-index: 20; - display: flex; - flex-direction: column; - overflow: visible; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 10px; - background: #FFF; -} - -.wolai-page-ai-allowed-roots { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; - padding: 6px 8px 0; -} - -.wolai-page-ai-agent-picker, -.wolai-page-ai-context-picker, -.wolai-page-ai-target-picker { - position: relative; - flex: 0 0 auto; -} - -.wolai-page-ai-agent-button, -.wolai-page-ai-context-button, -.wolai-page-ai-target-button { - font-size: 17px; - line-height: 1; -} - -.wolai-page-ai-agent-button[aria-expanded="true"], -.wolai-page-ai-context-button[aria-expanded="true"], -.wolai-page-ai-target-button[aria-expanded="true"] { - border-color: rgba(27, 28, 28, 0.32); - background: #F7F6F4; -} - -.wolai-page-ai-agent-chip, -.wolai-page-ai-target-chip { - display: inline-flex; - align-items: center; - min-width: 0; - max-width: 180px; - height: 26px; - padding: 0 8px; - border: 1px solid rgba(27, 28, 28, 0.1); - border-radius: 999px; - background: #F7F6F4; - color: #5A5A5A; - font-size: 12px; - line-height: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-agent-popover, -.wolai-page-ai-context-popover, -.wolai-page-ai-target-popover { - position: absolute; - left: 0; - width: min(320px, calc(100vw - 44px)); - bottom: calc(100% + 8px); - z-index: 30; - display: grid; - gap: 10px; - padding: 12px; - border: 1px solid rgba(27, 28, 28, 0.12); - border-radius: 10px; - background: #FFF; - box-shadow: 0 16px 36px rgba(27, 28, 28, 0.16); -} - -.wolai-page-ai-agent-popover[hidden], -.wolai-page-ai-context-popover[hidden], -.wolai-page-ai-target-popover[hidden] { - display: none !important; -} - -.wolai-page-ai-context-popover-head, -.wolai-page-ai-context-popover-foot { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - color: #5A5A5A; - font-size: 12px; -} - -.wolai-page-ai-context-option-list { - display: grid; - gap: 8px; -} - -.wolai-page-ai-agent-option-list, -.wolai-page-ai-target-option-list { - display: grid; - gap: 6px; -} - -.wolai-page-ai-agent-popover-section { - display: grid; - gap: 6px; -} - -.wolai-page-ai-agent-popover-title { - color: #8B8782; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; -} - -.wolai-page-ai-agent-option, -.wolai-page-ai-target-option { - display: grid; - gap: 2px; - width: 100%; - padding: 8px; - border: 1px solid rgba(27, 28, 28, 0.08); - border-radius: 8px; - background: #FFF; - color: #1B1C1C; - text-align: left; - cursor: pointer; -} - -.wolai-page-ai-agent-option.is-active, -.wolai-page-ai-target-option.is-active { - border-color: rgba(27, 28, 28, 0.2); - background: #F7F6F4; -} - -.wolai-page-ai-agent-option-label, -.wolai-page-ai-target-option-label { - font-size: 12px; - font-weight: 600; -} - -.wolai-page-ai-agent-option-detail, -.wolai-page-ai-target-option-detail { - color: #8B8782; - font-size: 11px; -} - -.wolai-page-ai-context-option { - display: grid; - grid-template-columns: 16px minmax(0, 1fr); - gap: 8px; - align-items: start; - color: #1B1C1C; - font-size: 12px; -} - -.wolai-page-ai-context-option.is-disabled { - color: #AAA6A0; -} - -.wolai-page-ai-context-option-main { - display: grid; - gap: 2px; - min-width: 0; -} - -.wolai-page-ai-context-option-label { - font-weight: 500; -} - -.wolai-page-ai-context-option-detail { - color: #8B8782; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.wolai-page-ai-allowed-roots { - padding-top: 4px; -} - -.wolai-page-ai-composer:focus-within { - border-color: rgba(27, 28, 28, 0.32); -} - -.wolai-page-ai-reasonix-controls { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 6px; - padding: 0 8px 6px; -} - -.wolai-page-ai-reasonix-controls[hidden] { - display: none !important; -} - -.wolai-page-ai-reasonix-control { - display: grid; - gap: 2px; - min-width: 0; - color: #8B8782; - font-size: 11px; -} - -.wolai-page-ai-reasonix-control select { - width: 100%; - min-width: 0; - height: 28px; - padding: 0 8px; - border: 1px solid rgba(27, 28, 28, 0.1); - border-radius: 7px; - background: #FFF; - color: #1B1C1C; - font-size: 12px; -} - -.wolai-page-ai-composer-bar { - display: flex; - min-height: 36px; - align-items: center; - gap: 6px; - padding: 0 6px 6px; -} - -.wolai-page-ai-composer-spacer { - flex: 1 1 auto; -} - -.wolai-page-ai-tool-button { - width: 28px; - height: 28px; - border: 1px solid rgba(27, 28, 28, 0.1); - border-radius: 6px; - background: #FFF; - color: #5A5A5A; - font-size: 14px; - cursor: pointer; -} - -.wolai-page-ai-tool-button:hover { - border-color: rgba(27, 28, 28, 0.2); - color: #1B1C1C; -} - -.wolai-page-ai-input { - width: 100%; - min-height: 76px; - padding: 10px 10px 4px; - border: 0; - background: transparent; - color: #1B1C1C; - font-size: 13px; - line-height: 20px; - resize: none; -} - -.wolai-page-ai-input:focus { - outline: none; -} - -.wolai-page-ai-stop { - min-width: 42px; - height: 28px; - padding: 0 10px; - border: 0; - border-radius: 6px; - background: #F3F3F2; - color: #5A5A5A; - font-size: 12px; - cursor: pointer; -} - -.wolai-page-ai-stop:disabled { - color: #B5B1AA; - cursor: not-allowed; -} - -.wolai-page-ai-send { - min-width: 52px; - height: 28px; - padding: 0 12px; - border: 0; - border-radius: 6px; - background: #1B1C1C; - color: #FFF; - font-size: 12px; - font-weight: 600; - cursor: pointer; -} - -@media (max-width: 768px) { - .mnote-sidebar, - .wolai-sidebar { - width: 220px; - } - - .mnote-sidebar-resizer { - display: none; - } - - .wolai-topbar { - padding: 0 12px; - } - - .wolai-page-settings-popover { - right: 12px; - } - - .wolai-page-history-panel, - .wolai-page-ai-panel { - width: min(100vw - 24px, 420px); - } - - .wolai-page-ai-resize-handle { - display: none; - } - - .wolai-page-ai-settings-grid, - .wolai-page-ai-settings-head { - grid-template-columns: minmax(0, 1fr); - } - - .wolai-public-pill, - .wolai-breadcrumb-root, - .wolai-breadcrumb-separator { - display: none; - } - - .document-workspace[data-has-secondary-pane="true"] { - grid-template-columns: minmax(0, 1fr); - } - - .document-workspace[data-has-secondary-pane="true"] .document-pane-resizer { - display: none; - } - - .document-pane[data-pane-role="secondary"] .document-shell { - padding-top: 32px; - padding-left: 0; - padding-right: 0; - } - - .document-shell { - width: 100%; - padding: 48px 28px 120px; - } - - .document-shell-header h1 { - font-size: 32px; - line-height: 40px; - } - - #mnote-leptos-tiptap-island-editor-root .block-handle-shell { - left: -32px !important; - } -} - -@media (max-width: 480px) { - .mnote-shell { - flex-direction: column; - } - - .mnote-sidebar, - .wolai-sidebar { - width: 100%; - max-height: 42vh; - border-bottom: 1px solid rgba(27, 28, 28, 0.08); - box-shadow: none; - } - - .mnote-sidebar-resizer { - display: none; - } - - .document-shell { - padding: 36px 20px 112px; - } - - .document-shell-header h1 { - font-size: 28px; - } - - .wolai-topbar-actions { - gap: 2px; - } - - .wolai-page-settings-panel, - .wolai-page-share-card, - .wolai-page-ai-panel { - width: calc(100vw - 24px); - } - - .wolai-page-ai-resize-handle { - display: none; - } -} - -"##; +/// +/// CSS 通过模块化文件组织： +/// - `styles/tokens.css`: 设计 tokens（颜色、z-index、间距、阴影、状态） +/// - `styles/base.css`: 基础重置、排版、SVG 图标、滚动条、侧栏/顶栏布局 +/// - `styles/pages/home.css`, `shells.css`, `auth.css`: 页面级样式 +/// - `styles/components/main.css`: 组件级样式（编辑器、面板、标签页等） +pub const MNOTE_CSS: &str = concat!( + include_str!("styles/tokens.css"), + "\n", + include_str!("styles/base.css"), + "\n", + include_str!("styles/pages/home.css"), + "\n", + include_str!("styles/pages/shells.css"), + "\n", + include_str!("styles/pages/auth.css"), + "\n", + include_str!("styles/components/main.css"), +); #[cfg(test)] mod tests { @@ -6712,7 +186,8 @@ mod tests { fn mnote_css_is_reasonably_sized() { // 至少 2000 字符才能包含完整样式 assert!(MNOTE_CSS.len() > 2000); - // 当前整合了工作区壳、编辑器样式、树菜单、文件树图标、页面 AI、账号弹窗与授权管理控制面，仍保持在单文件可审阅范围内。 - assert!(MNOTE_CSS.len() < 158000); + // CSS 已拆分为模块化文件，通过 concat!(include_str!()) 组装， + // 仍保持在可审阅范围内。 + assert!(MNOTE_CSS.len() < 180000); } } diff --git a/rust/crates/mnote-web/src/ssr/styles/base.css b/rust/crates/mnote-web/src/ssr/styles/base.css new file mode 100644 index 00000000..88159d27 --- /dev/null +++ b/rust/crates/mnote-web/src/ssr/styles/base.css @@ -0,0 +1,873 @@ +/* ===== 基础重置 ===== */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* ===== 基础排版 ===== */ +html, body { + height: 100%; +} + +body { + font-family: var(--wolai-font-sans); + color: var(--wolai-text-primary); + background: var(--wolai-bg); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + color: var(--wolai-accent); + text-decoration: none; + cursor: pointer; +} + +a:hover { + color: var(--wolai-accent-hover); +} + +[hidden] { + display: none !important; +} + +.mnote-symbol { + width: 18px; + height: 18px; + display: inline-flex; + flex: 0 0 auto; + color: currentColor; + fill: none; + stroke: currentColor; + stroke-width: 1.9; + stroke-linecap: round; + stroke-linejoin: round; + vertical-align: -0.18em; +} + +.mnote-symbol[data-icon="home"] { + stroke-width: 2; +} + +.mnote-symbol--document { + width: 56px; + height: 56px; + stroke-width: 1.35; +} + +.material-symbols-outlined { + font-family: var(--wolai-font-sans); + font-weight: normal; + font-style: normal; + font-size: 20px; + line-height: 1; + letter-spacing: 0; + text-transform: none; + display: inline-flex; + align-items: center; + justify-content: center; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: "liga"; + -webkit-font-smoothing: antialiased; + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; +} + +.material-symbols-outlined::before { + content: ""; + display: block; + width: 1em; + height: 1em; + background: currentColor; + -webkit-mask: var(--mnote-icon-mask) center / contain no-repeat; + mask: var(--mnote-icon-mask) center / contain no-repeat; +} + +.material-symbols-outlined[data-icon="search"]::before { content: "⌕"; } +.material-symbols-outlined[data-icon="account_tree"]::before { content: "⌘"; } +.material-symbols-outlined[data-icon="bolt"]::before { content: "ϟ"; } +.material-symbols-outlined[data-icon="help"]::before { content: "?"; } +.material-symbols-outlined[data-icon="inventory_2"]::before { content: "▣"; } +.material-symbols-outlined[data-icon="more_horiz"]::before { content: "…"; } +.material-symbols-outlined[data-icon="menu"]::before { content: "☰"; } +.material-symbols-outlined[data-icon="home"]::before { content: "⌂"; } +.material-symbols-outlined[data-icon="star"]::before { content: "☆"; } +.material-symbols-outlined[data-icon="history"]::before { content: "◷"; } +.material-symbols-outlined[data-icon="auto_awesome"]::before { content: "✦"; } +.material-symbols-outlined[data-icon="folder_open"]::before, +.material-symbols-outlined[data-icon="drive_file_move"]::before { content: "▱"; } +.material-symbols-outlined[data-icon="delete"]::before { content: "⌫"; } +.material-symbols-outlined[data-icon="right_panel_open"]::before, +.material-symbols-outlined[data-icon="open_in_new"]::before { content: "↗"; } +.material-symbols-outlined[data-icon="share"]::before { content: "⇪"; } +.material-symbols-outlined[data-icon="link"]::before { content: "∞"; } +.material-symbols-outlined[data-icon="content_copy"]::before, +.material-symbols-outlined[data-icon="file_copy"]::before { content: "⧉"; } +.material-symbols-outlined[data-icon="tag"]::before { content: "#"; } +.material-symbols-outlined[data-icon="edit"]::before { content: "✎"; } +.material-symbols-outlined[data-icon="add"]::before { content: "+"; } +.material-symbols-outlined[data-icon="manage_search"]::before { content: "⌕"; } +.material-symbols-outlined[data-icon="subdirectory_arrow_right"]::before { content: "↳"; } + +.material-symbols-filled { + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; +} + +/* 本地 SVG mask 图标，避免 Google Material Symbols 字体未加载时露出英文图标名。 */ +.material-symbols-outlined[data-icon]::before { content: ""; } +.material-symbols-outlined[data-icon="search"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m16 16 4.2 4.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="manage_search"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 17.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m15.5 15.5 4 4M8 8.5h5M8 11h5M8 13.5h3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="account_tree"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6h4v4H6zM14 4h4v4h-4zM14 16h4v4h-4z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 8h2a2 2 0 0 0 2-2M10 8h2a2 2 0 0 1 2 2v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="bolt"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 4.5 13h6L9 22l10.5-13h-6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="help"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.8 9a2.4 2.4 0 0 1 4.6 1.1c0 1.7-1.7 2-2.2 3.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.1' fill='black'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="inventory_2"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5h16v4H4zM6 9.5h12V19H6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 13.5h5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="more_horiz"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='12' r='2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black'/%3E%3Ccircle cx='19' cy='12' r='2' fill='black'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="menu"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="home"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11 12 4l8 7v9H5v-9Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 20v-6h5v6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="star"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 2.7 5.4 6 .9-4.4 4.3 1 6-5.3-2.8-5.3 2.8 1-6-4.4-4.3 6-.9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="history"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7L4 8.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4v4.5h4.5M12 8v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="auto_awesome"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 1.6 5.2L19 10l-5.4 1.8L12 17l-1.6-5.2L5 10l5.4-1.8zM5.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8zM18.5 2.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z' fill='black'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="folder_open"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7.5h6l2 2H21v8.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a1.5 1.5 0 0 1 1.5-1.5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 18 7 11h14l-3 7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="drive_file_move"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h6l2 2h8v10H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m13 12 3 3-3 3M8 15h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="delete"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14M9 6V4h6v2M8 6l1 14h6l1-14M10.5 10v6M13.5 10v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="right_panel_open"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4zM14 5v14M8 12h6M11 9l3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="preview"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="download"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4v10M8.5 11.5 12 15l3.5-3.5M5 19h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="notes"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 5h12v14H6zM9 9h6M9 12h6M9 15h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="open_in_new"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6H5v13h13v-3M12 5h7v7M10 14 19 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="share"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='6' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='19' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m8.7 10.7 6.6-4.4M8.7 13.3l6.6 4.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } + +.material-symbols-outlined[data-icon="comment"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="mode_comment"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="person_add"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='8' r='3.2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3.5 20a5.5 5.5 0 0 1 11 0M18 8v6M15 11h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="slideshow"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v12H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m10 9 5 2-5 2zM9 21h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="travel_explore"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 11h14M11 4a10 10 0 0 1 0 14M11 4a10 10 0 0 0 0 14M16.5 16.5 21 21' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7.5 8.5h2.5l1 1.5 2.5-.5 1 2-2 1 .5 2.5h-3l-1.5-2-2 .5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="document_scanner"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3H5a2 2 0 0 0-2 2v2M17 3h2a2 2 0 0 1 2 2v2M7 21H5a2 2 0 0 1-2-2v-2M17 21h2a2 2 0 0 0 2-2v-2M7 8h10M7 12h10M7 16h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="article"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4h12v16H6zM9 8h6M9 12h6M9 16h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="sync"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6v5h-5M4 18v-5h5M7.5 9A6 6 0 0 1 18 6M16.5 15A6 6 0 0 1 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="drive_file_rename_outline"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 17-.5 3.5L7 20l11-11-3-3zM13 8l3 3M5 6h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="format_paint"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h10l2 3-2 3H5l-2-3zM9 13v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="link"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 14.5 14.5 9.5M10.8 6.2l1.1-1.1a4 4 0 0 1 5.7 5.7l-1.6 1.6M13.2 17.8l-1.1 1.1a4 4 0 0 1-5.7-5.7L8 11.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="content_copy"], +.material-symbols-outlined[data-icon="file_copy"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8h10v12H8zM6 16H4V4h10v2' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="tag"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4 5 20M19 4l-4 16M4 9h16M3 15h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="edit"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 17-.5 3.5L7 20l11-11-3-3zM13 8l3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="add"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="subdirectory_arrow_right"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4v7a3 3 0 0 0 3 3h8M14 10l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="account_circle"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M6.8 19a5.4 5.4 0 0 1 10.4 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="admin_panel_settings"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.9 8 7 10 4.1-2 7-5.5 7-10V6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m9 12 2 2 4-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="close"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6 18 18M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } +.material-symbols-outlined[data-icon="radio_button_unchecked"]::before { + width: .78em; + height: .78em; + background: transparent; + border: 2px solid currentColor; + border-radius: 999px; + -webkit-mask: none; + mask: none; +} +/* ===== 滚动条（悬停时显示） ===== */ +::-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); +} + +/* ===== 页面布局：侧栏 + 内容 ===== */ +.mnote-shell { + display: flex; + height: 100vh; + width: 100%; + overflow: hidden; + background: var(--wolai-bg); +} + +.mnote-shell[data-mnote-sidebar-collapsed="true"] .mnote-sidebar, +.mnote-shell[data-mnote-sidebar-collapsed="true"] .wolai-sidebar, +.mnote-shell[data-mnote-sidebar-collapsed="true"] .mnote-sidebar-resizer { + display: none; +} + +.wolai-workspace-shell { + --wolai-bg-sidebar: #F7F7F6; + --wolai-bg-selected: #F8E6E7; + --wolai-accent-red: #E0525B; + --mnote-sidebar-width: 288px; +} + +.wolai-sidebar { + width: var(--mnote-sidebar-width); + background: var(--wolai-bg-sidebar); +} + +.mnote-sidebar-resizer { + display: block; + width: 6px; + min-height: 100vh; + cursor: col-resize; + position: relative; + flex: 0 0 auto; + overscroll-behavior: none; +} + +.mnote-sidebar-resizer::before { + content: ""; + position: absolute; + left: 2px; + top: 0; + bottom: 0; + width: 2px; + background: rgba(27, 28, 28, 0.08); +} + +.mnote-sidebar-resizer:hover::before, +html[data-mnote-sidebar-resizing="true"] .mnote-sidebar-resizer::before { + background: rgba(37, 99, 235, 0.42); +} + +.wolai-sidebar-header { + height: 52px; + gap: 10px; + padding: 12px 16px 8px; + justify-content: flex-start; + position: relative; +} + +.wolai-avatar { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + background: #D6545D; + color: #fff; + font-size: 15px; + font-weight: 700; + flex: 0 0 auto; +} + +.wolai-sidebar-header .sidebar-workspace-name { + max-width: 190px; + color: #202124; + font-size: 16px; + font-weight: 650; +} + +.mnote-workspace-source-trigger { + min-width: 0; + flex: 1 1 auto; + display: inline-flex; + align-items: center; + gap: 4px; + border: 0; + background: transparent; + padding: 2px 4px; + border-radius: 4px; + cursor: pointer; +} + +.mnote-workspace-source-trigger:hover, +.mnote-workspace-source-trigger[aria-expanded="true"] { + background: var(--wolai-bg-hover); +} + +.wolai-sidebar-chevron { + margin-left: auto; + color: var(--wolai-text-secondary); + font-size: 16px; +} + +.mnote-workspace-source-menu { + position: absolute; + inset-inline-start: 0; + top: calc(100% + 6px); + z-index: var(--wolai-z-dropdown); + width: 250px; + max-width: calc(100vw - 24px); + padding: 6px; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 8px; + background: #fff; + box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18); +} + +.mnote-workspace-source-menu__label { + padding: 8px 8px 4px; + color: var(--wolai-text-secondary); + font-size: 12px; +} + +.mnote-workspace-source-menu__item { + width: 100%; + display: block; + border: 0; + border-radius: 6px; + background: transparent; + padding: 8px; + color: var(--wolai-text-primary); + font-size: 13px; + line-height: 1.35; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; +} + +.mnote-workspace-source-menu__item:hover { + background: var(--wolai-bg-hover); +} + +.mnote-workspace-source-menu__item--primary { + color: #1D4ED8; +} + +.mnote-local-folder-dialog__recent { + display: grid; + gap: 6px; + min-width: 0; +} + +.mnote-local-folder-dialog__recent button { + min-width: 0; + max-width: 100%; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 6px; + background: #fff; + padding: 7px 9px; + color: var(--wolai-text-primary); + font-size: 13px; + line-height: 1.4; + text-align: left; + cursor: pointer; + white-space: normal; + overflow-wrap: anywhere; + word-break: break-word; +} + +.mnote-local-folder-dialog__recent button:hover { + background: var(--wolai-bg-hover); +} + +.mnote-account-menu{inset-inline-start:auto;right:8px;top:calc(100% - 10px);width:194px}.mnote-account-menu__item{display:flex;align-items:center;gap:10px}.mnote-account-menu__logout{color:#C2410C}.mnote-account-menu__logout:hover{background:#FFF7ED}.mnote-account-menu__error{padding:6px 8px 2px;color:#B91C1C;font-size:12px}.mnote-profile-dialog{position:fixed;inset:0;z-index:var(--wolai-z-modal);display:grid;place-items:center}.mnote-profile-dialog__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.22)}.mnote-profile-dialog__panel{position:relative;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border:1px solid var(--wolai-border);border-radius:8px;background:#fff;box-shadow:0 18px 54px rgba(15,23,42,.18);padding:20px}.mnote-profile-dialog__header,.mnote-profile-dialog__identity,.mnote-profile-dialog__list>div,.mnote-profile-dialog__list dd{display:flex;align-items:center}.mnote-profile-dialog__header{justify-content:space-between;margin-bottom:18px}.mnote-profile-dialog__eyebrow,.mnote-profile-dialog__identity span,.mnote-profile-dialog__list dt{color:var(--wolai-text-secondary);font-size:13px}.mnote-profile-dialog__header h2{font-size:20px}.mnote-profile-dialog__close,.mnote-profile-dialog__list button{border:0;border-radius:6px;background:transparent;color:var(--wolai-text-secondary);cursor:pointer}.mnote-profile-dialog__close{width:32px;height:32px}.mnote-profile-dialog__identity{gap:12px;padding:12px;border-radius:8px;background:var(--wolai-bg-sidebar)}.mnote-profile-dialog__avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:#D6545D;color:#fff;font-weight:650}.mnote-profile-dialog__list{margin-top:16px}.mnote-profile-dialog__list>div{justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--wolai-border)}.mnote-profile-dialog__list dd{min-width:0;gap:8px;max-width:280px;font-size:13px;text-align:right;overflow-wrap:anywhere}.mnote-profile-dialog__list code{font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:12px;white-space:normal} + +.wolai-quick-actions { + flex: 0 0 auto; + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 8px; + padding: 8px 12px 18px; + position: relative; +} + +.wolai-quick-actions a, +.wolai-quick-actions button { + height: 28px; + justify-content: center; + padding: 0; + margin: 0; + color: #4B4B4B; + border: 0; + background: transparent; + cursor: pointer; +} + +.wolai-quick-actions a .nav-icon, +.wolai-quick-actions button .nav-icon { + margin: 0; +} + +.wolai-sidebar-section { + padding: 4px 8px 14px; +} + +.wolai-section-title { + height: 28px; + display: flex; + align-items: center; + gap: 4px; + color: #B5B5B2; + font-size: 14px; + padding: 0 8px; +} + +.wolai-section-icon { + color: #FFB33F; +} + +.wolai-section-caret { + color: #B5B5B2; +} + +.wolai-section-add { + margin-left: auto; + width: 24px; + height: 24px; + border: 0; + border-radius: 6px; + background: transparent; + color: #B5B5B2; + font-size: 22px; + line-height: 1; + cursor: pointer; +} + +.wolai-section-add:hover { + background: var(--wolai-bg-hover); + color: #555; +} + +.wolai-page-row { + min-height: 38px; + display: flex; + align-items: center; + gap: 8px; + border-radius: 6px; + padding: 0 12px; + color: #535353; + font-size: 17px; + line-height: 1.2; +} + +.wolai-page-row:hover { + background: var(--wolai-bg-hover); + color: #202124; +} + +.wolai-muted-row { + color: #747471; +} + +.wolai-active-row { + background: var(--wolai-bg-selected); + color: var(--wolai-accent-red); +} + +.wolai-row-icon { + width: 22px; + color: #111; + text-align: center; + flex: 0 0 auto; +} + +.wolai-sidebar-footer { + margin-top: auto; + display: grid; + grid-template-columns: 1fr 1fr; + border-top: 1px solid var(--wolai-border); + background: #FBFBFA; +} + +.wolai-footer-entry { + height: 46px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + color: #6D6D69; + font-size: 15px; +} + +.wolai-footer-entry + .wolai-footer-entry { + border-left: 1px solid var(--wolai-border); +} + +.wolai-topbar { + height: 46px; + display: flex; + align-items: center; + justify-content: space-between; + flex: 0 0 auto; + padding: 0 18px; + color: #222; + font-size: 17px; +} + +.wolai-topbar-left, +.wolai-topbar-actions { + display: flex; + align-items: center; + gap: 12px; +} + +.wolai-topbar-actions { + color: #222; + font-size: 20px; +} + +.wolai-menu-icon { + color: #4A4A4A; + font-size: 22px; +} + +.wolai-home-icon { + color: #000; + font-size: 24px; + font-weight: 700; +} + +.wolai-floating-actions { + position: fixed; + right: 24px; + bottom: 24px; + display: flex; + flex-direction: column; + gap: 16px; + z-index: var(--wolai-z-dock); +} + +.wolai-floating-button { + width: 50px; + height: 50px; + border: 1px solid #ECECF1; + border-radius: 50%; + background: #fff; + color: #222; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); + font-size: 18px; + cursor: pointer; +} + +/* 侧栏导航 */ +.mnote-sidebar { + width: 288px; + flex-shrink: 0; + background: var(--wolai-bg-sidebar); + border-right: 1px solid var(--wolai-border); + display: flex; + flex-direction: column; + overflow-y: auto; + user-select: none; +} + +.mnote-sidebar-header { + padding: 14px 16px 10px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.mnote-sidebar-brand { + font-size: 15px; + font-weight: 600; + color: var(--wolai-text-primary); + text-decoration: none; +} + +.mnote-sidebar-brand:hover { + color: var(--wolai-text-primary); +} + +.mnote-sidebar-nav { + flex: 1; + padding: 4px 8px; +} + +.mnote-sidebar-nav.wolai-quick-actions { + flex: 0 0 auto; +} + +.wolai-sidebar-body { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.mnote-sidebar-nav a, +.mnote-sidebar-nav button { + display: flex; + align-items: center; + height: 30px; + padding: 4px 8px; + margin-bottom: 2px; + border-radius: var(--wolai-radius); + font-size: 14px; + line-height: 1.4; + color: var(--wolai-text-primary); + text-decoration: none; + transition: none; +} + +.mnote-sidebar-nav a:hover, +.mnote-sidebar-nav button:hover { + background: var(--wolai-bg-hover); +} + +.mnote-sidebar-nav a.active { + background: var(--wolai-bg-active); +} + +.mnote-sidebar-nav a .nav-icon, +.mnote-sidebar-nav button .nav-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + margin-right: 5px; + font-size: 18px; + flex-shrink: 0; +} + +/* 工作区名称 */ +.sidebar-workspace-name { + font-size: 12px; + color: var(--wolai-text-secondary); + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 侧栏页面树区 */ +.sidebar-tree-section { + border-top: 1px solid var(--wolai-border); + margin-top: 4px; + padding-top: 4px; +} + +.sidebar-tree-divider { + display: none; +} + +.sidebar-tree { + padding: 2px 0; +} + +.sidebar-tree .tree-root { + list-style: none; + padding: 0; + margin: 0; +} + +.sidebar-tree .tree-empty { + padding: 6px 8px 8px; + color: var(--wolai-text-secondary); + font-size: 13px; + line-height: 1.5; +} + +.sidebar-tree .tree-node { + list-style: none; + padding: 0; + margin: 0; +} + +.sidebar-tree .tree-row { + display: flex; + align-items: center; + height: 30px; + padding: 0 8px; + border-radius: var(--wolai-radius); + cursor: pointer; + font-size: 14px; + color: var(--wolai-text-primary); + gap: 2px; +} + +.sidebar-tree .tree-row:hover { + background: var(--wolai-bg-hover); +} + +.sidebar-tree .tree-row[data-active="true"] { + background: var(--wolai-bg-active); +} + +.sidebar-tree .tree-row[data-active="true"] .tree-link-title { + font-weight: 500; +} + +.sidebar-tree .tree-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + flex-shrink: 0; + border: none; + background: none; + cursor: pointer; + font-size: 12px; + color: var(--wolai-text-secondary); + padding: 0; + border-radius: 3px; +} + +.sidebar-tree .tree-toggle:hover { + background: var(--wolai-bg-hover); +} + +.sidebar-tree .tree-spacer { + display: inline-flex; + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.sidebar-tree .tree-kind-badge { + display: none; +} + +.sidebar-tree .tree-link { + flex: 1; + display: flex; + align-items: center; + border: none; + background: none; + cursor: pointer; + padding: 0 4px; + font-size: 14px; + color: var(--wolai-text-primary); + overflow: hidden; + min-width: 0; +} + +.sidebar-tree .tree-link-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.sidebar-tree .tree-actions { + display: none; + gap: 2px; + flex-shrink: 0; +} + +.sidebar-tree .tree-row:hover .tree-actions { + display: flex; +} + +.sidebar-tree .tree-action { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: none; + background: none; + cursor: pointer; + font-size: 14px; + color: var(--wolai-text-secondary); + border-radius: 3px; + padding: 0; +} + +.sidebar-tree .tree-action:hover { + background: var(--wolai-bg-hover); +} + +.sidebar-tree .tree-children { + list-style: none; + padding: 0; + margin: 0; +} + +.sidebar-tree .tree-children--collapsed { + display: none; +} + +/* 树行缩进 — 通过嵌套深度自动偏移 */ +.sidebar-tree .tree-node .tree-children .tree-row { + padding-left: 28px; +} + +.sidebar-tree .tree-node .tree-children .tree-children .tree-row { + padding-left: 48px; +} + +.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-row { + padding-left: 68px; +} + +.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-children .tree-row { + padding-left: 88px; +} + +/* 内容区域 */ +.mnote-main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + background: var(--wolai-bg); +} + +.mnote-content { + flex: 1; + min-height: 0; + overflow-y: auto; + padding: 0; +} + +.mnote-content:has(.document-workspace) { + overflow: hidden; +} + +/* ===== data-state 通用规则 ===== */ +/* popover / dropdown / dialog 打开/关闭状态 */ +[data-state="open"] { display: block; } +[data-state="closed"] { display: none !important; } + +/* dialog/modal 状态 */ +.mnote-profile-dialog[data-state="open"], +.ui-debug-dialog-overlay[data-state="open"], +.wolai-search-overlay[data-state="open"] { + display: grid; +} +.mnote-profile-dialog[data-state="closed"], +.ui-debug-dialog-overlay[data-state="closed"], +.wolai-search-overlay[data-state="closed"] { + display: none !important; +} + +/* popover/dropdown 状态 */ +.wolai-page-settings-popover[data-state="open"], +.mnote-workspace-source-menu[data-state="open"], +.ui-debug-popover[data-state="open"] { + display: block; +} +.wolai-page-settings-popover[data-state="closed"], +.mnote-workspace-source-menu[data-state="closed"], +.ui-debug-popover[data-state="closed"] { + display: none !important; +} + +/* context menu 状态 */ +.mnote-tree-context-menu[data-state="open"] { + display: block; +} +.mnote-tree-context-menu[data-state="closed"] { + display: none !important; +} + +/* drawer 状态 */ +.wolai-page-history-drawer[data-state="open"], +.wolai-page-ai-drawer[data-state="open"] { + display: block; +} +.wolai-page-history-drawer[data-state="closed"], +.wolai-page-ai-drawer[data-state="closed"] { + display: none !important; +} + +/* aria-expanded 通用规则 */ +[aria-expanded="true"] > .material-symbols-outlined.nav-icon[data-icon] { + color: var(--wolai-accent); +} + diff --git a/rust/crates/mnote-web/src/ssr/styles/components/main.css b/rust/crates/mnote-web/src/ssr/styles/components/main.css new file mode 100644 index 00000000..7c596e33 --- /dev/null +++ b/rust/crates/mnote-web/src/ssr/styles/components/main.css @@ -0,0 +1,5693 @@ +/* ===== ProseMirror 兼容 ===== */ +.ProseMirror { + white-space: pre-wrap; + word-break: break-word; + overflow-wrap: anywhere; +} + +.ProseMirror pre { + white-space: pre-wrap; +} +/* ===== 响应式 ===== */ + + +.wolai-search-overlay{position:fixed;inset:0;z-index:var(--wolai-z-modal);display:flex;align-items:flex-start;justify-content:center;padding:92px 24px 24px;background:rgba(0,0,0,.32);pointer-events:none} +.wolai-search-overlay[hidden]{display:none!important} +.wolai-search-dialog{width:min(680px,100%);max-height:min(720px,calc(100vh - 128px));overflow:hidden;display:flex;flex-direction:column;background:#FFF;border:1px solid rgba(27,28,28,.10);border-radius:6px;box-shadow:0 18px 48px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.08);color:#37352F;pointer-events:auto} +.wolai-search-input-row{display:flex;align-items:center;min-height:58px;padding:0 12px 0 18px;border-bottom:1px solid rgba(27,28,28,.08)} +.wolai-search-input-icon{width:22px;height:22px;color:#8B8780;margin-right:10px} +.wolai-search-input{flex:1 1 auto;min-width:0;height:56px;border:0;outline:none;background:transparent;color:#24211D;font:400 18px/1.4 var(--wolai-font-sans);letter-spacing:0} +.wolai-search-input::placeholder{color:#A29E97} +.wolai-search-input::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none;display:none} +.wolai-search-close{width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:#8B8780;cursor:pointer;font-size:20px;line-height:1} +.wolai-search-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 8px;border-bottom:1px solid rgba(27,28,28,.06);color:#A7A39D;font-size:12px;line-height:1} +.wolai-search-options[hidden]{display:none!important} +.wolai-search-options-left,.wolai-search-options-right,.wolai-search-switch-control,.wolai-search-sort-control{display:inline-flex;align-items:center} +.wolai-search-options-left{min-width:0;flex-wrap:wrap;gap:8px 12px} +.wolai-search-options-right{margin-left:auto;flex:0 0 auto} +.wolai-search-switch-control,.wolai-search-sort-control{gap:5px;white-space:nowrap} +.wolai-search-switch,.wolai-search-sort-value{border:0;background:transparent;cursor:pointer;font:inherit;letter-spacing:0} +.wolai-search-switch{position:relative;width:28px;height:16px;border-radius:999px;background:#D6D4D0;box-shadow:inset 0 0 0 1px rgba(27,28,28,.04)} +.wolai-search-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:999px;background:#FFF;box-shadow:0 1px 2px rgba(15,23,42,.22)} +.wolai-search-switch.is-on{background:#C9C7C3} +.wolai-search-switch.is-on::after{transform:translateX(12px)} +.wolai-search-sort-value{display:inline-flex;align-items:center;gap:3px;color:#6D6A65} +.wolai-search-sort-value::after{content:"⌄";color:#B8B4AD;font-size:13px;line-height:1} +.wolai-search-result-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;color:#8B8780;font-size:12px;line-height:1.3;border-bottom:1px solid rgba(27,28,28,.06)} +.wolai-search-results{overflow:auto;padding:6px} +.wolai-search-result-row{width:100%;min-height:54px;display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit} +.wolai-search-result-row:hover{background:rgba(55,53,47,.08)} +.wolai-search-source-group{border-radius:4px} +.wolai-search-source-group + .wolai-search-source-group{margin-top:4px} +.wolai-search-source-header{width:100%;min-height:46px;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit} +.wolai-search-source-header:hover{background:rgba(55,53,47,.08)} +.wolai-search-source-main{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:3px} +.wolai-search-source-results{padding-left:18px} +.wolai-search-source-results[hidden]{display:none!important} +.wolai-search-source-chevron{flex:0 0 auto;margin-top:2px;color:#8B8780;font-size:11px;line-height:1.35} +.wolai-search-result-icon{width:18px;height:18px;margin-top:2px;color:#8B8780} +.wolai-search-result-main{min-width:0;display:flex;flex-direction:column;gap:3px} +.wolai-search-result-title{color:#2F2D29;font-size:14px;line-height:1.35;word-break:break-word} +.wolai-search-result-title mark,.wolai-search-result-snippet mark{padding:0 1px;border-radius:2px;background:#FFE9E6;color:#D83A32} +.wolai-search-result-snippet,.wolai-search-empty{color:#8B8780;font-size:12px;line-height:1.35} +.wolai-search-result-path{display:flex;align-items:center;gap:8px;color:#A09B93;font-size:11px;line-height:1.3;min-width:0} +.wolai-search-result-path span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.wolai-search-result-type{flex:0 0 auto;padding:1px 5px;border-radius:4px;background:rgba(55,53,47,.06);color:#6F6A63;text-transform:uppercase;font-size:10px;letter-spacing:0} +.wolai-search-empty,.wolai-search-recent{padding:28px 12px 32px;text-align:center;color:#8B8780;font-size:12px;line-height:1.35} + +@media (max-width: 768px) { + .mnote-sidebar { + width: 200px; + } + + .mnote-home { + padding: 48px 24px; + } + + .mnote-home h1 { + font-size: 28px; + } + + .document-shell-header { + padding: 24px 0 0; + max-width: 100%; + } + + .document-shell-header h1 { + font-size: 28px; + line-height: 36px; + } + + #mnote-editor-island { + margin: 0 24px; + width: auto; + padding-bottom: 24px; + } + + #mnote-search-shell, + #mnote-mindmap-shell { + padding: 24px; + } + + #mnote-search-shell h1, + #mnote-mindmap-shell h1 { + font-size: 24px; + } +} + +@media (max-width: 480px) { + .mnote-sidebar { + width: 100%; + height: auto; + border-right: none; + border-bottom: 1px solid var(--wolai-border); + } + + .mnote-shell { + flex-direction: column; + } + + .mnote-home { + padding: 32px 16px; + } + + .mnote-home h1 { + font-size: 24px; + } + + .document-shell-header { + padding: 16px 0 0; + } + + .document-shell-header h1 { + font-size: 24px; + } + + #mnote-editor-island { + margin: 0 16px; + width: auto; + padding-bottom: 16px; + } +} + + +html, +body { + background: var(--atelier-document); +} + +body { + color: var(--atelier-text); + font-family: Inter, var(--wolai-font-sans); + letter-spacing: 0; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.mnote-shell, +.wolai-workspace-shell { + background: var(--atelier-document); +} + +.mnote-sidebar, +.wolai-sidebar { + width: var(--mnote-sidebar-width, 248px); + background: var(--atelier-sidebar); + border-right: 0; + box-shadow: none; + overflow: hidden; +} + +.mnote-sidebar-header, +.wolai-sidebar-header { + height: 40px; + padding: 8px 12px; + gap: 8px; +} + +.wolai-avatar { + width: 24px; + height: 24px; + border-radius: 5px; + background: #D6534D; + font-size: 14px; + font-weight: 650; +} + +.wolai-sidebar-header .sidebar-workspace-name, +.sidebar-workspace-name { + max-width: 160px; + color: var(--atelier-text); + font-size: 16px; + font-weight: 700; + line-height: 24px; +} + +.wolai-sidebar-chevron { + color: #55514C; + font-size: 17px; +} + +.wolai-quick-actions { + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 10.4px; + padding: 5px 8px 11px; +} + +.wolai-quick-actions a, +.wolai-quick-actions button, +.mnote-sidebar-nav a { + border-radius: 4px; +} + +.wolai-quick-actions a, +.wolai-quick-actions button { + height: 30px; + color: #3F3D39; + font-size: 14px; +} + +.wolai-quick-actions a:hover, +.wolai-quick-actions button:hover { + background: rgba(27, 28, 28, 0.07); +} + +.wolai-sidebar-body { + padding-bottom: 0; +} + +.wolai-sidebar-section { + padding: 0 8px 18px; +} + +.wolai-my-pages-section { + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; +} + +.wolai-section-title, +.wolai-sidebar-tabs { + height: 32px; + display: flex; + align-items: center; + gap: 6px; + padding: 0 8px; + color: var(--atelier-text-muted); + font-size: 16px; + line-height: 24px; + font-weight: 500; +} + +.wolai-section-icon { + color: #FF9F1A; +} + +.wolai-section-caret { + color: var(--atelier-text-soft); + font-size: 13px; +} + +.wolai-sidebar-tabs { + gap: 16px; + margin-bottom: 6px; +} + +.wolai-sidebar-tab { + display: inline-flex; + align-items: center; + gap: 5px; + min-height: 26px; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + color: var(--atelier-text-muted); + font: inherit; + line-height: 1; + white-space: nowrap; + cursor: pointer; +} + +.wolai-sidebar-tab:hover { + color: var(--atelier-text); +} + +.wolai-sidebar-tab-active { + color: var(--atelier-text); + border-bottom: 2px solid var(--atelier-primary-container); +} + +.wolai-sidebar-tab-muted { + color: #9B9892; +} + +.wolai-sidebar-tab-panels { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + overscroll-behavior: contain; +} + +.wolai-sidebar-tab-panel[hidden] { + display: none !important; +} + +.wolai-folder-icon { + color: #A8A49E; + font-size: 15px; +} + +.wolai-section-add { + margin-left: auto; + width: 22px; + height: 22px; + border-radius: 4px; + color: var(--atelier-text-soft); + font-size: 20px; +} + +.wolai-section-add:hover { + background: var(--atelier-sidebar-hover); + color: var(--atelier-text); +} + +.wolai-section-add + .wolai-section-add { + margin-left: 2px; +} + +.wolai-section-add .material-symbols-outlined { + width: 15px; + height: 15px; + font-size: 15px; + display: block; + color: currentColor; +} + +.wolai-page-row { + min-height: 30px; + gap: 7px; + margin: 1px 4px; + padding: 0 8px 0 12px; + border-radius: 4px; + color: #2D2E2E; + font-size: 14px; + line-height: 1.2; +} + +.wolai-page-row:hover { + background: var(--atelier-sidebar-hover); +} + +.wolai-page-row[data-active="true"], +.wolai-active-row { + background: var(--atelier-sidebar-active); + color: var(--atelier-text); +} + +.wolai-row-caret { + width: 12px; + flex: 0 0 12px; + color: #B8B5AF; + font-size: 16px; +} + +.wolai-row-icon { + width: 20px; + color: #111111; + font-size: 16px; +} + +.wolai-row-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + min-width: 0; +} + +.wolai-row-more { + width: 26px; + height: 26px; + flex: 0 0 26px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 4px; + background: transparent; + color: #8C8983; + opacity: 0; + cursor: pointer; +} + +.wolai-page-row:hover .wolai-row-more, +.wolai-row-more:focus-visible, +.wolai-row-more[aria-expanded="true"] { + opacity: 1; +} + +.wolai-row-more:hover { + background: #E7E4E0; + color: #4B4945; +} + +.wolai-row-more .material-symbols-outlined { + font-size: 18px; + line-height: 1; +} + +.sidebar-tree-section { + border-top: 0; + margin-top: 0; + padding-top: 0; +} + +.sidebar-tree { + padding: 0; +} + +.sidebar-tree .tree-empty { + padding: 6px 12px; + color: var(--atelier-text-soft); + font-size: 13px; +} + +.sidebar-tree .tree-row { + height: 32px; + gap: 0; + margin: 0 5px; + padding: 0; + border-radius: 4px; + color: #2D2E2E; + font-size: 16px; + line-height: 24px; +} + +.sidebar-tree .tree-row:hover { + background: var(--atelier-sidebar-hover); +} + +.sidebar-tree .tree-row[data-active="true"], +.sidebar-tree .tree-row[data-selected="true"] { + background: rgba(55, 53, 47, 0.08); + color: #2D2E2E; +} + +.sidebar-tree .tree-row[data-drop-feedback="true"], +.sidebar-tree .tree-row[data-drop-target="true"], +.sidebar-tree .tree-root[data-drop-target="true"] { + background: rgba(0, 110, 40, 0.12); + box-shadow: inset 0 0 0 1px rgba(0, 110, 40, 0.28); +} + +.sidebar-tree .tree-toggle, +.sidebar-tree .tree-spacer { + width: 20px; + height: 24px; + color: #B8B5AF; + font-size: 16px; +} + +.sidebar-tree .tree-toggle { + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + font-size: 0; +} + +.sidebar-tree .tree-toggle:hover { + background: rgba(27, 28, 28, 0.06); +} + +.sidebar-tree .tree-toggle::before { + content: ""; + width: 0; + height: 0; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 5px solid currentColor; + display: block; + transform-origin: 50% 50%; +} + +.sidebar-tree .tree-row[aria-expanded="true"] > .tree-toggle::before { + transform: rotate(90deg); +} + +.sidebar-tree .tree-row[data-active="true"] .tree-toggle { + color: #8F8A84; +} + +.sidebar-tree:not([data-tree-shell-mode="filetree"]) .tree-kind-badge[data-kind="page"] { + display: none; +} + +.sidebar-tree .tree-kind-badge { + --mnote-filetree-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h7l3 3v9H3zM10 2v3h3' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 4h5l1 2h8v8H1z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-markdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h5l3 3v9H4zM9 2v3h3M6 8h4M6 10h4M6 12h2' fill='none' stroke='black' stroke-width='1.35'/%3E%3C/svg%3E"); + --mnote-filetree-icon-table: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13v11h-13zM1.5 6h13M1.5 9.5h13M6 2.5v11m4-11v11' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3h13v10h-13zM3 11l3-3 2 2 2-2 3 3M5 6h.1' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-mindmap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h3v3H3zM10 2h3v3h-3zM10 11h3v3h-3zM6 6l4-2M6 6l4 6' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h7l3 3v9H3zM4.5 9h7M4.5 11h7M10 2v3h3' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-word: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h10v12H3zM5 5h6M5 8h6M5 11h4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-ppt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H2zM5 14h6M8 11v3M5 6h6M5 8h4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12v12H2zM2 6h12M2 10h12M6 2v12m4-12v12' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); + --mnote-filetree-icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5 2 8l3 3V9H4V7h1zm6 0v2h1v2h-1v2l3-3zm-2-2H7L5 13h2z'/%3E%3C/svg%3E"); + --mnote-filetree-icon-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 3h12v10H2zm1 3v6h10V6zm0-2v1h10V4z'/%3E%3C/svg%3E"); + --mnote-filetree-icon-config: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h10v2H3zm0 3h10v2H3zm0 3h10v2H3zM5 3h2v4H5zm4 3h2v4H9z'/%3E%3C/svg%3E"); + --mnote-filetree-icon-office: var(--mnote-filetree-icon-word); + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-file); + width: 20px; + height: 20px; + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 20px; + color: #9A958F; + overflow: visible; + position: relative; +} + +.sidebar-tree .tree-kind-badge::before { + content: ""; + width: 14px; + height: 14px; + display: block; + background: currentColor; + -webkit-mask: var(--mnote-filetree-icon-mask) center / contain no-repeat; + mask: var(--mnote-filetree-icon-mask) center / contain no-repeat; +} + +.sidebar-tree .tree-row[data-index-status="indexed"] .tree-kind-badge::after, +.sidebar-tree .tree-row[data-index-status="indexing"] .tree-kind-badge::after, +.sidebar-tree .tree-row[data-index-status="failed"] .tree-kind-badge::after { + position: absolute; + left: -1px; + bottom: 1px; + width: 9px; + height: 9px; + border-radius: 2px; + color: #FFFFFF; + font-size: 8px; + line-height: 9px; + font-weight: 700; + text-align: center; + box-shadow: 0 0 0 1px #FFFFFF; +} + +.sidebar-tree .tree-row[data-index-status="indexed"] .tree-kind-badge::after { + content: "✓"; + background: #38B86E; +} + +.sidebar-tree .tree-row[data-index-status="indexing"] .tree-kind-badge::after { + content: "…"; + background: #D99A2B; +} + +.sidebar-tree .tree-row[data-index-status="failed"] .tree-kind-badge::after { + content: "x"; + background: #D94841; +} + +.sidebar-tree .tree-kind-badge[data-kind="page"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-file); +} + +.sidebar-tree[data-tree-shell-mode="filetree"] .tree-kind-badge[data-kind="page"]::before, +.sidebar-tree .tree-kind-badge[data-kind="document"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-file); +} + +.sidebar-tree .tree-kind-badge[data-kind="index"]::before, +.sidebar-tree .tree-kind-badge[data-kind="markdown"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-markdown); +} + +.sidebar-tree .tree-kind-badge[data-kind="index"], +.sidebar-tree .tree-kind-badge[data-kind="markdown"], +.sidebar-tree .tree-kind-badge[data-kind="code"] { + color: #111111; +} + +.sidebar-tree .tree-kind-badge[data-kind="code"]::before { --mnote-filetree-icon-mask: var(--mnote-filetree-icon-code); } +.sidebar-tree .tree-kind-badge[data-kind="web"]::before { --mnote-filetree-icon-mask: var(--mnote-filetree-icon-web); } +.sidebar-tree .tree-kind-badge[data-kind="config"]::before { --mnote-filetree-icon-mask: var(--mnote-filetree-icon-config); } + +.sidebar-tree .tree-kind-badge[data-kind="folder"]::before, +.sidebar-tree .tree-kind-badge[data-kind="asset_folder"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-folder); +} + +.sidebar-tree .tree-kind-badge[data-kind="folder"], +.sidebar-tree .tree-kind-badge[data-kind="asset_folder"] { + color: #B8751A; +} + +.sidebar-tree .tree-kind-badge[data-kind="image"] { + color: #5B6CF0; +} + +.sidebar-tree .tree-kind-badge[data-kind="image"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-image); +} + +.sidebar-tree .tree-kind-badge[data-kind="mindmap"] { + color: #4F8F68; +} + +.sidebar-tree .tree-kind-badge[data-kind="mindmap"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-mindmap); +} + +.sidebar-tree .tree-kind-badge[data-kind="pdf"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-pdf); +} + +.sidebar-tree .tree-kind-badge[data-kind="pdf"] { + color: #E74C3C; +} + +.sidebar-tree .tree-kind-badge[data-kind="office"]::before, +.sidebar-tree .tree-kind-badge[data-kind="onlyoffice"]::before, +.sidebar-tree .tree-kind-badge[data-kind="word"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-word); +} + +.sidebar-tree .tree-kind-badge[data-kind="ppt"]::before, +.sidebar-tree .tree-kind-badge[data-kind="presentation"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-ppt); +} + +.sidebar-tree .tree-kind-badge[data-kind="sheet"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-sheet); +} + +.sidebar-tree .tree-kind-badge[data-kind="office"], +.sidebar-tree .tree-kind-badge[data-kind="onlyoffice"], +.sidebar-tree .tree-kind-badge[data-kind="web"], +.sidebar-tree .tree-kind-badge[data-kind="word"] { + color: #4F7DF3; +} + +.sidebar-tree .tree-kind-badge[data-kind="ppt"], +.sidebar-tree .tree-kind-badge[data-kind="presentation"] { + color: #D94841; +} + +.sidebar-tree .tree-kind-badge[data-kind="sheet"] { + color: #2F9E44; +} + +.sidebar-tree .tree-kind-badge[data-kind="table"]::before { + --mnote-filetree-icon-mask: var(--mnote-filetree-icon-table); +} + +.sidebar-tree .tree-kind-badge[data-kind="table"], +.sidebar-tree .tree-kind-badge[data-kind="config"] { + color: #5572A2; +} + +.sidebar-tree .tree-link { + padding: 0 2px; + color: inherit; + font-size: 16px; +} + +.sidebar-tree .tree-link-title { + font-weight: 400; +} + +.sidebar-tree .tree-row[data-active="true"] .tree-link-title { + font-weight: 400; +} + +.sidebar-tree .tree-actions { + gap: 1px; + margin-left: auto; +} + +.sidebar-tree .tree-action { + width: 24px; + height: 24px; + color: #B3B3B3; + border-radius: 4px; +} + +.sidebar-tree .tree-action:hover { + background: rgba(27, 28, 28, 0.07); + color: var(--atelier-text); +} + +.mnote-tree-context-menu { + position: fixed; + z-index: var(--wolai-z-context-menu); + width: 220px; + min-width: 220px; + max-width: min(320px, calc(100vw - 16px)); + padding: 6px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 6px; + background: #FFFFFF; + box-shadow: 0 8px 20px rgba(27, 28, 28, 0.12); + backdrop-filter: blur(24px); + color: var(--atelier-text); +} + +.mnote-tree-context-menu__item { + width: 100%; + height: 30px; + min-height: 30px; + display: flex; + align-items: center; + gap: 8px; + padding: 4px 8px; + border: 0; + border-radius: 5px; + background: transparent; + color: inherit; + font: inherit; + font-size: 14px; + line-height: 22px; + text-align: left; + cursor: pointer; +} + +.mnote-tree-context-menu__item:hover { + background: #F4F3F3; +} + +.mnote-tree-context-menu__item:disabled { + opacity: 0.45; + cursor: default; +} + +.mnote-tree-context-menu__item--danger { + color: #D64545; +} + +.mnote-tree-context-menu__item--danger:hover { + background: rgba(214, 69, 69, 0.08); +} + +.mnote-tree-context-menu__icon { + width: 18px; + flex: 0 0 18px; + color: #6D6A65; + font-size: 18px; +} + +.mnote-tree-context-menu__icon::before { + font-size: 18px; +} + +.mnote-tree-context-menu__item--danger .mnote-tree-context-menu__icon { + color: currentColor; +} + +.mnote-tree-context-menu__label { + min-width: 0; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-tree-context-menu__shortcut { + color: #A19D97; + font-size: 12px; +} + +.mnote-tree-context-menu__separator { + height: 1px; + margin: 6px 0; + background: rgba(27, 28, 28, 0.08); +} + +.mnote-attachment-actions { + position: fixed; + z-index: var(--wolai-z-context-menu); + display: inline-flex; + align-items: center; + gap: 2px; + height: 28px; + padding: 2px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 6px; + background: #FFFFFF; + box-shadow: 0 6px 18px rgba(27, 28, 28, 0.12); +} + +.mnote-attachment-actions[hidden] { + display: none !important; +} + +.mnote-attachment-action { + width: 24px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 4px; + background: transparent; + color: #6D6A65; + cursor: pointer; +} + +.mnote-attachment-action:hover { + background: #F4F3F3; + color: #37352F; +} + +.mnote-attachment-action .material-symbols-outlined { + font-size: 18px; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row, +.document-shell .editor-surface .ProseMirror a[href*="/api/local-folder/files/open"] { + display: inline-flex !important; + align-items: center !important; + gap: 7px !important; + max-width: 100% !important; + min-height: 28px !important; + padding: 2px 4px !important; + border-radius: 4px !important; + color: #37352f !important; + font-weight: 500 !important; + line-height: 1.4 !important; + text-decoration: none !important; +} + +.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-missing="true"], +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-missing { + color: #9f1239 !important; + background: #fff1f2 !important; + box-shadow: inset 0 0 0 1px #fecdd3 !important; +} + +.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-unauthorized="true"], +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-unauthorized { + color: #92400e !important; + background: #fffbeb !important; + box-shadow: inset 0 0 0 1px #fde68a !important; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row::before, +.document-shell .editor-surface .ProseMirror a[href*="/api/local-folder/files/open"]::before { + content: "" !important; + display: inline-block !important; + width: 18px !important; + height: 18px !important; + flex: 0 0 18px !important; + border-radius: 4px !important; + background: #6b7280; + box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12) !important; +} + +.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-missing="true"]::before, +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-missing::before { + background: #e11d48 !important; +} + +.document-shell .editor-surface .ProseMirror a[data-mnote-attachment-unauthorized="true"]::before, +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-unauthorized::before { + background: #d97706 !important; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-word::before { + background: #4f7df3; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-ppt::before, +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-pdf::before { + background: #d94841; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-sheet::before { + background: #2f9e44; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-code::before { + background: #111111; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row::after { + content: "" !important; + display: none !important; +} + +.document-shell .editor-surface .ProseMirror a.mnote-uploaded-attachment-row[data-file-size]::after { + content: "◔ " attr(data-file-size) !important; + display: inline-block !important; + margin-left: 4px !important; + color: #9ca3af !important; + font-size: 12px !important; + line-height: 1 !important; + white-space: nowrap !important; +} + +.sidebar-tree .tree-node .tree-children .tree-row { + padding-left: 20px; +} + +.sidebar-tree .tree-node .tree-children .tree-children .tree-row { + padding-left: 32px; +} + +.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-row { + padding-left: 44px; +} + +.sidebar-tree .tree-node .tree-children .tree-children .tree-children .tree-children .tree-row { + padding-left: 56px; +} + +.wolai-file-tree-section { + padding-top: 2px; +} + +.wolai-explorer-title { + margin-bottom: 4px; +} + +.wolai-sidebar-footer { + flex: 0 0 auto; + border-top: 0; + background: var(--atelier-sidebar); +} + +.wolai-footer-entry { + height: 44px; + gap: 8px; + color: #55514C; + font-size: 14px; +} + +.wolai-footer-entry + .wolai-footer-entry { + border-left: 1px solid rgba(27, 28, 28, 0.08); +} + +.mnote-main, +.mnote-content { + background: var(--atelier-document); +} + +.mnote-admin-policy-page{width:min(1080px,calc(100vw - 64px));margin:40px auto 64px}.mnote-admin-policy-modal{position:fixed;inset:0;z-index:var(--wolai-z-modal);display:grid;place-items:center}.mnote-admin-policy-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.22)}.mnote-admin-policy-modal__panel{position:relative;width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border:1px solid var(--wolai-border);border-radius:8px;background:#fff;box-shadow:0 18px 54px rgba(15,23,42,.18);padding:20px}.mnote-admin-policy-modal__close{position:absolute;right:14px;top:14px;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--wolai-text-secondary);cursor:pointer}.mnote-admin-policy-dialog__content{padding-right:28px}.mnote-admin-policy-header{margin-bottom:20px}.mnote-admin-policy-eyebrow{color:var(--wolai-text-secondary);font-size:13px}.mnote-admin-policy-header h1,.mnote-admin-policy-header h2{font-size:22px;font-weight:650}.mnote-admin-policy-header p,.mnote-admin-policy-note{color:var(--wolai-text-secondary);font-size:14px}.mnote-admin-policy-summary,.mnote-admin-policy-panel,.mnote-admin-policy-form{border:1px solid var(--wolai-border);border-radius:8px;background:#fff}.mnote-admin-policy-summary{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:16px;margin-bottom:16px}.mnote-admin-policy-summary-label{display:block;color:var(--wolai-text-secondary);font-size:12px}.mnote-admin-policy-summary code,.mnote-admin-policy-json{white-space:pre-wrap;overflow-wrap:anywhere;font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:12px}.mnote-admin-policy-panel,.mnote-admin-policy-form{padding:16px;margin-bottom:16px}.mnote-admin-policy-panel-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.mnote-admin-policy-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:16px}.mnote-admin-policy-form{display:flex;flex-direction:column;gap:12px}.mnote-admin-policy-form label{display:flex;flex-direction:column;gap:6px;color:var(--wolai-text-secondary);font-size:12px}.mnote-admin-policy-form input,.mnote-admin-policy-form select{min-height:34px;border:1px solid var(--wolai-border);border-radius:6px;padding:6px 8px;background:#fff}.mnote-admin-policy-form button,.mnote-admin-policy-panel button,.mnote-admin-policy-row button{min-height:34px;border:1px solid var(--wolai-border);border-radius:6px;padding:6px 12px;background:var(--wolai-bg-sidebar);cursor:pointer}.mnote-admin-policy-row button{margin-top:8px;color:#B91C1C}.mnote-admin-policy-json{min-height:48px;max-height:320px;overflow:auto;border-radius:6px;background:var(--wolai-bg-sidebar);padding:10px}.mnote-admin-policy-debug{margin-top:12px}.mnote-admin-policy-table{display:grid;gap:8px}.mnote-admin-policy-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(120px,.5fr) minmax(0,.8fr);gap:12px;border:1px solid var(--wolai-border);border-radius:8px;padding:12px}.mnote-admin-policy-row>div{min-width:0}.mnote-admin-policy-row strong,.mnote-admin-policy-root-link{overflow-wrap:anywhere}.mnote-admin-policy-row strong,.mnote-admin-policy-root-link,.mnote-admin-policy-row span{display:block;min-width:0}.mnote-admin-policy-root-link{color:var(--wolai-text-primary);font-weight:650;text-decoration:none}.mnote-admin-policy-root-link:hover{text-decoration:underline}.mnote-admin-policy-row span{color:var(--wolai-text-secondary);font-size:12px;overflow-wrap:anywhere}.mnote-admin-policy-badge{display:inline-flex!important;margin:2px 4px 2px 0;border-radius:999px;padding:2px 8px;background:var(--wolai-bg-sidebar);font-size:12px}.mnote-admin-policy-badge[data-value="write"]{background:#DCFCE7}.mnote-admin-policy-badge[data-value="read"]{background:#DBEAFE}.mnote-admin-policy-badge[data-value="已撤销"]{background:#FEE2E2}.mnote-admin-policy-empty{border:1px dashed var(--wolai-border);border-radius:8px;padding:18px;color:var(--wolai-text-secondary);background:var(--wolai-bg-sidebar);font-size:13px}@media(max-width:960px){.mnote-admin-policy-summary,.mnote-admin-policy-grid,.mnote-admin-policy-row{grid-template-columns:1fr}.mnote-admin-policy-dialog__content{padding-right:0}} + +.mnote-trash-workbench { + width: min(860px, calc(100vw - 64px)); + margin: 52px auto; + color: var(--atelier-text); +} + +.mnote-trash-modal { + position: fixed; + inset: 0; + z-index: var(--wolai-z-modal); + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 48px 32px; + background: rgba(25, 24, 22, 0.34); +} + +.mnote-trash-modal__backdrop { + position: absolute; + inset: 0; +} + +.mnote-trash-modal__panel { + position: relative; + width: min(944px, calc(100vw - 96px)); + height: min(870px, calc(100vh - 112px)); + overflow: hidden; + border: 1px solid rgba(27, 28, 28, 0.14); + border-radius: 6px; + background: var(--atelier-document); + box-shadow: 0 18px 52px rgba(27, 28, 28, 0.22); +} + +.mnote-trash-modal__content { + height: 100%; + overflow: auto; +} + +.mnote-trash-modal__content .mnote-trash-workbench { + width: auto; + margin: 28px 32px 40px; +} + +.mnote-trash-modal__close { + position: absolute; + top: 12px; + right: 14px; + z-index: 1; + width: 32px; + height: 32px; + margin: 0; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 6px; + background: #FFFFFF; + color: #37352F; + font: inherit; + font-size: 20px; + line-height: 28px; + cursor: pointer; +} + +.mnote-trash-modal__close:hover { + background: #F7F7F6; +} + +@media (max-width: 720px) { + .mnote-trash-modal { + padding: 24px 12px; + } + + .mnote-trash-modal__panel { + width: calc(100vw - 24px); + height: min(780px, calc(100vh - 48px)); + } + + .mnote-trash-modal__content .mnote-trash-workbench { + margin: 22px 18px 32px; + } +} + +.mnote-trash-header { + margin-bottom: 28px; +} + +.mnote-trash-header h1 { + margin: 0 0 8px; + font-size: 30px; + font-weight: 650; + line-height: 38px; +} + +.mnote-trash-header p { + margin: 0; + color: #6D6A65; + font-size: 14px; + line-height: 22px; +} + +.mnote-trash-status[data-type="error"] { + color: #C93A32; +} + +.mnote-trash-status[data-type="success"] { + color: #23834D; +} + +.mnote-trash-section { + margin-top: 28px; +} + +.mnote-trash-section-title { + display: flex; + min-height: 32px; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.mnote-trash-section h2 { + margin: 0; + color: #5A5A5A; + font-size: 13px; + font-weight: 600; + line-height: 20px; +} + +.mnote-trash-section h2 span { + color: #9B9A97; + font-weight: 500; +} + +.mnote-trash-row { + display: flex; + min-height: 44px; + align-items: center; + justify-content: space-between; + gap: 16px; + border-top: 1px solid rgba(27, 28, 28, 0.08); +} + +.mnote-trash-row-main { + display: flex; + min-width: 0; + align-items: center; + gap: 10px; +} + +.mnote-trash-title { + min-width: 0; + overflow: hidden; + color: var(--atelier-text); + font-size: 14px; + font-weight: 500; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-trash-meta, +.mnote-trash-kind, +.mnote-trash-note, +.mnote-trash-empty { + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.mnote-trash-actions { + display: flex; + flex: 0 0 auto; + align-items: center; + gap: 8px; +} + +.mnote-trash-actions button { + height: 28px; + padding: 0 10px; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 4px; + background: #FFFFFF; + color: #37352F; + font: inherit; + font-size: 12px; + cursor: pointer; +} + +.mnote-trash-section-title button { + height: 28px; + padding: 0 10px; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 4px; + background: #FFFFFF; + color: #37352F; + font: inherit; + font-size: 12px; + cursor: pointer; +} + +.mnote-trash-actions button:hover:not(:disabled) { + background: #F7F7F6; +} + +.mnote-trash-section-title button:hover:not(:disabled) { + background: #F7F7F6; +} + +.mnote-trash-actions button:disabled, +.mnote-trash-section-title button:disabled { + color: #9B9A97; + cursor: default; +} + +.wolai-topbar { + height: 40px; + padding: 0 20px 0 22px; + background: rgba(255, 255, 255, 0.92); + color: #5A5A5A; + font-size: 14px; + line-height: 1; + backdrop-filter: blur(16px); +} + +.wolai-topbar-left, +.wolai-topbar-actions { + gap: 10px; +} + +.wolai-breadcrumb { + display: flex; + align-items: center; + gap: 9px; + min-width: 0; + color: #6D6A65; +} + +.wolai-breadcrumb-root { + white-space: nowrap; +} + +.wolai-breadcrumb-separator { + color: #D0CDC8; +} + +.wolai-breadcrumb-current { + display: inline-flex; + align-items: center; + gap: 5px; + min-width: 0; + color: var(--atelier-text); + font-weight: 500; +} + +.wolai-home-icon { + color: #111111; + font-size: 16px; +} + +.wolai-icon-button { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 4px; + background: transparent; + color: #5A5A5A; + font: inherit; + font-size: 18px; + line-height: 1; + cursor: pointer; +} + +.wolai-icon-button:hover { + background: #F4F3F3; + color: var(--atelier-text); +} + +.wolai-menu-button { + color: #3D3B37; + font-size: 21px; +} + +.wolai-public-pill { + height: 22px; + display: inline-flex; + align-items: center; + gap: 5px; + padding: 0 8px; + border: 0; + border-radius: 3px; + background: #ECFCEF; + color: #087B31; + font-size: 12px; + font-weight: 500; +} + +.wolai-ai-inline { + color: var(--atelier-primary-container); +} + +.document-shell { + box-sizing: border-box; + width: min(100%, 760px); + min-height: calc(100vh - 40px); + padding: 68px 0 160px; + margin: 0 auto; +} + +.document-workspace { + --mnote-secondary-pane-width: minmax(320px, 42%); + --mnote-secondary-pane-resizer-width: 6px; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-items: stretch; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; + overflow: hidden; +} + +.document-workspace[data-has-secondary-pane="true"] { + grid-template-columns: minmax(0, 1fr) var(--mnote-secondary-pane-resizer-width) var(--mnote-secondary-pane-width); +} + +.mnote-navigation-page-host { + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; + overflow: auto; + background: var(--wolai-bg-main); +} + +.mnote-navigation-page { + width: min(960px, calc(100% - 64px)); + margin: 0 auto; + padding: 56px 0 96px; +} + +.mnote-navigation-page__header { + margin-bottom: 28px; +} + +.mnote-navigation-page__header h1 { + margin: 0; + font-size: 28px; + font-weight: 650; + line-height: 1.25; + color: var(--wolai-text-primary); +} + +.mnote-navigation-page__header p { + margin: 8px 0 0; + color: var(--wolai-text-secondary); + font-size: 13px; + line-height: 1.5; + overflow-wrap: anywhere; +} + +.mnote-navigation-page__section { + margin-top: 24px; +} + +.mnote-navigation-page__notice { + margin: 0 0 20px; + padding: 10px 12px; + border: 1px solid rgba(210, 180, 90, 0.42); + border-radius: 6px; + background: rgba(255, 247, 221, 0.72); + color: var(--wolai-text-primary); + font-size: 13px; + line-height: 1.5; +} + +.mnote-navigation-page__notice span { + display: block; + margin-top: 4px; + color: var(--wolai-text-secondary); + overflow-wrap: anywhere; +} + +.mnote-navigation-page__section h2 { + margin: 0 0 10px; + font-size: 13px; + font-weight: 650; + color: var(--wolai-text-secondary); +} + +.mnote-navigation-page__section p { + margin: 0; + color: var(--wolai-text-secondary); + font-size: 13px; +} + +.mnote-navigation-page__item { + display: flex; + align-items: center; + min-height: 34px; + padding: 6px 8px; + border-radius: 6px; + color: var(--wolai-text-primary); + font-size: 14px; + line-height: 1.4; + text-decoration: none; + overflow-wrap: anywhere; +} + +.mnote-navigation-page__item:hover { + background: var(--wolai-bg-sidebar); +} + +.document-main-editor-group { + min-width: 0; + min-height: 0; + height: 100%; + display: flex; + flex-direction: column; + overflow-y: auto; + overscroll-behavior: contain; +} + +.mnote-main-tab-panels { + min-width: 0; + min-height: 0; + flex: 1 1 auto; + display: flex; + flex-direction: column; +} + +.mnote-main-tab-panels > [data-mnote-page-tab-panel] { + min-width: 0; + min-height: 0; + flex: 1 1 auto; + display: flex; + flex-direction: column; +} + +.mnote-main-tab-strip { + min-height: 36px; + display: flex; + align-items: flex-end; + gap: 1px; + border-bottom: 1px solid #E9E9E8; + background: #FAFAF9; + padding: 0 10px; + position: sticky; + top: 0; + z-index: var(--wolai-z-dock); +} + +.mnote-main-tab { + height: 36px; + max-width: 240px; + min-width: 0; + display: inline-flex; + align-items: center; + gap: 7px; + border: 0; + border-radius: 6px 6px 0 0; + background: transparent; + color: #6B6862; + padding: 0 9px; + cursor: pointer; + font-size: 13px; + line-height: 20px; +} + +.mnote-main-tab:hover { + background: #F4F3F3; + color: #1B1C1C; +} + +.mnote-main-tab:focus-visible { + outline: 2px solid #2F80ED; + outline-offset: -2px; +} + +.mnote-main-tab.is-active { + background: #FFF; + color: #1B1C1C; + box-shadow: inset 0 1px 0 #E9E9E8, inset 1px 0 0 #E9E9E8, inset -1px 0 0 #E9E9E8; +} + +.mnote-main-tab.is-close-guarded { + outline: 2px solid #E03E3E; + outline-offset: -2px; +} + +.mnote-main-tab.is-close-guarded .mnote-main-tab-close { + opacity: 0.65; +} + +.mnote-close-guard-notice { + display: flex; + align-items: center; + min-height: 34px; + padding: 7px 16px; + border-bottom: 1px solid #fecaca; + background: #fff3f3; + color: #991b1b; + font-size: 13px; + line-height: 1.45; + transition: opacity 160ms ease; +} + +.mnote-close-guard-notice.is-hiding { + opacity: 0; + pointer-events: none; +} + +.mnote-main-tab-badge { + width: 14px; + height: 14px; + flex: 0 0 14px; + border-radius: 2px; + background: #6b7280; + box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); +} + +.mnote-main-tab[data-mnote-tab-kind="page"] .mnote-main-tab-badge, +.mnote-main-tab[data-mnote-tab-badge-kind="code"] .mnote-main-tab-badge { + background: #111111; +} + +.mnote-main-tab[data-mnote-tab-badge-kind="word"] .mnote-main-tab-badge { + background: #4f7df3; +} + +.mnote-main-tab[data-mnote-tab-badge-kind="ppt"] .mnote-main-tab-badge { + background: #d94841; +} + +.mnote-main-tab[data-mnote-tab-badge-kind="pdf"] .mnote-main-tab-badge { + background: #e74c3c; +} + +.mnote-main-tab[data-mnote-tab-badge-kind="file"] .mnote-main-tab-badge { + background: #6b7280; +} + +.mnote-main-tab[data-mnote-tab-badge-kind="sheet"] .mnote-main-tab-badge { + background: #2f9e44; +} + +.mnote-main-tab[data-mnote-tab-badge-kind="image"] .mnote-main-tab-badge { + background: #5b6cf0; +} + +.mnote-main-tab-title { + min-width: 0; + line-height: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-main-tab-close { + width: 18px; + height: 18px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 4px; + background: transparent; + color: inherit; + padding: 0; + cursor: pointer; +} + +.mnote-main-tab-close:hover { + background: rgba(55, 53, 47, 0.12); +} + +.mnote-main-tab-panels { + min-width: 0; +} + +.mnote-resource-tab-host[hidden], +.mnote-resource-tab-panel[hidden], +[data-mnote-page-tab-panel][hidden] { + display: none !important; +} + +.mnote-resource-tab-host { + flex: 1 1 auto; + min-height: 0; +} + +.mnote-resource-tab-panel-root { + min-height: 0; + height: 100%; +} + +.mnote-resource-tab-panel { + min-height: calc(100vh - 76px); + height: 100%; + min-width: 0; +} + +.mnote-resource-tab-passive-shell { + min-height: calc(100vh - 80px); + background: #FFF; +} + +.mnote-knowledge-rag-toolbar { + display: flex; + align-items: center; + gap: 8px; + min-height: 40px; + padding: 6px 12px; + border-bottom: 1px solid rgba(55, 53, 47, 0.12); + background: #FFF; + color: #37352f; + font-size: 13px; + box-sizing: border-box; +} + +.mnote-knowledge-rag-status { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #787774; +} + +.mnote-knowledge-rag-toolbar button { + flex: 0 0 auto; + height: 28px; + border: 1px solid rgba(55, 53, 47, 0.16); + border-radius: 4px; + padding: 0 9px; + background: #FFF; + color: #37352f; + font: inherit; + cursor: pointer; +} + +.mnote-knowledge-rag-toolbar button:hover:not(:disabled) { + background: rgba(55, 53, 47, 0.06); +} + +.mnote-knowledge-rag-toolbar button:disabled { + cursor: default; + color: #a8a29e; + background: #f7f6f3; +} + +.mnote-knowledge-rag-task-dock { + position: fixed; + top: 12px; + right: 12px; + bottom: 12px; + z-index: var(--wolai-z-popover); + color: #37352f; + font-size: 13px; + pointer-events: none; +} + +.mnote-knowledge-rag-task-toggle { + position: relative; +} + +.mnote-knowledge-rag-task-badge { + position: absolute; + top: 2px; + right: 2px; + min-width: 14px; + height: 14px; + padding: 0 3px; + border-radius: 999px; + background: #d1453b; + color: #fff; + font-size: 10px; + line-height: 14px; + text-align: center; + box-sizing: border-box; + pointer-events: none; +} + +.mnote-knowledge-rag-task-drawer { + width: min(440px, calc(100vw - 24px)); + height: 100%; + pointer-events: auto; +} + +.mnote-knowledge-rag-task-drawer[hidden] { + display: none !important; +} + +.mnote-knowledge-rag-task-panel { + height: 100%; + display: flex; + flex-direction: column; + gap: 12px; + padding: 14px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 14px; + background: rgba(255, 255, 255, 0.98); + box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14); + box-sizing: border-box; +} + +.mnote-knowledge-rag-task-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} + +.mnote-knowledge-rag-task-head > div { + min-width: 0; +} + +.mnote-knowledge-rag-task-head strong { + display: block; + color: #1B1C1C; + font-size: 16px; + font-weight: 650; + line-height: 22px; +} + +.mnote-knowledge-rag-task-head span { + display: block; + margin-top: 2px; + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.mnote-knowledge-rag-task-close { + flex: 0 0 auto; + width: 28px; + height: 28px; + border: 0; + border-radius: 6px; + background: transparent; + color: #787774; + cursor: pointer; +} + +.mnote-knowledge-rag-task-close:hover { + background: rgba(55, 53, 47, 0.08); + color: #37352f; +} + +.mnote-knowledge-rag-task-tabs { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 4px; + padding: 3px; + border-radius: 8px; + background: #F4F3F2; +} + +.mnote-knowledge-rag-task-tabs button { + min-width: 0; + height: 28px; + border: 0; + border-radius: 6px; + background: transparent; + color: #5A5A5A; + font-size: 12px; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-knowledge-rag-task-tabs button[aria-selected="true"] { + background: #FFF; + color: #1B1C1C; + box-shadow: 0 1px 4px rgba(27, 28, 28, 0.08); +} + +.mnote-knowledge-rag-task-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.mnote-knowledge-rag-task-toolbar span { + color: #8B8782; + font-size: 12px; +} + +.mnote-knowledge-rag-task-toolbar button, +.mnote-knowledge-rag-task-actions button { + min-height: 28px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 6px; + background: #FFF; + color: #1B1C1C; + font-size: 12px; + cursor: pointer; +} + +.mnote-knowledge-rag-task-toolbar button:disabled { + color: #AAA6A0; + cursor: default; +} + +.mnote-knowledge-rag-task-list { + min-height: 0; + overflow: auto; + display: flex; + flex-direction: column; + gap: 8px; +} + +.mnote-knowledge-rag-task-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: start; + gap: 12px; + padding: 10px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 8px; + background: #FFF; +} + +.mnote-knowledge-rag-task-main { + min-width: 0; + display: grid; + gap: 5px; +} + +.mnote-knowledge-rag-task-title-line { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; +} + +.mnote-knowledge-rag-task-main strong { + display: block; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #1B1C1C; + font-size: 13px; + font-weight: 600; + line-height: 18px; +} + +.mnote-knowledge-rag-task-main em { + flex: 0 0 auto; + padding: 1px 6px; + border-radius: 999px; + background: #F0EFED; + color: #8B8782; + font-size: 10px; + font-style: normal; + line-height: 15px; +} + +.mnote-knowledge-rag-task-row[data-mnote-knowledge-rag-task-category="attention"] .mnote-knowledge-rag-task-main em { + background: #FEE2E2; + color: #B3261E; +} + +.mnote-knowledge-rag-task-row[data-mnote-knowledge-rag-task-category="active"] .mnote-knowledge-rag-task-main em { + background: #DBEAFE; + color: #1D4ED8; +} + +.mnote-knowledge-rag-task-main span { + display: block; + min-width: 0; + overflow: hidden; + color: #787774; + font-size: 12px; + line-height: 17px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-knowledge-rag-task-progress { + position: relative; + height: 4px; + overflow: hidden; + border-radius: 999px; + background: #ECE9E4; +} + +.mnote-knowledge-rag-task-progress i { + display: block; + height: 100%; + border-radius: inherit; + background: #5B8DEF; +} + +.mnote-knowledge-rag-task-progress[data-progress-mode="indeterminate"] i { + width: 40%; + animation: mnote-task-progress-slide 1.15s ease-in-out infinite; +} + +@keyframes mnote-task-progress-slide { + 0% { + transform: translateX(-120%); + } + 100% { + transform: translateX(260%); + } +} + +.mnote-knowledge-rag-task-empty { + padding: 24px 12px; + border: 1px dashed rgba(27, 28, 28, 0.12); + border-radius: 8px; + color: #787774; + text-align: center; +} + +.mnote-knowledge-rag-task-actions { + display: grid; + flex: 0 0 auto; + gap: 6px; +} + +.mnote-knowledge-rag-task-actions button { + padding: 0 8px; +} + +.mnote-knowledge-rag-task-actions button[data-mnote-knowledge-rag-task-delete] { + color: #b3261e; +} + +@media (max-width: 720px) { + .mnote-knowledge-rag-task-dock { + left: 12px; + } + + .mnote-knowledge-rag-task-drawer { + width: 100%; + } + + .mnote-knowledge-rag-task-row { + grid-template-columns: 1fr; + } + + .mnote-knowledge-rag-task-actions { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +.mnote-resource-tab-frame, +.mnote-resource-tab-image, +.mnote-resource-tab-text-shell { + width: 100%; + min-height: calc(100vh - 80px); + border: 0; + background: #FFF; +} + +.mnote-resource-tab-image { + display: block; + object-fit: contain; + padding: 28px; +} + +.mnote-resource-tab-image-shell { + position: relative; + min-height: calc(100vh - 80px); + overflow: auto; + background: #FFF; +} + +.mnote-resource-tab-bbox-highlight { + position: absolute; + border: 2px solid rgba(37, 99, 235, 0.9); + background: rgba(37, 99, 235, 0.16); + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); + pointer-events: none; + z-index: 2; +} + +.editor-surface .ProseMirror [data-mnote-evidence-text-highlight="true"], +.mnote-resource-tab-text-shell [data-mnote-evidence-text-highlight="true"] { + outline: 2px solid rgba(37, 99, 235, 0.9); + outline-offset: 3px; + background: rgba(37, 99, 235, 0.1); +} + +.mnote-resource-tab-text-shell { + padding: 34px 48px; +} + +.mnote-resource-tab-code-shell { + display: flex; + flex-direction: column; + width: 100%; + min-height: calc(100vh - 80px); + background: #FFF; + color: #37352F; +} + +.mnote-resource-tab-code-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + height: 42px; + padding: 0 18px; + border-bottom: 1px solid rgba(55, 53, 47, 0.1); + background: #FAFAF8; + box-sizing: border-box; +} + +.mnote-resource-tab-code-title { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 13px; + font-weight: 600; +} + +.mnote-resource-tab-code-meta { + flex: 0 0 auto; + font-size: 12px; + color: #73726E; +} + +.mnote-resource-tab-code-preview { + flex: 1 1 auto; + min-height: 0; + margin: 0; + padding: 18px 22px 48px; + overflow: auto; + background: #1F2328; + color: #F0F3F6; + font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; + white-space: pre; + tab-size: 2; + box-sizing: border-box; +} + +.mnote-resource-tab-error { + display: flex; + place-items: center; + justify-content: center; + width: 100%; + min-height: calc(100vh - 80px); + background: #FFF; + color: #73726e; + font-size: 14px; + line-height: 1.6; + padding: 48px; + box-sizing: border-box; +} + +.mnote-resource-tab-error[data-resource-tab-error="true"] { + display: flex; +} + +.mnote-resource-tab-error-inner { + max-width: 420px; + text-align: center; + border: 1px solid var(--color-basic-200, #E3E3E0); + border-radius: 6px; + padding: 24px 28px; + background: var(--color-basic-50, #F7F7F5); +} + +.mnote-resource-tab-error-inner h1 { + margin: 0 0 8px; + font-size: 15px; + font-weight: 600; + color: var(--color-basic-900, #37352F); +} + +.mnote-resource-tab-error-inner p { + margin: 0; + font-size: 13px; + color: var(--color-basic-600, #9B9A97); +} + +.mnote-resource-tab-mindmap-shell { + width: 100%; + max-width: none; + height: 100%; + min-height: calc(100vh - 80px); + margin: 0; + padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.mnote-resource-tab-mindmap-root { + width: 100%; + height: 100%; + min-height: calc(100vh - 80px); + overflow: hidden; + flex: 1 1 auto; +} + +.document-pane[data-pane-role="secondary"] .mnote-resource-tab-mindmap-shell, +[data-testid="mnote-secondary-editor-tab-host"] .mnote-resource-tab-mindmap-shell { + width: 100%; + padding: 0; +} + +.mnote-resource-tab-mindmap-shell [data-testid="mnote-mindmap-editor-root"] { + width: 100%; + height: 100%; + min-height: calc(100vh - 80px); + overflow: hidden; +} + +.mnote-resource-tab-editor-root { + min-height: calc(100vh - 112px); +} + +.document-pane { + min-width: 0; +} + +.document-pane[hidden] { + display: none !important; +} + +.document-pane-resizer { + display: none; + width: var(--mnote-secondary-pane-resizer-width); + min-height: calc(100vh - 40px); + cursor: col-resize; + position: relative; +} + +.document-workspace[data-has-secondary-pane="true"] .document-pane-resizer { + display: block; +} + +.document-pane-resizer::after { + content: ""; + position: absolute; + left: 2px; + top: 64px; + bottom: 48px; + width: 2px; + border-radius: 999px; + background: rgba(27, 28, 28, 0.08); +} + +.document-shell-header { + max-width: none; + padding: 0; + margin: 0 0 50px; +} + +.document-pane-header-row { + display: flex; + align-items: flex-start; + gap: 12px; +} + +.document-pane-header-row .document-title-heading { + flex: 1; + min-width: 0; +} + +.document-page-icon { + display: none; +} + +.mnote-material-page-icon { + width: 72px; + height: 72px; + font-size: 72px; +} + +.mnote-material-page-icon::before { + font-size: 72px; +} + +.document-title-heading, +.document-shell-header h1 { + padding: 0; + margin: 0; + color: var(--atelier-text); + font-size: 34px; + font-weight: 600; + line-height: 44px; + letter-spacing: 0; + text-align: left; +} + +.document-title-input { + width: 100%; + min-height: 44px; + display: block; + resize: none; + overflow: hidden; + border: 0; + outline: none; + background: transparent; + color: inherit; + font: inherit; + line-height: inherit; + letter-spacing: 0; + text-align: inherit; +} + +.document-title-input::placeholder { + color: #B8B5AF; +} + +.document-title-input[data-title-save-status="error"] { + text-decoration: underline; + text-decoration-color: #D6545D; + text-underline-offset: 6px; +} + +.document-pane-close { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + margin-top: 8px; + border: 0; + border-radius: 4px; + background: transparent; + color: #6D6A65; + cursor: pointer; + flex: 0 0 auto; +} + +.document-pane-close:hover { + background: #F4F3F3; + color: #1B1C1C; +} + +.document-shell-meta { + display: none; +} + +.document-shell-meta span { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.mnote-editor-conflict-panel { + display: flex; + flex-direction: column; + gap: 10px; + margin: -28px 0 28px; + padding: 14px 16px; + border: 1px solid #E2B86C; + border-radius: 8px; + background: #FFF8E6; + color: var(--wolai-text-primary); +} + +.mnote-editor-conflict-panel h2 { + margin: 0; + font-size: 15px; + font-weight: 650; + line-height: 22px; +} + +.mnote-editor-conflict-panel p { + margin: 0; + color: var(--wolai-text-secondary); + font-size: 13px; + line-height: 20px; +} + +.mnote-conflict-meta { + margin: 0; + color: var(--wolai-text-secondary); + font-size: 12px; + line-height: 18px; +} + +.mnote-conflict-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.mnote-conflict-actions button { + min-height: 30px; + border: 1px solid rgba(27, 28, 28, 0.16); + border-radius: 6px; + padding: 5px 10px; + background: #fff; + color: var(--wolai-text-primary); + cursor: pointer; + font-size: 13px; +} + +.mnote-conflict-actions button:hover { + background: var(--wolai-bg-hover); +} + +.mnote-conflict-diff-panel { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + margin-top: 4px; +} + +.mnote-conflict-diff-panel[hidden] { + display: none; +} + +.mnote-conflict-diff-panel h3 { + margin: 0 0 6px; + font-size: 12px; + font-weight: 650; + color: var(--wolai-text-secondary); +} + +.mnote-conflict-diff-panel pre, +.mnote-conflict-merge-box textarea, +.mnote-conflict-diff-status { + min-height: 96px; + max-height: 260px; + overflow: auto; + border-radius: 6px; + background: rgba(255, 255, 255, 0.7); + padding: 10px; + white-space: pre-wrap; + overflow-wrap: anywhere; + font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; + font-size: 12px; + line-height: 18px; +} + +.mnote-conflict-merge-box { + grid-column: 1 / -1; +} + +.mnote-conflict-merge-box textarea { + width: 100%; + min-height: 132px; + resize: vertical; +} + +@media (max-width: 768px) { + .mnote-conflict-diff-panel { + grid-template-columns: 1fr; + } +} + +#mnote-editor-island { + width: 100%; + max-width: none; + min-height: 360px; + margin: 0; + padding: 0 0 48px; +} + +#mnote-leptos-tiptap-island-editor-root { + min-height: 320px; +} + +[data-editor-host-kind="leptos_tiptap_island"] { + min-height: 320px; +} + +#mnote-leptos-tiptap-island-editor-root .editor-surface { + border: 0 !important; + box-shadow: none !important; + background: transparent !important; + padding: 0 !important; +} + +[data-editor-host-kind="leptos_tiptap_island"] .editor-surface { + border: 0 !important; + box-shadow: none !important; + background: transparent !important; + padding: 0 !important; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror, +.ProseMirror { + color: var(--atelier-text); + font-size: 16px; + line-height: 24px; + outline: none; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror { + width: 100% !important; + min-height: 280px; + margin: 0 !important; + padding: 0 !important; +} + +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { + width: 100% !important; + min-height: 280px; + margin: 0 !important; + padding: 0 !important; +} + +#mnote-leptos-tiptap-island-editor-root .block-handle-shell { + left: -32px !important; + z-index: var(--wolai-z-dock); + opacity: 1; + pointer-events: none; + transition: opacity 120ms ease, transform 120ms ease; +} + +#mnote-leptos-tiptap-island-editor-root .block-handle-shell:hover, +#mnote-leptos-tiptap-island-editor-root .block-handle-shell[data-dragging="true"] { + opacity: 1; +} + +#mnote-leptos-tiptap-island-editor-root .block-handle-shell .block-handle-insert, +#mnote-leptos-tiptap-island-editor-root .block-handle-shell .block-handle-trigger { + pointer-events: auto; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror p { + margin: 0 0 8px; +} + +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p { + margin: 0 0 8px; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror ul, +#mnote-leptos-tiptap-island-editor-root .ProseMirror ol { + margin: 4px 0 8px; + padding-left: 1.5em; +} + +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ul, +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ol { + margin: 4px 0 8px; + padding-left: 1.5em; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror li { + margin: 2px 0; + padding-left: 2px; +} + +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror li { + margin: 2px 0; + padding-left: 2px; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror blockquote { + margin: 8px 0; + padding: 2px 0 2px 14px; + border-left: 3px solid #D9D6D0; + color: #5F5B56; +} + +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror blockquote { + margin: 8px 0; + padding: 2px 0 2px 14px; + border-left: 3px solid #D9D6D0; + color: #5F5B56; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror input[type="checkbox"] { + width: 16px; + height: 16px; + margin: 0 8px 0 0; + vertical-align: -3px; + accent-color: #2EA44F; +} + +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror input[type="checkbox"] { + width: 16px; + height: 16px; + margin: 0 8px 0 0; + vertical-align: -3px; + accent-color: #2EA44F; +} + +#mnote-leptos-tiptap-island-editor-root .ProseMirror h1, +#mnote-leptos-tiptap-island-editor-root .ProseMirror h2, +#mnote-leptos-tiptap-island-editor-root .ProseMirror h3 { + line-height: 1.2; + letter-spacing: 0; +} + +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h1, +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h2, +[data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h3 { + line-height: 1.2; + letter-spacing: 0; +} + +.mnote-workspace-active-state { + padding-top: 10px; +} + +.mnote-workspace-active-link { + display: inline-flex; + align-items: center; + gap: 8px; + min-height: 30px; + color: var(--atelier-text); + font-size: 15px; + text-decoration: underline; + text-decoration-color: #D7D4CE; + text-underline-offset: 5px; +} + +.mnote-workspace-active-link::before { + content: "▤"; + color: #A19D97; + text-decoration: none; +} + +.wolai-floating-actions { + right: 24px; + bottom: 44px; + flex-direction: column-reverse; + gap: 16px; + z-index: var(--wolai-z-dock); +} + +.wolai-floating-button { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + cursor: pointer; +} + +.wolai-floating-button--tasks { + width: 40px; + height: 40px; + border: 1px solid rgba(27, 28, 28, 0.1); + background: rgba(255, 255, 255, 0.86); + color: #5A5A5A; + box-shadow: 0 10px 24px rgba(27, 28, 28, 0.08); + backdrop-filter: blur(16px); + font-size: 18px; +} + +.wolai-floating-button--ai { + width: 40px; + height: 40px; + border: 1px solid rgba(27, 28, 28, 0.1); + background: #FFFFFF; + color: #5A5A5A; + box-shadow: 0 10px 24px rgba(27, 28, 28, 0.08); + font-size: 18px; +} + +.document-shell[data-page-wide-layout="true"] { + width: min(100%, 980px); +} + +.document-pane[data-pane-role="secondary"] .document-shell { + width: min(100%, 820px); + padding-left: 28px; + padding-right: 20px; +} + +.document-pane[data-pane-role="secondary"] .document-shell-header { + margin-bottom: 36px; +} + +.document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror, +.document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror p, +.document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror li { + font-size: 15px; + line-height: 22px; +} + +.document-shell[data-page-small-text="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror, +.document-shell[data-page-small-text="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p, +.document-shell[data-page-small-text="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror li { + font-size: 15px; + line-height: 22px; +} + +.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror p, +.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ul, +.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ol, +.document-shell[data-layout-density="compact"] #mnote-leptos-tiptap-island-editor-root .ProseMirror blockquote { + margin-bottom: 4px; +} + +.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p, +.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ul, +.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ol, +.document-shell[data-layout-density="compact"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror blockquote { + margin-bottom: 4px; +} + +.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror p, +.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ul, +.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror ol, +.document-shell[data-layout-density="spacious"] #mnote-leptos-tiptap-island-editor-root .ProseMirror blockquote { + margin-bottom: 14px; +} + +.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror p, +.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ul, +.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror ol, +.document-shell[data-layout-density="spacious"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror blockquote { + margin-bottom: 14px; +} + +.document-shell[data-page-font="song"] .document-title-input, +.document-shell[data-page-font="song"] #mnote-leptos-tiptap-island-editor-root .ProseMirror { + font-family: "Noto Serif SC", "Songti SC", serif; +} + +.document-shell[data-page-font="song"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { + font-family: "Noto Serif SC", "Songti SC", serif; +} + +.document-shell[data-page-font="kai"] .document-title-input, +.document-shell[data-page-font="kai"] #mnote-leptos-tiptap-island-editor-root .ProseMirror { + font-family: "STKaiti", "KaiTi", serif; +} + +.document-shell[data-page-font="kai"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { + font-family: "STKaiti", "KaiTi", serif; +} + +.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror { + counter-reset: mnote-heading; +} + +.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror { + counter-reset: mnote-heading; +} + +.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror h1::before, +.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror h2::before, +.document-shell[data-page-show-heading-numbers="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror h3::before { + counter-increment: mnote-heading; + content: counter(mnote-heading) ". "; + color: #8B8782; + font-weight: 500; +} + +.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h1::before, +.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h2::before, +.document-shell[data-page-show-heading-numbers="true"] [data-editor-host-kind="leptos_tiptap_island"] .ProseMirror h3::before { + counter-increment: mnote-heading; + content: counter(mnote-heading) ". "; + color: #8B8782; + font-weight: 500; +} + +.wolai-page-settings-popover { + position: fixed; + top: 52px; + right: 18px; + z-index: var(--wolai-z-popover); +} + +.wolai-page-settings-panel { + width: min(360px, calc(100vw - 24px)); + display: flex; + flex-direction: column; + gap: 12px; + padding: 14px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 14px; + background: rgba(255, 255, 255, 0.98); + box-shadow: 0 18px 48px rgba(27, 28, 28, 0.12); +} + +.mnote-settings-panel-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.mnote-settings-panel-head strong { + color: #1B1C1C; + font-size: 14px; + line-height: 20px; +} + +.mnote-settings-panel-close { + width: 28px; + height: 28px; + border: 0; + border-radius: 6px; + background: transparent; + color: #8B8782; + cursor: pointer; + font-size: 18px; + line-height: 1; +} + +.mnote-settings-panel-close:hover { + background: #F4F3F3; + color: #1B1C1C; +} + +.mnote-local-index-settings-panel { + width: min(386px, calc(100vw - 24px)); +} + +.mnote-knowledge-rag-settings-panel { + width: min(440px, calc(100vw - 24px)); + max-height: calc(100vh - 72px); + overflow-y: auto; +} + +.mnote-knowledge-rag-meta { + display: flex; + flex-direction: column; + gap: 5px; +} + +.mnote-knowledge-rag-meta div { + display: grid; + grid-template-columns: 72px minmax(0, 1fr); + gap: 8px; + align-items: baseline; + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.mnote-knowledge-rag-meta code { + min-width: 0; + overflow: hidden; + color: #1B1C1C; + font: 11px/16px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-knowledge-rag-source-list, +.mnote-knowledge-rag-source-inputs { + display: flex; + flex-direction: column; + gap: 6px; +} + +.mnote-knowledge-rag-source-tools { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.mnote-knowledge-rag-control-group .wolai-page-settings-index-actions { + justify-content: flex-start; +} + +.mnote-knowledge-rag-source-filters { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.mnote-knowledge-rag-source-filters button { + border: 1px solid #E3E1DE; + border-radius: 6px; + background: #FFFFFF; + color: #5F5A54; + font-size: 11px; + line-height: 18px; + padding: 2px 7px; + white-space: nowrap; +} + +.mnote-knowledge-rag-source-filters button[data-active="true"] { + border-color: #B8DDBB; + background: #EAF7EA; + color: #166534; +} + +.mnote-knowledge-rag-source-filters button span { + color: #8B8782; + font-variant-numeric: tabular-nums; +} + +.mnote-knowledge-rag-source-row, +.mnote-knowledge-rag-source-input-row { + display: grid; + grid-template-columns: 12px minmax(0, 1fr) auto; + align-items: center; + gap: 8px; +} + +.mnote-knowledge-rag-source-input-row { + grid-template-columns: minmax(0, 1fr) 56px 28px; +} + +.mnote-knowledge-rag-input-status { + color: #8B8782; + font-size: 11px; + line-height: 16px; + text-align: right; + white-space: nowrap; +} + +.mnote-knowledge-rag-input-status[data-status="done"] { + color: #15803D; +} + +.mnote-knowledge-rag-input-status[data-status="running"], +.mnote-knowledge-rag-input-status[data-status="retry"] { + color: #B45309; +} + +.mnote-knowledge-rag-input-status[data-status="failed"] { + color: #B91C1C; +} + +.mnote-knowledge-rag-source-main { + display: flex; + min-width: 0; + flex-direction: column; + gap: 2px; +} + +.mnote-knowledge-rag-source-main strong { + overflow: hidden; + color: #1B1C1C; + font-size: 12px; + font-weight: 600; + line-height: 17px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-knowledge-rag-source-main span { + overflow: hidden; + color: #8B8782; + font: 11px/16px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-knowledge-rag-source-progress { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 8px; + align-items: center; + width: 100%; +} + +.mnote-knowledge-rag-source-progress div { + height: 5px; + overflow: hidden; + border-radius: 999px; + background: #ECE9E3; +} + +.mnote-knowledge-rag-source-progress i { + display: block; + height: 100%; + border-radius: inherit; + background: #2F7D4A; +} + +.mnote-knowledge-rag-source-progress[data-progress-mode="indeterminate"] i { + width: 38%; + animation: mnote-task-progress-slide 1.15s ease-in-out infinite; +} + +.mnote-knowledge-rag-source-progress span { + max-width: 72px; + overflow: hidden; + color: #5F5A54; + font: 10px/14px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mnote-knowledge-rag-source-actions { + display: flex; + gap: 6px; + justify-content: flex-end; +} + +.mnote-knowledge-rag-source-actions button { + min-width: 0; + border: 1px solid #E3E1DE; + border-radius: 6px; + background: #FFFFFF; + color: #5F5A54; + font-size: 11px; + line-height: 18px; + padding: 2px 6px; + white-space: nowrap; +} + +.mnote-knowledge-rag-source-actions button:hover:not(:disabled) { + background: #F4F3F3; + color: #1B1C1C; +} + +.mnote-knowledge-rag-source-actions button:disabled { + opacity: 0.45; +} + +.wolai-page-settings-tabs { + display: flex; + gap: 6px; +} + +.wolai-page-settings-tab { + height: 30px; + padding: 0 10px; + border: 0; + border-radius: 8px; + background: transparent; + color: #6D6A65; + font-size: 13px; + cursor: pointer; +} + +.wolai-page-settings-tab.is-active { + background: #F4F3F3; + color: #1B1C1C; + font-weight: 600; +} + + +/* 扩展面板 */ +.mnote-extensions-panel { + gap: 12px; +} +.mnote-extensions-subtabs { + display: flex; + gap: 4px; + border-bottom: 1px solid #E5E4E4; + padding-bottom: 8px; +} +.mnote-extensions-subtab { + padding: 4px 12px; + border-radius: 6px; + font-size: 13px; + border: none; + background: transparent; + color: #787877; + cursor: pointer; +} +.mnote-extensions-subtab:hover { + background: #F4F3F3; +} +.mnote-extensions-subtab.is-active { + background: #F4F3F3; + color: #1B1C1C; + font-weight: 600; +} +.mnote-extensions-subpanel { + display: flex; + flex-direction: column; + gap: 6px; + max-height: 300px; + overflow-y: auto; +} +.mnote-extensions-item { + padding: 8px 10px; + background: #F9F8F8; + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 4px; +} +.mnote-extensions-item-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; +} +.mnote-extensions-label { + color: #787877; +} +.mnote-extensions-detail { + color: #AEADAB; + font-size: 12px; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.mnote-extensions-source { + color: #AEADAB; + font-size: 11px; +} +.mnote-extensions-agent-name { + font-weight: 600; + color: #1B1C1C; + font-size: 13px; + margin-bottom: 4px; +} +.mnote-extensions-tool-item { + padding: 2px 0 2px 12px; + font-size: 12px; + color: #585857; + display: flex; + justify-content: space-between; +} +.mnote-extensions-tool-name { + font-family: monospace; + font-size: 11px; +} +.mnote-extensions-tool-disabled { + color: #D15251; + font-size: 10px; +} +.mnote-extensions-loading { + color: #AEADAB; + font-size: 13px; +} +.mnote-extensions-error { + color: #D15251; + font-size: 13px; +} +.mnote-extensions-item-actions { + display: flex; + gap: 8px; + padding-top: 4px; +} +.mnote-status-ready { + color: #409440; + font-weight: 500; +} +.mnote-status-pending { + +/* 知识库详情面板 */ +.mnote-knowledge-rag-detail-tabs { + display: flex; + gap: 2px; + border-bottom: 1px solid #E5E4E4; + padding: 0 16px 0 16px; + margin-bottom: 8px; +} +.mnote-knowledge-rag-detail-tab { + padding: 6px 14px; + border-radius: 6px 6px 0 0; + font-size: 13px; + border: none; + background: transparent; + color: #787877; + cursor: pointer; +} +.mnote-knowledge-rag-detail-tab:hover { + background: #F4F3F3; +} +.mnote-knowledge-rag-detail-tab.is-active { + background: #F4F3F3; + color: #1B1C1C; + font-weight: 600; +} +.mnote-knowledge-rag-detail-panel { + padding: 0 16px 12px 16px; + max-height: 400px; + overflow-y: auto; +} +.mnote-kb-search-form { + display: flex; + gap: 8px; + margin-bottom: 12px; +} +.mnote-kb-search-input { + flex: 1; + padding: 6px 10px; + border: 1px solid #E5E4E4; + border-radius: 6px; + font-size: 13px; + outline: none; +} +.mnote-kb-search-input:focus { + border-color: #8F8E8C; +} +.mnote-kb-search-results { + display: flex; + flex-direction: column; + gap: 6px; +} +.mnote-kb-search-result-item { + padding: 8px 10px; + background: #F9F8F8; + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 4px; +} +.mnote-kb-search-result-header { + display: flex; + justify-content: space-between; + align-items: center; +} +.mnote-kb-search-result-index { + font-weight: 600; + color: #1B1C1C; + font-size: 12px; +} +.mnote-kb-search-result-score { + font-size: 12px; + color: #409440; + font-weight: 500; +} +.mnote-kb-search-result-source { + font-size: 11px; + color: #AEADAB; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.mnote-kb-search-result-preview { + font-size: 12px; + color: #585857; + line-height: 1.5; +} +.mnote-kb-search-result-citation { + font-size: 11px; + color: #7B7A79; + font-family: monospace; +} +.mnote-kb-params-form { + display: flex; + flex-direction: column; + gap: 12px; +} +.mnote-kb-params-row { + display: flex; + align-items: center; + gap: 10px; +} +.mnote-kb-params-label { + font-size: 13px; + color: #585857; + min-width: 90px; +} +.mnote-kb-params-select { + flex: 1; + padding: 4px 8px; + border: 1px solid #E5E4E4; + border-radius: 6px; + font-size: 13px; + outline: none; + background: #fff; +} +.mnote-kb-params-number { + width: 80px; + padding: 4px 8px; + border: 1px solid #E5E4E4; + border-radius: 6px; + font-size: 13px; + outline: none; +} +.mnote-kb-params-range { + flex: 1; + accent-color: #409440; +} +.mnote-kb-params-range-value { + +/* 仪表盘 */ +.mnote-dashboard-panel { + padding: 4px 0; +} +.mnote-dashboard-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} +.mnote-dashboard-card { + padding: 12px; + background: #F9F8F8; + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 4px; +} +.mnote-dashboard-card-title { + font-size: 12px; + color: #AEADAB; + font-weight: 500; +} +.mnote-dashboard-card-value { + font-size: 18px; + font-weight: 700; + color: #1B1C1C; +} +.mnote-dashboard-card-desc { + font-size: 11px; + color: #AEADAB; +} + + font-size: 13px; + color: #1B1C1C; + font-weight: 500; + min-width: 32px; + text-align: right; +} + + color: #F09B26; + font-weight: 500; +} + +.wolai-page-settings-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.wolai-page-settings-section[hidden] { + display: none !important; +} + +.wolai-page-settings-index-panel { + display: flex; + flex-direction: column; + gap: 10px; +} + +.wolai-page-settings-index-status { + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-settings-index-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.wolai-page-settings-index-title { + color: #1B1C1C; + font-size: 13px; + font-weight: 600; + line-height: 18px; +} + +.wolai-page-settings-index-list { + display: flex; + flex-direction: column; + gap: 6px; +} + +.wolai-page-settings-index-range-list { + display: flex; + flex-direction: column; + gap: 6px; +} + +.wolai-page-settings-index-range-row { + display: grid; + grid-template-columns: 12px minmax(0, 1fr) 28px; + align-items: center; + gap: 8px; +} + +.wolai-page-settings-index-status-dot { + width: 9px; + height: 9px; + border-radius: 999px; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(27, 28, 28, 0.08); +} + +.wolai-page-settings-index-status-dot[data-index-status="indexed"] { + background: #22C55E; +} + +.wolai-page-settings-index-status-dot[data-index-status="indexing"] { + background: #F59E0B; +} + +.wolai-page-settings-index-status-dot[data-index-status="fault"] { + background: #EF4444; +} + +.wolai-page-settings-index-path { + width: 100%; + min-width: 0; + height: 32px; + border: 1px solid #E2DFDA; + border-radius: 6px; + padding: 0 9px; + background: #FFFFFF; + color: #1B1C1C; + font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; +} + +.wolai-page-settings-index-path:disabled { + background: #F7F6F4; + color: #A19D97; +} + +.wolai-page-settings-index-root-hint { + color: #8B8782; + font-size: 11px; + white-space: nowrap; +} + +.wolai-page-settings-index-remove, +.wolai-page-settings-index-add { + border: 1px solid #D8D4CE; + border-radius: 6px; + background: #FFFFFF; + color: #1B1C1C; + cursor: pointer; + font-size: 12px; +} + +.wolai-page-settings-index-remove { + width: 28px; + height: 28px; + padding: 0; + font-size: 16px; + line-height: 1; +} + +.wolai-page-settings-index-add { + width: fit-content; + min-height: 30px; + padding: 5px 10px; +} + +.wolai-page-settings-index-remove:hover:not(:disabled), +.wolai-page-settings-index-add:hover:not(:disabled) { + background: #F4F3F3; +} + +.wolai-page-settings-index-remove:disabled, +.wolai-page-settings-index-add:disabled { + cursor: default; + color: #A19D97; + background: #F7F6F4; +} + +.wolai-page-settings-index-schedule { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(96px, .7fr); + gap: 8px; +} + +.wolai-page-settings-index-schedule label { + display: flex; + min-width: 0; + flex-direction: column; + gap: 4px; + color: #8B8782; + font-size: 12px; + line-height: 16px; +} + +.wolai-page-settings-index-schedule select, +.wolai-page-settings-index-schedule input[type="time"], +.wolai-page-settings-index-schedule input[type="date"] { + width: 100%; + min-height: 30px; + border: 1px solid #E2DFDA; + border-radius: 6px; + padding: 4px 8px; + background: #FFFFFF; + color: #1B1C1C; + font-size: 12px; +} + +.wolai-page-settings-index-inline { + grid-column: 1 / -1; + flex-direction: row !important; + align-items: center; +} + +.wolai-page-settings-index-inline input { + width: 14px; + height: 14px; +} + +.wolai-page-settings-index-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.wolai-page-settings-index-actions button { + min-height: 30px; + border: 1px solid #D8D4CE; + border-radius: 6px; + padding: 5px 10px; + background: #FFFFFF; + color: #1B1C1C; + cursor: pointer; + font-size: 12px; +} + +.wolai-page-settings-index-row, +.wolai-page-settings-index-empty { + padding: 8px 10px; + border-radius: 8px; + background: #F7F6F4; +} + +.wolai-page-settings-index-row { + display: flex; + min-width: 0; + flex-direction: column; + gap: 2px; +} + +.wolai-page-settings-index-row.is-tag { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.wolai-page-settings-index-row-title { + min-width: 0; + overflow: hidden; + color: #1B1C1C; + font-size: 13px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-settings-index-row-meta, +.wolai-page-settings-index-row-snippet, +.wolai-page-settings-index-empty { + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-setting-row { + min-height: 48px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 8px 0; +} + +.wolai-page-setting-row.is-pending { + opacity: 0.72; +} + +.wolai-page-setting-copy { + display: flex; + min-width: 0; + flex-direction: column; + gap: 3px; +} + +.wolai-page-setting-label { + color: #1B1C1C; + font-size: 14px; + line-height: 20px; +} + +.wolai-page-setting-hint, +.wolai-page-settings-global-note { + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-setting-checkbox { + width: 16px; + height: 16px; + flex: 0 0 auto; +} + +.wolai-page-setting-select { + min-width: 96px; + height: 30px; + padding: 0 10px; + border: 1px solid rgba(27, 28, 28, 0.1); + border-radius: 8px; + background: #FFF; + color: #1B1C1C; + font-size: 13px; +} + +.wolai-page-settings-actions { + display: flex; + flex-direction: column; + gap: 6px; + padding-top: 4px; + border-top: 1px solid rgba(27, 28, 28, 0.06); +} + +.wolai-page-settings-action { + min-height: 34px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 10px; + border: 0; + border-radius: 8px; + background: transparent; + color: #1B1C1C; + font-size: 13px; + cursor: pointer; +} + +.wolai-page-settings-action:hover { + background: #F4F3F3; +} + +.wolai-page-settings-action.is-disabled { + color: #A19D97; + cursor: not-allowed; +} + +.wolai-page-settings-action.is-danger { + color: #C44B55; +} + +.wolai-page-settings-stats { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + padding-top: 4px; + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-history-drawer { + position: fixed; + inset: 0; + z-index: var(--wolai-z-popover); + background: rgba(27, 28, 28, 0.04); +} + +.wolai-page-history-drawer[hidden] { + display: none !important; +} + +.wolai-page-history-panel { + position: absolute; + top: 16px; + right: 16px; + bottom: 16px; + width: min(380px, calc(100vw - 24px)); + display: flex; + flex-direction: column; + gap: 14px; + padding: 16px; + border-left: 1px solid rgba(27, 28, 28, 0.08); + background: #FFF; + box-shadow: -18px 0 42px rgba(27, 28, 28, 0.12); +} + +.wolai-page-history-header, +.wolai-page-share-header, +.wolai-page-ai-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} + +.wolai-page-history-title, +.wolai-page-share-title, +.wolai-page-ai-title { + color: #1B1C1C; + font-size: 16px; + font-weight: 600; + line-height: 24px; +} + +.wolai-page-history-subtitle, +.wolai-page-share-subtitle, +.wolai-page-ai-subtitle { + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.wolai-surface-close { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 8px; + background: transparent; + color: #5A5A5A; + cursor: pointer; +} + +.wolai-surface-close:hover { + background: #F4F3F3; +} + +.wolai-page-history-list { + display: flex; + flex: 1 1 auto; + flex-direction: column; + gap: 10px; + overflow: auto; +} + +.wolai-page-history-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 10px; + background: #FFF; +} + +.wolai-page-history-item-title { + color: #1B1C1C; + font-size: 13px; + font-weight: 500; + line-height: 20px; +} + +.wolai-page-history-item-meta, +.wolai-page-history-empty, +.wolai-page-share-copy, +.wolai-page-share-footer, +.wolai-page-ai-empty, +.wolai-page-ai-message-role { + color: #8B8782; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-history-item-ghost, +.wolai-page-ai-ghost, +.wolai-page-ai-tab, +.wolai-page-ai-model-chip, +.wolai-page-share-copy-button { + height: 30px; + padding: 0 10px; + border: 0; + border-radius: 8px; + background: #F4F3F3; + color: #1B1C1C; + font-size: 12px; + cursor: pointer; +} + +.wolai-page-ai-ghost--danger { + color: #B33A3A; +} + +.wolai-page-share-dialog { + position: fixed; + inset: 0; + z-index: var(--wolai-z-popover); + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + background: rgba(27, 28, 28, 0.12); +} + +.wolai-page-share-dialog[hidden] { + display: none !important; +} + +.wolai-page-share-card { + width: min(460px, calc(100vw - 24px)); + display: flex; + flex-direction: column; + gap: 16px; + padding: 18px; + border-radius: 16px; + background: #FFF; + box-shadow: 0 18px 48px rgba(27, 28, 28, 0.18); +} + +.wolai-page-share-state { + display: flex; + flex-direction: column; + gap: 8px; +} + +.wolai-public-pill--inline { + width: fit-content; +} + +.wolai-page-share-url-row { + display: flex; + gap: 8px; +} + +.wolai-page-share-url { + flex: 1 1 auto; + height: 34px; + padding: 0 10px; + border: 1px solid rgba(27, 28, 28, 0.1); + border-radius: 8px; + background: #FFF; + color: #1B1C1C; + font-size: 13px; +} + +.wolai-page-ai-drawer { + position: fixed; + top: 12px; + right: 12px; + bottom: 12px; + z-index: var(--wolai-z-popover); + --mnote-page-ai-width: 440px; +} + +.wolai-page-ai-drawer[hidden] { + display: none !important; +} + +.wolai-page-ai-panel { + width: min(var(--mnote-page-ai-width), calc(100vw - 24px)); + height: 100%; + display: flex; + flex-direction: column; + gap: 12px; + padding: 14px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 14px; + background: rgba(255, 255, 255, 0.98); + box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14); +} + +.wolai-page-ai-resize-handle { + position: absolute; + top: 10px; + bottom: 10px; + left: -6px; + width: 12px; + cursor: col-resize; + touch-action: none; +} + +.wolai-page-ai-resize-handle::before { + position: absolute; + top: 14px; + bottom: 14px; + left: 5px; + width: 2px; + border-radius: 999px; + background: transparent; + content: ""; +} + +.wolai-page-ai-resize-handle:hover::before, +.wolai-page-ai-drawer[data-page-ai-resizing="true"] .wolai-page-ai-resize-handle::before { + background: rgba(27, 28, 28, 0.18); +} + +html[data-mnote-page-ai-resizing="true"] { + cursor: col-resize; + user-select: none; +} + +.wolai-page-ai-header-copy { + display: flex; + flex-direction: column; + gap: 4px; +} + +.wolai-page-ai-header-actions { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.wolai-page-ai-icon { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + border-radius: 6px; + background: transparent; + color: #5A5A5A; + font-size: 16px; + line-height: 1; + cursor: pointer; +} + +.wolai-page-ai-icon-svg { + width: 16px; + height: 16px; + display: block; + fill: currentColor; +} + +.wolai-page-ai-icon:hover, +.wolai-page-ai-icon.is-active { + background: #F3F3F2; + color: #1B1C1C; +} + +.wolai-page-ai-statuslabel, +.wolai-page-ai-profile-select span, +.wolai-page-ai-context-select span, +.wolai-page-ai-skill-search span, +.wolai-page-ai-memory-scope, +.wolai-page-ai-skill-source { + display: block; + color: #8B8782; + font-size: 11px; + line-height: 16px; +} + +.wolai-page-ai-subtitle { + display: flex; + min-width: 0; + flex-wrap: wrap; + gap: 4px 8px; +} + +.wolai-page-ai-subtitle span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-subtitle span:not(:first-child)::before, +.wolai-page-ai-chat-meta span:not(:first-child)::before { + margin-right: 8px; + color: #C9C5BE; + content: "·"; +} + +.wolai-page-ai-runtime-strip { + display: flex; + width: 100%; + min-height: 28px; + flex-wrap: wrap; + align-items: center; + gap: 6px; + padding: 0 14px 8px; + border: 0; + background: transparent; + color: #6B6762; + cursor: pointer; + font-size: 11px; + line-height: 16px; + text-align: left; +} + +.wolai-page-ai-runtime-strip:hover span { + border-color: rgba(27, 28, 28, 0.16); + background: #F1F1EF; +} + +.wolai-page-ai-runtime-strip span { + max-width: 100%; + overflow: hidden; + padding: 2px 6px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 6px; + background: #F8F8F7; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-statusvalue { + display: block; + min-width: 0; + overflow: hidden; + color: #1B1C1C; + font-size: 12px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-settings-link { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 34px; + padding: 0 10px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 8px; + background: #FFF; + color: #1B1C1C; + font-size: 12px; + text-decoration: none; + cursor: pointer; +} + +.wolai-page-ai-settings-link:disabled { + color: #AAA6A0; + cursor: not-allowed; +} + +.wolai-page-ai-settings-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) 132px; + gap: 8px; +} + +.wolai-page-ai-profile-select, +.wolai-page-ai-context-select, +.wolai-page-ai-skill-search, +.wolai-page-ai-agent-profile { + display: grid; + gap: 4px; + min-width: 0; +} + +.wolai-page-ai-profile-select select, +.wolai-page-ai-context-select select, +.wolai-page-ai-skill-search input, +.wolai-page-ai-skill-search select, +.wolai-page-ai-agent-profile select { + width: 100%; + min-width: 0; + height: 34px; + padding: 0 10px; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 8px; + background: #FFF; + color: #1B1C1C; + font-size: 12px; +} + +.wolai-page-ai-agent-profile { + margin-top: 8px; +} + +.wolai-page-ai-inline-error { + padding: 8px 10px; + border: 1px solid rgba(198, 80, 80, 0.18); + border-radius: 8px; + background: #FFF5F5; + color: #9F2D2D; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-ai-body { + display: flex; + min-height: 0; + flex: 1 1 auto; + flex-direction: column; + gap: 10px; +} + +.wolai-page-ai-panel-section { + display: flex; + min-height: 0; + flex: 1 1 auto; + flex-direction: column; + gap: 10px; +} + +.wolai-page-ai-panel-section[hidden] { + display: none !important; +} + +.wolai-page-ai-drawer:not([data-page-ai-page="chat"]) .wolai-page-ai-footer { + display: none; +} + +.wolai-page-ai-chat-meta { + display: flex; + min-height: 24px; + align-items: center; + gap: 8px; + overflow: hidden; + color: #8B8782; + font-size: 11px; + line-height: 16px; +} + +.wolai-page-ai-session-summary { + min-width: 0; + max-width: 190px; + overflow: hidden; + padding: 0; + color: #5A5A5A; + font: inherit; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-settings-head { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 8px; + align-items: center; +} + +.wolai-page-ai-back { + height: 30px; + padding: 0 8px; + border: 0; + border-radius: 6px; + background: transparent; + color: #5A5A5A; + font-size: 12px; + cursor: pointer; +} + +.wolai-page-ai-back:hover { + background: #F3F3F2; + color: #1B1C1C; +} + +.wolai-page-ai-settings-tabs { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 4px; + padding: 2px; + border-radius: 8px; + background: #F3F3F2; +} + +.wolai-page-ai-suggestions { + display: flex; + flex-direction: column; + gap: 8px; +} + +.wolai-page-ai-suggestions[hidden] { + display: none !important; +} + +.wolai-page-ai-suggestions-header, +.wolai-page-ai-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.wolai-page-ai-intents { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 6px; +} + +.wolai-page-ai-suggestion-list, +.wolai-page-ai-toolbar { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.wolai-page-ai-tools-panel { + display: grid; + gap: 8px; + padding: 10px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 8px; + background: #FAFAFA; +} + +.wolai-page-ai-tools-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + color: #8B8782; + font-size: 11px; + line-height: 16px; +} + +.wolai-page-ai-tools-head span:last-child { + min-width: 0; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-tool-list { + display: grid; + max-height: 140px; + gap: 6px; + overflow: auto; +} + +[data-page-ai-tool-list].wolai-page-ai-tool-list { + max-height: min(420px, calc(100vh - 330px)); +} + +.wolai-page-ai-tool-row { + display: grid; + gap: 2px; + padding: 6px 8px; + border-radius: 8px; + background: #FFF; +} + +.wolai-page-ai-tool-name { + overflow: hidden; + color: #1B1C1C; + font-size: 12px; + font-weight: 600; + line-height: 16px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-tool-meta { + overflow: hidden; + color: #8B8782; + font-size: 11px; + line-height: 16px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-changed-files { + overflow: auto; + text-overflow: clip; + white-space: pre-wrap; +} + +.wolai-page-ai-provider-group { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.wolai-page-ai-suggestion { + min-height: 30px; + padding: 6px 9px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 8px; + background: #FFF; + color: #1B1C1C; + font-size: 12px; + text-align: left; + cursor: pointer; +} + +.wolai-page-ai-conversation { + display: flex; + min-height: 0; + flex: 1 1 auto; + flex-direction: column; + gap: 10px; + overflow: auto; +} + +.wolai-page-ai-memory-grid { + display: flex; + min-height: 0; + flex: 1 1 auto; + flex-direction: column; + gap: 10px; + overflow: auto; +} + +.wolai-page-ai-settings-stack { + display: grid; + gap: 10px; +} + +.wolai-page-ai-memory-card { + display: grid; + gap: 8px; + padding: 10px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 8px; + background: #FFF; +} + +.wolai-page-ai-memory-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 8px; +} + +.wolai-page-ai-memory-title, +.wolai-page-ai-skill-name { + color: #1B1C1C; + font-size: 13px; + font-weight: 600; + line-height: 18px; +} + +.wolai-page-ai-memory-editor { + width: 100%; + min-height: 118px; + padding: 10px; + border: 1px solid rgba(27, 28, 28, 0.1); + border-radius: 8px; + background: #FAFAFA; + color: #1B1C1C; + font-size: 12px; + line-height: 18px; + resize: vertical; +} + +.wolai-page-ai-skills-toolbar { + display: grid; + grid-template-columns: minmax(0, 1fr); + align-items: end; + gap: 8px; +} + +.wolai-page-ai-skill-filter-toggle { + display: inline-flex; + grid-column: 1 / -1; + min-height: 34px; + align-items: center; + gap: 6px; + color: #5A5A5A; + font-size: 12px; + line-height: 18px; + white-space: nowrap; +} + +.wolai-page-ai-skill-filter-toggle input { + width: 14px; + height: 14px; + margin: 0; +} + +.wolai-page-ai-skill-list { + display: flex; + min-height: 0; + flex: 1 1 auto; + flex-direction: column; + gap: 4px; + overflow: auto; +} + +.wolai-page-ai-skill-group { + display: grid; + gap: 4px; +} + +.wolai-page-ai-skill-group-head { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 6px 8px 2px; + border: 0; + border-radius: 6px; + background: transparent; + color: #8B8782; + font-size: 11px; + line-height: 16px; + cursor: pointer; +} + +.wolai-page-ai-skill-group-head:hover { + background: #F7F7F6; + color: #5A5A5A; +} + +.wolai-page-ai-skill-group-title { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 5px; +} + +.wolai-page-ai-skill-group-chevron { + width: 12px; + color: #AAA6A0; + text-align: center; +} + +.wolai-page-ai-skill-row { + display: flex; + min-height: 38px; + align-items: flex-start; + justify-content: space-between; + gap: 10px; + padding: 8px; + border: 0; + border-radius: 6px; + background: transparent; +} + +.wolai-page-ai-skill-row:hover { + background: #F7F7F6; +} + +.wolai-page-ai-skill-copy { + display: grid; + gap: 2px; + min-width: 0; + flex: 1 1 auto; +} + +.wolai-page-ai-skill-main { + display: grid; + min-width: 0; + gap: 2px; +} + +.wolai-page-ai-skill-name { + min-width: 0; + overflow: visible; + text-overflow: clip; + white-space: normal; + word-break: break-word; +} + +.wolai-page-ai-skill-desc { + overflow: hidden; + color: #5A5A5A; + font-size: 11px; + line-height: 15px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-overflow: clip; + white-space: normal; +} + +.wolai-page-ai-skill-source { + padding: 0; + border-radius: 0; + background: transparent; + color: #8B8782; + font-size: 10px; + line-height: 14px; + white-space: normal; + word-break: break-word; +} + +.wolai-page-ai-skill-switch { + position: relative; + width: 32px; + height: 18px; + flex: 0 0 32px; + border: 0; + border-radius: 999px; + background: #D8D6D1; + cursor: pointer; +} + +.wolai-page-ai-skill-switch span { + position: absolute; + top: 2px; + left: 2px; + width: 14px; + height: 14px; + border-radius: 50%; + background: #FFF; + box-shadow: 0 1px 3px rgba(27, 28, 28, 0.16); + transition: transform 0.16s ease; +} + +.wolai-page-ai-skill-switch.is-on { + background: #F97316; +} + +.wolai-page-ai-skill-switch.is-on span { + transform: translateX(14px); +} + +.wolai-page-ai-skill-readonly-badge { + flex: 0 0 auto; + margin-top: 2px; + padding: 2px 6px; + border-radius: 999px; + background: #F0EFED; + color: #8B8782; + font-size: 10px; + line-height: 14px; +} + +.wolai-page-ai-message { + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 12px; + border-radius: 12px; + background: #F7F7F7; +} + +.wolai-page-ai-message--history { + position: relative; + display: grid; + grid-template-columns: 24px minmax(0, 1fr) auto; + width: 100%; + min-height: 58px; + align-items: flex-start; + gap: 6px; + padding: 8px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 8px; + text-align: left; +} + +.wolai-page-ai-message--history.is-active { + border-color: rgba(27, 28, 28, 0.28); + background: #F4F8FF; +} + +.wolai-page-ai-message--history.is-selected { + border-color: rgba(37, 99, 235, 0.36); + background: #F5F8FF; +} + +.wolai-page-ai-history-selection { + display: flex; + min-width: 0; + align-items: center; + justify-content: flex-end; + gap: 6px; + color: #5A5A5A; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-ai-history-selection[hidden] { + display: none !important; +} + +.wolai-page-ai-session-check { + width: 20px; + height: 20px; + margin-top: 1px; + padding: 0; + border: 1px solid rgba(27, 28, 28, 0.18); + border-radius: 6px; + background: #FFF; + color: #2563EB; + cursor: pointer; + opacity: 0; +} + +.wolai-page-ai-session-check span { + display: grid; + width: 100%; + height: 100%; + place-items: center; + font-size: 12px; + line-height: 1; +} + +.wolai-page-ai-message--history:hover .wolai-page-ai-session-check, +.wolai-page-ai-message--history:focus-within .wolai-page-ai-session-check, +.wolai-page-ai-message--history.is-selected .wolai-page-ai-session-check { + opacity: 1; +} + +.wolai-page-ai-session-check[aria-checked="true"] { + border-color: rgba(37, 99, 235, 0.5); + background: #EAF1FF; +} + +.wolai-page-ai-message--user { + background: #F4F8FF; +} + +.wolai-page-ai-message[data-page-ai-streaming="true"] .wolai-page-ai-message-role::after { + content: " · 输出中"; +} + +.wolai-page-ai-message-text { + color: #1B1C1C; + font-size: 13px; + line-height: 20px; + white-space: pre-wrap; +} + +.wolai-page-ai-message-text > * { + white-space: normal; +} + +.wolai-page-ai-message-text p, +.wolai-page-ai-message-text ul, +.wolai-page-ai-message-text ol, +.wolai-page-ai-message-text pre, +.wolai-page-ai-message-text table { + margin: 6px 0; +} + +.wolai-page-ai-message-text h1, +.wolai-page-ai-message-text h2, +.wolai-page-ai-message-text h3, +.wolai-page-ai-message-text h4, +.wolai-page-ai-message-text h5, +.wolai-page-ai-message-text h6 { + margin: 8px 0 4px; + color: #1B1C1C; + font-size: 14px; + font-weight: 700; + line-height: 20px; +} + +.wolai-page-ai-message-text ul, +.wolai-page-ai-message-text ol { + padding-left: 18px; +} + +.wolai-page-ai-message-text a { + color: #2563EB; + overflow-wrap: anywhere; + text-decoration: underline; + text-underline-offset: 2px; +} + +.wolai-page-ai-message-text pre { + overflow: auto; + padding: 8px 10px; + border-radius: 6px; + background: #F7F6F4; + font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; +} + +.wolai-page-ai-message-text code { + border-radius: 4px; + padding: 1px 3px; + background: #F1F0EE; + font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace; +} + +.wolai-page-ai-message-text pre code { + padding: 0; + background: transparent; +} + +.wolai-page-ai-message-text hr { + height: 1px; + margin: 8px 0; + border: 0; + background: rgba(27, 28, 28, 0.12); +} + +.wolai-page-ai-plan-card { + gap: 10px; + border: 1px solid rgba(14, 116, 144, 0.22); + background: #F0F9FF; + color: #0F172A; +} + +.wolai-page-ai-plan-card-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; +} + +.wolai-page-ai-plan-card-title-wrap { + display: grid; + min-width: 0; + gap: 1px; +} + +.wolai-page-ai-plan-card-kicker { + color: #0369A1; + font-size: 11px; + line-height: 16px; + font-weight: 600; +} + +.wolai-page-ai-plan-card-title { + color: #0C4A6E; + font-size: 14px; + line-height: 20px; +} + +.wolai-page-ai-plan-card-badge { + display: inline-flex; + flex-shrink: 0; + align-items: center; + border-radius: 999px; + padding: 2px 8px; + background: #BAE6FD; + color: #075985; + font-size: 11px; + line-height: 16px; + font-weight: 600; +} + +.wolai-page-ai-plan-card-markdown { + display: grid; + gap: 6px; + color: #1E293B; + font-size: 13px; + line-height: 20px; +} + +.wolai-page-ai-plan-card-markdown > * { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.wolai-page-ai-plan-card-markdown .wolai-page-ai-markdown-table-wrap { + border: 1px solid rgba(14, 116, 144, 0.16); + border-radius: 8px; + background: rgba(255, 255, 255, 0.72); +} + +.wolai-page-ai-plan-step-list { + display: grid; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; +} + +.wolai-page-ai-plan-step-item { + display: flex; + align-items: flex-start; + gap: 8px; + min-width: 0; + padding: 8px 10px; + border: 1px solid rgba(255, 255, 255, 0.78); + border-radius: 8px; + background: rgba(255, 255, 255, 0.78); + color: #334155; + font-size: 12px; + line-height: 18px; +} + +.wolai-page-ai-plan-step-item[data-status="completed"] { + border-color: rgba(16, 185, 129, 0.28); + background: rgba(236, 253, 245, 0.88); +} + +.wolai-page-ai-plan-step-item[data-status="inProgress"] { + border-color: rgba(245, 158, 11, 0.28); + background: rgba(255, 251, 235, 0.9); +} + +.wolai-page-ai-plan-step-status { + display: inline-flex; + width: 18px; + height: 18px; + flex: 0 0 18px; + align-items: center; + justify-content: center; + border-radius: 999px; + background: #E2E8F0; + color: #475569; + font-size: 11px; + line-height: 18px; + font-weight: 700; +} + +.wolai-page-ai-plan-step-status[data-status="completed"] { + background: #BBF7D0; + color: #166534; +} + +.wolai-page-ai-plan-step-status[data-status="inProgress"] { + background: #FDE68A; + color: #92400E; +} + +.wolai-page-ai-plan-step-text { + min-width: 0; + overflow-wrap: anywhere; +} + +.wolai-page-ai-plan-card-actions { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 6px; +} + +.wolai-page-ai-plan-card-button { + height: 30px; + padding: 0 10px; + border: 1px solid rgba(14, 116, 144, 0.14); + border-radius: 999px; + background: rgba(255, 255, 255, 0.86); + color: #0F172A; + font-size: 12px; + font-weight: 600; + cursor: pointer; +} + +.wolai-page-ai-plan-card-button--primary { + border-color: #0284C7; + background: #0284C7; + color: #FFFFFF; +} + +.wolai-page-ai-plan-card-button--danger { + color: #B33A3A; +} + +.wolai-page-ai-permission-card { + gap: 10px; + border: 1px solid rgba(180, 83, 9, 0.18); + background: #FFF7ED; +} + +.wolai-page-ai-permission-card-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; +} + +.wolai-page-ai-permission-badge { + display: inline-flex; + flex-shrink: 0; + align-items: center; + border-radius: 999px; + padding: 2px 8px; + background: #FED7AA; + color: #9A3412; + font-size: 11px; + line-height: 16px; + font-weight: 600; +} + +.wolai-page-ai-permission-summary { + display: grid; + gap: 6px; +} + +.wolai-page-ai-permission-row { + display: grid; + grid-template-columns: 54px minmax(0, 1fr); + gap: 8px; + align-items: start; + padding: 7px 8px; + border: 1px solid rgba(180, 83, 9, 0.12); + border-radius: 8px; + background: rgba(255, 255, 255, 0.74); +} + +.wolai-page-ai-permission-row span { + color: #9A3412; + font-size: 11px; + line-height: 17px; + font-weight: 600; +} + +.wolai-page-ai-permission-row strong { + min-width: 0; + overflow-wrap: anywhere; + color: #1B1C1C; + font-size: 12px; + line-height: 18px; + font-weight: 600; +} + +.wolai-page-ai-permission-card .wolai-page-ai-message-actions, +.wolai-page-ai-permission-dialog .wolai-page-ai-message-actions { + margin-top: 8px; + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.wolai-page-ai-markdown-table-wrap { + max-width: 100%; + overflow-x: auto; +} + +.wolai-page-ai-markdown-table-wrap table { + width: 100%; + border-collapse: collapse; + table-layout: auto; + background: #FFFFFF; +} + +.wolai-page-ai-markdown-table-wrap th, +.wolai-page-ai-markdown-table-wrap td { + min-width: 72px; + border: 1px solid rgba(27, 28, 28, 0.12); + padding: 5px 7px; + text-align: left; + vertical-align: top; +} + +.wolai-page-ai-markdown-table-wrap th { + background: #F7F6F4; + font-weight: 700; +} + +button.wolai-page-ai-message-text { + width: 100%; + border: 0; + padding: 0; + background: transparent; + text-align: left; + cursor: pointer; +} + +button.wolai-page-ai-history-main { + display: grid; + gap: 1px; + min-width: 0; +} + +button.wolai-page-ai-history-main strong, +button.wolai-page-ai-history-main span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-message-actions { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.wolai-page-ai-history-actions { + grid-column: 3; + grid-row: 1; + position: static; + z-index: 2; + flex-wrap: nowrap; + justify-content: flex-end; + opacity: 1; + pointer-events: auto; + background: transparent; +} + +.wolai-page-ai-message--history:hover .wolai-page-ai-history-actions, +.wolai-page-ai-message--history:focus-within .wolai-page-ai-history-actions { + opacity: 1; + pointer-events: auto; +} + +.wolai-page-ai-permission-dialog { + position: fixed; + right: 28px; + bottom: 28px; + z-index: var(--wolai-z-dock); + max-width: min(360px, calc(100vw - 32px)); +} + +.wolai-page-ai-permission-panel { + display: grid; + gap: 10px; + padding: 14px; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 8px; + background: #FFFFFF; + box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16); +} + +.wolai-page-ai-tool-details { + display: grid; + gap: 6px; +} + +.wolai-page-ai-tool-details summary { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: 8px; + align-items: center; + color: #1B1C1C; + cursor: pointer; + list-style: none; +} + +.wolai-page-ai-tool-details summary::-webkit-details-marker { + display: none; +} + +.wolai-page-ai-tool-details summary::before { + content: "▸"; + color: #8B8782; +} + +.wolai-page-ai-tool-details[open] summary::before { + content: "▾"; +} + +.wolai-page-ai-tool-details summary strong { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-tool-details summary span { + min-width: 0; + overflow: hidden; + color: #8B8782; + font-size: 11px; + line-height: 16px; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-tool-group-list { + display: grid; + gap: 8px; + margin-top: 8px; +} + +.wolai-page-ai-thought-group-list { + min-width: 0; + margin-top: 8px; + padding-left: 10px; + border-left: 2px solid rgba(27, 28, 28, 0.12); + color: #6F6B66; + font-size: 12px; + line-height: 18px; + white-space: pre-wrap; +} + +.wolai-page-ai-tool-item { + display: grid; + gap: 4px; + min-width: 0; + padding: 8px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 6px; + background: rgba(255, 255, 255, 0.58); +} + +.wolai-page-ai-tool-item-head { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(92px, auto); + gap: 8px; + align-items: center; +} + +.wolai-page-ai-tool-item-head strong { + min-width: 0; + overflow: hidden; + color: #1B1C1C; + font-size: 12px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-tool-item-head span { + min-width: 0; + overflow: hidden; + color: #8B8782; + font-size: 11px; + line-height: 16px; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-footer { + position: relative; + z-index: var(--wolai-z-dock); + display: flex; + flex-direction: column; + gap: 8px; +} + +.wolai-page-ai-tab { + min-height: 28px; + padding: 0 8px; + border: 0; + border-radius: 6px; + background: transparent; + color: #5A5A5A; + font-size: 12px; + cursor: pointer; +} + +.wolai-page-ai-tab.is-active { + background: #1B1C1C; + color: #FFF; +} + +.wolai-page-ai-model-chip.is-active { + background: #1B1C1C; + color: #FFF; +} + +.wolai-page-ai-composer { + position: relative; + z-index: 20; + display: flex; + flex-direction: column; + overflow: visible; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 10px; + background: #FFF; +} + +.wolai-page-ai-allowed-roots { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + padding: 6px 8px 0; +} + +.wolai-page-ai-agent-picker, +.wolai-page-ai-context-picker, +.wolai-page-ai-target-picker { + position: relative; + flex: 0 0 auto; +} + +.wolai-page-ai-agent-button, +.wolai-page-ai-context-button, +.wolai-page-ai-target-button { + font-size: 17px; + line-height: 1; +} + +.wolai-page-ai-agent-button[aria-expanded="true"], +.wolai-page-ai-context-button[aria-expanded="true"], +.wolai-page-ai-target-button[aria-expanded="true"] { + border-color: rgba(27, 28, 28, 0.32); + background: #F7F6F4; +} + +.wolai-page-ai-agent-chip, +.wolai-page-ai-target-chip { + display: inline-flex; + align-items: center; + min-width: 0; + max-width: 180px; + height: 26px; + padding: 0 8px; + border: 1px solid rgba(27, 28, 28, 0.1); + border-radius: 999px; + background: #F7F6F4; + color: #5A5A5A; + font-size: 12px; + line-height: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-agent-popover, +.wolai-page-ai-context-popover, +.wolai-page-ai-target-popover { + position: absolute; + left: 0; + width: min(320px, calc(100vw - 44px)); + bottom: calc(100% + 8px); + z-index: var(--wolai-z-popover); + display: grid; + gap: 10px; + padding: 12px; + border: 1px solid rgba(27, 28, 28, 0.12); + border-radius: 10px; + background: #FFF; + box-shadow: 0 16px 36px rgba(27, 28, 28, 0.16); +} + +.wolai-page-ai-agent-popover[hidden], +.wolai-page-ai-context-popover[hidden], +.wolai-page-ai-target-popover[hidden] { + display: none !important; +} + +.wolai-page-ai-context-popover-head, +.wolai-page-ai-context-popover-foot { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + color: #5A5A5A; + font-size: 12px; +} + +.wolai-page-ai-context-option-list { + display: grid; + gap: 8px; +} + +.wolai-page-ai-agent-option-list, +.wolai-page-ai-target-option-list { + display: grid; + gap: 6px; +} + +.wolai-page-ai-agent-popover-section { + display: grid; + gap: 6px; +} + +.wolai-page-ai-agent-popover-title { + color: #8B8782; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; +} + +.wolai-page-ai-agent-option, +.wolai-page-ai-target-option { + display: grid; + gap: 2px; + width: 100%; + padding: 8px; + border: 1px solid rgba(27, 28, 28, 0.08); + border-radius: 8px; + background: #FFF; + color: #1B1C1C; + text-align: left; + cursor: pointer; +} + +.wolai-page-ai-agent-option.is-active, +.wolai-page-ai-target-option.is-active { + border-color: rgba(27, 28, 28, 0.2); + background: #F7F6F4; +} + +.wolai-page-ai-agent-option-label, +.wolai-page-ai-target-option-label { + font-size: 12px; + font-weight: 600; +} + +.wolai-page-ai-agent-option-detail, +.wolai-page-ai-target-option-detail { + color: #8B8782; + font-size: 11px; +} + +.wolai-page-ai-context-option { + display: grid; + grid-template-columns: 16px minmax(0, 1fr); + gap: 8px; + align-items: start; + color: #1B1C1C; + font-size: 12px; +} + +.wolai-page-ai-context-option.is-disabled { + color: #AAA6A0; +} + +.wolai-page-ai-context-option-main { + display: grid; + gap: 2px; + min-width: 0; +} + +.wolai-page-ai-context-option-label { + font-weight: 500; +} + +.wolai-page-ai-context-option-detail { + color: #8B8782; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wolai-page-ai-allowed-roots { + padding-top: 4px; +} + +.wolai-page-ai-composer:focus-within { + border-color: rgba(27, 28, 28, 0.32); +} + +.wolai-page-ai-reasonix-controls { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 6px; + padding: 0 8px 6px; +} + +.wolai-page-ai-reasonix-controls[hidden] { + display: none !important; +} + +.wolai-page-ai-reasonix-control { + display: grid; + gap: 2px; + min-width: 0; + color: #8B8782; + font-size: 11px; +} + +.wolai-page-ai-reasonix-control select { + width: 100%; + min-width: 0; + height: 28px; + padding: 0 8px; + border: 1px solid rgba(27, 28, 28, 0.1); + border-radius: 7px; + background: #FFF; + color: #1B1C1C; + font-size: 12px; +} + +.wolai-page-ai-composer-bar { + display: flex; + min-height: 36px; + align-items: center; + gap: 6px; + padding: 0 6px 6px; +} + +.wolai-page-ai-composer-spacer { + flex: 1 1 auto; +} + +.wolai-page-ai-tool-button { + width: 28px; + height: 28px; + border: 1px solid rgba(27, 28, 28, 0.1); + border-radius: 6px; + background: #FFF; + color: #5A5A5A; + font-size: 14px; + cursor: pointer; +} + +.wolai-page-ai-tool-button:hover { + border-color: rgba(27, 28, 28, 0.2); + color: #1B1C1C; +} + +.wolai-page-ai-input { + width: 100%; + min-height: 76px; + padding: 10px 10px 4px; + border: 0; + background: transparent; + color: #1B1C1C; + font-size: 13px; + line-height: 20px; + resize: none; +} + +.wolai-page-ai-input:focus { + outline: none; +} + +.wolai-page-ai-stop { + min-width: 42px; + height: 28px; + padding: 0 10px; + border: 0; + border-radius: 6px; + background: #F3F3F2; + color: #5A5A5A; + font-size: 12px; + cursor: pointer; +} + +.wolai-page-ai-stop:disabled { + color: #B5B1AA; + cursor: not-allowed; +} + +.wolai-page-ai-send { + min-width: 52px; + height: 28px; + padding: 0 12px; + border: 0; + border-radius: 6px; + background: #1B1C1C; + color: #FFF; + font-size: 12px; + font-weight: 600; + cursor: pointer; +} + +@media (max-width: 768px) { + .mnote-sidebar, + .wolai-sidebar { + width: 220px; + } + + .mnote-sidebar-resizer { + display: none; + } + + .wolai-topbar { + padding: 0 12px; + } + + .wolai-page-settings-popover { + right: 12px; + } + + .wolai-page-history-panel, + .wolai-page-ai-panel { + width: min(100vw - 24px, 420px); + } + + .wolai-page-ai-resize-handle { + display: none; + } + + .wolai-page-ai-settings-grid, + .wolai-page-ai-settings-head { + grid-template-columns: minmax(0, 1fr); + } + + .wolai-public-pill, + .wolai-breadcrumb-root, + .wolai-breadcrumb-separator { + display: none; + } + + .document-workspace[data-has-secondary-pane="true"] { + grid-template-columns: minmax(0, 1fr); + } + + .document-workspace[data-has-secondary-pane="true"] .document-pane-resizer { + display: none; + } + + .document-pane[data-pane-role="secondary"] .document-shell { + padding-top: 32px; + padding-left: 0; + padding-right: 0; + } + + .document-shell { + width: 100%; + padding: 48px 28px 120px; + } + + .document-shell-header h1 { + font-size: 32px; + line-height: 40px; + } + + #mnote-leptos-tiptap-island-editor-root .block-handle-shell { + left: -32px !important; + } +} + +@media (max-width: 480px) { + .mnote-shell { + flex-direction: column; + } + + .mnote-sidebar, + .wolai-sidebar { + width: 100%; + max-height: 42vh; + border-bottom: 1px solid rgba(27, 28, 28, 0.08); + box-shadow: none; + } + + .mnote-sidebar-resizer { + display: none; + } + + .document-shell { + padding: 36px 20px 112px; + } + + .document-shell-header h1 { + font-size: 28px; + } + + .wolai-topbar-actions { + gap: 2px; + } + + .wolai-page-settings-panel, + .wolai-page-share-card, + .wolai-page-ai-panel { + width: calc(100vw - 24px); + } + + .wolai-page-ai-resize-handle { + display: none; + } +} + +/* ===== UI Debug 组件矩阵 ===== */ +.ui-debug-root { + --ui-debug-bg: #FFFFFF; + --ui-debug-surface: #F8F9FA; + --ui-debug-border: #E2E4E9; + --ui-debug-text: #1A1D23; + --ui-debug-text-secondary: #6B7280; + --ui-debug-primary: #2563EB; + --ui-debug-primary-hover: #1D4ED8; + --ui-debug-primary-active: #1E40AF; + --ui-debug-secondary: #6B7280; + --ui-debug-secondary-hover: #4B5563; + --ui-debug-danger: #DC2626; + --ui-debug-success: #16A34A; + --ui-debug-warning: #D97706; + --ui-debug-radius: 6px; + --ui-debug-shadow: 0 4px 12px rgba(0,0,0,.08); + --ui-debug-shadow-lg: 0 16px 48px rgba(0,0,0,.16); + padding: 24px 32px 64px; + max-width: 960px; + margin: 0 auto; + font-family: var(--wolai-font-sans); + color: var(--ui-debug-text); +} + +.ui-debug-root[data-ui-debug-theme="dark"] { + --ui-debug-bg: #111827; + --ui-debug-surface: #1F2937; + --ui-debug-border: #374151; + --ui-debug-text: #F9FAFB; + --ui-debug-text-secondary: #9CA3AF; + --ui-debug-primary: #3B82F6; + --ui-debug-primary-hover: #60A5FA; + --ui-debug-primary-active: #2563EB; + --ui-debug-secondary: #9CA3AF; + --ui-debug-secondary-hover: #D1D5DB; + --ui-debug-danger: #EF4444; + --ui-debug-success: #22C55E; + --ui-debug-warning: #F59E0B; + --ui-debug-shadow: 0 4px 12px rgba(0,0,0,.3); + --ui-debug-shadow-lg: 0 16px 48px rgba(0,0,0,.5); + background: var(--ui-debug-bg); +} + +.ui-debug-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; + padding-bottom: 16px; + border-bottom: 1px solid var(--ui-debug-border); +} + +.ui-debug-title { + font-size: 22px; + font-weight: 700; + color: var(--ui-debug-text); + margin: 0; +} + +.ui-debug-theme-controls { + display: flex; + gap: 6px; +} + +.ui-debug-theme-btn { + padding: 5px 14px; + border: 1px solid var(--ui-debug-border); + border-radius: var(--ui-debug-radius); + background: var(--ui-debug-surface); + color: var(--ui-debug-text-secondary); + font-size: 13px; + cursor: pointer; + transition: all 120ms ease; +} + +.ui-debug-theme-btn:hover { + background: var(--ui-debug-border); +} + +.ui-debug-theme-btn--active { + background: var(--ui-debug-primary); + color: #fff; + border-color: var(--ui-debug-primary); +} + +.ui-debug-section { + margin-bottom: 32px; + padding: 18px; + border: 1px solid var(--ui-debug-border); + border-radius: 8px; + background: var(--ui-debug-surface); +} + +.ui-debug-section-title { + font-size: 15px; + font-weight: 650; + color: var(--ui-debug-text-secondary); + margin: 0 0 14px 0; +} + +.ui-debug-row { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +/* ─── Button Matrix ─── */ +.ui-debug-matrix { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; +} + +.ui-debug-btn { + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid transparent; + border-radius: var(--ui-debug-radius); + font-family: var(--wolai-font-sans); + font-weight: 500; + cursor: pointer; + transition: all 120ms ease; + white-space: nowrap; +} + +.ui-debug-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; } +.ui-debug-btn--md { height: 36px; padding: 0 16px; font-size: 13px; } +.ui-debug-btn--lg { height: 44px; padding: 0 22px; font-size: 15px; } + +/* primary */ +.ui-debug-btn--primary { background: var(--ui-debug-primary); color: #fff; } +.ui-debug-btn--primary:hover { background: var(--ui-debug-primary-hover); } +.ui-debug-btn--primary:active { background: var(--ui-debug-primary-active); } +.ui-debug-btn--primary:disabled, +.ui-debug-btn--primary[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; } + +/* secondary */ +.ui-debug-btn--secondary { background: var(--ui-debug-secondary); color: #fff; } +.ui-debug-btn--secondary:hover { background: var(--ui-debug-secondary-hover); } +.ui-debug-btn--secondary:active { filter: brightness(.9); } +.ui-debug-btn--secondary:disabled, +.ui-debug-btn--secondary[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; } + +/* outline */ +.ui-debug-btn--outline { background: transparent; color: var(--ui-debug-text); border-color: var(--ui-debug-border); } +.ui-debug-btn--outline:hover { background: var(--ui-debug-border); } +.ui-debug-btn--outline:active { background: rgba(0,0,0,.12); } +.ui-debug-btn--outline:disabled, +.ui-debug-btn--outline[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; } + +/* state data attributes */ +.ui-debug-btn[data-ui-debug-state="hover"] { filter: brightness(1.08); } +.ui-debug-btn[data-ui-debug-state="active"] { filter: brightness(.88); } + +/* ─── Dialog/Modal ─── */ +.ui-debug-dialog-overlay { + position: fixed; + inset: 0; + z-index: var(--wolai-z-modal); + display: grid; + place-items: center; + background: rgba(0,0,0,.32); +} + +.ui-debug-dialog-overlay[hidden] { display: none; } + +.ui-debug-dialog-panel { + position: relative; + width: min(440px, calc(100vw - 32px)); + max-height: calc(100vh - 48px); + overflow: auto; + border: 1px solid var(--ui-debug-border); + border-radius: 10px; + background: var(--ui-debug-bg); + box-shadow: var(--ui-debug-shadow-lg); + padding: 20px; +} + +.ui-debug-dialog-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; +} + +.ui-debug-dialog-title { + font-size: 17px; + font-weight: 650; + margin: 0; +} + +.ui-debug-dialog-close { + width: 30px; + height: 30px; + border: 0; + border-radius: 6px; + background: transparent; + color: var(--ui-debug-text-secondary); + cursor: pointer; + font-size: 16px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.ui-debug-dialog-close:hover { background: var(--ui-debug-border); } + +.ui-debug-dialog-body { + font-size: 14px; + color: var(--ui-debug-text-secondary); + margin: 0 0 18px 0; + line-height: 1.5; +} + +.ui-debug-dialog-footer { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +/* ─── Popover / DropdownMenu ─── */ +.ui-debug-popover-host { + position: relative; + display: inline-block; +} + +.ui-debug-popover { + position: absolute; + top: calc(100% + 6px); + left: 0; + z-index: var(--wolai-z-dropdown); + min-width: 180px; + padding: 4px; + border: 1px solid var(--ui-debug-border); + border-radius: 8px; + background: var(--ui-debug-bg); + box-shadow: var(--ui-debug-shadow); +} + +.ui-debug-popover[hidden] { display: none; } + +.ui-debug-popover-item { + display: flex; + align-items: center; + gap: 6px; + width: 100%; + padding: 8px 10px; + border: 0; + border-radius: 5px; + background: transparent; + color: var(--ui-debug-text); + font-size: 13px; + cursor: pointer; + text-align: left; +} + +.ui-debug-popover-item:hover { background: var(--ui-debug-border); } + +.ui-debug-popover-item--danger { color: var(--ui-debug-danger); } + +.ui-debug-popover-item--check { cursor: pointer; } +.ui-debug-popover-item--check input[type="checkbox"] { margin: 0; accent-color: var(--ui-debug-primary); } + +.ui-debug-popover-separator { + height: 1px; + margin: 4px 8px; + border: 0; + background: var(--ui-debug-border); +} + +/* ─── Toast ─── */ +.ui-debug-toast-container { + position: fixed; + top: 16px; + right: 16px; + z-index: var(--wolai-z-modal); + display: flex; + flex-direction: column; + gap: 8px; + pointer-events: none; +} + +.ui-debug-toast { + padding: 10px 18px; + border-radius: var(--ui-debug-radius); + font-size: 13px; + font-weight: 500; + pointer-events: auto; + opacity: 0; + transform: translateY(-8px); + transition: all 200ms ease; + box-shadow: var(--ui-debug-shadow); +} + +.ui-debug-toast--visible { opacity: 1; transform: translateY(0); } + +.ui-debug-toast--info { background: #DBEAFE; color: #1E40AF; } +.ui-debug-toast--success { background: #DCFCE7; color: #16A34A; } +.ui-debug-toast--error { background: #FEE2E2; color: #DC2626; } +.ui-debug-toast--warning { background: #FEF3C7; color: #D97706; } + +/* dark toast variants */ +.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--info { background: #1E3A5F; color: #93C5FD; } +.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--success { background: #14532D; color: #86EFAC; } +.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--error { background: #450A0A; color: #FCA5A5; } +.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--warning { background: #451A03; color: #FCD34D; } + +/* ─── Form Elements ─── */ +.ui-debug-form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px; +} + +.ui-debug-field { + display: flex; + flex-direction: column; + gap: 5px; +} + +.ui-debug-field--wide { grid-column: span 2; } + +.ui-debug-label { + font-size: 12px; + font-weight: 600; + color: var(--ui-debug-text-secondary); + text-transform: uppercase; + letter-spacing: .5px; +} + +.ui-debug-input, .ui-debug-select, .ui-debug-textarea { + height: 36px; + padding: 6px 10px; + border: 1px solid var(--ui-debug-border); + border-radius: var(--ui-debug-radius); + background: var(--ui-debug-bg); + color: var(--ui-debug-text); + font-size: 13px; + font-family: var(--wolai-font-sans); + transition: border-color 120ms ease; +} + +.ui-debug-input:focus, .ui-debug-select:focus, .ui-debug-textarea:focus { + outline: none; + border-color: var(--ui-debug-primary); + box-shadow: var(--wolai-state-focus-ring); +} + +.ui-debug-input:disabled { opacity: .45; cursor: not-allowed; } +.ui-debug-textarea { height: auto; resize: vertical; } +.ui-debug-select { cursor: pointer; } + +/* ─── responsive ─── */ +@media (max-width: 640px) { + .ui-debug-matrix { grid-template-columns: 1fr; } + .ui-debug-form-grid { grid-template-columns: 1fr; } + .ui-debug-field--wide { grid-column: span 1; } + .ui-debug-header { flex-direction: column; gap: 10px; align-items: flex-start; } +} + diff --git a/rust/crates/mnote-web/src/ssr/styles/pages/auth.css b/rust/crates/mnote-web/src/ssr/styles/pages/auth.css new file mode 100644 index 00000000..0b87cd99 --- /dev/null +++ b/rust/crates/mnote-web/src/ssr/styles/pages/auth.css @@ -0,0 +1,186 @@ +/* ===== 认证页面 ===== */ +.mnote-auth { + position: relative; + display: grid; + min-height: 100vh; + place-items: center; + padding: 48px 20px; + background: #FFFFFF; +} + +.mnote-auth-brand { + position: fixed; + top: 28px; + left: 34px; + display: inline-flex; + align-items: center; + gap: 10px; + color: #37352F; + font-size: 18px; + font-weight: 650; + letter-spacing: 0; +} + +.mnote-auth-brand:hover { + color: #37352F; +} + +.mnote-auth-brand-mark { + display: inline-flex; + width: 32px; + height: 32px; + align-items: center; + justify-content: center; + border-radius: 6px; + background: #37352F; + color: #FFF; + font-size: 18px; + font-weight: 700; + line-height: 1; +} + +.mnote-auth-panel { + width: min(100%, 360px); + color: #37352F; +} + +.mnote-auth-heading { + margin-bottom: 30px; + text-align: center; +} + +.mnote-auth-heading h1 { + margin: 0 0 8px; + color: #37352F; + font-size: 28px; + font-weight: 650; + line-height: 1.25; + letter-spacing: 0; +} + +.mnote-auth-heading p { + color: #9B9A97; + font-size: 14px; + line-height: 1.5; +} + +.mnote-auth-form { + display: grid; + gap: 12px; +} + +.mnote-auth-field { + display: grid; + gap: 7px; + color: #6D6D69; + font-size: 13px; + line-height: 1.3; +} + +.mnote-auth-field input { + width: 100%; + height: 42px; + border: 1px solid #DCDAD6; + border-radius: 4px; + background: #FFF; + color: #37352F; + font: 400 15px/1.4 var(--wolai-font-sans); + letter-spacing: 0; + outline: none; + padding: 0 12px; +} + +.mnote-auth-field input::placeholder { + color: #B5B1AA; +} + +.mnote-auth-field input:focus { + border-color: #A8A39A; + box-shadow: 0 0 0 2px rgba(55, 53, 47, 0.08); +} + +.mnote-auth-message { + min-height: 20px; + color: #9B9A97; + font-size: 13px; + line-height: 20px; + text-align: center; +} + +.mnote-auth-message[data-type="error"] { + color: #D14343; +} + +.mnote-auth-message[data-type="success"] { + color: #23834D; +} + +.mnote-auth-submit { + width: 100%; + height: 42px; + border: 0; + border-radius: 4px; + background: #37352F; + color: #FFF; + cursor: pointer; + font: 600 15px/1 var(--wolai-font-sans); + letter-spacing: 0; +} + +.mnote-auth-submit:hover { + background: #2F2D29; +} + +.mnote-auth-submit:disabled { + cursor: default; + opacity: .58; +} + +.mnote-auth-quick-login { + width: 100%; + height: 42px; + border: 1px solid #DCDAD6; + border-radius: 4px; + background: #FFF; + color: #37352F; + cursor: pointer; + font: 500 14px/1 var(--wolai-font-sans); + letter-spacing: 0; +} + +.mnote-auth-quick-login:hover { + background: #F7F7F5; +} + +.mnote-auth-quick-login:disabled { + cursor: default; + opacity: .58; +} + +.mnote-auth-switch { + display: block; + margin: 18px auto 0; + border: 0; + background: transparent; + color: #6D6D69; + cursor: pointer; + font: 400 14px/1.4 var(--wolai-font-sans); + letter-spacing: 0; +} + +.mnote-auth-switch:hover { + color: #37352F; +} + +@media (max-width: 640px) { + .mnote-auth { + align-items: start; + padding-top: 132px; + } + + .mnote-auth-brand { + top: 24px; + left: 22px; + } +} + diff --git a/rust/crates/mnote-web/src/ssr/styles/pages/home.css b/rust/crates/mnote-web/src/ssr/styles/pages/home.css new file mode 100644 index 00000000..e1f81be6 --- /dev/null +++ b/rust/crates/mnote-web/src/ssr/styles/pages/home.css @@ -0,0 +1,70 @@ +/* ===== 首页 ===== */ +.mnote-home { + max-width: 720px; + margin: 0 auto; + padding: 72px 64px; +} + +.mnote-home-icon { + width: 96px; + height: 96px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 22px; + color: #000; + font-size: 92px; + line-height: 1; +} + +.mnote-home h1 { + text-align: center; + font-size: 44px; + font-weight: 700; + letter-spacing: 0; + margin-bottom: 34px; + color: var(--wolai-text-primary); +} + +.mnote-home p { + font-size: 16px; + color: var(--wolai-text-secondary); + line-height: 1.6; + margin-bottom: 32px; +} + +.mnote-home-links { + display: flex; + flex-direction: column; + gap: 8px; + max-width: 360px; + margin: 0 auto; +} + +.mnote-home-links a { + display: flex; + align-items: center; + gap: 8px; + padding: 2px 0; + border-radius: var(--wolai-radius); + font-size: 21px; + font-weight: 650; + color: var(--wolai-text-primary); + text-decoration: none; + transition: background-color 80ms ease; +} + +.mnote-home-links a:hover { + background: var(--wolai-bg-hover); +} + +.mnote-home-links a::before { + content: none; +} + +.mnote-home-links a span { + width: 26px; + text-align: center; + color: #111; +} + diff --git a/rust/crates/mnote-web/src/ssr/styles/pages/shells.css b/rust/crates/mnote-web/src/ssr/styles/pages/shells.css new file mode 100644 index 00000000..db394376 --- /dev/null +++ b/rust/crates/mnote-web/src/ssr/styles/pages/shells.css @@ -0,0 +1,87 @@ +/* ===== 文档壳 ===== */ +.document-shell { + width: 100%; + min-height: 100vh; + margin: 0 auto; +} + +.document-shell-header { + padding: 48px 0 0; + margin: 0 auto 8px; + max-width: 760px; +} + +.document-shell-header h1 { + font-size: 40px; + font-weight: 700; + line-height: 1.2; + color: var(--wolai-text-primary); + word-break: break-word; + padding: 3px 0; +} + +#mnote-editor-island { + margin: 0 15px; + max-width: 760px; + width: calc(100% - 30px); + min-height: 300px; + padding-bottom: 48px; +} + +#mnote-editor-island .bn-editor { + padding: 0; + max-width: none; + margin: 0; +} + +/* ===== 搜索壳 ===== */ +#mnote-search-shell { + max-width: 800px; + min-height: 100vh; + margin: 0 auto; + padding: 48px 64px; +} + +#mnote-search-shell header { + margin-bottom: 24px; +} + +#mnote-search-shell h1 { + font-size: 32px; + font-weight: 700; + color: var(--wolai-text-primary); + margin-bottom: 4px; +} + +.search-meta, +.search-query { + color: var(--wolai-text-secondary); + font-size: 14px; +} + +#mnote-search-island { + min-height: 200px; +} + +/* ===== 思维导图壳 ===== */ +#mnote-mindmap-shell { + max-width: 1000px; + min-height: 100vh; + margin: 0 auto; + padding: 48px 64px; +} + +#mnote-mindmap-shell header { + margin-bottom: 24px; +} + +#mnote-mindmap-shell h1 { + font-size: 32px; + font-weight: 700; + color: var(--wolai-text-primary); +} + +#mnote-mindmap-island { + min-height: 400px; +} + diff --git a/rust/crates/mnote-web/src/ssr/styles/tokens.css b/rust/crates/mnote-web/src/ssr/styles/tokens.css new file mode 100644 index 00000000..e0b37b64 --- /dev/null +++ b/rust/crates/mnote-web/src/ssr/styles/tokens.css @@ -0,0 +1,74 @@ +:root { + /* 背景色 */ + --color-basic-50: #F7F7F5; + --color-basic-75: #F0F0EE; + --color-basic-100: #EBEBEB; + --color-basic-200: #E3E3E0; + --color-basic-300: #D4D4D1; + --color-basic-400: #C4C4C1; + --color-basic-500: #A9A9A6; + --color-basic-600: #9B9A97; + --color-basic-700: #6D6D69; + --color-basic-800: #504F4B; + --color-basic-900: #37352F; + + /* wolai 语义变量 */ + --wolai-bg: #FFFFFF; + --wolai-bg-sidebar: var(--color-basic-50); + --wolai-bg-hover: rgba(55, 53, 47, 0.08); + --wolai-bg-active: rgba(55, 53, 47, 0.12); + --wolai-text-primary: var(--color-basic-900); + --wolai-text-secondary: var(--color-basic-600); + --wolai-border: #E9E9E8; + --wolai-brand: #22A559; + --wolai-accent: #2563eb; + --wolai-accent-hover: #1d4ed8; + --wolai-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Helvetica, Arial, sans-serif; + --wolai-radius: 4px; + + /* z-index tokens */ + --wolai-z-dock: 50; + --wolai-z-popover: 90; + --wolai-z-dropdown: 120; + --wolai-z-context-menu: 1000; + --wolai-z-modal: 1200; + + /* spacing tokens */ + --wolai-spacing-xs: 4px; + --wolai-spacing-sm: 8px; + --wolai-spacing-md: 12px; + --wolai-spacing-lg: 16px; + --wolai-spacing-xl: 24px; + --wolai-spacing-2xl: 32px; + + /* shadow tokens */ + --wolai-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04); + --wolai-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); + --wolai-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12); + --wolai-shadow-popover: 0 4px 16px rgba(15, 23, 42, 0.10); + --wolai-shadow-modal: 0 18px 54px rgba(15, 23, 42, 0.18); + + /* state tokens */ + --wolai-state-hover-bg: rgba(55, 53, 47, 0.06); + --wolai-state-active-bg: rgba(55, 53, 47, 0.10); + --wolai-state-focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.35); + --wolai-state-disabled-opacity: 0.45; +} + +/* Stitch 260429 atelier tokens */ +:root { + --atelier-surface: #FAF9F9; + --atelier-sidebar: #F5F5F5; + --atelier-sidebar-hover: #ECEBE9; + --atelier-sidebar-active: #E3E2E2; + --atelier-document: #FFFFFF; + --atelier-text: #1B1C1C; + --atelier-text-muted: #8A8782; + --atelier-text-soft: #B7B4AF; + --atelier-outline: #EAEAEA; + --atelier-primary: #006E28; + --atelier-primary-container: #31AA4D; + --atelier-secondary: #2367F6; + --atelier-shadow: 0 16px 32px rgba(27, 28, 28, 0.04); +} + diff --git a/scripts/task500-ui-debug-components-smoke.js b/scripts/task500-ui-debug-components-smoke.js new file mode 100644 index 00000000..10523df0 --- /dev/null +++ b/scripts/task500-ui-debug-components-smoke.js @@ -0,0 +1,147 @@ +"use strict"; + +const { chromium } = require("playwright"); +const { BASE_URL, UI_TIMEOUT_MS, assert, ensureAuthenticated } = require("./tree-shell-smoke-helpers"); + +const MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES = process.env.MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES || "0"; + +if (MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES !== "1") { + console.log("[task500] 跳过: MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES 未设为 1 (当前值: '%s')", MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES); + console.log("[task500] 设置 MNOTE_WEB_ENABLE_DEBUG_SHELL_ROUTES=1 并重启 mnote-web 后再运行此 smoke。"); + process.exit(0); +} + +const PAGE_URL = `${BASE_URL}/ui-debug/components`; + +async function main() { + console.log("[task500] 启动 UI Debug 组件矩阵 smoke …"); + const browser = await chromium.launch({ headless: true }); + const context = await browser.newContext(); + const page = await context.newPage(); + + try { + // 1. 认证 + await ensureAuthenticated(page); + console.log("[task500] ✓ 已认证"); + + // 2. 导航到 /ui-debug/components + await page.goto(PAGE_URL, { waitUntil: "networkidle", timeout: UI_TIMEOUT_MS }); + console.log("[task500] ✓ 页面已加载: %s", PAGE_URL); + + // 3. 页面标题 + const title = await page.title(); + assert(title.includes("UI Debug"), `标题应包含 "UI Debug"，实际: "${title}"`); + console.log("[task500] ✓ 页面标题: %s", title); + + // 4. 页面根元素 + const root = page.locator(".ui-debug-root"); + await root.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); + console.log("[task500] ✓ .ui-debug-root 可见"); + + // 5. Button 矩阵应当可见 + const matrix = page.locator(".ui-debug-matrix"); + await matrix.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); + const btnCount = await matrix.locator("button").count(); + assert(btnCount >= 12, `按钮矩阵应至少有 12 个按钮，实际: ${btnCount}`); + console.log("[task500] ✓ 按钮矩阵: %d 个按钮", btnCount); + + // 6. 主题切换 + const darkBtn = page.locator("[data-ui-debug-theme=\"dark\"]"); + await darkBtn.click(); + await page.waitForTimeout(200); + const theme = await root.getAttribute("data-ui-debug-theme"); + assert(theme === "dark", `主题应为 dark，实际: "${theme}"`); + console.log("[task500] ✓ 主题切换: dark"); + + // 切回 light + const lightBtn = page.locator("[data-ui-debug-theme=\"light\"]"); + await lightBtn.click(); + await page.waitForTimeout(200); + const theme2 = await root.getAttribute("data-ui-debug-theme"); + assert(theme2 === "light", `主题应为 light，实际: "${theme2}"`); + + // 7. Dialog 对话框 + const dialogTrigger = page.locator("[data-ui-debug-dialog=\"info\"]"); + await dialogTrigger.click(); + await page.waitForTimeout(200); + const dialogOverlay = page.locator("#ui-debug-dialog-overlay"); + const overlayVisible = await dialogOverlay.isVisible(); + assert(overlayVisible, "对话框应可见"); + const dialogTitle = await page.locator("#ui-debug-dialog-title").textContent(); + assert(dialogTitle.includes("提示"), `对话框标题应包含"提示"，实际: "${dialogTitle}"`); + console.log("[task500] ✓ 对话框打开: %s", dialogTitle); + + // 关闭对话框 + const closeBtn = page.locator("[data-ui-debug-dialog-close=\"true\"]").first(); + await closeBtn.click(); + await page.waitForTimeout(200); + const hidden = await dialogOverlay.getAttribute("hidden"); + assert(hidden !== null, "对话框应已关闭 (hidden)"); + console.log("[task500] ✓ 对话框已关闭"); + + // 8. Popover 菜单 + const popoverTrigger = page.locator("[data-ui-debug-popover=\"actions\"]"); + await popoverTrigger.click(); + await page.waitForTimeout(200); + const popoverPanel = page.locator("[data-ui-debug-popover-panel=\"actions\"]"); + const popoverVisible = await popoverPanel.isVisible(); + assert(popoverVisible, "Popover 菜单应可见"); + const menuItems = await popoverPanel.locator("[role=\"menuitem\"]").count(); + assert(menuItems >= 2, `Popover 应至少有 2 个菜单项，实际: ${menuItems}`); + console.log("[task500] ✓ Popover 打开: %d 个菜单项", menuItems); + + // 关闭 popover + await page.locator("body").click({ position: { x: 10, y: 10 } }); + await page.waitForTimeout(200); + + // 9. Toast + const toastTrigger = page.locator("[data-ui-debug-toast-kind=\"success\"]").first(); + await toastTrigger.click(); + await page.waitForTimeout(400); + const toast = page.locator(".ui-debug-toast--visible"); + const toastCount = await toast.count(); + assert(toastCount >= 1, `Toast 应可见，实际数量: ${toastCount}`); + console.log("[task500] ✓ Toast 显示"); + + // 10. Input / Select / Textarea + const textInput = page.locator("#ui-debug-input-text"); + await textInput.waitFor({ state: "visible", timeout: UI_TIMEOUT_MS }); + await textInput.fill("测试文本"); + const inputValue = await textInput.inputValue(); + assert(inputValue === "测试文本", `输入框值应为"测试文本"，实际: "${inputValue}"`); + console.log("[task500] ✓ 文本输入: %s", inputValue); + + const selectEl = page.locator("#ui-debug-select"); + await selectEl.selectOption("b"); + const selectValue = await selectEl.inputValue(); + assert(selectValue === "b", `下拉选择值应为"b"，实际: "${selectValue}"`); + console.log("[task500] ✓ 下拉选择: %s", selectValue); + + const textarea = page.locator("#ui-debug-textarea"); + await textarea.fill("多行\n文本"); + const textareaValue = await textarea.inputValue(); + assert(textareaValue === "多行\n文本", `文本区域值应包含"多行"，实际: "${textareaValue}"`); + console.log("[task500] ✓ 文本区域: %s", textareaValue.replace(/\n/g, "\\n")); + + // 11. CSS 变量检查 + const cssVar = await root.evaluate((el) => { + const style = getComputedStyle(el); + return style.getPropertyValue("--ui-debug-primary").trim(); + }); + assert(cssVar.length > 0, `--ui-debug-primary 应有值，实际: "${cssVar}"`); + console.log("[task500] ✓ CSS 变量 --ui-debug-primary: %s", cssVar); + + console.log("[task500] ✅ 全部断言通过"); + } catch (error) { + console.error("[task500] ✗ 失败:", error.message); + try { + await page.screenshot({ path: "tmp/task500-failure.png", fullPage: true }); + console.log("[task500] 失败截图: tmp/task500-failure.png"); + } catch (_) {} + process.exitCode = 1; + } finally { + await browser.close(); + } +} + +main();