wikimedia/mediawiki-extensions-MobileFrontend

@import 'mediawiki.skin.variables.less';
@import '../../mobile.less/mobile.variables.less';

/*
SETTINGS PAGE
*/
/* stylelint-disable selector-max-id */
.client-js {
    // toast will be shown in JS mode.
    .mw-mf-mobileoptions-message {
        display: none;
    }

    #mw-mf-settings-save {
        display: none;
    }

    // Checkboxes in form will be upgraded to toggle switches with JS
    // Minimise FOUC
    #mobile-options .oo-ui-checkboxInputWidget {
        visibility: hidden;
    }
}

#skin-client-prefs-mf-expand-sections {
    display: none;
}

@media all and ( max-width: @max-width-breakpoint-mobile ) {
    #skin-client-prefs-mf-expand-sections {
        display: block;
    }
}

.skin-client-pref-description {
    font-weight: normal;
    font-size: 0.8em;
}

.cdx-toggle-switch__label {
    flex-grow: 1;
    display: flex;
    flex-flow: column;
}

form.mw-mf-settings {
    margin: 0;
    padding: 0;
    padding-bottom: 40px;

    .cdx-toggle-switch {
        display: flex;
    }

    #mf-client-preferences label,
    .oo-ui-fieldLayout-header strong {
        font-weight: bold;
    }

    .mw-portlet > label > .skin-client-pref-description,
    .option-description,
    .option-links {
        font-weight: normal;
        display: block;
        font-size: 0.8em;
        padding-right: 8px;
        line-height: 1.4em;
    }

    .mw-portlet > label > .skin-client-pref-description {
        margin-bottom: 8px;
    }

    #mf-client-preferences .mw-portlet,
    .oo-ui-fieldLayout {
        border-bottom: @border-width-base @border-style-base @border-color-muted;
        padding-top: 12.5px;
        padding-bottom: 12.5px;
        margin-top: 0;

        &:first-child {
            border-top: @border-width-base @border-style-base @border-color-muted;
        }
    }

    .mobile-options-feedback {
        margin-top: 10px !important;
    }

    #mf-client-preferences,
    #amc-field,
    #mobile-user-pref {
        ul.hlist {
            padding-top: 0.4em;

            > li {
                margin-right: 15px;
            }
        }
    }

    #amc-field,
    #mobile-user-pref {
        .option-links {
            // margin should be same as margin applied to .oo-ui-fieldLayout-body
            margin: 0 16px;
        }
    }

    #mf-client-preferences {
        // margin should be same as margin applied to .oo-ui-fieldLayout-body
        margin: 0 16px;
    }

    #beta-field {
        border-top: 0;
        padding-top: 0;

        &::before {
            content: '';
            width: 100%;
            height: 10%;
            background: @background-color-interactive;
            padding-top: 20px;
            margin-bottom: 10px;
            display: block;
        }

        &:first-child {
            border-top: @border-width-base @border-style-base @border-color-muted;

            &::before {
                background: none;
            }
        }
    }

    .mobile-options-beta-feature {
        font-size: 0.9em;
        opacity: 0.5;

        &.is-enabled {
            opacity: 1;
        }
    }

    .oo-ui-fieldLayout-body {
        margin-bottom: 40px;
        display: flex; // Work around for T180652
        align-items: center;

        // make parent expand to include floats
        &::before,
        &::after {
            content: '';
            display: table;
        }

        &::after {
            clear: both;
        }
    }

    .oo-ui-fieldLayout-header {
        flex-grow: 1;
        width: auto !important; // Work around for T180652
        padding-right: 1.5em !important; // overriding OOUI style for T214195
    }

    .oo-ui-fieldLayout-field {
        width: auto !important; // Work around for T180652
    }
}
/* stylelint-enable selector-max-id */