Black background on Duck Player (#1422)

Author: mgurgel

special-pages/pages/duckplayer/app/components/Background.jsx

@@ -9,12 +9,17 @@
     padding: 0 20px;
     flex-shrink: 0;
     box-shadow: none;
-    background: rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.18);
     border-radius: var(--inner-radius);
     color: rgba(255, 255, 255, 1);
     text-decoration: none;
+
+    [data-layout="mobile"] & {
+        background-color: #2f2f2f;
+    }
 }
 
+
 .button:hover, .button:focus-visible {
     cursor: pointer;
     background: rgba(255, 255, 255, 0.2);

special-pages/pages/duckplayer/app/components/Background.module.css

@@ -8,7 +8,6 @@ import { FloatingBar } from './FloatingBar.jsx';
 import { SwitchBarMobile } from './SwitchBarMobile.jsx';
 import { InfoBar, InfoBarContainer, InfoIcon } from './InfoBar.jsx';
 import { Wordmark } from './Wordmark.jsx';
-import { Background } from './Background.jsx';
 import { Player, PlayerError } from './Player.jsx';
 import { SettingsProvider } from '../providers/SettingsProvider.jsx';
 import { Settings } from '../settings.js';
@@ -25,9 +24,6 @@ export function Components() {
     if (!url) throw new Error('unreachable');
     return (
         <>
-            <div data-layout="mobile">
-                <Background />
-            </div>
             <main class={styles.main}>
                 <div class={styles.tube}>
                     <Wordmark />

special-pages/pages/duckplayer/app/components/Button.module.css

@@ -1,6 +1,5 @@
 import { h, Fragment } from 'preact';
 import styles from './DesktopApp.module.css';
-import { Background } from './Background.jsx';
 import { InfoBar, InfoBarContainer } from './InfoBar.jsx';
 import { PlayerContainer } from './PlayerContainer.jsx';
 import { Player, PlayerError } from './Player.jsx';
@@ -17,7 +16,6 @@ export function DesktopApp({ embed }) {
     const features = createAppFeaturesFrom(settings);
     return (
         <>
-            <Background />
             {features.focusMode()}
             <main class={styles.app}>
                 <DesktopLayout embed={embed} />

special-pages/pages/duckplayer/app/components/Components.jsx

@@ -7,7 +7,7 @@
 
 .container {
     padding: 12px;
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.12);
     position: relative;
     z-index: 1;
     border-bottom-left-radius: 14px;

special-pages/pages/duckplayer/app/components/DesktopApp.jsx

@@ -1,7 +1,6 @@
 import { h, Fragment } from 'preact';
 import cn from 'classnames';
 import styles from './MobileApp.module.css';
-import { Background } from './Background.jsx';
 import { Player, PlayerError } from './Player.jsx';
 import { usePlatformName, useSettings } from '../providers/SettingsProvider.jsx';
 import { SwitchBarMobile } from './SwitchBarMobile.jsx';
@@ -25,7 +24,6 @@ export function MobileApp({ embed }) {
     const features = createAppFeaturesFrom(settings);
     return (
         <>
-            <Background />
             {features.focusMode()}
             <OrientationProvider
                 onChange={(orientation) => {

special-pages/pages/duckplayer/app/components/InfoBar.module.css

@@ -27,7 +27,7 @@ html[data-focus-mode="on"] .hideInFocus {
     display: none;
 }
 .main {
-    --bg-color: rgba(0, 0, 0, 0.3);
+    --bg-color: #222;
     --logo-spacing: 185px;
     --gutter-width: 8px;
     --outer-radius: 16px;
@@ -87,6 +87,12 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
     padding-bottom: 0;
     border-top-left-radius: var(--outer-radius);
     border-top-right-radius: var(--outer-radius);
+
+    transition: background-color .3s;
+
+    html[data-focus-mode="on"] & {
+        transition: none;
+    }
 }
 
 .logo {

special-pages/pages/duckplayer/app/components/MobileApp.jsx

@@ -1,7 +1,7 @@
 .switchBar {
     display: grid;
     border-radius: 8px;
-    background: rgba(255, 255, 255, 0.03);
+    background: #2f2f2f;
     padding-inline: 16px;
     height: 100%;
     line-height: 1.1;

special-pages/pages/duckplayer/app/components/MobileApp.module.css

@@ -9,7 +9,7 @@ html:has(body[data-display="app"]) {
 
 body[data-display="app"] {
     color: rgba(242, 242, 242, 1);
-    background: #101010;
+    background: #000;
     height: 100vh;
     overflow: hidden;
     padding: 16px;