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

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

@@ خط ۷٬۴۱۳: / خط ۷٬۴۱۳: @@
 }
+}
+/* Grid برای دسته‌بندی باکس‌ها */
+.category-grid {
+    display: grid;
+    gap: 15px; /* فاصله بین باکس‌ها */
+    margin: 20px auto;
+    max-width: 1000px; /* حداکثر عرض کل بخش دسته‌بندی */
+    padding: 10px;
+}
+/* حالت موبایل: ۲ ستون */
+@media (max-width: 768px) {
+    .category-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+/* حالت دسکتاپ: ۴ ستون */
+@media (min-width: 769px) {
+    .category-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+/* استایل باکس‌های رنگی */
+.category-card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 80px; /* ارتفاع باکس‌ها */
+    padding: 10px;
+    border-radius: 12px;
+    text-decoration: none !important; /* حذف خط زیر لینک */
+    transition: transform 0.2s, box-shadow 0.2s;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+    font-weight: bold;
+    font-size: 0.95em;
+    color: #ffffff !important; /* رنگ متن سفید */
+}
+/* افکت هنگام نگه داشتن موس (Hover) */
+.category-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
 }