الگو:مربع های کنار هم: تفاوت میان نسخه‌ها

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

دیداریویکی‌متن

@@ خط ۱: / خط ۱: @@
-<div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: flex-start; width: 100%; margin: 10px 0;">
+<div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; margin: 20px 0; padding: 0; box-sizing: border-box;">
-<div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+  <!-- ساختار تکرار شونده برای ۵ آیتم -->
-        {{کانتینر عکس مربع|تصویر={{{تصویر1|}}}}}
+  <!-- نکته: برای هر آیتم، کلاس‌های مربوط به افکت سه‌بعدی باید در استایل‌شیت اصلی تعریف شده باشد -->
-        {{#if:{{{کپشن1|}}}|
-         <div style="font-size: 1em; text-align: center;margin-top:-8px;padding:0;">{{{کپشن1}}}</div>
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-        }}
+    <div class="wiki-3d-box">
+      <div class="wiki-3d-inner-frame">
+         <div class="wiki-3d-image-wrapper-circle">{{{تصویر1|}}}</div>
+      </div>
      </div>
+    {{#if:{{{کپشن1|}}}|<div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">{{{کپشن1}}}</div>}}
+  </div>
-<div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-        {{کانتینر عکس مربع|تصویر={{{تصویر2|}}}}}
+    <div class="wiki-3d-box">
-        {{#if:{{{کپشن2|}}}|
+      <div class="wiki-3d-inner-frame">
-         <div style="font-size: 1em; text-align: center;margin-top:-8px;padding:0;">{{{کپشن2}}}</div>
+         <div class="wiki-3d-image-wrapper-circle">{{{تصویر2|}}}</div>
-        }}
+      </div>
      </div>
+    {{#if:{{{کپشن2|}}}|<div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">{{{کپشن2}}}</div>}}
+  </div>
-<div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-        {{کانتینر عکس مربع|تصویر={{{تصویر3|}}}}}
+    <div class="wiki-3d-box">
-        {{#if:{{{کپشن3|}}}|
+      <div class="wiki-3d-inner-frame">
-         <div style="font-size: 1em; text-align: center;margin-top:-8px;padding:0;">{{{کپشن3}}}</div>
+         <div class="wiki-3d-image-wrapper-circle">{{{تصویر3|}}}</div>
-        }}
+      </div>
      </div>
+    {{#if:{{{کپشن3|}}}|<div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">{{{کپشن3}}}</div>}}
+  </div>
-    <div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 16%; min-width: 120px; gap: 2px;">
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-        {{کانتینر عکس مربع|تصویر={{{تصویر4|}}}}}
+    <div class="wiki-3d-box">
-        {{#if:{{{کپشن4|}}}|
+      <div class="wiki-3d-inner-frame">
-         <div style="font-size: 1em; text-align: center;margin-top:-8px;padding:0;">{{{کپشن4}}}</div>
+         <div class="wiki-3d-image-wrapper-circle">{{{تصویر4|}}}</div>
-        }}
+      </div>
      </div>
+    {{#if:{{{کپشن4|}}}|<div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">{{{کپشن4}}}</div>}}
+  </div>
+  <div style="display: flex; flex-direction: column; align-items: center; flex: 0 1 calc(20% - 20px); min-width: 120px; max-width: 180px;">
-<div style="display: flex; flex-direction: column; align-items: center; flex: 1 1 180px; max-width: 250px; gap: 2px;">
+    <div class="wiki-3d-box">
-        {{کانتینر عکس مربع|تصویر={{{تصویر5|}}}}}
+      <div class="wiki-3d-inner-frame">
-        {{#if:{{{کپشن5|}}}|
+         <div class="wiki-3d-image-wrapper-circle">{{{تصویر5|}}}</div>
-         <div style="font-size: 1em; text-align: center;margin-top:-8px;padding:0;">{{{کپشن5}}}</div>
+      </div>
-        }}
      </div>
+    {{#if:{{{کپشن5|}}}|<div style="font-size: 0.9em; text-align: center; margin-top: 8px; font-weight: bold;">{{{کپشن5}}}</div>}}
+  </div>
 </div>