Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur Ctrl + F5.
/*############ 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%); } }