Difference between revisions of "MediaWiki:Common.css"
m |
m |
||
(99 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
− | |||
− | |||
+ | #slideshow { | ||
+ | position: relative; | ||
+ | height:auto; | ||
+ | aspect-ratio: 2.375; | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
− | . | + | .slide-wrapper { |
− | + | position: relative; | |
− | + | height:auto; | |
+ | aspect-ratio: 2.375; | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
− | . | + | .slide { |
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height:auto; | ||
+ | aspect-ratio: 2.375; | ||
+ | opacity: 0.0; | ||
+ | animation-name: pulse; | ||
+ | animation-duration: 65s; | ||
+ | animation-iteration-count: infinite; | ||
+ | } | ||
− | . | + | .slide img {width:100%; aspect-ratio: 2.375;} |
− | . | + | |
+ | .slide-number { | ||
+ | height: 0; | ||
+ | color: #000; | ||
+ | text-align: center; | ||
+ | font-size: 10em; | ||
+ | display: none; | ||
+ | } | ||
− | . | + | .slide:nth-child(1){animation-delay: 0s} |
+ | .slide:nth-child(2){animation-delay: 5s} | ||
+ | .slide:nth-child(3){animation-delay: 10s} | ||
+ | .slide:nth-child(4){animation-delay: 15s} | ||
+ | .slide:nth-child(5){animation-delay: 20s} | ||
+ | .slide:nth-child(6){animation-delay: 25s} | ||
+ | .slide:nth-child(7){animation-delay: 30s} | ||
+ | .slide:nth-child(8){animation-delay: 35s} | ||
+ | .slide:nth-child(9){animation-delay: 40s} | ||
+ | .slide:nth-child(10){animation-delay: 45s} | ||
+ | .slide:nth-child(11){animation-delay: 50s} | ||
+ | .slide:nth-child(12){animation-delay: 55s} | ||
+ | .slide:nth-child(13){animation-delay: 60s} | ||
− | . | + | |
+ | @keyframes pulse { | ||
+ | 0% { opacity: 0.0; visibility: hidden;} | ||
+ | 0.77% { opacity: 1.0; visibility: visible;} | ||
+ | 8.46% { opacity: 1.0; visibility: visible;} | ||
+ | 9.23% { opacity: 0.0; visibility: hidden;} | ||
+ | 100% { opacity: 0.0; visibility: hidden;} | ||
+ | } | ||
+ | |||
+ | |||
+ | .slide-cover { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); | ||
+ | width: 45%; | ||
+ | aspect-ratio: 1.06; | ||
+ | height:auto; | ||
+ | opacity: 1.0; | ||
+ | z-index: 5; | ||
+ | background-image: linear-gradient(90deg, rgb(0% 18.039% 23.137% / 0.85) 0%, rgb(0% 18.039% 23.137% / 0.8499870300292969) 6.25%, rgb(0% 18.039% 23.137% / 0.84979248046875) 12.5%, rgb(0% 18.039% 23.137% / 0.8489494323730469) 18.75%, rgb(0% 18.039% 23.137% / 0.8466796875) 25%, rgb(0% 18.039% 23.137% / 0.8418937683105469) 31.25%, rgb(0% 18.039% 23.137% / 0.83319091796875) 37.5%, rgb(0% 18.039% 23.137% / 0.8188591003417969) 43.75%, rgb(0% 18.039% 23.137% / 0.796875) 50%, rgb(0% 18.039% 23.137% / 0.7649040222167969) 56.25%, rgb(0% 18.039% 23.137% / 0.72030029296875) 62.5%, rgb(0% 18.039% 23.137% / 0.6601066589355469) 68.75%, rgb(0% 18.039% 23.137% / 0.5810546875) 75%, rgb(0% 18.039% 23.137% / 0.4795646667480469) 81.25%, rgb(0% 18.039% 23.137% / 0.35174560546875) 87.5%, rgb(0% 18.039% 23.137% / 0.19339523315429685) 93.75%, rgb(0% 18.039% 23.137% / 0) 100% ); | ||
+ | } | ||
+ | |||
+ | .slide-cover p { | ||
+ | font-size:1.5vw; | ||
+ | color: white; | ||
+ | padding-top: 3vh; | ||
+ | padding-left: 1.0vw; | ||
+ | padding-right: 4.0vw; | ||
+ | padding-bottom: 5vh; | ||
+ | } | ||
+ | |||
+ | .slide-button { | ||
+ | width: 45%; | ||
+ | padding-left: 25%; | ||
+ | background: none; | ||
+ | font-size:1.5vw; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .slide-button pre { | ||
+ | background: #0053b3; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .slide-button a { | ||
+ | background: #0053b3; | ||
+ | font-weight: bold; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | body.page-Welcome > div#mw-wrapper > div#mw-content-container > div#mw-content-block > div#mw-content { | ||
+ | padding: 1em 0.01em 3em; | ||
+ | } | ||
+ | |||
+ | body.page-Welcome > div#mw-wrapper > div#mw-content-container > div#mw-content-block > div#mw-content > div#content > div#bodyContent > div#mw-content-text > div.mw-parser-output > p:first-of-type { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .countup { | ||
+ | text-align: center; | ||
+ | margin: 20px; | ||
+ | } | ||
+ | .countup .timeel { | ||
+ | display: inline-block; | ||
+ | padding: 10px; | ||
+ | background: green; | ||
+ | margin: 0; | ||
+ | color: white; | ||
+ | min-width: 1.6rem; | ||
+ | margin-left: 15px; | ||
+ | border-radius: 5px 0 0 5px; | ||
+ | font-family: Arial; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | .countup span[class*="timeRef"] { | ||
+ | border-radius: 0 5px 5px 0; | ||
+ | margin-left: 0; | ||
+ | background: #e8c152; | ||
+ | color: black; | ||
+ | } |
Latest revision as of 11:58, 15 December 2023
/* CSS placed here will be applied to all skins */
#slideshow {
position: relative;
height:auto;
aspect-ratio: 2.375;
width: 100%;
overflow: hidden;
}
.slide-wrapper {
position: relative;
height:auto;
aspect-ratio: 2.375;
width: 100%;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:auto;
aspect-ratio: 2.375;
opacity: 0.0;
animation-name: pulse;
animation-duration: 65s;
animation-iteration-count: infinite;
}
.slide img {width:100%; aspect-ratio: 2.375;}
.slide-number {
height: 0;
color: #000;
text-align: center;
font-size: 10em;
display: none;
}
.slide:nth-child(1){animation-delay: 0s}
.slide:nth-child(2){animation-delay: 5s}
.slide:nth-child(3){animation-delay: 10s}
.slide:nth-child(4){animation-delay: 15s}
.slide:nth-child(5){animation-delay: 20s}
.slide:nth-child(6){animation-delay: 25s}
.slide:nth-child(7){animation-delay: 30s}
.slide:nth-child(8){animation-delay: 35s}
.slide:nth-child(9){animation-delay: 40s}
.slide:nth-child(10){animation-delay: 45s}
.slide:nth-child(11){animation-delay: 50s}
.slide:nth-child(12){animation-delay: 55s}
.slide:nth-child(13){animation-delay: 60s}
@keyframes pulse {
0% { opacity: 0.0; visibility: hidden;}
0.77% { opacity: 1.0; visibility: visible;}
8.46% { opacity: 1.0; visibility: visible;}
9.23% { opacity: 0.0; visibility: hidden;}
100% { opacity: 0.0; visibility: hidden;}
}
.slide-cover {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 45%;
aspect-ratio: 1.06;
height:auto;
opacity: 1.0;
z-index: 5;
background-image: linear-gradient(90deg, rgb(0% 18.039% 23.137% / 0.85) 0%, rgb(0% 18.039% 23.137% / 0.8499870300292969) 6.25%, rgb(0% 18.039% 23.137% / 0.84979248046875) 12.5%, rgb(0% 18.039% 23.137% / 0.8489494323730469) 18.75%, rgb(0% 18.039% 23.137% / 0.8466796875) 25%, rgb(0% 18.039% 23.137% / 0.8418937683105469) 31.25%, rgb(0% 18.039% 23.137% / 0.83319091796875) 37.5%, rgb(0% 18.039% 23.137% / 0.8188591003417969) 43.75%, rgb(0% 18.039% 23.137% / 0.796875) 50%, rgb(0% 18.039% 23.137% / 0.7649040222167969) 56.25%, rgb(0% 18.039% 23.137% / 0.72030029296875) 62.5%, rgb(0% 18.039% 23.137% / 0.6601066589355469) 68.75%, rgb(0% 18.039% 23.137% / 0.5810546875) 75%, rgb(0% 18.039% 23.137% / 0.4795646667480469) 81.25%, rgb(0% 18.039% 23.137% / 0.35174560546875) 87.5%, rgb(0% 18.039% 23.137% / 0.19339523315429685) 93.75%, rgb(0% 18.039% 23.137% / 0) 100% );
}
.slide-cover p {
font-size:1.5vw;
color: white;
padding-top: 3vh;
padding-left: 1.0vw;
padding-right: 4.0vw;
padding-bottom: 5vh;
}
.slide-button {
width: 45%;
padding-left: 25%;
background: none;
font-size:1.5vw;
color: white;
}
.slide-button pre {
background: #0053b3;
color: white;
}
.slide-button a {
background: #0053b3;
font-weight: bold;
color: white;
}
body.page-Welcome > div#mw-wrapper > div#mw-content-container > div#mw-content-block > div#mw-content {
padding: 1em 0.01em 3em;
}
body.page-Welcome > div#mw-wrapper > div#mw-content-container > div#mw-content-block > div#mw-content > div#content > div#bodyContent > div#mw-content-text > div.mw-parser-output > p:first-of-type {
display: none;
}
.countup {
text-align: center;
margin: 20px;
}
.countup .timeel {
display: inline-block;
padding: 10px;
background: green;
margin: 0;
color: white;
min-width: 1.6rem;
margin-left: 15px;
border-radius: 5px 0 0 5px;
font-family: Arial;
font-weight: bold;
}
.countup span[class*="timeRef"] {
border-radius: 0 5px 5px 0;
margin-left: 0;
background: #e8c152;
color: black;
}