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

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

/* Set the box styles */

.box {
  display: table-cell;
  height: 115px;
  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: 1em;
  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;
}
.card:hover {
  /* Scale the background image by 5% and set the background position to center */
  background-position: center;
  opacity: 1; /* add hover opacity */
}

.headercard {
  display: table-cell;
  height: 115px;
  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 {
    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);
}