MediaWiki:Timeless.css: Unterschied zwischen den Versionen

/* CSS placed here will affect users of the Timeless skin */

/* --------------------------------------------------------------------------
   Desktop & Global Settings
   -------------------------------------------------------------------------- */
/* Keep the top bar scrolling with content (existing setting) */
#mw-content-container {
    margin-top: 0em;
    padding-bottom: 1em;
}
#mw-header-container {
    position: static;
}
#mw-header-nav-hack, #mw-header-hack {
    position: static;
}

/* --------------------------------------------------------------------------
   Mobile Optimizations (Timeless mobile breakpoint: <= 850px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 850px) {
    /* 1. Viewport & Padding Optimization */
    /* Reclaim screen real estate from Timeless skin's large default 2em side padding */
    #mw-header-container {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }
    #mw-content {
        padding: 1.25em 1.25em 2.5em;
    }
    #mw-footer {
        padding: 0 1.25em;
    }
    #catlinks {
        margin: 0 1.25em;
    }

    /* 2. Fix Squished Float Elements (Images, Infoboxes) */
    /* Un-float right/left aligned images and callout boxes so text is not compressed */
    .mw-parser-output .floatright,
    .mw-parser-output .floatleft,
    .mw-parser-output div[style*="float:right"],
    .mw-parser-output div[style*="float: right"],
    .mw-parser-output div[style*="float:left"],
    .mw-parser-output div[style*="float: left"],
    .mw-parser-output table.floatright,
    .mw-parser-output table.floatleft {
        float: none !important;
        clear: both !important;
        margin: 1em auto !important;
        text-align: center;
        max-width: 100% !important;
    }

    /* 3. Proportional Responsive Images */
    .mw-parser-output img,
    #mw-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 4. Multi-Column Layout Tables (e.g. Hauptseite Projekte & Community) */
    /* Stack multi-column borderless layout tables vertically into full-width blocks */
    .mw-parser-output table[style*="border:0"] > tbody > tr > td,
    .mw-parser-output table[style*="border: 0"] > tbody > tr > td,
    .mw-parser-output table[style*="border:none"] > tbody > tr > td,
    .mw-parser-output table[style*="border: none"] > tbody > tr > td,
    .mw-parser-output table[style*="border:0"] > tr > td,
    .mw-parser-output table[style*="border: 0"] > tr > td,
    .mw-parser-output table[style*="border:none"] > tr > td,
    .mw-parser-output table[style*="border: none"] > tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.5em 0 !important;
    }

    /* 5. Data Tables (wikitable, prettytable, etc.) */
    /* Allow wide tables to scroll horizontally within their box instead of breaking page
    width */
    .mw-parser-output table {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .mw-parser-output table.wikitable,
    .mw-parser-output table.prettytable,
    .mw-parser-output .mw-datatable {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 1em 0 !important;
    }

    /* 6. Code & Pre Blocks */
    /* Contain long code strings and wrap inline code */
    pre,
    .mw-code,
    .mw-highlight {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    code {
        word-break: break-word;
    }

    /* 7. Typography & Long Word Wrapping */
    h1, h2, h3, h4, h5, h6,
    .mw-headline,
    #bodyContent {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* 8. Touch Targets for Page Actions */
    /* Expand touch targets from 20px to 36px for easier tapping on mobile */
    #mw-page-header-links li {
        margin: 0 0.25em 0.75em 0.25em !important;
    }
    #mw-page-header-links li a,
    #mw-page-header-links li.dropdown-toggle {
        min-width: 36px;
        min-height: 36px;
        line-height: 36px;
        background-position: center center !important;
    }

    /* 9. Search Bar */
    /* 16px font-size prevents iOS Safari from auto-zooming on focus */
    #searchInput {
        font-size: 16px !important;
        min-height: 36px;
        box-sizing: border-box;
    }

    /* 10. Partner / Sponsor Logos */
    .mw-parser-output p a > img[src*="thumb"] {
        margin: 0.35em 0.5em;
        vertical-align: middle;
    }
}

/* --------------------------------------------------------------------------
   Extra Small Devices (<= 450px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 450px) {
    #mw-header-container {
        padding-left: 0.75em;
        padding-right: 0.75em;
    }
    #mw-content {
        padding: 1em 0.75em 2em;
    }
    #mw-footer {
        padding: 0 0.75em;
    }
    #catlinks {
        margin: 0 0.75em;
    }

    /* Header spacing and title font sizing to prevent collision */
    #p-logo-text {
        left: 4.25em;
    }
    #p-logo-text a {
        font-size: 1.35em;
    }
    #site-navigation h2 {
        left: 0.75em;
    }
    #user-tools h2 {
        right: 0.75em;
    }
    #site-tools h2 {
        right: 4.25em;
    }
}