مدیاویکی:Common.css: تفاوت میان نسخهها
admin>Esfandiari بدون خلاصۀ ویرایش |
admin>Esfandiari بدون خلاصۀ ویرایش |
||
| خط ۸۲۱: | خط ۸۲۱: | ||
} | } | ||
} | } | ||
/* کانتینر اصلی */ | |||
/* کانتینر اصلی | |||
.grid-wrapper { | .grid-wrapper { | ||
margin: 20px 0; | margin: 20px 0; | ||
| خط ۸۳۱: | خط ۸۳۰: | ||
} | } | ||
/* | /* عنوان */ | ||
.grid-title { | .grid-title { | ||
text-align: center; | text-align: center; | ||
| خط ۸۴۲: | خط ۸۴۱: | ||
} | } | ||
/* شبکه ۱۰ ستونه | /* شبکه ۱۰ ستونه */ | ||
.main-grid { | .main-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(10, 1fr); | /* استفاده از minmax باعث میشود باکسها در صورت کمبود فضا جمع شوند */ | ||
gap: | grid-template-columns: repeat(10, minmax(60px, 1fr)); | ||
gap: 8px; | |||
justify-items: center; | justify-items: center; | ||
} | } | ||
| خط ۸۵۴: | خط ۸۵۴: | ||
border: 2px solid #9bbbd9; | border: 2px solid #9bbbd9; | ||
border-radius: 6px; | border-radius: 6px; | ||
width: | /* حذف width ثابت برای انعطافپذیری */ | ||
width: 100%; | |||
height: 40px; | height: 40px; | ||
font-size: | font-size: 12px; /* کمی کوچکتر برای جا شدن متن */ | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
transition: all 0.2s ease-in-out; | transition: all 0.2s ease-in-out; | ||
padding: 0 5px; /* کمی فاصله از طرفین */ | |||
text-align: center; | |||
} | } | ||
| خط ۸۷۲: | خط ۸۷۵: | ||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
.main-grid { | .main-grid { | ||
grid-template-columns: repeat( | /* در تبلت و موبایل تعداد ستونها را به ۵ کاهش میدهیم تا فشرده نشود */ | ||
grid-template-columns: repeat(5, 1fr); | |||
} | } | ||
.grid | } | ||
@media (max-width: 500px) { | |||
.main-grid { | |||
/* در موبایل کوچکتر به ۳ ستون تغییر کند */ | |||
grid-template-columns: repeat(3, 1fr); | |||
} | } | ||
} | } | ||