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

Page de l’interface de MediaWiki
mAucun résumé des modifications
(Résolution du texte "En savoir plus" qui est couppé)
(3 versions intermédiaires par le même utilisateur non affichées)
Ligne 2 : Ligne 2 :
/* Responsive content zoom */
/* Responsive content zoom */
@media only screen and (max-width: 270px) {
@media only screen and (max-width: 270px) {
    #bodyContent:not(:has(.home-header)) {
  #bodyContent:not(:has(.home-header)) {
      zoom: 0.2;
    zoom: 0.2;
    }
   }
   }
  @media only screen and (min-width: 270px) {
}
    #bodyContent:not(:has(.home-header)) {
@media only screen and (min-width: 270px) {
      zoom: 0.3;         
  #bodyContent:not(:has(.home-header)) {
    }
    zoom: 0.3;         
   }
   }
  @media only screen and (min-width: 340px) {
}
    #bodyContent:not(:has(.home-header)) {
@media only screen and (min-width: 340px) {
      zoom: 0.4;         
  #bodyContent:not(:has(.home-header)) {
    }
    zoom: 0.4;         
   }
   }
  @media only screen and (min-width: 415px) {
}
    #bodyContent:not(:has(.home-header)) {
@media only screen and (min-width: 415px) {
      zoom: 0.5;         
  #bodyContent:not(:has(.home-header)) {
    }
    zoom: 0.5;         
   }
   }
  @media only screen and (min-width: 570px) {
}
    #bodyContent:not(:has(.home-header)) {
@media only screen and (min-width: 570px) {
      zoom: 0.7;         
  #bodyContent:not(:has(.home-header)) {
    }
    zoom: 0.7;         
   }
   }
  @media only screen and (min-width: 730px) {
}
    #bodyContent:not(:has(.home-header)) {
@media only screen and (min-width: 730px) {
      zoom: 0.9;         
  #bodyContent:not(:has(.home-header)) {
    }
    zoom: 0.9;         
   }
   }
  @media only screen and (min-width: 850px) {
}
    #bodyContent:not(:has(.home-header)) {
@media only screen and (min-width: 850px) {
      zoom: 1;
  #bodyContent:not(:has(.home-header)) {
    }
    zoom: 1;
   }
   }
  /* Rules for small screen devices like smartphones */
}
  @media only screen and (max-width: 570px) {
/* Rules for small screen devices like smartphones */
    #bodyContent tr {
@media only screen and (max-width: 570px) {
      display: flex!important;
  #bodyContent tr {
      flex-direction: column!important;
    display: flex!important;
      align-items: center!important;
    flex-direction: column!important;
    }
    align-items: center!important;
    #bodyContent tr td {
      width: 98%
    }
    .citizen-section-collapsible{
      zoom: 1.5;
    }
    .citizen-table-wrapper {
      overflow: hidden!important;
      border-radius: 25px!important;
    }
    #bodyContent:not(:has(.home-header)) 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:not(:has(.home-header)) p {
      font-size: 30px!important;
    }
    #bodyContent:not(:has(.home-header)) h2{
      font-size: 45px!important;
    }
   }
   }
  /* General CSS rules */
   #bodyContent tr td {
   #bodyContent tr {
     width: 98%
     display: flex;
    flex-direction: row;
    align-items: center
   }
   }
    
   .citizen-section-collapsible{
    zoom: 1.5;
  }
   .citizen-table-wrapper {
   .citizen-table-wrapper {
     border-radius: 15px;
    overflow: hidden!important;
     border-radius: 25px!important;
   }
   }
 
   #bodyContent:not(:has(.home-header)) font {
   #bodyContent table {
    font-size: 1.3rem!important;
  border: none!important;
  overflow: hidden!important;
   }
   }
    
   .mw-headline {
  #bodyContent tr p{
     font-size: 2.5rem!important;
     font-size: 1rem!important;
   }
   }
 
   .citizen-overflow--right {
   .skin-citizen-dark #bodyContent font {
     -webkit-mask-image:none!important;
     color: var(--color-base--emphasized);
    -mask-image:none!important;
   }
   }
   #footer-places-disclaimers{
   .mw-category-columns {
     display: none!important;
     display: grid;
    justify-content: center;
    zoom: 2;
   }
   }
   .citizen-footer__content{
   #bodyContent:not(:has(.home-header)) p {
     justify-content: space-between;
     font-size: 30px!important;
   }
   }
   .citizen-footer__bottom {
   #bodyContent:not(:has(.home-header)) h2{
     padding-top: 0!important;
     font-size: 45px!important;
    border: 0!important;
   }
   }
  /* Home page style below*/
}
  .home-header{
/* General CSS rules */
      width: 100%;
#bodyContent tr {
      height: 100vh;
  display: flex;
      background-size: cover;
  flex-direction: row;
      background-image: url("/home/header_bg.jpg");
  align-items: center
      display: flex;
}
      flex-direction: column;
 
      color: aliceblue;
.citizen-table-wrapper {
      align-content: center;
  border-radius: 15px;
      justify-content: center;
}
      align-items: center;
 
  }
#bodyContent table {
  .home-header h1{
border: none!important;
    color: aliceblue!important;
overflow: hidden!important;
    text-shadow: 4px 5px 6px rgba(74,74,74,0.9);
}
  }
 
  .home-header .tinfo{
#bodyContent tr p{
      margin: 1px;
  font-size: 1rem!important;
      color: rgb(236, 238, 238);
}
  }
 
  .hheader-form{
.skin-citizen-dark #bodyContent font {
      display: flex;
  color: var(--color-base--emphasized);
      font-size: 0;
}
  }
#footer-places-disclaimers{
  .hheader-form .input{
  display: none!important;
      border: 0;
}
      padding-left: 10px;
.citizen-footer__content{
      border-radius: 10px 0 0 10px;
  justify-content: space-between;
      background-color: #212630;
}
      color: aliceblue;
.citizen-footer__bottom {
      height: 2.5rem;
  padding-top: 0!important;
      width: 400px;
   border: 0!important;
      box-sizing: border-box;
}
      -moz-box-sizing: border-box;
/* Home page style below*/
      -webkit-box-sizing: border-box;
.home-header{
  }
    width: 100%;
  .hheader-form .input:focus{
    height: 100vh;
      outline: none;
    background-size: cover;
  }
    background-image: url("/home/header_bg.jpg");
  .hheader-form .btn{
    display: flex;
      border: 0;
    flex-direction: column;
      background-color: #212630;
    color: aliceblue;
      color: aliceblue;
    align-content: center;
      height: 2.5rem;
    justify-content: center;
      border-radius: 0 10px 10px 0;
    align-items: center;
      box-sizing: border-box;
}
      -moz-box-sizing: border-box;
.home-header h1{
      -webkit-box-sizing: border-box;
   color: aliceblue!important;
      transition: all 300ms ;
  text-shadow: 4px 5px 6px rgba(74,74,74,0.9);
      position: relative;
}
      cursor: pointer;
.home-header .tinfo{
  }
    margin: 1px;
  .home-header h1{
    color: rgb(236, 238, 238);
      font-size: 3rem;
}
   }
.hheader-form{
  .home-header .enplus{
    display: flex;
      color: rgb(197, 200, 202);
    font-size: 0;
      position: absolute;
}
      bottom: 20px;
.hheader-form .input{
      text-decoration: none;
    border: 0;
      display: flex;
    padding-left: 10px;
      flex-direction: row;
    border-radius: 10px 0 0 10px;
      align-items: center;
    background-color: #212630;
  }
    color: aliceblue;
  .home-header .enplus p{
    height: 2.5rem;
      margin-left: 10px;
    width: 400px;
      clear: both;
    box-sizing: border-box;
      display: inline-block;
     -moz-box-sizing: border-box;
      overflow: hidden;
     -webkit-box-sizing: border-box;
      white-space: nowrap;
}
      width: 0px;
.hheader-form .input:focus{
      transition: all 500ms;
     outline: none;
  }
}
  .home-header .enplus:hover > p{
.hheader-form .btn{
      width: 92px;
     border: 0;
  }
    background-color: #212630;
  #plusdinfo {
      margin-top: 200px;
  }
  .container {
      padding-left: 20%;
      padding-right: 20%;
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  }
  .container h1{
      margin-top: 80px;
      background: rgb(241,82,52);
      background: -moz-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
      background: -webkit-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
      background: linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;  
      -moz-background-clip: text;
      -moz-text-fill-color: transparent;
  }
  .cardlist {
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
  }
  .cardlist .li{
      margin-top: 200px;
      display: grid;
      max-width: 1350px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-column-gap: 40px;
      grid-row-gap: 40px;
  }
   .card {
      border-radius: 16px;
      border: 1px solid rgba(241, 82, 52, 0.47);
      padding: 15px;
      background-color: rgb(243, 243, 243);
      text-decoration: none;
      color: #212630;
      transition: all 500ms;
      max-width: 300px;
  }
  .card:hover{
      -webkit-box-shadow:0px 0px 60px 20px rgba(241,83,52,0.7);
      -moz-box-shadow: 0px 0px 60px 20px rgba(241,83,52,0.7);
      box-shadow: 0px 0px 60px 20px rgba(241,83,52,0.7);
      transform: scale(1.03);
      background-color: rgb(255, 255, 255);
      text-decoration: none;
      color: #212630;
      cursor: pointer;
  }
  .card .header {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
  }
  .card .header p{
      text-align: end;
      margin: 0;
      font-size: 1.4rem;
      background: rgb(241,82,52);
      background: -moz-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
      background: -webkit-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
      background: linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;  
      -moz-background-clip: text;
      -moz-text-fill-color: transparent;
  }
  .card .header svg{
      min-width: 30px;
      min-height: 30px;
  }
 
  .skin-citizen-light .degrad{
      background: -moz-linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
      background: -webkit-linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
      background: linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
      margin-top: 150px;
      padding-top: 250px;
  }
 
  .skin-citizen-dark .degrad{
     background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
     background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
    margin-top: 150px;
    padding-top: 250px;
  }
         
  .favs {
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
      color: aliceblue;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .skin-citizen-light .favs{
     background: rgb(20,24,31);
  }
  .skin-citizen-dark .favs{
     background: rgb(255,255,255);
  }
  .favs h1{
      z-index: 100;
      font-family: 'Linux Libertine O', sans-serif;
      font-size: 3rem;
      margin-top: 80px;
  }
  .skin-citizen-dark .favs h1{
    color: rgb(20,24,31);
  }
  .skin-citizen-light .favs h1{
     color: aliceblue;
     color: aliceblue;
  }
    height: 2.5rem;
  .favs ul {
    border-radius: 0 10px 10px 0;
      list-style-type: none;
    box-sizing: border-box;
      padding-right: 20px;
    -moz-box-sizing: border-box;
      padding-left: 20px;
    -webkit-box-sizing: border-box;
  }
    transition: all 300ms ;
  .favs li {
    position: relative;
    cursor: pointer;
}
.home-header h1{
    font-size: 3rem;
}
.home-header .enplus{
    color: rgb(197, 200, 202);
    position: absolute;
    bottom: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.home-header .enplus p{
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0px;
    transition: all 500ms;
}
.home-header .enplus:hover > p{
    width: 98px;
    margin-left: 10px;
}
#plusdinfo {
    margin-top: 200px;
}
.container {
    padding-left: 20%;
    padding-right: 20%;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.container h1{
    margin-top: 80px;
    background: rgb(241,82,52);
    background: -moz-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: -webkit-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
.cardlist {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.cardlist .li{
    margin-top: 200px;
    display: grid;
    max-width: 1350px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}
.card {
     border-radius: 16px;
     border-radius: 16px;
     border: 1px solid rgba(241, 82, 52, 0.47);
     border: 1px solid rgba(241, 82, 52, 0.47);
     padding: 15px;
     padding: 15px;
     background-color: #212630;
     background-color: rgb(243, 243, 243);
    text-decoration: none;
    color: #212630;
    transition: all 500ms;
    max-width: 300px;
}
.card:hover{
    -webkit-box-shadow:0px 0px 60px 20px rgba(241,83,52,0.7);
    -moz-box-shadow: 0px 0px 60px 20px rgba(241,83,52,0.7);
    box-shadow: 0px 0px 60px 20px rgba(241,83,52,0.7);
    transform: scale(1.03);
    background-color: rgb(255, 255, 255);
     text-decoration: none;
     text-decoration: none;
     transition: all 300ms;
     color: #212630;
     margin-bottom: 20px;
     cursor: pointer;
}
.card .header {
     display: flex;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
     -webkit-box-shadow: 5px 5px 0px 0px #f15234;  
     flex-direction: row;
    box-shadow: 5px 5px 0px 0px #f15234;
}
.card .header p{
    text-align: end;
    margin: 0;
    font-size: 1.4rem;
    background: rgb(241,82,52);
    background: -moz-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: -webkit-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
.card .header svg{
    min-width: 30px;
    min-height: 30px;
    margin-right: 15px;
}
 
.skin-citizen-light .degrad{
    background: -moz-linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
    background: linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
    margin-top: 150px;
    padding-top: 250px;
}
 
.skin-citizen-dark .degrad{
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
  margin-top: 150px;
  padding-top: 250px;
}
       
.favs {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.skin-citizen-light .favs{
  background: rgb(20,24,31);
}
.skin-citizen-dark .favs{
  background: rgb(255,255,255);
}
.favs h1{
    z-index: 100;
    font-family: 'Linux Libertine O', sans-serif;
    font-size: 3rem;
    margin-top: 80px;
}
.skin-citizen-dark .favs h1{
  color: rgb(20,24,31);
}
.skin-citizen-light .favs h1{
  color: aliceblue;
}
.favs ul {
    list-style-type: none;
    padding-right: 20px;
    padding-left: 20px;
}
.favs li {
  border-radius: 16px;
  border: 1px solid rgba(241, 82, 52, 0.47);
  padding: 15px;
  background-color: #212630;
  text-decoration: none;
  transition: all 300ms;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  -webkit-box-shadow: 5px 5px 0px 0px #f15234;  
  box-shadow: 5px 5px 0px 0px #f15234;
}
.favs li:hover {
  text-decoration: none;
  -webkit-box-shadow: 1px 1px 0px 0px #f15234;
  box-shadow: 1px 1px 0px 0px #f15234;
}
.favs li a{
    text-decoration: none;
    color: aliceblue;
}
 
.marklist {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 60px;
}
.skin-citizen-light .marklist{
  background: rgb(20,24,31);
}
.skin-citizen-dark .marklist{
  background: rgb(255,255,255);
}
.marklist div{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-self: center;
    flex-direction: row;
}
.marklist img{
    filter: grayscale(0.9);
    transition: all 500ms;
    border-radius: 5px;
}
.marklist img:hover{
    filter: grayscale(0);
    transform: scale(1.2);
}
.marklist h1{
    z-index: 100;
    font-family: 'Linux Libertine O', sans-serif;
    font-size: 3rem;
    margin-top: 80px;
}
.skin-citizen-dark .marklist h1{
  color: rgb(20,24,31);
}
.skin-citizen-light .marklist h1{
  color: aliceblue;
}
/* Home page responsive */
@media only screen and (max-width: 850px){
  .cardlist .li{
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(4, minmax(0, 1fr));
   }
   }
   .favs li:hover {
   h1{
    text-decoration: none;
      font-size: 2rem!important;
    -webkit-box-shadow: 1px 1px 0px 0px #f15234;
    box-shadow: 1px 1px 0px 0px #f15234;
   }
   }
   .favs li a{
}
       text-decoration: none;
@media only screen and (max-width: 650px){
       color: aliceblue;
   .cardlist .li{
       grid-template-columns: repeat(2, minmax(0, 1fr));
       grid-template-rows: repeat(6, minmax(0, 1fr));
   }
   }
 
   .marklist img{
   .marklist {
       max-height: 40px!important;
       display: flex;
  }
       justify-content: center;
  .counters{
       flex-direction: column;
       align-items: center;
       align-items: center;
      align-self: center;
      flex-direction: column;
      padding-top: 50px;
      padding-bottom: 60px;
   }
   }
   .skin-citizen-light .marklist{
   .counters .card{
    background: rgb(20,24,31);
      margin-top: 30px;
   }
   }
  .skin-citizen-dark .marklist{
}
    background: rgb(255,255,255);
@media only screen and (max-width: 500px){
  }
   .cardlist .li{
   .marklist div{
      width: 100%;
       display: flex;
       display: flex;
       justify-content: space-around;
       justify-content: space-around;
      align-items: center;
       align-self: center;
       align-self: center;
       flex-direction: row;
       flex-direction: column;
   }
   }
   .marklist img{
   .hheader-form .input{
       filter: grayscale(0.9);
       width: 300px;
      transition: all 500ms;
      border-radius: 5px;
   }
   }
   .marklist img:hover{
}
       filter: grayscale(0);
@media only screen and (max-width: 400px){
      transform: scale(1.2);
   .hheader-form .input{
       width: 200px;
   }
   }
   .marklist h1{
   .marklist img{
       z-index: 100;
       max-height: 30px!important;
      font-family: 'Linux Libertine O', sans-serif;
      font-size: 3rem;
      margin-top: 80px;
   }
   }
   .skin-citizen-dark .marklist h1{
}
    color: rgb(20,24,31);
.citizen-body-container:has(.home-header){
   }
  display: block!important;
   .skin-citizen-light .marklist h1{
  margin: 0!important;
    color: aliceblue;
   padding: 0!important;
   }
}
   /* Home page responsive */
.citizen-body-container:has(.home-header)>.mw-body-header{
   @media only screen and (max-width: 850px){
  display: none!important;
    .cardlist .li{
}
        grid-template-columns: repeat(3, 1fr);
.citizen-body-container:has(.home-header)>.mw-body-footer{
        grid-template-rows: repeat(4, 1fr);
  display: none!important;
}
.citizen-body-container:has(.home-header)>#citizen-body-header-sticky-sentinel{
  display: none!important;
}
.citizen-page-container:has(.home-header)>.citizen-footer{
  margin-top: 0!important;
}
.mw-body:has(.home-header){
   margin-top: -1rem;
}
#new_article_form{
   display: none;
}
 
.counters{
  display: none;
  justify-content: space-around;
  margin-top: 200px;
  margin-bottom: 200px;
}
.counters div{
  display: flex;
  align-items: center;
   text-align: center;
   justify-content: center;
   flex-direction: column;
  padding: 20px;
  width: 180px;
  border-radius: 16px;
}
.counters div h1{
  margin: 5px!important;
  font-size: 3.3rem;
  font-weight: bold;
  background: rgb(241,82,52);
  background: -moz-linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
  background: -webkit-linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
  background: linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
.counters div h2{
  margin: 5px;
  color: #212630;
}
#ccard_contribperso{
  display: none;
}
 
.text-marquee {
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
 
.text-marquee:hover, .text-marquee:hover *{
  animation-play-state: running!important;
}
 
@keyframes text_slide {
    5%{
      transform: translate(0);
     }
     }
     h1{
     85% {
        font-size: 2rem!important;
      transform: translate(var(--ofw));
     }
     }
  }
     100%{
  @media only screen and (max-width: 650px){
      transform: translate(var(--ofw));
     .cardlist .li{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 1fr);
     }
     }
     .marklist img{
}
        max-height: 40px!important;
 
@keyframes gardient_slide {
     4.9%{
      -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
     }
     }
     .counters{
     5%{
        flex-direction: column;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
        align-items: center;
     }
     }
     .counters .card{
     84.9% {
        margin-top: 30px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
     }
     }
  }
     85%{
  @media only screen and (max-width: 500px){
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
     .cardlist .li{
        display: flex;
        justify-content: space-around;
        align-self: center;
        flex-direction: column;
     }
     }
     .hheader-form .input{
     100%{
        width: 300px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
     }
     }
  }
}
  @media only screen and (max-width: 400px){
    .hheader-form .input{
        width: 200px;
    }
    .marklist img{
        max-height: 30px!important;
    }
  }
  .citizen-body-container:has(.home-header){
    display: block!important;
    margin: 0!important;
    padding: 0!important;
  }
  .citizen-body-container:has(.home-header)>.mw-body-header{
    display: none!important;
  }
  .citizen-body-container:has(.home-header)>.mw-body-footer{
    display: none!important;
  }
  .citizen-body-container:has(.home-header)>#citizen-body-header-sticky-sentinel{
    display: none!important;
  }
  .citizen-page-container:has(.home-header)>.citizen-footer{
    margin-top: 0!important;
  }
  .mw-body:has(.home-header){
    margin-top: -1rem;
  }
  #new_article_form{
    display: none;
  }
 
  .counters{
    display: none;
    justify-content: space-around;
    margin-top: 200px;
    margin-bottom: 200px;
  }
  .counters div{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    width: 180px;
    border-radius: 16px;
  }
  .counters div h1{
    margin: 5px!important;
    font-size: 3.3rem;
    font-weight: bold;
    background: rgb(241,82,52);
    background: -moz-linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
    background: -webkit-linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
    background: linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
  }
  .counters div h2{
    margin: 5px;
    color: #212630;
  }
  #ccard_contribperso{
    display: none;
  }

Version du 13 mai 2024 à 15:05

/*############ Custom CSS for WikiThionville. ############*/
/* Responsive content zoom */
@media only screen and (max-width: 270px) {
  #bodyContent:not(:has(.home-header)) {
    zoom: 0.2;
  }
}
@media only screen and (min-width: 270px) {
  #bodyContent:not(:has(.home-header)) {
    zoom: 0.3;        
  }
}
@media only screen and (min-width: 340px) {
  #bodyContent:not(:has(.home-header)) {
    zoom: 0.4;        
  }
}
@media only screen and (min-width: 415px) {
  #bodyContent:not(:has(.home-header)) {
    zoom: 0.5;        
  }
}
@media only screen and (min-width: 570px) {
  #bodyContent:not(:has(.home-header)) {
    zoom: 0.7;        
  }
}
@media only screen and (min-width: 730px) {
  #bodyContent:not(:has(.home-header)) {
    zoom: 0.9;        
  }
}
@media only screen and (min-width: 850px) {
  #bodyContent:not(:has(.home-header)) {
    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 {
    width: 98%
  }
  .citizen-section-collapsible{
    zoom: 1.5;
  } 
  .citizen-table-wrapper {
    overflow: hidden!important;
    border-radius: 25px!important;
  }
  #bodyContent:not(:has(.home-header)) 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:not(:has(.home-header)) p {
    font-size: 30px!important;
  }
  #bodyContent:not(:has(.home-header)) 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);
}
#footer-places-disclaimers{
  display: none!important;
}
.citizen-footer__content{
  justify-content: space-between;
}
.citizen-footer__bottom {
  padding-top: 0!important;
  border: 0!important;
}
/* Home page style below*/
.home-header{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-image: url("/home/header_bg.jpg");
    display: flex;
    flex-direction: column;
    color: aliceblue;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.home-header h1{
  color: aliceblue!important;
  text-shadow: 4px 5px 6px rgba(74,74,74,0.9);
}
.home-header .tinfo{
    margin: 1px;
    color: rgb(236, 238, 238);
}
.hheader-form{
    display: flex;
    font-size: 0;
}
.hheader-form .input{
    border: 0;
    padding-left: 10px;
    border-radius: 10px 0 0 10px;
    background-color: #212630;
    color: aliceblue;
    height: 2.5rem;
    width: 400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.hheader-form .input:focus{
    outline: none;
}
.hheader-form .btn{
    border: 0;
    background-color: #212630;
    color: aliceblue;
    height: 2.5rem;
    border-radius: 0 10px 10px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: all 300ms ;
    position: relative;
    cursor: pointer;
}
.home-header h1{
    font-size: 3rem;
}
.home-header .enplus{
    color: rgb(197, 200, 202);
    position: absolute;
    bottom: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.home-header .enplus p{
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0px;
    transition: all 500ms;
}
.home-header .enplus:hover > p{
    width: 98px;
    margin-left: 10px;
}
#plusdinfo {
    margin-top: 200px;
}
.container {
    padding-left: 20%;
    padding-right: 20%;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.container h1{
    margin-top: 80px;
    background: rgb(241,82,52);
    background: -moz-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: -webkit-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
.cardlist {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.cardlist .li{
    margin-top: 200px;
    display: grid;
    max-width: 1350px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}
.card {
    border-radius: 16px;
    border: 1px solid rgba(241, 82, 52, 0.47);
    padding: 15px;
    background-color: rgb(243, 243, 243);
    text-decoration: none;
    color: #212630;
    transition: all 500ms;
    max-width: 300px;
}
.card:hover{
    -webkit-box-shadow:0px 0px 60px 20px rgba(241,83,52,0.7);
    -moz-box-shadow: 0px 0px 60px 20px rgba(241,83,52,0.7);
    box-shadow: 0px 0px 60px 20px rgba(241,83,52,0.7);
    transform: scale(1.03);
    background-color: rgb(255, 255, 255);
    text-decoration: none;
    color: #212630;
    cursor: pointer;
}
.card .header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.card .header p{
    text-align: end;
    margin: 0;
    font-size: 1.4rem;
    background: rgb(241,82,52);
    background: -moz-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: -webkit-linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    background: linear-gradient(311deg, rgba(241,82,52,1) 0%, rgba(237,170,125,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
.card .header svg{
    min-width: 30px;
    min-height: 30px;
    margin-right: 15px;
}

.skin-citizen-light .degrad{
    background: -moz-linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
    background: linear-gradient(0deg, rgba(20,24,31,1) 10%, rgba(255,255,255,1) 100%);
    margin-top: 150px;
    padding-top: 250px;
}

.skin-citizen-dark .degrad{
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
  margin-top: 150px;
  padding-top: 250px;
}
        
.favs {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.skin-citizen-light .favs{
  background: rgb(20,24,31);
}
.skin-citizen-dark .favs{
  background: rgb(255,255,255);
}
.favs h1{
    z-index: 100;
    font-family: 'Linux Libertine O', sans-serif;
    font-size: 3rem;
    margin-top: 80px;
}
.skin-citizen-dark .favs h1{
  color: rgb(20,24,31);
}
.skin-citizen-light .favs h1{
  color: aliceblue;
}
.favs ul {
    list-style-type: none;
    padding-right: 20px;
    padding-left: 20px;
}
.favs li {
  border-radius: 16px;
  border: 1px solid rgba(241, 82, 52, 0.47);
  padding: 15px;
  background-color: #212630;
  text-decoration: none;
  transition: all 300ms;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  -webkit-box-shadow: 5px 5px 0px 0px #f15234; 
  box-shadow: 5px 5px 0px 0px #f15234;
}
.favs li:hover {
  text-decoration: none;
  -webkit-box-shadow: 1px 1px 0px 0px #f15234; 
  box-shadow: 1px 1px 0px 0px #f15234;
}
.favs li a{
    text-decoration: none;
    color: aliceblue;
}

.marklist {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 60px;
}
.skin-citizen-light .marklist{
  background: rgb(20,24,31);
}
.skin-citizen-dark .marklist{
  background: rgb(255,255,255);
}
.marklist div{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-self: center;
    flex-direction: row;
}
.marklist img{
    filter: grayscale(0.9);
    transition: all 500ms;
    border-radius: 5px;
}
.marklist img:hover{
    filter: grayscale(0);
    transform: scale(1.2);
}
.marklist h1{
    z-index: 100;
    font-family: 'Linux Libertine O', sans-serif;
    font-size: 3rem;
    margin-top: 80px;
}
.skin-citizen-dark .marklist h1{
  color: rgb(20,24,31);
}
.skin-citizen-light .marklist h1{
  color: aliceblue;
}
/* Home page responsive */
@media only screen and (max-width: 850px){
  .cardlist .li{
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  h1{
      font-size: 2rem!important;
  }
}
@media only screen and (max-width: 650px){
  .cardlist .li{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .marklist img{
      max-height: 40px!important;
  }
  .counters{
      flex-direction: column;
      align-items: center;
  }
  .counters .card{
      margin-top: 30px;
  }
}
@media only screen and (max-width: 500px){
  .cardlist .li{
      display: flex;
      justify-content: space-around;
      align-self: center;
      flex-direction: column;
  }
  .hheader-form .input{
      width: 300px;
  }
}
@media only screen and (max-width: 400px){
  .hheader-form .input{
      width: 200px;
  }
  .marklist img{
      max-height: 30px!important;
  }
}
.citizen-body-container:has(.home-header){
  display: block!important;
  margin: 0!important;
  padding: 0!important;
}
.citizen-body-container:has(.home-header)>.mw-body-header{
  display: none!important;
}
.citizen-body-container:has(.home-header)>.mw-body-footer{
  display: none!important;
}
.citizen-body-container:has(.home-header)>#citizen-body-header-sticky-sentinel{
  display: none!important;
}
.citizen-page-container:has(.home-header)>.citizen-footer{
  margin-top: 0!important;
}
.mw-body:has(.home-header){
  margin-top: -1rem;
}
#new_article_form{
  display: none;
}

.counters{
  display: none;
  justify-content: space-around;
  margin-top: 200px;
  margin-bottom: 200px;
}
.counters div{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  width: 180px;
  border-radius: 16px;
}
.counters div h1{
  margin: 5px!important;
  font-size: 3.3rem;
  font-weight: bold;
  background: rgb(241,82,52);
  background: -moz-linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
  background: -webkit-linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
  background: linear-gradient(311deg,rgba(241,82,52,1) 0%,rgba(237,170,125,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15234",endColorstr="#edaa7d",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
.counters div h2{
  margin: 5px;
  color: #212630;
}
#ccard_contribperso{
  display: none;
}

.text-marquee {
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.text-marquee:hover, .text-marquee:hover *{
  animation-play-state: running!important;
}

@keyframes text_slide {
    5%{
      transform: translate(0);
    }
    85% {
      transform: translate(var(--ofw));
    }
    100%{
      transform: translate(var(--ofw));
    }
}

@keyframes gardient_slide {
    4.9%{
      -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
    }
    5%{
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    }
    84.9% {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    }
    85%{
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
    }
    100%{
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
    }
}