Agent task: 开发：A2/A3/A4 CSS token 与组件拆分
This commit is contained in:
Agent Board
@@ -12,7 +12,10 @@
|
||||
/// - `styles/tokens.css`: 设计 tokens（颜色、z-index、间距、阴影、状态）
|
||||
/// - `styles/base.css`: 基础重置、排版、SVG 图标、滚动条、侧栏/顶栏布局
|
||||
/// - `styles/pages/home.css`, `shells.css`, `auth.css`: 页面级样式
|
||||
/// - `styles/components/main.css`: 组件级样式（编辑器、面板、标签页等）
|
||||
/// - `styles/components/main.css`: 核心组件样式（编辑器、侧栏、树、附件等）
|
||||
/// - `styles/components/search.css`: 搜索弹窗组件
|
||||
/// - `styles/components/page-ai.css`: Page AI 仪表盘组件
|
||||
/// - `styles/components/ui-debug.css`: UI Debug 组件矩阵
|
||||
pub const MNOTE_CSS: &str = concat!(
|
||||
include_str!("styles/tokens.css"),
|
||||
"\n",
|
||||
@@ -25,6 +28,12 @@ pub const MNOTE_CSS: &str = concat!(
|
||||
include_str!("styles/pages/auth.css"),
|
||||
"\n",
|
||||
include_str!("styles/components/main.css"),
|
||||
"\n",
|
||||
include_str!("styles/components/search.css"),
|
||||
"\n",
|
||||
include_str!("styles/components/page-ai.css"),
|
||||
"\n",
|
||||
include_str!("styles/components/ui-debug.css"),
|
||||
);
|
||||
|
||||
#[cfg(test)]
|
||||
|
||||
@@ -871,3 +871,130 @@ html[data-mnote-sidebar-resizing="true"] .mnote-sidebar-resizer::before {
|
||||
color: var(--wolai-accent);
|
||||
}
|
||||
|
||||
|
||||
/* ===== data-variant 通用按钮规则 ===== */
|
||||
/* primary */
|
||||
.mnote-btn[data-variant="primary"],
|
||||
[data-variant="primary"].mnote-btn {
|
||||
background: var(--mnote-btn-primary-bg);
|
||||
color: var(--mnote-btn-primary-color);
|
||||
}
|
||||
.mnote-btn[data-variant="primary"]:hover,
|
||||
[data-variant="primary"].mnote-btn:hover {
|
||||
background: var(--mnote-btn-primary-hover-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="primary"]:active,
|
||||
[data-variant="primary"].mnote-btn:active {
|
||||
background: var(--mnote-btn-primary-active-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="primary"]:disabled,
|
||||
[data-variant="primary"].mnote-btn:disabled {
|
||||
opacity: var(--mnote-btn-primary-disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* secondary */
|
||||
.mnote-btn[data-variant="secondary"],
|
||||
[data-variant="secondary"].mnote-btn {
|
||||
background: var(--mnote-btn-secondary-bg);
|
||||
color: var(--mnote-btn-secondary-color);
|
||||
}
|
||||
.mnote-btn[data-variant="secondary"]:hover,
|
||||
[data-variant="secondary"].mnote-btn:hover {
|
||||
background: var(--mnote-btn-secondary-hover-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="secondary"]:disabled,
|
||||
[data-variant="secondary"].mnote-btn:disabled {
|
||||
opacity: var(--mnote-btn-secondary-disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* outline */
|
||||
.mnote-btn[data-variant="outline"],
|
||||
[data-variant="outline"].mnote-btn {
|
||||
background: var(--mnote-btn-outline-bg);
|
||||
color: var(--mnote-btn-outline-color);
|
||||
border-color: var(--mnote-btn-outline-border);
|
||||
}
|
||||
.mnote-btn[data-variant="outline"]:hover,
|
||||
[data-variant="outline"].mnote-btn:hover {
|
||||
background: var(--mnote-btn-outline-hover-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="outline"]:active,
|
||||
[data-variant="outline"].mnote-btn:active {
|
||||
background: var(--mnote-btn-outline-active-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="outline"]:disabled,
|
||||
[data-variant="outline"].mnote-btn:disabled {
|
||||
opacity: var(--mnote-btn-outline-disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ghost */
|
||||
.mnote-btn[data-variant="ghost"],
|
||||
[data-variant="ghost"].mnote-btn {
|
||||
background: var(--mnote-btn-ghost-bg);
|
||||
color: var(--mnote-btn-ghost-color);
|
||||
}
|
||||
.mnote-btn[data-variant="ghost"]:hover,
|
||||
[data-variant="ghost"].mnote-btn:hover {
|
||||
background: var(--mnote-btn-ghost-hover-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="ghost"]:active,
|
||||
[data-variant="ghost"].mnote-btn:active {
|
||||
background: var(--mnote-btn-ghost-active-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="ghost"]:disabled,
|
||||
[data-variant="ghost"].mnote-btn:disabled {
|
||||
opacity: var(--mnote-btn-ghost-disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* danger */
|
||||
.mnote-btn[data-variant="danger"],
|
||||
[data-variant="danger"].mnote-btn {
|
||||
background: var(--mnote-btn-danger-bg);
|
||||
color: var(--mnote-btn-danger-color);
|
||||
}
|
||||
.mnote-btn[data-variant="danger"]:hover,
|
||||
[data-variant="danger"].mnote-btn:hover {
|
||||
background: var(--mnote-btn-danger-hover-bg);
|
||||
}
|
||||
.mnote-btn[data-variant="danger"]:disabled,
|
||||
[data-variant="danger"].mnote-btn:disabled {
|
||||
opacity: var(--mnote-btn-danger-disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== data-size 通用按钮规则 ===== */
|
||||
.mnote-btn[data-size="sm"],
|
||||
[data-size="sm"].mnote-btn {
|
||||
height: var(--mnote-btn-sm-height);
|
||||
padding: var(--mnote-btn-sm-padding);
|
||||
font-size: var(--mnote-btn-sm-font-size);
|
||||
}
|
||||
.mnote-btn[data-size="md"],
|
||||
[data-size="md"].mnote-btn {
|
||||
height: var(--mnote-btn-md-height);
|
||||
padding: var(--mnote-btn-md-padding);
|
||||
font-size: var(--mnote-btn-md-font-size);
|
||||
}
|
||||
.mnote-btn[data-size="lg"],
|
||||
[data-size="lg"].mnote-btn {
|
||||
height: var(--mnote-btn-lg-height);
|
||||
padding: var(--mnote-btn-lg-padding);
|
||||
font-size: var(--mnote-btn-lg-font-size);
|
||||
}
|
||||
|
||||
/* ===== data-state 按钮通用规则 ===== */
|
||||
.mnote-btn[data-state="hover"] {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
.mnote-btn[data-state="active"] {
|
||||
filter: brightness(0.88);
|
||||
}
|
||||
.mnote-btn[data-state="disabled"] {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,130 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,362 @@
|
||||
/* ===== 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; }
|
||||
}
|
||||
|
||||
@@ -26,6 +26,29 @@
|
||||
--wolai-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Helvetica, Arial, sans-serif;
|
||||
--wolai-radius: 4px;
|
||||
|
||||
/* font-size scale */
|
||||
--mnote-font-size-2xs: 10px;
|
||||
--mnote-font-size-xs: 11px;
|
||||
--mnote-font-size-sm: 12px;
|
||||
--mnote-font-size-md: 13px;
|
||||
--mnote-font-size-base: 14px;
|
||||
--mnote-font-size-lg: 16px;
|
||||
--mnote-font-size-xl: 18px;
|
||||
--mnote-font-size-2xl: 20px;
|
||||
--mnote-font-size-3xl: 24px;
|
||||
--mnote-font-size-4xl: 28px;
|
||||
|
||||
/* font-weight tokens */
|
||||
--mnote-font-weight-normal: 400;
|
||||
--mnote-font-weight-medium: 500;
|
||||
--mnote-font-weight-semibold: 600;
|
||||
--mnote-font-weight-bold: 700;
|
||||
|
||||
/* line-height tokens */
|
||||
--mnote-line-height-tight: 1.25;
|
||||
--mnote-line-height-normal: 1.5;
|
||||
--mnote-line-height-relaxed: 1.75;
|
||||
|
||||
/* z-index tokens */
|
||||
--wolai-z-dock: 50;
|
||||
--wolai-z-popover: 90;
|
||||
@@ -53,6 +76,58 @@
|
||||
--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;
|
||||
|
||||
/* ===== component tokens: button ===== */
|
||||
--mnote-btn-font-family: var(--wolai-font-sans);
|
||||
--mnote-btn-font-weight: var(--mnote-font-weight-medium);
|
||||
--mnote-btn-line-height: var(--mnote-line-height-tight);
|
||||
--mnote-btn-radius: var(--wolai-radius);
|
||||
--mnote-btn-transition: all 120ms ease;
|
||||
|
||||
/* btn size tokens */
|
||||
--mnote-btn-sm-height: 28px;
|
||||
--mnote-btn-sm-padding: 0 10px;
|
||||
--mnote-btn-sm-font-size: var(--mnote-font-size-sm);
|
||||
--mnote-btn-md-height: 34px;
|
||||
--mnote-btn-md-padding: 0 14px;
|
||||
--mnote-btn-md-font-size: var(--mnote-font-size-md);
|
||||
--mnote-btn-lg-height: 42px;
|
||||
--mnote-btn-lg-padding: 0 20px;
|
||||
--mnote-btn-lg-font-size: var(--mnote-font-size-lg);
|
||||
|
||||
/* btn variant: primary */
|
||||
--mnote-btn-primary-bg: var(--wolai-accent);
|
||||
--mnote-btn-primary-color: #FFFFFF;
|
||||
--mnote-btn-primary-hover-bg: var(--wolai-accent-hover);
|
||||
--mnote-btn-primary-active-bg: #1e40af;
|
||||
--mnote-btn-primary-disabled-opacity: 0.45;
|
||||
|
||||
/* btn variant: secondary */
|
||||
--mnote-btn-secondary-bg: var(--color-basic-600);
|
||||
--mnote-btn-secondary-color: #FFFFFF;
|
||||
--mnote-btn-secondary-hover-bg: var(--color-basic-700);
|
||||
--mnote-btn-secondary-disabled-opacity: 0.45;
|
||||
|
||||
/* btn variant: outline */
|
||||
--mnote-btn-outline-bg: transparent;
|
||||
--mnote-btn-outline-color: var(--wolai-text-primary);
|
||||
--mnote-btn-outline-border: var(--wolai-border);
|
||||
--mnote-btn-outline-hover-bg: var(--wolai-bg-hover);
|
||||
--mnote-btn-outline-active-bg: var(--wolai-bg-active);
|
||||
--mnote-btn-outline-disabled-opacity: 0.45;
|
||||
|
||||
/* btn variant: ghost */
|
||||
--mnote-btn-ghost-bg: transparent;
|
||||
--mnote-btn-ghost-color: var(--wolai-text-secondary);
|
||||
--mnote-btn-ghost-hover-bg: var(--wolai-bg-hover);
|
||||
--mnote-btn-ghost-active-bg: var(--wolai-bg-active);
|
||||
--mnote-btn-ghost-disabled-opacity: 0.45;
|
||||
|
||||
/* btn variant: danger */
|
||||
--mnote-btn-danger-bg: #DC2626;
|
||||
--mnote-btn-danger-color: #FFFFFF;
|
||||
--mnote-btn-danger-hover-bg: #B91C1C;
|
||||
--mnote-btn-danger-disabled-opacity: 0.45;
|
||||
}
|
||||
|
||||
/* Stitch 260429 atelier tokens */
|
||||
@@ -71,4 +146,3 @@
|
||||
--atelier-secondary: #2367F6;
|
||||
--atelier-shadow: 0 16px 32px rgba(27, 28, 28, 0.04);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user