diff --git a/css/admin.css b/css/admin.css index 7d8a0e6..756014c 100644 --- a/css/admin.css +++ b/css/admin.css @@ -112,39 +112,95 @@ input[type="checkbox"]:checked::after { content: '✓'; color: var(--background) .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--gold); } .divider { margin: 1.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border); color: var(--gold); font-size: 0.8rem; text-transform: uppercase; font-weight: 700; } -.import-box { border: 2px dashed var(--border); border-radius: 8px; padding: 2rem 1rem; text-align: center; background: var(--surface); cursor: pointer; transition: all 0.2s; } -.import-box:hover { border-color: var(--gold); } -.import-box i { font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; display: block; } - .security-banner { background: rgba(255, 71, 87, 0.1); border: 1px solid rgba(255, 71, 87, 0.3); color: #ff4757; padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; } .admin-table tbody td { padding: 0.6rem 0.5rem; } .thumb, .thumb-ph { width: 45px; height: 65px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; margin: 0 auto; } .thumb-ph { background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.5rem; } -.import-box p { margin: 0.3rem 0; } -.import-box p strong { color: var(--text); font-size: 1rem; } - -/* Correction affichage zone import */ -#import-box, .import-box { - display: block; /*<-- Ligne clé pour réparer la bordure */ - width: 100%; - box-sizing: border-box; - border: 2px dashed var(--border); - border-radius: 8px; - padding: 2rem 1rem; - text-align: center; - background: var(--surface); - cursor: pointer; - transition: all 0.2s; - margin-top: 1rem; -} -#import-box:hover, .import-box:hover { border-color: var(--gold); background: var(--surface-hover); } -#import-box i, .import-box i { font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; display: block; } .modal h3 { white-space: nowrap; overflow: visible; text-overflow: clip; } +/* ══════════════════════════════════════════════════════════════ + ZONE D'IMPORT CSV (Style Unifié et Corrigé) + ══════════════════════════════════════════════════════════════ */ +.import-section { + margin: 1.5rem 0; + padding: 1.5rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 12px; +} -.import-section { margin: 1rem 0; border: 2px dashed var(--border); border-radius: 8px; padding: 1rem; transition: 0.3s; background: var(--bg-alt); } +.import-section h3 { + margin: 0 0 0.5rem 0; + font-size: 1.1rem; + color: var(--text); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.import-section h3 i { + color: var(--gold); +} + +.import-section > p { + margin: 0 0 1.5rem 0; + color: var(--muted); + font-size: 0.9rem; +} + +/* 🔥 LA ZONE DE DROP / CLIC (CORRIGÉE) */ +.import-box { + display: flex; + flex-direction: column; /* 🔥 CLÉ : Force le contenu à être vertical (icône en haut, texte en bas) */ + align-items: center; + justify-content: center; + text-align: center; + + width: 100%; + box-sizing: border-box; + padding: 2.5rem 1.5rem; + margin-top: 0.5rem; + + background: var(--background); + border: 2px dashed var(--border); /* Bordure pointillée restaurée */ + border-radius: 12px; + cursor: pointer; + transition: all 0.3s ease; +} + +.import-box:hover { + border-color: var(--gold); + background: var(--surface-hover); + transform: translateY(-2px); /* Léger effet de survol */ +} + +.import-box i { + font-size: 3rem; + color: var(--gold); + margin-bottom: 1rem; + display: block; +} + +.import-box p { + margin: 0.2rem 0; + color: var(--muted); + font-size: 0.9rem; + line-height: 1.4; +} + +.import-box p strong { + color: var(--text); + font-size: 1rem; + display: block; + margin-bottom: 0.3rem; +} + +/* Cache l'input file natif pour ne pas casser le layout */ +.import-box input[type="file"] { + display: none; +} .progress-container { background: var(--border); border-radius: 10px; height: 12px; width: 100%; margin: 1.5rem 0; overflow: hidden; } .progress-bar { height: 100%; background: var(--gold); width: 0%; transition: width 0.4s ease; border-radius: 10px; }