summaryrefslogtreecommitdiffstats
path: root/skins/Vector/responsive.less
diff options
context:
space:
mode:
Diffstat (limited to 'skins/Vector/responsive.less')
-rw-r--r--skins/Vector/responsive.less108
1 files changed, 108 insertions, 0 deletions
diff --git a/skins/Vector/responsive.less b/skins/Vector/responsive.less
new file mode 100644
index 0000000..ac483d3
--- /dev/null
+++ b/skins/Vector/responsive.less
@@ -0,0 +1,108 @@
+/*
+ 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.
+*/
+
+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%;
+
+ .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;
+}