Difference between revisions of "MediaWiki:Common.css"

m
m
Line 4: Line 4:
 
#slideshow {
 
#slideshow {
 
   position: relative;
 
   position: relative;
   min-height:600px;
+
   min-height:500px;
 
   height:100%;
 
   height:100%;
 
   width: 100%;
 
   width: 100%;
Line 12: Line 12:
 
.slide-wrapper {
 
.slide-wrapper {
 
   position: relative;
 
   position: relative;
   min-height:600px;
+
   min-height:500px;
 
   height:100%;
 
   height:100%;
 
   width: 100%;
 
   width: 100%;
Line 20: Line 20:
 
.slide {
 
.slide {
 
   position: absolute;  
 
   position: absolute;  
 +
  top: 0
 +
  left: 0;
 
   width: 100%;
 
   width: 100%;
   min-height:600px;
+
   min-height:500px;
 
   opacity: 0.0;
 
   opacity: 0.0;
 
   animation-name: pulse;
 
   animation-name: pulse;
Line 59: Line 61:
 
   9.23% { opacity: 0.0; visibility: hidden;}
 
   9.23% { opacity: 0.0; visibility: hidden;}
 
   100% { opacity: 0.0; visibility: hidden;}
 
   100% { opacity: 0.0; visibility: hidden;}
 +
}
 +
 +
 +
.slide-cover {
 +
position: absolute;
 +
left: 0;
 +
top: 10%;
 +
width: 45%;
 +
height: 80%;
 +
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: 5vw;
 +
padding-left: 1.0vw;
 +
padding-right: 4.0vw;
 +
padding-bottom: 1vw;
 +
}
 +
 +
.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;
 
}
 
}

Revision as of 21:17, 26 July 2023

/* CSS placed here will be applied to all skins */


#slideshow {
  position: relative;
  min-height:500px;
  height:100%;
  width: 100%;
  overflow: hidden;
}

.slide-wrapper {
  position: relative;
  min-height:500px;
  height:100%;
  width: 100%;
  overflow: hidden;
}

.slide {
  position: absolute; 
  top: 0 
  left: 0;
  width: 100%;
  min-height:500px;
  opacity: 0.0;
  animation-name: pulse;
  animation-duration: 65s;
  animation-iteration-count: infinite;
}

.slide img {width:100%;}
 
.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: 10%;
	width: 45%;
	height: 80%;
	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: 5vw;
	padding-left: 1.0vw;
	padding-right: 4.0vw;
	padding-bottom: 1vw;
}

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