样式微调，增加背景阴影遮罩 (#287)

* 修正封面阴影 * 增加背景渐变遮罩
Steve-xmh · Nov 3, 2024 · f29ba8b · f29ba8b
1 parent 0acc59d
commit f29ba8b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 23 deletions.
diff --git a/packages/react-full/src/components/Cover/index.module.css b/packages/react-full/src/components/Cover/index.module.css
@@ -1,11 +1,7 @@
 .cover {
-	--base-box-shadow-v-0: rgba(0, 0, 0, 0.15);
-	--base-box-shadow-y-0: 1.2em;
-	--base-box-shadow-r-0: 2em;
-	--base-box-shadow-s-0: -0.6em;
-	--base-box-shadow-v-1: rgba(0, 0, 0, 0.225);
-	--base-box-shadow-y-1: 0.4em;
-	--base-box-shadow-r-1: 2.4em;
+	--base-box-shadow-v-0: rgba(0, 0, 0, 0.19);
+	--base-box-shadow-y-0: 1em;
+	--base-box-shadow-r-0: 1.2em;
 	aspect-ratio: 1 / 1;
 	width: 100%;
 	height: 100%;
@@ -17,23 +13,15 @@
 	filter: drop-shadow(
 			var(--base-box-shadow-v-0) 0px var(--base-box-shadow-y-0)
 				var(--base-box-shadow-r-0)
-		)
-		drop-shadow(
-			var(--base-box-shadow-v-1) 0px var(--base-box-shadow-y-1)
-				var(--base-box-shadow-r-1)
 		);
 	transform: scale(1);
 	transition: background-image 0.5s linear, filter 0.5s ease, transform 0.5s
 		cubic-bezier(0.3, 0.2, 0.2, 1.4);
 
 	&.musicPaused {
-		--base-box-shadow-v-0: rgba(0, 0, 0, 0.15);
-		--base-box-shadow-y-0: 0.6em;
-		--base-box-shadow-r-0: 1em;
-		--base-box-shadow-s-0: -0.3em;
-		--base-box-shadow-v-1: rgba(0, 0, 0, 0.225);
-		--base-box-shadow-y-1: 0.2em;
-		--base-box-shadow-r-1: 1.2em;
+		--base-box-shadow-v-0: rgba(0, 0, 0, 0.19);
+		--base-box-shadow-y-0: 0.8em;
+		--base-box-shadow-r-0: 0.8em;
 		transform: scale(var(--scale-level));
 		transition: background-image 0.5s linear, filter 0.5s ease, transform 0.6s
 			cubic-bezier(0.4, 0.2, 0.1, 1);

diff --git a/packages/react-full/src/components/MediaButton/index.module.css b/packages/react-full/src/components/MediaButton/index.module.css
@@ -27,14 +27,14 @@
 	padding: 0;
 	border: none;
 
-	transition: background-color 0.5s;
+	transition: background-color 0.3s;
 
 	&:hover {
 		background-color: #fff2;
 	}
 
 	&:active {
-		background-color: #fff4;
+		background-color: #fff2;
 
 		* {
 			animation-name: none !important;

diff --git a/packages/react-full/src/components/MenuButton/index.module.css b/packages/react-full/src/components/MenuButton/index.module.css
@@ -4,7 +4,7 @@
 	position: relative;
 	border: none;
 	background: #ffffff15 !important;
-	width: 4vh;
+	width: 3.5vh;
 	margin-left: 16px;
 	border-radius: 50%;
 	align-self: center;

diff --git a/packages/react-full/src/components/PrebuiltLyricPlayer/index.module.css b/packages/react-full/src/components/PrebuiltLyricPlayer/index.module.css
@@ -71,11 +71,11 @@
 		transition: scale 0.3s;
 
 		@media screen and (max-height: 1080px) {
-			scale: 1.2;
+			scale: 1.1;
 		}
 
 		@media screen and (max-height: 768px) {
-			scale: 1;
+			scale: 0.8;
 		}
 
 		@media screen and (max-height: 512px) {

diff --git a/packages/react-full/src/layout/auto.module.css b/packages/react-full/src/layout/auto.module.css
@@ -5,3 +5,13 @@
 	width: 100%;
 	transition: 0.5s ease-in-out;
 }
+
+.background::after {
+	width: 100vw;
+	height: 100vh;
+	content: "";
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	background-image: linear-gradient(#00000000 60%, #0000001a 100%);
+}