MediaWiki:Common.css
Revision as of 03:25, 5 August 2018 by >Admin-gpuser (Created page with "→Main page: body.page-Main_Page h1.firstHeading { display: none; } .mp-portal-row { display: flex; flex-flow: row nowrap; margin: 0; align-items...")
CSS and Javascript changes must comply with the wiki design rules.
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: Clear the cache in Tools → Preferences
/* Main page */
body.page-Main_Page h1.firstHeading {
display: none;
}
.mp-portal-row {
display: flex;
flex-flow: row nowrap;
margin: 0;
align-items: self-start;
justify-content: space-around;
text-align: center;
font-weight: bold;
max-width: 100%;
}
.mp-portal-row div {
flex: 0 1 auto;
margin: 4px;
}
.mp-portal-icon a img {
width: 100%;
min-width: 50px;
max-width: 150px;
height: auto;
}
.mp p img {
max-width: 100%;
height: auto;
}
@media(min-width: 1200px){
table.mp {
width: 100%;
text-align: center;
margin: 0 10px;
}
.mp-wrapper {
padding-right:400px;
height:auto;
}
.mp-left-container {
float: left;
}
.mp-right-container {
float: left;
padding-left:30px;
width: 400px;
margin-right:-400px;
}
}
.mp-menu-item {
text-align:left;
width:195px;
display:inline-block;
margin:15px 25px;
vertical-align:top;
}
.mp-menu-item-header {
border-bottom: 1px solid #505050;
font-size: 150%;
font-variant: small-caps;
color: black;
padding-bottom: 5px;
}
.mp-menu-item-body {
column-count:1;
margin-top: 5px;
}
.mp-menu-item-body > ul {
margin-top: 0;
}
/* wikitable */
table.wikitable > :first-child > tr:first-child, table.wikitable > tbody > tr.heading, table.wikitable > :first-child > tr:first-child > *, table.wikitable > tbody > tr.heading > * {
background-color: #0da547 !important;
border-color: #336642 !important;
}
table.wikitable > :first-child > tr:first-child a, table.wikitable > tbody > tr.heading a {
color: #a7f9be
}
table.wikitable > tbody > tr > th, table.wikitable > tfoot > tr > th, table.wikitable > thead > tr > th, table.wikitable > tbody > tr > th {
background-color: #0da547;
border-color: #336642;
}
table.wikitable > tbody > tr:nth-child(odd), table.wikitable > tbody > tr:nth-child(odd) {
background-color: #e3f2ea;
}
table.wikitable {
border:0 solid;
border-collapse:collapse;
border-spacing:0;
font-size:.9230769231em;
text-align:left;
clear:none;
position:relative;
vertical-align:top;
margin:10px 0;
padding:0;
max-width: 100%;
}
/* make table captions bold */
table.wikitable > caption {
font-weight: bold
}
/* this is a hack to add borders to IE8- */
table.wikitable > thead, table.wikitable > tbody {
border:0 solid #aaa\0/
}
table.wikitable tr {
border:1px solid #aaa\0/;
text-align:left;
border-color:#AAA;
}
/* and this removes them for IE9+ */
:root table.wikitable tr {
border-top-width:0;
border-bottom-width:0;
}
table.wikitable > * > tr > :first-child {
border-left:1px solid #AAA;
}
table.wikitable > * > tr > :last-child {
border-right:1px solid #AAA;
}
table.wikitable > tbody > tr:last-child, table.wikitable > tbody > tr:last-child > *, table.wikitable > tfoot > tr:last-child > *, table.wikitable > caption {
border-bottom:1px solid #AAA;
}
table.wikitable > tbody:first-child > tr:first-child > *, table.wikitable > tbody > tr.heading > *, table.wikitable > thead > tr:first-child > * {
background-image: url('resources/assets/skin/infobox-header-overlay.png');
background-color: #EEE;
border-color: #AAA;
padding: .5em;
color: #fff!important;
text-shadow: rgba(0,0,0,0.75) 0 0 0.25em;
}
table.wikitable > tbody > tr > th, table.wikitable > tbody > tr > td, table.wikitable > tfoot > tr > th {
line-height:1.667em;
padding:.25em .5em;
}
table.wikitable tr > th, table.wikitable[class*=center] tr {
text-align:center;
}
table.wikitable[class*=left] tr {
text-align:left;
}
table.wikitable[class*=right] tr {
text-align:right;
}
table.wikitable[class*=middle] tr {
vertical-align:middle;
}
table.wikitable[class*=top] tr {
vertical-align:top;
}
table.wikitable[class*=bottom] tr {
vertical-align:bottom;
}
table.wikitable > :first-child > tr:first-child, table.wikitable > tbody > tr.heading {
background-color:#EEE;
border:1px solid #aaa;
}
table.wikitable > tbody > tr > th, table.wikitable > tfoot > tr > th {
background-color:#E7E7E7;
border-color:#AAA;
}
table.wikitable > tbody > tr:nth-child(odd) {
background-color:#F3F3F3;
border-color:#AAA;
}
table.wikitable > tbody, table.wikitable > tbody > tr.heading, table.wikitable > tbody > tr > [rowspan], table.wikitable > tbody > tr > [colspan] {
border:1px solid #AAA;
}
table.wikitable > :first-child > tr:first-child + tr [rowspan], table.wikitable > :first-child > tr:first-child + tr [colspan] {
border-top-width:0;
}
table.wikitable .line, table.wikitable .line-bottom {
border-bottom-width:1px!important;
border-bottom-style:solid;
}
table.wikitable .line-top {
border-top-width:1px!important;
border-top-style:solid;
border-top-color:#AAA;
}
table.wikitable .line-left {
border-left-width:1px!important;
border-left-style:solid;
border-left-color:#AAA;
}
table.wikitable .line-right {
border-right-width:1px!important;
border-right-style:solid;
border-right-color:#AAA;
}
table.wikitable table {
background-color:transparent;
padding:0;
margin:0;
}
table.borderless > * > tr > td {
border: none;
}
table.borderless > tbody > tr > [colspan] {
border: none;
}
table.fullwidth {
width: 100%;
}
.wikitable > * > tr > th a:visited, .wikitable > * > tr > th a:link {
color: #FFFFFF !important;
}
.wikitable th a {
color:#c7ffff;
}
/* Mobile for .wikitable */
@media screen and (max-width: 768px){
.wikitable {
font-size:1.5em!important;
width:100%;
}
}
/* Layout */
body {
background-color: #123017;
min-width: 850px;
}
a.new:link {
color: #BA0000;
}
a:link {
color: #3F56AD;
}
a:visited {
color: #3F56AD;
}
div#mw-panel div.portal div.body ul li a:visited {
color: #DDDDDD;
}
div#mw-panel div.portal div.body ul li a {
color: #DDDDDD;
}
#mw-page-base {
background: transparent;
}
#mw-head-base {
background: transparent;
}
#left-navigation {
background: url('resources/assets/skin/layout-tabs-background.png');
margin-top: 39px;
}
#right-navigation {
background: url('resources/assets/skin/layout-tabs-background.png');
margin-right: 10px;
margin-top: 39px;
}
div.vectorTabs, div.vectorTabs ul li {
background-color: rgba(0, 0, 0, 0);
background-image: none;
}
div.vectorTabs ul {
background-color: rgba(0, 0, 0, 0);
background-image: none;
}
div.vectorTabs span {
background-color: rgba(0, 0, 0, 0);
background-image: none;
}
div.vectorTabs li a, div.vectorTabs li a:visited {
color: #ffffff;
}
div.vectorTabs li.selected {
background: rgba(0, 0, 0, 0) url('resources/assets/skin/layout-tabs-background-selected.png') repeat-x scroll center bottom;
}
div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited, div.vectorTabs li.new a, div.vectorTabs li.new a:visited {
color: #ffffff !important;
}
div.vectorMenu h3 span {
color: #ffffff;
}
div#mw-head div.vectorMenu h3, div.vectorMenu h3 > a {
background-image: none;
}
div#simpleSearch {
max-width: 16em;
}
div#mw-panel div.portal {
background-image: url("resources/assets/skin/portal-linebreak.png");
background-position: left top;
background-repeat: no-repeat;
direction: ltr;
margin: 0 0.6em 0 0.7em;
padding: 0.25em 0;
}
div#mw-panel div.portal h3, #mw-panel.collapsible-nav .portal h3 a, #mw-panel.collapsible-nav .portal.collapsed h3 a {
color: #ffffcc;
}
#ca-edit, #ca-ve-edit, #ca-view {
margin-left: 3px;
}
/* Mobile */
@media(max-width: 1320px) {
div.infobox {
float: none;
margin: auto;
}
table.center-mobile {
margin: 10px auto;
}
}
/* Ambox */
.ambox {
background-color: #eeeeee;
border-bottom-color: #383838;
border-right-color: #383838;
border-top-color: #383838;
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox.ambox-tiny {
font-size: 90%;
margin: 2px 0;
width: auto;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/* Ambox small text */
.amsmalltext {
font-size: smaller;
margin-left:0.8em;
margin-top:0.5em;
}
/* Blockquote */
blockquote{
font-size: 14pt;
width:60%;
margin:auto;
font-family:Catamaran;
font-style:italic;
color: #555555;
padding:1.2em 30px 1.2em 75px;
border-left:8px solid #336699 ;
line-height:1.3;
position: relative;
background:#EDEDED;
}
blockquote::before{
font-family:Arial;
content: "\201C";
color:#336699;
font-size:4em;
position: absolute;
left: 10px;
top:-10px;
}
blockquote::after{
content: '';
}
blockquote span{
display:block;
color:#333333;
font-style: normal;
font-weight: bold;
margin-top:1em;
}
/***********/
/* Tooltip */
/***********/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dashed black;
}
.tooltiptext {
visibility: hidden;
min-width: 250px;
margin-left: -140px;
padding: 12px 14px;
text-align: center;
position: absolute;
left: 50%;
bottom: 195%;
z-index: 99999;
background: #fff;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.15);
border: 1px solid #a2a9b1;
border-radius: 2px;
font-weight: normal;
}
.tooltiptext:after, .tooltiptext:before {
content: '';
position: absolute;
left: 50%;
border-style: solid;
}
.tooltiptext:after {
top: 100%;
bottom: auto;
width: 20px;
height: 20px;
background: #fff;
margin-top: -10px;
margin-left: -10px;
box-shadow: 1px 1px 0px #a2a9b1;
transform: rotate(45deg);
border-width: 0;
}
.tooltiptext:before {
top: 100%;
bottom: auto;
border-width: 18px;
margin-left: -18px;
border-color: rgba(0,0,0,0.15) transparent transparent transparent;
pointer-events: none;
}
.tooltip .tooltip .tooltiptext {
bottom: auto;
top: 195%;
}
.tooltip .tooltip .tooltiptext:after {
top: auto;
bottom: 100%;
border-width: 15px;
margin-left: -15px;
border-color: transparent transparent white transparent;
width: 0;
height: 0;
box-shadow: none;
background: none;
transform: none;
}
.tooltip .tooltip .tooltiptext:before {
top: auto;
bottom: 100%;
border-width: 16px;
margin-left: -16px;
border-color: transparent transparent #888 transparent;
}
.tooltiptext hr {
margin: 10px 0 12px;
position: relative;
background: none;
}
.tooltiptext hr:after {
content: '';
display: block;
width: 100%;
height: 1px !important;
position: absolute;
left: -14px;
background: #a2a9b1;
padding: 0 14px;
}
.tooltip:hover > .tooltiptext {
visibility: visible;
}
.tooltiptext {
opacity: 0;
transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
transform: translateY(8px);
}
.tooltip .tooltip .tooltiptext {
transform: translateY(-8px);
}
.tooltip:hover > .tooltiptext {
opacity: 1;
transition-delay: 0s;
transform: translateY(0);
}