[2.6.0] Update header style

templaza · Oct 4, 2022 · 1908920 · 1908920
1 parent 6d9d464
commit 1908920
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -241,6 +241,7 @@
 	border-radius: 50%;
 	border: 2px solid transparent;
 	border-top: 2px solid #210048;
+	border-left: 2px solid #210048;
 	-webkit-animation: preload-spin 2s linear infinite;
 	animation: preload-spin 2s linear infinite;
 }
@@ -259,6 +260,7 @@
 	right: 8%;
 	bottom: 8%;
 	border-top-color: #210048;
+	border-left-color: #210048;
 	-webkit-animation: preload-spin 3s linear infinite;
 	animation: preload-spin 3.5s linear infinite;
 }
@@ -269,6 +271,7 @@
 	right: 18%;
 	bottom: 18%;
 	border-top-color: #210048;
+	border-left-color: #210048;
 	-webkit-animation: preload-spin 1.5s linear infinite;
 	animation: preload-spin 1.75s linear infinite;
 }

diff --git a/framework/frontend/header/stacked.php b/framework/frontend/header/stacked.php
@@ -60,14 +60,18 @@
              <?php
              // header block 1 starts
              if ($block_1_type == 'position') {
-                 echo '<div class="w-100 header-block-item d-none d-lg-flex justify-content-start align-items-center">';
+                 echo '<div class="w-100 d-none d-lg-flex justify-content-start align-items-center">';
+                 echo '<div class="w-100 header-block-item d-flex justify-content-start align-items-center">';
                  echo $document->position($block_1_position, 'xhtml');
                  echo '</div>';
+                 echo '</div>';
              }
              if ($block_1_type == 'custom') {
-                 echo '<div class="w-100 header-block-item d-none d-lg-flex justify-content-start align-items-center">';
+                 echo '<div class="w-100 d-none d-lg-flex justify-content-start align-items-center">';
+                 echo '<div class="w-100 header-block-item d-flex justify-content-start align-items-center">';
                  echo $block_1_custom;
                  echo '</div>';
+                 echo '</div>';
              }
              // header block 1 ends
 
@@ -235,20 +239,24 @@
 
             // header block starts
             if ($block_1_type == 'position') {
-               echo '<div class="d-none d-lg-flex w-100 header-block-item justify-content-end py-2 align-items-center">';
+               echo '<div class="d-none d-lg-flex w-100 justify-content-end py-2 align-items-center">';
+               echo '<div class="d-flex w-100 justify-content-end header-block-item">';
                echo $document->position($block_1_position, 'xhtml');
                echo '</div>';
+               echo '</div>';
             }
             if ($block_1_type == 'custom') {
-               echo '<div class="d-none d-lg-flex w-100 header-block-item justify-content-end py-2 align-items-center">';
-               echo $block_1_custom;
-               echo '</div>';
+                echo '<div class="d-none d-lg-flex w-100 justify-content-end py-2 align-items-center">';
+                echo '<div class="d-flex w-100 justify-content-end header-block-item">';
+                echo $block_1_custom;
+                echo '</div>';
+                echo '</div>';
             }
             // header block ends
 
             if ($enable_offcanvas) {
             ?>
-               <div class="d-flex justify-content-end">
+               <div class="d-flex justify-content-end ms-3">
                   <?php $document->include('offcanvas.trigger', ['offcanvas' => '#astroid-offcanvas', 'visibility' => $offcanvas_togglevisibility, 'effect' => $offcanvas_animation, 'direction' => $offcanvas_direction]); ?>
                </div>
             <?php
@@ -266,14 +274,18 @@
             // header nav ends
             // header block starts
             if ($block_2_type == 'position') {
-               echo '<div class="d-flex header-block-item justify-content-end py-3 align-items-center">';
+               echo '<div class="d-flex justify-content-end py-3 align-items-center">';
+               echo '<div class="header-block-item">';
                echo $document->position($block_2_position, 'xhtml');
                echo '</div>';
+               echo '</div>';
             }
             if ($block_2_type == 'custom') {
-               echo '<div class="d-flex header-block-item justify-content-end py-3 align-items-center">';
+               echo '<div class="d-flex justify-content-end py-3 align-items-center">';
+               echo '<div class="header-block-item">';
                echo $block_2_custom;
                echo '</div>';
+               echo '</div>';
             }
             echo '</div>';
             // header block ends

diff --git a/framework/frontend/preloader.php b/framework/frontend/preloader.php
@@ -83,7 +83,7 @@
          break;
        case 'triple-spinner':
            $preloaderHTML = '<div class="triple-spinner"></div>';
-           $preloaderStyles = '.triple-spinner {display: block;position: relative;width: ' . $preloader_size . 'px;height: ' . $preloader_size . 'px;border-radius: 50%;border: 2px solid transparent;border-top: 2px solid ' . $preloader_color . ';-webkit-animation: preload-spin 2s linear infinite;animation: preload-spin 2s linear infinite;}.triple-spinner::before, .triple-spinner::after {content: "";position: absolute;border-radius: 50%;border: 2px solid transparent;}.triple-spinner::before {opacity: 0.85;top: 8%;left: 8%;right: 8%;bottom: 8%;border-top-color: ' . $preloader_color . ';-webkit-animation: preload-spin 3s linear infinite;animation: preload-spin 3.5s linear infinite;}.triple-spinner::after {opacity: 0.7;top: 18%;left: 18%;right: 18%;bottom: 18%;border-top-color: ' . $preloader_color . ';-webkit-animation: preload-spin 1.5s linear infinite;animation: preload-spin 1.75s linear infinite;}@-webkit-keyframes preload-spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes preload-spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}';
+           $preloaderStyles = '.triple-spinner {display: block;position: relative;width: ' . $preloader_size . 'px;height: ' . $preloader_size . 'px;border-radius: 50%;border: 2px solid transparent;border-top: 2px solid ' . $preloader_color . ';border-left: 2px solid ' . $preloader_color . ';-webkit-animation: preload-spin 2s linear infinite;animation: preload-spin 2s linear infinite;}.triple-spinner::before, .triple-spinner::after {content: "";position: absolute;border-radius: 50%;border: 2px solid transparent;}.triple-spinner::before {opacity: 0.85;top: 8%;left: 8%;right: 8%;bottom: 8%;border-top-color: ' . $preloader_color . ';border-left-color: ' . $preloader_color . ';-webkit-animation: preload-spin 3s linear infinite;animation: preload-spin 3.5s linear infinite;}.triple-spinner::after {opacity: 0.7;top: 18%;left: 18%;right: 18%;bottom: 18%;border-top-color: ' . $preloader_color . ';border-left-color: ' . $preloader_color . ';-webkit-animation: preload-spin 1.5s linear infinite;animation: preload-spin 1.75s linear infinite;}@-webkit-keyframes preload-spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes preload-spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}';
            break;
        case 'cm-spinner':
            $preloaderHTML = '<div class="cm-spinner"></div>';