37 lines
2.3 KiB
CSS
37 lines
2.3 KiB
CSS
/* ============================================================
|
|
INTER SANTÉ — LOGIN UI (ONLY)
|
|
============================================================ */
|
|
|
|
/* RESET */
|
|
html, body { height: 100%; margin: 0; overflow: hidden; background: #000; color: #fff; font-family: 'Segoe UI', sans-serif; }
|
|
|
|
.portal-container { position: relative; width: 100vw; height: 100vh; }
|
|
|
|
/* SLIDE AREA (Full Background) */
|
|
.slide-container { position: absolute; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
|
|
.slides img { width: 100%; height: 100%; object-fit: cover; position: absolute; }
|
|
.slides img:not(.active) { top: 0; left: -100%; } /* Position de départ pour ton JS */
|
|
|
|
/* LOGIN AREA (Centered) */
|
|
.login-wrapper { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(0,0,0,0.6); }
|
|
.login-box { width: 400px; padding: 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; }
|
|
|
|
/* TYPO & FORMS */
|
|
.portal-title { color: #e5e5e5; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; }
|
|
.lbl-erp { font-size: 11px; text-transform: uppercase; color: #bbb; font-weight: 600; }
|
|
.input-dark, .select-dark { background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; padding: 12px !important; }
|
|
.btn-login { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; }
|
|
.btn-login:hover { background: #fff; color: #000; }
|
|
.forgot-link { font-size: 11px; color: #888; text-decoration: none; }
|
|
.portal-footer { font-size: 11px; color: #666; }
|
|
|
|
/* TES ANIMATIONS ORIGINALES (Indispensables pour ton JS) */
|
|
@keyframes next1 { from { left: 0% } to { left: -100% } }
|
|
@keyframes next2 { from { left: 100% } to { left: 0% } }
|
|
@keyframes prev1 { from { left: 0% } to { left: 100% } }
|
|
@keyframes prev2 { from { left: -100% } to { left: 0% } }
|
|
|
|
/* INDICATORS */
|
|
.dotsContainer { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 15; }
|
|
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; }
|
|
.dot.active { background: #fff; } |