MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 19:01, 24 February 2026


.portable-infobox {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}


.portable-infobox .wds-tabs__wrapper {
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.portable-infobox .pi-image img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

@media screen and (max-width: 450px) {
    .portable-infobox .pi-data {
        display: block !important;
    }
    .portable-infobox .pi-data-label {
        width: 100% !important;
        text-align: left !important;
        padding-bottom: 2px;
    }
    .portable-infobox .pi-data-value {
        width: 100% !important;
        text-align: left !important;
        padding-left: 10px;
    }
}

@@ Line 1: / Line 1: @@
-.mw-logo-wordmark {
+.portable-infobox {
-     display: none !important;
+    float: none !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 1em 0 !important;
+    box-sizing: border-box !important;
+     display: block !important;
 }
-.mw-anon-user #vector-page-tools-dropdown,
-.mw-anon-user #p-tb,
-.mw-anon-user .vector-column-end {
-    display: none !important;
-}
-.mw-page-container,
-.mw-content-container,
-.vector-sticky-header {
-    max-width: none !important;
-}
-.mw-logo-icon {
-    width: 160px !important;
-    height: 160px !important;
-}
-/* Full-width banner at the absolute top, behind everything */
-body {
-    background-image: url('https://wiki.thehumanserver.org/images/9/9e/Wiki_background_top.png');
-    background-repeat: no-repeat;
-    background-position: center top;
-    background-size: 100% auto; /* Forces image to fit screen width */
-    background-attachment: scroll; /* Use 'fixed' if you want it to stay when scrolling */
-}
-/* Vector-2022 Specific: Make the skin's main containers transparent to reveal the banner */
+.portable-infobox .wds-tabs__wrapper {
-.mw-page-container,
+     overflow-x: auto !important;
-.mw-header,
+     white-space: nowrap !important;
-.vector-sticky-header {
+     width: 100% !important;
-     background-color: transparent !important;
-}
-/* Optional: Add space at the top so the banner isn't covered by the logo/search bar */
-.mw-header {
-     margin-top: 20px; /* Adjust this value to the height of your banner */
-}
-#content {
-    background-color: #2f2f2f; /* Makes content semi-transparent */
-}
-/* Make the top-right personal tools larger and stick to the corner */
-.vector-user-links {
-    position: fixed;
-    top: 10px;
-    right: 20px;
-    z-index: 1000;
-    transform: scale(1.2);
-    transform-origin: top right;
-    background: rgba(0, 0, 0, 0.5);
-    padding: 5px 10px;
-    border-radius: 8px;
-}
-/* Adjust icons specifically if they look blurry after scaling */
-.vector-user-links .vector-icon {
-     width: 24px;  /* Increase base icon size */
-    height: 24px;
-}
-/* Change all links to silver */
-a {
-    color: #d1d1d1 !important; /* You can also use the hex code #C0C0C0 */
 }
-/* Optional: Change color for visited links to stay silver */
+.portable-infobox .pi-image img {
-a:visited {
+    max-width: 100% !important;
-     color: silver !important;
+    height: auto !important;
+     width: auto !important;
 }
-/* Optional: Slightly brighter silver or a different effect on hover */
+@media screen and (max-width: 450px) {
-a:hover {
+    .portable-infobox .pi-data {
-     color: #e0e0e0 !important;
+        display: block !important;
-    text-decoration: underline;
+    }
+    .portable-infobox .pi-data-label {
+        width: 100% !important;
+        text-align: left !important;
+        padding-bottom: 2px;
+    }
+     .portable-infobox .pi-data-value {
+        width: 100% !important;
+        text-align: left !important;
+        padding-left: 10px;
+    }
 }