MediaWiki:Common.css: differenze tra le versioni
Vai alla navigazione
Vai alla ricerca
S3v (discussione | contributi) mNessun oggetto della modifica |
m (aggiunto css responsive (prova 1)) Etichette: Modifica da mobile Modifica da web per mobile |
||
(18 versioni intermedie di un altro utente non mostrate) | |||
Riga 1: | Riga 1: | ||
/* Gli stili CSS inseriti qui si applicano a tutte le skin */ | /* Gli stili CSS inseriti qui si applicano a tutte le skin */ | ||
/* Inibisce il titolo della guida per la homepage */ | |||
body.page-Pagina_principale h1.firstHeading { display:none; } | body.page-Pagina_principale h1.firstHeading { display:none; } | ||
/* Scrollbar per il testo all'interno del tag <pre> | /* Scrollbar per il testo all'interno del tag <pre> */ | ||
pre { overflow: auto; } | /* Altezza massima del box "pre" uguale a 650px */ | ||
/* Se il testo nei box causa una lunghezza maggiore, compare una scrollbar verticale */ | |||
/* Tnx to great mm-barabba */ | |||
pre { overflow: auto; max-height:650px; } | |||
/* Tentativo versione responsive */ | |||
* { box-sizing: border-box; } | |||
/* Clear float */ | |||
.groupclear:before, .groupclear:after { | |||
display: table; | |||
content: ""; | |||
} | |||
.groupclear:after { clear: both; } | |||
/* Riquadro Banner e contenuto | |||
********************************/ | |||
/* Colonne con float */ | |||
.col_float { | |||
float: left; | |||
padding: 1% 0.5% 0; | |||
} | |||
.riquadro_banner { | |||
width: 100%; | |||
/*margin-top: 0.7em;*/ | |||
margin-bottom: 2%; | |||
border: 1px solid #ccc; | |||
border-radius: 0.5em; | |||
background-color: #f9f9ff; | |||
} | |||
h1.title_banner, h2.title_banner { | |||
margin: 0; | |||
padding: 0.1em; | |||
border: none; | |||
font-size: 162%; | |||
} | |||
/* Riquadro banner: home */ | |||
.deb_welcome { | |||
width: 65%; | |||
text-align: center; | |||
} | |||
.deb_welcome_link { | |||
width: 35%; | |||
font-size: 90%; | |||
} | |||
#articlecount { font-size:85%; } | |||
/* Riquadro banner: Indice Guide */ | |||
.indice_guide { width: 55%; text-align: center;} | |||
.lista_link { width: 16,5%; font-size: 90%; padding: 0;} | |||
/* Colonne come tabelle | |||
************************/ | |||
.col_container { | |||
display: table; | |||
width: 100%; | |||
border-collapse:separate; | |||
border-spacing: 8px; | |||
margin: 0 -8px; | |||
} | |||
.col_table { | |||
display: table-cell; | |||
padding:0 1%; | |||
} | |||
/* sezioni in colonne: home */ | |||
h2.title_sezioni { | |||
margin: 1% 0 2%; | |||
padding: 0.2em 0.4em; | |||
font-family: sans-serif; | |||
font-size:110%; | |||
font-weight:bold; | |||
text-align:left; | |||
} | |||
.deb_info { | |||
width: 55%; | |||
background-color: #f0ffff; | |||
border: 1px solid #cef2e0; | |||
} | |||
.deb_info h2 { | |||
border:1px solid #a3bfb1; | |||
background-color:#cef2e0; | |||
} | |||
.deb_risorse { | |||
width: 45%; | |||
background-color: #f5faff; | |||
border: 1px solid #cedff2; | |||
} | |||
.deb_risorse h2 { | |||
border:1px solid #a3b0bf; | |||
background-color:#cedff2; | |||
} | |||
.deb_altre_risorse { | |||
margin-top: 10px; | |||
background-color: #faf5ff; | |||
border: 1px solid #ddcef2; | |||
padding: 0 1%; | |||
} | |||
.deb_altre_risorse h2 { | |||
border:1px solid #afa3bf; | |||
background-color:#ddcef2; | |||
} | |||
.deb_info, .deb_risorse, .deb_altre_risorse { | |||
border-radius: 0.5em; | |||
font-size: 96.4%; | |||
} | |||
/* media queries | |||
* tenerlo per ultimo */ | |||
@media screen and (max-width: 600px) { | |||
.col_float { width: 100%; } | |||
.col_container { margin: 0; border-spacing: 0; } | |||
.col_table { display: block; width: 100%; padding:0 2%; } | |||
} |
Versione attuale delle 18:13, 24 feb 2021
/* Gli stili CSS inseriti qui si applicano a tutte le skin */
/* Inibisce il titolo della guida per la homepage */
body.page-Pagina_principale h1.firstHeading { display:none; }
/* Scrollbar per il testo all'interno del tag <pre> */
/* Altezza massima del box "pre" uguale a 650px */
/* Se il testo nei box causa una lunghezza maggiore, compare una scrollbar verticale */
/* Tnx to great mm-barabba */
pre { overflow: auto; max-height:650px; }
/* Tentativo versione responsive */
* { box-sizing: border-box; }
/* Clear float */
.groupclear:before, .groupclear:after {
display: table;
content: "";
}
.groupclear:after { clear: both; }
/* Riquadro Banner e contenuto
********************************/
/* Colonne con float */
.col_float {
float: left;
padding: 1% 0.5% 0;
}
.riquadro_banner {
width: 100%;
/*margin-top: 0.7em;*/
margin-bottom: 2%;
border: 1px solid #ccc;
border-radius: 0.5em;
background-color: #f9f9ff;
}
h1.title_banner, h2.title_banner {
margin: 0;
padding: 0.1em;
border: none;
font-size: 162%;
}
/* Riquadro banner: home */
.deb_welcome {
width: 65%;
text-align: center;
}
.deb_welcome_link {
width: 35%;
font-size: 90%;
}
#articlecount { font-size:85%; }
/* Riquadro banner: Indice Guide */
.indice_guide { width: 55%; text-align: center;}
.lista_link { width: 16,5%; font-size: 90%; padding: 0;}
/* Colonne come tabelle
************************/
.col_container {
display: table;
width: 100%;
border-collapse:separate;
border-spacing: 8px;
margin: 0 -8px;
}
.col_table {
display: table-cell;
padding:0 1%;
}
/* sezioni in colonne: home */
h2.title_sezioni {
margin: 1% 0 2%;
padding: 0.2em 0.4em;
font-family: sans-serif;
font-size:110%;
font-weight:bold;
text-align:left;
}
.deb_info {
width: 55%;
background-color: #f0ffff;
border: 1px solid #cef2e0;
}
.deb_info h2 {
border:1px solid #a3bfb1;
background-color:#cef2e0;
}
.deb_risorse {
width: 45%;
background-color: #f5faff;
border: 1px solid #cedff2;
}
.deb_risorse h2 {
border:1px solid #a3b0bf;
background-color:#cedff2;
}
.deb_altre_risorse {
margin-top: 10px;
background-color: #faf5ff;
border: 1px solid #ddcef2;
padding: 0 1%;
}
.deb_altre_risorse h2 {
border:1px solid #afa3bf;
background-color:#ddcef2;
}
.deb_info, .deb_risorse, .deb_altre_risorse {
border-radius: 0.5em;
font-size: 96.4%;
}
/* media queries
* tenerlo per ultimo */
@media screen and (max-width: 600px) {
.col_float { width: 100%; }
.col_container { margin: 0; border-spacing: 0; }
.col_table { display: block; width: 100%; padding:0 2%; }
}