[FIX] Mainloader.

evolution-cms · Jul 23, 2023 · b1a7abe · b1a7abe
1 parent 1a1e0e9
commit b1a7abe
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 59 deletions.
diff --git a/manager/media/style/default/css/index.css b/manager/media/style/default/css/index.css
@@ -20,11 +20,13 @@
 #resizer:hover { background-color: rgba(0, 0, 0, 0.1); }
 #mask_resizer { position: absolute; width: 100%; height: 100%; }
 /* mainloader */
-#mainloader { position: absolute; z-index: 50000; top: 0; left: 0; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 15% 0 0 0; background-color: rgba(255, 255, 255, 0.64); opacity: 0; visibility: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s }
-#mainloader div {font-size: 3.5em; position: absolute; top: 0; left: 0; padding-top: 270px; padding-left: calc(50% - 45px);}
-#mainloader.show { opacity: 0.75; visibility: visible; -webkit-transition-duration: 0.1s; transition-duration: 0.1s }
-#mainloader::before { content: ""; display: block; position: absolute; z-index: 1; left: 50%; top: 30%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; animation: rotate 2s linear infinite; box-shadow: 5px 5px 0 0 rgb(234, 132, 82), 14px -7px 0 0 rgba(111, 163, 219, 0.7), -7px 11px 0 0 rgba(112, 193, 92, 0.74), -11px -7px 0 0 rgba(147, 205, 99, 0.78); }
-.sidebar-closed #tree { width: 0 !important; }
+#mainloader {position: absolute; z-index: 50000; top: 0; left: 0; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 15% 0 0 0; background-color: rgba(255, 255, 255, 0.64); opacity: 0; visibility: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s }
+#mainloader.show {opacity: 0.75; visibility: visible; -webkit-transition-duration: 0.1s; transition-duration: 0.1s}
+#mainloader::before {display: none;}
+.evo__logo {font-size: 3.5em;position: fixed; top: 40%; left: 50%;}
+.evo__logo::before {content: ""; display: block; position: absolute; z-index: 1; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; transform: translate(-50%, -50%) rotate(0deg); animation: rotateLogo 2s linear infinite; box-shadow: 5px 5px 0 0 rgb(234, 132, 82), 14px -7px 0 0 rgba(111, 163, 219, 0.7), -7px 11px 0 0 rgba(112, 193, 92, 0.74), -11px -7px 0 0 rgba(147, 205, 99, 0.78);}
+@keyframes rotateLogo {to {transform: translate(-50%, -50%) rotate(360deg)}}
+.sidebar-closed #tree {width: 0 !important;}
 .sidebar-closed #main, .sidebar-closed #resizer { left: 0 !important; }
 @media (min-width: 1200px) {
 #mainMenu { height: 2.5rem; }

diff --git a/manager/media/style/default/login.tpl b/manager/media/style/default/login.tpl
@@ -429,58 +429,12 @@
             margin-bottom: 0.9375rem;
         }
         /* mainloader */
-
-        #mainloader {
-            position: absolute;
-            z-index: 50000;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            text-align: center;
-            vertical-align: middle;
-            padding: 15% 0 0 0;
-            background-color: rgba(255, 255, 255, 0.64);
-            opacity: 0;
-            visibility: hidden;
-            -webkit-transition-duration: 0.3s;
-            transition-duration: 0.3s
-        }
-        #mainloader div {
-            font-size: 3.5em;
-            position: absolute;
-            top: 0;
-            left: 0;
-            padding-top: 275px;
-            padding-left: calc(50% - 45px);
-        }
-        #mainloader::before {
-            content: "";
-            display: block;
-            position: absolute;
-            z-index: 1;
-            left: 50%;
-            top: 30%;
-            width: 7.5rem;
-            height: 7.5rem;
-            margin: -3.75rem 0 0 -3.75rem;
-            border-radius: 50%;
-            animation: rotate 2s linear infinite;
-            box-shadow: 0.3125rem 0.3125rem 0 0 rgb(234, 132, 82), 0.875rem -0.4375rem 0 0 rgba(111, 163, 219, 0.7), -0.4375rem 0.6875rem 0 0 rgba(112, 193, 92, 0.74), -0.6875rem -0.4375rem 0 0 rgba(147, 205, 99, 0.78);
-        }
-        #mainloader.show {
-            opacity: 0.75;
-            visibility: visible;
-            -webkit-transition-duration: 0.1s;
-            transition-duration: 0.1s
-        }
-        /* loader keyframes  */
-
-        @keyframes rotate {
-            to {
-                transform: rotate(360deg)
-            }
-        }
+        #mainloader {position: absolute; z-index: 50000; top: 0; left: 0; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 15% 0 0 0; background-color: rgba(255, 255, 255, 0.64); opacity: 0; visibility: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s }
+        #mainloader.show {opacity: 0.75; visibility: visible; -webkit-transition-duration: 0.1s; transition-duration: 0.1s}
+        #mainloader::before {display: none;}
+        .evo__logo {font-size: 3.5em;position: fixed; top: 40%; left: 50%;}
+        .evo__logo::before {content: ""; display: block; position: absolute; z-index: 1; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; transform: translate(-50%, -50%) rotate(0deg); animation: rotateLogo 2s linear infinite; box-shadow: 5px 5px 0 0 rgb(234, 132, 82), 14px -7px 0 0 rgba(111, 163, 219, 0.7), -7px 11px 0 0 rgba(112, 193, 92, 0.74), -11px -7px 0 0 rgba(147, 205, 99, 0.78);}
+        @keyframes rotateLogo {to {transform: translate(-50%, -50%) rotate(360deg)}}
         /* loginbox keyframes */
 
         @-webkit-keyframes anim-loginbox {
@@ -596,7 +550,7 @@
 </div>
 
 <!-- loader -->
-<div id="mainloader"><div>EVO</div></div>
+<div id="mainloader"><div class="evo__logo">EVO</div></div>
 
 <!-- script -->
 <script>

diff --git a/manager/views/frame/1.blade.php b/manager/views/frame/1.blade.php
@@ -374,7 +374,7 @@ class="{{ $_style['icon_home'] }}"></i></h2>
                 document.getElementsByClassName("tabframes").setAttribute("scrolling", "no");
             }
         </script>
-            <div id="mainloader"><div>EVO</div></div>
+        <div id="mainloader"><div class="evo__logo">EVO</div></div>
     </div>
     <div id="resizer"></div>
     <div id="searchresult"></div>