diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index b642f832..cb64317e 100644 --- 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 index c0294dc9..13f3c5c8 100644 --- 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 index 957e1867..e673f5ea 100644 --- 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;