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

Page de l’interface de MediaWiki
(Marquage du champ de création d'article par défaut)
mAucun résumé des modifications
 
(26 versions intermédiaires par le même utilisateur non affichées)
Ligne 79 : Ligne 79 :
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
   align-items: center
   align-items: center;
  justify-content: center;
}
.wikitable{
  width: 100%!important;
}
.wikitable tr{
  display: block!important;
}
}


Ligne 95 : Ligne 102 :
}
}


.skin-citizen-dark #bodyContent font {
#bodyContent font {
   color: var(--color-base--emphasized);
   color: var(--color-base--emphasized);
}
}
Ligne 109 : Ligne 116 :
}
}
/* Home page style below*/
/* Home page style below*/
#wiki-home{
    background-color: hsl(220, 20%, 10%);
    color: #e8effc;
    transition: background-color 1s;
}
.home-header{
.home-header{
     width: 100%;
     width: 100%;
Ligne 130 : Ligne 142 :
}
}
.hheader-form{
.hheader-form{
    display: flex;
     font-size: 0;
     font-size: 0;
}
}
Ligne 157 : Ligne 170 :
     -webkit-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     transition: all 300ms ;
     transition: all 300ms ;
     position: absolute;
     position: relative;
     cursor: pointer;
     cursor: pointer;
}
}
Ligne 173 : Ligne 186 :
}
}
.home-header .enplus p{
.home-header .enplus p{
    margin-left: 10px;
     clear: both;
     clear: both;
     display: inline-block;
     display: inline-block;
Ligne 182 : Ligne 194 :
}
}
.home-header .enplus:hover > p{
.home-header .enplus:hover > p{
     width: 92px;
     width: 98px;
    margin-left: 10px;
}
}
#plusdinfo {
.container {
     padding-left: 20%;
     padding-left: 10%;
     padding-right: 20%;
     padding-right: 10%;
    margin-top: 200px;
     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";
     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";
}
}
#plusdinfo h1{
.container h1{
     margin-top: 80px;
     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 {
.cardlist {
Ligne 209 : Ligne 212 :
}
}
.cardlist .li{
.cardlist .li{
    margin-top: 200px;
     display: grid;
     display: grid;
     max-width: 1350px;
     max-width: 1350px;
     grid-template-columns: repeat(3, 1fr) minmax(auto, 300px);
     grid-template-columns: repeat(4, minmax(0, 1fr));
     grid-template-rows: repeat(3, 1fr);
     grid-template-rows: repeat(3, minmax(0, 1fr));
     grid-column-gap: 40px;
     grid-column-gap: 40px;
     grid-row-gap: 40px;
     grid-row-gap: 40px;
    margin-bottom: 100px;
}
}
.card {
.card {
Ligne 246 : Ligne 249 :
     margin: 0;
     margin: 0;
     font-size: 1.4rem;
     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{
.card .header svg{
     min-width: 30px;
     min-width: 30px;
     min-height: 30px;
     min-height: 30px;
    margin-right: 15px;
}
.card:hover .text-marquee, .card:hover .text-marquee *{
    animation-play-state: running!important;
}
}


Ligne 269 : Ligne 267 :
}
}


.skin-citizen-dark .degrad{
.degrad{
   background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
   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: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(20,24,31,1) 100%);
Ligne 287 : Ligne 285 :
.skin-citizen-light .favs{
.skin-citizen-light .favs{
   background: rgb(20,24,31);
   background: rgb(20,24,31);
}
.skin-citizen-dark .favs{
  background: rgb(255,255,255);
}
}
.favs h1{
.favs h1{
    margin-top: 80px;
     z-index: 100;
     z-index: 100;
     font-family: 'Linux Libertine O', sans-serif;
     font-family: 'Linux Libertine O', sans-serif;
     font-size: 3rem;
     font-size: 3rem;
     margin-top: 80px;
     margin-top: 80px;
}
    text-align: center;
.skin-citizen-dark .favs h1{
  color: rgb(20,24,31);
}
}
.skin-citizen-light .favs h1{
.skin-citizen-light .favs h1{
Ligne 339 : Ligne 333 :
     padding-top: 50px;
     padding-top: 50px;
     padding-bottom: 60px;
     padding-bottom: 60px;
    min-width: 95vw;
}
}
.skin-citizen-light .marklist{
.skin-citizen-light .marklist{
   background: rgb(20,24,31);
   background: rgb(20,24,31);
}
.skin-citizen-dark .marklist{
  background: rgb(255,255,255);
}
}
.marklist div{
.marklist div{
Ligne 355 : Ligne 347 :
}
}
.marklist img{
.marklist img{
     filter: grayscale(0.9);
     filter: invert(0) grayscale(0.9);
     transition: all 500ms;
     transition: all 500ms;
     border-radius: 5px;
     border-radius: 5px;
}
}
.marklist img:hover{
.marklist img:hover{
     filter: grayscale(0);
     filter: invert(0) grayscale(0);
     transform: scale(1.2);
     transform: scale(1.2);
}
.marklist img.inverted.y{
    filter: invert(1) grayscale(0.9)!important;
}
.marklist img.inverted.y:hover{
    filter: invert(1) grayscale(0)!important;
}
}
.marklist h1{
.marklist h1{
Ligne 368 : Ligne 366 :
     font-size: 3rem;
     font-size: 3rem;
     margin-top: 80px;
     margin-top: 80px;
}
.skin-citizen-dark .marklist h1{
  color: rgb(20,24,31);
}
}
.skin-citizen-light .marklist h1{
.skin-citizen-light .marklist h1{
Ligne 376 : Ligne 371 :
}
}
/* Home page responsive */
/* Home page responsive */
@media only screen and (max-width: 1100px){
  .colums{
    flex-direction: column!important;
    align-items: center!important;
  }
}
@media only screen and (max-width: 850px){
@media only screen and (max-width: 850px){
   .cardlist .li{
   .cardlist .li{
       grid-template-columns: repeat(2, 1fr) minmax(auto, 300px);
       grid-template-columns: repeat(3, minmax(0, 1fr));
       grid-template-rows: repeat(4, 1fr);
       grid-template-rows: repeat(4, minmax(0, 1fr));
   }
   }
   h1{
   h1{
Ligne 387 : Ligne 388 :
@media only screen and (max-width: 650px){
@media only screen and (max-width: 650px){
   .cardlist .li{
   .cardlist .li{
       grid-template-columns: repeat(1, 1fr) minmax(auto, 300px);
       grid-template-columns: repeat(2, minmax(0, 1fr));
       grid-template-rows: repeat(5, 1fr);
       grid-template-rows: repeat(6, minmax(0, 1fr));
   }
   }
   .marklist img{
   .marklist img{
       max-height: 40px!important;
       max-height: 40px!important;
  }
  .counters{
      flex-direction: column;
      align-items: center;
      margin-top: 50px!important;
  }
  .counters .card{
      margin-top: 30px;
  }
  #img-beffroi{
    display: none;
  }
  #info-text{
    padding-right: 0!important;
   }
   }
}
}
Ligne 403 : Ligne 418 :
   .hheader-form .input{
   .hheader-form .input{
       width: 300px;
       width: 300px;
  }
  #progress{
    display: none!important;
   }
   }
}
}
Ligne 435 : Ligne 453 :
#new_article_form{
#new_article_form{
   display: none;
   display: none;
}
.counters{
  display: none;
  justify-content: space-evenly;
  width: 100vw;
  margin-top: 200px;
  margin-bottom: 100px;
}
.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:hover{
  cursor: default!important;
}
.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 {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.text-marquee:hover, .text-marquee:hover *{
  animation-play-state: running!important;
}
.colums{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 150px;
    margin: 0px 30px;
}
.colums div{
  flex: 1 1 0px;
}
.panel{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@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%);
    }
}
#img-beffroi {
  position: absolute;
  top: 5vh;
  left: 100vw;
  height: 85vh;
}
#info-text{
  padding-right: 20vw;
}
#plusdinfo div{
  z-index: 10;
}
#progress{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 1000 ;
  position: fixed;
  right: 0;
  top: 50vh;
}
#progress a{
  padding: 5px;
  background-color: rgb(243, 243, 243);
  border: 1px solid rgba(241, 82, 52, 0.47);
  border-right: 0px;
  transition: all 300ms;
  color: #14181f;
}
#progress a:first-child{
  border-radius: 10px 0px 0px 0px;
}
#progress a:last-child{
  border-radius: 00px 0px 0px 10px;
}
#progress a svg{
  visibility: hidden;
  width: 1px;
  transition: all 300ms;
}
#progress a:hover, #progress a.active{
  background-color: rgb(255, 255, 255);
  border-radius: 10px 0px 0px 10px;
}
#progress a:hover svg, #progress a.active svg{
  visibility: visible;
  width: 30px;
}
.favs h1, .container h1, .card .header p, .marklist h1{
  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;
}
.skin-citizen-dark .mw-logo-icon {
  filter: invert(1);
}
}

Dernière version du 11 juin 2024 à 16:49

/*############ 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;
  justify-content: center;
}
.wikitable{
  width: 100%!important;
}
.wikitable tr{
  display: block!important;
}

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

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

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

#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*/
#wiki-home{
    background-color: hsl(220, 20%, 10%);
    color: #e8effc;
    transition: background-color 1s;
}
.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;
}
.container {
    padding-left: 10%;
    padding-right: 10%;
    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;
}
.cardlist {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.cardlist .li{
    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;
    margin-bottom: 100px;
}
.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;
}
.card .header svg{
    min-width: 30px;
    min-height: 30px;
    margin-right: 15px;
}
.card:hover .text-marquee, .card:hover .text-marquee *{
    animation-play-state: running!important;
}

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

.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);
}
.favs h1{
    margin-top: 80px;
    z-index: 100;
    font-family: 'Linux Libertine O', sans-serif;
    font-size: 3rem;
    margin-top: 80px;
    text-align: center;
}
.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;
    min-width: 95vw;
}
.skin-citizen-light .marklist{
  background: rgb(20,24,31);
}
.marklist div{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-self: center;
    flex-direction: row;
}
.marklist img{
    filter: invert(0) grayscale(0.9);
    transition: all 500ms;
    border-radius: 5px;
}
.marklist img:hover{
    filter: invert(0) grayscale(0);
    transform: scale(1.2);
}
.marklist img.inverted.y{
    filter: invert(1) grayscale(0.9)!important;
}
.marklist img.inverted.y:hover{
    filter: invert(1) grayscale(0)!important;
}
.marklist h1{
    z-index: 100;
    font-family: 'Linux Libertine O', sans-serif;
    font-size: 3rem;
    margin-top: 80px;
}
.skin-citizen-light .marklist h1{
  color: aliceblue;
}
/* Home page responsive */
@media only screen and (max-width: 1100px){
  .colums{
    flex-direction: column!important;
    align-items: center!important;
  }
}
@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;
      margin-top: 50px!important;
  }
  .counters .card{
      margin-top: 30px;
  }
  #img-beffroi{
    display: none;
  }
  #info-text{
    padding-right: 0!important;
  }
}
@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;
  }
  #progress{
    display: none!important;
  }
}
@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-evenly;
  width: 100vw;
  margin-top: 200px;
  margin-bottom: 100px;
}
.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:hover{
  cursor: default!important;
}
.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 {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

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

.colums{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 150px;
    margin: 0px 30px;
}

.colums div{
  flex: 1 1 0px;
}

.panel{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@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%);
    }
} 

#img-beffroi {
  position: absolute;
  top: 5vh;
  left: 100vw;
  height: 85vh;
}

#info-text{
  padding-right: 20vw;
}

#plusdinfo div{
  z-index: 10;
}

#progress{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 1000 ;
  position: fixed;
  right: 0;
  top: 50vh;
}

#progress a{
  padding: 5px;
  background-color: rgb(243, 243, 243);
  border: 1px solid rgba(241, 82, 52, 0.47);
  border-right: 0px;
  transition: all 300ms;
  color: #14181f;
}
#progress a:first-child{
  border-radius: 10px 0px 0px 0px;
}
#progress a:last-child{
  border-radius: 00px 0px 0px 10px;
}
#progress a svg{
  visibility: hidden;
  width: 1px;
  transition: all 300ms;
}

#progress a:hover, #progress a.active{
  background-color: rgb(255, 255, 255);
  border-radius: 10px 0px 0px 10px;
}
#progress a:hover svg, #progress a.active svg{
  visibility: visible;
  width: 30px;
}

.favs h1, .container h1, .card .header p, .marklist h1{
  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;
}
.skin-citizen-dark .mw-logo-icon {
  filter: invert(1);
}