Difference between revisions of "MediaWiki:Vector.css"

From Wikimedia Australia
Jump to navigation Jump to search
(update)
(remove mixed content, impact on desktop display; hide buggy search box- Quick fix only: this markup could use a re-write.)
 
Line 1: Line 1:
 
/* CSS placed here will affect users of the Vector skin */
 
/* CSS placed here will affect users of the Vector skin */
 +
  
 
/* For mobile devices */
 
/* For mobile devices */
  
 
@media screen and (max-width:749px) {
 
@media screen and (max-width:749px) {
 
+
    /*
  /*
 
 
     The styles below essentially place the navigation menu below the content,
 
     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
 
     instead of to the side of it. They also hide the logo, as there's no space
 
     left for it.
 
     left for it.
 
   */
 
   */
 
+
    #mw-head {
  #mw-head {
+
        position: static !important;
    position:static !important;
+
        margin-top: 0.5em;
    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 {
  /* Move the panel to the bottom and display it as in-line lists; hide the logo and tabs */
+
        display: table;
  div#mw-panel {
+
        position: static;
    display: table;
+
        table-layout: fixed;
    position: static;
+
        width: 100%;
    table-layout: fixed;
+
        overflow: hidden;
    width: 100%;
+
    }
    overflow: hidden;
+
    div#mw-panel .portal {
  }
+
        display: block;
  div#mw-panel .portal {
+
        width: 100%;
    display: block;
+
        vertical-align: top;
    width:100%;
+
    }
    vertical-align: top;
+
    #mw-panel ul li {
  }
+
        list-style: none;
  #mw-panel ul li {
+
    }
    list-style:none;
+
    #mw-panel ul li:before {
  }
+
        content: " ◦ ";
  #mw-panel ul li:before {
+
    }
    content: " ◦ ";
+
    #p-logo {
  }
+
        display: none;
  #p-logo {
+
    }
    display: none;
+
    #left-navigation {
  }
+
        display: none;
  #left-navigation {
+
    }
    display:none;
+
    #p-cactions {
  }
+
        display: none;
  #p-cactions {
+
    }
  display:none;
+
    #p-views {
  }
+
        display: none;
  #p-views {
+
    }
    display:none;
+
    /* Rearrange various page elements to fill the now-available space */
  }
+
    #p-personal ul {
 
+
        padding-left: 0;
  /* Rearrange various page elements to fill the now-available space */
+
    }
  #p-personal ul {
+
    div#footer {
    padding-left: 0;
+
        margin-left: 0;
  }
+
        padding-top: 0;
  div#footer {
+
    }
    margin-left: 0;
+
    #p-personal {
    padding-top: 0;
+
        display: table;
  }
+
        position: relative;
  #p-personal {
+
        width: 100%;
    display:table;
+
        top: inherit;
    position:relative;
+
        left: inherit;
    width:100%;
+
        right: inherit;
    top:inherit;
+
    }
    left:inherit;
+
    #right-navigation {
    right:inherit;
+
        max-width: 500px;
  }
+
        position: absolute;
  #right-navigation {
+
        top: inherit;
    max-width:500px;
+
        margin-top: -1px;
    position:absolute;
+
        float: none;
    top:inherit;
+
    }
    margin-top:-1px;
+
    #right-navigation:before {
    float:none;
+
        content: url("https://wikimedia.org.au/w/images/b/bb/Mobile_Logo.png");
  }
+
    }
  #right-navigation:before {
+
    #p-search {
    content:url("http://wikimedia.org.au/w/images/b/bb/Mobile_Logo.png");
+
        display: none;
  }
+
     }
  #p-search {
+
    div#content {
    margin-left: 73px;
+
        /* Hide the 1px blue border on the left side */
     margin-top: -1.5em;
+
        border-left: 0;
  }
+
        margin-left: 0;
  div#content {
+
    }
    /* Hide the 1px blue border on the left side */
+
    /* Adjusted Vector Appearance */
    border-left: 0;
+
    body {
    margin-left: 0;
 
  }
 
}
 
 
 
/* Adjusted Vector Appearance */
 
body {
 
 
         background-color: #fcfcfc;
 
         background-color: #fcfcfc;
}
+
    }
 
+
    #mw-page-base {
#mw-page-base {
 
 
         background-color: #fcfcfc;
 
         background-color: #fcfcfc;
 
         background-image: none;
 
         background-image: none;
}
+
    }
div#content {
+
    div#content {
 
         border: 1px solid #fff;
 
         border: 1px solid #fff;
}
+
    }
div.vectorTabs ul li {
+
    div.vectorTabs ul li {
 
         background-image: none;
 
         background-image: none;
 
         background-color: #fff;
 
         background-color: #fff;
}
+
    }
#p-views, #p-views *, #p-namespaces, #p-namespaces * {
+
    #p-views, #p-views *, #p-namespaces, #p-namespaces * {
 
         background-image: none;
 
         background-image: none;
}
+
    }
div.vectorTabs ul li.selected {
+
    div.vectorTabs ul li.selected {
         font-weight:bold;
+
         font-weight: bold;
}
+
    }
div.vectorTabs ul li span a:hover {
+
    div.vectorTabs ul li span a:hover {
 
         text-decoration: none;
 
         text-decoration: none;
}
+
    }
#catlinks {
+
    #catlinks {
         border:none;
+
         border: none;
         padding:10px;
+
         padding: 10px;
}
+
    }
 
+
    .vectorTabs ul li {
.vectorTabs ul li {
 
 
         background-color: #fcfcfc !important;
 
         background-color: #fcfcfc !important;
}
+
    }
 
+
    #toc {
#toc {
+
         border: none;
         border:none;
+
         padding: 14px;
         padding:14px;
+
    }
 +
   
 
}
 
}

Latest revision as of 22:47, 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;
    }
    
}