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

Page de l’interface de MediaWiki
(Résolution du texte "En savoir plus" qui est couppé)
mAucun résumé des modifications
 
(12 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 184 : Ligne 196 :
     width: 98px;
     width: 98px;
     margin-left: 10px;
     margin-left: 10px;
}
#plusdinfo {
    margin-top: 200px;
}
}
.container {
.container {
     padding-left: 20%;
     padding-left: 10%;
     padding-right: 20%;
     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";
     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{
.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 212 : Ligne 212 :
}
}
.cardlist .li{
.cardlist .li{
    margin-top: 200px;
     display: grid;
     display: grid;
     max-width: 1350px;
     max-width: 1350px;
Ligne 219 : Ligne 218 :
     grid-column-gap: 40px;
     grid-column-gap: 40px;
     grid-row-gap: 40px;
     grid-row-gap: 40px;
    margin-bottom: 100px;
}
}
.card {
.card {
Ligne 249 : 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{
Ligne 263 : Ligne 254 :
     min-height: 30px;
     min-height: 30px;
     margin-right: 15px;
     margin-right: 15px;
}
.card:hover .text-marquee, .card:hover .text-marquee *{
    animation-play-state: running!important;
}
}


Ligne 273 : 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 291 : 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 343 : 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 359 : 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 372 : 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 380 : 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{
Ligne 400 : Ligne 397 :
       flex-direction: column;
       flex-direction: column;
       align-items: center;
       align-items: center;
      margin-top: 50px!important;
   }
   }
   .counters .card{
   .counters .card{
       margin-top: 30px;
       margin-top: 30px;
  }
  #img-beffroi{
    display: none;
  }
  #info-text{
    padding-right: 0!important;
   }
   }
}
}
Ligne 414 : Ligne 418 :
   .hheader-form .input{
   .hheader-form .input{
       width: 300px;
       width: 300px;
  }
  #progress{
    display: none!important;
   }
   }
}
}
Ligne 450 : Ligne 457 :
.counters{
.counters{
   display: none;
   display: none;
   justify-content: space-around;
   justify-content: space-evenly;
  width: 100vw;
   margin-top: 200px;
   margin-top: 200px;
   margin-bottom: 200px;
   margin-bottom: 100px;
}
}
.counters div{
.counters div{
Ligne 463 : Ligne 471 :
   width: 180px;
   width: 180px;
   border-radius: 16px;
   border-radius: 16px;
}
.counters div:hover{
  cursor: default!important;
}
}
.counters div h1{
.counters div h1{
Ligne 487 : Ligne 498 :


.text-marquee {
.text-marquee {
  display: flex;
   white-space: nowrap;
   white-space: nowrap;
   overflow: hidden;
   overflow: hidden;
Ligne 494 : Ligne 506 :
.text-marquee:hover, .text-marquee:hover *{
.text-marquee:hover, .text-marquee:hover *{
   animation-play-state: running!important;
   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;
}
}


Ligne 524 : Ligne 560 :
       -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
       -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);
}