Difference between revisions of "MediaWiki:Common.css"

From Future Of Mankind
(236 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
 +
.Unifraktur-Maguntia-font {font-family:'UnifrakturMaguntia', cursive; font-size:1em}
 +
 
/* Changes the default font used for MediaWiki to Arial (does not include headings or monospaced text): */
 
/* Changes the default font used for MediaWiki to Arial (does not include headings or monospaced text): */
 
body {font-family:Arial; font-size:1em}
 
body {font-family:Arial; font-size:1em}
Line 76: Line 79:
 
table {border-spacing:1.5em 0; margin:0 -1.5em}
 
table {border-spacing:1.5em 0; margin:0 -1.5em}
 
tr td, td div {vertical-align:top; line-height:1.4em}
 
tr td, td div {vertical-align:top; line-height:1.4em}
 +
.v-align-middle td div {vertical-align:middle} /* class="v-align-middle" */
 
.wikitable td {vertical-align:middle}
 
.wikitable td {vertical-align:middle}
 
.wikitable.column1-bold-fonts tr td:first-child {font-weight:bold}
 
.wikitable.column1-bold-fonts tr td:first-child {font-weight:bold}
Line 85: Line 89:
 
#col-padding-left td {padding-left:48px} /* id="col-padding-left" */
 
#col-padding-left td {padding-left:48px} /* id="col-padding-left" */
 
#heading1 td {text-align:center; font-weight:bold; font-size:20px} /* id="heading1" */
 
#heading1 td {text-align:center; font-weight:bold; font-size:20px} /* id="heading1" */
#heading2 td {line-height:24px; text-align:center; font-weight:bold; font-size:18px} /* id="heading2" */
+
#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" */
 
#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" */
 
#heading4 td {padding-top:2em; text-align:center; font-weight:bold; font-size:18px} /* id="heading4" */
Line 92: Line 96:
 
#paragraph1 td {padding-top:16px} /* id="paragraph1" */
 
#paragraph1 td {padding-top:16px} /* id="paragraph1" */
 
#paragraph2 td {padding-top:2em} /* id="paragraph2" */
 
#paragraph2 td {padding-top:2em} /* id="paragraph2" */
 +
#no-line-break td {padding-top:0} /* id="no-line-break" */
  
 
#heading1-table table td:last-child {width:100%; text-align:center; font-weight:bold; font-size:22px} /* id="heading1-table" */
 
#heading1-table table td:last-child {width:100%; text-align:center; font-weight:bold; font-size:22px} /* id="heading1-table" */
Line 106: Line 111:
 
#col2-move-left table td:nth-child(2) {display:block; position:relative; left:-1em; margin-right:-1em} /* id="col2-move-left" */
 
#col2-move-left table td:nth-child(2) {display:block; position:relative; left:-1em; margin-right:-1em} /* id="col2-move-left" */
  
 +
#square-bullet-points li {list-style-type:square; padding-left:1em; line-height:1em} /* id="square-bullet-points" */
  
 
/* Table for Contact Report 690 */
 
/* Table for Contact Report 690 */
Line 118: Line 124:
 
table.col2-padding-right table:last-child {padding-right:48px}
 
table.col2-padding-right table:last-child {padding-right:48px}
 
table.col3-padding-right table:last-child {padding-right:64px}
 
table.col3-padding-right table:last-child {padding-right:64px}
table.table-columns table:last-child {border-spacing:0.5em 0; margin:0 -0.5em}
+
table.table-columns table:last-child {border-spacing:0.5em 0; margin:0 -0.5em} /* class="table-columns" */
 
table.col1 td:first-child {min-width:2em}
 
table.col1 td:first-child {min-width:2em}
 +
table.col1-align-right td table tr td:first-child {text-align:right}
 +
table.col1a td table tr td:first-child {min-width:1.5em}
 +
table.col1b td table tr td:first-child {min-width:2em}
 
table.col2a td:nth-child(2):not(td:last-child) {min-width:1em}
 
table.col2a td:nth-child(2):not(td:last-child) {min-width:1em}
table.col1-align-right td table tr td:first-child {min-width:2em; text-align:right}
+
table.col2b td:nth-child(2):not(td:last-child) {min-width:0.5em}
 
table.col2-align-right td:nth-child(2):not(td:last-child) {min-width:2em; text-align:right}
 
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:2em; text-align:right}
 
table.col3-align-right td:nth-child(3):not(td:last-child) {min-width:2em; text-align:right}
Line 130: Line 139:
  
 
/* ID selectors – Table */
 
/* ID selectors – Table */
 +
#col1-align-right td table tr td:first-child {text-align:right} /* id="col1-align-right" */
 
#col2a td:nth-child(2):not(td:last-child) {min-width:1em} /* id="col2a" */
 
#col2a td:nth-child(2):not(td:last-child) {min-width:1em} /* id="col2a" */
 +
#col2b td:nth-child(2):not(td:last-child) {min-width:0.5em} /* id="col2b" */
  
  
Line 167: Line 178:
 
.tooltip {position:relative; display:inline-block; border-bottom:1px dotted black}
 
.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(-82%); 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 .tooltip-text {visibility:hidden; background-color:#d0dcf1; color:black; text-align:justify; font-size:14px; border-radius:4px; padding:5px 8px; transform:translateX(-48%); 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:82%; margin-left:-5px; border-width:8px; border-style:solid; border-color:#d0dcf1 transparent transparent transparent}
 
 
 
.tooltip:hover .tooltiptext {visibility:visible; opacity:1}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.WD-Gewalt {border-bottom:1px dotted black; display:inline-block; position:relative}
 
 
 
.WD-Gewalt:before {background-color:#d0dcf1; border-radius:4px; bottom:120%; color:black; content:"[http://dict.figu.org/node/1624 FIGU Dictionary Site:Gewalt] Explanation from Ptaah: Gewalt has nothing to do with the terms ‹heftig› (violent) and ‹Heftigkeit› (violence), because the old Lyrian term with regard to ‹Gewalt› means ‹Gewila›, and it is defined as using, with all the coercive means that are at one’s disposal, physical, psychical, mental, and consciousness-based powers, abilities and skills, in order to carry out and carry through terrible actions and deeds."; font-size:14px; left:50%; max-width:350px; opacity:0; padding:5px 8px; position:absolute; text-align:left; transform:translateX(-50%); transition:opacity 1s; visibility: hidden; width:max-content}
 
  
.WD-Gewalt:after {border-color:#d0dcf1 transparent transparent transparent; border-style:solid; border-width:5px; bottom:75%; content:""; left:50%; margin-left:-5px; opacity:0; position:absolute; transition:opacity 1s}
+
.tooltip .tooltip-text::after {content:""; position:absolute; top:100%; left:48%; margin-left:-5px; border-width:10px; border-style:solid; border-color:#d0dcf1 transparent transparent transparent}
  
.WD-Gewalt:hover:before, .WD-Gewalt:hover:after {opacity:1; visibility:visible}
+
.tooltip:hover .tooltip-text {visibility:visible; opacity:1}

Revision as of 19:29, 10 August 2022

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
.Unifraktur-Maguntia-font {font-family:'UnifrakturMaguntia', cursive; font-size:1em}

/* 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}
.v-align-middle td div {vertical-align:middle} /* class="v-align-middle" */
.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}


#blockquote td {padding:0 48px} /* id="blockquote" */
#col-padding-left td {padding-left:48px} /* 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" */
#heading5 td {text-align:center; font-size:15px} /* id="heading5" */
#heading6 td {text-align:center; font-size:13px} /* id="heading6" */
#paragraph1 td {padding-top:16px} /* id="paragraph1" */
#paragraph2 td {padding-top:2em} /* id="paragraph2" */
#no-line-break td {padding-top:0} /* id="no-line-break" */

#heading1-table table td:last-child {width:100%; text-align:center; font-weight:bold; font-size:22px} /* id="heading1-table" */
#heading2-table table td:last-child {width:100%; padding-top:2em; text-align:center; font-weight:bold; font-size:22px} /* id="heading2-table" */
#heading3-table table td:last-child {width:100%; text-align:center; font-weight:bold; font-size:20px} /* id="heading3-table" */
#heading4-table table td:last-child {width:100%; padding-top:2em; text-align:center; font-weight:bold; font-size:20px} /* id="heading4-table" */
#heading5-table table td:last-child {width:100%; text-align:center; font-weight:bold; font-size:18px} /* id="heading5-table" */
#heading6-table table td:last-child {width:100%; padding-top:2em; text-align:center; font-weight:bold; font-size:18px} /* id="heading6-table" */
#heading7-table table td:last-child {width:100%; text-align:center; font-size:15px} /* id="heading7-table" */
#heading8-table table td:last-child {width:100%; text-align:center; font-size:13px} /* id="heading8-table" */
#paragraph1-table table td {padding-top:16px} /* id="paragraph1-table" */
#paragraph2-table table td {padding-top:2em} /* id="paragraph2-table" */
#no-line-break-table table {padding-top:0} /* id="no-line-break-table" */
#col2-move-left table td:nth-child(2) {display:block; position:relative; left:-1em; margin-right:-1em} /* id="col2-move-left" */

#square-bullet-points li {list-style-type:square; padding-left:1em; line-height:1em} /* id="square-bullet-points" */

/* Table for Contact Report 690 */
.CR690-tab-col2-move-left table td:nth-child(2) {display:block; margin-left:-1em; margin-right:-1em; text-align:right} /* class="CR690-tab-col2-move-left" */
.CR690-tab-col5-move-left table td:nth-child(5) {padding-left:3em} /* class="CR690-tab-col5-move-left" */


/* Class selectors – Table */
table.blockquote td {padding:0 48px; width:50%} /* class="blockquote" */
table.col-padding-left td {padding-left:48px; width:50%} /* class="col-padding-left" */
table.col-padding-right td {padding-right:48px; width:50%} /* class="col-padding-right" */
table.col2-padding-right table:last-child {padding-right:48px}
table.col3-padding-right table:last-child {padding-right:64px}
table.table-columns table:last-child {border-spacing:0.5em 0; margin:0 -0.5em} /* class="table-columns" */
table.col1 td:first-child {min-width:2em}
table.col1-align-right td table tr td:first-child {text-align:right}
table.col1a td table tr td:first-child {min-width:1.5em}
table.col1b td table tr td:first-child {min-width:2em}
table.col2a td:nth-child(2):not(td:last-child) {min-width:1em}
table.col2b td:nth-child(2):not(td:last-child) {min-width:0.5em}
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:2em; text-align:right}
.not-bold td {font-weight:normal !important} /* class="not-bold" */
.align-text-left td {text-align:left !important} /* class="align-text-left" */
.paragraph-table table {padding-top:16px} /* class="paragraph-table" */
.paragraph td {padding-top:16px} /* class="paragraph" */

/* ID selectors – Table */
#col1-align-right td table tr td:first-child {text-align:right} /* id="col1-align-right" */
#col2a td:nth-child(2):not(td:last-child) {min-width:1em} /* id="col2a" */
#col2b td:nth-child(2):not(td:last-child) {min-width:0.5em} /* id="col2b" */



#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 {width:50%; text-align:center; font-weight:bold; font-size:20px} /* id="language-heading" */



/* 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 .tooltip-text {visibility:hidden; background-color:#d0dcf1; color:black; text-align:justify; font-size:14px; border-radius:4px; padding:5px 8px; transform:translateX(-48%); 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 .tooltip-text::after {content:""; position:absolute; top:100%; left:48%; margin-left:-5px; border-width:10px; border-style:solid; border-color:#d0dcf1 transparent transparent transparent}

.tooltip:hover .tooltip-text {visibility:visible; opacity:1}