diff --git a/css/admin.css b/css/admin.css index 8ffe5b0..818b559 100644 --- a/css/admin.css +++ b/css/admin.css @@ -1,59 +1,76 @@ /* ══════════════════════════════════════════════════════════════ -admin.css — Backoffice Mon Cinéma (Hérite de public.css) -══════════════════════════════════════════════════════════════ */ + admin.css — Backoffice Mon Cinéma (Version Améliorée) + ═══════════════════════════════════════════════════════════════ */ -/* Conteneur principal plus large pour le tableau */ +/* Conteneur principal */ .admin-wrap { - max-width: 1200px; - padding-top: 3rem; + max-width: 1400px; + padding-top: 2rem; } -/* En-tête */ +/* ══════════════════════════════════════════════════════════════ + EN-TÊTE ADMIN + ═══════════════════════════════════════════════════════════════ */ + .admin-header { display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid var(--border); - padding-bottom: 2rem; + padding: 1.5rem 0; margin-bottom: 2rem; - text-align: left; + border-bottom: 1px solid var(--border); } -.header-titles { +.header-titles h1 { + font-family: 'Playfair Display', Georgia, serif; + font-size: 2rem; + font-weight: 700; + margin-bottom: 0.3rem; + color: var(--text); +} + +.header-titles h1 span { + color: var(--gold); +} + +.header-titles p { + color: var(--muted); + font-size: 0.9rem; margin: 0; } .header-actions { display: flex; - gap: 0.8rem; + gap: 0.6rem; + align-items: center; } -/* Boutons d'action */ +/* ══════════════════════════════════════════════════════════════ + BOUTONS D'ACTION + ═══════════════════════════════════════════════════════════════ */ + .btn-action { background: var(--surface-card); color: var(--text); border: 1px solid var(--border); - padding: 0.65rem 1.2rem; + padding: 0.6rem 1rem; border-radius: 8px; font-family: inherit; - font-size: 0.9rem; + font-size: 0.85rem; 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); + text-decoration: none; } .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; + color: var(--gold); + transform: translateY(-1px); } .btn-action.primary { @@ -65,7 +82,7 @@ admin.css — Backoffice Mon Cinéma (Hérite de public.css) .btn-action.primary:hover { background: var(--gold); - box-shadow: 0 0 15px var(--gold-glow); + box-shadow: 0 4px 15px var(--gold-glow); transform: translateY(-2px); } @@ -77,22 +94,116 @@ admin.css — Backoffice Mon Cinéma (Hérite de public.css) .btn-action.danger-solid:hover { background: #ff6b81; - box-shadow: 0 0 15px rgba(255, 71, 87, 0.3); + box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3); } .btn-small { padding: 0.4rem 0.8rem; - font-size: 0.85rem; + font-size: 0.8rem; } -/* Barre d'outils */ +/* ══════════════════════════════════════════════════════════════ + ONGLETS + ═══════════════════════════════════════════════════════════════ */ + +.pub-tabs-container { + display: flex; + justify-content: center; + margin-bottom: 2rem; +} + +.pub-tabs { + background-color: var(--surface); + border: 1px solid var(--border); + padding: 0.4rem; + border-radius: 30px; + display: inline-flex; + gap: 0.4rem; +} + +.tab-btn { + background: none; + border: none; + color: #d4d4de; + font-family: 'DM Sans', sans-serif; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + padding: 0.65rem 1.6rem; + border-radius: 25px; + display: flex; + align-items: center; + gap: 0.6rem; + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); +} + +.tab-btn i { + font-size: 1.15rem; +} + +.tab-btn:hover { + color: var(--text); + background-color: var(--surface-hover); +} + +.tab-btn.active { + color: var(--background); + background-color: var(--gold); + font-weight: 600; + box-shadow: 0 4px 15px var(--gold-glow); +} + +/* ═════════════════════════════════════════════════════════════ + BARRE D'OUTILS & FILTRES + ═══════════════════════════════════════════════════════════════ */ + .admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; + flex-wrap: wrap; + gap: 1rem; } +.admin-filters { + margin-bottom: 1.5rem; +} + +.search-box { + position: relative; + max-width: 400px; +} + +.search-box input { + width: 100%; + padding: 0.75rem 1rem 0.75rem 2.8rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text); + font-family: inherit; + font-size: 0.9rem; + transition: all 0.2s; +} + +.search-box input:focus { + outline: none; + border-color: var(--gold); + box-shadow: 0 0 0 3px var(--gold-dim); +} + +.search-box i { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--muted); + font-size: 1.1rem; + pointer-events: none; +} + +/* Barre bulk actions */ .bulk-actions-bar { background: var(--gold-dim); border: 1px solid var(--gold); @@ -111,13 +222,16 @@ admin.css — Backoffice Mon Cinéma (Hérite de public.css) to { opacity: 1; transform: translateY(0); } } -/* Tableau */ +/* ══════════════════════════════════════════════════════════════ + TABLEAU + ═══════════════════════════════════════════════════════════════ */ + .table-container { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; - box-shadow: var(--shadow-cinematic); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .admin-table { @@ -127,24 +241,63 @@ admin.css — Backoffice Mon Cinéma (Hérite de public.css) table-layout: fixed; } -.admin-table th { +.admin-table thead th { background: var(--surface); color: var(--muted); - font-weight: 500; - padding: 1.2rem 1rem; + font-weight: 600; + padding: 1rem 0.8rem; border-bottom: 1px solid var(--border); text-align: left; - font-size: 0.8rem; + font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } -.admin-table td { - padding: 0.8rem 1rem; +.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%; +} + +.admin-table thead th:nth-child(4), +.admin-table tbody td:nth-child(4) { + width: 80px; +} + +.admin-table thead th:nth-child(5), +.admin-table tbody td:nth-child(5) { + width: 20%; +} + +.admin-table thead th:nth-child(6), +.admin-table tbody td:nth-child(6) { + width: 25%; +} + +.admin-table thead th:nth-child(7), +.admin-table tbody td:nth-child(7) { + width: 100px; + text-align: right; +} + +.admin-table tbody td { + padding: 0.9rem 0.8rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-secondary); + transition: background 0.2s; } .admin-table tbody tr { @@ -159,29 +312,37 @@ admin.css — Backoffice Mon Cinéma (Hérite de public.css) border-bottom: none; } -.admin-table strong { +.admin-table tbody td strong { color: var(--text); font-weight: 600; - font-size: 1.05rem; + font-size: 1rem; } -/* Éléments du tableau */ +/* ══════════════════════════════════════════════════════════════ + ÉLÉMENTS DU TABLEAU + ══════════════════════════════════════════════════════════════ */ + .thumb { width: 50px; height: 70px; object-fit: cover; - border-radius: 4px; + border-radius: 6px; border: 1px solid var(--border); box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: block; margin: 0 auto; + transition: transform 0.3s; +} + +.thumb:hover { + transform: scale(1.05); } .thumb-ph { width: 50px; height: 70px; background: var(--surface); - border-radius: 4px; + border-radius: 6px; display: flex; align-items: center; justify-content: center; @@ -312,7 +473,90 @@ input[type="checkbox"]:checked::after { font-weight: 900; } -/* Bandeau de sécurité */ +/* Demi-étoiles */ +.half-star { + position: relative; + display: inline-block; + color: #ffffff; + opacity: 0.45; + font-size: 0.95rem; +} + +.half-star::before { + content: '★'; + position: absolute; + left: 0; + width: 50%; + overflow: hidden; + color: var(--gold); + opacity: 1; +} + +.stars-muted { + color: #ffffff; + opacity: 0.35; +} + +/* ══════════════════════════════════════════════════════════════ + PAGINATION + ═══════════════════════════════════════════════════════════════ */ + +.pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 0.4rem; + margin-top: 2rem; + padding: 1rem 0; + flex-wrap: wrap; +} + +.pagination button { + background: var(--surface); + border: 1px solid var(--border); + color: var(--text-secondary); + min-width: 38px; + height: 38px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.25s; + font-weight: 500; + font-size: 0.9rem; +} + +.pagination button:hover:not(:disabled):not(.active) { + border-color: var(--gold); + color: var(--gold); + background: var(--gold-dim); +} + +.pagination button.active { + background: var(--gold); + color: var(--background); + border-color: var(--gold); + font-weight: 600; + box-shadow: 0 4px 10px var(--gold-glow); +} + +.pagination button:disabled { + opacity: 0.3; + cursor: not-allowed; +} + +.pagination-info { + color: var(--muted); + font-size: 0.9rem; + margin: 0 1rem; + font-weight: 500; +} + +/* ══════════════════════════════════════════════════════════════ + BANDEAU DE SÉCURITÉ + ═══════════════════════════════════════════════════════════════ */ + .security-banner { background: rgba(255, 71, 87, 0.05); border: 1px solid rgba(255, 71, 87, 0.3); @@ -335,7 +579,10 @@ input[type="checkbox"]:checked::after { align-items: center; } -/* Modales (Surcouche) */ +/* ══════════════════════════════════════════════════════════════ + MODALES + ═══════════════════════════════════════════════════════════════ */ + .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; @@ -361,10 +608,11 @@ input[type="checkbox"]:checked::after { border-radius: 16px; padding: 2.5rem; width: 90%; + max-width: 600px; 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); + box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9); max-height: 90vh; overflow-y: auto; } @@ -406,7 +654,10 @@ input[type="checkbox"]:checked::after { font-size: 1.6rem; } -/* Formulaires */ +/* ═════════════════════════════════════════════════════════════ + FORMULAIRES + ═══════════════════════════════════════════════════════════════ */ + .form-grid { display: grid; grid-template-columns: 1fr 1fr; @@ -459,7 +710,10 @@ input[type="checkbox"]:checked::after { font-weight: 600; } -/* Zone d'import CSV */ +/* ══════════════════════════════════════════════════════════════ + ZONE D'IMPORT CSV + ══════════════════════════════════════════════════════════════ */ + .import-box { border: 2px dashed var(--border); border-radius: 12px; @@ -491,66 +745,21 @@ input[type="checkbox"]:checked::after { display: block; } -/* Demi-étoiles */ -.half-star { - position: relative; - display: inline-block; - color: #ffffff; - opacity: 0.45; - font-size: 0.95rem; +/* ══════════════════════════════════════════════════════════════ + BARRE DE PROGRESSION + ═══════════════════════════════════════════════════════════════ */ + +#progress-overlay .modal { + max-width: 500px; + text-align: center; } -.half-star::before { - content: '★'; - position: absolute; - left: 0; - width: 50%; - overflow: hidden; - color: var(--gold); - opacity: 1; -} - -.stars-muted { - color: #ffffff; - opacity: 0.35; -} - -/* Barre de recherche admin */ -.admin-filters { - margin-bottom: 1.5rem; -} - -.search-box { - position: relative; - max-width: 400px; -} - -.search-box input { - width: 100%; - padding: 0.75rem 1rem 0.75rem 2.8rem; - background: var(--surface); - border: 1px solid var(--border); - border-radius: 8px; - color: var(--text); - font-family: inherit; - font-size: 0.9rem; - transition: all 0.2s; -} - -.search-box input:focus { - outline: none; - border-color: var(--gold); - box-shadow: 0 0 0 3px var(--gold-dim); -} - -.search-box i { - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - color: var(--muted); - font-size: 1.1rem; - pointer-events: none; +#progress-bar { + width: 0%; + height: 12px; + background: var(--gold); + border-radius: 6px; + transition: width 0.3s ease; } /* ══════════════════════════════════════════════════════════════ @@ -693,7 +902,7 @@ input[type="checkbox"]:checked::after { gap: 0.5rem; padding-top: 0.6rem; } - + .search-box { max-width: 100%; }