ui: update keep-container box-shadow style

XPoet · Sep 6, 2023 · 58adea9 · 58adea9
1 parent 7187d4e
commit 58adea9
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 39 deletions.
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
@@ -186,36 +186,6 @@ img {
 }
 
 
-// ======================================================================
-// button
-// ======================================================================
-button {
-  margin 0
-  padding 0
-  background transparent
-  border 0
-  outline none
-  cursor pointer
-}
-
-.btn {
-  position relative
-  display inline-block
-  padding 0.4rem 1rem
-  white-space nowrap
-  text-align center
-  background var(--background-color-1)
-  border-radius 0.3rem
-  box-shadow 2px 2px 5px var(--shadow-color)
-  cursor pointer
-
-  &:hover {
-    color var(--background-color-1)
-    background var(--primary-color)
-  }
-}
-
-
 // ======================================================================
 // flex center
 // ======================================================================

diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl
@@ -4,7 +4,7 @@ keep-container(sValue, pValue, mbValue) {
   padding pValue
   background var(--content-background-color)
   border-radius var(--box-border-radius)
-  box-shadow 2px 2px 5px var(--shadow-color)
+  box-shadow 0 0 8px var(--shadow-color)
 
   if (sValue != 1) {
     transition-t("transform", "0", "0.2", "linear")
@@ -14,7 +14,7 @@ keep-container(sValue, pValue, mbValue) {
     if (sValue != 1) {
       transform scale(sValue)
     }
-    box-shadow 2px 2px 8px var(--shadow-hover-color)
+    box-shadow 0 0 12px var(--shadow-hover-color)
   }
 
   +keep-tablet() {

diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
@@ -98,8 +98,8 @@ $badge-background-color = lighten($text-color-3, 40%)
 $border-color = darken($background-color-1, 30%)
 $selection-color = lighten($primary-color, 10%)
 
-$shadow-color = rgba(0, 0, 0, 0.2)
-$shadow-hover-color = rgba(0, 0, 0, 0.3)
+$shadow-color = rgba(0, 0, 0, 0.16)
+$shadow-hover-color = rgba(0, 0, 0, 0.22)
 
 $scrollbar-color = lighten($text-color-3, 10%)
 $scrollbar-background-color = darken($background-color-1, 10%)
@@ -144,8 +144,8 @@ $dark-badge-background-color = lighten($dark-text-color-3, 40%)
 $dark-border-color = lighten($dark-background-color-1, 30%)
 $dark-selection-color = darken($selection-color, 20%)
 
-$dark-shadow-color = rgba(128, 128, 128, 0.2)
-$dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
+$dark-shadow-color = rgba(120, 120, 120, 0.18)
+$dark-shadow-hover-color = rgba(120, 120, 120, 0.24)
 
 $dark-scrollbar-color = darken($dark-background-color-1, 10%)
 $dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)

diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
@@ -12,10 +12,10 @@ $logo-image-box-width = 2.8rem
   height 100%
   padding-top $scroll-progress-bar-height
   background var(--background-color-1)
-  box-shadow 2px 2px 5px var(--shadow-color)
+  box-shadow 1px 2px 6px var(--shadow-color)
 
   &:hover {
-    box-shadow 2px 2px 8px var(--shadow-hover-color)
+    box-shadow 1px 2px 10px var(--shadow-hover-color)
   }
 
   .header-content {

diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
@@ -8,7 +8,7 @@
       position relative
       overflow hidden
 
-      keep-container(var(--home-post-hover-scale), 0, 2.6rem)
+      keep-container(var(--home-post-hover-scale), 0, 2.8rem)
 
       .home-article-item-top {
         width 100%