MediaWiki:Common.css

Nota: dopo aver pubblicato, potrebbe essere necessario pulire la cache del proprio browser per vedere i cambiamenti.

• Firefox / Safari: tieni premuto il tasto delle maiuscole Shift e fai clic su Ricarica, oppure premi Ctrl-F5 o Ctrl-R (⌘-R su Mac)
• Google Chrome: premi Ctrl-Shift-R (⌘-Shift-R su un Mac)
• Edge: tieni premuto il tasto Ctrl e fai clic su Aggiorna, oppure premi Ctrl-F5.

/* ============================================================
 * Common.css v2 — Wiki Methode Paret
 * ============================================================
 * Responsive AGGRESSIVO. Anche se viene servito Vector desktop
 * su uno schermo piccolo, il layout deve restare leggibile.
 * Breakpoint: 1100px (più aggressivo del classico 768)
 * ============================================================ */

/* ──────────── BREAKPOINT 1100px ──────────── */
@media screen and (max-width: 1100px) {
    
    /* 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;
    }
    
    /* Cell content responsive */
    .mw-parser-output table.wikitable td,
    .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 compatti */
    .mw-parser-output h1 { font-size: 1.6em !important; line-height: 1.2 !important; }
    .mw-parser-output h2 { font-size: 1.3em !important; line-height: 1.2 !important; }
    .mw-parser-output h3 { font-size: 1.15em !important; line-height: 1.2 !important; }
    
    body { font-size: 16px !important; line-height: 1.5 !important; }
    .mw-parser-output p { line-height: 1.55 !important; margin: 0.8em 0 !important; }
    
    /* Header Vector */
    .vector-header {
        flex-wrap: wrap !important;
        padding: 5px !important;
    }
    
    /* Search box adattivo */
    #p-search,
    .vector-search-box {
        width: 100% !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;
    }
    
    .mw-parser-output table.wikitable tr {
        display: block !important;
        margin-bottom: 10px !important;
        border: 1px solid #ccc !important;
    }
    
    .mw-parser-output table.wikitable td,
    .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;
    }
}

/* ──────────── SEMPRE ATTIVI ──────────── */
.mw-parser-output img {
    max-width: 100% !important;
    height: auto !important;
}

.mw-parser-output pre,
.mw-parser-output code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap;
    word-wrap: break-word;
}