/*
The local-theme.css is designed to override the theme settings and styling currently in use.
And because it’s a separate file, any CSS that you add in this file leaves the code codebase
of the theme intact, so you can safely roll back anytime.
In light of the above local-theme.css is your go-to-file, for customizing the theme with no
limits at all.
*/
/*
INDICE:
01 BLOCCO PIU' ALTO
02 TESTO TITOLI
03 HEADER
04 PRIMA PAGINA
05 NODO
06 POST
07 BLOCCHI RICERCA
08 PAGINA DEI MEDIA
09 TAGS
10 PAGINA CON IL TAXONOMY TERM
11 TEASER
12 PAGINE STAGIONI
13 IMMAGINI
14 SOCIAL E IFRAME
15 COMMENTI
16 RIGA
18 MEDIA AUDIO REMOTE
*/
/*
* 01
* BLOCCO PIU' ALTO
* non so perché misi questa regola
* e se ce n'è bisogno ancora
* forse è per la visione mobile.
* Comunque questa regione da maggio 2022 non la uso più
* perché ho spostato le iconcine nella regione che si trova sopra.
.region-header-top-highlighted-second {
float: right;
}
*/
.pre-header__section {
display: inline;
}
#block-socialiconsheadertophighlighted,
#block-magazineplus-socialblockalto{
float: left;
}
#block-magazineplus-sear-drop-bl-2 .dropdown,
#block-sear-drop-bl-2 .dropdown{
margin-top:-0.3em;
padding:0;
}
/*
* 02
TESTO TITOLI
*/
/*breakpoints scalabilità responsive
fino a 596 è telefonino
da 597 a 767 è tablet (una colonna)
da 768 a 991 è tablet grande (sempre una colonna, ma i menù non sono più collassati)
da 992 è desktop con sidebar
e da 1200 il tema prevede alcuni minimi cambiamenti
(ne hai un esempio con lo spazio dal sidebar che hai deovuto correggere)
@media (max-width: 596px){
.col-md-12 .site-name a {
font-size: 40px;
}
}
@media (min-width: 1200px){
.layout-sidebar-second .main-content__section {
padding-right: 0;
}
}
*/
/*
Titolo nei media
*/
h1.page-title {
margin-bottom: 20px;
text-align: center;
}
@media (max-width: 596px){
h1.page-title {
font-size: 34px;
}
}
/*
Testo nei media
*/
.field--name-field-media-descrizione-remota,
.field--name-description,
.field--name-field-body-term,
.field--name-field-media-post{
font-size: 17.33px;
font-weight: 400;
line-height: 29.43px;
color: #2d2d2d;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
line-height: calc(155% + 0.2vw);
font-size: calc(0.9em + 0.3vw);
}
/*
* 03
HEADER
*/
/* il titolo a 80 è un po' troppo grande */
.col-md-12 .site-name a {
font-size: 70px;
}
@media (max-width: 596px){
.col-md-12 .site-name a {
font-size: 40px;
}
}
/* Logo immagine */
@media (min-width: 597px){
.site-branding__logo img{
max-width: 500px;
}
}
@media (max-width: 596px){
.site-branding__logo img {
margin-bottom:-25px;
}
}
/* icone social */
#block-socialiconsheadertophighlighted,
#block-magazineplus-socialblockalto {
padding-right: 2em;
}
#block-socialiconsheadertophighlighted
.svg-inline--fa {
display: inline-block;
font-size: 1.3em;
height: 1em;
overflow: visible;
vertical-align: -.125em;
}
#block-magazineplus-socialblockalto .svg-inline--fa {
display: inline-block;
font-size: 1.05em;
height: 1em;
overflow: visible;
vertical-align: -.125em;
}
/*
* 04
PRIMA PAGINA
*/
/* tolgo lo spazio con la sidebar */
/*
*@media (min-width: 1200px){
*.layout-sidebar-second .main-content__section {
*padding-right: 0;
*}
*}
*/
/* font delle anteprime */
#block-views-block-taxonomy-term-media-mio-block-1-2 .views-field-name a,
#block-views-block-taxonomy-term-media-mio-block-2-2 .views-field-name a{
font-family: 'Playfair Display', Times New Roman, Serif;
}
#block-views-block-taxonomy-term-media-mio-block-1-2 .views-field-field-media-descrizione-remota,
#block-views-block-taxonomy-term-media-mio-block-2-2 .views-field-field-media-descrizione-remota{
font-style: italic;
color: #505050;
}
.block-views-blockgrid-fp-media-block-3 .views-field-name a,
.block-views-blockgrid-fp-media-block-2 .views-field-name a,
.block-views-blockgrid-fp-media-bis-block-1 .views-field-name a,
.block-views-blockgrid-fp-media-block-1 .views-field-name a,
.block-views-blockgrid-fp-media-block-4 .views-field-name a,
.block-views-blockgrid-fp-media-block-5 .views-field-name a,
.block-views-blockgrid-fp-media-bis-block-4 .views-field-name a,
.view-pagine-stagioni .views-field-name a,
.block-views-blockvideo-popolari-mio-block-1 .views-field-name a,
.block-views-blockvideo-popolari-mio-block-2 .views-field-name a {
font-family: 'Playfair Display', Times New Roman, Serif;
font-size: 15.5px;
font-weight:bold;
}
.block-views-blockgrid-fp-media-block-3 .views-field-field-media-descrizione-remota,
.block-views-blockgrid-fp-media-block-2 .views-field-field-media-descrizione-remota,
.block-views-blockgrid-fp-media-block-1 .views-field-field-media-descrizione-remota,
.block-views-blockgrid-fp-media-block-4 .views-field-field-media-descrizione-remota,
.block-views-blockgrid-fp-media-block-5 .views-field-field-media-descrizione-remota,
.block-views-blockgrid-fp-media-bis-block-1 .views-field-field-media-descrizione-remota,
.block-views-blockgrid-fp-media-bis-block-4 .views-field-field-media-descrizione-remota,
.view-pagine-stagioni .views-field-field-media-descrizione-remota,
.block-views-blockvideo-popolari-mio-block-1 .views-field-field-media-descrizione-remota,
.block-views-blockvideo-popolari-mio-block-2 .views-field-field-media-descrizione-remota {
font-style: italic;
color: #505050;
}
/* Slideshow prima pagina */
/* Siccome ci metto i link
* allora tolgo la data del post
* questo era il codice originale nella view
*
*{{ created }}
*
*ed è diventato
*
*{{ created }}
*
* a questo punto lo nascondo
*/
.tp-caption__meta-item_nascondi {
display: none;
}
/**
* il bottone "continua" nell'ultima griglia
* della prima pagina
*/
/**
* griglia post
*/
#block-views-block-grid-di-post-per-la-prima-pagina-block-2 .view-footer{
text-align: center;
}
/**
* griglia video
*/
.block-views-blockgrid-fp-media-block-5 .view-footer{
text-align: center;
padding-bottom: 2.5em;
}
/**
*.block-views-blockgrid-fp-media-bis-block-4 .view-footer {
* text-align: center;
* padding: 1em 0 3em 0;
*}
*/
/*
la regione subfeatured se togli spazi prima e dopo
schiaccia tutto
ma con gli spazi c'è troppo vuoto, che va quindi ridotto.
*/
/* soluzione molto inelegante
*#block-googleorizzontale{
*margin-bottom: -3.0em;
*}
*/
/* soluzione che avevo adottato, usarla quando
* riavrai pubblicità
*
* .sub-featured__section {
* padding: 40px 0 46px;
* }
*/
/* Elenco dei post in prima pagina
* riga fra le colonne
*
*/
#block-views-block-grid-di-post-per-la-prima-pagina-block-1 .fx,
#block-views-block-grid-di-post-per-la-prima-pagina-block-2 .fx{
border-style:solid;
border-width: 0px 1px 0px 0px;
border-color: black;
}
#block-views-block-grid-di-post-per-la-prima-pagina-block-1{
padding: 0.5em 0 0.5em 0;
}
#block-views-block-grid-di-post-per-la-prima-pagina-block-2{
padding: 0.5em 0 0 0;
}
.archiviopost .fx{
border-style:solid;
border-width: 0px 1px 0px 0px;
border-color: black;
margin-bottom:1em;
}
.archiviopost .row{
border-style:solid;
border-width: 0 0 1px 0px;
border-color:#f3f3f3;
margin-bottom:1em;
}
#block-views-block-grid-di-post-per-la-prima-pagina-block-1 .fx:last-child,
#block-views-block-grid-di-post-per-la-prima-pagina-block-2 .fx:last-child,
.archiviopost .fx:last-child {
border-style: unset;
}
@media (max-width: 992px){
#block-views-block-grid-di-post-per-la-prima-pagina-block-1 .fx,
#block-views-block-grid-di-post-per-la-prima-pagina-block-2 .fx,
.archiviopost .fx {
border-style: unset;
}
}
/* Elenco dei post in prima pagina
* coloro i tag
*
*/
.tag-post-prima a{
display: inline-block;
background-color: #fff7eaeb;
margin: 5px 0 5px 0;
padding: 0 0.6em 0 0.6em;
border-radius: .5em;
}
/*
* 05
NODO
*/
/*
Impostazioni generali del nodo
*/
/*
ho impostato la regione senza spazio tra i blocchi e allora occorre
mettere uno spazio dopo il video e prima della descrizione
*/
.field--name-field-media-descrizione-remota{
padding-top: 1em;
}
/*
Il default label, non so perché, fa un po' schifo. Cambio il background che altrimenti sarebbe troppo scuro.
*/
.label-default {
background-color: #eee;
}
/*
Ho fatto un label apposito per la rassegna stampa
*/
.label-rassegna {
background-color: #ff7f5052;
color: #2d2d2d;
display: inline;
font-size: inherit;
font-weight: bold;
padding: .2em .6em .3em;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
/*
* 06
POST
*/
/* Togliamo dal post
* ma anche dalle sue anteprime o views
* l'autore.
* Nelle proprietà del content type posso così
* mantenere il display data
* (che è unico comando con display autore)
*/
/* Le views non devono far vedere l'autore
* allora mettiamo la riga grigia dopo il titolo
* e non dopo l'autore.
* E così poi possiamo nascondere l'autore dalle views
*/
/* feb 2022
* mi spiace devo disattivare questa modifica della riga
* perchè mi crea una riga nel titolo
* dei riquadri
*/
/*
.views-field-title a {
display: block;
text-decoration: none;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #eeeeee;
}
*/
#block-views-block-mt-posts-masonry-block-2
.views-field-name,
.node--type-mt-post .node__user-info {
display: none;
}
#block-views-block-mt-posts-masonry-block-3
.views-field-name,
.node--type-mt-post .node__user-info {
display: none;
}
/* Non so se ci sono metodi migliori
* per eliminare spazio bianco a sinistra
* (certo potresti modificare il template tpl
* ma in caso di upgrade perderesti le modifiche
* allora agiamo in css
* cambio proprietà del float da "left" a "none"
*/
.node--type-mt-post .node__side {
float: none;
width: 100px;
padding-right: 30px;
min-height: 1px;
}
/*
centriamo il titolo del video quando richiamo un media
*/
/*
questo non so se è ancora attuale e utile,
* perché non mi pare che uso ancora blocchi per richiamare media
*/
.block-field-blockmediaremote-videoname {
text-align: center;
}
/*
questo invece è attuale
*/
.media--view-mode-richiamato-in-un-media{
text-align:center;
font-style: italic;
padding-bottom: 1em;
}
/*
centriamo i video che non sono YT
*/
.video-embed-field-lazy{
text-align: center;
}
/*
* 07
BLOCCHI RICERCA
*/
/*
* Blocco minimale in cima in cima
* in top highlighted first
* Non lo sto usando ancora perché non riesco a mettere in linea
* search e social icon nella visualizzazione mobile
* Ho visto che è importante comunque la regole display inline-flex
*/
/*
#views-exposed-form-search-mio-page-3 .form-actions {
display:inline-block;
margin-top: 0em;
}
#views-exposed-form-search-mio-page-3 .form-item
{
margin:6px 8px 0 0;
padding:0;
}
* Le seguenti due funzioni
* vanno limitate
* al blocco in questione
* con questa sintassi invece si applicano
* a tutti i blocchi di ricerca e non va bene
#edit-search-api-fulltext
{
padding:0.1em;
}
#edit-submit-search-mio
{
margin:6px 8px 0 0;
padding:0.3em;
}
*/
/*
* Blocco search mio, che sto usando proprio
* in cima alla front page (sotto al menù)
* l'ho tolto nel maggio 2022
#views-exposed-form-search-mio-page-1 .form-actions {
display:inline-block;
margin-top: 0em;
}
#views-exposed-form-search-mio-page-1 .form-item {
margin-top: 0.6em;
}
@media (max-width: 406px){
#views-exposed-form-search-mio-page-1 .form-item, .form-actions {
width: 50%;
margin-right:0;
}
}
*/
/*
* questo invece è il blocco di ricerca
* nella pagina esplora
*/
#views-exposed-form-search-mio-page-1 .form-actions {
display:inline-block;
margin-top: 0em;
}
#views-exposed-form-search-mio-page-1 .form-item {
margin-top: 0.6em;
}
@media (max-width: 406px){
#views-exposed-form-search-mio-page-1 .form-item, .form-actions {
width: 50%;
margin-right:0;
}
}
/*
* risultato ricerca
*
*/
.tag-risultato-ric a{
display: inline-block;
background-color: #fff7eaeb;
margin: 5px 0 5px 0;
padding: 0 0.6em 0 0.6em;
border-radius: .5em;
}
/*
* 08
PAGINA DEI MEDIA
*/
/* codice preso dal mio tema bootstrap zr fatto da me (qui ho aggiunto piccole modifiche):
* sono riuscito a centrare il field contenente elementi
* ora se vuoi puoi anche riportare i field nella configurazione del display
* non c'è più bisogno dell'espediente di farli diventare block
* (espediente usato per centrare l'immagine meme,
* ma, a questo punto, puoi tornare a far essere un field e centrarla così)
*/
.field--name-field-media-oembed-video{
text-align: -webkit-center;
text-align: -moz-center;
}
/* la centratura va bene su pc, ma su cell riduce dimensioni */
/* L'ho tolto nel gennaio 2022 (vedi le modifiche seguenti su dimensioni)
@media only screen and (max-width: 596px) {
.field--name-field-media-oembed-video{
text-align: justify;
}
}
*/
/* grosso problema il media remote responsive */
/* Prima di gennaio 2022
@media only screen and (max-width: 596px) {
.media-oembed-content {
max-width: 314px;
max-height: 176.6px;
}
}
*/
/* Da gennaio 2022 */
@media only screen and (max-width: 596px) {
.media-oembed-content {
max-width: 22em;
height: 12.5em;
}
}
/*
fine codice preso dal vecchio tema
*/
/*
Questo è un codice che ho creato per le clip
incorporate nel post
prendendo ispirazione da qui
https://stackoverflow.com/questions/24994743/how-can-i-center-a-youtube-video-while-keeping-it-responsive
*/
.clipyt-container {
width: 90vw;
max-width: 560px ;
margin:auto;
}
.clipyt-container iframe,
.clipyt-container object,
.clipyt-container embed {
width: 90vw;
max-width: 560px ;
height:calc((9/16)*90vw);
max-height:calc((9/16)*560px);
}
/*
* 09
* TAGS
*/
/*
* i tags appaiono nel media, nel content e nei risultati di ricerca,
* li sistemo e tolgo cancelletto
* ci sono codici tags anche nel codice prima pagina (views)
* e nel codice risultato di ricerca (views)
*/
.field--entity-reference-target-type-taxonomy-term {
margin: 0;
}
.field--entity-reference-target-type-taxonomy-term a{
position: relative;
display: inline-block;
background-color: blanchedalmond;
margin: 5px 0 5px 0;
padding: 0 0.6em 0 0.6em;
border-radius: .5em;
}
.field--entity-reference-target-type-taxonomy-term .field__item a:before {
content: "";
}
/*
* elenco tags
* li uso nella sezione "esplora"
*
*/
ul.menu li a {
padding: 10px 0 10px 0px;
line-height: 150%;
display: block;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}
ul.menu li > a:before {
display:none;
}
#block-magazineplus-tagsmenu li,
#block-magazineplus-tagsmenu a,
#block-tagsmenu li,
#block-tagsmenu a,
#block-tagsmenu-2 li,
#block-tagsmenu-2 a,
#block-magazineplus-tagsmenu-2 li,
#block-magazineplus-tagsmenu-2 a,
#block-tagsmenu-3 li,
#block-tagsmenu-3 a,
#block-magazineplus-tagsmenu-3 li,
#block-magazineplus-tagsmenu-3 a,
#block-tagsmenu-4 li,
#block-tagsmenu-4 a,
#block-magazineplus-tagsmenu-4 li,
#block-magazineplus-tagsmenu-4 a {
position: relative;
display: inline-block;
background-color: #eee;
margin: 5px 5px 5px 0;
padding: 0 0.6em 0 0.6em;
border-radius: .5em;
}
/**
* 10
* PAGINA CON IL TAXONOMY TERM
*/
/*
*
* i font sono simili a quelli ottenuti in
*04 PRIMA PAGINA
* font delle anteprime
*/
#block-magazineplus-views-block-immagine-prima-del-titolo-block-1{
padding-bottom: 25px;
}
.titolo-nei-risultati-term a{
font-family: 'Playfair Display', Times New Roman, Serif;
font-size: 15.5px;
font-weight: bold;
color: #505050;
transition: all 0.2s ease-in-out;
text-decoration: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
.descrizione-risultati-term{
font-family: Georgia, Times New Roman, Serif;
font-style: italic;
color: #505050;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
/*
* pulsante Aiax load more,
* css fatto alla buona, copiando grezzamente dal css del bottone in prima pagina,
* però andrebbero prese tutte le funzioni hover, active eccetera
* ma ho fatto una cosa alla buona e essenziale per il momento.
* E comunque il metodo migliore è un altro
* e cioè non copiare tutto il css del bottone blue,
* ma intervenire nel template,
* mettendo views-infinite-scroll-pager.html.twig
* nella cartella del tema,
* ed editarlo in modo da applicare la stessa css class del bottone in prima pagina
*/
/*
* Questo è il navigatore a fondo pagina
* lo uso in diversi tipi di contenuto
* e raccolte
*/
li.pager__item > a, li.pager__item.is-active,
.navigatorepost a {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
display: inline-block;
margin-bottom: 1em;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/**
* 11
* TEASER
*/
.media .node--view-mode-teaser,
.node__main-content-section .node--view-mode-teaser {
padding: 0;
margin-bottom: 0;
margin-top: -1em;
}
.node--view-mode-teaser {
padding: 0;
margin-bottom: 0;
margin-top: 3em;
}
.node--view-mode-teaser .node__header{
text-align:center;
}
.node--view-mode-teaser .field--name-field-copertina,
.node--view-mode-teaser .field--name-thumbnail,
.node--view-mode-teaser .field--name-field-image {
text-align: -webkit-center;
text-align: -moz-center;
}
.node--view-mode-teaser .field--name-field-copertina,
.node--view-mode-teaser .field--name-thumbnail {
margin-bottom: 2em;
}
/**
* nel teaser che per esempio vedo nella pagina del taxonomy term
* il bordo sopra al tag lo cancello e sposto il bordo sotto al tag a chiusera
* del teaser
*/
.node--view-mode-teaser .node__meta{
padding-top: 0;
margin-bottom: 1em;
border-bottom: 1px;
border-bottom-style: solid;
border-bottom-color: #eeeeee;
border-top: none;
display: block;
}
/**
* il bottoncino read more l'ho messo con il modulo Smart Read More Link,
* che purtroppo mi richiama il field sommario anziché (come promesso) troncare il body.
* Accontentiamoci: se uso DS purtroppo perdo l'aggancio con il css del tema.
* Eventualmente in futuro quando hai tempo la soluzione più potente è personalizzabile,
* mantenendo le eleganze del tema, è: usare DS, e modificare il css in modo da replicare
* nel dettaglio gli stili originali del tema in materia di teaser
* RICORDATI CHE PER QUESTO RISULTATO DI TEASER ho modificato il template
* node--mt_post--teaser.html.twig, che trovi in originale nel backup dell'11.5.22
*
* Aggiornamento del 21.4.2024, ho tolto il modulo Smart Read More Link e cerco di utilizzare
* le impostazioni native del tema.
* Al momento non riesco a mettere il read more. Ok messo (è il campo link nel display mode).
* Nel campo link non riesco a togliere il pulsante commenta. Questo perché non riesco
* a disinstallare il modulo commenti (infatti nonostante abbia rimosso grezzamente, e me
* ne dispiaccio, campi, viste , giù via tutto, rimane comunque un campo nell'elenco
* dei campi nei resoconti (comment_body). E non so come toglierlo.
* Quindi l'unica cosa è nascondere il bottone con il css display none.
* Incasinare il Db non è utile.
* Se in futuro vorrai ripristinare la possibilità di commenti, dovrai ricostruire i
* corrispondenti elementi del tema prendendoli dal modello originale.
*
* Aggiornamento settembre '24, ho rimesso i commenti.
* Ho solo attivato il modulo. Non so se manca qualcosa, mi pare di no.
* Anche read more del teaser (quello della gestione visualizzazione) non ho fatto nessun intervento
* e mi sembra non manchi niente.
* Ho cambiato il teaser twig del tema, in modo da avere la data sotto al titolo e non alla
* fine dell'anteprima.
*/
.comment-add {
display: none;
}
.field--type-text-with-summary .node__links {
margin-top: 0;
}
/**
* Nel node di tipo Post
* cancello il bordo sopra al tag
* e riduco gli spazi
*/
.field--entity-reference-target-type-taxonomy-term .field__label {
font-size: 12px;
text-transform: uppercase;
font-weight: 400;
padding-bottom: 0;
margin-bottom: 1em;
border-bottom: none;
}
/* Il teaser del post nella pagina del taxonomy term
* ho messo visulizzazione teaser in due colonne
* e ho ridotto con questo comando il margin
* che il tema mette sotto al post category.
* Inoltre ho messo i due field nella stessa riga.
.layout--twocol-section--50-50 .field--entity-reference-target-type-taxonomy-term.field__item {
display: inline;
}
.layout--twocol-section--50-50 .field--entity-reference-target-type-taxonomy-term.field__item {
display:inline-block;
margin: 0 6px 0 0;
}
.layout--twocol-section--50-50 .field--name-field-data-del-post{
display:inline-block;
}
*/
/* C'è anche il teaser come modo di visualizzazione
* nella gestione visualizzazione del content type "post".
* In pratica non una view, ma un modo di visualizzazione
* definito nella gestione visualizzazioni.
* Lo uso per mettere i teaser (anteprime) attraverso il Ckeditor
* all'interno di un nodo.
*/
.field--name-field-se-ne-parla-anche {
margin-left:auto;
margin-right:auto;
border: 5px solid darkblue;
height: 76%;
width: 76%;
padding:0.8em;
margin-bottom:1em;
}
@media (max-width: 596px){
.field--name-field-se-ne-parla-anche {
margin-left:auto;
margin-right:auto;
border: 5px solid darkblue;
height: 95%;
width: 95%;
padding:0.8em;
margin-bottom:1em;
}
}
.field--name-field-se-ne-parla-anche .field__label {
border-width: 0;
}
/**
* 12
* PAGINE STAGIONI
*/
#block-magazineplus-navigazionefrastagioniincima,
#block-magazineplus-navigazionefrastagioniincima-2,
#block-navigazionefrastagioniincima-3,
#block-navigazionefrastagioniincima-4 {
text-align: center;
padding-bottom:1.3em;
}
#block-magazineplus-navigazionefrastagioniincima .btn,
#block-magazineplus-navigazionefrastagioniincima-2 .btn,
#block-navigazionefrastagioniincima-3 .btn,
#block-navigazionefrastagioniincima-4 .btn{
margin:0.3em;
}
.view-pagine-stagioni .view-footer{
text-align: center;
}
.view-pagine-stagioni .btn{
margin:0.3em 0.3em 3em 0.3em;
}
/**
* 13
* IMMAGINI
*/
/* L'immagine nella pagina del term
* * */
.field--name-field-copertina-term,
.field--name-thumbnail {
text-align: center;
}
.views-field-field-copertina-term,
.views-field-thumbnail {
text-align: center;
margin: 20px 0 15px 0;
}
/* La galleria del media e del term
* purtroppo devo cambiare tutte le etichette dei field
* non sono capace di cambiare solo questa etichetta
* feb 2022: quando riuscirai a far diventare il field galleria un block allora
* riuscirai a personalizzare solo questo field label e non toccare gli altri
* Ho installato Display Suite, ma ancora non ci riesco a creare un block da field
* Ho provato con le views, ma mentre il contextual filter riesco a impostarlo nei term
* vedi la view che ho fatto per l'immagine di copertina del term
* non riesco a farlo funzionare nei media
* non riesco cioè a fare una view per blocchizzare il fiel galleria del media
*/
/* Maggio 2022
* con Colorbox e piccole modifiche al codice seguente
* (che avevo elaborato in precedenza e di cui al commento precedente)
* ho ottenuto risultati soddisfacenti.
*/
.field--name-field-immagine-galleria-term,
.field--name-field-immagine-galleria-media {
text-align: center;
padding-bottom: 9em;
margin-bottom:4em;
}
@media only screen and (max-width: 992px) {
.field--name-field-immagine-galleria-term,
.field--name-field-immagine-galleria-media {
text-align: center;
padding-bottom: 7em;
margin-bottom:4em;
}
}
@media only screen and (max-width: 596px) {
.field--name-field-immagine-galleria-term,
.field--name-field-immagine-galleria-media {
text-align: center;
padding-bottom: 5.5em;
margin-bottom:4em;
}
}
@media only screen and (max-width: 440px) {
.field--name-field-immagine-galleria-term,
.field--name-field-immagine-galleria-media {
text-align: center;
padding-bottom: 4em;
margin-bottom:4em;
}
}
@media only screen and (max-width: 360px) {
.field--name-field-immagine-galleria-term,
.field--name-field-immagine-galleria-media {
text-align: center;
padding-bottom: 3em;
margin-bottom:3em;
}
}
.image-style-galleria-prima-max-400x400{
padding: 0 0.5em 0.5em 0.5em;
}
.image-style-prima-colorbox-max-650x650{
display: block;
margin-left: auto;
margin-right: auto;
}
.image-style-galleria-mia-thumbnail{
float: left;
width: 20%;
padding: 0.5em;
}
.field--name-field-immagine-galleria-media::after {
content: "";
clear: both;
display: table;
}
.field__label{
font-weight:400;
font-family: 'Playfair Display', Times New Roman, Serif;
font-size: 30px;
padding-top: 15px;
margin: 0 0 40px 0;
border-width: 2px 0 0 0;
border-top-style: solid;
border-color: #eeeeee;
}
/* Uso il field immagine per fare una gallery alla fine del post
* e uso il label come titolo
* e faccio in modo che questo label si comporti come un h2 title
*/
.field--name-field-image .field__label {
font-family: 'Playfair Display',Times New Roman,Serif;
font-size: 30px;
padding-top: 15px;
margin: 0 0 30px 0;
border-width: 2px 0 0 0;
border-top-style: solid;
border-color: #eeeeee;
font-weight: 400;
text-align: center;
}
/* meme preso dal vecchio tema, ho cambiato solo il padding */
.field--name-field-media-img-meme{
padding: 0 0 2em 0;
text-align: -webkit-center;
text-align: -moz-center;
}
/* Immagini inserite con l'editor.
*
*/
.caption > figcaption {
display: table-caption;
max-width: none;
caption-side: bottom;
text-align: center;
font-style:italic;
background-color: #ffe4c47a;
}
.media--view-mode-immagine-a-sinistra {
padding-right: 8px;
margin-top: 0.45em;
}
figure.caption.caption-drupal-media.align-left {
padding-top: 0.45em;
}
figure.caption.caption-drupal-media.align-left figcaption {
margin-right: 8px;
}
.media--view-mode-immagine-al-centro{
text-align: -webkit-center;
text-align: -moz-center;
margin-bottom: 0.4em;
}
.media--view-mode-immagine-al-centro-max-400-px-{
text-align: -webkit-center;
text-align: -moz-center;
margin-bottom: 0.4em;
}
figure.caption.caption-drupal-media.align-center figcaption {
margin-top: -0.4em;
margin-bottom: 0.4em;
}
.media--view-mode-immagine-a-destra {
padding-left: 8px;
margin-top: 0.45em;
}
figure.caption.caption-drupal-media.align-right{
padding-top: 0.45em;
}
figure.caption.caption-drupal-media.align-right figcaption{
margin-left: 8px;
}
/* Le gif animate sforano nel telefonino */
/* quando hai tempo rendile responsive
(codice preso dal vecchio tema)
*/
.media--view-mode-gif-animata {
max-width: 330px;
}
/**
* 14
* SOCIAL E IFRAME
*/
/* Amazon ads */
/* link ai prodotti e site stripe
* fare in modo che il testo sia intorno alla pubblicità
*/
#block-views-block-amazon-variabile-300x250-block-1 {
text-align: -webkit-center;
text-align: -moz-center;
}
.amazon_testoright{
float:left;
padding-right:15px;
margin-top: 0.4em;
margin-bottom:-0.5em;
}
@media (max-width: 596px){
.amazon_testoright{
float:left;
padding-right:5px;
margin-top: 0.4em;
margin-bottom:-0.5em;
}
}
.amazon_testoleft{
float:right;
padding-left:15px;
margin-top: 0.4em;
margin-bottom:-0.5em;
}
@media (max-width: 596px){
.amazon_testoleft{
float:right;
padding-left:5px;
margin-top: 0.4em;
margin-bottom:-0.5em;
}
}
/* Instagram embed */
/* mettere al centro il post incorporato
* quando lo schermo è pc.
* Su smartphone non c'è bisogno
*
*
*
* [embed]
*
* [/embed]
*
*/
/* TWITTER embed */
/* mettere al centro il tweet incorporato
* quando lo schermo è pc.
* Su smartphone non c'è bisogno
*/
.twitter-tweet {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Facebook aggiungere questo div
* al codice che prendi da Facebook
* (è sufficiente prendere il codice che Fb ti
* offre subito da copiare)
* aggiungi:
*
* ...
*
* puoi anche solo aggiungere la class e il center glielo
* fai mettere tramite il comando sull'editor
*/
@media (max-width: 767px){
.facebook-zr {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
max-width:600px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 768px){
.facebook-zr {
overflow:hidden;
padding-bottom:50%;
position:relative;
height:0;
max-width:600px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 992px){
.facebook-zr {
overflow:hidden;
padding-bottom:36%;
position:relative;
height:0;
max-width:600px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1200px){
.facebook-zr {
overflow:hidden;
padding-bottom:30%;
position:relative;
height:0;
max-width:600px;
margin-left: auto;
margin-right: auto;
}
}
.facebook-zr iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/*
* 15
* COMMENTI
*/
/* nascondo i tips
* che compaiono sotto al campo quando uno deve mettere il commento
* Il formato per utenti non autenticati è il simple text
*/
.filter-guidelines-plain_text {
display: none;
}
/*
* 16
* RIGA
*/
/* La riga
* la faccio un po' più larga
* e cambio il colore (un po' scuro, un po' trasparenza)
*/
hr {
border-top: 2px solid #bcbcbc6b;
margin-top: 0.62em;
margin-bottom: 1.75em;
}
/*
* 18
* MEDIA AUDIO REMOTE
*/
/*
* views e elenchi e display provvisori
* in attesa che in qualche modo il player html
* funzioni anche su mobile (per ora funziona solo su pc)
*/
.field--name-field-media-audio-stream{
text-align: center;
}
.audiofield-downloads caption{
text-align: center;
}
.blazy--view--archivio-puntate {
text-align:center;
}
.views-field-name .au-nome-inelenco {
font-family: 'Playfair Display', Times New Roman, Serif;
font-size: 14px;
font-weight: bold;
color: #505050;
transition: all 0.2s ease-in-out;
text-decoration: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
.views-field-field-media-descrizione-remota .audiodescrizione-in-elenco{
font-style: italic;
font-size: 14px;
text-align:left;
color: #2d2d2d;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
.audiodescrizione-in-elenco strong{
font-weight:normal;
}
.audiodescrizione-in-elenco a{
text-decoration:none;
}
.audiodescrizione-in-elenco .views-more-link {
text-decoration:underline;
}
.audiodescrizione-in-elenco .views-more-link:hover{
text-decoration:none;
}
#block-magazineplus-breadcrumbarchiviopuntate h2,
#block-breadcrumbarchiviopuntate h2,
#block-magazineplus-breadcrumbarchiviopost h2,
#block-breadcrumbarchiviopost h2 {
text-align:left;
margin-top:-0.5em;
padding-top:0;
margin-bottom:0.1em;
border:0
}
#block-magazineplus-breadcrumbarchiviopuntate,
#block-breadcrumbarchiviopuntate,
#block-magazineplus-breadcrumbarchiviopost,
#block-breadcrumbarchiviopost {
padding-left: 0.5em;
}
#block-magazineplus-breadcrumbarchiviopuntate-2 h2,
#block-breadcrumbarchiviopuntate-2 h2{
text-align:left;
margin-bottom:0.1em;
border:0
}
#block-magazineplus-breadcrumbarchiviopuntate-2,
#block-breadcrumbarchiviopuntate-2{
padding-left: 0.5em;
margin-bottom:-1em;
}
.view-archivio-puntate .views-summary a{
font-weight:bold;
position:relative;
display:inline-block;
background-color:#eee;
margin:5px 5px 5px 0;
padding:0 0.6em 0 0.6em;
border-radius:.5em;
}
.view-archivio-puntate{
padding-bottom: 1em;
}
/*
* nel passaggio a D11
* il Js va aggiornato
*/
.main-content__section.fade, .fade {
opacity: 1 !important;
}
/*
* Eliminiamo lo spazio
* tra il campo search e il seguito
*/
#block-magazineplus-formespostosearch-miopage-1 {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}