style(components): 修改组件UI样式

kaze-k · Jul 30, 2024 · b52efcb · b52efcb
1 parent e7c4441
commit b52efcb
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/src/Layout/Contents/render.tsx b/src/Layout/Contents/render.tsx
@@ -19,7 +19,7 @@ const CLASSNAMES: CSSTransitionClassNames = {
 
 // 过渡动画
 const KEYFRAMES: Keyframe[] = [
-  { transform: "translateY(150px)", opacity: 0.5 },
+  { transform: "translateY(120px)", opacity: 0.5 },
   { transform: "translateY(0)", opacity: 1 },
 ]
 

diff --git a/src/components/TypeSelector/components.tsx b/src/components/TypeSelector/components.tsx
@@ -34,7 +34,8 @@ const SelectButton: StyledComponent<"div", SelectButtonProps, SelectButtonProps,
  */
 const SelectItem: StyledComponent<"li", SelectItemProps, SelectItemProps, never> = styled.li<SelectItemProps>(
   (props: SelectItemProps): CSSProp => ({
-    color: props.hover && "var(--select-item-hover-color)",
+    color: props.hover && "var(--select-item-selected-color)",
+    pointerEvents: props.hover ? "none" : "auto",
   }),
 )
 

diff --git a/src/components/TypeSelector/style.module.scss b/src/components/TypeSelector/style.module.scss
@@ -35,6 +35,11 @@
   width: 100%;
   list-style: none;
   cursor: pointer;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    color: var(--select-item-hover-color);
+  }
 }
 
 .select-item-text {
@@ -58,5 +63,5 @@
   top: 0;
   border-radius: 10px;
   transition: transform 0.3s ease-in-out;
-  background-color: var(--select-item-hover-bg-color);
+  background-color: var(--select-item-selected-bg-color);
 }
diff --git a/src/styles/theme/dark.scss b/src/styles/theme/dark.scss
@@ -23,8 +23,9 @@
   --input-caret-color: #ffffff;
   --input-border: 1px solid #343a43;
   --input-hover-border: 1px solid rgb(52 58 67 / 50%);
-  --select-item-hover-color: #fb7299;
-  --select-item-hover-bg-color: rgb(0 0 0 / 50%);
+  --select-item-hover-color: #fba1a8;
+  --select-item-selected-color: #fb7299;
+  --select-item-selected-bg-color: rgb(0 0 0 / 50%);
   --select-button-color: #ffffff;
   --select-button-selected-color: #343a43;
   --select-button-selected-bg-color: #ffffff;

diff --git a/src/styles/theme/light.scss b/src/styles/theme/light.scss
@@ -23,8 +23,9 @@
   --input-caret-color: #fb7299;
   --input-border: 1px solid #fb7299;
   --input-hover-border: 1px solid rgb(251 114 153 / 50%);
-  --select-item-hover-color: #fb7299;
-  --select-item-hover-bg-color: rgb(235 235 235 / 50%);
+  --select-item-hover-color: #fba1a8;
+  --select-item-selected-color: #fb7299;
+  --select-item-selected-bg-color: rgb(235 235 235 / 50%);
   --select-button-color: #ffffff;
   --select-button-selected-color: #fb7299;
   --select-button-selected-bg-color: #ffffff;