Nota: dopo aver pubblicato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.
- Firefox / Safari: tieni premuto il tasto delle maiuscole Shift e fai clic su Ricarica, oppure premi Ctrl-F5 o Ctrl-R (⌘-R su Mac)
- Google Chrome: premi Ctrl-Shift-R (⌘-Shift-R su un Mac)
- Internet Explorer / Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5
- Opera: premi Ctrl-F5.
/* 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);
}