Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves resize handle appearance

Browse source 
Enhances the visual design of the resize handle for calendar events, making it more prominent and user-friendly.

- Updates the handle's styling with a darker background, increased size, and refined shadow.
- Replaces grip dots with grip lines for a cleaner look.
This commit is contained in:
Janus C. H. Knudsen 2025-10-07 17:21:23 +02:00
parent 70dce9fd59
commit 3982e2f25f
1 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
wwwroot/css/calendar-events-css.css
View file

@ -73,34 +73,34 @@ swp-day-columns swp-event:hover {
/* Resize handle indicator - created by JavaScript */ /* Resize handle indicator - created by JavaScript */
swp-resize-indicator { swp-resize-indicator {
position: absolute; position: absolute;
bottom: -3px; bottom: -4px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 40px; width: 50px;
height: 6px; height: 8px;
background: var(--color-primary); background: #6b7280;
border-radius: 3px; border-radius: 4px;
pointer-events: none; pointer-events: none;
z-index: 30; z-index: 30;
opacity: 0; opacity: 0;
animation: fadeIn 0.3s ease forwards; animation: fadeIn 0.2s ease forwards;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
} }
/* Grip dots on handle */ /* Grip lines on handle */
swp-resize-indicator::before { swp-resize-indicator::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 12px; width: 20px;
height: 2px; height: 2px;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.8);
border-radius: 1px; border-radius: 1px;
box-shadow: box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.8),
-5px 0 0 rgba(255, 255, 255, 0.7), 0 2px 0 rgba(255, 255, 255, 0.8);
5px 0 0 rgba(255, 255, 255, 0.7);
} }
@keyframes fadeIn { @keyframes fadeIn {