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

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

/* =========================================================
   WIKIDAD — Persian Legal Design System
   MediaWiki:Common.css
   Version 1.0
   ========================================================= */


/* =========================================================
   01. VARIABLES — سیستم رنگ و اندازه
   ========================================================= */

:root {
    --law-primary: #168477;
    --law-primary-dark: #11695f;
    --law-primary-light: #eaf6f4;

    --law-link: #176c88;

    --law-gold: #c49a3a;
    --law-gold-light: #fbf7eb;

    --law-blue: #3978ad;
    --law-blue-light: #eef4fa;

    --law-purple: #8064a2;
    --law-purple-light: #f3eff8;

    --law-orange: #d38a27;
    --law-orange-light: #fff5e7;

    --law-green: #4b9b57;
    --law-green-light: #edf7ee;

    --law-text: #263238;
    --law-text-soft: #607277;

    --law-bg: #ffffff;
    --law-bg-soft: #f7f9f8;

    --law-border: #dfe7e5;

    --law-shadow: 0 4px 18px rgba(20, 60, 55, 0.07);
    --law-shadow-hover: 0 8px 28px rgba(20, 60, 55, 0.11);

    --law-radius: 12px;
    --law-radius-small: 8px;

    --law-space: 24px;

    --law-content-width: 1100px;
}


/* =========================================================
   02. GLOBAL — تنظیمات عمومی فارسی
   ========================================================= */

html {
    direction: rtl;
}

body {
    direction: rtl;
    text-align: right;

    font-family:
        "Vazirmatn",
        "IRANSans",
        "IRANSansX",
        Tahoma,
        Arial,
        sans-serif;

    color: var(--law-text);
    background: var(--law-bg);

    line-height: 2;

    font-size: 16px;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* لینک‌ها */

a {
    color: var(--law-link);
    text-decoration: none;
}

a:hover {
    color: var(--law-primary-dark);
    text-decoration: underline;
}

a:visited {
    color: #496f7c;
}


/* متن انتخاب‌شده */

::selection {
    background: var(--law-primary-light);
    color: var(--law-primary-dark);
}


/* =========================================================
   03. TYPOGRAPHY — تایپوگرافی
   ========================================================= */

.mw-body {
    font-size: 16px;
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
    font-family:
        "Vazirmatn",
        "IRANSans",
        Tahoma,
        Arial,
        sans-serif;

    color: var(--law-text);
    font-weight: 700;

    line-height: 1.7;

    border-bottom: none;
}

.mw-body h1 {
    font-size: 30px;
    color: var(--law-primary-dark);
}

.mw-body h2 {
    font-size: 24px;
    margin-top: 36px;
    padding-bottom: 10px;

    border-bottom: 1px solid var(--law-border);
}

.mw-body h3 {
    font-size: 20px;
    color: var(--law-primary-dark);

    margin-top: 28px;
}

.mw-body h4 {
    font-size: 18px;
}


/* =========================================================
   04. MAIN CONTENT — محدوده اصلی سایت
   ========================================================= */

.mw-body {
    background: var(--law-bg);
}


/* فضای اطراف محتوای اصلی */

.mw-body-content {
    max-width: var(--law-content-width);
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   05. HEADER / VECTOR
   ========================================================= */

/* ظاهر کلی هدر */

.vector-header {
    font-family:
        "Vazirmatn",
        "IRANSans",
        Tahoma,
        Arial,
        sans-serif;
}


/* نام سایت */

.vector-menu-portal .vector-menu-heading {
    font-weight: 700;
}


/* منوها */

.vector-menu-portal {
    font-size: 14px;
}


/* لینک‌های منو */

.vector-menu-portal a {
    color: var(--law-text-soft);
}

.vector-menu-portal a:hover {
    color: var(--law-primary);
}


/* =========================================================
   06. SEARCH — جستجوی سایت
   ========================================================= */

#p-search {
    font-family:
        "Vazirmatn",
        "IRANSans",
        Tahoma,
        Arial,
        sans-serif;
}

#searchInput {
    font-family:
        "Vazirmatn",
        "IRANSans",
        Tahoma,
        Arial,
        sans-serif;

    font-size: 15px;

    border: 1px solid var(--law-border);
    border-radius: var(--law-radius-small);

    padding: 8px 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#searchInput:focus {
    border-color: var(--law-primary);

    box-shadow:
        0 0 0 3px rgba(22, 132, 119, 0.12);

    outline: none;
}


/* =========================================================
   07. PAGE TITLE — عنوان صفحات
   ========================================================= */

#firstHeading {
    color: var(--law-primary-dark);

    font-weight: 800;

    line-height: 1.6;

    margin-bottom: 24px;
}


/* =========================================================
   08. LAW PAGE — صفحه ماده قانونی
   ========================================================= */

.law-page {
    direction: rtl;
    text-align: right;

    font-family:
        "Vazirmatn",
        "IRANSans",
        Tahoma,
        Arial,
        sans-serif;

    line-height: 2;

    color: var(--law-text);
}


/* عنوان قانون */

.law-page .law-title {
    margin-bottom: 24px;
}


/* =========================================================
   09. ARTICLE BOX — جعبه ماده
   ========================================================= */

.law-article-box {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #f7fcfb 0%,
            #edf8f5 100%
        );

    border: 1px solid #d5e9e5;
    border-right: 6px solid var(--law-primary);

    border-radius: var(--law-radius);

    padding: 24px 28px;

    margin: 24px 0;

    box-shadow: var(--law-shadow);

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.law-article-box:hover {
    box-shadow: var(--law-shadow-hover);
}


/* شماره ماده */

.law-article-number {
    display: inline-block;

    color: var(--law-primary-dark);

    font-size: 18px;
    font-weight: 800;

    margin-bottom: 10px;
}


/* متن ماده */

.law-article-text {
    color: #173b38;

    font-size: 17px;

    line-height: 2.25;

    text-align: justify;
}


/* =========================================================
   10. RELATED LAWS — مواد مرتبط
   ========================================================= */

.related-laws-box {
    background: var(--law-gold-light);

    border: 1px solid #eee5ce;
    border-right: 5px solid var(--law-gold);

    border-radius: var(--law-radius);

    padding: 20px 24px;

    margin: 28px 0;
}

.related-laws-box .box-title {
    color: #80641f;

    font-weight: 800;

    margin-bottom: 12px;
}

.related-laws-box ul {
    margin: 0;
    padding-right: 20px;
}

.related-laws-box li {
    margin-bottom: 7px;
}

.related-laws-box a {
    color: var(--law-link);
    font-weight: 600;
}


/* توضیح کنار لینک */

.related-laws-description {
    color: var(--law-text-soft);

    font-size: 14px;
}


/* =========================================================
   11. EXPLANATION — شرح ماده
   ========================================================= */

.explanation-box {
    background: #ffffff;

    border: 1px solid var(--law-border);
    border-right: 5px solid var(--law-primary);

    border-radius: var(--law-radius);

    padding: 24px 28px;

    margin: 28px 0;

    box-shadow: var(--law-shadow);
}

.explanation-box .box-title {
    color: var(--law-primary-dark);

    font-size: 20px;
    font-weight: 800;

    margin-bottom: 18px;
}

.explanation-box p {
    margin-top: 0;
    margin-bottom: 14px;
}

.explanation-box ul,
.explanation-box ol {
    padding-right: 24px;
}


/* =========================================================
   12. JUDGMENT — رأی قضایی
   ========================================================= */

.judgment-box {
    background: var(--law-blue-light);

    border: 1px solid #d9e6f1;
    border-right: 5px solid var(--law-blue);

    border-radius: var(--law-radius);

    padding: 20px 24px;

    margin: 24px 0;

    box-shadow: var(--law-shadow);
}

.judgment-box .box-title {
    color: #275d8b;

    font-weight: 800;

    margin-bottom: 12px;
}

.judgment-box .judgment-number {
    color: var(--law-blue);

    font-weight: 700;
}


/* =========================================================
   13. ADVISORY OPINION — نظریه مشورتی
   ========================================================= */

.advisory-box {
    background: #fbf6ed;

    border: 1px solid #eee1c9;
    border-right: 5px solid #a9783b;

    border-radius: var(--law-radius);

    padding: 20px 24px;

    margin: 24px 0;

    box-shadow: var(--law-shadow);
}

.advisory-box .box-title {
    color: #825b2c;

    font-weight: 800;

    margin-bottom: 12px;
}


/* =========================================================
   14. TERMS — تعریف اصطلاحات
   ========================================================= */

.term-box {
    background: var(--law-purple-light);

    border: 1px solid #e2d9eb;
    border-right: 5px solid var(--law-purple);

    border-radius: var(--law-radius);

    padding: 20px 24px;

    margin: 24px 0;

    box-shadow: var(--law-shadow);
}

.term-box .term-title {
    color: #684d88;

    font-weight: 800;

    font-size: 18px;

    margin-bottom: 8px;
}

.term-box .term-content {
    color: var(--law-text);
}


/* =========================================================
   15. TEST BANK — بانک تست
   ========================================================= */

.test-bank {
    margin: 28px 0;
}

.test-card {
    background: #ffffff;

    border: 1px solid var(--law-border);

    border-right: 5px solid var(--law-primary);

    border-radius: var(--law-radius);

    padding: 20px 24px;

    margin: 18px 0;

    box-shadow: var(--law-shadow);

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.test-card:hover {
    box-shadow: var(--law-shadow-hover);
}


/* تست مستند */

.test-official {
    border-right-color: var(--law-blue);
}

.test-official .test-label {
    color: var(--law-blue);
}


/* سؤال تألیفی */

.test-authored {
    border-right-color: var(--law-purple);
}

.test-authored .test-label {
    color: var(--law-purple);
}


/* دام تستی */

.test-trap {
    border-right-color: var(--law-orange);

    background: var(--law-orange-light);
}

.test-trap .test-label {
    color: #a96512;
}


/* برچسب تست */

.test-label {
    display: inline-block;

    font-size: 13px;
    font-weight: 800;

    margin-bottom: 8px;
}


/* متن سؤال */

.test-question {
    font-size: 16px;

    font-weight: 600;

    line-height: 2;

    margin-bottom: 14px;
}


/* گزینه‌ها */

.test-options {
    margin: 12px 0;

    padding-right: 20px;
}

.test-options li {
    margin-bottom: 6px;
}


/* پاسخ */

.test-answer {
    background: var(--law-green-light);

    border-right: 4px solid var(--law-green);

    border-radius: var(--law-radius-small);

    padding: 14px 18px;

    margin-top: 16px;
}


/* نکته آزمونی */

.exam-tip {
    background: #fff9e8;

    border-right: 4px solid #d0a928;

    border-radius: var(--law-radius-small);

    padding: 14px 18px;

    margin-top: 16px;

    color: #665315;
}


/* =========================================================
   16. COLLAPSIBLE SECTIONS — بخش‌های باز و بسته‌شونده
   ========================================================= */

.law-page details {
    background: #ffffff;

    border: 1px solid var(--law-border);

    border-radius: var(--law-radius);

    margin: 18px 0;

    box-shadow: 0 2px 10px rgba(20, 60, 55, 0.04);
}

.law-page details summary {
    cursor: pointer;

    padding: 15px 20px;

    color: var(--law-primary-dark);

    font-weight: 800;

    list-style: none;
}

.law-page details summary::-webkit-details-marker {
    display: none;
}

.law-page details summary::before {
    content: "‹";

    display: inline-block;

    margin-left: 10px;

    font-size: 20px;

    transition: transform 0.2s ease;
}

.law-page details[open] summary::before {
    transform: rotate(-90deg);
}

.law-page details > div {
    padding: 0 20px 20px;
}


/* =========================================================
   17. RELATED TOPICS — جستارهای وابسته
   ========================================================= */

.related-topics {
    background: var(--law-bg-soft);

    border: 1px solid var(--law-border);

    border-radius: var(--law-radius);

    padding: 20px 24px;

    margin: 28px 0;
}

.related-topics-title {
    font-weight: 800;

    color: var(--law-text);

    margin-bottom: 10px;
}


/* =========================================================
   18. LAW NAVIGATION — ماده قبل و بعد
   ========================================================= */

.law-navigation {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 16px;

    background: var(--law-primary-light);

    border: 1px solid #d4ebe7;

    border-radius: var(--law-radius);

    padding: 14px 18px;

    margin: 32px 0;
}

.law-navigation a {
    color: var(--law-primary-dark);

    font-weight: 700;
}

.law-navigation .current-article {
    color: var(--law-text-soft);

    font-size: 14px;

    text-align: center;
}


/* =========================================================
   19. LAW STATUS — وضعیت ماده
   ========================================================= */

.law-status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;
}

.law-status-valid {
    background: var(--law-green-light);
    color: #34743d;
}

.law-status-amended {
    background: #fff6e6;
    color: #946515;
}

.law-status-repealed {
    background: #f7eeee;
    color: #9a4848;
}


/* =========================================================
   20. LAW INDEX — فهرست مواد قانون
   ========================================================= */

.law-index {
    margin: 30px 0;
}

.law-index table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid var(--law-border);

    border-radius: var(--law-radius);
}

.law-index th {
    background: var(--law-primary);

    color: #ffffff;

    font-weight: 700;

    padding: 12px 16px;

    text-align: right;
}

.law-index td {
    padding: 12px 16px;

    border-bottom: 1px solid var(--law-border);

    background: #ffffff;
}

.law-index tr:last-child td {
    border-bottom: none;
}

.law-index tr:hover td {
    background: var(--law-bg-soft);
}


/* =========================================================
   21. GENERAL TABLES — جداول عمومی
   ========================================================= */

.mw-body table.wikitable {
    border: 1px solid var(--law-border);

    border-collapse: collapse;

    width: 100%;

    margin: 24px 0;

    font-size: 15px;
}

.mw-body table.wikitable th {
    background: var(--law-primary-light);

    color: var(--law-primary-dark);

    font-weight: 700;

    border: 1px solid var(--law-border);

    padding: 10px 14px;
}

.mw-body table.wikitable td {
    border: 1px solid var(--law-border);

    padding: 10px 14px;
}

.mw-body table.wikitable tr:nth-child(even) td {
    background: #fbfcfc;
}


/* =========================================================
   22. BLOCKQUOTES — نقل قول
   ========================================================= */

blockquote {
    background: var(--law-bg-soft);

    border-right: 4px solid var(--law-primary);

    border-left: none;

    border-radius: var(--law-radius-small);

    margin: 24px 0;

    padding: 16px 20px;

    color: var(--law-text-soft);
}


/* =========================================================
   23. NOTICE / INFO BOXES
   ========================================================= */

.law-info-box {
    background: var(--law-blue-light);

    border-right: 5px solid var(--law-blue);

    border-radius: var(--law-radius);

    padding: 18px 22px;

    margin: 22px 0;
}

.law-warning-box {
    background: var(--law-orange-light);

    border-right: 5px solid var(--law-orange);

    border-radius: var(--law-radius);

    padding: 18px 22px;

    margin: 22px 0;
}

.law-success-box {
    background: var(--law-green-light);

    border-right: 5px solid var(--law-green);

    border-radius: var(--law-radius);

    padding: 18px 22px;

    margin: 22px 0;
}


/* =========================================================
   24. BREADCRUMBS / CATEGORIES
   ========================================================= */

.mw-indicators {
    direction: rtl;
}

.catlinks {
    background: var(--law-bg-soft);

    border: 1px solid var(--law-border);

    border-radius: var(--law-radius-small);

    padding: 10px 14px;

    margin-top: 28px;

    font-size: 13px;
}


/* =========================================================
   25. FOOTER
   ========================================================= */

.mw-footer {
    font-family:
        "Vazirmatn",
        "IRANSans",
        Tahoma,
        Arial,
        sans-serif;

    color: var(--law-text-soft);
}

.mw-footer a {
    color: var(--law-link);
}


/* =========================================================
   26. EDITOR / EDIT MODE
   ========================================================= */

.mw-editsection {
    font-size: 12px;

    margin-right: 8px;
}

.mw-editsection a {
    color: var(--law-link);
}


/* =========================================================
   27. CODE / TECHNICAL CONTENT
   ========================================================= */

code,
pre,
.mw-code {
    direction: ltr;

    text-align: left;

    font-family:
        Consolas,
        "Courier New",
        monospace;
}

pre {
    border: 1px solid var(--law-border);

    border-radius: var(--law-radius-small);

    background: #f6f8f8;

    padding: 16px;

    overflow-x: auto;
}


/* =========================================================
   28. LISTS — فهرست‌ها
   ========================================================= */

.mw-body ul,
.mw-body ol {
    padding-right: 28px;
    padding-left: 0;
}

.mw-body li {
    margin-bottom: 5px;
}


/* =========================================================
   29. REFERENCES — منابع و پانویس
   ========================================================= */

.mw-references-wrap {
    background: var(--law-bg-soft);

    border: 1px solid var(--law-border);

    border-radius: var(--law-radius);

    padding: 18px 22px;

    margin-top: 30px;
}

.references {
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   30. MOBILE — موبایل
   ========================================================= */

@media (max-width: 700px) {

    body {
        font-size: 15px;
    }

    .mw-body h1,
    #firstHeading {
        font-size: 24px;
    }

    .mw-body h2 {
        font-size: 21px;
    }

    .mw-body h3 {
        font-size: 18px;
    }

    .law-article-box {
        padding: 18px 18px;

        border-right-width: 4px;
    }

    .law-article-text {
        font-size: 16px;

        line-height: 2.15;

        text-align: right;
    }

    .related-laws-box,
    .explanation-box,
    .judgment-box,
    .advisory-box,
    .term-box,
    .test-card {
        padding: 17px 18px;
    }

    .law-navigation {
        flex-direction: column;

        align-items: stretch;

        text-align: center;
    }

    .law-navigation a {
        display: block;

        padding: 8px;
    }

    .law-index {
        overflow-x: auto;
    }

    .law-index table {
        min-width: 600px;
    }

    .mw-body table.wikitable {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }
}


/* =========================================================
   31. PRINT — نسخه چاپ
   ========================================================= */

@media print {

    body {
        background: #ffffff !important;

        color: #000000 !important;
    }

    .law-article-box,
    .related-laws-box,
    .explanation-box,
    .judgment-box,
    .advisory-box,
    .term-box,
    .test-card {
        box-shadow: none !important;
    }

    .law-navigation {
        display: none;
    }

    a {
        color: #000000 !important;

        text-decoration: none !important;
    }

    .mw-editsection {
        display: none;
    }
}


/* =========================================================
   32. ACCESSIBILITY — خوانایی و دسترسی
   ========================================================= */

a:focus,
button:focus,
input:focus,
summary:focus {
    outline: 2px solid var(--law-primary);

    outline-offset: 2px;
}


/* =========================================================
   33. UTILITY CLASSES — کلاس‌های کمکی
   ========================================================= */

.law-center {
    text-align: center;
}

.law-muted {
    color: var(--law-text-soft);
}

.law-gold {
    color: var(--law-gold);
}

.law-primary {
    color: var(--law-primary);
}

.law-blue {
    color: var(--law-blue);
}

.law-purple {
    color: var(--law-purple);
}

.law-orange {
    color: var(--law-orange);
}

.law-bold {
    font-weight: 700;
}

.law-small {
    font-size: 13px;
}

.law-large {
    font-size: 18px;
}


/* =========================================================
   END — WIKIDAD DESIGN SYSTEM
   ========================================================= */