From 6a56da62cf05faed98b742c141bf99e279bbb9b5 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Mon, 22 Dec 2025 21:12:07 +0000 Subject: [PATCH] ga --- Bootstrap_new/css/style_office.css | 140 ++++++++++++++++++++++++----- Vue/gabarit.php | 2 +- 2 files changed, 118 insertions(+), 24 deletions(-) diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css index 59b5578..7c1c6bf 100644 --- a/Bootstrap_new/css/style_office.css +++ b/Bootstrap_new/css/style_office.css @@ -24,6 +24,14 @@ /* Responsive breakpoints */ --breakpoint-tablet: 1200px; --breakpoint-mobile: 768px; + + --office-primary-light: rgba(183, 71, 42, 0.08); + --office-primary-lighter: rgba(183, 71, 42, 0.04); + --office-primary-border: rgba(183, 71, 42, 0.15); + --office-warm-bg: #fefcfb; + --office-card-highlight: #fff9f8; + --content-margin-left: calc(var(--sidebar-width) + 24px); + --content-margin-right: 24px; } /* ============================================ @@ -237,33 +245,37 @@ content-area { NAVIGATION TABS ============================================ */ .nav-bar { - background-color: white; + background-color: #ffffff; border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - border: 1px solid var(--office-border); + box-shadow: 0 2px 8px rgba(183, 71, 42, 0.08); + border: 1px solid rgba(183, 71, 42, 0.15); position: fixed; top: var(--header-height); - left: var(--sidebar-width); + left: 0; right: 0; z-index: 1000; - max-width: calc(1400px + 24px * 2); - margin: 0 auto; - padding: 0 24px; + width: calc(100% - var(--sidebar-width)); /* Largeur totale moins sidebar */ + max-width: 1400px; /* Largeur max identique à content-area */ + margin: 0 auto 0 calc(var(--sidebar-width) + 24px); /* Marge gauche = sidebar + padding */ + padding: 0; overflow-x: auto; height: 56px; display: flex; align-items: center; - transition: left var(--transition-speed) ease; + transition: all var(--transition-speed) ease; + background: linear-gradient(135deg, #ffffff 0%, #fef8f7 100%); } +/* Conteneur interne pour le padding */ .nav-tabs { display: flex; - gap: 8px; + gap: 4px; overflow-x: auto; - padding: 8px 0; + padding: 0 24px; /* Padding ici au lieu de sur nav-bar */ height: 100%; align-items: center; flex-wrap: nowrap; + width: 100%; } .nav-tab { @@ -301,28 +313,44 @@ content-area { CONTENT AREA - AJUSTÉ POUR LA NAV-BAR FIXE ============================================ */ .content-area { - padding: calc(var(--header-height) + 56px + 16px) 24px 24px 24px; + padding: calc(var(--header-height) + 56px + 20px) 24px 24px 24px; max-width: 1400px; margin: 0 auto; position: relative; + width: 100%; } /* ============================================ - CONTENT CARDS - AJUSTÉ POUR LA NAV-BAR FIXE + CONTENT CARDS - LARGEUR IDENTIQUE À NAV-BAR ============================================ */ .content-card { background-color: white; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - border: 1px solid var(--office-border); + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); + border: 1px solid rgba(183, 71, 42, 0.12); margin-bottom: 24px; overflow: hidden; + width: calc(100% - var(--sidebar-width) - 48px); /* Largeur identique à nav-bar */ + max-width: 1400px; + margin-left: calc(var(--sidebar-width) + 24px); /* Alignement avec nav-bar */ + margin-right: 24px; } /* Ajustement pour responsive */ @media (max-width: 1200px) { + .nav-bar { + width: calc(100% - var(--sidebar-collapsed)); + margin-left: calc(var(--sidebar-collapsed) + 24px); + max-width: calc(1400px - var(--sidebar-collapsed)); + } + .content-card { - margin-top: calc(var(--header-height) + 56px); + width: calc(100% - var(--sidebar-collapsed) - 48px); + margin-left: calc(var(--sidebar-collapsed) + 24px); + } + + .content-area { + padding-left: calc(var(--sidebar-collapsed) + 24px); } } @@ -339,7 +367,21 @@ content-area { } .card-body { - padding: 24px; + padding: 28px; + background-color: #fefcfb; + min-height: 400px; +} + +/* Bordure subtile en haut pour lier visuellement avec nav-bar */ +.content-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--office-primary), #d15a3a, #ff7b5c); + opacity: 0.8; } /* ============================================ @@ -711,11 +753,6 @@ content-area { width: 100%; right: -100%; } - - /* Pour la version collapsed de la sidebar */ - .nav-bar { - left: var(--sidebar-collapsed); - } } /* Pour mobile */ @@ -754,9 +791,45 @@ content-area { .nav-bar { left: 0; - padding: 0 16px; + width: 100%; + margin: 0; + padding: 0; + border-radius: 0; + top: var(--header-height); + box-shadow: 0 2px 12px rgba(183, 71, 42, 0.1); max-width: 100%; } + + .nav-tabs { + padding: 0 16px; + } + + .content-area { + padding: calc(var(--header-height) + 56px) 16px 16px 16px; + } + + .content-card { + width: 100%; + margin: 0 0 16px 0; + border-radius: 8px; + } + + .card-body { + padding: 20px; + } +} + +/* Pour les très grands écrans (au-delà de 1400px) */ +@media (min-width: 1400px) { + .nav-bar { + margin-left: calc((100vw - 1400px) / 2 + var(--sidebar-width) + 24px); + width: calc(1400px - var(--sidebar-width) - 48px); + } + + .content-card { + margin-left: calc((100vw - 1400px) / 2 + var(--sidebar-width) + 24px); + width: calc(1400px - var(--sidebar-width) - 48px); + } } /* ============================================ @@ -782,4 +855,25 @@ content-area { .app-sidebar::-webkit-scrollbar-thumb:hover, .context-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); +} + +/* ============================================ + STYLE DE SCROLLBAR POUR NAV-TABS + ============================================ */ +.nav-tabs::-webkit-scrollbar { + height: 4px; +} + +.nav-tabs::-webkit-scrollbar-track { + background: rgba(183, 71, 42, 0.05); + border-radius: 2px; +} + +.nav-tabs::-webkit-scrollbar-thumb { + background: rgba(183, 71, 42, 0.2); + border-radius: 2px; +} + +.nav-tabs::-webkit-scrollbar-thumb:hover { + background: rgba(183, 71, 42, 0.3); } \ No newline at end of file diff --git a/Vue/gabarit.php b/Vue/gabarit.php index f9d2a91..2228633 100755 --- a/Vue/gabarit.php +++ b/Vue/gabarit.php @@ -145,7 +145,7 @@ console.groupEnd(); - +