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>
2025-04-14 13:15:29 +00:00 · 2024-07-17 01:11:45 +08:00
parent c34b6b5d7f
commit bd7721f39c
1 changed files with 100 additions and 0 deletions
--- 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
 }