Difference between revisions of "MediaWiki:Common.css"
(brought menu back (at the bottom) in small screens; fixed max image width for better rendering) |
m (classname typo fix) |
||
| Line 25: | Line 25: | ||
| − | .image. | + | .image.fancybox > img |
{ | { | ||
max-width: 100%; | max-width: 100%; | ||
Latest revision as of 10:01, 11 December 2023
/* CSS placed here will be applied to all skins */
/********************************************************************/
/* Limit table of contents levels with "toclimit-n" class container */
.toclimit-1 .toclevel-1 ul,
.toclimit-2 .toclevel-2 ul,
.toclimit-3 .toclevel-3 ul,
.toclimit-4 .toclevel-4 ul,
.toclimit-5 .toclevel-5 ul,
.toclimit-6 .toclevel-6 ul
{
display: none;
}
/* show abbreviations on pointer down */
abbr:active:after,
abbr:focus:after
{
content: " (" attr(title) ")";
}
pre
{
overflow-x: auto;
}
.image.fancybox > img
{
max-width: 100%;
height: auto;
}
/************/
/* Carousel */
.slideshow-container,
.slideshow-container *,
.dots,
.dots *
{box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
overflow: hidden;
height: 30vh;
}
/* Hide the images by default */
.slideshow-container .mySlides {
display: none;
}
.slideshow-container .mySlides img {
margin: -15% 0;
}
/* Next & previous buttons */
.slideshow-container .prev, .slideshow-container .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.slideshow-container .next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.slideshow-container .prev:hover, .slideshow-container .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.slideshow-container .text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.slideshow-container .numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.slideshow-container .text,.slideshow-container .numbertext {
text-shadow: 1px 1px black;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.slideshow-container .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/********************************************************/
/* silly car-table css because people just don't get it */
div.car
{
display: inline-block;
padding: 0 2em 0 4em;
margin: 1em 0;
position: relative;
}
div.car:before
{
content:"";
position: absolute;
border-top: 0.5em solid black;
border-bottom: 0.5em solid black;
width: 3em;
left: 3em;
top: -0.5em;
bottom: -0.5em;
z-index: -1;
}
div.car:after
{
content:"";
position: absolute;
border-top: 0.5em solid black;
border-bottom: 0.5em solid black;
width: 3em;
right: 1em;
top: -0.5em;
bottom: -0.5em;
z-index: -1;
}
div.car table
{
box-sizing: border-box;
border-collapse: collapse;
}
div.car td
{
width: 6em;
height: 2.5em;
border: 0.05em solid black;
box-sizing: border-box;
}
div.car td:empty
{
background-color: lightgreen;
}
div.car table:before
{
position: absolute;
content: "";
border: 0.05em solid black;
border-right: none;
border-radius: 50% 0 0 50%;
top: 0;
bottom: 0;
left: 0;
width: 4em;
box-sizing: border-box;
}
div.car table:after
{
position: absolute;
content: "";
border: 0.05em solid black;
border-left: none;
border-radius: 0 0.5em 0.5em 0;
top: 0;
bottom: 0;
right: 0;
width: 2em;
box-sizing: border-box;
}
/**********************************************************************/
/* remove the form edit from the following pages:
* Main page
* Pizza-meet event page
* ACKsession
because multiple forms and the calculated dates break form editing */
.page-Main_Page #ca-formedit,
.page-Pizza-meet #ca-formedit,
.page-ACKsession #ca-formedit
{display:none}
/********************************************************************/
/* Progress (processing animation) */
@keyframes progress
{
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
.processing
{
background-size:100px 100px;
background-image: linear-gradient(-45deg,
rgba(0,0,0,0.05) 25%, rgba(0,0,0,0) 25%,
rgba(0,0,0,0) 50%, rgba(0,0,0,0.05) 50%,
rgba(0,0,0,0.05) 75%, rgba(0,0,0,0) 75%);
animation: progress 2s linear infinite;
}
/* disconnected state (fading) */
@keyframes connecting
{
0% {opacity:0;}
50% {opacity:0.5;}
100% {opacity:0;}
}
.disconnected
{
animation: connecting linear 1.4s infinite;
}
/************/
/* Calendar */
table.calendar
{
border: 2px solid gray;
border-collapse: collapse;
background-color: #f9f9f9;
}
table.calendar th
{
background-color: #f2f2f2;
}
table.calendar th,
table.calendar td
{
border: 1px solid #aaa;
padding: 0.2em 0.4em;
}
table.calendar .na
{
opacity: 0.5;
}
table.calendar .now
{
font-weight: bold;
}
table.calendar .title
{
text-decoration: overline underline;
cursor :help;
}
/****************/
/* switch table */
table.switchtable tr td
{
width: 72px;
}
/********************************/
/* table strikeout/done feature */
table.wikitable
{
empty-cells: show;
}
table.wikitable td
{
position: relative;
}
table.wikitable tr.strikeout,
table.wikitable tr.done,
table.wikitable td.na
{
opacity: 0.4;
}
table.wikitable tr.strikeout td:before,
table.wikitable tr.done td:before
{
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
table td.hl-red
{
background-color: rgba( 255, 0, 0, 0.2 );
}
table td.hl-green
{
background-color: rgba( 0, 255, 0, 0.2 );
}
table td.hl-blue
{
background-color: rgba( 0, 0, 255, 0.2 );
}
table td.hl-yellow
{
background-color: rgba( 255, 255, 0, 0.2 );
}
table td.hl-purple
{
background-color: rgba( 255, 0, 255, 0.2 );
}
table td.hl-cyan
{
background-color: rgba( 0, 255, 255, 0.2 );
}
/*******************************************/
/* CSS span table rowspan only showing the first rowheader (assuming there are 2 column headers stacked, hence +3 */
table.span tr>th.span2,
table.span tr>th.span3,
table.span tr>th.span4,
table.span tr>th.span5
{
display: none;
}
table.span tr:nth-of-type(2n+3)>th.span2,
table.span tr:nth-of-type(3n+3)>th.span3,
table.span tr:nth-of-type(4n+3)>th.span4,
table.span tr:nth-of-type(5n+3)>th.span5
{
display: table-cell;
}
/*************************/
/* Special ACKspace Logo */
canvas#logo,
canvas.winternight
{
background: -moz-linear-gradient(top, rgba(0,0,68,0) 0%, rgba(0,0,68,1) 25%, rgba(0,0,68,1) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,68,0) 0%,rgba(0,0,68,1) 25%,rgba(0,0,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000044', endColorstr='#000044',GradientType=0 );
}
/**************************/
/* Hide main page heading */
body.page-Main_Page h1.firstHeading { display: none; }
/***************************************************************/
/* reserve extra space for transcluded (featured) page headers */
body.page-Main_Page h6 { font-size: 130%; padding-top: 2em; margin-top: 1em; border-top: 1px solid #ddd; }
/************************/
/* shadow under iframes */
iframe
{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
}
/****************/
/* button style */
.button
{
line-height: 300%;
}
.button a
{
padding: 10px;
border:2px outset #eee;
border-radius: 6px;
background-color: #fefefe;
font-weight: bold;
text-decoration: none;
}
.button:hover a
{
background-color: #eee;
/*padding: 11px 9px 9px 11px;*/
}
/******************************************/
/* get rid of some ugly mediawiki styling */
#mw-head-base,
#content,
#footer,
div.vectorTabs,
div.vectorTabs ul li,
div.vectorTabs li a
{
background-image: none;
}
div.vectorTabs ul li:hover
{
background-color: #f9f9f9;
}
div.vectorTabs li a,
div.vectorTabs li a span,
#mw-panel div.portal div.body ul li a,
#mw-panel div.portal div.body ul li a:visited
{
color: #333;
}
div.vectorTabs li a:hover,
div.vectorTabs li a:hover span,
#mw-panel div.portal div.body ul li a:hover,
#mw-panel div.portal div.body ul li a:focus
{
color: #633;
}
div.vectorTabs li a:hover,
div.vectorTabs li a:hover span
{
margin-top: 0.05em;
}
#mw-panel div.portal div.body ul li a,
#mw-panel div.portal div.body ul li a:visited
{
text-decoration: none;
display: block;
line-height: 1.2em;
padding: 0.6em;
border-radius: 5px;
}
#mw-panel div.portal h5
{
text-shadow: 1px 1px 3px rgba(150, 150, 150, 0.3);
font-size: 85%;
}
#mw-panel div.portal div.body ul li a:hover,
#mw-panel div.portal div.body ul li a:focus
{
background-color: #f0eeee;
padding-left: 0.65em;
}
/* avoid icon collision */
a.feedlink
{
background-position: right 10px center;
}
/******************************************/
/* dynamic layout */
.spaceAPI {float: right}
@media screen and (max-width: 35em)
{
/* full-width space api */
.spaceAPI {float: none}
#p-personal>ul {padding:0 !important}
#right-navigation {margin:0 !important}
}
@media screen and (max-width: 45em)
{
/* hide logo */
#logo {display: none}
#content {margin-top: 2.5em !important}
}
@media screen and (max-width: 55em)
{
/* nav bar inline (at the bottom) */
.mw-body {margin-left: 0}
#mw-panel {position: static}
}
@media screen and (max-width: 73em)
{
/* map (state) below intro text */
.button {color: blue}
}
/******************************************/
/* handle languages */
/* remove external link */
.tabs a.external
{
background-image: none !important;
padding: 0.2em !important;
background-color: #f3f3f3;
}
html[lang|="nl"] .lang:not([lang="nl"]),
html[lang|="en"] .lang:not([lang="en"]),
html[lang|="de"] .lang:not([lang="de"]),
html[lang|="li"] .lang:not([lang="li"])
{
display: none
}
html[lang|="nl"] .tabs a.external[href$="nl"],
html[lang|="en"] .tabs a.external[href$="en"],
html[lang|="de"] .tabs a.external[href$="de"]
html[lang|="li"] .tabs a.external[href$="li"]
{
/*background-color: red;
color: white !important;*/
font-weight: bold;
}
/******************************************/
/* image gallery carousel */
ul.gallery.mw-gallery-packed-overlay.carousel
{
overflow: hidden;
white-space: nowrap;
height: 30vmin;
}
ul.gallery.mw-gallery-packed-overlay.carousel,
ul.gallery.mw-gallery-packed-overlay.carousel *
{
margin: 0;
padding: 0;
border: 0;
}
ul.gallery.mw-gallery-packed-overlay.carousel *
{
width:100% !important;
height: auto;
}
ul.gallery.mw-gallery-packed-overlay.carousel img
{
margin-top: -25% !important;
}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child
{
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(2){animation-name: carousel1;animation-duration: 10s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(3){animation-name: carousel2;animation-duration: 15s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(4){animation-name: carousel3;animation-duration: 20s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(5){animation-name: carousel4;animation-duration: 25s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(6){animation-name: carousel5;animation-duration: 30s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(7){animation-name: carousel6;animation-duration: 35s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(8){animation-name: carousel7;animation-duration: 40s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(9){animation-name: carousel8;animation-duration: 45s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(10){animation-name: carousel9;animation-duration: 50s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(11){animation-name: carousel10;animation-duration: 55s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(12){animation-name: carousel11;animation-duration: 60s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(13){animation-name: carousel12;animation-duration: 65s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(14){animation-name: carousel13;animation-duration: 70s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(15){animation-name: carousel14;animation-duration: 75s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(16){animation-name: carousel15;animation-duration: 80s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(17){animation-name: carousel16;animation-duration: 85s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(18){animation-name: carousel17;animation-duration: 90s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(19){animation-name: carousel18;animation-duration: 95s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(20){animation-name: carousel19;animation-duration: 100s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(21){animation-name: carousel20;animation-duration: 105s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(22){animation-name: carousel21;animation-duration: 110s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(23){animation-name: carousel22;animation-duration: 115s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(24){animation-name: carousel23;animation-duration: 120s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(25){animation-name: carousel24;animation-duration: 125s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(26){animation-name: carousel25;animation-duration: 130s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(27){animation-name: carousel26;animation-duration: 135s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(28){animation-name: carousel27;animation-duration: 140s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(29){animation-name: carousel28;animation-duration: 145s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(30){animation-name: carousel29;animation-duration: 150s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(31){animation-name: carousel30;animation-duration: 155s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(32){animation-name: carousel31;animation-duration: 160s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(33){animation-name: carousel32;animation-duration: 165s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(34){animation-name: carousel33;animation-duration: 170s}
ul.gallery.mw-gallery-packed-overlay.carousel li:first-child:nth-last-child(35){animation-name: carousel34;animation-duration: 175s}
@keyframes carousel1
{
0% {margin-left: 0%;}
100% {margin-left: -100%;}
}
@keyframes carousel2
{
0% {margin-left: 0%;}
50% {margin-left: -100%;}
100% {margin-left: -200%;}
}
@keyframes carousel3
{
0% {margin-left: 0%;}
33% {margin-left: -100%;}
66% {margin-left: -200%;}
100% {margin-left: -300%;}
}
@keyframes carousel4
{
0% {margin-left: 0%;}
25% {margin-left: -100%;}
50% {margin-left: -200%;}
75% {margin-left: -300%;}
100% {margin-left: -400%;}
}
@keyframes carousel5
{
0% {margin-left: 0%;}
20% {margin-left: -100%;}
40% {margin-left: -200%;}
60% {margin-left: -300%;}
80% {margin-left: -400%;}
100% {margin-left: -500%;}
}
@keyframes carousel6
{
0% {margin-left: 0%;}
100% {margin-left: -600%;}
}
@keyframes carousel7
{
0% {margin-left: 0%;}
100% {margin-left: -700%;}
}
@keyframes carousel8
{
0% {margin-left: 0%;}
100% {margin-left: -800%;}
}
@keyframes carousel9
{
0% {margin-left: 0%;}
100% {margin-left: -900%;}
}
@keyframes carousel10
{
0% {margin-left: 0%;}
100% {margin-left: -1000%;}
}
@keyframes carousel11
{
0% {margin-left: 0%;}
100% {margin-left: -1100%;}
}
@keyframes carousel12
{
0% {margin-left: 0%;}
100% {margin-left: -1200%;}
}
@keyframes carousel13
{
0% {margin-left: 0%;}
100% {margin-left: -1300%;}
}
@keyframes carousel14
{
0% {margin-left: 0%;}
100% {margin-left: -1400%;}
}
@keyframes carousel15
{
0% {margin-left: 0%;}
100% {margin-left: -1500%;}
}
@keyframes carousel16
{
0% {margin-left: 0%;}
100% {margin-left: -1600%;}
}
@keyframes carousel17
{
0% {margin-left: 0%;}
100% {margin-left: -1700%;}
}
@keyframes carousel18
{
0% {margin-left: 0%;}
100% {margin-left: -1800%;}
}
@keyframes carousel19
{
0% {margin-left: 0%;}
100% {margin-left: -1900%;}
}
@keyframes carousel20
{
0% {margin-left: 0%;}
5% {margin-left: -100%;}
10% {margin-left: -200%;}
15% {margin-left: -300%;}
20% {margin-left: -400%;}
25% {margin-left: -500%;}
30% {margin-left: -600%;}
35% {margin-left: -700%;}
40% {margin-left: -800%;}
45% {margin-left: -900%;}
50% {margin-left: -1000%;}
55% {margin-left: -1100%;}
60% {margin-left: -1200%;}
65% {margin-left: -1300%;}
70% {margin-left: -1400%;}
75% {margin-left: -1500%;}
80% {margin-left: -1600%;}
85% {margin-left: -1700%;}
90% {margin-left: -1800%;}
95% {margin-left: -1900%;}
100% {margin-left: -2000%;}
}
@keyframes carousel21
{
0% {margin-left: 0%;}
5% {margin-left: -100%;}
10% {margin-left: -210%;}
15% {margin-left: -310%;}
20% {margin-left: -420%;}
25% {margin-left: -520%;}
30% {margin-left: -630%;}
35% {margin-left: -730%;}
40% {margin-left: -840%;}
45% {margin-left: -940%;}
50% {margin-left: -1050%;}
55% {margin-left: -1150%;}
60% {margin-left: -1260%;}
65% {margin-left: -1360%;}
70% {margin-left: -1470%;}
75% {margin-left: -1570%;}
80% {margin-left: -1680%;}
85% {margin-left: -1780%;}
90% {margin-left: -1890%;}
95% {margin-left: -1990%;}
100% {margin-left: -2100%;}
}
@keyframes carousel22
{
0% {margin-left: 0%;}
100% {margin-left: -2200%;}
}
@keyframes carousel23
{
0% {margin-left: 0%;}
100% {margin-left: -2300%;}
}
@keyframes carousel24
{
0% {margin-left: 0%;}
100% {margin-left: -2400%;}
}
@keyframes carousel25
{
0% {margin-left: 0%;}
100% {margin-left: -2500%;}
}
@keyframes carousel26
{
0% {margin-left: 0%;}
100% {margin-left: -2600%;}
}
@keyframes carousel27
{
0% {margin-left: 0%;}
100% {margin-left: -2700%;}
}
@keyframes carousel28
{
0% {margin-left: 0%;}
100% {margin-left: -2800%;}
}
@keyframes carousel29
{
0% {margin-left: 0%;}
100% {margin-left: -2900%;}
}
@keyframes carousel30
{
0% {margin-left: 0%;}
100% {margin-left: -3000%;}
}
@keyframes carousel31
{
0% {margin-left: 0%;}
100% {margin-left: -3100%;}
}
@keyframes carousel32
{
0% {margin-left: 0%;}
100% {margin-left: -3200%;}
}
@keyframes carousel33
{
0% {margin-left: 0%;}
3.125% {margin-left: -100%;}
6.25% {margin-left: -200%;}
9.375% {margin-left: -300%;}
12.5% {margin-left: -400%;}
15.625% {margin-left: -500%;}
15.625% {margin-left: -500%;}
100% {margin-left: -3300%;}
}
@keyframes carousel34
{
0% {margin-left: 0%;}
3.03% {margin-left: -100%;}
6.06% {margin-left: -200%;}
9.09% {margin-left: -300%;}
12.12% {margin-left: -400%;}
15.15% {margin-left: -500%;}
100% {margin-left: -3400%;}
}
