MediaWiki: Common.css
(Address mixed content, formatting, search box issues. All this formatting is now wrapped in the @media query so that desktop users have a default-y experience) |
(Wrong file: Undo revision 12861 by MichaelBillington (talk)) |
||
Line 1: | Line 1: | ||
/ | @import url(//brick.a.ssl.fastly.net/Open+Sans:400,600,700); | ||
.nav th { | |||
text-align: center; | |||
background: #ECECEC; | |||
font-weight: bold; | |||
margin: 0 .1em 0 0; | |||
width: 25%; | |||
font-size: 0.925em; | |||
-moz-border-radius: 12px 12px 12px 12px; | |||
} | |||
/* | .nav th a { | ||
padding: 1em 2em; | |||
color: #224F82; | |||
text-decoration: none; | |||
} | |||
.nav th:hover { | |||
color: #000; | |||
} | |||
li#footer-info-lastmod, | |||
li#footer-info-viewcount, | |||
li#footer-places-about, | |||
li#footer-places-disclaimer { | |||
display: none !important; | |||
} | |||
div#mw-panel div.portal#p-navigation div.body { | |||
background-image:none; | |||
} | |||
#p-navigation h5 { | |||
display: none !important; | |||
} | |||
.nowrap { | |||
white-space: nowrap; | |||
} | |||
h2 { | |||
border-bottom: 2px dotted #BBBDBF; | |||
} | |||
.firstHeading { | |||
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%; | |||
} | |||
.toggle-head { | |||
background:url(//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/HW_open_arrow.svg/10px-HW_open_arrow.svg.png) no-repeat 0% center; | |||
} | |||
.toggle-head:hover { | |||
text-decoration:underline; | |||
cursor:pointer; | |||
} | |||
.redirect-in-category, .allpagesredirect a { | |||
color: gray; | |||
} | |||
.nodisplay { | |||
display: none !important; | |||
} | |||
/* Custom table formatting */ | |||
table.rowlines { | |||
border-collapse:collapse; | |||
border:2px solid #BBBDBF; | |||
width:100%; | |||
vertical-align:top; | |||
} | |||
table.rowlines th { | |||
border-bottom:1px solid #BBBDBF; | |||
border-top:1px solid #BBBDBF; | |||
padding:5px; | |||
} | |||
table.rowlines td { | |||
border-bottom:1px dotted #BBBDBF; | |||
padding:5px; | |||
} | |||
div.rowlines-wrapper { | |||
padding:0 10px 0 10px; | |||
} | |||
span.subpages { | |||
display: 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; | |||
} | |||
/* Round button formatting */ | |||
.roundbutton { | |||
display:inline-block; border-radius:50%; color:#ffffff; width:54px; height:54px; padding:12px; margin-right:0.5em; margin-bottom:0.5em; text-align:center; | |||
} | |||
.roundbutton-large { | |||
display:inline-block; border-radius:50%; color:#ffffff; width:68px; height:68px; padding:15px; margin-right:0.5em; margin-bottom:0.5em; text-align:center; | |||
} | |||
/* Main Page CSS */ | |||
body #t-cite, | |||
body #siteSub, | |||
body.page-Home.action-view #contentSub, | |||
body.page-Home.action-view #jump-to-nav { | |||
display: none !important; | |||
} | |||
/* Copied from Wikivoyage for scalable-width images */ | |||
@media screen and (max-width:749px) { | |||
.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; | |||
} | |||
} | |||
@media screen and (min-width:750px) { | |||
.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; | |||
} | |||
} | |||
.main-page-image { | |||
position: relative; | |||
overflow: hidden; | |||
max-width: 1125px; | |||
height: auto; | |||
margin-left: -1em; | |||
margin-right: -1.5em; | |||
margin-bottom: .6em; | |||
} | |||
.main-page-image img { | |||
width: 100%; | |||
height: auto; | |||
width: auto\9; | |||
} | |||
/* Login interface adjustments */ | |||
.mw-createacct-benefits-container { | |||
display: none; | |||
} | |||
/* Changes to MediaWiki default image stuff */ | |||
/* Yell at James Hare if this breaks anything */ | |||
div.floatright { | |||
clear:none; | |||
} | |||
div.floatleft { | |||
clear:none; | |||
} | |||
/* Certain pages on this website use a two-column setup */ | |||
/* Pages that employ the "mobile-collapse" class will force it down to a one-column setup on narrow screens (e.g. on mobile devices) */ | |||
/* This is not to be used on the main page, which employs its own sophisticated code to reduce two columns to one column */ | |||
@media screen and (max-width:749px) { | @media screen and (max-width:749px) { | ||
.mobile-collapse { | |||
display: block !important; | |||
width: 100% !important; | |||
margin-bottom:0.6em; | |||
} | |||
#donatebutton { | |||
overflow:scroll; | |||
} | |||
#donate-pullquote, | |||
#donate-otheroptions { | |||
display:none; | |||
} | |||
} | |||
/* Typography */ | |||
/* Makes site-wide what has been implemented on a page-by-page basis */ | |||
body { | |||
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |||
} | |||
.firstHeading { | |||
font-weight: 600; | |||
} | |||
@media screen and (min-width:750px) { | |||
div#bodyContent { | |||
font-size:1.05em; padding:0; | |||
} | |||
p { | |||
margin-bottom:1em; | |||
} | |||
h1 { | |||
font-size: 2.4em !important; | |||
} | |||
} | |||
body.page-User_James_Hare_GLAM #siteNotice, | |||
body.page-User_James_Hare_GLAM #firstHeading, | |||
body.page-Internal_Strategic_plan_2015 #siteNotice, | |||
body.page-Internal_Strategic_plan_2015 #firstHeading, | |||
body.page-Strategic_plan_2015 #siteNotice, | |||
body.page-Strategic_plan_2015 #firstHeading, | |||
body.page-Donate #siteNotice, | |||
body.page-Donate #firstHeading { | |||
display:none !important; | |||
} | |||
#megaheader img { | |||
opacity:0; | |||
-moz-transition: opacity 2s; /* Firefox 4 */ | |||
-webkit-transition: opacity 2s; /* Safari and Chrome */ | |||
-o-transition: opacity 2s; | |||
transition: opacity 2s; | |||
} | |||
/* Evil interface meddling for donations */ | |||
.page-Donate_Monthly_5 #mw-head, | |||
.page-Donate_Monthly_5 .portal, | |||
.page-Donate_Monthly_10 #mw-head, | |||
.page-Donate_Monthly_10 .portal, | |||
.page-Donate_Monthly_25 #mw-head, | |||
.page-Donate_Monthly_25 .portal, | |||
.page-Donate_Monthly_50 #mw-head, | |||
.page-Donate_Monthly_50 .portal, | |||
.page-Donate_Monthly_100 #mw-head, | |||
.page-Donate_Monthly_100 .portal, | |||
.page-Donate_Monthly_200 #mw-head, | |||
.page-Donate_Monthly_200 .portal, | |||
.page-Donate_Annually_5 #mw-head, | |||
.page-Donate_Annually_5 .portal, | |||
.page-Donate_Annually_10 #mw-head, | |||
.page-Donate_Annually_10 .portal, | |||
.page-Donate_Annually_25 #mw-head, | |||
.page-Donate_Annually_25 .portal, | |||
.page-Donate_Annually_50 #mw-head, | |||
.page-Donate_Annually_50 .portal, | |||
.page-Donate_Annually_100 #mw-head, | |||
.page-Donate_Annually_100 .portal, | |||
.page-Donate_Annually_200 #mw-head, | |||
.page-Donate_Annually_200 .portal, | |||
.page-Donate_One-time_5 #mw-head, | |||
.page-Donate_One-time_5 .portal, | |||
.page-Donate_One-time_10 #mw-head, | |||
.page-Donate_One-time_10 .portal, | |||
.page-Donate_One-time_25 #mw-head, | |||
.page-Donate_One-time_25 .portal, | |||
.page-Donate_One-time_50 #mw-head, | |||
.page-Donate_One-time_50 .portal, | |||
.page-Donate_One-time_100 #mw-head, | |||
.page-Donate_One-time_100 .portal, | |||
.page-Donate_One-time_200 #mw-head, | |||
.page-Donate_One-time_200 .portal { | |||
display: none; | |||
} | } |
Revision as of 11:46, 15 May 2017
@import url(//brick.a.ssl.fastly.net/Open+Sans:400,600,700);
.nav th {
text-align: center;
background: #ECECEC;
font-weight: bold;
margin: 0 .1em 0 0;
width: 25%;
font-size: 0.925em;
-moz-border-radius: 12px 12px 12px 12px;
}
.nav th a {
padding: 1em 2em;
color: #224F82;
text-decoration: none;
}
.nav th:hover {
color: #000;
}
li#footer-info-lastmod,
li#footer-info-viewcount,
li#footer-places-about,
li#footer-places-disclaimer {
display: none !important;
}
div#mw-panel div.portal#p-navigation div.body {
background-image:none;
}
#p-navigation h5 {
display: none !important;
}
.nowrap {
white-space: nowrap;
}
h2 {
border-bottom: 2px dotted #BBBDBF;
}
.firstHeading {
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%;
}
.toggle-head {
background:url(//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/HW_open_arrow.svg/10px-HW_open_arrow.svg.png) no-repeat 0% center;
}
.toggle-head:hover {
text-decoration:underline;
cursor:pointer;
}
.redirect-in-category, .allpagesredirect a {
color: gray;
}
.nodisplay {
display: none !important;
}
/* Custom table formatting */
table.rowlines {
border-collapse:collapse;
border:2px solid #BBBDBF;
width:100%;
vertical-align:top;
}
table.rowlines th {
border-bottom:1px solid #BBBDBF;
border-top:1px solid #BBBDBF;
padding:5px;
}
table.rowlines td {
border-bottom:1px dotted #BBBDBF;
padding:5px;
}
div.rowlines-wrapper {
padding:0 10px 0 10px;
}
span.subpages {
display: 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;
}
/* Round button formatting */
.roundbutton {
display:inline-block; border-radius:50%; color:#ffffff; width:54px; height:54px; padding:12px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}
.roundbutton-large {
display:inline-block; border-radius:50%; color:#ffffff; width:68px; height:68px; padding:15px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}
/* Main Page CSS */
body #t-cite,
body #siteSub,
body.page-Home.action-view #contentSub,
body.page-Home.action-view #jump-to-nav {
display: none !important;
}
/* Copied from Wikivoyage for scalable-width images */
@media screen and (max-width:749px) {
.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;
}
}
@media screen and (min-width:750px) {
.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;
}
}
.main-page-image {
position: relative;
overflow: hidden;
max-width: 1125px;
height: auto;
margin-left: -1em;
margin-right: -1.5em;
margin-bottom: .6em;
}
.main-page-image img {
width: 100%;
height: auto;
width: auto\9;
}
/* Login interface adjustments */
.mw-createacct-benefits-container {
display: none;
}
/* Changes to MediaWiki default image stuff */
/* Yell at James Hare if this breaks anything */
div.floatright {
clear:none;
}
div.floatleft {
clear:none;
}
/* Certain pages on this website use a two-column setup */
/* Pages that employ the "mobile-collapse" class will force it down to a one-column setup on narrow screens (e.g. on mobile devices) */
/* This is not to be used on the main page, which employs its own sophisticated code to reduce two columns to one column */
@media screen and (max-width:749px) {
.mobile-collapse {
display: block !important;
width: 100% !important;
margin-bottom:0.6em;
}
#donatebutton {
overflow:scroll;
}
#donate-pullquote,
#donate-otheroptions {
display:none;
}
}
/* Typography */
/* Makes site-wide what has been implemented on a page-by-page basis */
body {
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.firstHeading {
font-weight: 600;
}
@media screen and (min-width:750px) {
div#bodyContent {
font-size:1.05em; padding:0;
}
p {
margin-bottom:1em;
}
h1 {
font-size: 2.4em !important;
}
}
body.page-User_James_Hare_GLAM #siteNotice,
body.page-User_James_Hare_GLAM #firstHeading,
body.page-Internal_Strategic_plan_2015 #siteNotice,
body.page-Internal_Strategic_plan_2015 #firstHeading,
body.page-Strategic_plan_2015 #siteNotice,
body.page-Strategic_plan_2015 #firstHeading,
body.page-Donate #siteNotice,
body.page-Donate #firstHeading {
display:none !important;
}
#megaheader img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
/* Evil interface meddling for donations */
.page-Donate_Monthly_5 #mw-head,
.page-Donate_Monthly_5 .portal,
.page-Donate_Monthly_10 #mw-head,
.page-Donate_Monthly_10 .portal,
.page-Donate_Monthly_25 #mw-head,
.page-Donate_Monthly_25 .portal,
.page-Donate_Monthly_50 #mw-head,
.page-Donate_Monthly_50 .portal,
.page-Donate_Monthly_100 #mw-head,
.page-Donate_Monthly_100 .portal,
.page-Donate_Monthly_200 #mw-head,
.page-Donate_Monthly_200 .portal,
.page-Donate_Annually_5 #mw-head,
.page-Donate_Annually_5 .portal,
.page-Donate_Annually_10 #mw-head,
.page-Donate_Annually_10 .portal,
.page-Donate_Annually_25 #mw-head,
.page-Donate_Annually_25 .portal,
.page-Donate_Annually_50 #mw-head,
.page-Donate_Annually_50 .portal,
.page-Donate_Annually_100 #mw-head,
.page-Donate_Annually_100 .portal,
.page-Donate_Annually_200 #mw-head,
.page-Donate_Annually_200 .portal,
.page-Donate_One-time_5 #mw-head,
.page-Donate_One-time_5 .portal,
.page-Donate_One-time_10 #mw-head,
.page-Donate_One-time_10 .portal,
.page-Donate_One-time_25 #mw-head,
.page-Donate_One-time_25 .portal,
.page-Donate_One-time_50 #mw-head,
.page-Donate_One-time_50 .portal,
.page-Donate_One-time_100 #mw-head,
.page-Donate_One-time_100 .portal,
.page-Donate_One-time_200 #mw-head,
.page-Donate_One-time_200 .portal {
display: none;
}