MediaWiki: Vector.css
(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 { | |||
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 { | |||
/* 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 11: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;
}
}