diff --git a/style.css b/style.css index 9953f79..7271df9 100644 --- a/style.css +++ b/style.css @@ -3,55 +3,47 @@ =========================== */ body { font-family: Arial, sans-serif; - margin: 20px; - background-color: #f0f0f0; -} - -/* =========================== - NAVBAR RECTANGLE -=========================== */ -nav { - background-color: #2c3e50; /* fond rectangle */ - padding: 15px 30px; - border-radius: 10px; /* coins arrondis */ - box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* effet profondeur */ - margin-bottom: 20px; -} - -/* Menu horizontal */ -nav ul { - list-style: none; - display: flex; - justify-content: center; /* centre les éléments */ - gap: 40px; /* espace entre les boutons */ + background-color: #1E1E1E; /* fond sombre du site */ + color: #F0F0F0; /* texte clair par défaut */ margin: 0; padding: 0; } -/* Liens */ -nav ul li a { +/* =========================== + NAVBAR +=========================== */ +nav { + background-color: #FFFFFF; /* fond blanc pour nav */ + padding: 10px 20px; + display: flex; + gap: 10px; +} + +nav a { + color: #000000; /* texte noir */ text-decoration: none; - color: #ecf0f1; /* texte clair */ - font-weight: bold; - padding: 10px 15px; + padding: 8px 12px; border-radius: 5px; + font-weight: bold; transition: all 0.3s; } -/* Hover */ -nav ul li a:hover { - background-color: #ecf0f1; - color: #2c3e50; +nav a:hover { + background-color: #E0E0E0; /* hover léger */ } -/* Bouton rouge optionnel */ -nav ul li a.btn-red { - background-color: #e74c3c; - color: white; +/* =========================== + FOOTER +=========================== */ +footer { + background-color: #2A2A2A; /* sombre */ + color: #FFFFFF; + text-align: center; + padding: 10px 0; } -nav ul li a.btn-red:hover { - background-color: #c0392b; +footer hr { + border: 1px solid #555; } /* =========================== @@ -60,87 +52,53 @@ nav ul li a.btn-red:hover { .dashboard { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 15px; + gap: 20px; + margin: 20px; } -/* =========================== - WIDGETS -=========================== */ .widget { padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); - background-color: white; + font-size: 16px; + background-color: #2A2A2A; /* gris foncé */ + color: #FFFFFF; } -/* Couleurs spécifiques */ -.climat { background-color: #ADD8E6; } -.securite { background-color: #D3D3D3; } -.energie { background-color: #FFFACD; } -.lumiere { background-color: #F5F5DC; } +/* Couleurs spécifiques pour widgets */ +.widget.climat { background-color: #ADD8E6; color: #000000; } +.widget.securite { background-color: #D3D3D3; color: #000000; } +.widget.energie { background-color: #FFFACD; color: #000000; } +.widget.lumiere { background-color: #F5F5DC; color: #000000; } +.widget.graphiques { background-color: #FFFFFF; color: #000000; grid-column: span 4; padding: 40px; } +.widget.alertes { background-color: #FFC0CB; color: #000000; grid-column: span 4; padding: 20px; } -/* Grands blocs */ -.graphiques { grid-column: span 4; background-color: white; } -.alertes { grid-column: span 4; background-color: #FFC0CB; } - -/* =========================== - ICONES -=========================== */ .icone { font-size: 30px; display: block; margin-bottom: 10px; } -/* =========================== - ALERTES -=========================== */ -.alert { - border: 3px solid red; - color: red; -} - -/* =========================== - FORMULAIRE LOGIN -=========================== */ -.form-box { - width: 300px; - margin: 50px auto; - padding: 20px; - background-color: white; - border-radius: 10px; - box-shadow: 0 2px 10px rgba(0,0,0,0.2); - text-align: center; -} - -.form-box h2 { - margin-bottom: 15px; -} - -/* cacher labels si tu veux */ -.form-box label { - display: none; -} - -.form-box input { - width: 90%; - padding: 10px; - margin: 10px 0; - border: 1px solid #ccc; - border-radius: 5px; -} - -.form-box button { - width: 100%; - padding: 10px; - background-color: #2c3e50; - color: white; - border: none; - border-radius: 5px; +/* Hover dynamique sur les widgets */ +.widget:hover { + filter: brightness(1.1); cursor: pointer; } -.form-box button:hover { - background-color: #34495e; +/* Alertes */ +.alert { + border: 3px solid red; +} + +/* Canvas graphique */ +canvas { + background-color: #FFFFFF; + border-radius: 10px; +} + +/* Titres H1 / H2 */ +h1, h2 { + color: #FFFFFF; + margin-left: 20px; } \ No newline at end of file