« MediaWiki:Common.css » : différence entre les versions

Version du 12 février 2024 à 13:51

/*############ Custom CSS for WikiThionville. ############*/
/* Responsive content zoom */
@media only screen and (max-width: 270px) {
  #bodyContent {
    zoom: 0.2;
  }
}
@media only screen and (min-width: 270px) {
  #bodyContent {
    zoom: 0.3;        
  }
}
@media only screen and (min-width: 340px) {
  #bodyContent {
    zoom: 0.4;        
  }
}
@media only screen and (min-width: 415px) {
  #bodyContent {
    zoom: 0.5;        
  }
}
@media only screen and (min-width: 570px) {
  #bodyContent {
    zoom: 0.7;        
  }
}
@media only screen and (min-width: 730px) {
  #bodyContent {
    zoom: 0.9;        
  }
}
@media only screen and (min-width: 850px) {
  #bodyContent {
    zoom: 1;
  }
}
/* Rules for small screen devices like smartphones */
@media only screen and (max-width: 570px) {
  #bodyContent tr {
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
  }
  #bodyContent tr td {
    max-width: 98%
  }
  .citizen-section-collapsible{
    zoom: 1.5;
  } 
  .citizen-table-wrapper {
    overflow: hidden!important;
    border-radius: 25px!important;
  }
  #bodyContent font {
    font-size: 1.3rem!important;
  }
  .mw-headline {
    font-size: 2.5rem!important;
  }
  .citizen-overflow--right {
    -webkit-mask-image:none!important;
    -mask-image:none!important;
  }
  .mw-category-columns {
    display: grid;
    justify-content: center;
    zoom: 2;
  }
  #bodyContent p {
    font-size: 30px!important;
  }
  #bodyContent h2{
    font-size: 45px!important;
  }
}
/* General CSS rules */
#bodyContent tr {
  display: flex;
  flex-direction: row;
  align-items: center
}

.citizen-table-wrapper {
  border-radius: 15px;
}

#bodyContent table {
 border: none!important;
 overflow: hidden!important;
}

#bodyContent tr p{
  font-size: 1rem!important;
}

.skin-citizen-dark #bodyContent font {
  color: var(--color-base--emphasized);
}

.skin-citizen-dark #bodyContent table {
  background-color: #212630;
}