val
This commit is contained in:
parent
64338db79c
commit
befee4a374
|
|
@ -1,6 +1,7 @@
|
|||
/* =============================
|
||||
INTER SANTÉ — THEME MODERN
|
||||
SaaS Premium UI v2025
|
||||
INTER SANTÉ — THEME NEUTRAL PRO
|
||||
SaaS Minimal UI v2025
|
||||
Palette : Charcoal · Gris · Blanc
|
||||
============================= */
|
||||
|
||||
/* === FONTS === */
|
||||
|
|
@ -8,36 +9,36 @@
|
|||
|
||||
/* === CSS VARIABLES === */
|
||||
:root {
|
||||
/* Brand Colors */
|
||||
--color-primary: #1a6b4a;
|
||||
--color-primary-light: #25a06e;
|
||||
--color-primary-dark: #114532;
|
||||
--color-primary-ghost: rgba(26, 107, 74, 0.08);
|
||||
/* Brand Colors — Charcoal / Gris neutre (zéro vert) */
|
||||
--color-primary: #2e3440; /* charcoal foncé */
|
||||
--color-primary-light: #4c566a; /* slate moyen */
|
||||
--color-primary-dark: #1a1d24; /* quasi-noir */
|
||||
--color-primary-ghost: rgba(46, 52, 64, 0.07);
|
||||
|
||||
/* Accent / Status */
|
||||
--color-accent: #0abf7c;
|
||||
--color-urgent: #e63946;
|
||||
--color-warning: #f4a261;
|
||||
--color-success: #2ec4b6;
|
||||
--color-info: #3a86ff;
|
||||
--color-neutral: #6c757d;
|
||||
/* Accent / Status — conservés pour lisibilité fonctionnelle */
|
||||
--color-accent: #5e6e82; /* gris-bleu neutre */
|
||||
--color-urgent: #c0392b;
|
||||
--color-warning: #e67e22;
|
||||
--color-success: #27ae60;
|
||||
--color-info: #2980b9;
|
||||
--color-neutral: #7f8c8d;
|
||||
|
||||
/* Backgrounds */
|
||||
--bg-base: #f4f6f9;
|
||||
--bg-base: #f2f3f5;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-surface-2: #f8fafc;
|
||||
--bg-sidebar: #0f2d20;
|
||||
--bg-surface-2: #f8f9fa;
|
||||
--bg-sidebar: #1e2228; /* charcoal très sombre */
|
||||
--bg-header: #ffffff;
|
||||
|
||||
/* Text */
|
||||
--text-primary: #1a2332;
|
||||
--text-secondary: #6b7280;
|
||||
--text-muted: #9ca3af;
|
||||
/* Text — contraste maximal */
|
||||
--text-primary: #1a1d24;
|
||||
--text-secondary: #4c566a;
|
||||
--text-muted: #7b8a99;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* Borders */
|
||||
--border-light: #e8ecf0;
|
||||
--border-medium: #d1d5db;
|
||||
--border-light: #e3e6ea;
|
||||
--border-medium: #c8cdd4;
|
||||
|
||||
/* Spacing & Radius */
|
||||
--radius-sm: 6px;
|
||||
|
|
@ -46,13 +47,13 @@
|
|||
--radius-xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
|
||||
--shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07);
|
||||
--shadow-primary: 0 4px 20px rgba(26,107,74,.25);
|
||||
/* Shadows — neutres, sans teinte colorée */
|
||||
--shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
|
||||
--shadow-xl: 0 16px 48px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
|
||||
--shadow-primary: 0 4px 20px rgba(30,34,40,.20);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 0.15s ease;
|
||||
|
|
@ -104,7 +105,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
}
|
||||
|
||||
#header.mode-test {
|
||||
background: linear-gradient(90deg, #7b2d00, #c0392b);
|
||||
background: linear-gradient(90deg, #5d0000, #c0392b);
|
||||
}
|
||||
|
||||
#header .logo {
|
||||
|
|
@ -276,12 +277,13 @@ h1, h2, h3, h4, h5, h6,
|
|||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
/* Liseré supérieur discret — gris clair */
|
||||
#sidebar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
|
||||
background: linear-gradient(90deg, #4c566a, #7b8a99);
|
||||
}
|
||||
|
||||
/* Sidebar Nav */
|
||||
|
|
@ -333,8 +335,9 @@ h1, h2, h3, h4, h5, h6,
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Active item : blanc brillant */
|
||||
.sidebar-nav > .nav-item > .nav-link span.active-main {
|
||||
color: var(--color-accent);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -345,7 +348,6 @@ h1, h2, h3, h4, h5, h6,
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Rotates chevron when open */
|
||||
.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down {
|
||||
transform: rotate(180deg);
|
||||
opacity: 1;
|
||||
|
|
@ -356,7 +358,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
list-style: none;
|
||||
padding: 4px 0 4px 32px;
|
||||
margin: 0;
|
||||
background: rgba(0,0,0,0.15);
|
||||
background: rgba(0,0,0,0.18);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
|
@ -378,19 +380,19 @@ h1, h2, h3, h4, h5, h6,
|
|||
.sidebar-nav .nav-content li a:hover {
|
||||
color: white;
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-left-color: var(--color-accent);
|
||||
border-left-color: rgba(255,255,255,0.5);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
/* Sous-menu actif : fond blanc translucide + bordure blanche */
|
||||
.sidebar-nav .nav-content li a.active-submenu {
|
||||
color: var(--color-accent);
|
||||
background: rgba(10,191,124,0.12);
|
||||
border-left-color: var(--color-accent);
|
||||
color: #ffffff;
|
||||
background: rgba(255,255,255,0.12);
|
||||
border-left-color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
/* Active indicator dot */
|
||||
.sidebar-nav .nav-content li a.active-submenu::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -400,7 +402,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
background: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
/* Separator label */
|
||||
|
|
@ -410,7 +412,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.3);
|
||||
color: rgba(255,255,255,0.28);
|
||||
padding: 12px 10px 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
|
@ -462,7 +464,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
.scrollmenu a:hover {
|
||||
background: var(--color-primary-ghost);
|
||||
color: var(--color-primary);
|
||||
border-color: rgba(26,107,74,0.2);
|
||||
border-color: rgba(46,52,64,0.15);
|
||||
}
|
||||
|
||||
.scrollmenu a.active {
|
||||
|
|
@ -485,14 +487,13 @@ h1, h2, h3, h4, h5, h6,
|
|||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section { padding: 0; }
|
||||
|
||||
/* ==============================
|
||||
CONTEXT DRAWER (Barre Latérale D)
|
||||
============================== */
|
||||
|
||||
/* Trigger button */
|
||||
/* Trigger button — gris charcoal */
|
||||
.btn-info-context {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
|
|
@ -560,7 +561,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
margin-bottom: 16px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-cacher-contexte:hover { background: var(--color-primary); }
|
||||
.btn-cacher-contexte:hover { background: var(--color-primary-light); }
|
||||
|
||||
/* Context Cards */
|
||||
.context-card {
|
||||
|
|
@ -584,7 +585,8 @@ h1, h2, h3, h4, h5, h6,
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.context-card-label i { color: var(--color-primary); }
|
||||
/* Icône label — gris moyen */
|
||||
.context-card-label i { color: var(--color-primary-light); }
|
||||
|
||||
.context-card-label a {
|
||||
color: var(--color-primary);
|
||||
|
|
@ -619,7 +621,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
border-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.context-btn i { color: var(--color-primary); flex-shrink: 0; }
|
||||
.context-btn i { color: var(--color-primary-light); flex-shrink: 0; }
|
||||
|
||||
.context-btn.btn-primary-context {
|
||||
background: var(--color-primary);
|
||||
|
|
@ -672,7 +674,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.recent-policies-title i { color: var(--color-primary); }
|
||||
.recent-policies-title i { color: var(--color-primary-light); }
|
||||
|
||||
.policy-item {
|
||||
padding: 7px 10px;
|
||||
|
|
@ -692,7 +694,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
.policy-item:hover {
|
||||
background: var(--color-primary-ghost);
|
||||
color: var(--color-primary);
|
||||
border-color: rgba(26,107,74,0.2);
|
||||
border-color: rgba(46,52,64,0.18);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -737,7 +739,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
|
||||
/* Devis mode banner */
|
||||
.mode-devis-banner {
|
||||
background: linear-gradient(135deg, #7209b7, #f72585);
|
||||
background: linear-gradient(135deg, #3a3a4a, #55556a);
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: 'Syne', sans-serif;
|
||||
|
|
@ -772,6 +774,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
--bs-table-striped-color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* En-tête : charcoal sombre */
|
||||
.table thead tr {
|
||||
background: var(--color-primary) !important;
|
||||
color: white !important;
|
||||
|
|
@ -813,8 +816,9 @@ h1, h2, h3, h4, h5, h6,
|
|||
background: var(--color-primary-ghost) !important;
|
||||
font-style: normal !important;
|
||||
}
|
||||
/* Bordure gauche gris moyen au survol */
|
||||
.table tbody tr:hover td:first-child {
|
||||
border-left: 3px solid var(--color-accent);
|
||||
border-left: 3px solid var(--color-primary-light);
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
|
|
@ -836,11 +840,11 @@ h1, h2, h3, h4, h5, h6,
|
|||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.badge-valide { background: rgba(46,196,182,0.12); color: var(--color-success); }
|
||||
.badge-urgent { background: rgba(230,57,70,0.12); color: var(--color-urgent); }
|
||||
.badge-attente { background: rgba(244,162,97,0.12); color: var(--color-warning); }
|
||||
.badge-info { background: rgba(58,134,255,0.12); color: var(--color-info); }
|
||||
.badge-inactive { background: rgba(108,117,125,0.12); color: var(--color-neutral); }
|
||||
.badge-valide { background: rgba(39,174,96,0.10); color: #1e8449; }
|
||||
.badge-urgent { background: rgba(192,57,43,0.10); color: var(--color-urgent); }
|
||||
.badge-attente { background: rgba(230,126,34,0.10); color: #b9720a; }
|
||||
.badge-info { background: rgba(41,128,185,0.10); color: #1a6898; }
|
||||
.badge-inactive { background: rgba(127,140,141,0.10); color: var(--color-neutral); }
|
||||
|
||||
/* ==============================
|
||||
CARDS
|
||||
|
|
@ -879,14 +883,15 @@ h1, h2, h3, h4, h5, h6,
|
|||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Bouton primaire : charcoal */
|
||||
.btn-primary {
|
||||
background: var(--color-primary) !important;
|
||||
color: white !important;
|
||||
box-shadow: 0 2px 8px rgba(26,107,74,0.3);
|
||||
box-shadow: 0 2px 8px rgba(30,34,40,.22);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-light) !important;
|
||||
box-shadow: 0 4px 16px rgba(26,107,74,0.4);
|
||||
box-shadow: 0 4px 16px rgba(30,34,40,.30);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -895,7 +900,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
color: white !important;
|
||||
}
|
||||
.btn-info:hover {
|
||||
background: #2563eb !important;
|
||||
background: #1f6fa0 !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -930,13 +935,13 @@ h1, h2, h3, h4, h5, h6,
|
|||
}
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: var(--color-primary-light);
|
||||
box-shadow: 0 0 0 3px rgba(26,107,74,0.1);
|
||||
box-shadow: 0 0 0 3px rgba(46,52,64,0.10);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
td input[readonly], td select[readonly],
|
||||
td input[disabled], td select[disabled] {
|
||||
background: #f1f5f9 !important;
|
||||
background: #f1f4f6 !important;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
|
@ -967,6 +972,7 @@ fieldset legend, form legend {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header modal : charcoal */
|
||||
.modal-header {
|
||||
background: var(--color-primary) !important;
|
||||
color: white !important;
|
||||
|
|
@ -981,16 +987,16 @@ fieldset legend, form legend {
|
|||
}
|
||||
|
||||
.modal-header .close, .modal-header .btn-close {
|
||||
background: rgba(255,255,255,0.2) !important;
|
||||
background: rgba(255,255,255,0.18) !important;
|
||||
color: white !important;
|
||||
border: 1px solid rgba(255,255,255,0.3) !important;
|
||||
border: 1px solid rgba(255,255,255,0.28) !important;
|
||||
border-radius: var(--radius-sm);
|
||||
opacity: 1;
|
||||
transition: background var(--transition-fast);
|
||||
font-size: 0.75rem;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.modal-header .close:hover { background: rgba(255,255,255,0.35) !important; }
|
||||
.modal-header .close:hover { background: rgba(255,255,255,0.32) !important; }
|
||||
|
||||
.modal-body { padding: 20px; }
|
||||
|
||||
|
|
@ -1000,7 +1006,7 @@ fieldset legend, form legend {
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Side Panel Modal (optional modern variant) */
|
||||
/* Side Panel Modal */
|
||||
.modal.side-panel .modal-dialog {
|
||||
position: fixed;
|
||||
top: 0; right: 0;
|
||||
|
|
@ -1034,6 +1040,7 @@ fieldset legend, form legend {
|
|||
color: var(--color-primary);
|
||||
background: var(--color-primary-ghost);
|
||||
}
|
||||
/* Onglet actif : charcoal */
|
||||
.nav-tabs .nav-item.show .nav-link,
|
||||
.nav-tabs .nav-link.active {
|
||||
background: var(--color-primary) !important;
|
||||
|
|
@ -1052,13 +1059,13 @@ fieldset legend, form legend {
|
|||
font-size: 0.82rem;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
.alert-success { border-color: var(--color-success); background: rgba(46,196,182,0.1); }
|
||||
.alert-danger { border-color: var(--color-urgent); background: rgba(230,57,70,0.1); }
|
||||
.alert-warning { border-color: var(--color-warning); background: rgba(244,162,97,0.1); }
|
||||
.alert-info { border-color: var(--color-info); background: rgba(58,134,255,0.1); }
|
||||
.alert-success { border-color: var(--color-success); background: rgba(39,174,96,0.08); }
|
||||
.alert-danger { border-color: var(--color-urgent); background: rgba(192,57,43,0.08); }
|
||||
.alert-warning { border-color: var(--color-warning); background: rgba(230,126,34,0.08); }
|
||||
.alert-info { border-color: var(--color-info); background: rgba(41,128,185,0.08); }
|
||||
|
||||
/* ==============================
|
||||
FOOTER (inside context bar)
|
||||
FOOTER
|
||||
============================== */
|
||||
footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; }
|
||||
|
||||
|
|
@ -1081,7 +1088,7 @@ footer { background: transparent !important; color: var(--text-muted) !important
|
|||
|
||||
/* Skeleton Loader */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background: linear-gradient(90deg, #ebebeb 25%, #dcdcdc 50%, #ebebeb 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite;
|
||||
border-radius: var(--radius-sm);
|
||||
|
|
@ -1111,18 +1118,18 @@ footer { background: transparent !important; color: var(--text-muted) !important
|
|||
|
||||
/* Pulse animation for notifications */
|
||||
@keyframes pulse-badge {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.4); }
|
||||
50% { box-shadow: 0 0 0 5px rgba(230,57,70,0); }
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.4); }
|
||||
50% { box-shadow: 0 0 0 5px rgba(192,57,43,0); }
|
||||
}
|
||||
.badge-number { animation: pulse-badge 2s infinite; }
|
||||
|
||||
/* Mode Test Banner */
|
||||
.mode-test-active #header {
|
||||
background: linear-gradient(90deg, #7b2d00, #c0392b) !important;
|
||||
background: linear-gradient(90deg, #5d0000, #c0392b) !important;
|
||||
}
|
||||
.mode-test-banner {
|
||||
background: repeating-linear-gradient(
|
||||
45deg, #ffd700, #ffd700 10px, #000 10px, #000 20px
|
||||
45deg, #cccccc, #cccccc 10px, #333333 10px, #333333 20px
|
||||
);
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
|
@ -1134,7 +1141,7 @@ footer { background: transparent !important; color: var(--text-muted) !important
|
|||
|
||||
/* Filter option */
|
||||
.filter-option-inner-inner {
|
||||
background-color: #f1f5f9 !important;
|
||||
background-color: #f1f4f6 !important;
|
||||
}
|
||||
|
||||
/* h6 links in context */
|
||||
|
|
@ -1142,7 +1149,7 @@ h6 a {
|
|||
text-decoration: none;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
border-bottom: 1px dashed var(--color-primary);
|
||||
border-bottom: 1px dashed var(--color-primary-light);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
h6 a:hover {
|
||||
|
|
@ -1162,7 +1169,7 @@ h6 a:hover {
|
|||
padding: 8px;
|
||||
}
|
||||
|
||||
/* .sr-only (keep accessible but hidden visually) */
|
||||
/* .sr-only */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
|
|
@ -1173,6 +1180,10 @@ h6 a:hover {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
SCROLLBAR hover — gris neutre */
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }
|
||||
|
||||
/* ==============================
|
||||
RESPONSIVE
|
||||
============================== */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user