From 10bc72dd9329fe4cb77c04eb528671c45f496206 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 24 Dec 2025 18:23:50 +0000 Subject: [PATCH] Test --- Bootstrap_new/css/style_office.css | 102 +++++++---------------------- Vue/gabarit.php | 2 +- service-worker.js | 2 + 3 files changed, 28 insertions(+), 78 deletions(-) diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css index c5ec7fc..21fb8b2 100644 --- a/Bootstrap_new/css/style_office.css +++ b/Bootstrap_new/css/style_office.css @@ -319,13 +319,6 @@ body { } -/* Content area fluide */ -.content-area { - padding: calc(var(--header-height) + 56px + 8px) 24px 24px 24px; /* Réduction de +16px à +8px */ - max-width: 1400px; - margin: 0 auto; -} - /* Content card */ .content-card { background: var(--office-card); @@ -335,18 +328,13 @@ body { } -/* Ajustement pour responsive */ +/* Sidebar collapsée (tablette) */ @media (max-width: 1200px) { - .nav-bar { - left: var(--sidebar-collapsed); - } - - .content-area { - padding-left: 24px; - padding-right: 24px; - } + .nav-bar { left: var(--sidebar-collapsed); } + .content-area { padding-left: 24px; padding-right: 24px; } } + .card-header { background-color: #fafafa; border-bottom: 1px solid var(--office-border); @@ -736,75 +724,35 @@ body { } } -/* Pour mobile */ +/* Mobile — UNE SEULE définition */ @media (max-width: 768px) { - .app-sidebar { - transform: translateX(-100%); - width: var(--sidebar-width); - } + .app-sidebar { transform: translateX(-100%); width: var(--sidebar-width); } + .app-sidebar.show { transform: translateX(0); } + .app-main { margin-left: 0; } - .app-sidebar.show { - transform: translateX(0); - } - - .app-main { - margin-left: 0; - } - - .content-area { - padding: calc(var(--header-height) + 56px + 8px) 16px 16px 16px; - max-width: 100%; - } - - .header-content { - padding: 0 16px; - } - - .user-info { - display: none; - } - - .nav-text, - .nav-title, - .nav-badge, - .nav-arrow { - display: block; - } - - .nav-bar { - left: 0; - border-radius: 0; - top: var(--header-height); - } - - .nav-bar > .nav-tabs { - padding: 0 16px; - } - - .content-area { - padding: calc(var(--header-height) + 56px) 16px 16px 16px; - } - - .content-card { - border-radius: 8px; - margin: 8px 0 16px 0; /* 8px en haut, 16px en bas */ - } + .nav-bar { left: 0; border-radius: 0; top: var(--header-height); } + .nav-bar > .nav-tabs { padding: 0 16px; } + /* Garder +8px ici pour fermer l’écart (rouge) */ + .content-area { padding: calc(var(--header-height) + 56px + 8px) 16px 16px 16px; max-width: 100%; } + .content-card { border-radius: 8px; margin: 8px 0 16px 0; /* 8px en haut, 16px en bas */ } + .header-content { padding: 0 16px; } + .user-info { display: none; } } -/* Correction pour les écrans larges */ +/* Écrans larges : mêmes insets pour nav-tabs et content-area */ @media (min-width: 1400px) { - .nav-bar > .nav-tabs { - padding-left: calc((100vw - 1400px) / 2); - padding-right: calc((100vw - 1400px) / 2); - } - - .content-area { - padding-left: calc((100vw - 1400px) / 2); - padding-right: calc((100vw - 1400px) / 2); - } + .nav-bar > .nav-tabs { + padding-left: calc((100vw - 1400px) / 2); + padding-right: calc((100vw - 1400px) / 2); + } + .content-area { + padding-left: calc((100vw - 1400px) / 2); + padding-right: calc((100vw - 1400px) / 2); + } } + /* ============================================ SCROLLBAR STYLING ============================================ */ diff --git a/Vue/gabarit.php b/Vue/gabarit.php index ac9d07b..0db4cb5 100755 --- a/Vue/gabarit.php +++ b/Vue/gabarit.php @@ -145,7 +145,7 @@ console.groupEnd(); - +