From 35d6d27a7e9bc741e6b3648b6573369411fd7861 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Thu, 6 Feb 2025 02:46:23 -0800 Subject: add image pop-up modal --- static/styles.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) (limited to 'static/styles.css') diff --git a/static/styles.css b/static/styles.css index a0cfef2..6f2d5f3 100644 --- a/static/styles.css +++ b/static/styles.css @@ -242,4 +242,70 @@ img.draggable.dragged, .button:active { font-size: small; color: #ccc; padding: 0px 10px; -} \ No newline at end of file +} + +.modal { + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + display: none; + align-items: center; + justify-content: center; +} + +.modal-content { + background-color: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); + width: 90%; + max-width: 800px; + text-align: center; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.close:hover { + color: black; +} + +#modal-img { + max-width: 100%; + max-height: 40vh; + border-radius: 5px; + margin-bottom: 10px; +} + +#modal-description { + width: 100%; + height: 25vh; + padding: 10px; + margin-top: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 14px; +} + +#modal-save { + background: #4CAF50; + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + margin-top: 10px; + border-radius: 5px; +} + +#modal-save:hover { + background: #45a049; +} -- cgit v1.2.3