#4186 - Responsive page layouts

plugins_public/tailwind/css/tailwind.css

@@ -505,16 +505,19 @@
 
     /* Common elements: Pages. */
     .bx-layout-wrapper{
-        @apply gap-4 lg:gap-6 xl:gap-8 flex flex-col;
+        @apply gap-4 lg:gap-6 flex flex-col;
     }
     .bx-layout-row{
-        @apply w-full flex relative flex-wrap md:flex-nowrap gap-4 lg:gap-6 xl:gap-8;
+        @apply w-full flex relative flex-wrap md:flex-nowrap gap-4 lg:gap-6;
     }
     .bx-layout-col{
         @apply max-w-full w-full;
     }
     .bx-layout-cell{
-        @apply flex flex-col gap-4 lg:gap-6 xl:gap-8;
+        @apply flex flex-col gap-4 lg:gap-6;
+    }
+    .bx-layout-gap{
+        @apply gap-4 lg:gap-6;
     }
     .bx-def-color-bg-page{
 	    @apply bg-gray-100 dark:bg-gray-900;
@@ -530,12 +533,12 @@
     .bx-def-color-bg-block,
     .bx-def-color-bg-box,
     .bx-popup-color-bg {
-        @apply bg-white dark:bg-gray-800 shadow;
+        @apply bg-white dark:bg-gray-800 shadow-md;
     }
     .bx-def-border-block,
     .bx-def-box,
     .bx-popup-border {
-        @apply ring-1 ring-gray-300 dark:ring-gray-700;
+        @apply ring-1 ring-gray-300/50 dark:ring-gray-600/50;
     }
     .bx-def-border-radius-block,
     .bx-def-box-round-corners,

template/layout_3_columns.html

@@ -6,7 +6,7 @@
                 __cell_1__
             </div>
         </section>
-        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
             <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-1/2" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__

template/layout_bar_content_bar.html

@@ -6,7 +6,7 @@
                 __cell_1__
             </div>
         </section>
-        <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+        <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
             <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-2/3" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__

template/layout_top_area_3_columns.html

@@ -7,7 +7,7 @@
                 __cell_2__
             </div>
         </section>
-        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
             <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-1/2" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__

template/layout_top_area_bar_content_bar.html

@@ -7,7 +7,7 @@
                 __cell_2__
             </div>
         </section>
-        <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+        <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
             <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-2/3" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__

template/layout_topbottom_area_col1_col3_col2.html

@@ -8,7 +8,7 @@
                     __cell_2__
                 </div>
             </section>
-            <section aria-label="Content" class="max-w-full md:w-5/6 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+            <section aria-label="Content" class="max-w-full md:w-5/6 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
                 <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-3/5" aria-label="Main">
                     <div class="bx-layout-cell" id="bx-layout-cell-3">
                         __cell_3__

template/layout_topbottom_area_col2_col5_col3.html

@@ -7,7 +7,7 @@
                 __cell_2__
             </div>
         </section>
-        <section aria-label="Content" class="max-w-full md:w-8/10 flex-1 flex flex-wrap lg:flex-nowrap gap-4 lg:gap-6 xl:gap-8">
+        <section aria-label="Content" class="max-w-full md:w-8/10 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
             <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-3/5" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__