Majestix: 1 revision imported: Initial Setup

2026-04-09T11:10:27Z

1 revision imported: Initial Setup

← Older revision		Revision as of 13:10, 9 April 2026
(No difference)

en>Jon (WMF): https://phabricator.wikimedia.org/T252467

2020-06-05T19:04:25Z

https://phabricator.wikimedia.org/T252467

New page

/*
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;
}
}

MediaWiki:Gadget-mobileVectorBase.css - Revision history

Majestix: 1 revision imported: Initial Setup

en>Jon (WMF): https://phabricator.wikimedia.org/T252467