Difference between revisions of "MediaWiki:Vector.css"
Jump to navigation
Jump to search
James Hare (talk | contribs) (Working) |
James Hare (talk | contribs) (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;
}