MediaWiki:Mobile.css: Difference between revisions

MediaWiki:Mobile.css (view source)

Revision as of 12:00, 2 August 2024

3,052 bytes added , 3 months ago

no edit summary

Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Suppressors, Administrators

6,161

edits

@@ Line 6: / Line 6: @@
    display: none !important;
 }
 /*remove header on Main_Page*/
@@ Line 16: / Line 15: @@
 .infobox th {
     text-align: center;
 }
 /** TABLES **/
 /* KTV Table */
-  .table.ktv-table > :first-child > tr:first-child,
+.table.ktv-table > :first-child > tr:first-child,
-  .table.ktv-table > tbody > tr.heading,
+.table.ktv-table > tbody > tr.heading,
-  .table.ktv-table > :first-child > tr:first-child > *,
+.table.ktv-table > :first-child > tr:first-child > *,
-  .table.ktv-table > tbody > tr.heading > * {
+.table.ktv-table > tbody > tr.heading > * {
-    background-color:#522F65!important;
+  background-color: #522F65 !important;
-    border-color:#777d9e!important;
+  border-color: #777d9e !important;
+}
+.table.ktv-table > tbody > tr:nth-child(odd),
+.table > tbody > tr.ktv-table:nth-child(odd) {
+  background-color: #dfe1ec;
+}
+/* General Mobile Enhancements */
+/* Make buttons full width on mobile */
+.button, input[type="submit"], input[type="button"] {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+}
+/* Ensure images are responsive */
+img {
+  max-width: 100%;
+  height: auto;
+}
+/* Adjust padding and margins for better readability */
+body {
+  padding: 10px;
+  margin: 0;
+  font-size: 16px;
+}
+/* Make sure tables are responsive */
+table {
+  width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+/* Adjust infobox width */
+.infobox {
+  width: 100%;
+  margin: 10px 0;
+  box-sizing: border-box;
+}
+/* Improve readability of text */
+p {
+  margin-bottom: 15px;
+  line-height: 1.5;
+}
+/* Ensure form elements are responsive */
+input[type="text"], input[type="password"], textarea {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+/* Navigation Enhancements */
+nav#p-namespaces div.vector-menu-content,
+nav#p-views div.vector-menu-content,
+nav#p-navigation div.vector-menu-content,
+nav#p-tb div.vector-menu-content {
+  width: 100%;
+}
+nav#p-namespaces div.vector-menu-content > ul.vector-menu-content-list,
+nav#p-views div.vector-menu-content > ul.vector-menu-content-list,
+nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list,
+nav#p-tb div.vector-menu-content > ul.vector-menu-content-list {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+nav#p-namespaces div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a,
+nav#p-views div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a,
+nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a,
+nav#p-tb div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a {
+  padding: 10px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+/* Footer Improvements */
+.footer {
+  padding: 10px;
+  font-size: 14px;
+}
+/* Add some space between content sections */
+.section {
+  margin-bottom: 20px;
+}
+/* Ensure links are easy to tap */
+a {
+  padding: 5px 0;
+  display: inline-block;
+}
+a:hover {
+  background-color: #e3d4f3;
+  color: #5a1d8a;
+}
+/* Media Queries for Specific Mobile Adjustments */
+@media (max-width: 768px) {
+  .mw-body {
+    padding: 15px;
+  }
+  .infobox {
+    float: none;
+    margin-left: 0;
+    width: 100%;
+  }
+  nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a,
+  nav#p-tb div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a {
+    padding: 10px 10px;
    }
+}
-  .table.ktv-table > tbody > tr:nth-child(odd),
-   .table > tbody > tr.ktv-table:nth-child(odd) {
+@media (max-width: 480px) {
-     background-color:#dfe1ec;
+   .header, .footer {
+     padding: 5px;
    }
+  .button, input[type="submit"], input[type="button"] {
+    padding: 10px;
+  }
+  nav#p-namespaces div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a,
+  nav#p-views div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a,
+  nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a,
+  nav#p-tb div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a {
+    padding: 8px;
+  }
+}