/* RFL - Icone Prenota 1.0.0 Mette l'icona della partenza e quella della destinazione nei pulsanti tratta del modulo di prenotazione. Solo stile: il markup non e toccato. Le icone sono dentro questo file: nessuna richiesta in piu, nessun caricamento in Libreria media, niente SVG da autorizzare. */ .rfl-pr .rfl-pr-tratta > b::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .35em; vertical-align: -.22em; background-position: center; background-repeat: no-repeat; background-size: contain; } .rfl-pr .rfl-pr-tratta > b:first-of-type::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%230d5b7e%22%20role%3D%22img%22%20aria-label%3D%22Partenza%22%3E%20%3Ctitle%3EPartenza%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M11.1%203.2h5.1l-1.7%201.6%201.7%201.6h-5.1z%22%2F%3E%20%3Cpath%20d%3D%22M11.2%203.2h1.6v4.4h-1.6z%22%2F%3E%20%3Cpath%20d%3D%22M8.9%207.6h6.2a1.5%201.5%200%200%201%201.5%201.5v3.7H7.4V9.1a1.5%201.5%200%200%201%201.5-1.5z%22%2F%3E%20%3Cpath%20d%3D%22M2.4%2012.8h19.2l-2.8%205.5a3.1%203.1%200%200%201-2.8%201.7H8a3.1%203.1%200%200%201-2.8-1.7z%22%2F%3E%20%3C%2Fsvg%3E"); } .rfl-pr .rfl-pr-tratta > b:last-of-type::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%230d5b7e%22%20fill-rule%3D%22evenodd%22%20role%3D%22img%22%20aria-label%3D%22Destinazione%22%3E%20%3Ctitle%3EDestinazione%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M12%202.1a7.1%207.1%200%200%200-7.1%207.1c0%205.1%207.1%2012.7%207.1%2012.7s7.1-7.6%207.1-12.7A7.1%207.1%200%200%200%2012%202.1zm0%209.8a2.7%202.7%200%201%201%200-5.4%202.7%202.7%200%200%201%200%205.4z%22%2F%3E%20%3C%2Fsvg%3E"); } /* Schermi stretti: l'icona non deve rubare spazio al nome dell'attracco. */ @media (max-width: 420px) { .rfl-pr .rfl-pr-tratta > b::before { width: 1em; height: 1em; margin-right: .28em; } } @media print { .rfl-pr .rfl-pr-tratta > b::before { display: none; } } /* ================================================================== VARIANTI - togli i segni di commento del blocco che preferisci. Vanno messe qui in fondo: l'ultima regola scritta e quella che vince. 1) Le stesse icone in versione a contorno, piu leggera: .rfl-pr .rfl-pr-tratta > b:first-of-type::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%230d5b7e%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%20aria-label%3D%22Partenza%22%3E%20%3Ctitle%3EPartenza%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M6.5%2013.2V9.9a1%201%200%200%201%201-1h3.3a1%201%200%200%201%201%201v3.3%22%2F%3E%20%3Cpath%20d%3D%22M3.2%2013.2h11.4l-1.7%203.4a2.5%202.5%200%200%201-2.2%201.4H7.1a2.5%202.5%200%200%201-2.2-1.4z%22%2F%3E%20%3Cpath%20d%3D%22M16.8%2010.4h3.9%22%2F%3E%20%3Cpath%20d%3D%22m18.8%208.5%201.9%201.9-1.9%201.9%22%2F%3E%20%3Cpath%20d%3D%22M2.6%2020.4q2.35-1.7%204.7%200t4.7%200%204.7%200%204.7%200%22%2F%3E%20%3C%2Fsvg%3E"); } .rfl-pr .rfl-pr-tratta > b:last-of-type::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%230d5b7e%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%20aria-label%3D%22Destinazione%22%3E%20%3Ctitle%3EDestinazione%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M12%2017.6s5.6-5.2%205.6-9.4a5.6%205.6%200%201%200-11.2%200c0%204.2%205.6%209.4%205.6%209.4z%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%228.2%22%20r%3D%222.1%22%2F%3E%20%3Cpath%20d%3D%22M2.6%2020.4q2.35-1.7%204.7%200t4.7%200%204.7%200%204.7%200%22%2F%3E%20%3C%2Fsvg%3E"); } 2) Partenza come briccola veneziana invece che come barca (da usare insieme alla variante 1, stesso tratto): .rfl-pr .rfl-pr-tratta > b:first-of-type::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%230d5b7e%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20role%3D%22img%22%20aria-label%3D%22Partenza%22%3E%20%3Ctitle%3EPartenza%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M7.4%204.2%209.4%2016.4%22%2F%3E%20%3Cpath%20d%3D%22M13.2%204.9%2011.4%2016.4%22%2F%3E%20%3Cpath%20d%3D%22M8%2010.6h4.6%22%2F%3E%20%3Cpath%20d%3D%22M16.6%2010.4h4%22%2F%3E%20%3Cpath%20d%3D%22m18.6%208.4%202%202-2%202%22%2F%3E%20%3Cpath%20d%3D%22M2.6%2020.4q2.35-1.7%204.7%200t4.7%200%204.7%200%204.7%200%22%2F%3E%20%3C%2Fsvg%3E"); } 3) Icone dello stesso colore del nome dell'attracco invece che blu: il browser ritaglia il disegno e lo riempie col colore del testo, cosi restano leggibili anche sulla tratta scelta o in tema scuro. .rfl-pr .rfl-pr-tratta > b::before { background-image: none; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .rfl-pr .rfl-pr-tratta > b:first-of-type::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%230d5b7e%22%20role%3D%22img%22%20aria-label%3D%22Partenza%22%3E%20%3Ctitle%3EPartenza%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M11.1%203.2h5.1l-1.7%201.6%201.7%201.6h-5.1z%22%2F%3E%20%3Cpath%20d%3D%22M11.2%203.2h1.6v4.4h-1.6z%22%2F%3E%20%3Cpath%20d%3D%22M8.9%207.6h6.2a1.5%201.5%200%200%201%201.5%201.5v3.7H7.4V9.1a1.5%201.5%200%200%201%201.5-1.5z%22%2F%3E%20%3Cpath%20d%3D%22M2.4%2012.8h19.2l-2.8%205.5a3.1%203.1%200%200%201-2.8%201.7H8a3.1%203.1%200%200%201-2.8-1.7z%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%230d5b7e%22%20role%3D%22img%22%20aria-label%3D%22Partenza%22%3E%20%3Ctitle%3EPartenza%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M11.1%203.2h5.1l-1.7%201.6%201.7%201.6h-5.1z%22%2F%3E%20%3Cpath%20d%3D%22M11.2%203.2h1.6v4.4h-1.6z%22%2F%3E%20%3Cpath%20d%3D%22M8.9%207.6h6.2a1.5%201.5%200%200%201%201.5%201.5v3.7H7.4V9.1a1.5%201.5%200%200%201%201.5-1.5z%22%2F%3E%20%3Cpath%20d%3D%22M2.4%2012.8h19.2l-2.8%205.5a3.1%203.1%200%200%201-2.8%201.7H8a3.1%203.1%200%200%201-2.8-1.7z%22%2F%3E%20%3C%2Fsvg%3E"); } .rfl-pr .rfl-pr-tratta > b:last-of-type::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%230d5b7e%22%20fill-rule%3D%22evenodd%22%20role%3D%22img%22%20aria-label%3D%22Destinazione%22%3E%20%3Ctitle%3EDestinazione%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M12%202.1a7.1%207.1%200%200%200-7.1%207.1c0%205.1%207.1%2012.7%207.1%2012.7s7.1-7.6%207.1-12.7A7.1%207.1%200%200%200%2012%202.1zm0%209.8a2.7%202.7%200%201%201%200-5.4%202.7%202.7%200%200%201%200%205.4z%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%230d5b7e%22%20fill-rule%3D%22evenodd%22%20role%3D%22img%22%20aria-label%3D%22Destinazione%22%3E%20%3Ctitle%3EDestinazione%3C%2Ftitle%3E%20%3Cpath%20d%3D%22M12%202.1a7.1%207.1%200%200%200-7.1%207.1c0%205.1%207.1%2012.7%207.1%2012.7s7.1-7.6%207.1-12.7A7.1%207.1%200%200%200%2012%202.1zm0%209.8a2.7%202.7%200%201%201%200-5.4%202.7%202.7%200%200%201%200%205.4z%22%2F%3E%20%3C%2Fsvg%3E"); } ================================================================== */