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 13:24:29 +00:00
parent 60b1ed6650
commit dc4f3b1f41
1 changed files with 58 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
style.css
View File

@@ -3,55 +3,47 @@
=========================== */ =========================== */
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 20px; background-color: #1E1E1E; /* fond sombre du site */
background-color: #f0f0f0; color: #F0F0F0; /* texte clair par défaut */
}
/* ===========================
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 */
margin: 0; margin: 0;
padding: 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; text-decoration: none;
color: #ecf0f1; /* texte clair */ padding: 8px 12px;
font-weight: bold;
padding: 10px 15px;
border-radius: 5px; border-radius: 5px;
font-weight: bold;
transition: all 0.3s; transition: all 0.3s;
} }
/* Hover */ nav a:hover {
nav ul li a:hover { background-color: #E0E0E0; /* hover léger */
background-color: #ecf0f1;
color: #2c3e50;
} }
/* Bouton rouge optionnel */ /* ===========================
nav ul li a.btn-red { FOOTER
background-color: #e74c3c; =========================== */
color: white; footer {
background-color: #2A2A2A; /* sombre */
color: #FFFFFF;
text-align: center;
padding: 10px 0;
} }
nav ul li a.btn-red:hover { footer hr {
background-color: #c0392b; border: 1px solid #555;
} }
/* =========================== /* ===========================
@@ -60,87 +52,53 @@ nav ul li a.btn-red:hover {
.dashboard { .dashboard {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 15px; gap: 20px;
margin: 20px;
} }
/* ===========================
WIDGETS
=========================== */
.widget { .widget {
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.2); 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 */ /* Couleurs spécifiques pour widgets */
.climat { background-color: #ADD8E6; } .widget.climat { background-color: #ADD8E6; color: #000000; }
.securite { background-color: #D3D3D3; } .widget.securite { background-color: #D3D3D3; color: #000000; }
.energie { background-color: #FFFACD; } .widget.energie { background-color: #FFFACD; color: #000000; }
.lumiere { background-color: #F5F5DC; } .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 { .icone {
font-size: 30px; font-size: 30px;
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* =========================== /* Hover dynamique sur les widgets */
ALERTES .widget:hover {
=========================== */ filter: brightness(1.1);
.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;
cursor: pointer; cursor: pointer;
} }
.form-box button:hover { /* Alertes */
background-color: #34495e; .alert {
border: 3px solid red;
}
/* Canvas graphique */
canvas {
background-color: #FFFFFF;
border-radius: 10px;
}
/* Titres H1 / H2 */
h1, h2 {
color: #FFFFFF;
margin-left: 20px;
} }