From 15ce9caae92d1e17ce71954afb24a650551f3491 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 26 Jun 2025 11:58:34 -0400 Subject: [PATCH] style: enhance toolbar with glassmorphism and improved design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add white background with subtle gray border and rounded corners - Remove initial drop shadow, add shadow on hover - Reduce vertical padding for more compact design - Update button hover states to use darker gray - Add sticky positioning with gap from top - Improve responsive padding and animations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../admin/composer/ComposerToolbar.svelte | 271 +++++++++++------- 1 file changed, 175 insertions(+), 96 deletions(-) diff --git a/src/lib/components/admin/composer/ComposerToolbar.svelte b/src/lib/components/admin/composer/ComposerToolbar.svelte index bfffb35..a04df01 100644 --- a/src/lib/components/admin/composer/ComposerToolbar.svelte +++ b/src/lib/components/admin/composer/ComposerToolbar.svelte @@ -40,52 +40,16 @@
-
- -
- -
- - - - {#each Object.keys(filteredCommands).filter((key) => !excludedCommands.includes(key)) as keys} - {@const groups = filteredCommands[keys].commands} - {#each groups as command} - - {/each} - - {/each} - - {#if showMediaLibrary} - +
+
+
+
+ + + {/if} + + {#if colorCommands.length > 0} + { + const color = editor.getAttributes('textStyle').color + const hasColor = editor.isActive('textStyle', { color }) + if (hasColor) { + editor.chain().focus().unsetColor().run() + } else { + const color = prompt('Enter the color of the text:') + if (color !== null) { + editor.chain().focus().setColor(color).run() + } } - } - }} - /> - { - const hasHightlight = editor.isActive('highlight') - if (hasHightlight) { - editor.chain().focus().unsetHighlight().run() - } else { - const color = prompt('Enter the color of the highlight:') - if (color !== null) { - editor.chain().focus().setHighlight({ color }).run() + }} + /> + { + const hasHightlight = editor.isActive('highlight') + if (hasHightlight) { + editor.chain().focus().unsetHighlight().run() + } else { + const color = prompt('Enter the color of the highlight:') + if (color !== null) { + editor.chain().focus().setHighlight({ color }).run() + } } - } - }} - /> - {/if} + }} + /> + {/if} +
@@ -150,23 +152,59 @@ @import '$styles/mixins'; .editor-toolbar { - border-bottom: 1px solid $gray-90; - background: $white; position: sticky; - top: 0; - z-index: 10; - padding: $unit 0; + top: $unit; + z-index: 20; + padding: $unit $unit-2x; + margin: 0 0 $unit-2x 0; + background: rgba($white, 0.98); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba($gray-90, 0.2); + border-radius: $corner-radius-md; + box-shadow: none; + transition: all 0.2s ease; + animation: slideDown 0.3s ease-out; + + &:hover { + background: $white; + border-color: rgba($gray-85, 0.3); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + } + } + + @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .toolbar-container { + max-width: $page-width; + margin: 0 auto; + padding: 0 $unit-2x; + + @include breakpoint('phone') { + padding: 0; + } } .edra-toolbar { display: flex; align-items: center; - gap: 4px; + gap: 6px; padding: 0 $unit-6x; flex-wrap: wrap; + height: 44px; @include breakpoint('phone') { padding: 0 $unit-4x; + gap: 4px; } } @@ -179,35 +217,76 @@ display: flex; align-items: center; gap: 4px; - padding: 6px 10px; - background: transparent; - border: 1px solid transparent; + padding: 6px 12px; + background: rgba($gray-95, 0.5); + border: 1px solid rgba($gray-85, 0.3); border-radius: $corner-radius; - font-size: 14px; + font-size: 13px; + font-weight: 500; color: $gray-10; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.15s ease; + height: 32px; &:hover { - background: $gray-95; - border-color: $gray-85; + background: rgba($gray-90, 0.8); + border-color: rgba($gray-80, 0.5); + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } &:active { - background: $gray-90; + background: rgba($gray-85, 0.9); + transform: translateY(0); + box-shadow: none; } svg { - width: 12px; - height: 12px; - opacity: 0.5; + width: 10px; + height: 10px; + opacity: 0.6; } } .separator { width: 1px; - height: 20px; - background: $gray-85; - margin: 0 4px; + height: 24px; + background: rgba($gray-85, 0.3); + margin: 0 6px; + opacity: 0.6; + } + + // Override edra toolbar icon styles for floating appearance + :global(.editor-toolbar .edra-command-button) { + min-width: 32px; + min-height: 32px; + background-color: transparent; + border-radius: $corner-radius; + transition: all 0.15s ease; + + &:hover { + background-color: rgba($gray-85, 0.6); + transform: translateY(-1px); + } + + &:active { + background-color: rgba($gray-85, 0.7); + transform: translateY(0); + } + + &.active { + background-color: rgba($blue-50, 0.1); + color: $blue-40; + + &:hover { + background-color: rgba($blue-50, 0.15); + } + } + } + + :global(.editor-toolbar .edra-toolbar-icon) { + width: 16px; + height: 16px; + stroke-width: 2px; }