diff --git a/dashboard/habits.html b/dashboard/habits.html index 59b3455..383a052 100644 --- a/dashboard/habits.html +++ b/dashboard/habits.html @@ -153,6 +153,36 @@ flex-shrink: 0; } + /* Delete button */ + .habit-delete-btn { + width: 32px; + height: 32px; + border-radius: var(--radius-md); + border: 1px solid var(--border); + background: var(--bg-base); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all var(--transition-fast); + flex-shrink: 0; + } + + .habit-delete-btn:hover { + border-color: var(--text-danger); + background: rgba(239, 68, 68, 0.1); + } + + .habit-delete-btn svg { + width: 16px; + height: 16px; + color: var(--text-muted); + } + + .habit-delete-btn:hover svg { + color: var(--text-danger); + } + /* Habit checkbox */ .habit-checkbox { width: 32px; @@ -359,6 +389,58 @@ opacity: 1; } + /* Delete confirmation modal */ + .confirm-modal { + background: var(--bg-base); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: var(--space-5); + width: 90%; + max-width: 400px; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + } + + .confirm-modal-title { + font-size: var(--text-lg); + font-weight: 600; + margin-bottom: var(--space-3); + color: var(--text-primary); + } + + .confirm-modal-message { + font-size: var(--text-sm); + color: var(--text-secondary); + margin-bottom: var(--space-5); + } + + .confirm-modal-actions { + display: flex; + justify-content: flex-end; + gap: var(--space-2); + } + + .btn-danger { + background: var(--text-danger); + color: white; + border: 1px solid var(--text-danger); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-md); + font-size: var(--text-sm); + font-weight: 500; + cursor: pointer; + transition: all var(--transition-fast); + } + + .btn-danger:hover { + background: #dc2626; + border-color: #dc2626; + } + + .btn-danger:disabled { + opacity: 0.6; + cursor: not-allowed; + } + /* Mobile responsiveness */ @media (max-width: 768px) { .main { @@ -522,6 +604,20 @@ + + +