diff --git a/src/styles/filters.css b/src/styles/filters.css index e0407a9..ab3dc7e 100644 --- a/src/styles/filters.css +++ b/src/styles/filters.css @@ -19,7 +19,7 @@ display:flex; gap:.35rem; padding:.2rem .6rem; - background: transparent; /* dock transparent */ + background: transparent; border-radius: 999px; box-shadow: none; } @@ -183,8 +183,8 @@ body[data-theme="light"] .sw-icon-active .sw-icon-label{ height:28px; border-radius:999px; border:1.5px solid rgba(148,163,184,0.8); - background:rgba(15,23,42,0.96); /* fond noir-ish */ - color:#e5e7eb; /* lettre blanche */ + background:rgba(15,23,42,0.96); + color:#e5e7eb; display:flex; align-items:center; justify-content:center; @@ -216,3 +216,83 @@ body[data-theme="light"] .sw-theme-pill-active{ color:#F9FAFB; box-shadow:0 0 14px rgba(30,107,255,.55); } + +/* ===== TOP QUICK ACTION BUTTONS: MY SPOT / NEW WIRE ===== */ +/* on cible plusieurs noms possibles au cas où : */ +.sw-quick-actions, +.sw-top-quick-actions, +.sw-header-quick-actions{ + display:flex; + gap:.6rem; +} + +.sw-quick-btn, +.sw-top-quick-btn, +.sw-header-quick-btn{ + padding:.45rem .9rem; + border-radius:999px; + border:1.5px solid rgba(148,163,184,0.85); + background:rgba(15,23,42,0.96); /* fond noir */ + color:#e5e7eb; /* texte blanc */ + font-size:.74rem; + font-weight:600; + letter-spacing:.03em; + text-transform:uppercase; + box-shadow:0 3px 10px rgba(0,0,0,.8); + cursor:pointer; + display:flex; + align-items:center; + gap:.35rem; + transition: background .22s ease, color .22s ease, + box-shadow .22s ease, border-color .22s ease, + transform .18s ease; +} + +.sw-quick-btn i, +.sw-top-quick-btn i, +.sw-header-quick-btn i{ + font-size:1rem; +} + +/* bouton principal (NEW WIRE) plus bleu */ +.sw-quick-primary, +.sw-top-quick-primary, +.sw-header-quick-primary{ + background: linear-gradient(135deg, #2563eb, #38bdf8); + border-color:#60a5fa; + color:#f9fafb; + box-shadow:0 0 18px rgba(56,189,248,.85); +} + +.sw-quick-btn:hover, +.sw-top-quick-btn:hover, +.sw-header-quick-btn:hover{ + transform: translateY(-1px); + box-shadow:0 5px 14px rgba(0,0,0,.9); +} + +.sw-quick-btn:active, +.sw-top-quick-btn:active, +.sw-header-quick-btn:active{ + transform: scale(.97); + box-shadow:0 2px 8px rgba(0,0,0,.9); +} + +/* version clair */ +body[data-theme="light"] .sw-quick-btn, +body[data-theme="light"] .sw-top-quick-btn, +body[data-theme="light"] .sw-header-quick-btn{ + background:rgba(255,255,255,0.95); + color:#0B1220; + border-color:rgba(148,163,184,0.95); + box-shadow:0 3px 10px rgba(15,23,42,.15); +} + +body[data-theme="light"] .sw-quick-primary, +body[data-theme="light"] .sw-top-quick-primary, +body[data-theme="light"] .sw-header-quick-primary{ + background:linear-gradient(135deg, #1d4ed8, #38bdf8); + color:#F9FAFB; + border-color:#1d4ed8; + box-shadow:0 0 16px rgba(37,99,235,.45); +}