style: modified pjax loading background color

XPoet · Jan 7, 2021 · fb955b6 · fb955b6
1 parent 8cda9c5
commit fb955b6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
@@ -8,11 +8,11 @@
 // ========================================================================================
 $header-height = 76px;                                           // header height
 $header-shrink-height = $header-height * 0.72;                   // header shrink height
-$scroll-progress-bar-height = 2px;                               // scroll progress bar height
-$main-content-width = 80%;                                       // main content width (tablet)
-$main-content-width-tablet = 86%;                                // main content width (PC)
+$scroll-progress-bar-height = 2.8px;                               // scroll progress bar height
+$main-content-width = 80%;                                       // main content width (PC)
+$main-content-width-tablet = 86%;                                // main content width (tablet)
 $main-content-width-mobile = 90%;                                // main content width (mobile)
-$circle-button-width = 38px;                                     // post tool button width
+$post-tool-button-width = 38px;                                  // post tool button width
 $component-spacing-value = 30px;                                 // component-spacing-value (PC)
 
 // main content max width
@@ -76,7 +76,7 @@ $scroll-bar-bg-color = darken($background-color, 10%);
 $link-color = darken($default-text-color, 10%);
 $copyright-info-color = #CC0033;
 $avatar-background-color = #0066CC;
-$loading-progress-bar-color = #990000;
+$loading-progress-bar-color = linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3);
 $lazyload-background-color = rgba(200, 200, 200, 0.5);
 
 
@@ -100,7 +100,7 @@ $dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
 $dark-link-color = lighten($dark-default-text-color, 10%);
 $dark-copyright-info-color = darken($copyright-info-color, 20%);
 $dark-avatar-background-color = darken($avatar-background-color, 10%);
-$dark-loading-progress-bar-color = lighten($loading-progress-bar-color, 50%);
+$dark-loading-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
 $dark-lazyload-background-color = rgba(50, 50, 50, 0.5);
 
 

diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl
@@ -6,8 +6,8 @@ $li-margin-bottom = 12px;
   .tools-list {
     li {
       cursor: pointer;
-      width: $circle-button-width;
-      height: $circle-button-width;
+      width: $post-tool-button-width;
+      height: $post-tool-button-width;
       border-radius: 50%;
       font-size: 1.2rem;
       display: flex;

diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl
@@ -9,10 +9,9 @@
     position: absolute;
     top: 0;
     left: 0;
-    height: 1px;
+    height: 1.8px;
     width: 0;
     background: var(--loading-progress-bar-color);
-    box-shadow: 0 1px 2px var(--loading-progress-bar-color);
     visibility: hidden;
     opacity: 0;
     z-index: $z-index-8;