Difference between revisions of "MediaWiki:Vector.css"

From WikiConference North America
Jump to navigation Jump to search
(Working)
(Importing mobile stuff from WMDC website)
Line 1: Line 1:
  +
@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("http://wikimediadc.org/w/images/6/60/Mobile_logo.svg");
  +
}
  +
#p-search {
  +
margin-left: 73px;
  +
margin-top: -1.5em;
  +
}
  +
div#content {
  +
/* Hide the 1px blue border on the left side */
  +
border-left: 0;
  +
margin-left: 0;
  +
}
  +
}
  +
  +
/* Vector Flat */
  +
 
body {
 
body {
 
background-color: #fcfcfc;
 
background-color: #fcfcfc;

Revision as of 03:07, 15 March 2015

@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("http://wikimediadc.org/w/images/6/60/Mobile_logo.svg");
  }
  #p-search {
    margin-left: 73px;
    margin-top: -1.5em;
  }
  div#content {
    /* Hide the 1px blue border on the left side */
    border-left: 0;
    margin-left: 0;
  }
}

/* Vector Flat */

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  {
        border-bottom: 2px solid #347bff;
}
div.vectorTabs ul li span a:hover {
        text-decoration: none;
}
#catlinks {
        border:none;
        padding:10px;
}

.vectorTabs ul li {
        background-color: #fcfcfc !important;
}