diff --git a/css/admin.css b/css/admin.css index 3c7c992..f6a4976 100644 --- a/css/admin.css +++ b/css/admin.css @@ -1,7 +1,117 @@ /* ══════════════════════════════════════════════════════════════ - TABLEAU ADMIN — ALIGNEMENT CORRIGÉ - ══════════════════════════════════════════════════════════════ */ +admin.css — Backoffice Mon Cinéma (Hérite de public.css) +══════════════════════════════════════════════════════════════ */ +/* Conteneur principal plus large pour le tableau */ +.admin-wrap { + max-width: 1200px; + padding-top: 3rem; +} + +/* En-tête */ +.admin-header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border); + padding-bottom: 2rem; + margin-bottom: 2rem; + text-align: left; +} + +.header-titles { + margin: 0; +} + +.header-actions { + display: flex; + gap: 0.8rem; +} + +/* Boutons d'action */ +.btn-action { + background: var(--surface-card); + color: var(--text); + border: 1px solid var(--border); + padding: 0.65rem 1.2rem; + border-radius: 8px; + font-family: inherit; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); +} + +.btn-action:hover { + border-color: var(--gold); + background: var(--gold-dim); +} + +.btn-action.outline.danger:hover { + border-color: #ff6b6b; + background: rgba(255, 107, 107, 0.1); + color: #ff6b6b; +} + +.btn-action.primary { + background: var(--gold); + color: var(--background); + border-color: var(--gold); + font-weight: 600; +} + +.btn-action.primary:hover { + background: var(--gold); + box-shadow: 0 0 15px var(--gold-glow); + transform: translateY(-2px); +} + +.btn-action.danger-solid { + background: #ff4757; + color: #fff; + border-color: #ff4757; +} + +.btn-action.danger-solid:hover { + background: #ff6b81; + box-shadow: 0 0 15px rgba(255, 71, 87, 0.3); +} + +.btn-small { + padding: 0.4rem 0.8rem; + font-size: 0.85rem; +} + +/* Barre d'outils */ +.admin-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} + +.bulk-actions-bar { + background: var(--gold-dim); + border: 1px solid var(--gold); + border-radius: 8px; + padding: 0.8rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; + color: var(--gold); + animation: slideDown 0.3s ease; +} + +@keyframes slideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Tableau */ .table-container { background: var(--surface-card); border: 1px solid var(--border); @@ -14,15 +124,14 @@ width: 100%; border-collapse: collapse; font-size: 0.95rem; - table-layout: fixed; /* Force les largeurs de colonnes */ + table-layout: fixed; } -/* En-têtes */ -.admin-table thead th { +.admin-table th { background: var(--surface); color: var(--muted); - font-weight: 600; - padding: 1rem 0.8rem; + font-weight: 500; + padding: 1.2rem 1rem; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.8rem; @@ -31,52 +140,8 @@ white-space: nowrap; } -/* Largeurs fixes des colonnes */ -.admin-table thead th:nth-child(1), -.admin-table tbody td:nth-child(1) { - width: 50px; - text-align: center; -} - -.admin-table thead th:nth-child(2), -.admin-table tbody td:nth-child(2) { - width: 80px; - text-align: center; -} - -.admin-table thead th:nth-child(3), -.admin-table tbody td:nth-child(3) { - width: 30%; - text-align: left; -} - -.admin-table thead th:nth-child(4), -.admin-table tbody td:nth-child(4) { - width: 80px; - text-align: left; -} - -.admin-table thead th:nth-child(5), -.admin-table tbody td:nth-child(5) { - width: 20%; - text-align: left; -} - -.admin-table thead th:nth-child(6), -.admin-table tbody td:nth-child(6) { - width: 25%; - text-align: left; -} - -.admin-table thead th:nth-child(7), -.admin-table tbody td:nth-child(7) { - width: 100px; - text-align: right; -} - -/* Cellules */ -.admin-table tbody td { - padding: 0.8rem; +.admin-table td { + padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-secondary); @@ -94,13 +159,13 @@ border-bottom: none; } -.admin-table tbody td strong { +.admin-table strong { color: var(--text); font-weight: 600; - font-size: 1rem; + font-size: 1.05rem; } -/* Affiches */ +/* Éléments du tableau */ .thumb { width: 50px; height: 70px; @@ -125,7 +190,6 @@ margin: 0 auto; } -/* Badges */ .badge-format { background: var(--surface); border: 1px solid var(--border); @@ -218,7 +282,7 @@ color: #ff4757; } -/* Checkbox */ +/* Checkbox personnalisées */ input[type="checkbox"] { appearance: none; width: 20px; @@ -242,13 +306,191 @@ input[type="checkbox"]:checked::after { content: '✓'; color: var(--background); position: absolute; - top: 50%; - left: 50%; + top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 900; } +/* Bandeau de sécurité */ +.security-banner { + background: rgba(255, 71, 87, 0.05); + border: 1px solid rgba(255, 71, 87, 0.3); + color: #ff4757; + padding: 1.2rem 1.5rem; + border-radius: 12px; + margin-bottom: 2.5rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.security-banner i { + font-size: 1.3rem; + margin-right: 0.5rem; +} + +.security-banner .sec-text { + display: flex; + align-items: center; +} + +/* Modales (Surcouche) */ +.overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0, 0, 0, 0.85); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); + z-index: 1000; +} + +.overlay.open { + opacity: 1; + visibility: visible; +} + +.modal { + background: var(--surface-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2.5rem; + width: 90%; + position: relative; + transform: translateY(30px) scale(0.95); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + box-shadow: var(--shadow-overlay); + max-height: 90vh; + overflow-y: auto; +} + +.overlay.open .modal { + transform: translateY(0) scale(1); +} + +.modal-close { + position: absolute; + top: 1.5rem; right: 1.5rem; + background: var(--surface); + border: 1px solid var(--border); + color: var(--muted); + width: 32px; height: 32px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + font-size: 1.1rem; + cursor: pointer; + transition: all 0.2s; +} + +.modal-close:hover { + color: var(--text); + border-color: var(--text); +} + +.modal-h { + margin-bottom: 2rem; + color: var(--text); + font-size: 1.4rem; + display: flex; + align-items: center; + gap: 0.6rem; +} + +.modal-h i { + color: var(--gold); + font-size: 1.6rem; +} + +/* Formulaires */ +.form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.2rem; +} + +.form-group { + margin-bottom: 1.2rem; + text-align: left; +} + +.form-group label { + display: block; + margin-bottom: 0.6rem; + font-size: 0.9rem; + color: var(--muted); + font-weight: 500; +} + +.form-group input, +.form-group textarea, +.form-group select { + width: 100%; + padding: 0.8rem 1rem; + background: var(--background); + border: 1px solid var(--border); + color: var(--text); + border-radius: 8px; + font-family: inherit; + font-size: 0.95rem; + transition: all 0.2s; +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: var(--gold); + box-shadow: 0 0 0 3px var(--gold-dim); +} + +.divider { + margin: 2rem 0 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--border); + color: var(--gold); + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; +} + +/* Zone d'import CSV */ +.import-box { + border: 2px dashed var(--border); + border-radius: 12px; + padding: 3rem 2rem; + text-align: center; + background: var(--surface); + transition: all 0.2s; + cursor: pointer; + position: relative; +} + +.import-box:hover { + border-color: var(--gold); + background: var(--gold-dim); +} + +.import-box input[type="file"] { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + opacity: 0; + cursor: pointer; +} + +.import-box i { + font-size: 3rem; + color: var(--gold); + margin-bottom: 1rem; + display: block; +} + /* Demi-étoiles */ .half-star { position: relative; @@ -278,6 +520,21 @@ input[type="checkbox"]:checked::after { ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { + .admin-header { + flex-direction: column; + align-items: flex-start; + gap: 1.5rem; + } + + .header-actions { + width: 100%; + flex-wrap: wrap; + } + + .form-grid { + grid-template-columns: 1fr; + } + .table-container { background: transparent; border: none; @@ -398,17 +655,4 @@ input[type="checkbox"]:checked::after { gap: 0.5rem; padding-top: 0.6rem; } - - .tbl-actions button { - width: 40px; - height: 40px; - font-size: 1.2rem; - border-radius: 8px; - background: var(--surface); - border: 1px solid var(--border); - } - - .tbl-actions button:hover { - background: var(--surface-hover); - } } \ No newline at end of file