/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS*/
/* ==== Thème Edge pour Dolibarr ==== */ /* Dégradé violet/bleu horizontal + bordures arrondies */ /* Le contenu du menu gauche garde le style Dolibarr par défaut */ :root { --edge-bg: linear-gradient(90deg, #8840B8 0%, #9A2CC9 50%, #3F28EB 100%); --edge-accent: #0078d7; --edge-hover: rgba(255, 255, 255, 0.15); --edge-text: #ffffff; --edge-font: "Segoe UI", Roboto, sans-serif; } /* ===== Barre du haut ===== */ div.tmenu { background: var(--edge-bg) !important; color: var(--edge-text) !important; height: 50px; border-bottom: 2px solid var(--edge-accent); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-family: var(--edge-font); border-radius: 20px; /* coins arrondis */ margin: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } /* Menus gauche et droit dans la barre du haut */ div.tmenu .tmenuleft, div.tmenu .tmenuright { display: flex; gap: 10px; } div.tmenu a { color: var(--edge-text) !important; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 500; transition: background 0.2s, color 0.2s, transform 0.1s; } div.tmenu a:hover { background-color: var(--edge-hover) !important; transform: translateY(-1px); } /* Effet léger de surbrillance (optionnel) */ div#id-left::before, div#leftmenu::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05) ); pointer-events: none; } /* ===== Contenu principal ===== */ div#id-right, div.fiche { border-radius: 5px; background-color: #ffffff; padding: 5px; } /* ===== Responsive ===== */ @media (max-width: 900px) { div.tmenu { flex-direction: column; height: auto; padding: 10px; } div.tmenu .tmenuleft, div.tmenu .tmenuright { flex-direction: column; align-items: flex-start; } div#id-left, div#leftmenu { margin: 2px; border-radius: 16px; } } /* ===== Stabilisation ciblée pour pages produit (éviter que le tableau "descende") ===== */ /* Adapté pour /product/price.php et /product/price_suppliers.php */ #id-right, /* zone Dolibarr principale */ .fiche, .product-table-container, .center-tables { position: relative; min-height: 200px; /* réserve l'espace où le tableau s'affiche */ box-sizing: border-box; } /* ====== Dolibarr — Login moderne, centré et clair ====== */ :root { --card-w: 600px; /* largeur de la carte */ --accent-a: #6d28d9; /* violet foncé */ --accent-b: #3b82f6; /* bleu clair */ --input-bg: rgba(255, 255, 255, 0.18); /* couleur champs plus claire */ --input-border: rgba(255, 255, 255, 0.35); --input-bg-focus: rgba(255, 255, 255, 0.28); --glass: rgba(255,255,255,0.10); --glass-2: rgba(255,255,255,0.06); --text: #6F27F5; --muted: rgba(255,255,255,0.75); --radius: 14px; --input-h: 50px; --transition: 220ms ease; font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial; } /* Centrage total */ html, body { height: 100%; margin: 0; padding: 0; } body.login { display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #6d28d9, #3b82f6); min-height: 100vh; } /* === Carte de connexion === */ #login, .login_center { display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--card-w); max-width: 90%; padding: 38px 32px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); border: 1px solid var(--glass-2); box-shadow: 0 8px 35px rgba(0, 0, 0, 0.01); color: var(--text); text-align: center; animation: fadeIn 2.0s ease both; } /* Animation légère */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Titre */ #login h1, .login_center h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 25px; color: #fff; } /* Champs de saisie */ #login input[type="text"], #login input[type="password"], .login_center input[type="text"], .login_center input[type="password"] { width: 70%; height: var(--input-h); padding: 0 14px; margin-bottom: 16px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 15px; outline: none; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); box-sizing: border-box; } /* Effet focus */ #login input:focus, .login_center input:focus { background: var(--input-bg-focus); border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); } /* Bouton Se connecter */ #login input[type="submit"], .login_center input[type="submit"] { width: 80%; height: var(--input-h); border: none; border-radius: 10px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 18px rgba(59,130,246,0.18); } #login input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(59,130,246,0.25); } /* Texte secondaire */ #login .login_line, .login_center .login_line { font-size: 13px; color: var(--muted); margin-top: 10px; } /* Responsive */ @media (max-width: 480px) { :root { --card-w: 90%; --input-h: 46px; } #login { padding: 30px 22px; } } /* ============================== Dolibarr - Bridge Multicolor Icons Only ============================== */ /* Palette Bridge multicolore */ :root { --bridge-blue: #4C8BF5; --bridge-green: #2ECC71; --bridge-orange: #F5A623; --bridge-red: #E74C3C; --bridge-purple: #9B59B6; --bridge-cyan: #1ABC9C; --bridge-grey-light: #f5f7fa; } /* --- Icônes modernisées (hors menu principal) --- */ .fa, .fas, .far, .fal, .fab { font-size: 1.2em; transition: transform 0.25s ease, filter 0.25s ease; } /* Ne rien changer dans le menu principal */ .mainmenu i { color: inherit !important; background: none !important; transform: none !important; filter: none !important; } /* --- Couleurs dynamiques selon le type d’icône --- */ .fa-user, .fa-users, .fa-user-circle { color: var(--bridge-blue); } /* utilisateurs */ .fa-building, .fa-warehouse { color: var(--bridge-purple); } /* entreprises / stock */ .fa-shopping-cart, .fa-cart-plus { color: var(--bridge-orange); } /* ventes */ .fa-euro-sign, .fa-dollar-sign, .fa-money-bill { color: var(--bridge-green); } /* finances */ .fa-cog, .fa-tools, .fa-wrench { color: var(--bridge-cyan); } /* réglages */ .fa-exclamation-triangle, .fa-times-circle, .fa-ban { color: var(--bridge-red); } /* alertes */ .fa-calendar, .fa-clock, .fa-hourglass { color: var(--bridge-purple); } /* temps / agenda */ .fa-file, .fa-folder, .fa-clipboard { color: var(--bridge-blue); } /* documents */ .fa-envelope, .fa-comment, .fa-bell { color: var(--bridge-orange); } /* communication */ /* --- Effets visuels légers --- */ div:not(.mainmenu) .fa:hover, div:not(.mainmenu) .fas:hover, div:not(.mainmenu) .far:hover { transform: scale(1.15); filter: brightness(1.2); } /* --- Fond doux autour des icônes (optionnel) --- */ div:not(.mainmenu) i.fa { background: var(--bridge-grey-light); border-radius: 10px; padding: 5px; margin-right: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } /* ============================== WIDGETS / DASHBOARD ICONS – Bridge Multicolor (valeurs fines, sans edge) ============================== */ /* Boîtes de stats (accueil Dolibarr) */ .boxstats, .boxstatsindicator, .boxstatscontainer { border-radius: 14px; background: #ffffff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); padding: 5px 9px; transition: transform 0.2s ease, box-shadow 0.3s ease; } .boxstats:hover, .boxstatsindicator:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); } /* Icônes dans les widgets */ .boxstats i.fa, .boxstatsindicator i.fa, .widget i.fa { font-size: 1.8rem; color: white; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: none; box-shadow: none; padding: 0; transition: all 0.25s ease; } /* Couleurs selon le type d’icône */ .boxstats i.fa-user, .boxstats i.fa-users { color: #4C8BF5; } .boxstats i.fa-file-invoice, .boxstats i.fa-file-alt { color: #A55EEA; } .boxstats i.fa-dollar-sign, .boxstats i.fa-money-bill, .boxstats i.fa-credit-card { color: #27AE60; } .boxstats i.fa-box, .boxstats i.fa-cubes, .boxstats i.fa-truck { color: #F39C12; } .boxstats i.fa-exclamation-triangle, .boxstats i.fa-times-circle { color: #E74C3C; } .boxstats i.fa-chart-bar, .boxstats i.fa-chart-line { color: #00B4DB; } /* Animation subtile au survol */ .boxstats i.fa:hover, .boxstatsindicator i.fa:hover { transform: scale(1.15); filter: brightness(1.15); } /* Texte et valeurs : proportions fines, sans edge */ .boxstats .boxstatstext, .boxstatsindicator .boxstatstext { font-weight: 500; font-size: 0.88rem; color: #3a3c4a; margin-top: 3px; } .boxstats .boxstatsvalue, .boxstatsindicator .boxstatsvalue { font-size: 0.85rem; /* Taille fine */ font-weight: 600; color: #1e2a3a; margin-top: 2px; letter-spacing: normal; /* ???? Suppression du spacing (edge) */ padding: 0; /* ???? Pas de marge interne */ border: none; /* ???? Pas de bordure visible */ background: none; /* ???? Pas de fond */ box-shadow: none; /* ???? Pas d’effet de relief */ } /* Alignement global : icône + texte + valeur */ .boxstats .boxstatscontent, .boxstatsindicator .boxstatscontent { display: flex; align-items: center; gap: 10px; } /* Réduction légère des marges */ .boxstatscontainer { padding: 6px; } /* ==== Modern Edge Dashboard Cards for Dolibarr ==== */ div.fichecenter > div:nth-child(1) div.divdashboardwidget, div.fichecenter > div:nth-child(1) .box, div.divdashboardwidget, div.boxstats { background: linear-gradient(145deg, #ffffff 0%, #f3f0ff 100%); border: 1px solid #e4dff8; border-radius: 16px; box-shadow: 0 4px 8px rgba(160, 120, 255, 0.1), 0 1px 3px rgba(0,0,0,0.05); transition: all 0.3s ease-in-out; padding: 14px; } /* Hover effect */ div.divdashboardwidget:hover, div.boxstats:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(160, 120, 255, 0.2); border-color: #b996ff; } /* Titles inside the cards */ div.divdashboardwidget h3, div.boxstats h3 { font-weight: 600; color: #4b2fbf; text-transform: capitalize; letter-spacing: 0.3px; } /* Values or main text */ div.divdashboardwidget .boxstatscontent, div.boxstats .boxstatscontent { font-size: 15px; font-weight: 500; color: #333; } /* Icons style (if any are used) */ div.divdashboardwidget i, div.boxstats i { font-size: 28px; color: #7d52f6; margin-right: 6px; vertical-align: middle; transition: color 0.3s ease; } div.divdashboardwidget:hover i, div.boxstats:hover i { color: #9b6eff; } /* Optional glassmorphism touch */ @supports (backdrop-filter: blur(8px)) { div.divdashboardwidget, div.boxstats { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); } } /* ====== Design Edge blanc & vert pour les familles de produits/services ====== */ /* Bloc famille produit/service principal */ div.fichecenter .productfamily, div.fichecenter .servicefamily, div.fichecenter .category, div.fichecenter .catcol, div.fichecenter .catline, div.fichecenter .catcard, div.fichecenter .fichehalf .box { background: linear-gradient(145deg, #ffffff 0%, #f6fff9 100%) !important; border: 1px solid rgba(39,174,96,0.25) !important; border-radius: 14px !important; box-shadow: 0 6px 16px rgba(39,174,96,0.08), 0 2px 6px rgba(0,0,0,0.05) !important; transition: all 0.3s ease !important; padding: 10px 14px !important; margin: 10px !important; } /* Effet survol vert clair */ div.fichecenter .productfamily:hover, div.fichecenter .servicefamily:hover, div.fichecenter .category:hover, div.fichecenter .catcol:hover { transform: translateY(-4px); border-color: #2ecc71 !important; box-shadow: 0 10px 22px rgba(46,204,113,0.15) !important; } /* Titre ou nom de la famille */ div.fichecenter .productfamily h3, div.fichecenter .servicefamily h3, div.fichecenter .category h3 { color: #27ae60 !important; font-weight: 600 !important; font-size: 16px !important; margin: 6px 0 !important; text-align: center !important; } /* Icône ou image de la famille */ div.fichecenter .productfamily img, div.fichecenter .servicefamily img, div.fichecenter .category img { max-width: 70px !important; height: auto !important; margin: 6px auto !important; display: block !important; border-radius: 10px !important; box-shadow: 0 4px 8px rgba(39,174,96,0.15) !important; } /* Texte ou description */ div.fichecenter .productfamily .description, div.fichecenter .servicefamily .description { color: #333 !important; font-size: 14px !important; text-align: center !important; margin-top: 4px !important; } /* Glass effect si supporté */ @supports (backdrop-filter: blur(6px)) { div.fichecenter .productfamily, div.fichecenter .servicefamily, div.fichecenter .category { background: rgba(255,255,255,0.8) !important; backdrop-filter: blur(8px); } } /* ===== Modern Edge (Blanc & Vert) pour les widgets Dolibarr ===== */ :root{ --edge-accent: #27ae60; /* Vert principal */ --edge-accent-2: #2ecc71; /* Vert clair */ --edge-bg-start: #ffffff; /* Blanc pur */ --edge-bg-end: #f6fff9; /* Blanc-vert très doux */ --edge-outline: rgba(39,174,96,0.25); } /* Cadrage principal */ .fichecenter .fiche, .fichecenter .bloc, .fichecenter .box, .fichecenter .card, .fichecenter .widget, .fichecenter .boxstats, .divdashboardwidget, .widgetbox, .modulewidget, .block, .card, .boxcontainer { background: linear-gradient(145deg, var(--edge-bg-start) 0%, var(--edge-bg-end) 100%) !important; border: 1px solid var(--edge-outline) !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(39,174,96,0.08), 0 2px 6px rgba(0,0,0,0.04) !important; transition: all 0.3s ease-in-out !important; padding: 14px !important; margin-bottom: 14px !important; } /* Effet hover : vert plus intense + ombre douce */ .fichecenter .bloc:hover, .fichecenter .box:hover, .fichecenter .card:hover { transform: translateY(-4px) !important; border-color: var(--edge-accent-2) !important; box-shadow: 0 10px 24px rgba(46,204,113,0.15) !important; } /* Titre dans les cartes */ .fichecenter .box h3, .fichecenter .bloc h3, .fichecenter .card h3, .fichecenter .widget h3 { color: var(--edge-accent) !important; font-weight: 600 !important; margin-bottom: 8px !important; } /* Icônes */ .fichecenter i, .fichecenter .icon { color: var(--edge-accent) !important; font-size: 24px !important; vertical-align: middle !important; transition: color .3s ease; } .fichecenter .bloc:hover i, .fichecenter .box:hover i { color: var(--edge-accent-2) !important; } /* Valeurs et texte */ .fichecenter .boxstatscontent, .fichecenter .boxstats { color: #333 !important; font-weight: 500 !important; } /* Badges */ .fichecenter .badge { background: rgba(39,174,96,0.08) !important; color: var(--edge-accent) !important; border-radius: 10px !important; font-weight: 600 !important; } /* Glass effet si supporté */ @supports (backdrop-filter: blur(6px)) { .fichecenter .bloc, .fichecenter .box, .fichecenter .card { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(10px) !important; } } /* ==== Couleur des icônes État de paiement (Factures) ==== */ /* ???? Impayé */ .fa-circle.text-danger, .fa-times-circle, .fa-times, .badge-status0 i, .badge-status4 i, .statusref.notpaid i, td.status i.fa-times { color: #e74c3c !important; /* rouge */ } /* ???? Règlement commencé */ .fa-hourglass-half, .fa-play-circle, .badge-status1 i, .badge-status3 i, .statusref.partiallypaid i, td.status i.fa-hourglass-half { color: #f39c12 !important; /* orange */ } /* ???? Payé */ .fa-check-circle, .fa-check, .badge-status2 i, .badge-status6 i, .statusref.paid i, td.status i.fa-check { color: #27ae60 !important; /* vert */ } /* Effet doux au survol (facultatif) */ td.status i.fa:hover { opacity: 0.85; transform: scale(1.15); transition: all 0.2s ease; } /* ===== Modern top-menu icons — Tiers (rouge) & Produits/Services (orange) ===== */ /* Variables couleurs */ :root{ --menu-tier-color: #e74c3c; /* rouge */ --menu-prod-color: #f39c12; /* orange */ --menu-icon-size: 18px; --menu-icon-bg: rgba(0,0,0,0.04); } /* Sélecteurs généraux — icônes dans la barre de menu haute */ #topmenu a i, .topmenu a i, .menu_top a i, .mainmenu a i, ul.topmenu a i, #menu a i, .navbar a i { font-size: var(--menu-icon-size) !important; line-height: 1 !important; display: inline-block !important; width: 34px !important; height: 34px !important; text-align: center !important; padding-top: 7px !important; border-radius: 8px !important; background: var(--menu-icon-bg) !important; transition: transform .18s ease, box-shadow .18s ease, color .18s ease !important; box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important; color: inherit; /* par défaut la couleur du texte */ } /* Hover global pour les icônes */ #topmenu a:hover i, .topmenu a:hover i, .menu_top a:hover i, .mainmenu a:hover i { transform: translateY(-2px) !important; box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important; } /* ========== CIBLAGE PAR TITRE (si le lien a un title = "Tiers" ou "Produits") ========== */ /* Tiers -> rouge */ a[title*="Tiers"] i, a[title*="Third party"] i, /* fallback anglais */ a[title*="Clients"] i, a[title*="Fournisseurs"] i { color: var(--menu-tier-color) !important; border: 1px solid rgba(231,76,60,0.12) !important; background: rgba(231,76,60,0.06) !important; } /* Produits / Services -> orange */ a[title*="Produits"] i, a[title*="Services"] i, a[title*="Products"] i, a[title*="Services"] i { color: var(--menu-prod-color) !important; border: 1px solid rgba(243,156,18,0.12) !important; background: rgba(243,156,18,0.06) !important; } /* ========== CIBLAGE PAR CLASSE (si ton thème utilise .menu_tiers / .menu_product etc.) ========== */ /* Tiers (classes communes) */ .menu_tiers i, .menu-thirdparty i, .menu-societe i, .menu-contact i, #topmenu .menu_tiers i { color: var(--menu-tier-color) !important; border-color: rgba(231,76,60,0.12) !important; } /* Produits / Services (classes communes) */ .menu_products i, .menu_product i, .menu_services i, .menu_service i, #topmenu .menu_products i { color: var(--menu-prod-color) !important; border-color: rgba(243,156,18,0.12) !important; } /* ========== CIBLAGE PAR ICONE EXISTANTE (si icones ont classes fa-*) ========== */ /* Si l'icône utilise FontAwesome (fa-users, fa-box, fa-cubes, etc.) */ .fa-users, .fa-user-friends, .fa-user { color: var(--menu-tier-color) !important; } .fa-box, .fa-cubes, .fa-archive, .fa-box-open { color: var(--menu-prod-color) !important; } /* Ajustements responsive (taille icône plus petite sur petit écran) */ @media (max-width: 800px){ #topmenu a i, .topmenu a i { width: 30px !important; height: 30px !important; padding-top: 6px !important; font-size: 16px !important; } } /* ==== TITRES DOLIBARR (H1 / H2 / H3) ==== */ div.fiche h1, div.fiche h2, div.fiche h3, div.tabBar h1, div.tabBar h2 { background: #ffffff; padding: 14px 18px; border-radius: 14px; margin-bottom: 16px !important; font-weight: 700; color: #4a2ea3; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 6px solid #8f5ae8; } /* ==== CADRES DES BLOCS — MESURES D'ORIGINE DOLIBARR ==== */ div.fiche, div.fichecenter, div.fichetwothirdright, div.fichethirdleft { background: #ffffff !important; border-radius: 12px; /* arrondi moderne conservé */ box-shadow: 0 4px 14px rgba(0,0,0,0.06); /* ombre moderne conservée */ border: 1px solid #e8e6f5; /* bord moderne conservé */ margin-bottom: 20px !important; /* Dolibarr standard */ padding: 10px 12px !important; /* Dolibarr standard */ overflow: hidden; /* empêche débordement */ } /* ==== TABLEAUX — VERSION STABLE (ne déborde pas) ==== */ table.noborder, table.border { width: 100% !important; border-collapse: collapse !important; /* version Dolibarr classique */ border-spacing: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; } /* Lignes du tableau – style moderne mais compatible Dolibarr */ table.noborder td, table.border td { background: #faf8ff !important; padding: 8px 10px !important; /* Taille des cellules Dolibarr */ border-radius: 8px !important; font-weight: 600; color: #3E2A8C; border: 1px solid #ece9f8; } /* ==== LABELS ==== */ span.fieldlabel, td.fieldrequired, td.fieldtitle { font-weight: 700; color: #7b57e5; } /* ==== FORMULAIRES ==== */ div.fiche > form { background: #ffffff; padding: 12px !important; /* taille d’origine Dolibarr */ border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #ece9f8; } /* Couleur moderne de sélection pour les tableaux de choix */ .ui-state-hover, .ui-state-active, .ui-state-focus, .ui-state-highlight, .ui-menu-item-wrapper.ui-state-active { background: #e6deff !important; /* Violet pastel moderne */ color: #3e2a8c !important; /* Texte violet foncé moderne */ border-color: #c5b2ff !important; /* Bordure assortie */ } /* ==== Sélection moderne dans les tableaux Dolibarr ==== */ /* Ligne survolée */ table.noborder tr:hover td, table.border tr:hover td { background: #efe9ff !important; /* violet clair */ cursor: pointer !important; } /* Ligne sélectionnée (par exemple clic dans prises de commande, factures…) */ tr.rowselected td, tr.selected td, tr.ui-state-active td { background: #e6deff !important; border-color: #c5b2ff !important; color: #3e2a8c !important; font-weight: 600 !important; } /* Case cochée + highlight */ tr:nth-child(even).rowselected td { background: #ddcfff !important; } /* === Dropdowns / listes de choix (jQuery UI Autocomplete) === */ .ui-state-hover, .ui-state-active, .ui-state-focus, .ui-state-highlight, .ui-menu-item-wrapper.ui-state-active { background: #e6deff !important; color: #3e2a8c !important; border-color: #c5b2ff !important; font-weight: 600 !important; } /* === Select2 (si utilisé sur ton Dolibarr) === */ .select2-results__option--highlighted { background: #e6deff !important; color: #3e2a8c !important; } .select2-results__option--selected { background: #d7c7ff !important; color: #31205f !important; } /* === Inputs recherchables / autocompletion Dolibarr === */ .ui-autocomplete { border-radius: 10px !important; border: 1px solid #c5b2ff !important; background: #ffffff; overflow: hidden; } .ui-menu-item-wrapper { padding: 8px 10px !important; font-weight: 500 !important; } /* ===== TABLEAUX COMPACTS — Edge Clean Mode ===== */ /* Réduction de la hauteur des lignes */ table.noborder td, table.border td { padding: 5px 8px !important; /* au lieu de 8px 10px */ font-size: 13px !important; /* texte légèrement réduit */ line-height: 1.2 !important; } /* Réduction des marges internes du tableau */ table.noborder, table.border { margin: 0 !important; padding: 0 !important; } /* Réduction hauteur des titres de colonnes */ table.noborder th, table.border th { padding: 6px 8px !important; font-size: 13px !important; background: #f4f0ff !important; /* léger violet pour rester dans ton thème */ border-radius: 6px !important; } /* Bordure plus fine */ table.noborder td, table.border td, table.noborder th, table.border th { border-width: 1px !important; } /* Lignes encore plus compactes en responsive */ @media (max-width: 900px) { table.noborder td, table.border td { padding: 4px 6px !important; font-size: 12px !important; } } /* ===== TABLEAUX PROPOSITIONS / COMMANDES / FACTURES — COMPACT ===== */ /* Réduction des lignes dans les fiches Devis / Commandes / Factures */ .fiche table.border td, .fiche table.noborder td { padding: 4px 6px !important; /* plus fin */ font-size: 12.5px !important; /* texte légèrement plus petit */ line-height: 1.15 !important; /* réduit la hauteur */ } /* Titres de colonnes compactés */ .fiche table.border th, .fiche table.noborder th { padding: 5px 6px !important; font-size: 12.5px !important; line-height: 1.15 !important; } /* Réduction des marges des tableaux */ .fiche table.border, .fiche table.noborder { margin: 2px 0 !important; padding: 0 !important; } /* Réduction des cellules contenant les labels (libellés) */ .fiche span.fieldlabel, .fiche td.fieldtitle, .fiche td.fieldrequired { font-size: 12.5px !important; padding: 3px 4px !important; } /* Réduction des champs de saisie dans les fiches */ .fiche input, .fiche select, .fiche textarea { padding: 4px 6px !important; height: 28px !important; font-size: 12.5px !important; } /* Zone "conditions de règlement" et autres blocs infos */ .fiche .fichehalfright, .fiche .fichehalfleft, .fiche .fichetwothirdright, .fiche .fichethirdleft { padding: 6px !important; margin-bottom: 8px !important; } /* Responsive ultra-compact */ @media (max-width: 900px) { .fiche table.border td, .fiche table.noborder td { padding: 3px 5px !important; font-size: 12px !important; } } /* ========= FACTURES — Couleur Montant à Payer & Reste à Payer ========= */ /* Montant à payer (vert) */ table.border td:contains("Montant à payer") + td, table.noborder td:contains("Montant à payer") + td { color: #27ae60 !important; /* vert */ font-weight: 700 !important; } /* Montant payé (vert foncé) */ table.border td:contains("Montant payé") + td, table.noborder td:contains("Montant payé") + td { color: #1e874b !important; font-weight: 700 !important; } /* Reste à payer (rouge) */ table.border td:contains("Reste à payer") + td, table.noborder td:contains("Reste à payer") + td { color: #e74c3c !important; /* rouge */ font-weight: 700 !important; } /* Solde dû / montant dû (rouge foncé) */ table.border td:contains("Solde") + td, table.noborder td:contains("Solde") + td { color: #c0392b !important; font-weight: 700 !important; }