MediaWiki:Gadget-mobileVectorBase.css
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
- Opera：按 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;
}
}