Add delete confirmation modal for recipes with updated styling and functionality. Implement modal content generation, event handling for delete and cancel actions, and integrate with modal manager for improved user experience. Enhance CSS for delete preview image display.

This commit is contained in:
Will Miao
2025-03-16 18:17:19 +08:00
parent d7c643ee9b
commit 22085e5174
2 changed files with 77 additions and 31 deletions

View File

@@ -443,4 +443,43 @@ input:checked + .toggle-slider:before {
.nsfw-blur:hover {
filter: blur(8px);
}
/* Add styles for delete preview image */
.delete-preview {
max-width: 150px;
margin: 0 auto var(--space-2);
overflow: hidden;
}
.delete-preview img {
width: 100%;
height: auto;
max-height: 150px;
object-fit: contain;
border-radius: var(--border-radius-sm);
}
.delete-info {
text-align: center;
}
.delete-info h3 {
margin-bottom: var(--space-1);
word-break: break-word;
}
.delete-info p {
margin: var(--space-1) 0;
font-size: 0.9em;
opacity: 0.8;
}
.delete-note {
font-size: 0.85em;
color: var(--text-color);
opacity: 0.7;
font-style: italic;
margin-top: var(--space-1);
text-align: center;
}