Add background to message

FilipChalupa · Nov 17, 2023 · 959e795 · 959e795
1 parent 9096359
commit 959e795
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/components/Countdown.tsx b/components/Countdown.tsx
@@ -25,7 +25,7 @@ export const Countdown: React.FunctionComponent<CountdownProps> = ({
 	useLocalTime = false,
 	flashOnZero = false,
 	forceFlash = false,
-	message = '',
+	message,
 }) => {
 	const [remainingSeconds, setRemainingSeconds] = React.useState(0)
 
@@ -90,9 +90,13 @@ export const Countdown: React.FunctionComponent<CountdownProps> = ({
 				remainingSeconds === 0 && flashOnZero && <div className="flash" />
 			)}
 			{formattedTime}
-			<div className={clsx('message', isMessageVisible && 'is-visible')}>
-				{lastMessage.current}
-			</div>
+			{message !== undefined && (
+				<>
+					<div className={clsx('message', isMessageVisible && 'is-visible')}>
+						{lastMessage.current}
+					</div>
+				</>
+			)}
 		</div>
 	)
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -110,16 +110,28 @@ body:has(.fullScreenCountdown.is-iframe) {
 
 .message {
 	position: absolute;
+	isolation: isolate;
 	inset: auto 0 0;
 	text-align: center;
 	font-size: 0.3em;
-	padding: 0.3em;
+	padding: 0 0.3em 0.3em;
 	line-height: 1.2;
 	transition-property: translate;
 	translate: 0 100%;
 	transition-timing-function: ease-in-out;
 }
 
+.message::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	background-color: currentColor;
+	opacity: 0.9;
+	box-shadow: 0 0 10px 10px currentColor;
+	filter: invert(100%);
+}
+
 .message.is-visible {
 	translate: 0 0;
 }