/* ========================= LEASY – CSS unifié ========================= */ /* Conteneur principal (largeur fixe demandée) */ #leasy-wrap{ max-width: 900px; margin: 0 auto; } /* Petits textes d’état */ #sync-status, #leasy-stats{ font-size:13px; color:#1f2937; } /* Table widefat (base) */ #leasy-product-table.widefat{ border:1px solid #e5e7eb !important; border-radius:12px; overflow:hidden; } #leasy-product-table.widefat thead th{ background:#f5f7ff; color:#1f2937; border-bottom:1px solid #e5e7eb; } #leasy-product-table.widefat tbody tr:nth-child(odd){ background:#fff; } #leasy-product-table.widefat tbody tr:nth-child(even){ background:#fcfdff; } #leasy-product-table.widefat tbody tr:hover{ background:#f3f6ff; } #leasy-product-table.widefat td, #leasy-product-table.widefat th{ padding:10px; } /* Miniatures produit */ img.leasy-thumb{ width:48px; height:48px; object-fit:cover; border-radius:8px; border:1px solid #e5e7eb; } /* Boutons & contrôles (scopés au wrap) */ #leasy-wrap .leasy-controls{ gap:10px; flex-wrap:wrap; } /* Select "Toutes les catégories" en style bouton */ #leasy-wrap #category-filter{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:8px 34px 8px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff url('data:image/svg+xml;utf8,') no-repeat right 10px center; font-size:14px; color:#1f2937; line-height:1.2; } #leasy-wrap #category-filter:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); transform:translateY(-1px); } /* Champ recherche */ #leasy-wrap #product-search{ padding:8px 12px; border:1px solid #e5e7eb; border-radius:10px; min-width:200px; } /* Pagination (haut sticky + bas) */ #leasy-pagination-top{ position:sticky; top:0; z-index:5; background:#fff; padding:8px 0 4px; border-bottom:1px solid #f1f5f9; } #leasy-pagination{ text-align:center; margin:10px 0; } /* Style commun boutons (pagination + actions) */ #leasy-pagination-top .button, #leasy-pagination .button, #leasy-wrap button.save-btn, #leasy-wrap button#leasy-sync-btn, #leasy-wrap button#leasy-load-more{ border:1px solid #e5e7eb; background:#fff; color:#1f2937; border-radius:10px; padding:6px 10px; line-height:1.2; margin:0 3px; } #leasy-pagination-top .button.button-primary, #leasy-pagination .button.button-primary, #leasy-wrap button.save-btn.button-primary, #leasy-wrap button#leasy-sync-btn.button-primary{ background:#1f4aff; color:#fff; border-color:#1f4aff; } #leasy-pagination-top .button:hover, #leasy-pagination .button:hover, #leasy-wrap button.save-btn:hover, #leasy-wrap button#leasy-sync-btn:hover, #leasy-wrap button#leasy-load-more:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); } #leasy-wrap button.save-btn:disabled{ opacity:.7; cursor:not-allowed; } /* Incrémentation quantité */ button.qty-btn{ font-size:0; border:1px solid #e5e7eb; background:#eef2ff; color:#1f4aff; width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; margin:0 6px; } button.qty-btn[data-direction="up"]::after{ content:"+"; font-size:18px; } button.qty-btn[data-direction="down"]::after{ content:"−"; font-size:18px; } /* Valeur de stock */ .stock-value{ min-width:36px; display:inline-block; padding:4px 8px; background:#fff; border:1px dashed #e5e7eb; border-radius:8px; } /* Badge "(variable)" */ .leasy-badge-var{ display:inline-block; background:#1f4aff; color:#fff; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; margin-left:6px; vertical-align:middle; } /* Zoom preview */ #zoom-preview{ position:absolute !important; pointer-events:none; display:none; border:1px solid #e5e7eb; background:#fff; padding:6px; box-shadow:0 10px 22px rgba(0,0,0,.12); border-radius:10px; z-index:9999; margin:0 !important; transform:none !important; } #zoom-preview img{ max-width:300px; height:auto; display:block; border-radius:8px; } /* ========================= Responsive ========================= */ /* Mobile générique */ @media (max-width: 768px){ #leasy-wrap{ padding:0 10px; } /* Table en cartes */ #leasy-product-table.widefat thead{ display:none; } #leasy-product-table.widefat, #leasy-product-table.widefat tbody, #leasy-product-table.widefat tr, #leasy-product-table.widefat td{ display:block; width:100%; } #leasy-product-table.widefat tbody tr{ margin:10px 0; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.06); padding:10px; background:#fff; } #leasy-product-table.widefat tbody tr td{ border:none !important; padding:6px 0; } /* Centrage des contenus */ #leasy-product-table.widefat td{ text-align:center !important; } #leasy-product-table.widefat tbody tr td img.leasy-thumb{ margin:0 auto; display:block; } #leasy-product-table.widefat tbody tr td strong{ display:block; text-align:center; margin:6px 0; } .stock-value{ margin:0 auto; display:inline-block; } /* Tailles confort mobile */ img.leasy-thumb{ width:120px; height:120px; } button.qty-btn{ width:36px; height:36px; } /* Contrôles */ .leasy-controls{ justify-content:center; } } #leasy-product-table td.sku-cell{ color:#475569; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; } /* Placeholders quand vide (évite rétrécissement visuel) */ #leasy-product-table td.sku-cell:empty::after, #leasy-product-table td[data-field="price"]:empty::after, #leasy-product-table td[data-field="sale_price"]:empty::after{ content: "—"; color: #94a3b8; } /* Aligner + valeur + sur une ligne */ #leasy-product-table td.stock-cell{ white-space:nowrap; vertical-align:middle; } #leasy-product-table td.stock-cell .qty-btn{ display:inline-flex; margin:0 6px; vertical-align:middle; } #leasy-product-table td.stock-cell .stock-value{ display:inline-block; vertical-align:middle; } /* Largeurs stables (desktop) */ @media (min-width:769px){ #leasy-product-table{ table-layout: auto; } #leasy-product-table th:nth-child(1){ width:90px; } /* Image */ #leasy-product-table th:nth-child(3){ width:140px; } /* SKU */ #leasy-product-table th:nth-child(4), #leasy-product-table th:nth-child(5){ width:130px; } /* Prix / Promo */ #leasy-product-table th:nth-child(6){ width:170px; } /* Stock */ #leasy-product-table th:nth-child(7){ width:140px; } /* Actions */ } /* Prix barré quand promo active (affichage côté front seulement) */ .leasy-regular-strike { text-decoration: line-through; color:#64748b; } /* --- LEASY mobile cards --- */ .leasy-cardlist{ display:none !important; } .leasy-card{ border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; } .leasy-card-media img{ width:100%; height:120px; object-fit:cover; display:block; } .leasy-card-body{ padding:8px 10px; } .leasy-card-title{ font-weight:600; font-size:14px; line-height:1.2; margin-bottom:4px; color:#111827; } .leasy-card-sku{ font-size:12px; color:#6b7280; margin-bottom:6px; } .leasy-card-prices{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .leasy-card-prices .label{ display:block; font-size:11px; color:#6b7280; } .leasy-card-prices .value{ display:block; font-size:14px; font-weight:600; } @media (max-width: 782px){ /* hide table on mobile, show 2-up card grid */ .leasy-cardlist{ display:none !important; } } #leasy-product-table td:first-child{ padding-top:0 !important; } /* Align footer/buttons nicely */ #leasy-product-table .stock-cell, #leasy-product-table .save-cell{ margin-top:6px; } } /* --- LEASY 2.6.9 mobile grid usability --- */ @media (max-width: 782px){ /* bigger media */ /* show field labels in cards */ #leasy-product-table td[data-field="regular_price"]::before{ content:"PU : "; font-weight:700; color:#dc2626; margin-right:6px; } #leasy-product-table td[data-field="sale_price"]::before{ content:"PU promo : "; font-weight:700; color:#dc2626; margin-right:6px; } #leasy-product-table td.stock-cell::before{ content:"Stock : "; font-weight:700; color:#374151; margin-right:6px; display:block; margin-bottom:4px; } /* make editable cells clearer */ #leasy-product-table td[contenteditable="true"]{ border:1px dashed #e5e7eb; border-radius:8px; padding:8px !important; min-height:34px; background:#fafafa; } #leasy-product-table td[contenteditable="true"]:focus{ outline:2px solid #93c5fd; background:#fff; } /* keep variations toggle visible and spaced */ #leasy-product-table button[data-action="toggle-vars"]{ width:100%; margin-top:8px; } /* align save button to full width for tap */ #leasy-product-table .save-btn{ width:100%; margin-top:10px; } } /* removed old responsive block *//* Base: Desktop ≥ 1024px -> 4 columns */ #leasy-product-table{ display:block !important; width:100%; border-collapse:separate; border-spacing:0; } /* Tablet 782px–1023px -> 3 columns */ @media (max-width: 1023px){ } /* Mobile ≤ 781px -> 2 columns */ @media (max-width: 781px){ /* Labels for clarity on mobile */ #leasy-product-table td[data-field="regular_price"]::before{ content:"PU : "; font-weight:700; color:#dc2626; margin-right:6px; } #leasy-product-table td[data-field="sale_price"]::before{ content:"PU promo : "; font-weight:700; color:#dc2626; margin-right:6px; } #leasy-product-table td.stock-cell::before{ content:"Stock : "; font-weight:700; color:#374151; display:block; margin-bottom:4px; } #leasy-product-table td[contenteditable="true"]{ border:1px dashed #e5e7eb; border-radius:8px; padding:8px !important; background:#fafafa; min-height:34px; } #leasy-product-table td[contenteditable="true"]:focus{ outline:2px solid #93c5fd; background:#fff; } #leasy-product-table .save-btn{ width:100%; margin-top:10px; } #leasy-product-table button[data-action="toggle-vars"]{ width:100%; margin-top:8px; } } /* ---- LEASY 2.6.12: view toggle ---- */ .leasy-view-toggle{ display:flex; gap:8px; justify-content:flex-end; margin:8px 0 12px; } .leasy-view-toggle .leasy-view-btn.is-active{ box-shadow:0 0 0 2px rgba(59,130,246,.35) inset; } /* Default all: ensure wrapper exists */ #leasy-wrap{ width:100%; } /* GRID MODE */ #leasy-wrap.view-grid #leasy-cardlist{ display:none !important; } #leasy-wrap.view-grid #leasy-product-table{ display:block !important; width:100%; border-collapse:separate; border-spacing:0; } #leasy-wrap.view-grid #leasy-wrap.view-grid #leasy-wrap.view-grid #leasy-wrap.view-grid #leasy-wrap.view-grid /* Desktop wide ≥1280px: 5 cols */ @media (min-width: 1280px){ } /* Desktop 1024–1279: 4 cols (base) */ /* Tablet 782–1023: 3 cols */ @media (max-width: 1023px){ #leasy-wrap.view-grid } /* Mobile ≤ 781: 2 cols */ @media (max-width: 781px){ #leasy-wrap.view-grid #leasy-wrap.view-grid #leasy-product-table td[contenteditable="true"]{ border:1px dashed #e5e7eb; border-radius:8px; padding:8px !important; background:#fafafa; min-height:34px; } #leasy-wrap.view-grid #leasy-product-table td[contenteditable="true"]:focus{ outline:2px solid #93c5fd; background:#fff; } #leasy-wrap.view-grid #leasy-product-table .save-btn{ width:100%; margin-top:10px; } #leasy-wrap.view-grid #leasy-product-table button[data-action="toggle-vars"]{ width:100%; margin-top:8px; } } /* TABLE MODE */ #leasy-wrap.view-table #leasy-product-table{ display:table !important; width:100% !important; border-collapse:collapse !important; } #leasy-wrap.view-table #leasy-wrap.view-table #leasy-wrap.view-table #leasy-wrap.view-table #leasy-wrap.view-table /* ---- LEASY 2.6.13 toolbar + layout ---- */ .leasy-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 12px; flex-wrap:wrap; } .leasy-toolbar #leasy-pagination-top{ flex:1 1 auto; } .leasy-toolbar #leasy-view-toggle{ flex:0 0 auto; } /* ---- LEASY 2.6.15: scoped views ---- */ /* GRID MODE (default) */ #leasy-wrap.view-grid #leasy-cardlist{ display:none !important; } #leasy-wrap.view-grid #leasy-product-table{ display:block !important; width:100%; border-collapse:separate; border-spacing:0; } #leasy-wrap.view-grid #leasy-product-table thead{ display:none !important; } #leasy-wrap.view-grid #leasy-product-table tbody{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; } #leasy-wrap.view-grid #leasy-product-table tr{ display:block !important; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); } #leasy-wrap.view-grid #leasy-product-table td{ display:block !important; width:100% !important; padding:6px 0 !important; border:none !important; } #leasy-wrap.view-grid #leasy-product-table img.leasy-thumb{ width:100% !important; height:220px !important; object-fit:cover; border-radius:12px; } /* Tablet */ @media (max-width:1023px){ #leasy-wrap.view-grid #leasy-product-table tbody{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } /* Mobile */ @media (max-width:781px){ #leasy-wrap.view-grid #leasy-product-table tbody{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } #leasy-wrap.view-grid #leasy-product-table td[contenteditable="true"]{ border:1px dashed #e5e7eb; border-radius:8px; padding:8px !important; background:#fafafa; min-height:34px; } #leasy-wrap.view-grid #leasy-product-table td[contenteditable="true"]:focus{ outline:2px solid #93c5fd; background:#fff; } #leasy-wrap.view-grid #leasy-product-table .save-btn{ width:100%; margin-top:10px; } #leasy-wrap.view-grid #leasy-product-table button[data-action="toggle-vars"]{ width:100%; margin-top:8px; } } /* TABLE MODE */ #leasy-wrap.view-table #leasy-product-table{ display:table !important; width:100% !important; border-collapse:collapse !important; } #leasy-wrap.view-table #leasy-product-table thead{ display:table-header-group !important; } #leasy-wrap.view-table #leasy-product-table tbody{ display:table-row-group !important; } #leasy-wrap.view-table #leasy-product-table tr{ display:table-row !important; } #leasy-wrap.view-table #leasy-product-table td{ display:table-cell !important; padding:10px !important; border:1px solid #e5e7eb !important; vertical-align:middle; } #leasy-wrap.view-table #leasy-product-table img.leasy-thumb{ width:48px !important; height:48px !important; object-fit:cover !important; border-radius:8px; } /* ---- LEASY 2.6.16: Table view column layout ---- */ #leasy-wrap.view-table #leasy-product-table{ table-layout:fixed !important; } #leasy-wrap.view-table #leasy-product-table th, #leasy-wrap.view-table #leasy-product-table td{ text-align:left !important; } /* Column widths (Image, Nom, SKU, PU, PU promo, Stock, Actions) */ #leasy-wrap.view-table #leasy-product-table th:nth-child(1), #leasy-wrap.view-table #leasy-product-table td:nth-child(1){ width:80px !important; } #leasy-wrap.view-table #leasy-product-table th:nth-child(2), #leasy-wrap.view-table #leasy-product-table td:nth-child(2){ width:auto !important; min-width:240px !important; } #leasy-wrap.view-table #leasy-product-table th:nth-child(3), #leasy-wrap.view-table #leasy-product-table td:nth-child(3){ width:140px !important; } #leasy-wrap.view-table #leasy-product-table th:nth-child(4), #leasy-wrap.view-table #leasy-product-table td:nth-child(4){ width:120px !important; } #leasy-wrap.view-table #leasy-product-table th:nth-child(5), #leasy-wrap.view-table #leasy-product-table td:nth-child(5){ width:120px !important; } #leasy-wrap.view-table #leasy-product-table th:nth-child(6), #leasy-wrap.view-table #leasy-product-table td:nth-child(6){ width:140px !important; } #leasy-wrap.view-table #leasy-product-table th:nth-child(7), #leasy-wrap.view-table #leasy-product-table td:nth-child(7){ width:160px !important; } /* Compact image cell */ #leasy-wrap.view-table #leasy-product-table td.image-cell img.leasy-thumb{ width:48px !important; height:48px !important; border-radius:8px !important; object-fit:cover !important; } /* Remove mobile labels in table mode */ #leasy-wrap.view-table #leasy-product-table td[data-field="regular_price"]::before, #leasy-wrap.view-table #leasy-product-table td[data-field="sale_price"]::before, #leasy-wrap.view-table #leasy-product-table td.stock-cell::before{ content:none !important; } /* LEASY 2.6.17: hide view toggle on tablet/mobile */ @media (max-width: 1023px){ .leasy-toolbar #leasy-view-toggle{ display:none !important; } } /* LEASY: Zero-all button */ .leasy-zero-btn{ font-size:10px; line-height:1; padding:6px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f3f4f6; color:#111827; cursor:pointer; } .leasy-zero-btn:hover{ background:#dc2626; border-color:#dc2626; color:#fff; } /* Toast base */ #leasy-toast{ pointer-events:none; } /* Inline success/error notes next to action buttons */ .leasy-inline-note{ font-size:12px; line-height:1; } .leasy-inline-note.ok{ color:#059669; } /* green */ .leasy-inline-note.err{ color:#dc2626; } /* red */ /* ===== Bouton "Voir les variations" (style outline/ghost) ===== */ #leasy-wrap button[data-action="toggle-vars"]{ background: transparent; color: #111827; /* texte gris foncé */ border: 1px solid #d1d5db; /* contour gris clair */ border-radius: 10px; padding: 6px 10px; font-size: 12px; line-height: 1.2; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } #leasy-wrap button[data-action="toggle-vars"]:hover{ background: #111827; /* inverse en hover */ color: #fff; border-color: #111827; } #leasy-wrap button[data-action="toggle-vars"]:focus{ outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35); } #leasy-wrap button[data-action="toggle-vars"][aria-expanded="true"], #leasy-wrap button[data-action="toggle-vars"][data-open="1"]{ background: #111827; color: #fff; border-color: #111827; } /* Mobile : largeur 100% si souhaité pour "Variations" */ @media (max-width: 781px){ #leasy-wrap.view-grid button[data-action="toggle-vars"]{ width: 100%; margin-top: 8px; } } /* ===== Bouton ENREGISTRER (style pill inspiré .button-34) ===== */ #leasy-wrap .save-btn, #leasy-wrap button[data-action="save"]{ background: #5E5DF0; border: 0; border-radius: 9999px; box-shadow: 0 3px 15px -10px #5E5DF0; color: #FFFFFF; cursor: pointer; font-family: Inter,Helvetica,system-ui,Segoe UI,Roboto,"Helvetica Neue","Noto Sans",sans-serif; font-size: 14px; /* 16px si tu préfères plus gros */ font-weight: 700; line-height: 1.2; padding: 8px 18px; outline: 0; width: fit-content; user-select: none; transition: background .15s ease, box-shadow .15s ease, transform .05s ease, opacity .2s ease; } #leasy-wrap .save-btn:hover, #leasy-wrap button[data-action="save"]:hover{ background: #1f4aff !important; /* bleu demandé */ color: #fff !important; box-shadow: 0 14px 26px -12px #1f4aff; transform: translateY(-1px); } #leasy-wrap .save-btn:active, #leasy-wrap button[data-action="save"]:active{ background: #1f4aff !important; color: #fff !important; box-shadow: 0 8px 16px -10px #1f4aff; transform: translateY(0); } #leasy-wrap .save-btn:focus, #leasy-wrap button[data-action="save"]:focus{ outline: none; box-shadow: 0 0 0 3px rgba(31,74,255,.35), 0 10px 20px -10px #1f4aff; } /* Désactivé (utile pour bloquer les doubles clics pendant l’envoi) */ #leasy-wrap .save-btn[disabled], #leasy-wrap button[data-action="save"][disabled], #leasy-wrap .save-btn.is-loading{ opacity: .6; cursor: not-allowed; filter: grayscale(.1); } /* Mobile : plein-largeur pour le tactile (optionnel) */ @media (max-width: 781px){ #leasy-wrap.view-grid .save-btn, #leasy-wrap.view-grid button[data-action="save"]{ width: 100%; justify-content: center; margin-top: 8px; } }