MediaWiki:Common.css: differenze tra le versioni

Da Guide@Debianizzati.Org.
Vai alla navigazione Vai alla ricerca
Nessun oggetto della modifica
m (aggiunto css responsive (prova 1))
Etichette: Modifica da mobile Modifica da web per mobile
 
(13 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> */
/* 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 */
/* Tnx to great mm-barabba */
pre { overflow: auto; }


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%; }


/* Larghezza box di ricerca
#simpleSearch
input#searchInput {
width: 15em;
}
}

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%; }

}