diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 3b732594..5e4c9850 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,99 +1,127 @@ :root { --primary: #2C3E50; --accent: #08C5D1; - --bg-app: #f0f2f5; /* Un gris très léger pour faire ressortir les cartes blanches */ - --shadow-wahoo: 0 10px 25px rgba(44, 62, 80, 0.1); + --accent-light: rgba(8, 197, 209, 0.1); + --bg-body: #F4F7FA; /* Un gris-bleu très doux */ + --glass: rgba(255, 255, 255, 0.9); + --radius: 16px; + --shadow-sm: 0 4px 12px rgba(0,0,0,0.03); + --shadow-md: 0 10px 30px rgba(44, 62, 80, 0.08); } body { - background-color: var(--bg-app) !important; + background-color: var(--bg-body) !important; + font-family: 'Plus Jakarta Sans', sans-serif !important; + color: #4A5568; } -/* Le secret du Wahoo : Faire flotter le contenu principal */ +/* --- EFFET WAHOO SUR LE MAIN --- */ #main { - margin: 80px 20px 20px 20px !important; - padding: 25px !important; - background: #ffffff !important; - border-radius: 20px !important; /* Arrondis prononcés */ - box-shadow: var(--shadow-wahoo) !important; - border: none !important; + margin: 90px 25px 25px 25px !important; + padding: 30px !important; + background: white !important; + border-radius: 24px !important; + box-shadow: var(--shadow-md) !important; + border: 1px solid rgba(255, 255, 255, 0.6) !important; + transition: transform 0.3s ease; } -/* Modernisation de la Sidebar */ +/* --- HEADER TRANSPARENT & FLOU --- */ +.header { + background: rgba(255, 255, 255, 0.8) !important; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(0,0,0,0.05) !important; + height: 70px !important; +} + +/* --- SIDEBAR : PLUS DE LIGNES, QUE DU VIDE ET DU RELIEF --- */ .sidebar { background: var(--primary) !important; - box-shadow: 10px 0 30px rgba(0,0,0,0.05) !important; border: none !important; + box-shadow: 15px 0 40px rgba(0,0,0,0.04) !important; } .sidebar-nav .nav-link { - border-radius: 10px !important; - margin: 5px 15px !important; - padding: 12px !important; - transition: all 0.3s ease !important; + background: transparent !important; + color: rgba(255,255,255,0.7) !important; + margin: 4px 15px !important; + border-radius: 12px !important; + font-weight: 500 !important; } -.sidebar-nav .nav-link:hover { - background: rgba(8, 197, 209, 0.1) !important; - color: var(--accent) !important; - transform: translateX(5px); +.sidebar-nav .nav-link.active-main, .sidebar-nav .nav-link:hover { + background: var(--accent) !important; + color: white !important; + box-shadow: 0 8px 15px rgba(8, 197, 209, 0.3) !important; } -/* Style des Widgets dans la barre de contexte */ -.sidenav { - background: #ffffff !important; - border-left: 1px solid rgba(0,0,0,0.05) !important; -} - -.context-card { - background: #f8fafc !important; - border: 1px solid #e2e8f0 !important; - border-radius: 15px !important; - padding: 15px !important; - margin-bottom: 15px !important; - transition: 0.3s !important; -} - -.context-card:hover { - border-color: var(--accent) !important; - box-shadow: 0 5px 15px rgba(8, 197, 209, 0.1) !important; -} - -/* Aérer les tableaux de gestion */ +/* --- TABLEAUX : L'EFFET "STRIPED" MODERNE --- */ .table { border-collapse: separate !important; - border-spacing: 0 8px !important; /* Espacement entre les lignes */ -} - -.table tr { - background: white !important; - box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important; - border-radius: 8px !important; -} - -.table td, .table th { - padding: 12px !important; - border: none !important; + border-spacing: 0 12px !important; } .table thead th { background: transparent !important; - color: var(--primary) !important; - font-weight: 800 !important; + border: none !important; + color: #A0AEC0 !important; text-transform: uppercase; - font-size: 0.7rem; + font-size: 0.75rem; + letter-spacing: 1px; } -.initials { - background: linear-gradient(135deg, var(--accent), #2C3E50) !important; - color: white !important; - width: 45px; - height: 45px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50% !important; /* Rond parfait */ +.table tbody tr { + background: white !important; + box-shadow: var(--shadow-sm) !important; + transition: all 0.2s ease; +} + +.table tbody tr:hover { + transform: scale(1.01); + box-shadow: var(--shadow-md) !important; +} + +.table td { + padding: 15px !important; + border: none !important; + vertical-align: middle; +} + +.table td:first-child { border-radius: 12px 0 0 12px; } +.table td:last-child { border-radius: 0 12px 12px 0; } + +.btn-info, .btn-primary { + background: linear-gradient(135deg, #08C5D1 0%, #06A2AD 100%) !important; + border: none !important; + border-radius: 10px !important; + padding: 8px 20px !important; + font-weight: 600 !important; + box-shadow: 0 4px 12px rgba(8, 197, 209, 0.2) !important; + transition: all 0.3s ease !important; +} + +.btn-info:hover { + transform: translateY(-2px); + box-shadow: 0 6px 18px rgba(8, 197, 209, 0.3) !important; +} + +.context-sidebar { + background: white !important; + padding: 20px !important; +} + +.context-widget { + background: #F8FAFC !important; + border-radius: 16px !important; + padding: 20px !important; + margin-bottom: 20px !important; + border: 1px solid #EDF2F7 !important; +} + +.context-widget h6 { + color: #718096 !important; + font-size: 0.7rem !important; font-weight: 800 !important; - box-shadow: 0 4px 10px rgba(8, 197, 209, 0.4) !important; -} - + margin-bottom: 12px !important; +} \ No newline at end of file diff --git a/Vue/includes/head-meta.php b/Vue/includes/head-meta.php index 9e12fd9b..bacf3a7a 100644 --- a/Vue/includes/head-meta.php +++ b/Vue/includes/head-meta.php @@ -15,4 +15,4 @@ - \ No newline at end of file + \ No newline at end of file