MediaWiki:Mobile.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-h2, h3, h4 {color:red;background-color:blue}
+/* Cleaned MediaWiki:Mobile.css
+   Minimal mobile-specific styles only
+*/
-body {
+/* Base page adjustments for mobile */
-  background-color: lightgrey;
-  color: blue;
-}
-h1 {
-  background-color: black;
-  color: white;
-}
 @media (max-width: 800px) {
+  /* Hide desktop sidebars on narrow viewports */
    #mw-panel, .mw-sidebar, .vectorSidebar {
      display: none !important;
    }
+  /* Ensure content uses full width on mobile */
    #content, #mw-content-text {
      margin-left: 0 !important;
@@ Line 19: / Line 16: @@
    }
 }
 /* Tame the Minerva logo/title and make the clickable area comfortable */
 @media (max-width: 800px) {
@@ Line 44: / Line 42: @@
 }
-/* Mobile custom hamburger + overlay (max-width 800px) */
+/* Small accessibility and touch targets */
 @media (max-width: 800px) {
-   .custom-mobile-hamburger {
+   .minerva-header a, .minerva-header .minerva-logo-link {
-     position: absolute;
+     -webkit-tap-highlight-color: rgba(0,0,0,0.08);
-    left: 0.5rem;
+     touch-action: manipulation;
-    top: 0.5rem;
-    z-index: 9998;
-    width: 40px;
-    height: 40px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    color: #fff;
-    font-size: 22px;
-     text-decoration: none;
    }
+}
-  .custom-mobile-overlay {
+/* Light visual reset to avoid heavy defaults bleeding into mobile */
-    position: fixed;
+@media (max-width: 800px) {
-    inset: 0;
+   /* Keep headings readable without forcing color schemes */
-    background: rgba(0,0,0,0.45);
+   .minerva-header h1, .minerva-header h2 {
-    z-index: 9997;
+     margin: 0;
-    display: none;
+     font-weight: 600;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding-top: 56px;
-  }
-  .custom-mobile-panel {
-    background: #fff;
-    width: 84%;
-    max-width: 320px;
-    height: 100%;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
-    padding: 0.5rem 0;
-    overflow-y: auto;
-   }
-  .custom-mobile-panel a {
-    display: block;
-    padding: 0.75rem 1rem;
-    color: #0645AD;
-    text-decoration: none;
-    border-bottom: 1px solid #eee;
-  }
-   .custom-mobile-panel a:hover {
-    background: #f6f8fb;
-  }
-  .custom-mobile-close {
-     display: block;
-    padding: 0.5rem;
-    text-align: right;
-     font-size: 18px;
-    color: #333;
    }
 }