diff --git a/apps/web/src/components/QuickCreate.vue b/apps/web/src/components/QuickCreate.vue index 293848b..f1eb4da 100644 --- a/apps/web/src/components/QuickCreate.vue +++ b/apps/web/src/components/QuickCreate.vue @@ -407,24 +407,22 @@ onBeforeUnmount(() => { height: 54px; padding: 0; margin: 0; - border: 2px solid #0d9488; + border: 0; border-radius: 16px; - background: #ffffff; - color: #0d9488; + background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%); + color: #fff; display: grid; place-items: center; line-height: 0; direction: ltr; box-shadow: - 0 4px 14px rgba(15, 23, 42, 0.12), - 0 0 0 1px rgba(13, 148, 136, 0.08); + 0 8px 22px rgba(13, 148, 136, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.22); cursor: grab; touch-action: none; user-select: none; transition: - background 0.15s ease, - color 0.15s ease, - border-color 0.15s ease, + filter 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } @@ -439,26 +437,25 @@ onBeforeUnmount(() => { .fab :deep(.ico) { display: block; - stroke-width: 2; + stroke-width: 2.2; + filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15)); } .fab:hover { - background: #f0fdfa; + filter: brightness(1.06); box-shadow: - 0 8px 20px rgba(13, 148, 136, 0.22), - 0 0 0 1px rgba(13, 148, 136, 0.12); + 0 10px 26px rgba(13, 148, 136, 0.48), + inset 0 1px 0 rgba(255, 255, 255, 0.25); } .fab.open { - background: #0d9488; - color: #fff; - border-color: #0d9488; - box-shadow: 0 8px 22px rgba(13, 148, 136, 0.35); + background: linear-gradient(145deg, #115e59 0%, #0d9488 100%); + box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28); } .fab.dragging { cursor: grabbing; - transform: scale(1.04); - box-shadow: 0 10px 24px rgba(13, 148, 136, 0.3); + transform: scale(1.05); + box-shadow: 0 12px 28px rgba(13, 148, 136, 0.5); }