MediaWiki:Common.css: Difference between revisions

Revision as of 18:37, 28 October 2026

/* Remove standard Edit button */
body.category-Artist #ca-edit, 
body.category-Artist #p-cactions #ca-edit {
    display: none !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES FOR PAGE FORMS (MINERVA SKIN)
   ========================================================================== */
@media screen and (max-width: 767px) {
    
    /* 1. Force structural tables to break and stack vertically */
    .formtable, 
    .formtable tbody, 
    .formtable tr, 
    .formtable th, 
    .formtable td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }
    
    /* Add clean separation between rows */
    .formtable tr {
        margin-bottom: 15px; 
    }

    /* Give labels slight spacing from the inputs below them */
    .formtable th {
        padding-bottom: 4px;
    }

    /* 2. Scale standard HTML form inputs */
    .pfForm input[type="text"], 
    .pfForm textarea, 
    .pfForm select,
    .createboxInput {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Aggressive Reset for JavaScript Token Fields (Select2 & OOUI overrides) */
    .pfForm .select2-container,
    .pfForm .select2-container-multi,
    .pfForm .select2-choices,
    .pfForm .oo-ui-tagMultiselectWidget,
    .pfForm .oo-ui-textInputWidget,
    .pfForm .oo-ui-tagMultiselectWidget-handle {
        width: 100% !important;             /* Explicitly override JavaScript calculated pixels */
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Keep individual token tags from expanding off-screen */
    .pfForm .select2-choices li {
        max-width: 95% !important;
    }
}

/*Fix sizing for galleries on mobile*/
.mw-gallery-packed {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}

.mw-gallery-packed .gallerybox {
    flex-shrink: 0 !important; /* Forces images to preserve their intended size */
    width: auto !important;    /* Prevents mobile skins from clamping width */
}