فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
Esfandiari (بحث | مشارکت‌ها)
دیوان‌سالاران، مدیران رابط کاربری، مدیران
۱٬۶۲۳ ویرایش‌ها
صفحه را خالی کرد
برچسب‌ها: خالی کردن واگردانی دستی برگردانده‌شده
بدون خلاصۀ ویرایش
 
(۳۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
/* --------------------- Begin Font Style ----------------- */
@font-face {
    font-family: 'IRANSansXFaNum';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/w/resources/fonts/IRANSansXFaNum-Regular.woff2') format('woff2'),
        url('/w/resources/fonts/SIRANSansXFaNum-Regular.woff') format('woff');
}


body {
    font-family: IRANSansXFaNum, Tahoma, 'Noto Serif', 'Droid Arabic Naskh', 'DejaVu Sans', serif !important;
}
#content.mw-body h1,
#content.mw-body h2,
#content.mw-body #firstHeading,
#content.mw-body .mw-editsection,
.mw-body .mw-editsection-like,
#content.mw-body #toc h2,
#content.mw-body .toc h2,
.vector-sticky-header-context-bar-primary,
#template-documentation,
#documentation-meta-data {
    font-family: IRANSansXFaNum, Tahoma, 'Noto Serif', 'Droid Arabic Naskh', 'DejaVu Sans', serif !important;
    line-height: 1.6;
}
textarea {
    font-family: IRANSansXFaNum, 'Courier New', monospace;
}
.mw-body-content {
    font-kerning: auto;
    font-size: 16px;
    line-height: 2.0;
}
.ace_editor {
    font-family: 'Courier New', monospace !important;
}
.ui-widget,
.ui-widget *,
button,
input,
select,
optgroup {
    font-family: inherit;
}
dfn { font-style: inherit; }
sup, sub { line-height: 1em; }
/* --------------------- End Font Style ----------------- */
/* --------------------- Begin Custom Style ----------------- */
#siteSub { display: block; font-size: 0.8125rem; }
.mw-redirectedfrom { display: none; }
.hatnote {
    padding: 5px 7px;
    color: #54595d;
    font-size: 0.8125rem;
    overflow: hidden;
}
.mw-parser-output .hatnote { font-style: normal; }
.mw-body-content h2 { padding: 0.2em 0 0 0; }
.vector-menu-portal .vector-menu-heading,
.vector-menu-portal .vector-menu-content li {
  line-height: 1.3;
  font-size: 0.85em;
}
/* --------------------- End Custom Style ----------------- */
/* --------------------- Begin Main Page Style ----------------- */
.mainPage {
    display: flex;
    flex-direction: row;
}
.mainRight {
    display: flex;
    flex-direction: column;
    flex: 75%;
    margin: 6px 4px;
}
.mainLeft {
    box-shadow: 0 0 0.3rem #999;
    border-radius: 0.2rem;
    padding: 1.2rem;
    flex: 25%;
    margin: 6px 4px;
}
.selectedArticle {
    box-shadow: 0 0 0.3rem #999;
    border-radius: 0.2rem;
    padding: 1.2rem;
    margin: 4px 0px;
}
.helpBox {
    line-height: 2em;
    box-shadow: 0 0 0.3rem #999;
    border-radius: 0.2rem;
    padding: 1.2rem;
    margin-bottom: 1.6rem;
}
.boxHeader {
    padding: 10px;
    border-radius: 2px;
    margin: 0 0 20px 0;
    box-shadow: 0 0 0.3rem #999;
}
.boxHeader span {
    padding-right: 45px;
    font: 1.03em Samim;
    position: relative;
}
.boxTitle {
    padding: 5px;
    border-radius: 2px;
    margin: 15px 0 20px 0;
    border-bottom: solid 0.2rem #bdd8fb;
}
.selectedArticle .boxHeader span:before,
.boxHeader span:before,
.topArticles .boxHeader span:before {
    width: 43px;
    height: 43px;
    position: absolute;
    right: -1px;
    top: -9px;
    content: " ";
}
.selectedArticle .boxHeader span:before {
    background: url('/w/resources/assets/favorite.png') no-repeat center center;
}
.topArticles .boxHeader span:before {
    background: url('/w/resources/assets/top.png') no-repeat center center;
}
.topArticles {
    width: 100%;
    margin-bottom: 10px;
}
.readmoreButton {
    box-shadow: 0 0 0.3rem #999;
    display: inline-block;
    min-width: 4em;
    max-width: 28.75em;
    padding: 0.546875em 1em;
    line-height: 1.286;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0.2rem;
    margin: 5px 0 0 0;
    font-family: inherit;
    font-size: 1em;
}
/* --------------------- End Main Page Style ----------------- */
/* --------------------- Begin Persian Wikipedia Style ----------------- */
/* Main page fixes */
body.page-امامت‌پدیا_صفحه_تمرین #ca-edit,
body.page-امامت‌پدیا_آشنایی #ca-edit {
    border: 1px dotted #36c;
}
body.page-امامت‌پدیا_صفحه_تمرین #ca-edit:hover,
body.page-امامت‌پدیا_آشنایی #ca-edit:hover {
    background: white;
    border-color: transparent;
}
body.page-صفحهٔ_اصلی #mp-topbanner {
    clear: both;
}
body.page-صفحهٔ_اصلی #ca-delete,
body.page-صفحهٔ_اصلی #deleteconfirm,
body.page-صفحهٔ_اصلی #t-cite,
body.page-صفحهٔ_اصلی #lastmod,
body.page-صفحهٔ_اصلی #siteSub,
body.page-صفحهٔ_اصلی #contentSub,
body.page-صفحهٔ_اصلی #catlinks,
body.page-صفحهٔ_اصلی h1.firstHeading,
body.page-صفحهٔ_اصلی #centralNotice,
body.page-درگاه_ورودی #siteSub,
body.page-درگاه_ورودی h1.firstHeading {
    display: none !important;
}
body.page-صفحهٔ_اصلی #ca-history,
body.page-صفحهٔ_اصلی #pagehistory {
    display: none;
}
/* تراز راست برای پیوند «ویرایش پیوندهای میان‌ویکی» */
.wb-langlinks-link {
    text-align: right;
}
/* Make references smaller */
.references-small { font-size: 90%; }
ol.references > li:target,
sup.reference:target,
span.citation:target,
cite:target {
    background-color: #ecf0fa;
}
sup.reference {
    font-weight: normal;
    font-style: normal;
}
span.citation, cite { word-wrap: break-word; }
cite:target { background-color: #ecf0fa; }
@media screen, handheld, projection {
    cite *.printonly { display: none; }
}
/* Horizontal list fixes */
.skin-monobook .hlist dl,
.skin-modern .hlist dl,
.skin-vector .hlist dl {
    line-height: 1.5em;
}
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Nested inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
    display: inline;
}
/* Separators */
.hlist dt:after { content: ": "; }
.hlist dd:after,
.hlist li:after {
    content: " • ";
    font-family: Tahoma,'Noto Serif','Droid Arabic Naskh','DejaVu Sans',serif !important;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* Parentheses for nested lists */
.hlist dd dd:first-child:before,
.hlist dd dt:first-child:before,
.hlist dd li:first-child:before,
.hlist dt dd:first-child:before,
.hlist dt dt:first-child:before,
.hlist dt li:first-child:before,
.hlist li dd:first-child:before,
.hlist li dt:first-child:before,
.hlist li li:first-child:before {
    content: " (";
}
.hlist dd dd:last-child:after,
.hlist dd dt:last-child:after,
.hlist dd li:last-child:after,
.hlist dt dd:last-child:after,
.hlist dt dt:last-child:after,
.hlist dt li:last-child:after,
.hlist li dd:last-child:after,
.hlist li dt:last-child:after,
.hlist li li:last-child:after {
    content: ") ";
}
/* OL numbering */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) " ";
    content: " " counter(listitem, -moz-persian) " ";
    content: " " counter(listitem, persian) " ";
    white-space: nowrap;
}
/* Plainlist */
.plainlist ul {
    line-height: inherit;
    list-style: none;
    margin: 0;
}
.plainlist ul li { margin-bottom: 0; }
/* Row header fix */
.wikitable.plainrowheaders th[scope=row] {
    font-weight: normal;
    text-align: right;
}
/* Align lists in table cells */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
    text-align: right;
}
/* Exclude hlist */
.wikitable.hlist td ul,
.wikitable.hlist td ol,
.wikitable.hlist td dl { text-align: inherit; }
/* --------------------- Navbox --------------------- */
.navbox {
    box-sizing: border-box;
    border: 1px solid #a2a9b1;
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
    background: #f8f9fa;
}
.navbox-inner,
.navbox-subgroup { width: 100%; }
.navbox-group,
.navbox-title,
.navbox-abovebelow {
    padding: 0.25em 1em;
    line-height: 1.5em;
    text-align: center;
}
th.navbox-group { white-space: nowrap; text-align: right; }
.navbox-title,
.navbox th { background: #b3ccff; }
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title { background: #dbe7ff; }
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow { background: #e5edff; }
.navbox-even { background: #f8f9fa; }
.navbox-odd { background: transparent; }
table.navbox + table.navbox { margin-top: -1px; }
/* Padding fix in navboxes */
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;
}
/* bullet fix RTL */
.navbox-list li { unicode-bidi: isolate; }
/* Navbar inside */
.navbar {
    display: inline;
    font-size: 88%;
}
.navbar ul { display: inline; white-space: nowrap; }
.navbar li { word-spacing: -0.125em; }
.navbar.mini li { font-size: xx-small; }
.nv-talk > a { color: #002BB8; }
.infobox .navbar,
.navbox .navbar {
    display: block;
    font-size: 100%;
}
.navbox-title .navbar {
    float: right;
    text-align: right;
    margin-left: 0.5em;
    width: 6em;
}
/* Hide/show buttons for collapses */
.collapseButton {
    float: left;
    font-weight: normal;
    margin-right: 0.5em;
    text-align: left;
    width: auto;
}
.navbox .collapseButton { width: 6em; }
.mw-parser-output .mw-collapsible-toggle {
    font-weight: normal;
    text-align: left;
    padding: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
    float: right;
    text-align: right;
}
/* --------------------- Infobox --------------------- */
.infobox {
    border: 1px solid #a2a9b1;
    border-spacing: 3px;
    background-color: #f8f9fa;
    color: black;
    margin: 0.5em 1em 0.5em 0;
    padding: 0.2em;
    float: left;
    clear: left;
    font-size: 88%;
    line-height: 1.5em;
    width: 22em;
}
.infobox-subbox {
    padding: 0;
    border: none;
    margin: -3px;
    width: auto;
    min-width: 100%;
    font-size: 100%;
    clear: none;
    float: none;
    background-color: transparent;
}
.infobox th,
.infobox td,
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar {
    vertical-align: top;
}
.infobox-label,
.infobox-data,
.infobox th,
.infobox td { text-align: right; }
.infobox .infobox-above,
.infobox .infobox-title,
.infobox caption {
    font-size: 125%;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
}
.infobox-title,
.infobox caption { padding: 0.2em; }
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
    text-align: center;
}
.infobox .infobox-navbar { text-align: left; }
.infobox.bordered { border-collapse: collapse; }
.infobox.bordered td,
.infobox.bordered th { border: 1px solid #a2a9b1; }
.infobox.bordered .borderless td,
.infobox.bordered .borderless th { border: 0; }
.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}
/* Geography variants */
.infobox.geography {
    border-collapse: collapse;
    line-height: 1.2em;
    font-size: 90%;
}
.infobox.geography td,
.infobox.geography th {
    border-top: 1px solid #a2a9b1;
    padding: 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
    border: 0;
    padding: 0;
}
/* --------------------- تا اینجا ~ نصف کامل ---------------------
/* --------------------- Infobox (continued) --------------------- */
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th { border-top: 0; }
.infobox.geography img {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}
/* Climate charts */
.infobox.sisterproject div {
    margin: 0.1em 0 0 0;
    padding: 0;
}
.infobox.sisterproject div .sister-logo {
    width: 37px;
    float: left;
}
.infobox.sisterproject div .sister-img {
    float: left;
    margin: 0.5em 0 0 0.5em;
}
/* --------------------- Gallery --------------------- */
ul.gallery {
    margin: 2px 0;
    padding: 0;
    clear: both;
}
ul.gallery li.gallerybox {
    vertical-align: top;
    display: inline-block;
    padding: 2px;
    width: 155px;
}
ul.gallery li.gallerybox div.thumb {
    margin: 2px;
}
ul.gallery li.gallerybox div.gallerytext {
    overflow: hidden;
    font-size: 94%;
    padding: 2px 4px;
    text-align: center;
}
/* --------------------- Message boxes --------------------- */
.messagebox {
    border: 1px solid #c8ccd1;
    background: #f8f9fa;
    padding: 0.2em 0.5em;
    margin: 0.5em 0;
}
.noticebox {
    border: 1px solid #36c;
    background: #f0f6ff;
}
.warningbox {
    border: 1px solid #e02;
    background: #fee;
}
.successbox {
    border: 1px solid #0a0;
    background: #efe;
}
/* --------------------- Quotations --------------------- */
blockquote {
    border-left: 3px solid #a2a9b1;
    margin: 1em 0;
    padding: 0 1em;
}
/* RTL fix */
blockquote {
    border-right: 3px solid #a2a9b1;
    border-left: none;
}
/* --------------------- Table of Contents --------------------- */
#toc,
.toc {
    border: 1px solid #a2a9b1;
    background: #f8f9fa;
    padding: 10px;
    font-size: 90%;
}
#toc ul,
.toc ul {
    line-height: 1.7em;
}
#toc .toctitle,
.toc .toctitle {
    font-weight: bold;
    font-size: 110%;
    margin-bottom: 5px;
}
/* --------------------- User Page Boxes --------------------- */
.userbox {
    border: 1px solid #a2a9b1;
    margin: 1px;
    background: #f8f9fa;
    color: #000;
}
.userbox td {
    padding: 2px 4px;
}
/* --------------------- References & Footnotes --------------------- */
.references {
    font-size: 90%;
}
.references li {
    margin: 0.5em 0;
}
/* RTL reference numbers */
.references li:target {
    background: #f0f4ff;
}
/* --------------------- Code blocks --------------------- */
pre, code, .mw-code {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}
/* --------------------- Syntax highlighting --------------------- */
.mw-highlight pre {
    white-space: pre-wrap;
    padding: 0.5em;
    border: 1px solid #aaa;
    background: #f8f9fa;
}
/* --------------------- Search suggestions --------------------- */
.suggestions {
    direction: rtl;
    text-align: right;
}
/* --------------------- Tabs / Portlets --------------------- */
#p-personal li {
    float: right;
}
#right-navigation .vector-menu-tabs li {
    float: right;
}
#left-navigation .vector-menu-tabs li {
    float: left;
}
/* --------------------- Categories --------------------- */
#catlinks ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#catlinks li {
    display: inline-block;
    margin-left: 0.4em;
}
/* --------------------- Portlet RTL fixes --------------------- */
.portal {
    direction: rtl;
    text-align: right;
}
.portal .body ul {
    padding-right: 1em;
}
/* --------------------- Footer --------------------- */
#footer {
    font-size: 90%;
    line-height: 1.7em;
    padding: 1em 0;
}
/* --------------------- Diff view --------------------- */
td.diff-addedline {
    background: #dfd;
}
td.diff-deletedline {
    background: #fdd;
}
td.diff-context {
    background: #f8f9fa;
}
/* --------------------- File pages --------------------- */
.filehistory th,
.filehistory td {
    padding: 0.2em 0.4em;
}
.filehistory a img {
    border: 1px solid #a2a9b1;
}
/* --------------------- Print styles --------------------- */
@media print {
    body {
        background: white;
        font-size: 12pt;
    }
    #footer, #mw-navigation { display: none; }
}
/* --------------------- End of Full CSS --------------------- */
/* تنظیم پیش‌فرض برای دسکتاپ (نسبت ۷/۳) */
.video-responsive-player {
    aspect-ratio: 7 / 3;
}
/* تنظیم برای موبایل (نسبت ۷/۴) */
@media screen and (max-width: 600px) {
    .video-responsive-player {
        aspect-ratio: 7 / 4 !important;
    }
}
/* کانتینر اصلی */
.grid-wrapper {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #dbe7ff;
    border-radius: 8px;
    background-color: #ffffff;
}
/* عنوان */
.grid-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #5a8ab8;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #9bbbd9;
}
/* شبکه ۱۰ ستونه */
.main-grid {
    display: grid;
    /* فاصله بین باکس‌ها را افزایش دادیم */
    grid-template-columns: repeat(10, minmax(60px, 1fr));
    gap: 15px; /* مقدار gap از 8px به 15px افزایش یافت */
    justify-items: center;
}
.grid-item {
    background-color: #f4f7fa;
    border: 2px solid #9bbbd9;
    border-radius: 6px;
    width: 100%;
    height: 40px;
   
    /* تغییر فونت هوشمند: بین 10px تا 13px بسته به عرض صفحه */
    font-size: clamp(10px, 0.8vw + 8px, 13px);
   
    /* جلوگیری از رفتن به خط بعد */
    white-space: nowrap;
   
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    padding: 0 5px;
    text-align: center;
    box-sizing: border-box;
}
.grid-item:hover {
    transform: translateY(-2px);
    border-color: #5a8ab8;
    background-color: #e8f0f8;
}
/* تنظیم ریسپانسیو */
@media (max-width: 900px) {
    .main-grid {
        /* در تبلت و موبایل تعداد ستون‌ها را به ۵ کاهش می‌دهیم تا فشرده نشود */
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 500px) {
    .main-grid {
        /* در موبایل کوچک‌تر به ۳ ستون تغییر کند */
        grid-template-columns: repeat(3, 1fr);
    }
}
.grid-wrapper {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #dbe7ff;
    border-radius: 8px;
    background-color: #ffffff;
    /* این خط باعث می‌شود فونت دقیقاً مطابق بقیه متون سایت باشد */
    font-family: IRANSansXFaNum;
    font-size: 16px; /* یا هر سایزی که برای متن‌های سایتتان مناسب است */
}
.trust-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: transform 0.3s;
}
.trust-item:hover {
    transform: scale(1.05); /* افکت کوچک هنگام بردن موس روی لوگو */
}
/* کادر اصلی مستطیلی */
.footer-container {
    display: flex;
    flex-wrap: wrap; /* برای ریسپانسیو شدن در موبایل */
    background: #ffffff;
    border: 2px solid #e1e1e1;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    gap: 20px;
}
/* هر ستون */
.footer-col {
    flex: 1; /* تقسیم مساوی فضا */
    min-width: 250px; /* حداقل عرض برای اینکه در موبایل خوش‌شکل باشد */
    text-align: center;
}
/* عنوان‌های داخل کادر */
.footer-heading {
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #444;
}
/* تنظیم کانتینر برای کنار هم قرار دادن نمادها */
.trust-icons {
    display: flex;
    justify-content: center; /* وسط‌چین کردن هر دو در کادر */
    align-items: center;    /* تراز عمودی */
    gap: 15px;              /* فاصله بین دو نماد */
    flex-wrap: wrap;        /* اگر صفحه کوچک شد، به خط بعد بروند */
}
/* مجبور کردن خروجی‌های اینماد و زرین‌پال به نمایش در یک خط */
.trust-icons > div,
.trust-icons > a {
    display: inline-block !important;
    vertical-align: middle;
}
/* استایل اختصاصی برای شبکه استان‌ها */
.provinces-grid .main-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* ۵ ستون */
    gap: 15px;
    justify-items: center;
}
/* ریسپانسیو اختصاصی برای استان‌ها */
@media (max-width: 900px) {
    .provinces-grid .main-grid {
        grid-template-columns: repeat(3, 1fr); /* تبلت ۳ ستونه */
    }
}
@media (max-width: 500px) {
    .provinces-grid .main-grid {
        grid-template-columns: repeat(2, 1fr); /* موبایل ۲ ستونه */
    }
}
/* برای نمایش ۱۰ ستونه */
.cities-grid .main-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* ۱۰ ستون */
    gap: 10px;
    justify-items: center;
}
/* ریسپانسیو برای تبلت */
@media (max-width: 1024px) {
    .cities-grid .main-grid {
        grid-template-columns: repeat(5, 1fr); /* ۵ ستون */
    }
}
/* ریسپانسیو برای موبایل */
@media (max-width: 600px) {
    .cities-grid .main-grid {
        grid-template-columns: repeat(3, 1fr); /* ۳ ستون */
    }
}
/* ایجاد فضای کلیک‌پذیر برای تمام باکس */
.grid-item {
    position: relative;
    padding: 0; /* پدینگ را از آیتم بردارید */
}
.grid-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px; /* پدینگ را به داخل تگ لینک منتقل کردیم */
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
/* افکت زیبا هنگام هاور (اختیاری) */
.grid-item:hover {
    background-color: #f0f0f0;
    border-radius: 5px;
    cursor: pointer;
}
.modern-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 20px;
}
.city-link {
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none !important;
    color: #334155 !important;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.city-link:hover {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
    border-color: transparent;
}
برگرفته از «https://faraghaib.ir/wiki/مدیاویکی:Common.css»