Merge pull request #196 from MarleneJiang/issue-173-css颜色抽离

Issue 173 css颜色抽离

Author: MarleneJiang

frontend/assets/css/main.css

@@ -219,6 +219,7 @@ html.light{
   --juejin-navs-background:#ffffff;
   --juejin-text-navs-item:#000000;
   --juejin-list-icon-hover:#f2f3f5;
+  --juejin-category-popover-border:#ebebeb;
 }
 
 html.dark{
@@ -339,6 +340,7 @@ html.dark{
   --juejin-navs-background:#121212;
   --juejin-text-navs-item:#e8ecfa;
   --juejin-list-icon-hover:#515767;
+  --juejin-category-popover-border:#201f1f;
 }
 
 .page-enter-active,

frontend/components/Navs/index.vue

@@ -42,7 +42,7 @@ const isNavShown = inject('isNavShown')
     transition: all .2s;
     @apply flex items-center fixed top-0 left-0 right-0;
     @apply space-between md:justify-around;
-    @apply bg-jj_navigation border-b-1 h-[5rem] lt-sm:(h-[4.333rem]) z-99 border-jj-navs-normal;
+    @apply bg-jj-sidebar border-b-1 h-[5rem] lt-sm:(h-[4.333rem]) z-99 border-jj-navs-normal;
 }
 .logo{
   @apply flex items-center mr-4 ml-6 w-auto inline-block;

frontend/components/Types/index.vue

@@ -52,7 +52,7 @@ const isNavShown = inject('isNavShown')
 .view-types {
   transition: all .2s;
   transform: translateZ(0);
-  @apply bg-jj_navigation w-full fixed top-[5rem] lt-sm:(top-[4.333rem]) shadow-sm shadow-black/5 dark:shadow-white/5 h-[3.833rem] z-1;
+  @apply bg-jj-sidebar w-full fixed top-[5rem] lt-sm:(top-[4.333rem]) shadow-sm shadow-black/5 dark:shadow-white/5 h-[3.833rem] z-1;
 }
 .type-list-item{
   @apply h-full w-auto float-left cursor-pointer whitespace-nowrap flex items-center p-x-[1rem] text-jj-types-normal text-[1.16rem];
@@ -91,7 +91,7 @@ const isNavShown = inject('isNavShown')
   @apply scale-100;
 }
 .category-popover {
-  @apply scale-0 transition-100 delay-150 transition-all bg-jj-light border-jj-border-dropdown-normal;
+  @apply scale-0 transition-100 delay-150 transition-all bg-jj-article border-jj-border-dropdown-normal;
   position: fixed;
   top: 3.833rem;
   padding: 1.17rem 1.17rem .17rem;

frontend/unocss.config.ts

@@ -46,7 +46,7 @@ export default defineConfig({
       jj_font_white: 'var(--jjext-color-font-white)', // #ffffff
       jj_font_black: 'var(--jjext-color-font-1)', // #252933
       jj_bg_gray: 'var(--jjext-color-bg-gray)', // #27272a
-      jj_navigation: 'var(--juejin-navigation)',
+      jj_navigation: 'var(--juejin-navigation)', // #fff //#181818
       jj: {
         thirdly: 'var(--jjext-color-thirdly)', // #86909c
         fourthly: 'var(--jjext-color-fourthly)', // #c9cdd4
@@ -99,6 +99,9 @@ export default defineConfig({
           hover: {
             normal: 'var(--juejin-hover-sign)', // #e8f2ff //#315078
           },
+          category: {
+            normal: 'var(--juejin-category-popover-border)', // #ebebeb //#201f1f
+          },
         },
         stroke: {
           normal: 'var(--juejin-brand-stroke1-normal)', // rgba(30,128,255,0.3)