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

مدیاویکی:Mobile.css (نمایش مبدأ)

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

۱٬۳۱۵ بایت اضافه‌شده ، ‏۷ سپتامبر ۲۰۲۱

بدون خلاصۀ ویرایش

Nazarzadeh

دیوان‌سالاران، ناظمان (CommentStreams)، مدیران رابط کاربری، مدیران

۸٬۱۵۸

ویرایش

@@ خط ۲۹: / خط ۲۹: @@
 }
 /* portals */
-.portal-column-1-2 {
+.portal-container-2 {
-    float: right;
+	display: grid;
-	width: calc(50% - 8px);
+	grid-gap: 15px;
+	grid-template-columns: repeat(3, auto);
+	grid-template-rows: auto;
+	width: 100%
 }
-.portal-column-right-wide {
+.portal-container-3 {
-    float: right;
+	display: grid;
-    width: 60%;
+	grid-gap: 15px;
+	grid-template-columns: repeat(3, auto);
+	grid-template-rows: auto;
+	width: 100%
 }
-.portal-column-left-narrow {
+.portal-container-4 {
-    float: left;
+	display: grid;
-    width: calc(40% - 16px);
+	grid-gap: 15px;
+	grid-template-columns: repeat(4, auto);
+	grid-template-rows: auto;
+	width: 100%
 }
-.portal-column-1-4 {
+.portal-container-5 {
-    float: right;
+	display: grid;
-	width: calc(25% - 16px);
+	grid-gap: 15px;
+	grid-template-columns: repeat(5, auto);
+	grid-template-rows: auto;
+	width: 100%
 }
-.portal-column-3-4 {
+.portal-container-6 {
-    float: right;
+	display: grid;
-	width: 75%;
+	grid-gap: 15px;
-	margin-left: 16px;
+	grid-template-columns: repeat(6, auto);
+	grid-template-rows: auto;
+	width: 100%
 }
-.portal-column-1-3 {
+.portal-container-7 {
-	float: right;
+	display: grid;
-	width: calc(33% - 16px);
+	grid-gap: 15px;
+	grid-template-columns: repeat(7, auto);
+	grid-template-rows: auto;
+	width: 100%
 }
 .portal-column-2-3 {
-    float: right;
+	grid-column-end: span 2;
-    width: 67%;
-    margin-left: 16px;
 }
-.portal-column-1-6 {
+.portal-column-3-4 {
-    float: right;
+	grid-column-end: span 3;
-	width: calc(16.6% - 16px);
 }
+.portal-column-1-2,
+.portal-column-1-3,
+.portal-column-1-4,
+.portal-column-1-5,
+.portal-column-1-6,
 .portal-column-1-7 {
-	float: right;
+	grid-column-end: span 1;
-	width: calc(14.28% - 16px);
+}
+.portal-column-2-2 {
+	grid-column-end: span 2;
+}
+.portal-column-3-3 {
+	grid-column-end: span 3;
+}
+.portal-column-4-4 {
+	grid-column-end: span 4;
+}
+.portal-column-5-5 {
+	grid-column-end: span 5;
 }
-@media only screen and (max-width: 800px) {
+.portal-column-6-6 {
+	grid-column-end: span 6;
+}
+.portal-column-7-7 {
+	grid-column-end: span 7;
+}
+@media only screen and (max-width: 700px) {
      /* Decouple the columns on narrow screens */
+    .portal-container-2,
+    .portal-container-3,
+    .portal-container-4,
+    .portal-container-5,
+    .portal-container-6,
+    .portal-container-7 {
+		display: block;
+	}
      .portal-column-1-2,
-    .portal-column-right-wide,
-    .portal-column-left-narrow,
      .portal-column-3-4,
      .portal-column-1-3,
-     .portal-column-2-3 {
+     .portal-column-2-3,
-         float: inherit;
+    .portal-column-2-2,
+    .portal-column-3-3,
+	.portal-column-4-4,
+	.portal-column-5-5,
+	.portal-column-6-6,
+	.portal-column-7-7 {
+         flo at: inherit;
          width: 100%;
-         margin: 0;
+         margin-top: 16px;
          display: block !important;
+        text-align: center;
      }
      .portal-column-1-4 {
-		width: calc(50% - 16px);
+		wid th: calc(50% - 16px);
      }
      .portal-column-1-6 {
-		width: calc(33.3% - 16px);
+		wid th: calc(33.3% - 16px);
      }
      .portal-column-1-7 {
-	float: right;
+	flo at: right;
-	width: calc(25% - 16px);
+	wid th: calc(25% - 16px);
-	}
+    }
+}
+@media only screen and (max-width: 600px) {
+    .portal-column-1-4,
+    .portal-column-1-6,
+    .portal-column-1-5 {
+        float: inherit;
+        width: 100%;
+        margin: 0;
+        display: block !important;
+        text-align: center;
+    }
 }
 /* ثابت کردن منوی بالا */