/* ===== CRM v2 – Pennylane-like (light only) ===== */ /* S’applique uniquement si */ .v2{ --bg:#F7F8FA; --surface:#FFFFFF; --text:#101828; --muted:#667085; --border:#EAECF0; --shadow:0 6px 18px rgba(16,24,40,.06); --r:12px; --primary:#2E90FA; --primary-600:#1570EF; --accent:#2E90FA; --success:#12B76A; --warning:#F79009; --danger:#F04438; --info:#2E90FA; color:var(--text); background:var(--bg); } @media (prefers-color-scheme: dark){ .v2{} } /* on force le thème clair */ /* ===== Layout ===== */ .v2 #page-content{ background:var(--bg) !important; } .v2 .content-header, .v2 .breadcrumb-top{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r); box-shadow:var(--shadow); margin:0 0 16px !important; } /* ===== Header / Navbar ===== */ .v2 header.navbar-default, .v2 header.navbar-inverse{ background:var(--surface) !important; border:0 !important; box-shadow:0 1px 0 var(--border); } .v2 .navbar-default .navbar-nav>li>a, .v2 .navbar-inverse .navbar-nav>li>a{ color:var(--text) !important; } .v2 .navbar-default .navbar-nav>li>a:hover{ background:rgba(46,144,250,.08) !important; border-radius:10px; } /* ===== Sidebar fixe + gradient ===== */ .v2 #sidebar, .v2 #sidebar-alt{ background:transparent !important; border-right:1px solid var(--border); } .v2 .sidebar-nav-mini-hide{ color: white !important; } .v2 .sidebar-user{ background: #00c8ff; border-radius: 0px 15px 15px 0; } .v2 .sidebar-user-links a{ opacity: 1 !important; color: white; } .v2 .sidebar-user-links a:hover{ color: var(--primary); } .v2 #page-container, #sidebar, #sidebar-alt { background: linear-gradient( 180deg, #1a365d 0%, #2d5aa0 20%, #4299e1 45%, #4299e1 55%, #2d5aa0 80%, #1a365d 100%)!important; } @media (min-width:992px){ .v2 #sidebar{ width:240px !important; opacity:1 !important; } .v2 #main-container{ margin-left:240px !important; } .v2 #sidebar, .v2 #main-container, .v2 header.navbar-fixed-top, .v2 header.navbar-fixed-bottom{ transition:none !important; } .v2 .sidebar-partial #sidebar, .v2 .sidebar-visible-lg #sidebar, .v2 .sidebar-partial #sidebar:hover, .v2 .sidebar-visible-lg.sidebar-partial #sidebar{ width:240px !important; } .v2 .sidebar-partial #main-container, .v2 .sidebar-partial #sidebar:hover + #main-container, .v2 .sidebar-visible-lg #main-container{ margin-left:240px !important; } } .v2 .sidebar-brand,.v2 .sidebar-title{ background:transparent !important; color:#344054; } .v2 .sidebar-nav a{ color:white !important; border-radius:10px; margin:2px 8px; padding:8px 10px; } .v2 #sidebar .sidebar-nav a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; } .v2 #sidebar .sidebar-nav li.active > a { background: rgba(255,255,255,.25) !important; color: #fff !important; } .v2 .sidebar-nav li.active>a:before{ content:""; position:absolute; left:-8px; top:8px; bottom:8px; width:3px; background:var(--primary); border-radius:3px; } /* ===== Cards / Blocks ===== */ .v2 .block, .v2 .widget, .v2 .panel{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r) !important; box-shadow:var(--shadow); } .v2 .block-title{ background:#F9FAFB !important; border-bottom:1px solid var(--border) !important; margin:-20px -15px 16px !important; border-top-left-radius:var(--r); border-top-right-radius:var(--r); } .v2 .block-title h1,.v2 .block-title h2,.v2 .block-title h3,.v2 .block-title h4{ font-weight:700; color:#101828; } /* ===== Tuiles header (icônes + texte) ===== */ .v2 .nav-horizontal { padding: 6px 0 0; display: flex; justify-content: space-between; } .v2 .nav-horizontal a { min-width: 150px; background: #fff; color: #101828; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; justify-content: center; align-items: center; text-align: center; gap: 6px; min-height: 50px; /* hauteur uniforme */ } .v2 .nav-horizontal a:hover { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(46, 144, 250, .12); } .v2 .nav-horizontal i { color: var(--primary); opacity: .9 !important; font-size: 20px !important; /* icônes un peu réduites */ line-height: 1; margin: 0; height: auto; display: block; } .v2 .nav-horizontal li.active a { box-shadow: 0 0 0 2px rgba(46, 144, 250, .18) inset; } /* ===== Labels / Chips alignés dans les tableaux ===== */ .v2 .ui-jqgrid tr.jqgrow td .label, .v2 .ui-jqgrid tr.jqgrow td .badge, .v2 .ui-jqgrid tr.jqgrow td .chip { display: inline-flex; align-items: center; /* centrage vertical */ justify-content: center; margin: 0; vertical-align: middle; line-height: 1.2; min-height: 22px; white-space: nowrap; } /* Puce décorative des chips */ .v2 .chip::before { flex-shrink: 0; margin-right: 4px; } /* ===== Boutons ===== */ .v2 .btn{ border-radius:10px !important; border:1px solid transparent; font-weight:600; padding:.55rem .9rem; } .v2 .btn-default{ background:#fff !important; border-color:var(--border) !important; color:#101828 !important; } .v2 .btn-primary{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; } .v2 .btn-info{ background:#EEF4FF !important; border-color:#D1E0FF !important; color:#1849A9 !important;display: flex; } .v2 .btn-success{ background:var(--success) !important; color:#fff !important; } .v2 .btn-warning{ background:var(--warning) !important; color:#fff !important; } .v2 .btn-danger{ background:var(--danger) !important; color:#fff !important; } .v2 .btn-primary.btn-alt{ background:#fff !important; color:var(--primary) !important; border-color:var(--primary) !important; } /* ===== Formulaires ===== */ .v2 .form-control, .v2 .input-group-addon{ background:#fff !important; color:#101828 !important; border:1px solid #D0D5DD !important; border-radius:10px !important; } .v2 .form-control:focus{ border-color:#84CAFF !important; box-shadow:0 0 0 4px rgba(46,144,250,.18) !important; outline:0; } .v2 .help-block{ color:#667085; } /* ===== Tables ===== */ .v2 table.table{ background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; } .v2 .table thead>tr>th{ background:#F9FAFB; border-bottom:1px solid var(--border); color:#344054; font-weight:700; padding:12px; } .v2 .table tbody>tr>td{ padding:12px; border-top:1px solid var(--border); } .v2 .table tbody>tr:hover>td{ background:#F8FAFF !important; } /* ===== jqGrid ===== */ .v2 .ui-jqgrid .ui-jqgrid-htable th{ height:40px; background:#F9FAFB !important; color:#344054; border-color:var(--border) !important; font-weight:700; } .v2 .ui-jqgrid tr.jqgrow td{ height:40px; border-color:var(--border) !important; } .v2 .ui-jqgrid .ui-state-hover, .v2 .ui-jqgrid tr.jqgrow:hover td{ background:#F8FAFF !important; } /* ===== Badges / Labels (génériques) ===== */ .v2 .label, .v2 .badge{ border-radius:999px !important; font-weight:700; padding:.22rem .55rem; } .v2 .label-primary{ background:#EFF8FF !important; color:#175CD3 !important; } .v2 .label-success{ background:#ECFDF3 !important; color:#027A48 !important; } .v2 .label-warning{ background:#FFFAEB !important; color:#B54708 !important; } .v2 .label-danger{ background:#FEF3F2 !important; color:#B42318 !important; } /* NOTE : les anciennes classes couleur (.colpurple, .colgreencan, etc.) NE sont PAS modifiées ici */ /* ===== Pagination ===== */ .v2 .pagination>li>a, .v2 .pagination>li>span{ background:#fff !important; color:#344054 !important; border:1px solid var(--border) !important; border-radius:8px !important; min-width:36px; height:36px; display:inline-grid; place-items:center; margin:0 3px; } .v2 .pagination>.active>a, .v2 .pagination>.active>span{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; } /* ===== Modales ===== */ .v2 .modal-content{ border:1px solid var(--border) !important; border-radius:14px !important; box-shadow:var(--shadow); } .v2 .modal-header{ border-bottom:1px solid var(--border) !important; } .v2 .modal-footer{ background:#F9FAFB !important; border-top:1px solid var(--border) !important; } /* ===== Liens ===== */ .v2 a{ color:var(--primary); } .v2 a:hover{ opacity:.85; } /* ===== Scrollbar ===== */ .v2 *{ scrollbar-width:thin; scrollbar-color:#B2DDFF #EFF6FF; } .v2 *::-webkit-scrollbar{ width:8px; height:8px; } .v2 *::-webkit-scrollbar-track{ background:#EFF6FF; } .v2 *::-webkit-scrollbar-thumb{ background:#B2DDFF; border-radius:10px; border:1px solid #EFF6FF; } /* ===== Responsive table → cartes (optionnel) ===== */ @media (max-width:1100px){ .v2 thead{ display:none; } .v2 table.table, .v2 table tbody, .v2 table tr, .v2 table td{ display:block; width:100%; } .v2 table.table tbody tr{ border:1px solid var(--border); border-radius:12px; margin-bottom:.8rem; padding:.4rem .6rem; background:#fff; } .v2 table.table tbody td{ border:0 !important; padding:.35rem 0 !important; } .v2 table.table tbody td::before{ content:attr(data-label); display:block; font-size:.78rem; color:var(--muted); margin-bottom:.1rem; } } /* --- Chips (si tu en as besoin ailleurs) --- */ .v2 .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; border-radius:999px; font-weight:700; font-size:12px; line-height:1; border:1px solid #EAECF0; background:#F9FAFB; color:#101828; white-space:nowrap; } .v2 .chip--informatique{ background:#EEF6FF; color:#175CD3; border-color:#D1E0FF; } .v2 .chip--photocopieurs{ background:#FDF2FA; color:#C11574; border-color:#FACBEA; } .v2 .chip--telephonie{ background:#FFF6ED; color:#C2410C; border-color:#FED7AA; } .v2 .chip--licenses,.v2 .chip--licences{ background:#ECFDF3; color:#027A48; border-color:#ABEFC6; } /* --- Barre “slider” verte statique --- */ .v2 .prgdash{ width:120px !important; height:10px !important; border-radius:999px; background:#EEF6F3; position:relative; overflow:hidden; transition:none !important; } .v2 .prgdashctt{ position:absolute; inset:0 auto 0 0; width:100% !important; border-radius:inherit; background:linear-gradient(180deg,#a1fcc7 0%,#61ff95 100%) !important; box-shadow:inset 0 0 0 1px #ABEFc6; }