Edited completed Task + Delte HTML Windows
This commit is contained in:
Honey committed
1 parent
e5e0703106
commit
def7d22294
3 files changed
+504
-122
No files matched your search
+118
-38
@@ -188,6 +188,94 @@ h1 {
|
||||
.context-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
|
||||
.context-menu-item.danger:hover { background: var(--rose-soft); color: var(--rose); }
|
||||
|
||||
/* ─── Confirm Dialog ─── */
|
||||
.confirm-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-overlay.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.confirm-dialog {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-radius: 16px;
|
||||
padding: 28px 32px 22px;
|
||||
min-width: 300px;
|
||||
max-width: 360px;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
animation: confirmIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes confirmIn {
|
||||
from { opacity: 0; transform: scale(0.92) translateY(8px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
.confirm-icon {
|
||||
font-size: 2.2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.confirm-message {
|
||||
font-size: 0.95em;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.confirm-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-confirm-cancel,
|
||||
.btn-confirm-delete {
|
||||
padding: 8px 22px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.88em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-confirm-cancel {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-confirm-cancel:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-confirm-delete {
|
||||
background: var(--rose);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
|
||||
}
|
||||
|
||||
.btn-confirm-delete:hover {
|
||||
background: #be123c;
|
||||
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
|
||||
}
|
||||
|
||||
/* ─── Modal ─── */
|
||||
.modal {
|
||||
display: none;
|
||||
@@ -502,11 +590,6 @@ button {
|
||||
.task-card:active { cursor: grabbing; }
|
||||
.task-card.dragging { opacity: 0.4; }
|
||||
|
||||
.task-card.drag-over {
|
||||
border-color: var(--accent);
|
||||
background: rgba(99, 102, 241, 0.08);
|
||||
}
|
||||
|
||||
.task-card.archived-card {
|
||||
cursor: default;
|
||||
}
|
||||
@@ -873,48 +956,46 @@ button {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.celebration-overlay {
|
||||
/* ─── Drop Indicator ─── */
|
||||
.drop-indicator {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
height: 3px;
|
||||
background: var(--accent);
|
||||
border-radius: 2px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
z-index: 9998;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: celebFade 3s ease forwards;
|
||||
box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
|
||||
transition: top 0.08s ease;
|
||||
}
|
||||
|
||||
.celebration-text {
|
||||
font-size: 3em;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #6366f1, #a78bfa, #f59e0b, #10b981);
|
||||
background-size: 300% 300%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: celebPulse 2s ease, celebGradient 2s ease infinite;
|
||||
filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.3));
|
||||
.drop-indicator::before,
|
||||
.drop-indicator::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes celebFade {
|
||||
0% { opacity: 0; }
|
||||
15% { opacity: 1; }
|
||||
70% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
.drop-indicator::before { left: -5px; }
|
||||
.drop-indicator::after { right: -5px; }
|
||||
|
||||
.drop-indicator-subtask {
|
||||
height: 2px;
|
||||
box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
@keyframes celebPulse {
|
||||
0% { transform: scale(0.3); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
.drop-indicator-subtask::before,
|
||||
.drop-indicator-subtask::after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
@keyframes celebGradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
.drop-indicator-subtask::before { left: -4px; }
|
||||
.drop-indicator-subtask::after { right: -4px; }
|
||||
|
||||
.task-card.just-completed {
|
||||
animation: completeFlash 0.6s ease;
|
||||
@@ -939,5 +1020,4 @@ button {
|
||||
.form-row-2 { grid-template-columns: 1fr; }
|
||||
.task-card { padding: 10px 12px; }
|
||||
.greeting-banner .greeting-text { font-size: 1em; }
|
||||
.celebration-text { font-size: 2em; }
|
||||
}
|
||||
Reference in new issue
Block a user