Difference between revisions of "MediaWiki:Common.css"

From Wikimedia Australia
Jump to navigation Jump to search
(test)
(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)
Line 1: Line 1:
@import url(//brick.a.ssl.fastly.net/Open+Sans:400,600,700);
+
/* CSS placed here will affect users of the Vector skin */
  
.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 {
+
/* For mobile devices */
  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;
+
    The styles below essentially place the navigation menu below the content,
    width: 100% !important;
+
    instead of to the side of it. They also hide the logo, as there's no space
     margin-bottom:0.6em;
+
    left for it.
  }
+
   */
 
+
    #mw-head {
  #donatebutton {
+
        position: static !important;
    overflow:scroll;
+
        margin-top: 0.5em;
  }
+
    }
 
+
    /* Move the panel to the bottom and display it as in-line lists; hide the logo and tabs */
  #donate-pullquote,
+
    div#mw-panel {
  #donate-otheroptions {
+
        display: table;
  display:none;
+
        position: static;
  }
+
        table-layout: fixed;
}
+
        width: 100%;
 
+
        overflow: hidden;
/* Typography */
+
    }
/* Makes site-wide what has been implemented on a page-by-page basis */
+
     div#mw-panel .portal {
 
+
        display: block;
body {
+
        width: 100%;
  font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
        vertical-align: top;
}
+
    }
 
+
     #mw-panel ul li {
.firstHeading {
+
        list-style: none;
  font-weight: 600;
+
    }
}
+
    #mw-panel ul li:before {
 
+
        content: " ◦ ";
@media screen and (min-width:750px) {
+
    }
  div#bodyContent {
+
    #p-logo {
    font-size:1.05em; padding:0;
+
        display: none;
  }
+
    }
  p {
+
    #left-navigation {
    margin-bottom:1em;
+
        display: none;
  }
+
    }
  h1 {
+
    #p-cactions {
    font-size: 2.4em !important;
+
        display: none;
  }
+
    }
}
+
    #p-views {
 
+
        display: none;
body.page-User_James_Hare_GLAM #siteNotice,
+
    }
body.page-User_James_Hare_GLAM #firstHeading,
+
    /* Rearrange various page elements to fill the now-available space */
body.page-Internal_Strategic_plan_2015 #siteNotice,
+
    #p-personal ul {
body.page-Internal_Strategic_plan_2015 #firstHeading,
+
        padding-left: 0;
body.page-Strategic_plan_2015 #siteNotice,
+
    }
body.page-Strategic_plan_2015 #firstHeading,
+
    div#footer {
body.page-Donate #siteNotice,
+
        margin-left: 0;
body.page-Donate #firstHeading {
+
        padding-top: 0;
  display:none !important;
+
    }
}
+
    #p-personal {
 
+
        display: table;
#megaheader img {
+
        position: relative;
  opacity:0;
+
        width: 100%;
  -moz-transition: opacity 2s; /* Firefox 4 */
+
        top: inherit;
  -webkit-transition: opacity 2s; /* Safari and Chrome */
+
        left: inherit;
  -o-transition: opacity 2s;
+
        right: inherit;
  transition: opacity 2s;
+
    }
}
+
    #right-navigation {
 
+
        max-width: 500px;
/* Evil interface meddling for donations */
+
        position: absolute;
 
+
        top: inherit;
.page-Donate_Monthly_5 #mw-head,
+
        margin-top: -1px;
.page-Donate_Monthly_5 .portal,
+
        float: none;
.page-Donate_Monthly_10 #mw-head,
+
    }
.page-Donate_Monthly_10 .portal,
+
    #right-navigation:before {
.page-Donate_Monthly_25 #mw-head,
+
        content: url("https://wikimedia.org.au/w/images/b/bb/Mobile_Logo.png");
.page-Donate_Monthly_25 .portal,
+
    }
.page-Donate_Monthly_50 #mw-head,
+
    #p-search {
.page-Donate_Monthly_50 .portal,
+
        display: none;
.page-Donate_Monthly_100 #mw-head,
+
    }
.page-Donate_Monthly_100 .portal,
+
    div#content {
.page-Donate_Monthly_200 #mw-head,
+
        /* Hide the 1px blue border on the left side */
.page-Donate_Monthly_200 .portal,
+
        border-left: 0;
.page-Donate_Annually_5 #mw-head,
+
        margin-left: 0;
.page-Donate_Annually_5 .portal,
+
    }
.page-Donate_Annually_10 #mw-head,
+
    /* Adjusted Vector Appearance */
.page-Donate_Annually_10 .portal,
+
    body {
.page-Donate_Annually_25 #mw-head,
+
        background-color: #fcfcfc;
.page-Donate_Annually_25 .portal,
+
    }
.page-Donate_Annually_50 #mw-head,
+
    #mw-page-base {
.page-Donate_Annually_50 .portal,
+
        background-color: #fcfcfc;
.page-Donate_Annually_100 #mw-head,
+
        background-image: none;
.page-Donate_Annually_100 .portal,
+
    }
.page-Donate_Annually_200 #mw-head,
+
    div#content {
.page-Donate_Annually_200 .portal,
+
        border: 1px solid #fff;
.page-Donate_One-time_5 #mw-head,
+
    }
.page-Donate_One-time_5 .portal,
+
    div.vectorTabs ul li {
.page-Donate_One-time_10 #mw-head,
+
        background-image: none;
.page-Donate_One-time_10 .portal,
+
        background-color: #fff;
.page-Donate_One-time_25 #mw-head,
+
    }
.page-Donate_One-time_25 .portal,
+
    #p-views, #p-views *, #p-namespaces, #p-namespaces * {
.page-Donate_One-time_50 #mw-head,
+
        background-image: none;
.page-Donate_One-time_50 .portal,
+
    }
.page-Donate_One-time_100 #mw-head,
+
    div.vectorTabs ul li.selected {
.page-Donate_One-time_100 .portal,
+
        font-weight: bold;
.page-Donate_One-time_200 #mw-head,
+
    }
.page-Donate_One-time_200 .portal {
+
    div.vectorTabs ul li span a:hover {
    display: none;
+
        text-decoration: none;
 +
    }
 +
    #catlinks {
 +
        border: none;
 +
        padding: 10px;
 +
    }
 +
    .vectorTabs ul li {
 +
        background-color: #fcfcfc !important;
 +
    }
 +
    #toc {
 +
        border: none;
 +
        padding: 14px;
 +
    }
 +
   
 
}
 
}

Revision as of 21:45, 15 May 2017

/* CSS placed here will affect users of the Vector skin */


/* For mobile devices */

@media screen and (max-width:749px) {
    /*
    The styles below essentially place the navigation menu below the content,
    instead of to the side of it. They also hide the logo, as there's no space
    left for it.
  */
    #mw-head {
        position: static !important;
        margin-top: 0.5em;
    }
    /* Move the panel to the bottom and display it as in-line lists; hide the logo and tabs */
    div#mw-panel {
        display: table;
        position: static;
        table-layout: fixed;
        width: 100%;
        overflow: hidden;
    }
    div#mw-panel .portal {
        display: block;
        width: 100%;
        vertical-align: top;
    }
    #mw-panel ul li {
        list-style: none;
    }
    #mw-panel ul li:before {
        content: "	◦	";
    }
    #p-logo {
        display: none;
    }
    #left-navigation {
        display: none;
    }
    #p-cactions {
        display: none;
    }
    #p-views {
        display: none;
    }
    /* Rearrange various page elements to fill the now-available space */
    #p-personal ul {
        padding-left: 0;
    }
    div#footer {
        margin-left: 0;
        padding-top: 0;
    }
    #p-personal {
        display: table;
        position: relative;
        width: 100%;
        top: inherit;
        left: inherit;
        right: inherit;
    }
    #right-navigation {
        max-width: 500px;
        position: absolute;
        top: inherit;
        margin-top: -1px;
        float: none;
    }
    #right-navigation:before {
        content: url("https://wikimedia.org.au/w/images/b/bb/Mobile_Logo.png");
    }
    #p-search {
        display: none;
    }
    div#content {
        /* Hide the 1px blue border on the left side */
        border-left: 0;
        margin-left: 0;
    }
    /* Adjusted Vector Appearance */
    body {
        background-color: #fcfcfc;
    }
    #mw-page-base {
        background-color: #fcfcfc;
        background-image: none;
    }
    div#content {
        border: 1px solid #fff;
    }
    div.vectorTabs ul li {
        background-image: none;
        background-color: #fff;
    }
    #p-views, #p-views *, #p-namespaces, #p-namespaces * {
        background-image: none;
    }
    div.vectorTabs ul li.selected {
        font-weight: bold;
    }
    div.vectorTabs ul li span a:hover {
        text-decoration: none;
    }
    #catlinks {
        border: none;
        padding: 10px;
    }
    .vectorTabs ul li {
        background-color: #fcfcfc !important;
    }
    #toc {
        border: none;
        padding: 14px;
    }
    
}