Culori, fonturi, butoane și componente folosite la Login și Interfață cont. Folosește sanel-tema.css și aceste clase pentru consistență.
Culori
--tema-heading
#0f172a
--tema-body
#111827
--tema-muted
#64748b
--tema-accent
#6d28d9
--tema-accent-light
#7c3aed
--tema-accent-hover
#5b21b6
--tema-accent-soft
rgba(124,58,237,0.12)
--tema-border
#e2e8f0
--tema-success
#10b981
--tema-error
#dc2626
Fișier: sanel-tema.css — variabile în :root
Font
Familie
Plus Jakarta Sans (400, 500, 600, 700, 800)
--tema-font: 'Plus Jakarta Sans', -apple-system, ...
Tipografie
Titlu principal
Titlu pagină
.tema-h1
Titlu mare (login)
Sanel Trans Planner
.tema-h1-lg
Text secundar / lead
Autentifică-te pentru a continua.
.tema-lead
Text mic / muted
Descriere sau notă de subsol.
.tema-small
Label formular
.tema-label
Butoane
Primar (acțiune principală)
.btn-tema .btn-tema-primary
Primar mare (login, CTA)
.btn-tema .btn-tema-primary .btn-tema-lg
Secundar
.btn-tema .btn-tema-secondary
Outline (accent)
.btn-tema .btn-tema-outline
Pericol / Deconectare
.btn-tema .btn-tema-danger
Formulare
.tema-input .tema-input-lg (sau .tema-input pentru dimensiune normală)
.form-control .tema-input
Carduri
Informații cont
Conținut card. Folosește .tema-card pentru container și .tema-card-title pentru titlul secțiunii.
.tema-card | .tema-card-title
Badge
ADMINDISPECERGUEST
.tema-badge
Toast / Mesaje
Salvat cu succes.
.tema-toast .tema-toast-success
Eroare la actualizare.
.tema-toast .tema-toast-error
Cum folosești tema
1. Adaugă în <head>:
<link href="sanel-tema.css" rel="stylesheet">
2. Pentru font peste tot pe pagină:
body { font-family: var(--tema-font); }
3. Pentru fundal ca la Login/Cont:
body { background: var(--tema-bg); }
/* sau pentru login: background: var(--tema-bg-login); */
4. Folosește clasele din această pagină (.btn-tema-primary, .tema-card, .tema-input, etc.) sau variabilele CSS (--tema-accent, --tema-heading, etc.) direct în stiluri custom.