/** * Eteria Tour - personalizzazioni per il frontend di Eteria Connect Suite. * * Questo file NON fa parte del motore: contiene gli adattamenti al tema e le * regole che servono a far convivere la guida con il layout esistente. * Va caricato DOPO eteria-tour.css, altrimenti gli override delle variabili * non hanno effetto. * * L'elenco completo delle variabili disponibili e' in VARIABILI-CSS.md. * * @package EteriaConnectSuite * @subpackage Webroot\Css\Frontend * @author Eteria Srl * @version 1.7.0 */ /* ===================================================================== * 1. Adattamento al tema * ===================================================================== */ :root { /* ---- Colori ------------------------------------------------------ * Il colore principale segue la variabile del tema del portale. * Il secondo valore e' il fallback: se --primary-color non fosse * definita su qualche pagina, la guida userebbe il blu della navbar * invece di restare senza colore. */ --et-primary: var(--primary-color, #12678f); /* Maschera grigio chiaro. Per lo spotlight scuro: rgba(20, 24, 31, 0.62) */ --et-mask: rgba(120, 130, 145, 0.45); /* ---- Pulsante GUIDA ---------------------------------------------- * Rettangolare con angoli poco arrotondati e testo in minuscolo, per * allinearsi agli altri pulsanti del frontend. */ /* * Dalla versione 1.6.0 la distanza dall'alto la calcola il motore: * misura il bordo inferiore della barra dei cataloghi e ci appoggia * sotto il pulsante, a qualsiasi larghezza di schermo. Sotto i 992, * i 768 e i 576 px l'intestazione diventa piu' alta e il pulsante * scende di conseguenza, da solo. * * Questo valore resta come rete di sicurezza: vale solo se la barra * non viene trovata nella pagina. Per tornare al valore fisso metti * 'launcherAutoTop' => false nelle opzioni del tour. */ --et-launcher-top: 105px; /* altezza header + navbar */ /* * Aria tra la barra e il pulsante. Resta fuori dal calcolo del motore, * che scrive solo 'top': cambiando questo numero il distacco cambia * insieme a tutte le larghezze di schermo. */ --et-launcher-margin-top: 1em; --et-launcher-right: 15px; --et-launcher-font-size: 0.85em; --et-launcher-transform: none; --et-launcher-padding: 7px 13px; --et-launcher-radius: 5px; --et-launcher-icon-font-size: 1.2rem; --et-launcher-transition: 0.5s ease; } /* ===================================================================== * 2. Apertura pilotata dei menu della navbar * --------------------------------------------------------------------- * openMegamenu() in frontend-FO.js seleziona ".dropdown-megamenu:hover": * senza il puntatore fisicamente sopra l'elemento non trova nulla, quindi * un click simulato non aprirebbe il menu. Queste due regole permettono * alla guida di aprirlo aggiungendo una classe, senza toccare il JS. * Il !important serve perche' i pannelli hanno display:none inline. * ===================================================================== */ .dropdown-megamenu.et-tour-open .dropdown-content-megamenu { display: block !important; } #megamenu_toggle_links.et-tour-open { display: block !important; } /* ===================================================================== * 3. Convivenza con la maschera dei pannelli laterali * --------------------------------------------------------------------- * Aprendo un pannello, il checkbox attiva anche .mask-content (velo nero * al 40%). Durante la guida quel velo si sommerebbe alla maschera del * tour rendendo la pagina quasi nera: lo nascondiamo finche' la guida e' * attiva. La classe et-lock viene messa e tolta dal motore su . * ===================================================================== */ html.et-lock .mask-content { visibility: hidden !important; opacity: 0 !important; } /* Stesso motivo per il velo del megamenu. */ html.et-lock #megamenu_closer, html.et-lock .mask-content-2 { display: none !important; } /* ===================================================================== * 4. Dimensioni della finestra di dialogo * --------------------------------------------------------------------- * Finestra piu' generosa del 25% rispetto ai valori di serie e testi * aumentati di 1/2 punti, per migliorare la leggibilita' delle didascalie. * Sono tutti override di variabili: per ritoccare basta cambiare un numero * qui, senza toccare il motore. * ===================================================================== */ :root { /* ---- Dimensioni fisiche: +25% ------------------------------------ * --et-tooltip-width e' la larghezza TOTALE della finestra: il motore * dichiara box-sizing: border-box, quindi la spaziatura interna non * si somma. * * Questi valori valgono da 768px in su: sotto quella soglia comanda * il blocco 5 qui in fondo, con una finestra piu' piccola. */ --et-tooltip-width: 425px; /* di serie: 340px */ --et-tooltip-padding: 20px 22px 18px; /* di serie: 16px 18px 14px */ --et-tooltip-radius: 12px; /* di serie: 10px */ --et-arrow-size: 17px; /* di serie: 14px */ /* ---- Testi: +1 / +2 punti ---------------------------------------- * Scritti in pixel per ragionare direttamente sui punti invece che * sui rem. */ --et-title-size: 17px; /* di serie: 1rem = 16px */ --et-title-margin: 0 0 8px; --et-body-size: 13px; /* di serie: 0.9rem = 14.4px */ --et-body-line-height: 1.55; --et-body-margin: 0 0 18px; --et-counter-size: 13px; /* di serie: 0.75rem = 12px */ --et-close-size: 1.6rem; /* di serie: 1.4rem */ /* ---- Pulsanti Avanti / Indietro / Salta guida -------------------- * L'ingrandimento arriva soprattutto dal padding: e' quello che da' * la sensazione di pulsante cliccabile. "Salta guida" resta un link * sottolineato e non un pulsante pieno. */ --et-btn-size: 15px; /* di serie: 0.85rem = 13.6px */ --et-btn-padding: 11px 20px; /* di serie: 8px 14px */ --et-btn-radius: 7px; /* di serie: 6px */ /* ---- Comando "rivedi anche i blocchi comuni" ---------------------- * Riga cliccabile mostrata nel primo step quando header e navbar sono * gia' stati visti in passato. */ --et-replay-size: 1.3rem; /* di serie: 0.85rem */ /* ---- Respiro interno ---------------------------------------------- */ --et-bar-height: 5px; /* di serie: 4px */ --et-progress-gap: 10px; /* di serie: 8px */ --et-actions-gap: 8px; /* di serie: 6px */ --et-footer-gap: 14px; /* di serie: 12px */ /* ---- Barra di avanzamento sempre leggibile ------------------------ * Con tre pulsanti (Salta guida, Indietro, Avanti) piu' larghi non * resta spazio per la barra, che si riduce a un moncone. Alzando la * larghezza minima del gruppo contatore + barra, quando lo spazio non * basta i pulsanti vanno a capo su una seconda riga e la barra resta * intera. Negli step con due soli pulsanti resta tutto su una riga. */ --et-progress-min-width: 130px; /* di serie: 90px */ } /* ===================================================================== * 5. Ritocchi per gli schermi piccoli * --------------------------------------------------------------------- * Sotto i 768px e sotto i 576px il motore rimpicciolisce da solo finestra, * testi e pulsanti, cosi' la didascalia non copre l'elemento che sta * spiegando. I valori di serie sono in eteria-tour.css, in fondo. * * Se vuoi cambiarli, ridichiara qui le variabili usando il selettore * .et-root (il contenitore della guida) e NON :root. La finestra sta * dentro .et-root e quindi eredita da li': dichiarare su :root non * avrebbe effetto, perche' il valore piu' vicino nell'albero vince. * * Le regole sono commentate: togli il commento solo a quello che ti * serve ritoccare. * ===================================================================== */ /* @media (max-width: 767.98px) { .et-root { --et-tooltip-width: 330px; --et-tooltip-padding: 14px 16px 12px; --et-title-size: 15px; --et-body-size: 12.5px; --et-btn-size: 13px; --et-btn-padding: 8px 14px; } } @media (max-width: 575.98px) { .et-root { --et-tooltip-width: 300px; --et-title-size: 14px; --et-body-size: 12px; --et-btn-size: 12.5px; --et-btn-padding: 7px 12px; } } */ /* ===================================================================== * 6. Ganci di pagina - riquadri agganciabili dalla guida * --------------------------------------------------------------------- * Qui NON ci sono stili della guida: ci sono piccole regole di * impaginazione che servono a dare alla guida un elemento su cui * appoggiare lo spotlight. * * Il caso tipico e' questo: un riquadro fatto di titolo piu' icona vive * dentro una colonna Bootstrap larga un terzo di schermo. Il titolo e * l'icona non sono un elemento solo, quindi l'unico appiglio sarebbe la * colonna - e lo spotlight verrebbe un rettangolo enorme mezzo vuoto. * Racchiudendo titolo e icona in un blocco che si stringe sul proprio * contenuto, la guida ha finalmente qualcosa di preciso da illuminare. * * ATTENZIONE: queste regole valgono SEMPRE, anche a guida chiusa. Non * vanno legate a html.et-lock, altrimenti aprendo la guida i riquadri si * riposizionerebbero sotto gli occhi dell'utente. * ===================================================================== */ /* * Pagina /orders/options - i tre riquadri ORDINI INVIATI, ARTICOLI IN * SOSPESO e ORDINI IN APPROVAZIONE. * * Element: templates/Orders/options.php * Step del tour: 'Orders.options', gli ultimi tre. * * Senza questa regola il blocco resta largo quanto la colonna che lo * contiene e lo spotlight illumina un terzo di schermo invece del * riquadro. Il centraggio lo fa la colonna, con la sua classe text-center. */ .tour-hook-opzione { display: inline-block; }