MediaWiki:Common.css: differenze tra le versioni

Estratto da "https://wiki.marcoparet.com/wiki/MediaWiki:Common.css"

@@ Riga 1: / Riga 1: @@
 /* ============================================================
-  * Common.css — Wiki Methode Paret
+  * Common.css v2 — Wiki Methode Paret
   * ============================================================
-  * Responsive fixes per Vector-2022 e fallback mobile.
+  * Responsive AGGRESSIVO. Anche se viene servito Vector desktop
-  * Se per qualche motivo l'utente mobile finisce su Vector,
+  * su uno schermo piccolo, il layout deve restare leggibile.
-  * almeno il contenuto è leggibile.
+  * Breakpoint: 1100px (più aggressivo del classico 768)
   * ============================================================ */
-/* TABELLE: scroll orizzontale su mobile invece di rompere il layout */
+/* ──────────── BREAKPOINT 1100px ──────────── */
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1100px) {
-     /* Wrap forzato per tabelle larghe */
-     .mw-parser-output table {
+    /* Nascondi sidebar Vector */
+    #mw-panel,
+    .mw-sidebar-action,
+    .vector-sticky-pinned-container,
+    .vector-toc,
+    #vector-toc,
+    .vector-page-tools-pinned,
+    .vector-page-tools,
+    .vector-main-menu-pinned {
+        display: none !important;
+    }
+    /* Content prende tutta la larghezza */
+    .mw-body,
+    #content,
+    .mw-content-container,
+    .vector-body,
+    main {
+        margin-left: 8px !important;
+        margin-right: 8px !important;
+        padding: 8px !important;
+        max-width: 100% !important;
+        width: auto !important;
+    }
+    .mw-page-container,
+    .mw-page-container-inner {
+        max-width: 100% !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+    /* Tab di navigazione (Pagina principale | Discussione | etc.) compatti */
+    .vector-page-titlebar,
+    #p-namespaces,
+    #p-views,
+    .vector-menu-tabs {
+        font-size: 13px !important;
+        flex-wrap: wrap !important;
+    }
+     /* Tabelle: scroll orizzontale */
+     .mw-parser-output table:not(.navbox):not(.infobox) {
          display: block !important;
          overflow-x: auto !important;
          max-width: 100% !important;
          -webkit-overflow-scrolling: touch;
+        white-space: normal !important;
      }
-     /* Tabelle navigation-style: stack verticale */
+     /* Cell content responsive */
-     .mw-parser-output table.wikitable td {
+     .mw-parser-output table.wikitable td,
-         max-width: 100% !important;
+    .mw-parser-output table.wikitable th {
+         max-width: 90vw !important;
          word-wrap: break-word !important;
+        white-space: normal !important;
+        font-size: 13px !important;
+        padding: 6px !important;
      }
-     /* Heading più compatti */
+     /* Heading compatti */
-     .mw-parser-output h1 { font-size: 1.5em !important; }
+     .mw-parser-output h1 { font-size: 1.6em !important; line-height: 1.2 !important; }
-     .mw-parser-output h2 { font-size: 1.3em !important; }
+     .mw-parser-output h2 { font-size: 1.3em !important; line-height: 1.2 !important; }
-     .mw-parser-output h3 { font-size: 1.15em !important; }
+     .mw-parser-output h3 { font-size: 1.15em !important; line-height: 1.2 !important; }
-    /* Body font più leggibile */
+     body { font-size: 16px !important; line-height: 1.5 !important; }
-     body { font-size: 16px !important; }
+     .mw-parser-output p { line-height: 1.55 !important; margin: 0.8em 0 !important; }
-     .mw-parser-output p { line-height: 1.5 !important; }
-     /* Sidebar nascosta su mobile se per qualche motivo è renderizzata */
+     /* Header Vector */
-    #mw-panel,
+     .vector-header {
-     .mw-sidebar-action,
+        flex-wrap: wrap !important;
-    .vector-sticky-pinned-container {
+         padding: 5px !important;
-         display: none !important;
      }
-     /* Content prende tutta la larghezza */
+     /* Search box adattivo */
-     .mw-body,
+     #p-search,
-    #content,
+     .vector-search-box {
-     .mw-content-container,
+         width: 100% !important;
-    main {
-         margin-left: 0 !important;
-        margin-right: 0 !important;
-        padding: 10px !important;
          max-width: 100% !important;
+    }
+}
+/* ──────────── BREAKPOINT 768px (smartphone vero) ──────────── */
+@media screen and (max-width: 768px) {
+    /* La tabella big "I tre assi" in homepage: COLLAPSE in stack */
+    .mw-parser-output table.wikitable {
+        font-size: 12px !important;
      }
-    /* Disable hover sidebars */
+     .mw-parser-output table.wikitable tr {
-     .vector-toc { display: none !important; }
+        display: block !important;
+        margin-bottom: 10px !important;
+        border: 1px solid #ccc !important;
+    }
-     /* Container width 100% */
+     .mw-parser-output table.wikitable td,
-     .mw-page-container {
+    .mw-parser-output table.wikitable th {
+        display: block !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        border: none !important;
+        border-bottom: 1px solid #eee !important;
+    }
+    /* NavBox: stack verticale */
+     .navbox td {
+        display: block !important;
+        width: 100% !important;
          max-width: 100% !important;
-        padding: 0 !important;
      }
 }
-/* Immagini sempre responsive */
+/* ──────────── SEMPRE ATTIVI ──────────── */
 .mw-parser-output img {
      max-width: 100% !important;
@@ Riga 66: / Riga 129: @@
 }
-/* Pre/code: scroll, no overflow */
 .mw-parser-output pre,
 .mw-parser-output code {
@@ Riga 73: / Riga 135: @@
      white-space: pre-wrap;
      word-wrap: break-word;
-}
-/* NavBox (usata in pagine come Donato): responsive */
-.navbox {
-    max-width: 100% !important;
-}
-@media screen and (max-width: 600px) {
-    .navbox td {
-        display: block !important;
-        width: 100% !important;
-    }
 }