Difference between revisions of "MediaWiki:Common.css"

m
m
 
(91 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 */
  
#ca-history { display: none !important; }
 
#ca-viewsource { display: none !important; }
 
  
/*
+
#slideshow {
.center { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
  position: relative;
.floatnone { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
  height:auto;
*/
+
  aspect-ratio: 2.375;
 +
  width: 100%;
 +
  overflow: hidden;
 +
}
  
.image { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
.slide-wrapper {
 
+
  position: relative;
.thumbinner { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
  height:auto;
 
+
  aspect-ratio: 2.375;
/*
+
  width: 100%;
.tright { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
  overflow: hidden;
.thumb { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
}
  
.thumbcaption { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
.slide {
 
+
  position: absolute;  
.magnify { pointer-events: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
+
  top: 0;
*/
+
  left: 0;
 
+
  width: 100%;
 
+
  height:auto;
 
+
  aspect-ratio: 2.375;
 
+
  opacity: 0.0;
table.calendar          { margin: 0; padding: 10px;}
+
  animation-name: pulse;
table.calendar td      { margin: 0; padding: 2px; vertical-align: top; }
+
  animation-duration: 65s;
table.month .heading td { padding:2px; background-color:#d4d4d4; color:#363636; text-align:center; font-size:120%; font-weight:bold; }
+
  animation-iteration-count: infinite;
table.month .dow td    { color:#aaa; text-align:center; font-size:110%; }
 
table.month td.today    { background-color:#e0dda6; }
 
table.month td {
 
    border: none;
 
    margin: 0;
 
    padding: 1pt 1.5pt;
 
    font-weight: bold;
 
    font-size: 8pt;
 
    text-align: right;
 
    background-color: #eee;
 
    }
 
#bodyContent table.month a { background:none; padding:0 }
 
.day-active { color:#0000cc }
 
.day-empty  { color:#b07373 }
 
 
 
 
 
 
 
 
 
 
 
.pg-normal {
 
color: #000000;
 
font-size: 15px;
 
cursor: pointer;
 
background: #D0B389;
 
padding: 2px 4px 2px 4px;
 
 
}
 
}
  
.pg-selected {
+
.slide img {width:100%; aspect-ratio: 2.375;}
color: #fff;
+
font-size: 15px;
+
.slide-number {
background: #000000;
+
  height: 0;
padding: 2px 4px 2px 4px;
+
  color: #000;
 +
  text-align: center;
 +
  font-size: 10em;
 +
  display: none;
 
}
 
}
  
table.yui {
+
.slide:nth-child(1){animation-delay: 0s}
font-family:arial;
+
.slide:nth-child(2){animation-delay: 5s}
border-collapse:collapse;
+
.slide:nth-child(3){animation-delay: 10s}
border: solid 3px #7f7f7f;
+
.slide:nth-child(4){animation-delay: 15s}
font-size:small;
+
.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}
  
table.yui td {
 
padding: 5px;
 
border-right: solid 1px #7f7f7f;
 
}
 
  
table.yui .even {
+
@keyframes pulse {
background-color: #EEE8AC;
+
  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;}
 
}
 
}
  
table.yui .odd {
 
background-color: #F9FAD0;
 
}
 
  
table.yui th {
+
.slide-cover {
border: 1px solid #7f7f7f;
+
position: absolute;  
padding: 5px;
+
left: 0;
height: auto;
+
top: 50%;
background: #D0B389;
+
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% );
 
}
 
}
  
table.yui th a {
+
.slide-cover  p {
text-decoration: none;
+
font-size:1.5vw;
text-align: center;
+
color: white;
padding-right: 20px;
+
padding-top: 3vh;
font-weight:bold;
+
padding-left: 1.0vw;
white-space:nowrap;
+
padding-right: 4.0vw;
 +
padding-bottom: 5vh;
 
}
 
}
  
table.yui tfoot td {
+
.slide-button {
border-top: 1px solid #7f7f7f;
+
width: 45%;
background-color:#E1ECF9;
+
padding-left: 25%;
 +
background: none;
 +
font-size:1.5vw;
 +
color: white;
 
}
 
}
  
table.yui thead td {
+
.slide-button pre {
vertical-align:middle;
+
background: #0053b3;
background-color:#E1ECF9;
+
color: white;
border:none;
 
 
}
 
}
  
table.yui thead .tableHeader {
+
.slide-button a {
font-size:larger;
+
background: #0053b3;
font-weight:bold;
+
font-weight: bold;
 +
color: white;
 
}
 
}
  
table.yui thead .filter {
+
body.page-Welcome > div#mw-wrapper > div#mw-content-container > div#mw-content-block > div#mw-content {
text-align:right;
+
padding: 1em 0.01em 3em;
 
}
 
}
  
table.yui tfoot {
+
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 {
background-color:#E1ECF9;
+
display: none;
text-align:center;
 
 
}
 
}
  
table.yui .tablesorterPager {
 
padding: 10px 0 10px 0;
 
}
 
  
table.yui .tablesorterPager span {
 
padding: 0 5px 0 5px;
 
}
 
  
table.yui .tablesorterPager input.prev {
+
.countup {
width: auto;
+
  text-align: center;
margin-right: 10px;
+
  margin: 20px;
 
}
 
}
 
+
.countup .timeel {
table.yui .tablesorterPager input.next {
+
  display: inline-block;
width: auto;
+
  padding: 10px;
margin-left: 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"] {
table.yui .pagedisplay {
+
  border-radius: 0 5px 5px 0;
font-size:10pt;  
+
  margin-left: 0;
width: 30px;
+
  background: #e8c152;
border: 0px;
+
  color: black;
background-color: #E1ECF9;
 
text-align:center;
 
vertical-align:top;
 
 
}
 
}

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