Difference between revisions of "MediaWiki:Common.css"

From Wikimedia District of Columbia
Jump to navigation Jump to search
(Making main page image take up entire width of container)
(Having the blog post title superimposed on the image is only practical at large enough resolutions; otherwise, it blocks out the image. So I'm disabling it at lower resolutions.)
Line 198: Line 198:
 
.main-page-box {
 
.main-page-box {
 
background:white; padding:1em; border:none; border:1px solid #CCCCCC; margin-bottom:2em;
 
background:white; padding:1em; border:none; border:1px solid #CCCCCC; margin-bottom:2em;
  +
}
  +
  +
@media screen and (min-width:750px) {
  +
.main-page-feature-title {
  +
position: absolute; top:0; left:0; border:0; padding:0.75em; color:#FFF; background-color:#006699; opacity:0.85;
  +
}
 
}
 
}
   

Revision as of 02:44, 24 July 2013

.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-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;
}

.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;
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;
}

/* Button classes from wikimediafoundation.org */

.btn{display:inline-block;padding:4px 10px 4px;font-size:13px;line-height:18px;color:#333333;text-align:center;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#fafafa;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;*margin-left:.3em;}.btn:first-child{*margin-left:0;}
.btn:hover{color:#333333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}
.btn:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
.btn.active,.btn:active{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;color:rgba(0, 0, 0, 0.5);outline:0;}
.btn.disabled,.btn[disabled]{cursor:default;background-image:none;background-color:#e6e6e6;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-large{padding:9px 14px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.btn-large .icon{margin-top:1px;}
.btn-small{padding:5px 9px;font-size:11px;line-height:16px;}
.btn-small .icon{margin-top:-1px;}
.btn-primary,.btn-primary:hover,.btn-warning,.btn-warning:hover,.btn-danger,.btn-danger:hover,.btn-success,.btn-success:hover,.btn-info,.btn-info:hover{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);color:#ffffff;}
.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active{color:rgba(255, 255, 255, 0.75);}
.btn-primary{background-color:#006dcc;background-image:-moz-linear-gradient(top, #0088cc, #0044cc);background-image:-ms-linear-gradient(top, #0088cc, #0044cc);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));background-image:-webkit-linear-gradient(top, #0088cc, #0044cc);background-image:-o-linear-gradient(top, #0088cc, #0044cc);background-image:linear-gradient(top, #0088cc, #0044cc);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);border-color:#0044cc #0044cc #002a80;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{background-color:#0044cc;}
.btn-primary:active,.btn-primary.active{background-color:#003399 \9;}
.btn-warning{background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-ms-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(top, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{background-color:#f89406;}
.btn-warning:active,.btn-warning.active{background-color:#c67605 \9;}
.btn-danger{background-color:#da4f49;background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);background-image:-ms-linear-gradient(top, #ee5f5b, #bd362f);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);background-image:linear-gradient(top, #ee5f5b, #bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{background-color:#bd362f;}
.btn-danger:active,.btn-danger.active{background-color:#942a25 \9;}
.btn-success{background-color:#5bb75b;background-image:-moz-linear-gradient(top, #62c462, #51a351);background-image:-ms-linear-gradient(top, #62c462, #51a351);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));background-image:-webkit-linear-gradient(top, #62c462, #51a351);background-image:-o-linear-gradient(top, #62c462, #51a351);background-image:linear-gradient(top, #62c462, #51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{background-color:#51a351;}
.btn-success:active,.btn-success.active{background-color:#408140 \9;}
.btn-info{background-color:#49afcd;background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);background-image:-ms-linear-gradient(top, #5bc0de, #2f96b4);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);background-image:linear-gradient(top, #5bc0de, #2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{background-color:#2f96b4;}
.btn-info:active,.btn-info.active{background-color:#24748c \9;}
button.btn,input[type="submit"].btn{*padding-top:2px;*padding-bottom:2px;}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0;}
button.btn.large,input[type="submit"].btn.large{*padding-top:7px;*padding-bottom:7px;}
button.btn.small,input[type="submit"].btn.small{*padding-top:3px;*padding-bottom:3px;}
.btn-donate {width:60px; color:white !important; font-size:200% !important; margin:0.1em;}
.btn-membership {width:175px; color:white !important; font-size:200% !important; margin:0.1em;}
.btn-basic {background-color: #006DCC !important; background-image:none !important;}
.btn-bronze {background-color: #CB7D2B !important; background-image:none !important;}
.btn-silver {background-color: #939191 !important; background-image:none !important;}
.btn-gold {background-color: #E5B921 !important; background-image: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;
}

/* Tab bar formatting */

.tabbar-red td:hover {
    background: #EDDEDE !important;
}

.tabbar-green td:hover {
    background: #DEEDE6 !important;
}

.tabbar-blue td:hover {
    background: #DEE7ED !important;
}

.tabbar-gray td:hover {
    background: #E6E6E6 !important;
}

/* Arrow button formatting */

.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;
}

/* Main Page CSS */

body #t-cite,
body #siteSub,
body.page-Home.action-view #contentSub,
body.page-Home.action-view h1.firstHeading,
body.page-Home.action-view #jump-to-nav {
  display: none !important;
}

@media screen and (min-width:1184px) {
  #main-page-left {
    margin-right:32em;
  }
  #main-page-right {
    float:right;
    width:40%;
    max-width:30em;
  }
}

@media screen and (min-width:750px) and (max-width:1183px) {
  #main-page-left {
    float:left;
    width:57%;
  }
  #main-page-right {
    float:right;
    width:40%;
    max-width:30em;
  }
}

@media screen and (max-width:749px) {
  #main-page-left {
    display:inline;
  }
  #main-page-right {
    display:inline;
  }
}

.main-page-box {
  background:white; padding:1em; border:none; border:1px solid #CCCCCC; margin-bottom:2em;
}

@media screen and (min-width:750px) {
  .main-page-feature-title {
    position: absolute; top:0; left:0; border:0; padding:0.75em; color:#FFF; background-color:#006699; opacity:0.85;
  }
}

/* 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;
  }
}

.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;
  }
}