Difference between revisions of "MediaWiki:Common.css"
From Regiapædia
(Emergency styling so meny is readable!) |
|||
| (104 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | /* | + | /* |
| − | + | Common CSS for all skins | |
| − | . | + | See https://phabricator.wikimedia.org/M82 for standard colors |
| − | + | */ | |
| − | + | * { | |
| − | + | box-sizing: border-box; | |
| − | + | } | |
| − | + | .clear{ | |
| − | + | clear:both; | |
| − | + | } | |
| − | + | html, body { | |
| − | + | width: 100vw; | |
| − | + | min-height: 100vh; | |
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | min-width:320px; | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | table, th, td { | |
| − | + | border: 1px solid darkgray; | |
| − | + | padding: 1px; | |
| − | + | margin: 6px 0; | |
| − | + | margin-left: auto; | |
| − | + | margin-right: auto; | |
| − | + | } | |
| − | + | caption { | |
| − | + | font-weight:bold; | |
| − | + | text-align:left; | |
| − | + | } | |
| + | body { | ||
| + | overflow-y: scroll; | ||
| + | display: grid; | ||
| + | background-color: #080808; | ||
| + | color:#fff; | ||
| + | font-size:14px; | ||
| + | font-family:tahoma,helvetica,sans-serif; | ||
| + | } | ||
| − | + | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { | |
| + | /* IE-only styles here. Works for IE10 & IE11*/ | ||
| + | html, body { | ||
| + | background-color: #FFFFD5; | ||
| + | width:100%; | ||
| + | } | ||
| + | .quicklink { | ||
| + | display:block!important; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | header { | ||
| + | grid-area: header; | ||
| + | background:linear-gradient(#000 85%,#ffffd5 100%); | ||
| + | min-height: 100px; | ||
| + | padding-bottom:15px; | ||
| + | } | ||
| + | .megamenu_container { | ||
| + | background:#000!important; | ||
| + | } | ||
| + | .megamenu { | ||
| + | text-align:center; | ||
| + | } | ||
| + | .megamenu li { | ||
| + | display:inline; | ||
| + | text-align:center; | ||
| + | } | ||
| + | .megamenu a { | ||
| + | color:white; | ||
| + | } | ||
| + | main { | ||
| + | background-color: #ffffd5; | ||
| + | grid-area: main; | ||
| + | color: #000; | ||
| + | overflow:hidden; | ||
| + | } | ||
| + | footer { | ||
| + | grid-area: footer; | ||
| + | background: linear-gradient(#ffffd5 0%,#000 15%); | ||
| + | min-height: 100px; | ||
| + | display: grid; | ||
| + | padding: 50px 20px 10px; | ||
| + | color: white; | ||
| + | text-align: center; | ||
| + | } | ||
| + | footer a { | ||
| + | display:block; | ||
| + | color:white; | ||
| + | text-decoration:none; | ||
| + | padding: 0 0 1.6em; | ||
| + | } | ||
| + | footer a:hover { | ||
| + | color:yellowgreen; | ||
| + | } | ||
Latest revision as of 17:26, 17 October 2021
/*
Common CSS for all skins
See https://phabricator.wikimedia.org/M82 for standard colors
*/
* {
box-sizing: border-box;
}
.clear{
clear:both;
}
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
min-width:320px;
}
table, th, td {
border: 1px solid darkgray;
padding: 1px;
margin: 6px 0;
margin-left: auto;
margin-right: auto;
}
caption {
font-weight:bold;
text-align:left;
}
body {
overflow-y: scroll;
display: grid;
background-color: #080808;
color:#fff;
font-size:14px;
font-family:tahoma,helvetica,sans-serif;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE-only styles here. Works for IE10 & IE11*/
html, body {
background-color: #FFFFD5;
width:100%;
}
.quicklink {
display:block!important;
}
}
header {
grid-area: header;
background:linear-gradient(#000 85%,#ffffd5 100%);
min-height: 100px;
padding-bottom:15px;
}
.megamenu_container {
background:#000!important;
}
.megamenu {
text-align:center;
}
.megamenu li {
display:inline;
text-align:center;
}
.megamenu a {
color:white;
}
main {
background-color: #ffffd5;
grid-area: main;
color: #000;
overflow:hidden;
}
footer {
grid-area: footer;
background: linear-gradient(#ffffd5 0%,#000 15%);
min-height: 100px;
display: grid;
padding: 50px 20px 10px;
color: white;
text-align: center;
}
footer a {
display:block;
color:white;
text-decoration:none;
padding: 0 0 1.6em;
}
footer a:hover {
color:yellowgreen;
}