MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / skins / vector / responsive.less

diff --git a/skins/vector/responsive.less b/skins/vector/responsive.less
new file mode 100644 (file)
index 0000000..4bddc4e
--- /dev/null
+++ b/skins/vector/responsive.less
@@ -0,0 +1,110 @@
+/*
+       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.
+*/
+
+@media screen and ( max-width: @deviceWidthTablet ) {
+       div#mw-head {
+               position: static !important; /* stylelint-disable-line declaration-no-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%;
+
+                       .portal {
+                               display: block;
+                               width: 100%;
+                       }
+
+                       ul li {
+                               list-style: none;
+                       }
+               }
+       }
+
+       /* Hide the logo and tabs */
+       div#p-logo {
+               display: none;
+       }
+
+       /* 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... */
+               li#footer-info-lastmod,
+               li#footer-info-viewcount {
+                       display: none;
+               }
+       }
+       div#p-personal {
+               display: table;
+               position: relative;
+               width: 100%;
+               top: inherit;
+               left: inherit;
+               right: inherit;
+
+               ul {
+                       padding-left: 0;
+               }
+       }
+       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;
+       }
+       div#p-namespaces,
+       div#p-views,
+       div#p-variants {
+               position: relative;
+               top: 2.5em;
+       }
+       div#p-namespaces {
+               padding-left: 0;
+       }
+       div#p-cactions {
+               top: 2.5em;
+               float: right;
+       }
+       div#p-search {
+               float: none;
+               position: absolute;
+               right: 0;
+               width: 100vw;
+               margin: 0;
+       }
+       div#simpleSearch {
+               margin: 0 3em;
+               width: 80vw;
+               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;
+       }
+}