diff options
| author | Pinapelz <yukais@pinapelz.com> | 2026-04-16 18:19:19 -0700 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2026-04-16 18:19:19 -0700 |
| commit | b7ab308f5d92172ff6e10d078cb12c1501cd161a (patch) | |
| tree | c472e5200444cbd2af8aea549573b2bec8689092 /src/app/game/page.styles.ts | |
| parent | c67744e3e5a7079a994cbd0ff196a7269a57ee5a (diff) | |
feat: if media is video file play as BGA
Diffstat (limited to 'src/app/game/page.styles.ts')
| -rw-r--r-- | src/app/game/page.styles.ts | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/src/app/game/page.styles.ts b/src/app/game/page.styles.ts index 833901d..fce88be 100644 --- a/src/app/game/page.styles.ts +++ b/src/app/game/page.styles.ts @@ -51,6 +51,17 @@ export const GameRoot = styled.div` color: #ffffff; font-family: "Roboto", "Segoe UI", Arial, sans-serif; overflow: hidden; + z-index: 0; +`; + +export const BackgroundVideo = styled.video` + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + pointer-events: none; + z-index: 0; `; export const GameNavbar = styled.nav` @@ -73,6 +84,8 @@ export const GameContent = styled.div` display: flex; flex-direction: column; overflow: hidden; + position: relative; + z-index: 1; `; /* ----- HUD ----- */ @@ -86,6 +99,8 @@ export const HUD = styled.div` padding: 10px 24px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); + position: relative; + z-index: 2; `; export const HudStat = styled.div` @@ -293,6 +308,8 @@ export const GameFooter = styled.footer` padding: 12px 24px; background: rgba(255, 255, 255, 0.04); border-top: 1px solid rgba(255, 255, 255, 0.06); + position: relative; + z-index: 2; `; export const ControlBtn = styled.button` @@ -366,6 +383,32 @@ export const StartCard = styled.div` text-align: center; `; +export const OpacityControl = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; + align-items: stretch; +`; + +export const OpacityLabel = styled.div` + font-size: 11px; + color: rgba(255, 255, 255, 0.45); + letter-spacing: 1px; + text-transform: uppercase; + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const OpacityValue = styled.span` + font-variant-numeric: tabular-nums; +`; + +export const OpacitySlider = styled.input` + width: 100%; +`; + export const CountdownNumber = styled.div` font-size: 72px; font-weight: 900; |