/** * Il pulsante del sito — UN SOLO POSTO, per tutti i blocchi. * * PROVENIENZA: hello-theme-child-master/style.css, la regola `.elementor-button`. È quella * che veste i pulsanti che si vedono oggi in linea, ed è copiata qui tale e quale — colori, * gradiente e comportamento in hover. * * ── IL COMPORTAMENTO, CHE È LA PARTE CHE SI PERDE COPIANDO A OCCHIO ──────────────────── * * Il pulsante NON cambia colore al passaggio del mouse: il colore SCORRE. Il trucco è un * gradiente largo il doppio del pulsante (`background-size: 200% 100%`) con dentro due * volte la stessa coppia di blu; a riposo si guarda la metà destra, in hover si sposta lo * sguardo sulla metà sinistra. Quello che si muove è `background-position`, e a muoverlo * piano è la transizione da 0.4s. * * ── ⚠ IL TESTO BIANCO VA DICHIARATO SU TUTTI GLI STATI DEL LINK, SENZA HREF COMPRESO ── * * Il pulsante è un ``, e un `` ha stati che il CSS colora separatamente: `:link`, * `:visited`, `:hover`, `:active`, `:focus`. Dichiarare il colore sul solo elemento lascia * scoperti gli altri, e li prende la prima regola del sito che li nomina — sul tema ce ne * sono diverse (`.elementor-element a:visited`, `.elementor a:hover`). * * ⚠ E POI C'È IL CASO SENZA HREF, che è quello che ha morso davvero. Il blocco Button di * base nasce come `Button`, SENZA indirizzo: è GrapeJS che lo * vuole così, il link lo scrive l'autore. Ma il reset di Hello contiene * * a:not([href]):not([tabindex]) { color: inherit } * * che vale (0,2,1) e batteva il nostro colore: il testo ereditava quello del testo intorno * e usciva scuro sul fondo blu. E `:link` e `:visited` NON coprono quel caso — per * definizione quei due selettori matchano solo un `` che un indirizzo ce l'ha. * * È anche il motivo per cui i pulsanti di TextImage e Hero erano già bianchi: quelli * nascono con `href="#"`. * * La cura è `:not([href])` DENTRO l'elenco degli stati: vale (0,1,0) come `:link`, quindi * la specificità non cambia — resta (0,3,1) — e il caso senza indirizzo entra fra quelli * coperti. * * ⚠ Sull'HOVER senza href la specificità da sola non bastava: il reset ha * `a:not([href]):not([tabindex]):hover`, che vale (0,3,1) ESATTO come la nostra regola. * A parità decide l'ordine dei fogli, e sul sito il tema arrivava dopo di noi. È stato * corretto lì, alzando a 100 la priorità con cui SE_Builder_Frontend accoda: i nostri * fogli vengono dopo quelli del tema, come già succedeva nel canvas. Non serviva più * specificità, serviva l'ordine giusto — e quello vale per tutti i componenti, non solo * per il pulsante. * * Il difetto era insidioso anche per un'altra ragione: `:visited` dipende dalla CRONOLOGIA * di chi guarda, quindi la stessa pagina può essere giusta su un computer e sbagliata su * un altro. * * ── PERCHÉ `:is()` E NON NOVE SELETTORI ─────────────────────────────────────────────── * * Tre classi per cinque stati farebbero quindici righe di selettore da tenere allineate a * mano. Con `:is()` sono due gruppi, e la specificità resta alta abbastanza: `:is()` vale * quanto il suo argomento PIÙ specifico, quindi `.se-gjs-page a:is(…):is(…)` conta come * (0,3,1) — sopra a `.elementor-element a:visited`, che è (0,2,1) ed era la regola che * vinceva. * * ── PERCHÉ UN FILE A SÉ ─────────────────────────────────────────────────────────────── * * Un pulsante non appartiene a nessun blocco in particolare: ce l'hanno il TextImage, * l'Hero e il blocco Button di base, e ce l'avranno i prossimi. Messo nel foglio di un * componente varrebbe solo dove quel componente è in elenco; messo qui vale ovunque, e * cambiare il pulsante del sito resta una modifica in un punto solo. * * Si carica nei DUE posti — canvas dell'editor e sito — come tutti i fogli del contenuto: * SE_Builder_Editor_Screen::canvas_styles() e SE_Builder_Frontend::enqueue(). * * ⚠ Le classi elencate qui sotto sono TUTTE quelle che devono avere questo aspetto. I * blocchi non ridichiarano colori e hover nei loro fogli: il pulsante ha un proprietario * solo, e non è il blocco che lo contiene. */ /* L'aspetto. Senza `a` nel selettore, così vale anche per un pulsante che un domani fosse un