MediaWiki:Gadget-mobileVectorBase.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (â-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (â-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/*
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.
This is partly from
@deviceWidthTablet is a bit too large for most people. use 700px instead.
You also need a hack in JS, to adapt the viewport scaling on mobile devices.
*/
@media only screen and (max-width:600px) and (orientation: portrait) {
#siteSub,
#ca-mobile,
div.vectorTabs li.selected.selected,
.after-portlet-lang,
.uls-settings-trigger {
display:none;
}
div#mw-head {
position: static !important;
margin-top: 0.5em;
}
/* Move the panel to the bottom and display it as in-line lists */
div#mw-navigation div#mw-panel {
display: table;
position: static;
table-layout: fixed;
width: 100%;
overflow: hidden;
font-size: 150%;
box-sizing: border-box;
background-color: #f6f6f6;
-webkit-transition: width 2s;
}
div#mw-navigation div#mw-panel.menu-closed {
display: none;
position:initial;
width: 0;
}
div#mw-navigation div#mw-panel.menu-opened {
display: table;
position: absolute;
top: 3em;
}
div#mw-navigation div#mw-panel .portal {
display: block;
width: 100%;
box-sizing: border-box;
}
div#mw-navigation div#mw-panel ul li {
list-style: none;
}
/* Hide the logo and tabs */
div#p-logo {
display: none;
}
.mw-panel-toggle {
position:absolute;
top:0;
left:0;
}
/* Rearrange various page elements to fill the now-available space */
body div#footer {
margin-left: 0;
padding-top: 0;
}
/* don't need these in the footer either... */
body div#footer li#footer-info-lastmod,
body div#footer li#footer-info-viewcount {
display: none;
}
#p-personal {
display: table;
position: absolute;
top: 0;
right: 0;
}
.client-js #p-personal ul {
padding-left: 0;
display: none;
background-color: white;
border: solid 1px silver;
border-top-width: 0;
border-right-width: 0;
text-align: left;
}
.client-js #p-personal:focus ul,
.client-js #p-personal:hover ul,
.client-js #p-personal.menu-opened ul {
cursor: pointer;
display: block;
}
div#right-navigation {
position: absolute;
top: inherit;
right: 0;
margin-top: 0;
float: none;
}
div#left-navigation {
position: absolute;
top: inherit;
margin: 0;
display: block;
float: none;
}
#p-namespaces,
#p-views,
#p-variants {
position: relative;
top: 2.5em;
}
#p-namespaces {
padding-left: 0;
}
#p-cactions,
div#p-twinkle {
top: 2.5em;
float: right;
}
div#p-search {
float: none;
position: absolute;
right: 0;
/*width: 100vw;*/
margin: 0;
box-sizing: border-box;
}
div#simpleSearch {
margin: 0 40px;
width: auto !important;
padding: 0;
}
div.vectorMenu div.menu {
left: inherit;
right: -1px;
}
div#content {
/* Hide the 1px blue border on the left side */
border-left: 0;
margin-left: 0;
padding: 1em 0.3em;
}
.read-more-container {
margin: 0;
}
div#mw-panel {
font-size: 100% !important;
}
#p-personal h3 {
font-size: 0.75em;
color: #4d4d4d;
font-weight: normal;
margin: 0;
padding: 0.25em 0 0.25em 0.25em;
border: none;
display: block;
}
.client-js #p-personal li {
float: none;
margin: 0.75em 0.5em;
}
.client-js #p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice {
margin: 0 0.2em;
display: inline-block;
}
.client-js #p-personal-label {
background-image: linear-gradient(transparent, transparent), url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2212px%22%20height%3D%2213.836px%22%20viewBox%3D%220%200%2012%2013.836%22%20enable-background%3D%22new%200%200%2012%2013.836%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M1.938%2C6.656c-1.32%2C1.485-1.47%2C3.15-0.97%2C4.25c0.323%2C0.707%2C0.78%2C1.127%2C1.313%2C1.375%0A%09c0.496%2C0.229%2C1.074%2C0.273%2C1.658%2C0.282c0.023%2C0%2C0.04%2C0.03%2C0.062%2C0.03h4.187c0.61%2C0%2C1.225-0.125%2C1.75-0.405%0A%09c0.527-0.28%2C0.961-0.718%2C1.188-1.376c0.335-0.964%2C0.175-2.529-1.094-4.03C9.094%2C7.954%2C7.68%2C8.719%2C6.065%2C8.719%0A%09c-1.677%2C0-3.182-0.812-4.125-2.063H1.938z%22%2F%3E%0A%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M6.063%2C0c-1.89%2C0-3.595%2C1.674-3.594%2C3.563C2.467%2C5.45%2C4.173%2C7.155%2C6.06%2C7.155%0A%09c1.89%2C0%2C3.564-1.705%2C3.563-3.593C9.625%2C1.673%2C7.95%2C0%2C6.063%2C0L6.063%2C0z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
background-repeat: no-repeat;
background-size: 25px 25px;
cursor: pointer;
height: 30px;
margin: 5px !important;
background-position: right top;
/* hide the text */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#pt-userpage, #pt-anonuserpage {
background-image: none !important;
padding-left: 0 !important;
}
}
@media only screen and (min-width:600px) {
.mw-panel-toggle {
display:none;
}
}