Styling and faster overlay animation

oskarrough · Feb 22, 2024 · 8a3eaac · 8a3eaac
1 parent adce665
commit 8a3eaac
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/ui/styles/overlay.css b/src/ui/styles/overlay.css
@@ -50,7 +50,7 @@
 	width: 100%;
 	overflow-x: hidden;
 	overflow-y: auto;
-	transform: translate3d(0, 4rem, 0);
+	transform: translate3d(0, 1rem, 0);
 	display: block;
 	opacity: 0;
 	visibility: hidden;
@@ -80,8 +80,8 @@
 	opacity: 1;
 	transform: translate3d(0, 0, 0);
 	transition:
-		opacity 400ms 60ms var(--easing),
-		transform 400ms 60ms var(--easing);
+		opacity 600ms 60ms var(--easing),
+		transform 600ms 60ms var(--easing);
 }
 .Overlay[open] .Overlay-bg {
 	display: block;

diff --git a/src/ui/styles/targets.css b/src/ui/styles/targets.css
@@ -77,7 +77,7 @@
 .Healthbar-label {
 	position: relative;
 	z-index: 1;
-	margin: 0.2em 0;
+	margin: 0.4em 0;
 	font-weight: bold;
 	color: var(--text);
 	text-shadow: var(--text-stroke) 1px 0px 0px, var(--text-stroke) 0.540302px 0.841471px 0px,
@@ -97,7 +97,7 @@
 }
 @media (min-width: 800px) {
 	.Healthbar-label span {
-		transform: scale(1.7);
+		transform: scale(1.5);
 	}
 }
 .Healthbar-bar {
@@ -108,10 +108,10 @@
 	max-width: 100%;
 	height: 100%;
 	background: var(--yellow);
-	transition: width 400ms, background 200ms;
+	transition: width 600ms var(--easing), background 300ms var(--easing);
 	border-radius: 0.5rem;
 	font-size: 1.25rem;
-	line-height: 1.3;
+	line-height: 1.8;
 	font-weight: bold;
 	text-shadow: 1px 1px 0 hsla(0, 0%, 95%, 0.8);
 }