diff --git a/public/jobs.html b/public/jobs.html index 7c79e07..3643a21 100644 --- a/public/jobs.html +++ b/public/jobs.html @@ -180,7 +180,7 @@ .job-name { font-weight: 600; - color: var(--gruvbox-fg0; + color: var(--gruvbox-fg0); } .job-status { @@ -333,6 +333,93 @@ font-size: 0.9rem; } + /* Modal Styles */ + .modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(40, 40, 40, 0.8); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + backdrop-filter: blur(5px); + } + + .modal-content { + background: var(--gruvbox-bg1); + border-radius: 15px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); + max-width: 500px; + width: 90%; + max-height: 90vh; + overflow-y: auto; + border: 1px solid var(--gruvbox-bg3); + } + + .popup-content { + max-width: 400px; + width: 95%; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + border-bottom: 1px solid var(--gruvbox-bg3); + } + + .modal-header h2 { + color: var(--gruvbox-orange); + margin: 0; + font-size: 1.25rem; + font-weight: 600; + } + + .modal-close { + background: none; + border: none; + color: var(--gruvbox-fg2); + font-size: 1.5rem; + cursor: pointer; + padding: 0.25rem; + border-radius: 4px; + transition: all 0.3s ease; + } + + .modal-close:hover { + background: var(--gruvbox-bg3); + color: var(--gruvbox-fg0); + } + + #job-form { + padding: 1.5rem; + } + + #job-form .form-group { + margin-bottom: 1.25rem; + } + + #job-form .form-group:last-child { + margin-bottom: 0; + } + + .modal-actions { + display: flex; + gap: 1rem; + justify-content: flex-end; + padding: 1.5rem; + border-top: 1px solid var(--gruvbox-bg3); + margin-top: 1.5rem; + } + @media (max-width: 768px) { .main-content { padding: 1rem; @@ -390,13 +477,6 @@

All Jobs

-
@@ -412,15 +492,8 @@