frtg

Bootstrap_new/css/theme-modern.css

@@ -1483,3 +1483,95 @@ select[class*="selectpicker"],
     display: flex !important;
     align-items: center;
 }
+
+/* Styles sidebar toggle + ligne sélectionnée */
+/* ── Ligne DataTable sélectionnée ── */
+  .table tbody tr.row-selected > td {
+    background: rgba(26, 107, 74, 0.08) !important;
+    border-left: 3px solid var(--color-accent, #0abf7c);
+  }
+
+  /* ── Transitions fluides (doivent être déclarées ici, APRÈS le CSS du template,
+        pour ne pas être écrasées par Bootstrap/css/style.css) ── */
+  /*
+  #sidebar {
+    transition: width 0.3s cubic-bezier(.4,0,.2,1),
+                transform 0.3s cubic-bezier(.4,0,.2,1) !important;
+    overflow: hidden !important;
+    will-change: width;
+  }
+  */
+
+  /*
+  #main {
+    transition: margin-left 0.3s cubic-bezier(.4,0,.2,1) !important;
+    will-change: margin-left;
+  }
+    */
+
+  /* ── Mode réduit (icônes seules) — desktop ── */
+  body.toggle-sidebar #sidebar {
+    width: 68px !important;
+    min-width: 68px !important;
+  }
+  
+  body.toggle-sidebar #main {
+    margin-left: 68px !important;
+  }
+  /* Masquer textes et chevrons */
+  body.toggle-sidebar #sidebar .nav-link span,
+  body.toggle-sidebar #sidebar .nav-link .bi-chevron-down,
+  body.toggle-sidebar #sidebar .sidebar-section-label {
+    opacity: 0;
+    width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block; /* garder dans le flux mais invisible — évite le reflow brutal */
+    transition: opacity 0.2s ease, width 0.2s ease;
+  }
+  body:not(.toggle-sidebar) #sidebar .nav-link span,
+  body:not(.toggle-sidebar) #sidebar .nav-link .bi-chevron-down {
+    opacity: 1;
+    width: auto;
+    transition: opacity 0.25s ease 0.05s, width 0.25s ease;
+  }
+  /* Centrer les icônes et agrandir légèrement */
+  body.toggle-sidebar #sidebar .nav-link {
+    justify-content: center !important;
+    padding: 11px 0 !important;
+  }
+  body.toggle-sidebar #sidebar .nav-link i:first-child {
+    font-size: 1.25rem !important;
+    width: auto !important;
+    margin: 0 !important;
+  }
+  /* Fermer les sous-menus */
+  body.toggle-sidebar #sidebar .nav-content {
+    display: none !important;
+  }
+  /* Tooltip natif au survol en mode réduit */
+  body.toggle-sidebar #sidebar .nav-link {
+    position: relative;
+  }
+
+  /* ── Mobile : slide depuis la gauche ── */
+  @media (max-width: 1199px) {
+    #sidebar {
+      transform: translateX(-100%);
+      width: var(--sidebar-width, 240px) !important;
+    }
+    #sidebar.sidebar-mobile-open {
+      transform: translateX(0);
+    }
+    /* Overlay semi-transparent derrière le sidebar mobile */
+    #sidebar.sidebar-mobile-open::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.35);
+      z-index: -1;
+    }
+    #main {
+      margin-left: 0 !important;
+    }
+  }