171 lines
3.5 KiB
CSS
171 lines
3.5 KiB
CSS
/* Base */
|
|
:root{
|
|
--bg:#f6f7fb;
|
|
--panel:#ffffff;
|
|
--text:#222;
|
|
--muted:#6b7280;
|
|
--accent:#3b82f6;
|
|
--radius:12px;
|
|
--gap:16px;
|
|
--shadow:0 4px 12px rgba(0,0,0,.06);
|
|
}
|
|
|
|
*{ box-sizing:border-box; }
|
|
html,body{ height:100%; }
|
|
body{
|
|
margin:0;
|
|
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
|
|
color:var(--text);
|
|
background:var(--bg);
|
|
}
|
|
|
|
/* Header */
|
|
.tete{
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:var(--gap);
|
|
padding:12px 16px;
|
|
background:var(--panel);
|
|
box-shadow:var(--shadow);
|
|
position:sticky;
|
|
top:0;
|
|
z-index:10;
|
|
}
|
|
.tete h1{
|
|
margin:0;
|
|
font-size:20px;
|
|
letter-spacing:.3px;
|
|
}
|
|
.search input{
|
|
width: min(520px);
|
|
padding:10px 12px;
|
|
border:1px solid #e5e7eb;
|
|
border-radius:20px;
|
|
outline:none;
|
|
}
|
|
.search input:focus{
|
|
border-color:var(--accent);
|
|
}
|
|
|
|
/* Layout */
|
|
.layout{
|
|
display:flex;
|
|
min-height: calc(100vh - 60px);
|
|
}
|
|
|
|
/* Sidebar (gauche) */
|
|
.sidebar{
|
|
width:220px;
|
|
padding:16px;
|
|
}
|
|
.menu{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
}
|
|
.menu .btn{
|
|
display:block;
|
|
padding:12px 14px;
|
|
text-decoration:none;
|
|
color:var(--text);
|
|
background:var(--panel);
|
|
border:1px solid #e0e2e6;
|
|
border-radius:var(--radius);
|
|
box-shadow:var(--shadow);
|
|
font-weight:600;
|
|
transition:transform .15s, background .15s;
|
|
}
|
|
.menu .btn:hover{ transform:translateX(4px); }
|
|
.menu .btn.active{
|
|
background:#eef2ff;
|
|
border-color:#c7d2fe;
|
|
}
|
|
|
|
/* Zone contenu (droite) */
|
|
.content{
|
|
flex:1;
|
|
padding:16px;
|
|
}
|
|
|
|
|
|
/* grille 3 colonnes pour grands écrans */
|
|
.dashboard{
|
|
display:grid;
|
|
grid-template-columns: 2fr 1fr 1fr;
|
|
grid-auto-rows: 160px;
|
|
gap:var(--gap);
|
|
}
|
|
|
|
/* Cartes génériques */
|
|
.card{
|
|
background:var(--panel);
|
|
border:1px solid #e5e7eb;
|
|
border-radius:var(--radius);
|
|
box-shadow:var(--shadow);
|
|
padding:12px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
font-weight:600;
|
|
color:var(--muted);
|
|
}
|
|
|
|
/* placement des cartes pour ressembler au croquis */
|
|
.card-line{
|
|
grid-column: 1 / span 2;
|
|
grid-row: span 2;
|
|
}
|
|
.card-small{
|
|
grid-column: 3 / span 1;
|
|
grid-row: span 1;
|
|
}
|
|
|
|
.card-tiles{
|
|
grid-column: 3 / span 1;
|
|
grid-row: span 1;
|
|
}
|
|
.card-bars{
|
|
grid-column: 1 / span 2;
|
|
grid-row: span 2;
|
|
}
|
|
.card-rings{
|
|
grid-column: 3 / span 1;
|
|
grid-row: span 2;
|
|
gap:24px;
|
|
}
|
|
|
|
/* Les deux ronds */
|
|
.ring{
|
|
width:120px; height:120px;
|
|
border:10px solid #eceef1;
|
|
border-radius:50%;
|
|
}
|
|
|
|
|
|
|
|
/* Responsive */
|
|
/* Moyen écran: 2 colonnes */
|
|
@media (max-width: 1100px){
|
|
.dashboard{
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.card-line{ grid-column: 1 / span 2; }
|
|
.card-small{ grid-column:auto; }
|
|
.card-bars{ grid-column: 1 / span 2; }
|
|
.card-rings{ grid-column: 1 / span 2; flex-wrap:wrap; }
|
|
}
|
|
|
|
/* Petit écran*/
|
|
@media (max-width: 750px){
|
|
.layout{ flex-direction:column; }
|
|
.sidebar{ width:auto; padding:12px 16px; }
|
|
.menu{ flex-direction:row; flex-wrap:wrap; }
|
|
.menu .btn{ flex:1 1 140px; }
|
|
.content{ padding:12px; }
|
|
.dashboard{ grid-template-columns: 1fr; }
|
|
.card-line,
|
|
.card-bars,
|
|
.card-rings{ grid-column: 1; }
|
|
.ring{ width:90px; height:90px; }
|
|
} |