diff --git a/frontend/css/app.css b/frontend/css/app.css index 7546367..bd1fb56 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -990,7 +990,32 @@ a { color: var(--primary); text-decoration: none; } } .popup-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .popup-header h4 { flex: 1; font-size: 15px; font-weight: 500; } -.popup-action, .popup-close { width: 32px; height: 32px; font-size: 16px; } +.popup-action, .popup-close { + width: 34px; height: 34px; + font-size: 16px; + border-radius: 50%; + color: var(--text-2); + transition: + background var(--transition), + color var(--transition), + transform .1s ease, + box-shadow .15s ease; +} +.popup-action:hover { + background: rgba(66,133,244,.15); + background: color-mix(in srgb, var(--primary) 16%, transparent); + color: var(--primary); + box-shadow: 0 2px 8px rgba(66,133,244,.18); + box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent); +} +.popup-close:hover { + background: rgba(234,67,53,.15); + background: color-mix(in srgb, var(--accent) 16%, transparent); + color: var(--accent); +} +.popup-action svg, .popup-close svg { width: 16px; height: 16px; } +.popup-close { font-size: 20px; } +.popup-action:active, .popup-close:active { transform: scale(.92); } .popup-body { padding: 12px 16px; } .popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; } diff --git a/frontend/index.html b/frontend/index.html index be466cd..dce93f4 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ -