MediaWiki:Citizen.css

/* Gli stili CSS inseriti qui vengono caricati dagli utenti che usano il tema Citizen 

Questo codice serve a togliere il titolo dalla Pagina_principale
body.page-Pagina_principale h1 { display: none; }

body.page-Pagina_principale .citizen-menu-checkbox-container { display: none; }


*/


body.page-Pagina_principale .mw-body-header { display: none; }

body.page-Pagina_principale .mw-body-footer { display: none; }

/*  metto il margine superiore più basso per le intestazioni h1*/
@media (max-width: 768px) {
.headercard h1 {
margin-top:0em;
  	
  }
}


/* Set the grid layout */
.grid {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
    overflow: visible;
}

/* Set the box styles */

.box {
  display: table-cell;
  height: 200px;
  border-radius: var(--border-radius--medium);
 /* vertical-align: center;*/
  background-repeat: no-repeat; 
  background-size: cover; 
  background-color: #4a4a4a;
  padding: 10px;
  border: 1px transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575);
  color: white;
  font-size: 1.2em;
  opacity: 0.85; /* add opacity */
  transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1), opacity 0.5s ease; /* add opacity transition */
  /* Set the background position to center */
  background-position: center;
}

 .box.box1d {
   background-image: url('images/c/c6/Libreria.jpg'); 
}
 .box.box2d {
   background-image: url('images/e/e7/2d.jpg'); 
}
 .box.box3d {
   background-image: url('images/f/f6/3d.jpg'); 
}

 .box.edificio {
   background-image: url("images/9/99/Edificio.jpg"); 
}
 .box.borgo {
   background-image: url('images/7/78/Borgo.jpg'); 
}
 .box.territorio {
   background-image: url('images/f/f1/Territorio.jpg'); 
}

 .box.storia {
   background-image: url('images/2/23/Storia.jpg'); 
}
 .box.tcostr {
   background-image: url('images/a/ab/Tcostr.jpg'); 

}
.box.progetti {
   background-image: url('images/2/2e/Progetti.jpg'); 
}
 .box.persone {
   background-image: url('images/f/fc/Persone.jpg'); 
}

.boxtag {
white-space: nowrap;
  display: table-cell;
  border-radius: var(--border-radius--medium);
  vertical-align: center;
  padding: 10px;
  border: 1px solid;
  border-color: var( --border-color-base );
  box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575);
  opacity: 0.6; /* add opacity */
  transition: opacity 0.5s ease; /* add opacity transition */
}
.boxtag:hover {
  opacity: 1; /* add hover opacity */
}

.box:hover {
  /* Scale the background image by 5% and set the background position to center */
  background-size: 105%;
  background-position: center;
  opacity: 1; /* add hover opacity */
}

.card {
  display: table-cell;
  height: 115px;
  border-radius: var(--border-radius--medium);
  vertical-align: center;
  background-repeat: no-repeat; 
  background-size: cover; 
  background-color: var( --color-surface-2 );
  padding: 10px;
  border: 1px transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575);
  opacity: 0.7; /* add opacity */
  transition: opacity 0.5s ease; /* add opacity transition */
  /* Set the background position to center */
  background-position: center;
  text-align:center;
}
.card:hover {
  /* Scale the background image by 5% and set the background position to center */
  background-position: center;
  opacity: 1; /* add hover opacity */
   background-color: var( --color-surface-3 )
}

.headercard {
  display: table-cell;
  height: auto;
  border-radius: var(--border-radius--large);
  vertical-align: top;
  background-repeat: no-repeat; 
  background-size: cover; 
  background: linear-gradient(to top left, #05b390, #157790), 
              linear-gradient(to top right, #00ffcc, #137988) rgb(79 138 154);
  padding: 10px;
  border: 1px transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575);
}
@media (max-width: 768px) {
  .headercard {
    text-align: center;
  }
}



/* Adjust the layout for smaller screens */
@media (max-width: 768px) {

     .gridcontainer{
          display: grid;
    justify-content: center;

     }
    .grid {
        display: block;
        border-spacing:0;
        width:80vw;
        margin-top:10px;
    }
   .grid tbody {
        width: 100%;
    }

   .grid tbody tr {
        width: 100%;
     }


    .box {
        display: block;
        width: 80vw;
        margin-top:10px;
/* Set the background position to center */
  background-position: center;
opacity: 1;

    }
    .card {
        display: block;
        width: 80vw;
height:auto;
        margin-top:10px;
opacity: 1;

    }
   .headercard {
        display: block;
        width: 80vw;
height:auto;
        margin-top:10px;
opacity: 1;

    }
}

.cardcap {
    text-align: left;
    /* writing-mode: vertical-rl; 
    white-space: nowrap;
    position: absolute;
    transform: translate(-26px, 20px) rotate(180deg)*/
} 
.tabcontainer{
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 5px;
}



.grid .box a:link,
.grid .box a:visited {
  color: white;
}

.grid .box:not(:has(a)) {
  color: white;
}

.boxtag a:link,
.boxtag a:visited {
  color: var(--color-base);
}

.boxtag:not(:has(a)) {
  color: var(--color-base);
}

.fas {
	font-size:2em;
	
}


/* rende l'intera cella cliccabile */
.clickable-cell {
    position: relative;
}

.full-cell-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.preview_modello{
	width:150px;
}

.view-model-table{
	border: 1px solid; border-color: var(--border-color-base); background-color: var(--color-surface-2); border-radius: 5px;
}

.view-model-table td,
.view-model-table th {
  border: 1px ;
  border-color: var(--border-color-base-lighter);
  padding: 8px;
}

.container-query{
	font-size:0.8em;
	overflow:scroll;
}

.button {
  white-space: nowrap;
  display: table-cell;
  color: #fff;
  border-radius: var(--border-radius--medium);
  vertical-align: middle;
  padding: 10px;
  border: 1px solid;
  border-color: var( --color-primary );
  background-color: var(--color-surface-2);
  box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575);
  transition: opacity 0.5s ease; /* add opacity transition */
  font-weight: var(--font-weight-medium);
  text-decoration:none;
}
.button:hover {
	background-color: var(--color-surface-3);
}