rubisalpha/smart-house---final-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualiser style.css

Browse Source
This commit is contained in:
rubisalpha
2026-03-26 15:49:51 +00:00
parent 632d53bf12
commit 3a55eb5d81
1 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
style.css
View File

@@ -4,8 +4,8 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 20px; margin: 20px;
background-color: #1c1c1c; /* fond noir sombre */ background-color: #1e1e1e; /* fond sombre pour tout le site */
color: #ecf0f1; /* texte clair pour contraste */ color: #f0f0f0; /* texte clair */
} }
/* =========================== /* ===========================
@@ -14,8 +14,8 @@ body {
nav { nav {
background-color: #2c3e50; /* fond rectangle */ background-color: #2c3e50; /* fond rectangle */
padding: 15px 30px; padding: 15px 30px;
border-radius: 10px; /* coins arrondis */ border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.4); /* effet profondeur */ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -23,8 +23,8 @@ nav {
nav ul { nav ul {
list-style: none; list-style: none;
display: flex; display: flex;
justify-content: center; /* centre les éléments */ justify-content: center;
gap: 40px; /* espace entre les boutons */ gap: 40px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -32,7 +32,7 @@ nav ul {
/* Liens */ /* Liens */
nav ul li a { nav ul li a {
text-decoration: none; text-decoration: none;
color: #ecf0f1; /* texte clair */ color: #ecf0f1;
font-weight: bold; font-weight: bold;
padding: 10px 15px; padding: 10px 15px;
border-radius: 5px; border-radius: 5px;
@@ -71,26 +71,20 @@ nav ul li a.btn-red:hover {
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.4); box-shadow: 0 2px 5px rgba(0,0,0,0.2);
background-color: #2c3e50; /* fond sombre pour widget */ background-color: #2c3e50; /* widget sombre */
color: #ecf0f1; /* texte clair */ color: #fff; /* texte clair */
transition: all 0.3s;
} }
/* Hover des widgets */ /* Couleurs spécifiques */
.widget:hover { .climat { background-color: #34495e; }
box-shadow: 0 4px 15px rgba(0,0,0,0.6); .securite { background-color: #7f8c8d; }
} .energie { background-color: #f39c12; }
.lumiere { background-color: #8e44ad; }
/* Couleurs spécifiques pour chaque type de widget */
.climat { background-color: #2980b9; } /* bleu sombre */
.securite { background-color: #7f8c8d; } /* gris sombre */
.energie { background-color: #f39c12; } /* orange */
.lumiere { background-color: #f1c40f; } /* jaune vif */
/* Grands blocs */ /* Grands blocs */
.graphiques { grid-column: span 4; background-color: #34495e; } .graphiques { grid-column: span 4; background-color: #2c3e50; }
.alertes { grid-column: span 4; background-color: #e74c3c; color: white; } .alertes { grid-column: span 4; background-color: #c0392b; color: #fff; }
/* =========================== /* ===========================
ICONES ICONES
@@ -110,7 +104,7 @@ nav ul li a.btn-red:hover {
} }
/* =========================== /* ===========================
FORMULAIRE LOGIN FORMULAIRE LOGIN / REGISTER
=========================== */ =========================== */
.form-box { .form-box {
width: 300px; width: 300px;
@@ -118,33 +112,32 @@ nav ul li a.btn-red:hover {
padding: 20px; padding: 20px;
background-color: #2c3e50; background-color: #2c3e50;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.4); box-shadow: 0 2px 10px rgba(0,0,0,0.2);
text-align: center; text-align: center;
color: #ecf0f1; color: #fff;
} }
.form-box h2 { .form-box h2 {
margin-bottom: 15px; margin-bottom: 15px;
} }
/* cacher labels mais accessibles */
.form-box label { .form-box label {
display: none; /* optionnel */ display: none;
} }
.form-box input { .form-box input {
width: 90%; width: 90%;
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
border: 1px solid #7f8c8d; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
background-color: #34495e;
color: #ecf0f1;
} }
.form-box button { .form-box button {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background-color: #e67e22; background-color: #34495e;
color: white; color: white;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@@ -152,5 +145,19 @@ nav ul li a.btn-red:hover {
} }
.form-box button:hover { .form-box button:hover {
background-color: #d35400; background-color: #1abc9c;
}
/* ===========================
ACCESSIBILITÉ LABELS
=========================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
} }