diff --git a/src/lib/components/admin/MarkdownEditor.svelte b/src/lib/components/admin/MarkdownEditor.svelte index 0f17ab7..770d689 100644 --- a/src/lib/components/admin/MarkdownEditor.svelte +++ b/src/lib/components/admin/MarkdownEditor.svelte @@ -206,11 +206,10 @@ onclick={() => insertAtCursor('**', '**', '粗体')} title="加粗" > - + + + +
{#if showImageMenu} @@ -287,12 +286,11 @@ onclick={() => (showImageMenu = !showImageMenu)} title="图片" > - + + + + + {#if showImageMenu}
@@ -330,10 +328,10 @@ onclick={() => insertAtCursor('```\n', '\n```', 'code')} title="代码块" > - + + + +
@@ -352,10 +350,11 @@ onclick={() => (showAdmonitionMenu = !showAdmonitionMenu)} title="提示框 (Admonition)" > - + + + + + {#if showAdmonitionMenu}
@@ -372,17 +371,11 @@ {/if}
@@ -405,48 +398,68 @@ .md-toolbar { display: flex; align-items: center; - gap: 4px; - margin-bottom: 8px; + flex-wrap: wrap; + gap: 2px; + margin-bottom: 10px; + padding: 4px; + border: 1px solid rgba(0, 0, 0, 0.12); + background-color: rgba(0, 0, 0, 0.015); } .md-btn { background: transparent; border: none; - padding: 4px; + padding: 0; + margin: 0; cursor: pointer; color: var(--text-color); - opacity: 0.65; - transition: all 0.2s ease; + opacity: 0.7; + transition: + background-color 0.18s ease, + color 0.18s ease, + opacity 0.18s ease; display: flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; - border-radius: 2px; + width: 30px; + height: 30px; + border-radius: 4px; + flex: none; } .md-btn:hover { opacity: 1; color: var(--accent-color, #419b38); - background-color: rgba(0, 0, 0, 0.03); + background-color: rgba(65, 155, 56, 0.1); + } + + .md-btn:active { + background-color: rgba(65, 155, 56, 0.18); + } + + .md-btn:focus-visible { + opacity: 1; + outline: 2px solid var(--accent-color, #419b38); + outline-offset: -2px; } .md-btn svg { width: 18px; height: 18px; + display: block; stroke: currentColor; - stroke-width: 1.5; + stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .md-divider { - width: 2px; + flex: none; + width: 1px; height: 16px; - background: var(--text-color); - opacity: 0.15; - margin: 0 4px; + background: rgba(0, 0, 0, 0.14); + margin: 0 5px; } .toolbar-dropdown-wrapper {