Mahdi/CRM_Montzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the quick-create FAB high-contrast while keeping the squircle shape.

Browse Source 
Use a solid teal gradient and white grid icon so it stays visible on light backgrounds.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mahdi
2026-09-05 20:14:24 +03:30
co-authored by Cursor
parent 73d949d5d7
commit 361dbfc3e5
1 changed files with 15 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/QuickCreate.vue
+15 -18
View File
@@ -407,24 +407,22 @@ onBeforeUnmount(() => {
height: 54px; height: 54px;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 2px solid #0d9488; border: 0;
border-radius: 16px; border-radius: 16px;
background: #ffffff; background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
color: #0d9488; color: #fff;
display: grid; display: grid;
place-items: center; place-items: center;
line-height: 0; line-height: 0;
direction: ltr; direction: ltr;
box-shadow: box-shadow:
0 4px 14px rgba(15, 23, 42, 0.12), 0 8px 22px rgba(13, 148, 136, 0.4),
0 0 0 1px rgba(13, 148, 136, 0.08); inset 0 1px 0 rgba(255, 255, 255, 0.22);
cursor: grab; cursor: grab;
touch-action: none; touch-action: none;
user-select: none; user-select: none;
transition: transition:
background 0.15s ease, filter 0.15s ease,
color 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease, box-shadow 0.15s ease,
transform 0.12s ease; transform 0.12s ease;
} }
@@ -439,26 +437,25 @@ onBeforeUnmount(() => {
.fab :deep(.ico) { .fab :deep(.ico) {
display: block; display: block;
stroke-width: 2; stroke-width: 2.2;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
} }
.fab:hover { .fab:hover {
background: #f0fdfa; filter: brightness(1.06);
box-shadow: box-shadow:
0 8px 20px rgba(13, 148, 136, 0.22), 0 10px 26px rgba(13, 148, 136, 0.48),
0 0 0 1px rgba(13, 148, 136, 0.12); inset 0 1px 0 rgba(255, 255, 255, 0.25);
} }
.fab.open { .fab.open {
background: #0d9488; background: linear-gradient(145deg, #115e59 0%, #0d9488 100%);
color: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
border-color: #0d9488;
box-shadow: 0 8px 22px rgba(13, 148, 136, 0.35);
} }
.fab.dragging { .fab.dragging {
cursor: grabbing; cursor: grabbing;
transform: scale(1.04); transform: scale(1.05);
box-shadow: 0 10px 24px rgba(13, 148, 136, 0.3); box-shadow: 0 12px 28px rgba(13, 148, 136, 0.5);
} }
</style> </style>