مدیاویکی:Vector.css: تفاوت میان نسخه‌ها

نسخهٔ ۱۷ سپتامبر ۲۰۲۶، ساعت ۱۲:۵۸

/* =========================================================
   WIKIDAD — VECTOR RESPONSIVE
   طراحی واکنش‌گرا برای پوسته Vector
   ========================================================= */


/* =========================================================
   1. پایه
   ========================================================= */

html,
body {
    max-width: 100%;
    width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   2. جلوگیری از عریض شدن محتوا
   ========================================================= */

.mw-body,
.mw-body-content,
.mw-content-ltr,
.mw-content-rtl {
    max-width: 100%;
}


/* =========================================================
   3. تصاویر و رسانه
   ========================================================= */

.mw-body img,
.mw-body video,
.mw-body iframe {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   4. جدول
   ========================================================= */

.mw-body table {
    max-width: 100%;
}


/* =========================================================
   5. موبایل
   ========================================================= */

@media screen and (max-width: 700px) {

    /* -----------------------------------------
       حذف کامل پنل کناری Vector
       ----------------------------------------- */

    #mw-panel,
    .vector-sidebar,
    .vector-menu-portal {
        display: none !important;
    }


    /* -----------------------------------------
       حذف فضای اختصاص داده شده به Sidebar
       ----------------------------------------- */

    #content,
    .mw-body,
    .mw-body-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }


    /* -----------------------------------------
       ظرف اصلی Vector
       ----------------------------------------- */

    .mw-page-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    /* -----------------------------------------
       محتوای مقاله
       ----------------------------------------- */

    .mw-body {
        min-width: 0 !important;
    }


    .mw-body-content {
        min-width: 0 !important;
    }


    /* -----------------------------------------
       عنوان صفحه
       ----------------------------------------- */

    .mw-first-heading {
        font-size: 1.65rem;
        line-height: 1.6;
        max-width: 100%;
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------
       تصاویر
       ----------------------------------------- */

    .mw-body img {
        max-width: 100% !important;
        height: auto !important;
    }


    /* -----------------------------------------
       فرم‌ها
       ----------------------------------------- */

    .mw-body input,
    .mw-body textarea,
    .mw-body select,
    .mw-body button {
        max-width: 100%;
        box-sizing: border-box;
    }


    /* -----------------------------------------
       جدول‌ها
       ----------------------------------------- */

    .mw-body table {
        max-width: 100%;
    }


    /* -----------------------------------------
       جلوگیری از شکستن عرض صفحات
       ----------------------------------------- */

    .mw-body,
    .mw-body-content,
    .mw-content {
        overflow-wrap: anywhere;
        min-width: 0;
    }

}


/* =========================================================
   6. موبایل کوچک
   ========================================================= */

@media screen and (max-width: 480px) {

    .mw-first-heading {
        font-size: 1.45rem;
    }

    .mw-page-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

}

@media screen and (max-width: 700px) {
    body {
        outline: 5px solid red !important;
    }
}