fix: align rust web stitch sidebar tabs
This commit is contained in:
lix-2026
@@ -865,6 +865,705 @@ a:hover {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Stitch 260429 UI parity overrides ===== */
|
||||
:root {
|
||||
--atelier-surface: #FAF9F9;
|
||||
--atelier-sidebar: #F4F3F3;
|
||||
--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: 240px;
|
||||
background: var(--atelier-sidebar);
|
||||
border-right: 0;
|
||||
box-shadow: inset -1px 0 0 rgba(27, 28, 28, 0.06);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.mnote-sidebar-header,
|
||||
.wolai-sidebar-header {
|
||||
height: 68px;
|
||||
padding: 16px 12px 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wolai-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
background: #D6534D;
|
||||
font-size: 17px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.wolai-sidebar-header .sidebar-workspace-name,
|
||||
.sidebar-workspace-name {
|
||||
max-width: 160px;
|
||||
color: var(--atelier-text);
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.wolai-sidebar-chevron {
|
||||
color: #55514C;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.wolai-quick-actions {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
padding: 8px 16px 26px;
|
||||
}
|
||||
|
||||
.wolai-quick-actions a,
|
||||
.mnote-sidebar-nav a {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.wolai-quick-actions a {
|
||||
height: 28px;
|
||||
color: #3F3D39;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.wolai-quick-actions a:hover {
|
||||
background: rgba(27, 28, 28, 0.07);
|
||||
}
|
||||
|
||||
.wolai-sidebar-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wolai-sidebar-section {
|
||||
padding: 0 8px 18px;
|
||||
}
|
||||
|
||||
.wolai-section-title,
|
||||
.wolai-sidebar-tabs {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
color: var(--atelier-text-muted);
|
||||
font-size: 14px;
|
||||
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 {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
|
||||
.sidebar-tree-section {
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-empty,
|
||||
.wolai-sidebar-empty {
|
||||
padding: 6px 12px;
|
||||
color: var(--atelier-text-soft);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-row {
|
||||
height: 29px;
|
||||
gap: 5px;
|
||||
margin: 1px 4px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
color: #2D2E2E;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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: var(--atelier-sidebar-active);
|
||||
color: var(--atelier-text);
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-toggle,
|
||||
.sidebar-tree .tree-spacer {
|
||||
width: 16px;
|
||||
height: 22px;
|
||||
color: #B8B5AF;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-toggle:hover {
|
||||
background: rgba(27, 28, 28, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-kind-badge {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 20px;
|
||||
color: #111111;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-kind-badge::before {
|
||||
content: "□";
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-kind-badge[data-kind="page"]::before {
|
||||
content: "⌂";
|
||||
}
|
||||
|
||||
.sidebar-tree[data-tree-shell-mode="filetree"] .tree-kind-badge[data-kind="page"]::before,
|
||||
.sidebar-tree .tree-kind-badge[data-kind="document"]::before {
|
||||
content: "◇";
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-kind-badge[data-kind="index"]::before {
|
||||
content: "▤";
|
||||
color: var(--atelier-secondary);
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-kind-badge[data-kind="folder"]::before {
|
||||
content: "▱";
|
||||
color: #D08A1F;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-link {
|
||||
padding: 0 2px;
|
||||
color: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-link-title {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-row[data-active="true"] .tree-link-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-actions {
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-action {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #9A968F;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sidebar-tree .tree-action:hover {
|
||||
background: rgba(27, 28, 28, 0.07);
|
||||
color: var(--atelier-text);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-top: 1px solid rgba(27, 28, 28, 0.08);
|
||||
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);
|
||||
}
|
||||
|
||||
.wolai-topbar {
|
||||
height: 44px;
|
||||
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: 26px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0 11px;
|
||||
border: 1px solid #D6F2DC;
|
||||
border-radius: 999px;
|
||||
background: #ECFCEF;
|
||||
color: #087B31;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wolai-public-pill span {
|
||||
color: var(--atelier-primary-container);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wolai-ai-inline {
|
||||
color: var(--atelier-primary-container);
|
||||
}
|
||||
|
||||
.document-shell {
|
||||
max-width: 880px;
|
||||
min-height: calc(100vh - 44px);
|
||||
padding: 78px 48px 160px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.document-shell-header {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
|
||||
.document-page-icon {
|
||||
height: 82px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #111111;
|
||||
font-size: 72px;
|
||||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.document-shell-header h1 {
|
||||
padding: 0;
|
||||
margin: 0 0 14px;
|
||||
color: var(--atelier-text);
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
line-height: 1.12;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.document-shell-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
padding-bottom: 28px;
|
||||
border-bottom: 1px solid #F0EFED;
|
||||
color: #A19D97;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.document-shell-meta span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#mnote-leptos-tiptap-island-editor-root .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: 1.65;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#mnote-leptos-tiptap-island-editor-root .ProseMirror {
|
||||
width: 100% !important;
|
||||
min-height: 280px;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#mnote-leptos-tiptap-island-editor-root .ProseMirror p {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.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: 24px;
|
||||
gap: 10px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.wolai-floating-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wolai-floating-button--help {
|
||||
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: 52px;
|
||||
height: 52px;
|
||||
border: 0;
|
||||
background: linear-gradient(135deg, var(--atelier-primary), var(--atelier-primary-container));
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 16px 32px rgba(0, 110, 40, 0.22);
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mnote-sidebar,
|
||||
.wolai-sidebar {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.wolai-topbar {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.wolai-public-pill,
|
||||
.wolai-breadcrumb-root,
|
||||
.wolai-breadcrumb-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.document-shell {
|
||||
padding: 48px 28px 120px;
|
||||
}
|
||||
|
||||
.document-page-icon {
|
||||
height: 60px;
|
||||
font-size: 54px;
|
||||
}
|
||||
|
||||
.document-shell-header h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.document-shell {
|
||||
padding: 36px 20px 112px;
|
||||
}
|
||||
|
||||
.document-shell-header h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.wolai-topbar-actions {
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
"##;
|
||||
|
||||
#[cfg(test)]
|
||||
@@ -919,6 +1618,6 @@ mod tests {
|
||||
// 至少 2000 字符才能包含完整样式
|
||||
assert!(MNOTE_CSS.len() > 2000);
|
||||
// 最多 20000 字符避免过于臃肿
|
||||
assert!(MNOTE_CSS.len() < 20000);
|
||||
assert!(MNOTE_CSS.len() < 32000);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user