diff --git a/public/assets/css/style.css b/public/assets/css/style.css index bad4d6c..0ee2673 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -262,62 +262,134 @@ body { .drag-item:active { cursor: grabbing; +} - .drag-item:hover { - border-color: var(--primary); - } +.drag-item:hover { + border-color: var(--primary); +} - .drag-item.dragging { - opacity: 0.5; - background: #f1f5f9; - } +.drag-item.dragging { + opacity: 0.5; + background: #f1f5f9; +} - .drag-handle { - margin-right: 1rem; - color: var(--text-light); - } +.drag-handle { + margin-right: 1rem; + color: var(--text-light); +} - /* Alerts */ - .alert { +/* Alerts */ +.alert { + padding: 1rem; + border-radius: 0.5rem; + margin-bottom: 1.5rem; +} + +.alert-success { + background: #dcfce7; + color: #166534; + border: 1px solid #bbf7d0; +} + +.alert-error { + background: #fee2e2; + color: #991b1b; + border: 1px solid #fecaca; +} + +/* Utilities */ +.text-center { + text-align: center; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.flex { + display: flex; + gap: 0.5rem; +} + +.justify-end { + justify-content: flex-end; +} + +/* Media Queries */ +@media (max-width: 768px) { + .navbar { + flex-direction: column; + gap: 1rem; padding: 1rem; - border-radius: 0.5rem; - margin-bottom: 1.5rem; } - .alert-success { - background: #dcfce7; - color: #166534; - border: 1px solid #bbf7d0; + .nav-menu { + flex-direction: column; + width: 100%; + gap: 0.75rem; + align-items: center; } - .alert-error { - background: #fee2e2; - color: #991b1b; - border: 1px solid #fecaca; + .nav-menu div { + border-left: none !important; + border-top: 1px solid var(--border); + padding-top: 1rem; + padding-left: 0 !important; + margin-left: 0 !important; + width: 100%; + justify-content: center; } - /* Utilities */ - .text-center { - text-align: center; + .container { + margin: 1rem auto; } - .mt-2 { - margin-top: 0.5rem; + .card-header { + flex-direction: column; + align-items: flex-start; + gap: 1rem; } - .mt-4 { - margin-top: 1rem; + .card-header .btn { + width: 100%; } - .mb-4 { - margin-bottom: 1rem; + .auth-card { + margin: 1rem; } - .flex { - display: flex; - gap: 0.5rem; + .table th, + .table td { + padding: 0.75rem 0.5rem; + font-size: 0.875rem; } - .justify-end { - justify-content: flex-end; - } \ No newline at end of file + /* Modal responsiveness */ + .modal-content { + margin: 1rem; + padding: 1.5rem; + } +} + +@media (max-width: 480px) { + .card { + padding: 1rem; + } + + .auth-title { + font-size: 1.25rem; + } + + .btn { + padding: 0.6rem 1rem; + font-size: 0.9rem; + } +} \ No newline at end of file