Change some CSS (#14)

Former-commit-id: 78a3c6a

Author: kixelated

app/src/controls.tsx

@@ -26,26 +26,21 @@ export function Controls(props: {
 	canvas: Canvas;
 }): JSX.Element {
 	return (
-		<div class="controls pointer-gaps" role="toolbar" aria-label="Media controls">
-			{/* Left group */}
-			<div class="flex gap-inherit">
-				<Microphone audio={props.camera.audio} />
-				<Camera video={props.camera.video} room={props.room} />
-				<Screen video={props.screen.video} audio={props.screen.audio} room={props.room} />
-			</div>
-
-			{/* Center group */}
-			<div class="flex-1 flex justify-center">
-				<Chat broadcast={props.camera} />
-			</div>
-
-			{/* Right group */}
-			<div class="flex gap-inherit">
-				<Volume room={props.room} />
-				<ClosedCaptions />
-				<Advanced />
-				<Fullscreen canvas={props.canvas} />
-			</div>
+		<div
+			class="fixed bottom-0 left-0 right-0 flex items-end gap-3 p-3 text-shadow-lg text-xl pointer-events-none"
+			style={{ "z-index": "10" }}
+			role="toolbar"
+			aria-label="Media controls"
+		>
+			<Microphone audio={props.camera.audio} />
+			<Camera video={props.camera.video} room={props.room} />
+			<Screen video={props.screen.video} audio={props.screen.audio} room={props.room} />
+			<Chat broadcast={props.camera} />
+			<div style={{ "flex-grow": "1", "pointer-events": "none", "backdrop-filter": "none" }} />
+			<Volume room={props.room} />
+			<ClosedCaptions />
+			<Advanced />
+			<Fullscreen canvas={props.canvas} />
 		</div>
 	);
 }
@@ -67,7 +62,7 @@ function Microphone(props: { audio: Publish.Audio }): JSX.Element {
 	return (
 		<Tooltip content={root() ? "Disable microphone" : "Enable microphone"} position="top">
 			<fieldset
-				class="flex flex-col-reverse"
+				class="flex flex-col-reverse pointer-events-auto"
 				aria-label="Microphone controls"
 				onMouseEnter={() => setHover(true)}
 				onMouseLeave={() => setHover(false)}
@@ -77,7 +72,7 @@ function Microphone(props: { audio: Publish.Audio }): JSX.Element {
 				<button
 					type="button"
 					onClick={toggle}
-					class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2"
+					class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2 backdrop-blur-sm bg-transparent rounded"
 					role="switch"
 					aria-checked={!!root()}
 					aria-label="Toggle microphone"
@@ -98,7 +93,7 @@ function Microphone(props: { audio: Publish.Audio }): JSX.Element {
 						max="2"
 						value={volume()}
 						onInput={(e) => Settings.microphoneGain.set(Number(e.currentTarget.value))}
-						class="cursor-pointer"
+						class="cursor-pointer backdrop-blur-sm bg-transparent rounded py-1 px-2 outline-none"
 						aria-label="Microphone volume"
 						style={{
 							"writing-mode": "vertical-rl",
@@ -123,7 +118,7 @@ function Camera(props: { video: Publish.Video; room: Room }): JSX.Element {
 			<button
 				type="button"
 				onClick={toggle}
-				class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2"
+				class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
 				role="switch"
 				aria-checked={!!media()}
 				aria-label="Toggle camera"
@@ -153,7 +148,7 @@ function Screen(props: { video: Publish.Video; audio: Publish.Audio; room: Room
 			<button
 				type="button"
 				onClick={toggle}
-				class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2"
+				class="relative border hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
 				role="switch"
 				aria-checked={!!media()}
 				aria-label="Toggle screen sharing"
@@ -289,17 +284,17 @@ function Chat(props: { broadcast: Publish.Broadcast }): JSX.Element {
 	};
 
 	return (
-		<form id="chat" onSubmit={submit} class="w-full max-w-md">
+		<form id="chat" onSubmit={submit} class="flex-1 min-w-48">
 			<input
 				type="text"
 				autocomplete="off"
-				placeholder="type to chat"
+				placeholder="chat"
 				ref={setInput}
 				value={message()}
 				onInput={(e) => setMessage(e.currentTarget.value)}
 				aria-label="Chat message"
 				tabIndex={0}
-				class="w-full text-center placeholder:text-center"
+				class="w-full pointer-events-auto backdrop-blur-sm bg-transparent rounded py-1 px-2 outline-none"
 			/>
 		</form>
 	);
@@ -341,7 +336,7 @@ function Volume(props: { room: Room }): JSX.Element {
 	return (
 		<Tooltip content={muted() || suspended() ? "Enable audio" : "Disable audio"} position="top">
 			<fieldset
-				class="flex flex-col-reverse"
+				class="flex flex-col-reverse pointer-events-auto"
 				aria-label="Volume controls"
 				onMouseEnter={() => setShowSlider(true)}
 				onMouseLeave={() => setShowSlider(false)}
@@ -354,7 +349,7 @@ function Volume(props: { room: Room }): JSX.Element {
 					role="switch"
 					aria-checked={!muted()}
 					aria-label="Toggle mute"
-					class="hover:bg-gray-700 transition-all cursor-pointer p-2"
+					class="hover:bg-gray-700 transition-all cursor-pointer p-2 backdrop-blur-sm bg-transparent rounded"
 					classList={{ "text-red-500": muted() || suspended() }}
 				>
 					{muted() ? <IconVolumeMute /> : <IconVolumeHigh />}
@@ -367,12 +362,11 @@ function Volume(props: { room: Room }): JSX.Element {
 						max="2"
 						value={muted() ? 0 : volume()}
 						onInput={(e) => setVolume(Number(e.currentTarget.value))}
-						class="cursor-pointer"
+						class="cursor-pointer backdrop-blur-sm bg-transparent rounded py-1 px-2 outline-none"
 						aria-label="Output Volume"
 						style={{
 							"writing-mode": "vertical-rl",
 							direction: "rtl",
-							"vertical-align": "middle",
 							opacity: opacity(),
 						}}
 					/>
@@ -397,7 +391,7 @@ function ClosedCaptions(): JSX.Element {
 				role="switch"
 				aria-checked={enabled()}
 				aria-label="Toggle closed captions"
-				class="hover:bg-gray-700 transition-all cursor-pointer p-2"
+				class="hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
 			>
 				{enabled() ? <IconClosedCaption /> : <IconClosedCaptionDisabled />}
 			</button>
@@ -440,7 +434,7 @@ function Advanced(): JSX.Element {
 					aria-label="Settings"
 					aria-expanded={showSettings()}
 					aria-haspopup="dialog"
-					class="hover:bg-gray-700 transition-all cursor-pointer p-2"
+					class="hover:bg-gray-700 transition-all cursor-pointer p-2 backdrop-blur-sm bg-transparent rounded"
 				>
 					<IconSettings />
 				</button>
@@ -475,7 +469,7 @@ function Fullscreen(props: { canvas: Canvas }): JSX.Element {
 				type="button"
 				onClick={toggle}
 				aria-label="Toggle fullscreen"
-				class="hover:bg-gray-700 transition-all cursor-pointer p-2"
+				class="hover:bg-gray-700 transition-all cursor-pointer p-2 pointer-events-auto backdrop-blur-sm bg-transparent rounded"
 			>
 				<IconFullscreen />
 			</button>
@@ -520,4 +514,4 @@ function Opacity(fn: () => boolean): Accessor<number> {
 	});
 
 	return opacity;
-}
+}