Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
SuperHamster (talk | contribs) (Removing transparency entirely, for now) |
SuperHamster (talk | contribs) (Increasing megaheader height by 50px) |
||
Line 195: | Line 195: | ||
@media screen and (min-width:800px) { |
@media screen and (min-width:800px) { |
||
#megaheader { |
#megaheader { |
||
− | height: |
+ | height:550px; |
} |
} |
||
} |
} |
Revision as of 20:03, 4 July 2017
/* CSS placed here will be applied to all skins */
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
/* Typography */
/* Makes site-wide what has been implemented on a page-by-page basis */
.firstHeading {
font-weight:600;
border-bottom: none;
margin-bottom:10px;
padding-top:10px !important;
padding-left:0;
font-size: 2.4em !important;
width:100%;
margin:auto;
border-collapse:collapse;
vertical-align:top;
line-height:100%;
}
.createboxButton {
font-size: 1em;
display: inline-block;
min-width: 4em;
max-width: 28.75em;
margin: 5px;
padding-top: 0.546875em;
padding-right: 1em;
padding-bottom: 0.546875em;
padding-left: 1em;
line-height: 1.286;
border-radius: 2px;
box-sizing: border-box;
background-color: #f8f9fa;
color: #222222;
border: 1px solid #a2a9b1;
text-align: center;
font-weight: bold;
cursor: pointer;
}
body {
font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
div#content h1, div#content h2, div#content, #firstHeading {
font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
@media screen and (min-width:750px) {
div#bodyContent {
font-size:1.05em; padding:0;
}
p {
margin-bottom:1em;
}
}
/* Main Page Banner */
.banner-image {
position: relative;
overflow: hidden;
max-width: 65em;
width: 100%;
height: auto;
margin-bottom: .6em;
text-align: center;
padding-left: 0 !important;
}
.banner-image img {
width: 100%;
height: auto;
width: auto\9;
margin:0 auto;
}
.page-2015_Main_Page #firstHeading, .page-2015_Main_Page #yearline {
display: none;
}
/* Copied from Wikivoyage for scalable-width images */
@media screen and (max-width:799px) {
.banner-image {
position: relative;
overflow: hidden;
max-width: 1125px;
width: 100%;
height: auto;
margin-bottom: .6em;
text-align: center;
padding-left: 0 !important;
}
.banner-image img {
width: 100%;
height: auto;
width: auto\9;
margin:0 auto;
}
#main-subhead {
display:none;
}
}
@media screen and (min-width:800px) {
.banner-image {
float: right;
position: relative;
overflow: hidden;
max-width: 1125px;
height: auto;
margin-bottom: .6em;
}
.banner-image img {
float: right;
width: 100%;
height: auto;
width: auto\9;
}
.banner-image-left {
float: left !important;
}
.banner-image-left img {
float: left !important;
}
.banner-image-none {
float: none !important;
}
.banner-image-none img {
float: none !important;
}
.banner-image-center {
padding-left: none !important;
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
.banner-image-center img {
float: none !important;
}
}
/* Arrow button formatting */
.arrowbutton {
color:#ffffff;
width:100px;
padding:0.4em;
line-height:1.5em;
}
.arrowbutton::before {
content:"⇒ ";
font-weight:bold;
}
.arrowbutton-red {
background:#7e322c;
}
.arrowbutton-green {
background:#53946b;
}
.arrowbutton-blue {
background:#4f79a2;
}
.arrowbutton-gold {
background:#E5B921;
}
.arrowbutton-red:hover {
background: #EDDEDE !important;
color: #000000 !important;
}
.arrowbutton-green:hover {
background: #DEEDE6 !important;
color: #000000 !important;
}
.arrowbutton-blue:hover {
background: #DEE7ED !important;
color: #000000 !important;
}
.arrowbutton-gold:hover {
background: #faefcb !important;
color: #000000 !important;
}
@media screen and (min-width:800px) {
#megaheader {
height:550px;
}
}
@media screen and (max-width:799px) {
#megaheader {
height:auto;
}
}