MediaWiki:Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* 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) ")";
}

/********************************************************/
/* 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-form_edit,
.page-Pizza-meet #ca-form_edit,
.page-ACKsession #ca-form_edit
{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)
{
    /* hide nav bar */
    .mw-body {margin-left: 0}
    #mw-panel {display: none}
}
@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"])
{
    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"]
{
    /*background-color: red;
    color: white !important;*/
    font-weight: bold;
}

/******************************************/
/* image gallery carousel */

ul.gallery.mw-gallery-packed-hover.carousel
{
    overflow: hidden;
    white-space: nowrap;
    height: 30vmin;
}

ul.gallery.mw-gallery-packed-hover.carousel,
ul.gallery.mw-gallery-packed-hover.carousel *
{
    margin: 0;
    padding: 0;
    border: 0;
}

ul.gallery.mw-gallery-packed-hover.carousel *
{
    width:100% !important;
    height: auto;
}

ul.gallery.mw-gallery-packed-hover.carousel li:first-child
{
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

ul.gallery.mw-gallery-packed-hover.carousel li:first-child:nth-last-child(2)
{
    animation-name: carousel1;
    animation-duration: 10s;
}
ul.gallery.mw-gallery-packed-hover.carousel li:first-child:nth-last-child(3)
{
    animation-name: carousel2;
    animation-duration: 15s;
}
ul.gallery.mw-gallery-packed-hover.carousel li:first-child:nth-last-child(4)
{
    animation-name: carousel3;
    animation-duration: 20s;
}
ul.gallery.mw-gallery-packed-hover.carousel li:first-child:nth-last-child(5)
{
    animation-name: carousel4;
    animation-duration: 25s;
}
ul.gallery.mw-gallery-packed-hover.carousel li:first-child:nth-last-child(6)
{
    animation-name: carousel5;
    animation-duration: 30s;
}

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