From 31056511101c26aa2c7aa02a85c5ef906a28b453 Mon Sep 17 00:00:00 2001
From: a-wing <1@233.email>
Date: Wed, 27 Dec 2023 01:19:33 +0800
Subject: [PATCH] feat(webapp): change player style

---
 webapp/components/player/whep-player.tsx | 4 +++-
 webapp/components/player/whip-player.tsx | 4 +++-
 webapp/index.css                         | 6 ++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/webapp/components/player/whep-player.tsx b/webapp/components/player/whep-player.tsx
index 2fe7e32..683f246 100644
--- a/webapp/components/player/whep-player.tsx
+++ b/webapp/components/player/whep-player.tsx
@@ -89,7 +89,9 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
         }
       </center>
 
-      <details className='text-white'>
+      <details className='text-white mx-2 text-sm font-border' style={{
+        position: 'absolute',
+      }}>
         <summary className='text-center'>{props.status.name}</summary>
         <center>
           <div className='flex flex-row flex-wrap justify-around'>
diff --git a/webapp/components/player/whip-player.tsx b/webapp/components/player/whip-player.tsx
index a91985a..1cc54ff 100644
--- a/webapp/components/player/whip-player.tsx
+++ b/webapp/components/player/whip-player.tsx
@@ -147,7 +147,9 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
         }
       </center>
 
-      <details className='text-white'>
+      <details className='text-white mx-2 text-sm font-border' style={{
+        position: 'absolute',
+      }}>
         <summary className='text-center'>{localUserStatus.name}</summary>
         <center>
           <div className='flex flex-row flex-wrap justify-around'>
diff --git a/webapp/index.css b/webapp/index.css
index 4ec0744..cbcae61 100644
--- a/webapp/index.css
+++ b/webapp/index.css
@@ -23,3 +23,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.font-border {
+  font: caption;
+  -webkit-text-stroke: 0.5px black;
+  text-stroke: 0.5px black;
+}