Difference between revisions of "MediaWiki:Common.css"

m
m
Line 3: Line 3:
  
 
#slideshow {
 
#slideshow {
   text-align: center;
+
   position: relative;
 +
  min-height:600px;
 +
  height:100%;
 
   width: 100%;
 
   width: 100%;
   margin: 0 auto;
+
   overflow: hidden;
 
}
 
}
  
 
.slide-wrapper {
 
.slide-wrapper {
   position: relative;  
+
   position: relative;
   float: left;
+
   min-height:600px;
 +
  height:100%;
 
   width: 100%;
 
   width: 100%;
 +
  overflow: hidden;
 
}
 
}
  
 
.slide {
 
.slide {
 
   position: absolute;  
 
   position: absolute;  
   width: 950px;
+
   width: 100%;
   height:400px;
+
   min-height:600px;
  object-fit: contain;
 
 
   opacity: 0.0;
 
   opacity: 0.0;
 
   animation-name: pulse;
 
   animation-name: pulse;
Line 25: Line 28:
 
}
 
}
  
.slide img {}
+
.slide img {width:100%;}
 
   
 
   
 
.slide-number {
 
.slide-number {
 +
  height: 0;
 
   color: #000;
 
   color: #000;
 
   text-align: center;
 
   text-align: center;
 
   font-size: 10em;
 
   font-size: 10em;
   visibility: hidden;
+
   display: none;
 
}
 
}
  
Line 51: Line 55:
 
@keyframes pulse {
 
@keyframes pulse {
 
   0% { opacity: 0.0; visibility: hidden;}
 
   0% { opacity: 0.0; visibility: hidden;}
   1% { opacity: 1.0; visibility: visible;}
+
   0.77% { opacity: 1.0; visibility: visible;}
   11% { opacity: 1.0; visibility: visible;}
+
   8.46% { opacity: 1.0; visibility: visible;}
   12% { opacity: 0.0; visibility: hidden;}
+
   9.23% { opacity: 0.0; visibility: hidden;}
 
   100% { opacity: 0.0; visibility: hidden;}
 
   100% { opacity: 0.0; visibility: hidden;}
 
}
 
}

Revision as of 18:27, 26 July 2023

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


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

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

.slide {
  position: absolute; 
  width: 100%;
  min-height:600px;
  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(10){animation-delay: 50s}
.slide:nth-child(10){animation-delay: 55s}
.slide:nth-child(10){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;}
}