/* COPERTURA DEL ROSSO DI MARCHIO — generato, non si modifica a mano. * * python tools/genera_copertura_vesti.py * * Ogni regola qui sotto ha lo STESSO selettore di una regola di `app.css` che * tinge col rosso del marchio, e ne ripete la specificita': vince perche' si * carica dopo. Le variabili le mette il foglio della veste; questo file non * ne dichiara nessuna, e da solo non fa niente. * * ⚠️ Il rosso degli ERRORI (`--bs-danger`) non e' qui, ed e' voluto: un * messaggio di errore deve restare rosso anche sulla veste verde. * * Regole coperte: 79. Sorgente: `shared/dist/app.css`. */ a { color:var(--tema-primario) } a:hover { color:var(--tema-primario-scuro) } .form-check-input:checked { background-color:var(--tema-azione); border-color:var(--tema-azione) } .form-check-input[type=checkbox]:indeterminate { background-color:var(--tema-azione); border-color:var(--tema-azione) } .form-range::-webkit-slider-thumb { background-color:var(--tema-azione) } .form-range::-webkit-slider-thumb:active { background-color:var(--tema-azione-scura) } .form-range::-moz-range-thumb { background-color:var(--tema-azione) } .form-range::-moz-range-thumb:active { background-color:var(--tema-azione-scura) } .btn-primary { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-primary:disabled, .btn-primary.disabled { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-outline-primary { color:var(--tema-azione); border-color:var(--tema-azione) } .btn-outline-primary:hover { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-check:checked+.btn-outline-primary, .btn-check:active+.btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show { background-color:var(--tema-azione); border-color:var(--tema-azione) } .btn-outline-primary:disabled, .btn-outline-primary.disabled { color:var(--tema-azione) } .btn-link { color:var(--tema-primario) } .btn-link:hover { color:var(--tema-primario-scuro) } .dropdown-item:hover, .dropdown-item:focus { color:var(--tema-primario) } .dropdown-item.active, .dropdown-item:active { color:var(--tema-primario) } .nav-link:hover, .nav-link:focus { color:var(--tema-primario) } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color:var(--tema-primario); border-color:var(--tema-primario) } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color:var(--tema-azione) } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color:var(--tema-primario) } .navbar-light .navbar-nav .show>.nav-link, .navbar-light .navbar-nav .nav-link.active { color:var(--tema-primario) } .navbar-light .navbar-text a, .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { color:var(--tema-primario) } .page-link:focus { color:var(--tema-primario-scuro) } .page-item.active .page-link { background-color:var(--tema-azione) } .alert-primary { color:var(--tema-primario) } .progress-bar { background-color:var(--tema-azione) } .list-group-item.active { background-color:var(--tema-azione); border-color:var(--tema-azione) } .list-group-item-primary { color:var(--tema-primario) } .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { color:var(--tema-primario) } .list-group-item-primary.list-group-item-action.active { background-color:var(--tema-primario); border-color:var(--tema-primario) } .link-primary { color:var(--tema-primario) } .link-primary:hover, .link-primary:focus { color:var(--tema-primario) } .text-primary { color:var(--tema-primario) !important } .display-404 { text-shadow:-0.0625rem 0 var(--tema-primario),0 .0625rem var(--tema-primario),.0625rem 0 var(--tema-primario),0 -0.0625rem var(--tema-primario) } div.code-toolbar>.toolbar button { color:var(--tema-primario) !important } div.code-toolbar>.toolbar button:hover { background-color:var(--tema-primario) } .form-switch .form-check-input:checked { background-color:var(--tema-azione); box-shadow:0 .375rem .875rem -0.3rem var(--tema-azione) } .was-validated .form-check-input:valid:checked, .was-validated .form-check-input.is-valid:checked { border-color:var(--tema-azione); background-color:var(--tema-azione) } .form-check-input:checked~.form-option-label { border-color:var(--tema-azione); color:var(--tema-azione) } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn-primary.show { border-color:var(--tema-azione-scura); background-color:var(--tema-azione-scura) } .btn-wishlist:hover { color:var(--tema-primario) } .btn-video:hover { background-color:var(--tema-primario) } .dropdown-menu li:hover>.dropdown-item { color:var(--tema-primario) } .dropdown-menu .active>.dropdown-item { color:var(--tema-primario) } .nav-tabs .nav-link.active::before { background-color:var(--tema-primario) } a.nav-link:hover .media-tab-media { color:var(--tema-primario) } .nav-link.active .media-tab-media, .nav-link.active:hover .media-tab-media { border-color:var(--tema-primario); background-color:var(--tema-primario) } .nav-link.active .media-tab-title, .nav-link.active:hover .media-tab-title { color:var(--tema-primario) !important } .nav-link-style:hover { color:var(--tema-primario) } .active>.nav-link-style, .nav-link-style.active { color:var(--tema-primario) } .navbar-tool .navbar-tool-label { background-color:var(--tema-azione) } .navbar-light .nav-item:hover .nav-link:not(.disabled), .navbar-light .nav-item:hover .nav-link:not(.disabled)>i { color:var(--tema-primario) } .navbar-light .nav-item.active .nav-link:not(.disabled)>i, .navbar-light .nav-item.show .nav-link:not(.disabled)>i, .navbar-light .nav-item.dropdown .nav-link:focus:not(.disabled)>i, .navbar-light .nav-item.active .nav-link:not(.disabled), .navbar-light .nav-item.show .nav-link:not(.disabled), .navbar-light .nav-item.dropdown .nav-link:focus:not(.disabled) { color:var(--tema-primario) } .topbar-light .topbar-text>i, .topbar-light .topbar-link>i { color:var(--tema-primario) } .topbar-dark .topbar-text>i, .topbar-dark .topbar-link>i { color:var(--tema-primario) } .breadcrumb-item>a:hover { color:var(--tema-primario) } .entry-navigation-link:hover { color:var(--tema-primario) } .list-group-item-primary.active { background-color:var(--tema-primario) !important; border-color:var(--tema-primario) } .tns-carousel [data-nav].tns-nav-active { background-color:var(--tema-azione) } .steps-dark .step-item.active .step-count, .steps-dark .step-item.active .step-progress { background-color:var(--tema-azione) } .steps-light .step-item.active .step-count, .steps-light .step-item.active .step-progress { background-color:var(--tema-azione) } .testimonial .testimonial-mark { background-color:var(--tema-primario) } .widget-categories .accordion-button { color:var(--tema-primario) } .widget-categories .accordion-button:hover { color:var(--tema-primario) } .widget-list-link:hover { color:var(--tema-primario) } .active>.widget-list-link { color:var(--tema-primario) } .widget-product-title:hover>a { color:var(--tema-primario) } .btn-tag.active { border-color:var(--tema-azione); background-color:var(--tema-azione) } .range-slider-ui .noUi-connect { background-color:var(--tema-azione) } .product-title>a:hover { color:var(--tema-primario) } .product-gallery-thumblist-item.active { border-color:var(--tema-primario) } .blog-entry-title>a:hover { color:var(--tema-primario) } .offcanvas-expand .offcanvas-body .active>.widget-list-link { border-left-color:var(--tema-primario) } .js-action-favorite-button .icon-on { color:var(--tema-primario) } .swal2-styled.swal2-confirm { background-color:var(--tema-azione) !important; border:1px solid var(--tema-azione) !important } .toast .btn-close { color:var(--tema-primario) } .pagination .page-item.active .page-link { border-color:var(--tema-azione); color:var(--tema-azione) } /* --- la pastiglia della categoria scelta ----------------------------- */ /* ⛔ Restava rossa in tutte e tre le vesti: `app.css` la tinge con `.nav-pills .nav-link.active`, che pero' sul sito non e' il selettore che vince. Misurato sul rendering vero, non dedotto dal foglio. */ .nav-link.rounded-pill.active, .nav-link.rounded-pill.active:hover, .nav-link.rounded-pill.active:focus { background-color: var(--tema-azione) !important; border-color: var(--tema-azione) !important; color: #fff !important; } /* --- il pallino del carrello ----------------------------------------- */ .navbar-tool-label { background-color: var(--tema-azione) !important; } /* --- le utility di colore -------------------------------------------- */ /* ⚠️ Con `!important`: le utility di Bootstrap ce l'hanno, e senza non verrebbero coperte. E' il motivo per cui il simbolo € restava rosso. */ .text-primary { color: var(--tema-primario) !important; } .bg-primary { background-color: var(--tema-azione) !important; } .border-primary { border-color: var(--tema-primario) !important; } .badge.bg-primary { background-color: var(--tema-azione) !important; } /* --- il telefono: quello che vale per TUTTE le vesti ------------------ */ /* ⛔ Le vesti devono venire su bene sul telefono per come sono fatte, non perche' qualcuno ci ha messo una pezza dopo. Qui stanno le poche cose che valgono per tutte; il resto lo fa ogni veste nel proprio foglio. */ /* La barra delle categorie scorre col dito — quello e' voluto — ma il suo limite era scritto con l'ALTEZZA al posto della larghezza (`100vh`): su un telefono valeva 852px su uno schermo da 420, quindi non limitava piu' niente e la pagina scorreva lateralmente di 2px. Misurato in produzione il 26 ago 2026. ⚠️ Il sorgente e' gia' corretto in `styles/custom/_user.scss`: questa riga serve finche' `app.css` non viene ricompilato, e quando lo sara' dira' semplicemente la stessa cosa. */ @media (max-width: 767.98px) { .dj-category-related { max-width: calc(100vw - 3rem); } } /* Niente scorrimento laterale della PAGINA, in nessuna veste: su un telefono una pagina che balla di lato mentre si scorre in verticale sembra rotta. ⛔ IL VALORE E' `clip`, NON PIU' SOLO `hidden`. Il CSS ha una regola per cui un elemento con `overflow-x` diverso da `visible` (e diverso da `clip`: e' l'UNICA altra eccezione) si vede costringere ANCHE `overflow-y` a `auto`, mai `visible` — non e' un baco del browser, e' la specifica. Su `html`/`body`, che hanno gia' `height: 100%` per il piede di pagina fisso (vedi `theme/_reboot.scss`), quell'`auto` forzato li trasformava in due contenitori di scorrimento propri, chiusi esattamente all'altezza della finestra: `` smetteva di crescere col contenuto reale, e a scorrere era `` per conto suo. La finestra (`window`) non si muoveva piu' — verificato dal vivo su dicaniostore.it: `window.scrollTo()` restava fermo a 0, mentre `document.body.scrollTop` si spostava. Qualunque codice che ascolta lo scorrimento della finestra (lo scroll infinito, un domani un pulsante "torna su") smetteva di vedere l'utente scorrere. ⛔ IL PRIMO TENTATIVO (spostare `hidden` su `.page-wrapper`/`.footer`, invece di cambiarne il valore) e' stato SCARTATO dalla verifica avversariale: `.page-wrapper` non ha mai un'altezza propria, quindi non scorre mai al suo interno — ma diventava comunque, per la stessa regola, un "antenato con meccanismo di scorrimento", e questo e' esattamente cio' che `position: sticky` usa come riferimento. Misurato dalla verifica avversariale (pagina ricostruita, `getBoundingClientRect()` durante lo scroll): la colonna dei filtri (`.dj-risultati__filtri`, `position: sticky`) smetteva di restare appiccicata e scorreva via con la pagina. `clip` non ha questo effetto perche' e' l'altra eccezione alla stessa regola: `overflow-y` di `html`/`body` resta `visible` (verificato dal vivo), quindi — toccando solo questi due selettori — nessun nuovo elemento nell'albero diventa un "antenato con meccanismo di scorrimento". Riverificato dal vivo anche sulla colonna dei filtri stessa: con `clip` resta ferma durante lo scroll, invece di scorrere via. ⚠️ SUPPORTO BROWSER: `overflow: clip` esiste solo da Chrome 90, Firefox 81, Safari 16 (fonte: caniuse.com) — sotto queste versioni non e' un valore valido, e una dichiarazione CSS con un valore che il browser non conosce viene scartata SENZA rompere le altre. Per questo restano DUE righe: la prima (`hidden`) e' quella che i browser piu' vecchi del `browserslist` di questo progetto (Safari 10+, Chrome 60+) continuano a vedere e ad applicare — stesso comportamento di oggi per loro, ne' meglio ne' peggio; la seconda (`clip`), quando il browser la capisce, VINCE perche' e' dichiarata dopo, ed e' quella che risolve lo scorrimento rotto. */ html, body { overflow-x: hidden; overflow-x: clip; } /* I bersagli sotto il pollice. 44px non e' scelto a occhio: e' la misura sotto la quale le linee guida di Apple e di Google danno il bersaglio per troppo piccolo. Su un catalogo sbagliare a premere vuol dire comprare la cosa sbagliata. */ @media (max-width: 767.98px) { .btn:not(.btn-sm):not(.btn-icon), .form-control, .form-select { min-height: 44px; } }