mono
This commit is contained in:
parent
befee4a374
commit
ff7fb62090
|
|
@ -1,44 +1,44 @@
|
|||
/* =============================
|
||||
INTER SANTÉ — THEME NEUTRAL PRO
|
||||
INTER SANTÉ — THEME MONOCHROME
|
||||
SaaS Minimal UI v2025
|
||||
Palette : Charcoal · Gris · Blanc
|
||||
Palette : 100% Niveaux de gris
|
||||
============================= */
|
||||
|
||||
/* === FONTS === */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
|
||||
|
||||
/* === CSS VARIABLES === */
|
||||
/* === CSS VARIABLES — Niveaux de gris exclusivement === */
|
||||
:root {
|
||||
/* 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);
|
||||
/* Primaires */
|
||||
--color-primary: #1c1c1c; /* quasi-noir */
|
||||
--color-primary-light: #474747; /* gris sombre */
|
||||
--color-primary-dark: #0a0a0a; /* noir profond */
|
||||
--color-primary-ghost: rgba(0, 0, 0, 0.055);
|
||||
|
||||
/* 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;
|
||||
/* Accent / Status → tous en niveaux de gris */
|
||||
--color-accent: #5a5a5a; /* gris moyen */
|
||||
--color-urgent: #222222; /* très sombre */
|
||||
--color-warning: #555555; /* gris intermédiaire */
|
||||
--color-success: #737373; /* gris standard */
|
||||
--color-info: #909090; /* gris clair */
|
||||
--color-neutral: #b0b0b0; /* gris pâle */
|
||||
|
||||
/* Backgrounds */
|
||||
--bg-base: #f2f3f5;
|
||||
--bg-base: #f0f0f0;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-surface-2: #f8f9fa;
|
||||
--bg-sidebar: #1e2228; /* charcoal très sombre */
|
||||
--bg-surface-2: #f7f7f7;
|
||||
--bg-sidebar: #181818; /* noir charbon */
|
||||
--bg-header: #ffffff;
|
||||
|
||||
/* Text — contraste maximal */
|
||||
--text-primary: #1a1d24;
|
||||
--text-secondary: #4c566a;
|
||||
--text-muted: #7b8a99;
|
||||
/* Text — contraste soigné */
|
||||
--text-primary: #111111;
|
||||
--text-secondary: #484848;
|
||||
--text-muted: #888888;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* Borders */
|
||||
--border-light: #e3e6ea;
|
||||
--border-medium: #c8cdd4;
|
||||
--border-light: #e2e2e2;
|
||||
--border-medium: #c8c8c8;
|
||||
|
||||
/* Spacing & Radius */
|
||||
--radius-sm: 6px;
|
||||
|
|
@ -47,13 +47,13 @@
|
|||
--radius-xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 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);
|
||||
/* Shadows — monochrome neutre */
|
||||
--shadow-xs: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.06);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.07);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.08);
|
||||
--shadow-xl: 0 16px 48px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.09);
|
||||
--shadow-primary: 0 4px 20px rgba(0,0,0,.22);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 0.15s ease;
|
||||
|
|
@ -105,7 +105,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
}
|
||||
|
||||
#header.mode-test {
|
||||
background: linear-gradient(90deg, #5d0000, #c0392b);
|
||||
background: linear-gradient(90deg, #222222, #555555);
|
||||
}
|
||||
|
||||
#header .logo {
|
||||
|
|
@ -118,6 +118,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
height: 34px;
|
||||
border-radius: var(--radius-sm);
|
||||
object-fit: contain;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
#header .logo span {
|
||||
|
|
@ -172,10 +173,12 @@ h1, h2, h3, h4, h5, h6,
|
|||
background: var(--color-primary-ghost);
|
||||
}
|
||||
|
||||
/* Badge notification — gris sombre */
|
||||
.badge-number {
|
||||
position: absolute;
|
||||
top: 2px; right: 4px;
|
||||
background: var(--color-urgent) !important;
|
||||
color: white !important;
|
||||
font-size: 0.6rem;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -205,7 +208,11 @@ h1, h2, h3, h4, h5, h6,
|
|||
border-color: var(--color-primary-light);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.company-logo-area img { height: 32px; width: auto; object-fit: contain; }
|
||||
.company-logo-area img {
|
||||
height: 32px; width: auto;
|
||||
object-fit: contain;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.company-logo-area .company-name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
|
@ -215,12 +222,12 @@ h1, h2, h3, h4, h5, h6,
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* User Initials Badge */
|
||||
/* User Initials Badge — dégradé gris */
|
||||
.initials {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
|
||||
background: linear-gradient(135deg, #1c1c1c, #474747);
|
||||
color: white;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 700;
|
||||
|
|
@ -258,7 +265,10 @@ h1, h2, h3, h4, h5, h6,
|
|||
.dropdown-item i { width: 16px; color: var(--text-muted); }
|
||||
|
||||
/* Language flag */
|
||||
.lang-selector img { border-radius: 3px; }
|
||||
.lang-selector img {
|
||||
border-radius: 3px;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
SIDEBAR
|
||||
|
|
@ -277,13 +287,13 @@ h1, h2, h3, h4, h5, h6,
|
|||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
/* Liseré supérieur discret — gris clair */
|
||||
/* Liseré supérieur — blanc discret */
|
||||
#sidebar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #4c566a, #7b8a99);
|
||||
background: linear-gradient(90deg, #555555, #aaaaaa);
|
||||
}
|
||||
|
||||
/* Sidebar Nav */
|
||||
|
|
@ -302,7 +312,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
gap: 10px;
|
||||
padding: 9px 10px;
|
||||
border-radius: var(--radius-md);
|
||||
color: rgba(255,255,255,0.72);
|
||||
color: rgba(255,255,255,0.68);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
|
|
@ -313,7 +323,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
.sidebar-nav > .nav-item > .nav-link:hover,
|
||||
.sidebar-nav > .nav-item > .nav-link.active {
|
||||
background: rgba(255,255,255,0.10);
|
||||
color: white;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.sidebar-nav > .nav-item > .nav-link i:first-child {
|
||||
|
|
@ -321,7 +331,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
width: 22px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.85;
|
||||
opacity: 0.80;
|
||||
}
|
||||
|
||||
.sidebar-nav > .nav-item > .nav-link span {
|
||||
|
|
@ -335,7 +345,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Active item : blanc brillant */
|
||||
/* Item actif : blanc pur */
|
||||
.sidebar-nav > .nav-item > .nav-link span.active-main {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
|
|
@ -343,7 +353,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
|
||||
.sidebar-nav > .nav-item > .nav-link .bi-chevron-down {
|
||||
font-size: 0.65rem;
|
||||
opacity: 0.6;
|
||||
opacity: 0.55;
|
||||
transition: transform var(--transition-base);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -358,7 +368,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
list-style: none;
|
||||
padding: 4px 0 4px 32px;
|
||||
margin: 0;
|
||||
background: rgba(0,0,0,0.18);
|
||||
background: rgba(0,0,0,0.20);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
|
@ -369,7 +379,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
display: block;
|
||||
padding: 7px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: rgba(255,255,255,0.55);
|
||||
color: rgba(255,255,255,0.48);
|
||||
font-size: 0.78rem;
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
|
|
@ -378,16 +388,16 @@ h1, h2, h3, h4, h5, h6,
|
|||
}
|
||||
|
||||
.sidebar-nav .nav-content li a:hover {
|
||||
color: white;
|
||||
color: rgba(255,255,255,0.85);
|
||||
background: rgba(255,255,255,0.07);
|
||||
border-left-color: rgba(255,255,255,0.5);
|
||||
border-left-color: rgba(255,255,255,0.45);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
/* Sous-menu actif : fond blanc translucide + bordure blanche */
|
||||
/* Sous-menu actif — blanc pur */
|
||||
.sidebar-nav .nav-content li a.active-submenu {
|
||||
color: #ffffff;
|
||||
background: rgba(255,255,255,0.12);
|
||||
background: rgba(255,255,255,0.13);
|
||||
border-left-color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding-left: 14px;
|
||||
|
|
@ -402,7 +412,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.8);
|
||||
background: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
||||
/* Separator label */
|
||||
|
|
@ -412,7 +422,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.28);
|
||||
color: rgba(255,255,255,0.25);
|
||||
padding: 12px 10px 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
|
@ -464,7 +474,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
.scrollmenu a:hover {
|
||||
background: var(--color-primary-ghost);
|
||||
color: var(--color-primary);
|
||||
border-color: rgba(46,52,64,0.15);
|
||||
border-color: rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.scrollmenu a.active {
|
||||
|
|
@ -474,11 +484,8 @@ h1, h2, h3, h4, h5, h6,
|
|||
}
|
||||
|
||||
/* Page content wrapper */
|
||||
.page-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.page-content { padding: 0 16px; }
|
||||
|
||||
/* Fixed header within main */
|
||||
.fixed-div {
|
||||
position: sticky;
|
||||
top: var(--header-height);
|
||||
|
|
@ -493,7 +500,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
CONTEXT DRAWER (Barre Latérale D)
|
||||
============================== */
|
||||
|
||||
/* Trigger button — gris charcoal */
|
||||
/* Trigger button — noir charbon */
|
||||
.btn-info-context {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
|
|
@ -537,9 +544,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
transition: transform var(--transition-slow);
|
||||
}
|
||||
|
||||
#barre_laterale_d .drawer-inner {
|
||||
padding: 16px;
|
||||
}
|
||||
#barre_laterale_d .drawer-inner { padding: 16px; }
|
||||
|
||||
/* Drawer Close Button */
|
||||
.btn-cacher-contexte {
|
||||
|
|
@ -585,7 +590,6 @@ h1, h2, h3, h4, h5, h6,
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
/* Icône label — gris moyen */
|
||||
.context-card-label i { color: var(--color-primary-light); }
|
||||
|
||||
.context-card-label a {
|
||||
|
|
@ -694,7 +698,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
.policy-item:hover {
|
||||
background: var(--color-primary-ghost);
|
||||
color: var(--color-primary);
|
||||
border-color: rgba(46,52,64,0.18);
|
||||
border-color: rgba(0,0,0,0.15);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -710,6 +714,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 3px solid white;
|
||||
filter: grayscale(100%);
|
||||
transition: transform var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -735,11 +740,14 @@ h1, h2, h3, h4, h5, h6,
|
|||
border-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.change-pwd-link img { width: 22px; }
|
||||
.change-pwd-link img {
|
||||
width: 22px;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
/* Devis mode banner */
|
||||
.mode-devis-banner {
|
||||
background: linear-gradient(135deg, #3a3a4a, #55556a);
|
||||
background: linear-gradient(135deg, #2a2a2a, #545454);
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: 'Syne', sans-serif;
|
||||
|
|
@ -774,7 +782,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
--bs-table-striped-color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* En-tête : charcoal sombre */
|
||||
/* En-tête : noir charbon — texte blanc */
|
||||
.table thead tr {
|
||||
background: var(--color-primary) !important;
|
||||
color: white !important;
|
||||
|
|
@ -809,19 +817,20 @@ h1, h2, h3, h4, h5, h6,
|
|||
|
||||
.table tr:last-child td { border-bottom: none !important; }
|
||||
|
||||
.table tbody tr {
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.table tbody tr { transition: all var(--transition-fast); }
|
||||
|
||||
.table tbody tr:hover {
|
||||
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-primary-light);
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
/* ==============================
|
||||
STATUS BADGES — niveaux de gris
|
||||
Hiérarchie visuelle par luminosité
|
||||
============================== */
|
||||
.badge-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -840,11 +849,17 @@ h1, h2, h3, h4, h5, h6,
|
|||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.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); }
|
||||
|
||||
/* Valide → gris très sombre + fond très clair */
|
||||
.badge-valide { background: #ebebeb; color: #1c1c1c; border: 1px solid #d0d0d0; }
|
||||
/* Urgent → fond blanc, contour noir, texte noir */
|
||||
.badge-urgent { background: #ffffff; color: #111111; border: 1px solid #111111; }
|
||||
/* Attente → fond gris clair, texte gris moyen */
|
||||
.badge-attente { background: #e8e8e8; color: #454545; border: 1px solid #c0c0c0; }
|
||||
/* Info → fond gris pâle, texte gris moyen-clair*/
|
||||
.badge-info { background: #f0f0f0; color: #606060; border: 1px solid #d0d0d0; }
|
||||
/* Inactive → fond blanc cassé, texte gris pâle */
|
||||
.badge-inactive { background: #f5f5f5; color: #999999; border: 1px solid #e0e0e0; }
|
||||
|
||||
/* ==============================
|
||||
CARDS
|
||||
|
|
@ -865,6 +880,7 @@ h1, h2, h3, h4, h5, h6,
|
|||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
|
|
@ -883,32 +899,35 @@ h1, h2, h3, h4, h5, h6,
|
|||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Bouton primaire : charcoal */
|
||||
/* Primaire : noir + hover gris sombre */
|
||||
.btn-primary {
|
||||
background: var(--color-primary) !important;
|
||||
color: white !important;
|
||||
box-shadow: 0 2px 8px rgba(30,34,40,.22);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,.25);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-light) !important;
|
||||
box-shadow: 0 4px 16px rgba(30,34,40,.30);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,.30);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Info : gris moyen */
|
||||
.btn-info {
|
||||
background: var(--color-info) !important;
|
||||
background: #606060 !important;
|
||||
color: white !important;
|
||||
}
|
||||
.btn-info:hover {
|
||||
background: #1f6fa0 !important;
|
||||
background: #404040 !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Warning/Danger : gris sombre */
|
||||
.btn-warning {
|
||||
background: var(--color-urgent) !important;
|
||||
background: #3a3a3a !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Default / outline */
|
||||
.btn-default, .btn-outline-secondary {
|
||||
background: white;
|
||||
border: 1px solid var(--border-medium) !important;
|
||||
|
|
@ -935,13 +954,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(46,52,64,0.10);
|
||||
box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
td input[readonly], td select[readonly],
|
||||
td input[disabled], td select[disabled] {
|
||||
background: #f1f4f6 !important;
|
||||
background: #f3f3f3 !important;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
|
@ -951,7 +970,7 @@ td input[disabled], td select[disabled] {
|
|||
============================== */
|
||||
legend, #chemin,
|
||||
fieldset legend, form legend {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
|
||||
background: linear-gradient(135deg, #1c1c1c, #474747) !important;
|
||||
color: white;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 0.78rem;
|
||||
|
|
@ -972,7 +991,7 @@ fieldset legend, form legend {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header modal : charcoal */
|
||||
/* Header modal : noir */
|
||||
.modal-header {
|
||||
background: var(--color-primary) !important;
|
||||
color: white !important;
|
||||
|
|
@ -987,16 +1006,16 @@ fieldset legend, form legend {
|
|||
}
|
||||
|
||||
.modal-header .close, .modal-header .btn-close {
|
||||
background: rgba(255,255,255,0.18) !important;
|
||||
background: rgba(255,255,255,0.16) !important;
|
||||
color: white !important;
|
||||
border: 1px solid rgba(255,255,255,0.28) !important;
|
||||
border: 1px solid rgba(255,255,255,0.26) !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.32) !important; }
|
||||
.modal-header .close:hover { background: rgba(255,255,255,0.30) !important; }
|
||||
|
||||
.modal-body { padding: 20px; }
|
||||
|
||||
|
|
@ -1040,7 +1059,7 @@ fieldset legend, form legend {
|
|||
color: var(--color-primary);
|
||||
background: var(--color-primary-ghost);
|
||||
}
|
||||
/* Onglet actif : charcoal */
|
||||
/* Onglet actif : noir */
|
||||
.nav-tabs .nav-item.show .nav-link,
|
||||
.nav-tabs .nav-link.active {
|
||||
background: var(--color-primary) !important;
|
||||
|
|
@ -1051,23 +1070,32 @@ fieldset legend, form legend {
|
|||
}
|
||||
|
||||
/* ==============================
|
||||
ALERTS & TOASTS
|
||||
ALERTS — tous en gris
|
||||
============================== */
|
||||
.alert {
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.82rem;
|
||||
border-left: 4px solid;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.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); }
|
||||
/* Succès → gris clair + bordure sombre */
|
||||
.alert-success { border-color: #3a3a3a; background: #efefef; }
|
||||
/* Danger → fond très clair + bordure noire */
|
||||
.alert-danger { border-color: #111111; background: #e8e8e8; }
|
||||
/* Warning → fond gris neutre */
|
||||
.alert-warning { border-color: #555555; background: #f2f2f2; }
|
||||
/* Info → fond blanc cassé */
|
||||
.alert-info { border-color: #888888; background: #f7f7f7; }
|
||||
|
||||
/* ==============================
|
||||
FOOTER
|
||||
============================== */
|
||||
footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; }
|
||||
footer {
|
||||
background: transparent !important;
|
||||
color: var(--text-muted) !important;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
MICRO-INTERACTIONS & UTILS
|
||||
|
|
@ -1086,7 +1114,7 @@ footer { background: transparent !important; color: var(--text-muted) !important
|
|||
|
||||
.transition { transition: all var(--transition-base); }
|
||||
|
||||
/* Skeleton Loader */
|
||||
/* Skeleton Loader — gris */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #ebebeb 25%, #dcdcdc 50%, #ebebeb 75%);
|
||||
background-size: 200% 100%;
|
||||
|
|
@ -1116,20 +1144,20 @@ footer { background: transparent !important; color: var(--text-muted) !important
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Pulse animation for notifications */
|
||||
/* Pulse animation — gris sombre */
|
||||
@keyframes pulse-badge {
|
||||
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); }
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.35); }
|
||||
50% { box-shadow: 0 0 0 5px rgba(0,0,0,0); }
|
||||
}
|
||||
.badge-number { animation: pulse-badge 2s infinite; }
|
||||
|
||||
/* Mode Test Banner */
|
||||
/* Mode Test Banner — rayures grises */
|
||||
.mode-test-active #header {
|
||||
background: linear-gradient(90deg, #5d0000, #c0392b) !important;
|
||||
background: linear-gradient(90deg, #222222, #555555) !important;
|
||||
}
|
||||
.mode-test-banner {
|
||||
background: repeating-linear-gradient(
|
||||
45deg, #cccccc, #cccccc 10px, #333333 10px, #333333 20px
|
||||
45deg, #cccccc, #cccccc 10px, #1c1c1c 10px, #1c1c1c 20px
|
||||
);
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
|
@ -1141,7 +1169,7 @@ footer { background: transparent !important; color: var(--text-muted) !important
|
|||
|
||||
/* Filter option */
|
||||
.filter-option-inner-inner {
|
||||
background-color: #f1f4f6 !important;
|
||||
background-color: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
/* h6 links in context */
|
||||
|
|
@ -1167,6 +1195,7 @@ h6 a:hover {
|
|||
border: 1px solid var(--border-medium);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* .sr-only */
|
||||
|
|
@ -1180,10 +1209,6 @@ 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