fix: unify global colors

xcyeye · Dec 12, 2021 · 7221d48 · 7221d48
1 parent c1de3e3
commit 7221d48
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 25 deletions.
diff --git a/Aurora-theme/lib/client/components/child/RecommendItem.vue b/Aurora-theme/lib/client/components/child/RecommendItem.vue
@@ -4,7 +4,7 @@
       <div class="recommend-bottom">
         <div class="aurora-recommend-bo">
           <router-link :to="getHref">
-            <span>{{item.title === "" ? recommendNoTitle : item.title}}</span>
+            <span class="aurora-hover-color-animate">{{item.title === "" ? recommendNoTitle : item.title}}</span>
           </router-link>
         </div>
       </div>

diff --git a/Aurora-theme/lib/client/components/child/page/PageNext.vue b/Aurora-theme/lib/client/components/child/page/PageNext.vue
@@ -3,12 +3,12 @@
   <div :style="getBgSrc" class="page-bottom-next">
     <div class="page-next-left page-next-item">
       <router-link :to="prePage.path === undefined ? '' : prePage.path">
-        <span :data="prePage.path">{{prePage.title === "" ? recommendNoTitle : prePage.title}}</span>
+        <span :data="prePage.path" class="aurora-hover-color-animate">{{prePage.title === "" ? recommendNoTitle : prePage.title}}</span>
       </router-link>
     </div>
     <div v-if="nextPage !== ''" class="page-next-right page-next-item">
       <router-link :to="nextPage.path === undefined ? '' : nextPage.path">
-        <span :data="nextPage.path">{{nextPage.title === "" ? recommendNoTitle : nextPage.title}}</span>
+        <span :data="nextPage.path" class="aurora-hover-color-animate">{{nextPage.title === "" ? recommendNoTitle : nextPage.title}}</span>
       </router-link>
     </div>
   </div>

diff --git a/Aurora-theme/lib/client/components/child/side/MobileSidebarNav.vue b/Aurora-theme/lib/client/components/child/side/MobileSidebarNav.vue
@@ -25,7 +25,7 @@
           </div>
           <div class="menu-item-right">
             <router-link to="/">
-              <span>Home</span>
+              <span class="">Home</span>
             </router-link>
           </div>
         </div>

diff --git a/Aurora-theme/lib/client/styles/dropdown.scss b/Aurora-theme/lib/client/styles/dropdown.scss
@@ -80,11 +80,11 @@
         padding: 0 1.5rem 0 1.25rem;
 
         &:hover {
-          color: #8186d5;
+          color: var(--aurora-global-active-color);
         }
 
         &.router-link-active {
-          color: #8186d5;
+          color: var(--aurora-global-active-color);
           font-weight: 550;
 
           /*&::before {

diff --git a/Aurora-theme/lib/client/styles/theme.style.css b/Aurora-theme/lib/client/styles/theme.style.css
@@ -1094,6 +1094,7 @@ a[data-v-d8ec41bc] {
 }
 
 .link-bottom {
+    transition: all 700ms;
     height: 70%;
     width: 84%;
     border-radius: var(--borderRadius);
@@ -1130,7 +1131,7 @@ a[data-v-d8ec41bc] {
     }
 
     to {
-        color: var(--hoverColor)
+        color: var(--aurora-global-active-color)
     }
 }
 
@@ -1140,19 +1141,19 @@ a[data-v-d8ec41bc] {
     }
 
     to {
-        color: var(--hoverColor)
+        color: var(--aurora-global-active-color)
     }
 }
 
 @-webkit-keyframes link-bottom {
     0% {
-        color: var(--hoverColor)
+        color: var(--aurora-global-active-color)
     }
 }
 
 @keyframes link-bottom {
     0% {
-        color: var(--hoverColor)
+        color: var(--aurora-global-active-color)
     }
 }
 
@@ -1163,6 +1164,7 @@ a[data-v-d8ec41bc] {
 }
 
 .link-bottom-common {
+    z-index: 2;
     display: flex;
     width: 100%;
     position: absolute
@@ -3726,11 +3728,11 @@ body::-webkit-scrollbar-thumb {
 }
 
 .home-page-gradual-title-item-left {
-    /*transform: translateX(170%);*/
+    transform: translateX(170%);
 }
 
 .home-page-gradual-title-item-right {
-    /*transform: translateX(-170%);*/
+    transform: translateX(-170%);
 }
 
 .home-page-tag-item:hover .home-page-gradual-title-item-left, .home-page-tag-item:hover .home-page-gradual-title-item-right{
@@ -3841,6 +3843,10 @@ body::-webkit-scrollbar-thumb {
     font-weight: bold;
 }
 
+.home-page-gradual-title:hover {
+
+}
+
 .home-page-gradual-other-info-common {
     display: inline-block;
 }
@@ -4044,13 +4050,23 @@ body::-webkit-scrollbar-thumb {
     font-family: aurora-nav-font;
 }
 
+.dropdown-subitem:hover .dropdown-subitem a {
+    -webkit-animation: navbar-link-item-hover .5s;
+    animation: navbar-link-item-hover .5s;
+    -webkit-animation-iteration-count: 1;
+    animation-iteration-count: 1;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    cursor: pointer
+}
+
 @-webkit-keyframes navbar-link-item-hover {
     0% {
         color: var(--fontColor)
     }
 
     to {
-        color: var(--hoverColor)
+        color: var(--aurora-global-active-color)
     }
 }
 
@@ -4060,7 +4076,7 @@ body::-webkit-scrollbar-thumb {
     }
 
     to {
-        color: var(--hoverColor)
+        color: var(--aurora-global-active-color)
     }
 }
 
@@ -4258,7 +4274,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .sidebar-hover-bg-common:hover {
-    background-color: rgba(198, 203, 239, .4);
+    background-color: var(--aurora-global-active-bg);
     cursor: pointer
 }
 
@@ -4382,7 +4398,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 #cutPageActive {
-    background-color: #b2f7ef;
+    background-color: var(--aurora-global-active-bg);
     color: #f5f5f5
 }
 
@@ -4441,7 +4457,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .changePageActive {
-    color: #8186d5
+    color: var(--aurora-global-active-color)
 }
 
 .page-catalog-parent {
@@ -4474,6 +4490,16 @@ body::-webkit-scrollbar-thumb {
     color: var(--fontColor)
 }
 
+.page-catalog-children-level3-title span a span:hover {
+    -webkit-animation: navbar-link-item-hover .5s;
+    animation: navbar-link-item-hover .5s;
+    -webkit-animation-iteration-count: 1;
+    animation-iteration-count: 1;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    cursor: pointer
+}
+
 .catalog-page-spread {
     flex: 1;
     text-align: center
@@ -4609,7 +4635,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .catalogActive .page-catalog-parent {
-    background-color: rgba(198, 203, 239, .4);
+    background-color: var(--aurora-global-active-bg);
     border-radius: 10px
 }
 
@@ -4692,7 +4718,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .sidebar-menu-item:hover {
-    background-color: rgba(198, 203, 239, .4);
+    background-color: var(--aurora-global-active-bg);
     box-shadow: 0 8px 24px rgba(149, 157, 165, .2)
 }
 
@@ -4704,7 +4730,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .sidebar-hover-bg-common:hover .sidebar-page-title span {
-    color: var(--hoverColor)
+    color: var(--aurora-global-active-color)
 }
 
 .sidebar-hover-bg-common:hover .sidebar-page-title span,
@@ -4734,6 +4760,10 @@ body::-webkit-scrollbar-thumb {
     animation-fill-mode: forwards
 }
 
+.sidebar-menu-item:hover .menu-item-right span {
+    color: var(--aurora-global-active-color);
+}
+
 @-webkit-keyframes sidebarMenuItemHover {
     0% {
         padding-left: 0
@@ -4746,11 +4776,11 @@ body::-webkit-scrollbar-thumb {
 
 @-webkit-keyframes sidebarMenuItemEnter {
     0% {
-        padding-left: 10px
+        padding-left: 10px;
     }
 
     to {
-        padding-left: 0
+        padding-left: 0;
     }
 }
 
@@ -4894,7 +4924,7 @@ body::-webkit-scrollbar-thumb {
 
 .tagCloudControl:before,
 .tagListControl:before {
-    color: #00bfff
+    color: var(--aurora-global-active-color)
 }
 
 #sidebar-message img {
@@ -5148,7 +5178,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .page-next-item span {
-    color: #f5f5f5;
+    color: var(--fontColor);
     font-weight: 650;
     font-size: 19px
 }
@@ -5510,4 +5540,14 @@ body::-webkit-scrollbar-thumb {
 
 .catalog-title {
     cursor: pointer;
+}
+
+.aurora-hover-color-animate:hover {
+    -webkit-animation: navbar-link-item-hover .5s;
+    animation: navbar-link-item-hover .5s;
+    -webkit-animation-iteration-count: 1;
+    animation-iteration-count: 1;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    cursor: pointer
 }
diff --git a/Aurora-theme/lib/client/styles/vars.scss b/Aurora-theme/lib/client/styles/vars.scss
@@ -13,9 +13,15 @@
   --homeHeight: 100vh;
   --sidebarCutWidth: 0.9;
   -aurora-tag-opacity: 0.45;
-  --hoverColor: #8186d5;
+  --hoverColor: red;
   --auroraActiveColor: #8186d5;
 
+  //主题全局背景色 包括hover
+  --aurora-global-bg: blue;
+  --aurora-global-active-color: #d20629;
+  //rgba(198, 203, 239, .4)
+  --aurora-global-active-bg: rgba(255, 0, 0, 0.45);
+
   --aurora-page-top-bg: rgba(135, 224, 232, 0.69);
   --aurora-page-top-color: red;