mAucun résumé des modifications |
(Support du texte marquee) |
||
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)) { | |||
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 { | |||
#bodyContent tr { | width: 98% | ||
} | } | ||
.citizen-section-collapsible{ | |||
zoom: 1.5; | |||
} | |||
.citizen-table-wrapper { | .citizen-table-wrapper { | ||
border-radius: | overflow: hidden!important; | ||
border-radius: 25px!important; | |||
} | } | ||
#bodyContent:not(:has(.home-header)) font { | |||
#bodyContent | font-size: 1.3rem!important; | ||
} | } | ||
.mw-headline { | |||
font-size: 2.5rem!important; | |||
font-size: | |||
} | } | ||
.citizen-overflow--right { | |||
. | -webkit-mask-image:none!important; | ||
-mask-image:none!important; | |||
} | } | ||
.mw-category-columns { | |||
display: | 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; | 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{ | |||
margin-left: 10px; | |||
clear: both; | |||
display: inline-block; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
width: 0px; | |||
transition: all 500ms; | |||
} | |||
.home-header .enplus:hover > p{ | |||
width: 92px; | |||
} | |||
#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-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; | ||
color: #212630; | |||
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; | ||
} | |||
.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; | |||
} | |||
.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, 1fr); | |||
grid-template-rows: repeat(4, 1fr); | |||
} | } | ||
h1{ | |||
font-size: 2rem!important; | |||
} | } | ||
. | } | ||
@media only screen and (max-width: 650px){ | |||
.cardlist .li{ | |||
grid-template-columns: repeat(2, 1fr); | |||
grid-template-rows: repeat(6, 1fr); | |||
} | } | ||
.marklist img{ | |||
.marklist { | max-height: 40px!important; | ||
} | |||
.counters{ | |||
flex-direction: column; | |||
align-items: center; | align-items: center; | ||
} | } | ||
. | .counters .card{ | ||
margin-top: 30px; | |||
} | } | ||
} | |||
@media only screen and (max-width: 500px){ | |||
.cardlist .li{ | |||
. | |||
display: flex; | display: flex; | ||
justify-content: space-around; | justify-content: space-around; | ||
align-self: center; | align-self: center; | ||
flex-direction: | flex-direction: column; | ||
} | } | ||
. | .hheader-form .input{ | ||
width: 300px; | |||
} | } | ||
. | } | ||
@media only screen and (max-width: 400px){ | |||
.hheader-form .input{ | |||
width: 200px; | |||
} | } | ||
.marklist | .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 { | |||
width: 70px; | |||
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%); | |||
} | } | ||
} | |||
Version du 13 mai 2024 à 14:13
/*############ 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{ margin-left: 10px; clear: both; display: inline-block; overflow: hidden; white-space: nowrap; width: 0px; transition: all 500ms; } .home-header .enplus:hover > p{ width: 92px; } #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; } .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, 1fr); grid-template-rows: repeat(4, 1fr); } h1{ font-size: 2rem!important; } } @media only screen and (max-width: 650px){ .cardlist .li{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 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 { width: 70px; 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%); } }