version
This commit is contained in:
@@ -1,177 +1,198 @@
|
||||
/* --- BASE --- */
|
||||
/* * THEME-MODERN.CSS
|
||||
* Refonte UI/UX - Application Gestion Santé
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primary: #2C3E50;
|
||||
--accent: #08C5D1;
|
||||
--bg-body: #F4F7FB;
|
||||
--primary-color: #0d6efd; /* Bleu médical */
|
||||
--secondary-bg: #f8f9fa;
|
||||
--sidebar-bg: #ffffff;
|
||||
--sidebar-width: 260px;
|
||||
--sidebar-collapsed-width: 80px;
|
||||
--border-radius: 12px;
|
||||
--card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
--transition-speed: 0.3s;
|
||||
}
|
||||
|
||||
body { background: var(--bg-body); color: #444; }
|
||||
/* --- Global Layout --- */
|
||||
body {
|
||||
font-family: 'Inter', 'Poppins', -apple-system, sans-serif;
|
||||
background-color: var(--secondary-bg);
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* --- HEADER FLOATING --- */
|
||||
.main {
|
||||
margin-left: var(--sidebar-width);
|
||||
padding: 20px 30px;
|
||||
transition: all var(--transition-speed);
|
||||
}
|
||||
|
||||
.mode-test-active {
|
||||
border-top: 5px solid orange;
|
||||
}
|
||||
|
||||
/* --- Header & Navigation --- */
|
||||
#header {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 10px 15px;
|
||||
width: calc(100% - 30px);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,0.05);
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
/* --- LE "WAHOO" : MAIN CARD --- */
|
||||
#main {
|
||||
margin: 95px 20px 20px 320px; /* Espace pour la sidebar */
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
min-height: 80vh;
|
||||
padding: 30px;
|
||||
border: 1px solid #edf2f7;
|
||||
/* On évite les ombres lourdes, on mise sur la netteté */
|
||||
.breadcrumb {
|
||||
border-radius: 8px;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* --- SIDEBAR : UNITÉ VISUELLE --- */
|
||||
#sidebar {
|
||||
background: var(--primary);
|
||||
border-right: none;
|
||||
margin: 10px 0 10px 15px;
|
||||
height: calc(100vh - 20px);
|
||||
border-radius: 15px;
|
||||
.initials {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* --- CONTEXTE (Sidenav) --- */
|
||||
.sidenav-context {
|
||||
position: fixed;
|
||||
right: -340px;
|
||||
top: 10px;
|
||||
height: calc(100vh - 20px);
|
||||
width: 320px;
|
||||
background: white;
|
||||
border-radius: 20px 0 0 20px;
|
||||
box-shadow: -10px 0 40px rgba(0,0,0,0.05);
|
||||
z-index: 1060;
|
||||
transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
padding: 25px;
|
||||
}
|
||||
.sidenav-context.active { right: 0; }
|
||||
|
||||
/* --- WIDGETS DE DONNÉES --- */
|
||||
.context-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px; }
|
||||
.context-value-box { padding: 12px; background: #f8fafc; border-radius: 10px; border: 1px solid #eef2f7; display: flex; align-items: center; }
|
||||
.assured-card { cursor: pointer; transition: 0.3s; padding: 10px; border-radius: 12px; }
|
||||
.assured-card:hover { background: #f0f9fa; transform: translateY(-2px); }
|
||||
|
||||
/* Avatar initials */
|
||||
.initials-circle {
|
||||
width: 40px; height: 40px; background: var(--accent); color: white;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 50%; font-weight: bold;
|
||||
}
|
||||
|
||||
/* --- SIDEBAR STRUCTURE --- */
|
||||
/* --- Sidebar (Navigation Latérale) --- */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
width: 260px;
|
||||
z-index: 996;
|
||||
transition: all 0.3s;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
background: #1e293b; /* Bleu Nuit */
|
||||
border-radius: 20px;
|
||||
width: var(--sidebar-width);
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid #eee;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.7);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 12px 15px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link.active, .sidebar-nav .nav-link:hover {
|
||||
background: rgba(8, 197, 209, 0.15);
|
||||
color: #08C5D1;
|
||||
}
|
||||
|
||||
/* --- MAIN TOOLBAR --- */
|
||||
.main-nav-toolbar {
|
||||
background: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #edf2f7;
|
||||
margin-top: -10px; /* Aligné avec le haut du main */
|
||||
}
|
||||
|
||||
.nav-pill-item {
|
||||
padding: 8px 16px;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.nav-pill-item.active {
|
||||
background: #08C5D1;
|
||||
color: white !important;
|
||||
.sidebar-nav .nav-link:hover,
|
||||
.sidebar-nav .nav-link.active-main {
|
||||
background: #f0f7ff;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* --- FIX DES SUPERPOSITIONS --- */
|
||||
#main {
|
||||
margin-left: 300px !important; /* Sidebar (260) + Marge (40) */
|
||||
transition: all 0.3s;
|
||||
.sidebar-nav .nav-link i {
|
||||
font-size: 1.2rem;
|
||||
margin-right: 10px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
#main { margin-left: 20px !important; }
|
||||
.sidebar-nav .nav-link.active-main i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* --- MODALS PREMIUM --- */
|
||||
.bg-light-primary { background-color: #f0f7ff; }
|
||||
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
|
||||
.min-h-200 { min-height: 200px; }
|
||||
|
||||
.photo-frame img {
|
||||
border: 5px solid white;
|
||||
border-radius: 20px;
|
||||
max-width: 100%;
|
||||
/* --- Barre de Contexte (Droite) --- */
|
||||
#barre_laterale_d {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -350px; /* Caché par défaut */
|
||||
width: 320px;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
z-index: 1050;
|
||||
transition: right 0.3s ease-in-out;
|
||||
box-shadow: -5px 0 25px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* --- BOUTON CONTEXTE DANS LE HEADER --- */
|
||||
.btn-context-trigger {
|
||||
background: #f1f5f9;
|
||||
#barre_laterale_d.open {
|
||||
right: 0; /* Apparaît au clic */
|
||||
}
|
||||
|
||||
.btn-info-context {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
border-radius: 50px;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
padding: 8px 16px;
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.btn-context-trigger:hover {
|
||||
background: #e2e8f0;
|
||||
transform: translateY(-1px);
|
||||
/* --- Main Navigation (Scrollmenu) --- */
|
||||
.scrollmenu {
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
padding: 10px 0;
|
||||
background: #fff;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 20px;
|
||||
box-shadow: var(--soft-shadow);
|
||||
}
|
||||
|
||||
/* Pulse effect pour le mode Test */
|
||||
.pulse {
|
||||
.scrollmenu a {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ef4444;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
|
||||
animation: pulse-animation 2s infinite;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
border-radius: 20px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
@keyframes pulse-animation {
|
||||
0% { box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
|
||||
100% { box-shadow: 0 0 0 0px rgba(239, 68, 68, 0); }
|
||||
}
|
||||
.scrollmenu a:hover {
|
||||
background-color: var(--secondary-bg);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* --- Cards & UI Elements --- */
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--soft-shadow);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #08C5D1;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* --- Modals Modernisation --- */
|
||||
.modal-content {
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* --- Tables (DataTables Custom) --- */
|
||||
.table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 8px;
|
||||
}
|
||||
|
||||
.table tr {
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.table td, .table th {
|
||||
padding: 15px;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.table tr td:first-child { border-radius: 10px 0 0 10px; }
|
||||
.table tr td:last-child { border-radius: 0 10px 10px 0; }
|
||||
Reference in New Issue
Block a user