style: optimize ui

XPoet · XPoet · commit 2f9dd67935fc · 2023-03-30T17:15:39.000+08:00
diff --git a/src/components/copy-image-link/copy-image-link.styl b/src/components/copy-image-link/copy-image-link.styl
@@ -24,16 +24,16 @@
     .btn-item {
       box-sizing border-box
       padding 2rem 4rem
-      color var(--default-text-color)
+      color var(--text-color)
       font-size 12rem
-      border 1rem solid var(--default-text-color)
+      border 1rem solid var(--text-color)
       border-radius 5rem
       box-shadow 0 1rem 2rem rgba(0, 0, 0, 0.3)
       cursor pointer
 
       &:hover {
         color var(--background-color)
-        background var(--default-text-color)
+        background var(--text-color)
       }
     }
   }
diff --git a/src/components/folder-card/folder-card.styl b/src/components/folder-card/folder-card.styl
@@ -13,7 +13,7 @@
   user-select none
 
   &:hover {
-    background var(--second-background-color)
+    background var(--background-color-2)
   }
 
   .icon {
diff --git a/src/components/header-content/header-content.styl b/src/components/header-content/header-content.styl
@@ -75,8 +75,8 @@
         height 38rem
         margin-left 10rem
         padding 1rem
-        color var(--default-text-color)
-        border 1rem solid var(--default-text-color)
+        color var(--text-color)
+        border 1rem solid var(--text-color)
         border-radius 50%
 
         img {
diff --git a/src/components/image-card/image-card.styl b/src/components/image-card/image-card.styl
@@ -13,7 +13,7 @@ $infoBoxHeight = 58rem
 
   &.checked
   &:hover {
-    box-shadow 0 0 10rem #666
+    box-shadow 0 0 10rem var(--shadow-hover-color)
   }
 
   &.listing {
@@ -77,7 +77,7 @@ $infoBoxHeight = 58rem
       width 100%
       height 100%
       padding 5rem
-      color var(--default-text-color)
+      color var(--text-color)
 
       .rename-input {
         display flex
@@ -127,7 +127,7 @@ $infoBoxHeight = 58rem
       font-size 18rem
       background var(--background-color)
       border-radius 50%
-      box-shadow 0 0 6rem #555
+      box-shadow 0 0 6rem var(--shadow-color)
       cursor pointer
 
       &:last-child {
diff --git a/src/components/image-selector/image-selector.styl b/src/components/image-selector/image-selector.styl
@@ -7,7 +7,7 @@
   box-sizing border-box
   width 100%
   padding 4rem 12rem
-  border-bottom 1rem solid var(--third-background-color)
+  border-bottom 1rem solid var(--background-color-3)
 
 
   .selector-left-box {
@@ -23,7 +23,8 @@
     }
 
     .cancel-select-btn {
-      color #576b95
+      color var(--el-color-primary-light-3)
+      font-size 13rem
       cursor pointer
     }
 
diff --git a/src/components/main-container/main-container.styl b/src/components/main-container/main-container.styl
@@ -1,15 +1,15 @@
 @import "../../style/base.styl"
 
 $top-container-height = 60rem
-$left-side-width = 80rem
+$left-side-width = 100rem
 
 .main-container {
   position absolute
   box-sizing border-box
   width 100%
   height 100%
   font-size 15rem
-  background var(--second-background-color)
+  background var(--background-color-2)
 
   .top-container {
     position relative
@@ -24,7 +24,6 @@ $left-side-width = 80rem
     box-sizing border-box
     width 100%
     height 'calc(100% - %s)' % $top-container-height
-    padding-top $component-interval
 
     .bottom-content {
       position relative
@@ -41,6 +40,7 @@ $left-side-width = 80rem
         box-sizing border-box
         width $left-side-width
         height 100%
+        padding-top $component-interval
       }
 
 
@@ -49,15 +49,8 @@ $left-side-width = 80rem
         box-sizing border-box
         width 100%
         height 100%
-        padding 0 $component-interval 0 $component-interval
-
-
-        .content {
-          position relative
-          box-sizing border-box
-          width 100%
-          height 100%
-        }
+        padding-top $component-interval
+        padding-left $component-interval
       }
     }
   }
diff --git a/src/components/main-container/main-container.vue b/src/components/main-container/main-container.vue
@@ -11,9 +11,7 @@
         </div>
 
         <div class="right">
-          <div class="content">
-            <router-view />
-          </div>
+          <router-view />
         </div>
       </div>
     </div>
diff --git a/src/components/nav-content/nav-content.styl b/src/components/nav-content/nav-content.styl
@@ -9,6 +9,7 @@
   width 100%
   height 100%
   background var(--background-color)
+  border-top-right-radius $box-border-radius
 
   ul.nav-list {
     margin 0
@@ -19,13 +20,18 @@
     position relative
     box-sizing border-box
     width 100%
-    height 76rem
+    height 78rem
     cursor pointer
     user-select none
 
+    &:first-child {
+      border-top-right-radius $box-border-radius
+    }
+
     &.active {
+      color var(--el-color-primary)
       font-weight bold
-      background var(--second-background-color)
+      background var(--el-color-primary-light-9)
     }
 
     .nav-content {
diff --git a/src/components/to-upload-image-card/to-upload-image-card.styl b/src/components/to-upload-image-card/to-upload-image-card.styl
@@ -3,7 +3,6 @@
 $info-item-height = 68rem
 $info-item-border = 1rem
 $info-item-padding = 5rem
-$compressed-file-background-color = #228eff
 $image-width = $info-item-height - ($info-item-border * 2)
 
 .to-upload-image-list-card {
@@ -64,7 +63,7 @@ $image-width = $info-item-height - ($info-item-border * 2)
         overflow hidden
         font-size 15rem
         border-radius 5rem
-        box-shadow 0 0 3rem var(--shadow-hover-color)
+        box-shadow 0 0 3rem var(--shadow-color)
         transition all 0.3s ease
 
         &.disable {
@@ -141,7 +140,7 @@ $image-width = $info-item-height - ($info-item-border * 2)
               .item {
                 margin-left 10rem
                 padding 1rem 4rem
-                background var(--third-background-color)
+                background var(--background-color-3)
                 border-radius 2rem
 
 
@@ -158,7 +157,7 @@ $image-width = $info-item-height - ($info-item-border * 2)
                 }
 
                 &.compressed {
-                  color $compressed-file-background-color
+                  color var(--el-color-primary)
                 }
               }
             }
diff --git a/src/components/upload-area/upload-area.styl b/src/components/upload-area/upload-area.styl
@@ -9,15 +9,15 @@
   box-sizing border-box
   width 100%
   height 300rem
-  border 4rem dashed var(--third-text-color)
+  border 4rem dashed var(--text-color-4)
   border-radius 8rem
 
   &.focus {
-    border-color var(--upload-area-focus-color)
+    border-color var(--el-color-primary)
   }
 
   &:hover {
-    border-color var(--upload-area-focus-color)
+    border-color var(--el-color-primary)
   }
 
   label {
diff --git a/src/style/base.styl b/src/style/base.styl
@@ -2,7 +2,7 @@
 @import './variables.styl'
 
 $component-interval = 16rem
-$box-border-radius = 6rem
+$box-border-radius = 10rem
 $content-max-width = 888rem
 $scrollbar-size = 8rem
 
@@ -25,17 +25,17 @@ body {
   height 100%
   margin 0
   padding 0
-  color var(--default-text-color)
+  color var(--text-color)
 }
 
 a {
-  color var(--default-text-color)
+  color var(--text-color)
   font-size 1.5rem
   text-decoration none
 }
 
 a:link {
-  color var(--default-text-color)
+  color var(--text-color)
   text-decoration none
 }
 
@@ -85,7 +85,6 @@ li {
   overflow-y auto
   background var(--background-color)
   border-top-left-radius $box-border-radius
-  border-top-right-radius $box-border-radius
 }
 
 .clearfix {
@@ -104,7 +103,7 @@ li {
   box-sizing border-box
   padding 5rem 0
   color var(--el-text-color-regular)
-  background var(--second-background-color)
+  background var(--background-color-2)
   border 1rem solid var(--border-color)
   border-radius 2rem
 
@@ -115,7 +114,7 @@ li {
     justify-content flex-start
     box-sizing border-box
     padding 5rem 10rem
-    background var(--second-background-color)
+    background var(--background-color-2)
     cursor pointer
 
     &.copy-link {
diff --git a/src/style/element-plus.styl b/src/style/element-plus.styl
@@ -1,9 +1,8 @@
 :root {
   --el-color-primary #4975c6
-  --el-color-primary-light-3 #7998ff
+  --el-color-primary-light-3 #5482d3
   --el-color-primary-light-5 #a0bbff
   --el-color-primary-light-7 #c6d3ff
   --el-color-primary-light-8 #d9e2ff
   --el-color-primary-light-9 #ecefff
-  --el-color-primary-dark-2 #3a5c9b
 }
diff --git a/src/style/variables.styl b/src/style/variables.styl
diff --git a/src/views/help-info/help-info.styl b/src/views/help-info/help-info.styl
diff --git a/src/views/my-settings/my-settings.styl b/src/views/my-settings/my-settings.styl
diff --git a/src/views/upload-image/upload-image.styl b/src/views/upload-image/upload-image.styl

Original file line number	Diff line number	Diff line change
`@@ -24,16 +24,16 @@`
`24`	`24`	`.btn-item {`
`25`	`25`	`box-sizing border-box`
`26`	`26`	`padding 2rem 4rem`
`27`		`- color var(--default-text-color)`
	`27`	`+ color var(--text-color)`
`28`	`28`	`font-size 12rem`
`29`		`- border 1rem solid var(--default-text-color)`
	`29`	`+ border 1rem solid var(--text-color)`
`30`	`30`	`border-radius 5rem`
`31`	`31`	`box-shadow 0 1rem 2rem rgba(0, 0, 0, 0.3)`
`32`	`32`	`cursor pointer`
`33`	`33`
`34`	`34`	`&:hover {`
`35`	`35`	`color var(--background-color)`
`36`		`- background var(--default-text-color)`
	`36`	`+ background var(--text-color)`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`user-select none`
`14`	`14`
`15`	`15`	`&:hover {`
`16`		`- background var(--second-background-color)`
	`16`	`+ background var(--background-color-2)`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.icon {`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`box-sizing border-box`
`8`	`8`	`width 100%`
`9`	`9`	`padding 4rem 12rem`
`10`		`- border-bottom 1rem solid var(--third-background-color)`
	`10`	`+ border-bottom 1rem solid var(--background-color-3)`
`11`	`11`
`12`	`12`
`13`	`13`	`.selector-left-box {`
`@@ -23,7 +23,8 @@`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.cancel-select-btn {`
`26`		`- color #576b95`
	`26`	`+ color var(--el-color-primary-light-3)`
	`27`	`+ font-size 13rem`
`27`	`28`	`cursor pointer`
`28`	`29`	`}`
`29`	`30`