MediaWiki:Common.css: Difference between revisions

Revision as of 17:05, 9 May 2022

/* Changes the default font used for MediaWiki to Arial (does not include headings or monospaced text): */
body {font-family:Arial; font-size:1em}

/* Changes the default font used for MediaWiki headings to Noto Serif: */
#content h1 {font-family: "Noto Serif", serif}

#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 {font-size:1.3em}
.toctitle {text-align:center; font-size:1.2em; line-height:2em}
.mw-body .toctitle h2 {font-family:Arial; font-weight:bold}
.toctogglespan {display:none}
.toc ul {line-height:1.4em}
.toc {border:1px solid #a2a9b1; padding:0 12px}

/* One-sided navigation menu */
@media (min-width:1340px) {
#mw-content-block {display:block}
#mw-content, #content-bottom-stuff {margin-left:14em}
#mw-content-wrapper {float:right; margin-left:-14em; width:100%}
#mw-related-navigation {width:14em; padding:0 1em 0 0}
div.color-middle {margin-right:0}
.mw-wiki-logo {display:inline-block}
}

/* mouse over link */
a:hover {text-decoration:underline}

/* selected link */
a:active {text-decoration:underline; color:orange}

ul > li:nth-child(2) > div:last-child, li:nth-child(4) > div:last-child {display:none}
ul > li:nth-child(4) > div:nth-child(2) {display:none}
ul > li:nth-child(3) > div:last-child {display:none}

.shadow:hover {box-shadow:0 0 8px rgba(37,37,37,0.5)}
.scale-up:hover {transform:scale(1.02)}
.responsive-image img {width:calc(100% - 1.5px); height:auto}
.thumbinner img {border:1px solid #c8ccd1}
.thumbinner {justify-content:center; padding:4px; border:1px solid #c8ccd1; transition:0.3s}
.thumbcaption:last-child {padding:4px 4px 0; text-align:justify; font-style:italic; font-size:13px}

.colourize img {transition:transform 0.5s, filter 1.5s ease-in-out; filter:grayscale(100%); -webkit-filter:grayscale(100%)}
.colourize:hover img {filter:none; -webkit-filter:grayscale(0)}

.green-bullet::after {content:" ■"; color:green; position:relative; bottom:1px; font-size:20px}
.orange-bullet::after {content:" ■"; color:orange; position:relative; bottom:1px; font-size:20px}
.maroon-bullet::after {content:" ■"; color:maroon; position:relative; bottom:1px; font-size:20px}

.FOMclock {
margin: 0 auto;
}
.FOMclock ul {
margin: 0 auto;
padding: 0;
text-align: inline
}

.FOMclock ul li {
display: inline;
}

.FOMdate {
display: inline;
}

.DateRange, 
.DateDiv {
display: none; 
}

h4{
    display: inline-block;
}

table {border-spacing:1.5em 0; margin:0 -1.5em}
tr td, td div {vertical-align:top; line-height:1.4em}
.wikitable td {vertical-align:middle}
.wikitable.column1-bold-fonts tr td:first-child {font-weight:bold}
.references {text-align:justify; font-size:14px}
.thumbinner, .thumbcaption {line-height:1.4em}

table.blockquote td {padding:0 64px; width:50%} /* class="blockquote" */
.experimental td table {padding:0 64px} /* class="experimental" */
#blockquote td {padding:0 64px} /* id="blockquote" */
#col-padding-left td {padding-left:64px} /* id="col-padding-left" */
#heading1 td {text-align:center; font-weight:bold; font-size:20px} /* id="heading1" */
#heading2 td {text-align:center; font-weight:bold; font-size:18px} /* id="heading2" */
#heading3 td {padding-top:2em; text-align:center; font-weight:bold; font-size:20px} /* id="heading3" */
#heading4 td {padding-top:2em; text-align:center; font-weight:bold; font-size:18px} /* id="heading4" */
#paragraph1 td {padding-top:10px} /* id="paragraph1" */
#paragraph2 td {padding-top:2em} /* id="paragraph2" */
#pgph td {text-align:center; font-weight:bold; font-size:20px; width:50%}

/* Class selectors */
table.col-padding-left td {padding-left:64px; width:50%} /* class="col-padding-left" */
table.col2-padding-right table:last-child {padding:0 64px 0 0}
table.col3-padding-right table:last-child {padding:0 80px 0 0}
table.table-columns table:last-child {border-spacing:0.5em 0; margin:0 -0.5em}
table.col1 td:first-child {min-width:2em}
table.col2-align-right td:nth-child(2):not(td:last-child) {min-width:2em; text-align:right}
table.col3-align-right td:nth-child(3):not(td:last-child) {min-width:1em; text-align:right}




#col1 {min-width:2em}
#col2 {min-width:2.5em; text-align:right; margin:0 12px}
#col2a {min-width:4.2em; text-align:right; margin:0 12px}
#col3 {padding:0 5em 0 0}


#btnHideEnglish, #btnHideSwiss-German {cursor:pointer; margin-bottom:12px; font-size:120%}
#center-align-buttons td {text-align:center; width:10%} /* id="center-align-buttons" */


#language-heading td {background:LightSkyBlue; width:50%; padding:13px 0 13px; text-align:center; font-weight:bold; font-size:20px}
#test-heading td {text-align:center; font-weight:bold; font-size:20px; margin:20px; padding:3px 0 3px; background:LightSkyBlue; border-radius:8px; width:50%}


/* The following class is used on the Test page. */
tr.contactperson td {
   background-color: cyan;
   line-height: 4em;
   font-weight: bold;
}





.divButton {padding:2px 10px; border:solid #707070 1px; font-size:14px; background:grey; display:inline-flex; max-width:60%; border-radius:2px; background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #CFCFCF)); background-image:-o-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%); background-image:-moz-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%); background-image:-webkit-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%); background-image:-ms-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%); background-image: linear-gradient(to bottom, #F2F2F2 0%, #CFCFCF 100%); cursor:default; text-align:center}

.divButton:hover {background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #EAF6FD), color-stop(1, #A7D8F5)); background-image:-o-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%); background-image: -moz-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%); background-image:-webkit-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%); background-image:-ms-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%); background-image: linear-gradient(to bottom, #EAF6FD 0%, #A7D8F5 100%); border:#3c7fb1 solid 1px}

.divButton:active {border:solid #2c628b 1px; padding:2px 9px 2px 11px; background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #E5F4FC), color-stop(0.5, #C4E5F6), color-stop(0.51, #98D0EF), color-stop(1, #68B3DB)); background-image:-o-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 100%, #98D0EF 100%, #68B3DB 100%); background-image: -moz-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 100%, #98D0EF 100%, #68B3DB 100%); background-image:-webkit-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 100%, #98D0EF 100%, #68B3DB 100%); background-image:-ms-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 100%, #98D0EF 100%, #68B3DB 100%); background-image: linear-gradient(to bottom, #E5F4FC 0%, #C4E5F6 100%, #98D0EF 100%, #68B3DB 100%)}







.tooltip {position:relative; display:inline-block; border-bottom:1px dotted black}

.tooltip .tooltiptext {visibility:hidden; background-color:#d0dcf1; color:black; text-align:left; font-size:12px; border-radius:4px; padding:5px 8px; transform:translateX(-50%); position:absolute; z-index:1; bottom:140%; left:50%; width:max-content; max-width:350px; opacity:0; transition:opacity 1s; transition:0.5s ease-in-out}

.tooltip .tooltiptext::after {content:""; position:absolute; top:100%; left:50%; margin-left:-5px; border-width:8px; border-style:solid; border-color:#d0dcf1 transparent transparent transparent}

.tooltip:hover .tooltiptext {visibility:visible; opacity:1}