ga
This commit is contained in:
parent
c159dccd60
commit
accbdd1cfd
|
|
@ -1,65 +1,75 @@
|
|||
/* =============================
|
||||
INTER SANTÉ — THEME MODERN
|
||||
SaaS Premium UI v2025
|
||||
Portail Gestionnaire — v2025
|
||||
Palette extraite du logo officiel
|
||||
============================= */
|
||||
|
||||
/* === 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 — PORTAIL GESTIONNAIRE ===
|
||||
Couleurs extraites pixel par pixel du logo Inter Santé :
|
||||
#0082c8 → bleu principal (fond du carré logo)
|
||||
#00294a → bleu nuit (sidebar, profondeur)
|
||||
#4bb9f5 → cyan vif (croix + du logo, accents)
|
||||
#d0f8f8 → cyan pâle (reflet lumineux du +)
|
||||
*/
|
||||
:root {
|
||||
/* Brand Colors */
|
||||
--color-primary: #1a6b4a;
|
||||
--color-primary-light: #25a06e;
|
||||
--color-primary-dark: #114532;
|
||||
--color-primary-ghost: rgba(26, 107, 74, 0.08);
|
||||
/* ── Brand bleu Inter Santé Gestionnaire ── */
|
||||
--color-primary: #0082c8;
|
||||
--color-primary-light: #1a9ee0;
|
||||
--color-primary-dark: #00557a;
|
||||
--color-primary-ghost: rgba(0, 130, 200, 0.08);
|
||||
|
||||
/* Accent / Status */
|
||||
--color-accent: #0abf7c;
|
||||
/* ── Accent cyan — croix + du logo ── */
|
||||
--color-accent: #4bb9f5;
|
||||
--color-accent-soft: #d0f8f8;
|
||||
|
||||
/* ── Status ── */
|
||||
--color-urgent: #e63946;
|
||||
--color-warning: #f4a261;
|
||||
--color-success: #2ec4b6;
|
||||
--color-info: #3a86ff;
|
||||
--color-success: #00b894;
|
||||
--color-info: #0082c8;
|
||||
--color-neutral: #6c757d;
|
||||
|
||||
/* Backgrounds */
|
||||
--bg-base: #f4f6f9;
|
||||
/* ── Backgrounds — teinté bleu Inter Santé ── */
|
||||
--bg-base: #f0f6fb;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-surface-2: #f8fafc;
|
||||
--bg-sidebar: #0f2d20;
|
||||
--bg-surface-2: #f5f9fd;
|
||||
--bg-sidebar: #00294a;
|
||||
--bg-header: #ffffff;
|
||||
|
||||
/* Text */
|
||||
--text-primary: #1a2332;
|
||||
--text-secondary: #6b7280;
|
||||
--text-muted: #9ca3af;
|
||||
/* ── Text ── */
|
||||
--text-primary: #0d2136;
|
||||
--text-secondary: #4a6680;
|
||||
--text-muted: #8aa5bb;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* Borders */
|
||||
--border-light: #e8ecf0;
|
||||
--border-medium: #d1d5db;
|
||||
/* ── Borders teinté bleu ── */
|
||||
--border-light: #daeaf5;
|
||||
--border-medium: #b8d4e8;
|
||||
|
||||
/* Spacing & Radius */
|
||||
/* ── Radius ── */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--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 teintées bleu ── */
|
||||
--shadow-xs: 0 1px 3px rgba(0,82,130,.06), 0 1px 2px rgba(0,82,130,.04);
|
||||
--shadow-sm: 0 2px 8px rgba(0,82,130,.09), 0 1px 3px rgba(0,82,130,.05);
|
||||
--shadow-md: 0 4px 16px rgba(0,82,130,.11), 0 2px 6px rgba(0,82,130,.06);
|
||||
--shadow-lg: 0 8px 32px rgba(0,82,130,.13), 0 4px 12px rgba(0,82,130,.07);
|
||||
--shadow-xl: 0 16px 48px rgba(0,82,130,.16), 0 8px 24px rgba(0,82,130,.09);
|
||||
--shadow-primary: 0 4px 20px rgba(0, 130, 200, 0.35);
|
||||
|
||||
/* Transitions */
|
||||
/* ── Transitions ── */
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-base: 0.25s ease;
|
||||
--transition-slow: 0.4s cubic-bezier(.4,0,.2,1);
|
||||
|
||||
/* Layout */
|
||||
/* ── Layout ── */
|
||||
--sidebar-width: 240px;
|
||||
--sidebar-collapsed: 68px;
|
||||
--header-height: 64px;
|
||||
|
|
@ -95,12 +105,34 @@ h1, h2, h3, h4, h5, h6,
|
|||
============================== */
|
||||
#header {
|
||||
height: var(--header-height);
|
||||
background: var(--bg-header);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
box-shadow: var(--shadow-xs);
|
||||
/* Gradient bleu Inter Santé — du bleu logo vers bleu nuit */
|
||||
background: linear-gradient(135deg, #0082c8 0%, #005fa3 55%, #00294a 100%);
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 16px rgba(0, 41, 74, 0.35);
|
||||
padding: 0 1.25rem;
|
||||
z-index: 1000;
|
||||
transition: background var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Reflet lumineux cyan (évoque la croix + du logo) */
|
||||
#header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -40px; right: 120px;
|
||||
width: 200px; height: 140px;
|
||||
background: radial-gradient(ellipse, rgba(75,185,245,0.22) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Ligne cyan fine en bas du header */
|
||||
#header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent 0%, #4bb9f5 40%, #d0f8f8 60%, transparent 100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#header.mode-test {
|
||||
|
|
@ -113,24 +145,26 @@ h1, h2, h3, h4, h5, h6,
|
|||
}
|
||||
|
||||
#header .logo img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--radius-sm);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
object-fit: contain;
|
||||
/* Légère ombre pour faire ressortir le logo sur le fond bleu */
|
||||
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.25));
|
||||
}
|
||||
|
||||
#header .logo span {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 1.05rem;
|
||||
color: var(--color-primary);
|
||||
letter-spacing: -0.02em;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.04em;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Toggle sidebar button */
|
||||
/* Toggle sidebar button — sur fond bleu */
|
||||
.toggle-sidebar-btn {
|
||||
font-size: 1.4rem;
|
||||
color: var(--text-secondary);
|
||||
color: rgba(255,255,255,0.75);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
|
|
@ -138,11 +172,11 @@ h1, h2, h3, h4, h5, h6,
|
|||
margin-left: 12px;
|
||||
}
|
||||
.toggle-sidebar-btn:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-ghost);
|
||||
color: #ffffff;
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
/* Breadcrumb — sur fond bleu */
|
||||
.breadcrumb {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -150,25 +184,31 @@ h1, h2, h3, h4, h5, h6,
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
.breadcrumb-item a {
|
||||
color: var(--text-muted);
|
||||
color: rgba(255,255,255,0.65);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
.breadcrumb-item a:hover { color: var(--color-primary); }
|
||||
.breadcrumb-item.active { color: var(--color-primary); font-weight: 600; }
|
||||
.breadcrumb-item + .breadcrumb-item::before { color: var(--border-medium); }
|
||||
.breadcrumb-item a:hover { color: #ffffff; }
|
||||
.breadcrumb-item.active {
|
||||
color: var(--color-accent-soft, #d0f8f8);
|
||||
font-weight: 600;
|
||||
}
|
||||
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35); }
|
||||
|
||||
/* Header Nav Icons */
|
||||
/* Header Nav Icons — sur fond bleu */
|
||||
#header .header-nav .nav-link {
|
||||
color: var(--text-secondary);
|
||||
color: rgba(255,255,255,0.80);
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
#header .header-nav .nav-link:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-ghost);
|
||||
color: #ffffff;
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.badge-number {
|
||||
|
|
@ -183,51 +223,54 @@ h1, h2, h3, h4, h5, h6,
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
border: 2px solid rgba(0,82,130,0.6);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
.badge-number:hover { transform: scale(1.2); }
|
||||
|
||||
/* Company logo area */
|
||||
/* Company logo area — verre dépoli sur fond bleu */
|
||||
.company-logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 10px;
|
||||
padding: 5px 10px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg-surface-2);
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
background: rgba(255,255,255,0.12);
|
||||
backdrop-filter: blur(6px);
|
||||
transition: all var(--transition-fast);
|
||||
max-width: 180px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.company-logo-area:hover {
|
||||
border-color: var(--color-primary-light);
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: rgba(255,255,255,0.22);
|
||||
border-color: rgba(255,255,255,0.45);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
}
|
||||
.company-logo-area img { height: 32px; width: auto; object-fit: contain; }
|
||||
.company-logo-area .company-name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* User Initials Badge */
|
||||
/* User Initials Badge — cyan vif sur fond bleu */
|
||||
.initials {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #4bb9f5, #d0f8f8);
|
||||
color: #00294a;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
font-size: 0.72rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-primary);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
.nav-link:hover .initials { transform: scale(1.08); }
|
||||
|
|
@ -280,8 +323,8 @@ h1, h2, h3, h4, h5, h6,
|
|||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #4bb9f5 0%, #d0f8f8 50%, #4bb9f5 100%);
|
||||
}
|
||||
|
||||
/* Sidebar Nav */
|
||||
|
|
@ -462,7 +505,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(0,130,200,0.25);
|
||||
}
|
||||
|
||||
.scrollmenu a.active {
|
||||
|
|
@ -692,7 +735,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(0,130,200,0.25);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -882,11 +925,11 @@ h1, h2, h3, h4, h5, h6,
|
|||
.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(0,130,200,0.35);
|
||||
}
|
||||
.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(0,130,200,0.45);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -930,7 +973,7 @@ 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(0,130,200,0.12);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user