/* * Regole che devono avere l'ultima parola sul tema genitore. * Il tema accoda il foglio del child PRIMA dei propri (tema.css, interne.css, * home.css): a parita' di specificita' vincevano le sue regole. Questo file * viene invece stampato dopo tutti, vedi cbvo_stile_dopo_tema() in functions.php. */ /* ========================================================================= TESTATA — nome dell'ente accanto allo stemma Il tema lo tiene a 1.778em e, siccome il nome supera i 25 caratteri, lo avvolge in : il risultato era una scritta piccola rispetto al logo. Qui si ingrandisce solo da schermo largo, dove c'e' spazio; sotto i 992px restano le dimensioni ridotte previste dal tema. ========================================================================= */ @media (min-width: 992px) { #mainheader .comune .logotxt, #mainheader .comune .logotxt .logo-titolo { height: auto; min-height: 48px; vertical-align: middle; } /* * Il nome dell'ente deve stare su una riga sola. * Misurato con il font del tema (Titillium Web Bold) la stringa * "Consorzio di Bonifica Veneto Orientale" e' larga 16,53 em: perche' entri * nello spazio disponibile la dimensione non puo' superare larghezza/16,53, * cioe' circa il 6% della larghezza del contenitore. * Con le container query il titolo prende la massima dimensione che entra a * ogni larghezza di schermo, invece di una misura fissa che a volte va a capo. * Il valore in em resta come ripiego per i browser piu' vecchi. */ #mainheader .comune .logotxt { container-type: inline-size; } #mainheader .comune .logotxt .logo-titolo { font-size: 1.778em; /* ripiego */ font-size: min(2.1em, 5.9cqw); /* 5,9% < 6,05% = margine di sicurezza */ line-height: 1.15; white-space: nowrap; } /* vale 0.8em: azzerando la riduzione il calcolo sopra resta esatto */ #mainheader .comune .logotxt .logo-titolo small { font-size: 1em; } } /* ------------------------------------------------------------------------- Stemma nella testata Il tema lo tiene a 50px (40px quando la testata si riduce scorrendo). Qui raddoppia, e con lui si allarga lo spazio riservato al nome dell'ente, che il tema calcola come calc(100% - 80px) sulla base del logo piccolo. Solo da 992px in su: sotto, lo spazio in testata e' poco. ------------------------------------------------------------------------- */ @media (min-width: 992px) { #mainheader .comune .logoimg { width: 100px; } #mainheader .comune .logoimg img { max-height: 100px; max-width: 100px; } #mainheader .comune .logotxt { width: calc(100% - 130px); } /* testata ridotta (quando si scorre): resta compatta ma piu' leggibile */ #mainheader.ridotto .comune .logoimg img { height: 64px; max-height: 64px; max-width: 64px; } #mainheader.ridotto .comune .logoimg { width: 64px; } } /* ========================================================================= SOTTOMENU DEL MENU PRINCIPALE Due difetti del tema: 1. .dropdown-item ha "white-space: nowrap": le voci non vanno mai a capo e la tendina si allarga fino alla voce piu' lunga. 2. il JavaScript aggiunge alle tendine di destra la classe "drodownmenu-on-right" perche' si aprano verso sinistra, ma la regola CSS corrispondente non esiste: senza, escono dallo schermo. ========================================================================= */ @media (min-width: 992px) { #menu-principale .dropdown-menu { width: 100%; } /* * inc/adjustments.css del tema impone alle voci "min-width: 240px". * Con la tendina limitata in larghezza le voci sporgevano oltre il fondo * bianco, e le spaziature risultavano diverse da una voce all'altra: * le voci brevi venivano allargate a 240px, quelle lunghe andavano a capo. * Lasciandole dimensionare dal contenuto la spaziatura torna uniforme. */ #menu-principale .dropdown-menu .menu-item { min-width: 0; } /* le voci lunghe vanno a capo invece di allargare la tendina */ #menu-principale .dropdown-item { white-space: normal; font-size: 0.95rem; line-height: 1.35; padding-top: 0.5rem; padding-bottom: 0.5rem; } /* la regola mancante: le tendine delle ultime voci si aprono a sinistra */ #menu-principale .dropdown-menu.drodownmenu-on-right { left: auto; right: 0; } /* con 4 o piu' sottovoci il tema marca la voce come "megamenu" e la stira da bordo a bordo: qui le tendine restano tutte della stessa larghezza */ #menu-principale .nav-item.megamenu .dropdown-menu { left: 0; right: auto; } #menu-principale .nav-item.megamenu .dropdown-menu.drodownmenu-on-right { left: auto; right: 0; } } /* ========================================================================= ICONA DEI COLLEGAMENTI ESTERNI inc/adjustments.css del tema la fissa a "fill: #fff": su qualunque fondo chiaro risulta invisibile, e nei riquadri della hero spariva del tutto. Con currentColor segue il colore del testo del collegamento: nera dove il testo e' nero, rossa nel riquadro delle emergenze, bianca sulle fasce blu. Cosi' il contrasto dell'icona e' sempre quello, gia' verificato, del testo. ========================================================================= */ .icon-external-link { fill: currentColor; } /* ========================================================================= SOTTOMENU: STESSO ASPETTO PER TUTTE LE VOCI Il tema assegna via JavaScript la classe "megamenu" solo alle voci con 4 o piu' sottovoci: "Il Consorzio" (6), "Catasto" (5) e "Territorio" (4) la ricevono, "Albo online" e "Contatti" (2 ciascuna) no. Le loro tendine risultavano quindi piu' strette, senza margini interni, senza ombra e senza la freccetta di aggancio. Qui le stesse regole valgono per tutte le voci con sottomenu. Nota sul margine interno: i 32px di Bootstrap Italia NON sono quelli che si vedono, perche' inc/adjustments.css del tema li sovrascrive con "padding: calc(0.5 * var(--bi1-rem)) 0 !important" per i soli megamenu. Qui si usa quindi lo stesso valore ridotto, che e' l'aspetto reale della tendina di "Il Consorzio": imporre i 32px avrebbe allontanato le altre voci dal modello invece di avvicinarle. ========================================================================= */ @media (min-width: 992px) { /* * min-width e' la chiave: "width: 100%" vale il 100% del contenitore di * riferimento, che per i megamenu e' l'intera barra ma per una voce breve * come "Contatti" e' la voce stessa, larga un centinaio di pixel. La * tendina risultava strettissima e le sottovoci si accavallavano. * Con min-width la tendina non scende mai sotto 20rem, quanto basta a * "Emergenze - Pronto Consorzio" (267px) senza mandarla a capo, * mentre i megamenu restano larghi come prima (min-width non li tocca). */ #menu-principale .dropdown-menu { min-width: 20rem; padding: calc(0.5 * var(--bi1-rem, 1rem)) 0; z-index: 1; box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1); } /* freccetta bianca di aggancio sopra la tendina */ #menu-principale .nav-item.dropdown > a.dropdown-toggle::before { content: ""; position: absolute; top: auto; bottom: -12px; left: 24px; width: 18px; height: 18px; border-radius: 4px; background-color: #fff; transform: rotate(45deg); opacity: 0; display: block; } #menu-principale .nav-item.dropdown > a.dropdown-toggle.show::before { opacity: 1; } } /* ========================================================================= BARRA ALTA (.preheader) - link ai portali esterni Il tema le impone "height: 50px" con "line-height: 40px": una riga sola. Quando i link non ci stanno vanno a capo, ma la seconda riga esce dalla fascia blu scuro e finisce sopra alla testata. Conseguenze misurate: - su desktop il quarto link ("Pagamento avvisi - pagoPA") risulta coperto dalla testata e quindi invisibile, pur essendo presente nel menu; - su mobile la riga in eccesso cade sul blu chiaro #0066cc, dove il bianco rende 5,57:1 invece degli 8,33:1 della fascia scura: sotto il 7:1 AAA. La cura non e' rimpicciolire il testo (a 13px i link servono comunque ~365px e a 320/360px non entrano lo stesso, cfr. 1.4.10 Riflusso) ma lasciare che la fascia cresca con il suo contenuto. ------------------------------------------------------------------------- */ #mainheader .preheader { height: auto; min-height: 50px; line-height: 1.3; } #mainheader .entesup .float-right, #mainheader .entesup .float-left { float: none !important; } #mainheader .entesup #menu-alto { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; } /* area toccabile di 44x44 CSS px: 2.5.5 Dimensione target (avanzato), AAA. Su desktop resta dentro i 50px della fascia, quindi non cambia nulla. */ #mainheader .preheader .entesup a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 0.2em; } @media (max-width: 991px) { /* la testata non puo' restare alta 136px se la fascia cresce */ #mainheader { height: auto; } #mainheader .entesup #menu-alto { justify-content: center; text-align: center; } } /* Bootstrap Italia disegna una sua freccetta con ".navbar .dropdown-menu:before" (nascosta sotto i 992px, mostrata sopra). Si sommava a quella qui sopra, ancorata alla voce di menu: se ne vedevano due. Resta la nostra, che sta sempre sotto l'etichetta anche quando la tendina si apre verso sinistra. */ @media (min-width: 992px) { #menu-principale .dropdown-menu::before { display: none; } } /* Il tema mostra solo le prime tre voci della barra alta (adjustments.css: "#menu-alto li {display:none}" + ":nth-of-type(-n+3)"). Con le etichette accorciate ci stanno tutte e quattro. */ #menu-alto li { display: block; } /* ========================================================================= PAGINE COLLEGATE - voce corrente Il tema prevede ".list-group-item.active" ma si limita al grassetto, lo stesso effetto di ":hover": voce corrente e voce sotto il puntatore risultavano indistinguibili. E il markup del tema quel "active" non lo assegnava mai, quindi non si evidenziava nulla. Lo stile si aggancia ad aria-current="page", che il template del tema figlio mette sulla voce corrispondente alla pagina aperta: una sola sorgente di verita' per i lettori di schermo e per la resa visiva. La barretta e' #003366, lo stesso blu della voce radice: su questa lista, che ha sfondo #7DB3E8 e non bianco, rende 5,70:1, oltre il 3:1 chiesto dal criterio 1.4.11 per gli elementi non testuali portatori di informazione. Non e' comunque l'unico indizio: resta anche il grassetto (1.4.1). ------------------------------------------------------------------------- */ #menu-sinistro .lista-paragrafi .list-group-item[aria-current="page"], #menu-sinistro #lista-paragrafi .list-group-item[aria-current="page"] { font-weight: 700; box-shadow: inset 4px 0 0 0 #003366; }