From bd7721f39c0bf2bfaeeeca3e084cadb9193b6f6e Mon Sep 17 00:00:00 2001
From: ljt990218 <50509815+ljt990218@users.noreply.github.com>
Date: Wed, 17 Jul 2024 01:11:45 +0800
Subject: [PATCH] feat(video-player): support styling for `#musicApp` (#900)

* fix: UserPanelPop hover Inconsistent animation

* fix(VideoCard): `moreBtn` Button issue from `#829`, add cursor-pointer class to enhance UX

* style(videoPage): add border radius to bp-docker-minor element

* feat(MomentsPop,HistoryPop): Realize clickable author's name and avatar in the top bar pop-up window

* Update videoPage.scss

* Update videoPage.scss

* fix(videoPlayer): fix styling for music app `#musicApp`

* fix(videoPlayer): `xt-btn` style

* fix(videoPlayer): fix styling for music app #musicApp

* fix(videoPlayer): change border color for .BgmInfo .left:after

* fix(videoPlayer): change color for .BgmInfo .right .bottom .btn:hover

* fix(video-player): improve styling for music app

* chore: update

---------

Co-authored-by: Hakadao <a578457889743@gmail.com>
---
 src/styles/adaptedStyles/videoPlayer.scss | 100 ++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/src/styles/adaptedStyles/videoPlayer.scss b/src/styles/adaptedStyles/videoPlayer.scss
index d9c32282..96b2e56d 100644
--- a/src/styles/adaptedStyles/videoPlayer.scss
+++ b/src/styles/adaptedStyles/videoPlayer.scss
@@ -3,4 +3,104 @@
     --bpx-toast-fn-color: var(--bew-theme-color);
     --bpx-toast-fn-hover-color: var(--bew-theme-color-80);
   }
+
+  // https://github.com/BewlyBewly/BewlyBewly/issues/899
+  #musicApp {
+    .container {
+      width: 336px;
+    }
+
+    @media (min-width: 1681px) {
+      .container {
+        width: 397px;
+      }
+    }
+
+    .up a:hover * {
+      transition: 0.3s;
+    }
+  }
+
+  // #region theme color adaption part
+  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
+  :not(foobar) {
+    #musicApp {
+      .BgmInfo .right .bottom .btn {
+        color: var(--bew-theme-color);
+      }
+
+      .card .title:hover,
+      .h2 .close:hover,
+      .up a:hover * {
+        color: var(--bew-theme-color) !important;
+      }
+
+      .BgmInfo .right .bottom .btn:hover {
+        color: white;
+      }
+
+      .BgmInfo .right .bottom .btn:hover {
+        background-color: var(--bew-theme-color);
+      }
+
+      .BgmInfo .right .bottom .btn {
+        background-color: var(--bew-theme-color-10);
+      }
+    }
+  }
+  // #endregion
+
+  // #region dark mode adaption part
+  &.dark {
+    #musicApp {
+      background-color: var(--bew-elevated-solid) !important;
+
+      .bottom-btn {
+        background-color: var(--bew-fill-1);
+      }
+
+      .main {
+        background-color: var(--bew-fill-1) !important;
+      }
+
+      .container::after {
+        background-color: var(--bew-border-color);
+      }
+
+      .h2 {
+        background-color: transparent;
+      }
+
+      .h2 .title svg,
+      .h2 .title span,
+      .BgmInfo .right .title,
+      .main .container .title,
+      .video-list .title,
+      .bottom-btn {
+        color: var(--bew-text-1);
+      }
+
+      .BgmInfo .right .singer,
+      .BgmInfo .right .des,
+      .h2 .close,
+      .card .up .name .nameText,
+      .card .up svg {
+        color: var(--bew-text-2);
+      }
+
+      .no-more .text {
+        color: var(--bew-text-3);
+      }
+
+      .bottom-btn {
+        border-color: var(--bew-border-color);
+      }
+
+      .card .up span {
+        filter: invert(1) hue-rotate(180deg);
+        mix-blend-mode: screen;
+      }
+    }
+  }
+  // #endregion
 }