From 34967939d50bab53659476a207c33d5d634c9109 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 24 Sep 2023 15:02:48 +0800
Subject: [PATCH] style: adjust styles * feat: fixed anime playback & movie
 page topbar * chore: rename animeVideoPage.scss to
 animePlayback&MoviePage.scss

---
 src/contentScripts/index.ts                   |   6 +-
 src/contentScripts/views/App.vue              |   4 +-
 .../animePlayback&MoviePage.scss              | 159 +++++++++++
 src/styles/adaptedStyles/animeVideoPage.scss  |  83 ------
 src/styles/adaptedStyles/index.ts             |   2 +-
 src/styles/adaptedStyles/momentsPage.scss     | 262 ++++++++++--------
 6 files changed, 310 insertions(+), 206 deletions(-)
 create mode 100644 src/styles/adaptedStyles/animePlayback&MoviePage.scss
 delete mode 100644 src/styles/adaptedStyles/animeVideoPage.scss

diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 2bb83f58..119b9b89 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -35,6 +35,8 @@ if (isFirefox) {
     if (
       // video page
       /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
+      // anime playback & movie page
+      || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl)
       // watch later playlist
       || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
       // favorite playlist
@@ -91,8 +93,8 @@ function injectApp() {
 
     // video page
     || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
-    // anime video page
-    || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/ss.*/.test(currentUrl)
+    // anime playback & movie page
+    || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl)
     // watch later playlist
     || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
     // favorite playlist
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 6f578f75..72b3f8fe 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -83,8 +83,8 @@ const isTopbarFixed = computed(() => {
     // || /https?:\/\/search.bilibili.com\/.*$/.test(location.href)
     // video page
     || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href)
-    // anime video page
-    || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/ss.*/.test(location.href)
+    // anime playback & movie page
+    || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(location.href)
     // moment page
     || /https?:\/\/t.bilibili.com.*/.test(location.href)
   )
diff --git a/src/styles/adaptedStyles/animePlayback&MoviePage.scss b/src/styles/adaptedStyles/animePlayback&MoviePage.scss
new file mode 100644
index 00000000..41b7c81e
--- /dev/null
+++ b/src/styles/adaptedStyles/animePlayback&MoviePage.scss
@@ -0,0 +1,159 @@
+.bpx-player-contextmenu > li {
+  box-sizing: unset;
+}
+
+.numberListItem_number_list_item__wszA4.numberListItem_select__ar1X5,
+.follow_btnFollow__OFY3n,
+.squirtle-controller.squirtle-pgc .squirtle-progress-timeline,
+.squirtle-controller.squirtle-pgc
+  .squirtle-video-volume
+  .squirtle-volume
+  .squirtle-volume-bar
+  .squirtle-volume-dot,
+.squirtle-controller.squirtle-pgc
+  .squirtle-video-volume
+  .squirtle-volume
+  .squirtle-volume-bar
+  .squirtle-volume-percent,
+.squirtle-controller.squirtle-pgc
+  label.bui-switch-label
+  input:checked
+  + .bui-switch,
+.squirtle-controller.squirtle-pgc
+  label.bui-switch-label.bui-switch-animbg
+  input:checked
+  + .bui-switch {
+  background-color: var(--bew-theme-color);
+}
+
+.numberListItem_badge__TV05g,
+.vipPaybar_textWrap__xXqVi,
+.imageListItem_wrap__HceXs
+  .imageListItem_coverWrap__bnWan
+  .imageListItem_badge__eCjIv,
+.squirtle-controller.squirtle-pgc
+  .squirtle-video-setting
+  .squirtle-side-setting
+  .squirtle-single-side-setting
+  .squirtle-single-setting-chooses
+  .squirtle-single-setting-choice.active {
+  background-color: var(--bew-theme-color) !important;
+}
+
+.mediainfo_mediaToolbar__uEabN .mediainfo_btnHome__ci38K {
+  background-color: var(--bew-theme-color-10);
+}
+
+.mediainfo_mediaToolbar__uEabN .mediainfo_btnHome__ci38K,
+.mediainfo_mediaRight__jv5hq
+  .mediainfo_media_desc_section__bOFBw
+  .mediainfo_display_area__CEKfP
+  .mediainfo_ellipsis__xCKNd,
+.mediainfo_mediaRight__jv5hq .mediainfo_media_desc__F5lLq i,
+.upinfo_btn_follow_up__gmj7f,
+.squirtle-controller.squirtle-pgc
+  .squirtle-video-setting
+  .squirtle-setting-panel-wrap
+  .squirtle-single-select:hover,
+.squirtle-controller.squirtle-pgc
+  .squirtle-video-setting
+  .squirtle-side-setting
+  .squirtle-single-side-setting
+  .squirtle-single-setting-other-choice:hover {
+  color: var(--bew-theme-color);
+}
+
+.RecommendItem_wrap__pJmXL
+  .RecommendItem_right_wrap__rgzw_
+  .RecommendItem_title__zyQj0:hover,
+.upinfo_upLink__x4bbS .upinfo_upName__puAs1.upinfo_vip__nTBku,
+.squirtle-controller.squirtle-pgc
+  .squirtle-block-wrap
+  .squirtle-select-list
+  .squirtle-select-item.active {
+  color: var(--bew-theme-color) !important;
+}
+
+.mediainfo_mediaToolbar__uEabN .mediainfo_btnHome__ci38K svg path,
+#bilibili_pbp svg rect[clip-path='url(#pbp-played-path)'],
+.squirtle-controller.squirtle-pgc
+  .squirtle-video-setting
+  .squirtle-side-setting
+  .squirtle-single-side-setting
+  .squirtle-single-setting-other-choice
+  .squirtle-svg-icon.active
+  path,
+.squirtle-controller.squirtle-pgc
+  .squirtle-video-setting
+  .squirtle-side-setting
+  .squirtle-single-side-setting
+  .squirtle-single-setting-other-choice.active
+  .squirtle-svg-icon.active
+  path {
+  fill: var(--bew-theme-color);
+}
+
+// #bilibili_pbp svg rect[clip-path='url(#pbp-played-path)'] {
+//   fill: var(--bew-theme-color) !important;
+// }
+
+.PlayingIcon_playIcon__Ob1X0 svg path {
+  stroke: var(--bew-theme-color);
+}
+
+.mediainfo_mediaInfo__Cpow4,
+.recommend_wrap__pgu8c {
+  border-color: var(--bew-border-color);
+}
+
+.dark {
+  .home-container .main-container,
+  .mediainfo_mediaRight__jv5hq .mediainfo_media_desc__F5lLq i {
+    background-color: var(--bew-bg);
+  }
+
+  .eplist_ep_list_wrapper__PzLHa,
+  .eplist_ep_list_wrapper__PzLHa {
+    background-color: var(--bew-content-solid-1);
+  }
+
+  .special.wide .main-container {
+    background-color: unset;
+  }
+
+  .upinfo_upInfoCard__roviy {
+    background-color: var(--bew-fill-1);
+  }
+
+  .numberListItem_number_list_item__wszA4 {
+    --bg1: var(--bew-fill-1);
+  }
+
+  .mediainfo_mediaRight__jv5hq
+    .mediainfo_media_desc_section__bOFBw
+    .mediainfo_display_area__CEKfP
+    .mediainfo_ellipsis__xCKNd {
+    background: linear-gradient(
+      90deg,
+      hsla(0, 0%, 100%, 0),
+      var(--bew-bg) 20%,
+      var(--bew-bg)
+    );
+  }
+
+  .numberListItem_title__ukPv0,
+  .recommend_wrap__pgu8c .recommend_title__miCR4,
+  .RecommendItem_wrap__pJmXL
+    .RecommendItem_right_wrap__rgzw_
+    .RecommendItem_title__zyQj0 {
+    color: var(--bew-text-1);
+  }
+
+  .RecommendItem_wrap__pJmXL
+    .RecommendItem_right_wrap__rgzw_
+    .RecommendItem_sub_wrap__s1pfm
+    .RecommendItem_showindex__KMdzi,
+  .score_score__1MjLd {
+    color: var(--bew-text-2);
+  }
+}
diff --git a/src/styles/adaptedStyles/animeVideoPage.scss b/src/styles/adaptedStyles/animeVideoPage.scss
deleted file mode 100644
index 123a4065..00000000
--- a/src/styles/adaptedStyles/animeVideoPage.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.numberListItem_number_list_item__wszA4.numberListItem_select__ar1X5,
-.follow_btnFollow__OFY3n,
-.vipPaybar_textWrap__xXqVi {
-  background-color: var(--bew-theme-color);
-}
-
-.numberListItem_badge__TV05g {
-  background-color: var(--bew-theme-color) !important;
-}
-
-.mediainfo_mediaToolbar__uEabN .mediainfo_btnHome__ci38K {
-  background-color: var(--bew-theme-color-10);
-}
-
-.mediainfo_mediaToolbar__uEabN .mediainfo_btnHome__ci38K,
-.mediainfo_mediaRight__jv5hq
-  .mediainfo_media_desc_section__bOFBw
-  .mediainfo_display_area__CEKfP
-  .mediainfo_ellipsis__xCKNd {
-  color: var(--bew-theme-color);
-}
-
-.RecommendItem_wrap__pJmXL
-  .RecommendItem_right_wrap__rgzw_
-  .RecommendItem_title__zyQj0:hover {
-  color: var(--bew-theme-color) !important;
-}
-
-.mediainfo_mediaToolbar__uEabN .mediainfo_btnHome__ci38K svg path {
-  fill: var(--bew-theme-color);
-}
-
-.mediainfo_mediaInfo__Cpow4,
-.recommend_wrap__pgu8c {
-  border-color: var(--bew-border-color);
-}
-
-.dark {
-  .home-container .main-container,
-  .mediainfo_mediaRight__jv5hq .mediainfo_media_desc__F5lLq i {
-    background-color: var(--bew-bg);
-  }
-
-  .eplist_ep_list_wrapper__PzLHa,
-  .eplist_ep_list_wrapper__PzLHa {
-    background-color: var(--bew-content-solid-1);
-  }
-
-  .numberListItem_number_list_item__wszA4 {
-    --bg1: var(--bew-fill-1);
-  }
-
-  .mediainfo_mediaRight__jv5hq
-    .mediainfo_media_desc_section__bOFBw
-    .mediainfo_display_area__CEKfP
-    .mediainfo_ellipsis__xCKNd {
-    background: linear-gradient(
-      90deg,
-      hsla(0, 0%, 100%, 0),
-      var(--bew-bg) 20%,
-      var(--bew-bg)
-    );
-  }
-
-  .special.wide .main-container {
-    background-color: unset;
-  }
-
-  .numberListItem_title__ukPv0,
-  .recommend_wrap__pgu8c .recommend_title__miCR4,
-  .RecommendItem_wrap__pJmXL
-    .RecommendItem_right_wrap__rgzw_
-    .RecommendItem_title__zyQj0 {
-    color: var(--bew-text-1);
-  }
-
-  .RecommendItem_wrap__pJmXL
-    .RecommendItem_right_wrap__rgzw_
-    .RecommendItem_sub_wrap__s1pfm
-    .RecommendItem_showindex__KMdzi {
-    color: var(--bew-text-2);
-  }
-}
diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts
index 58c0e63d..2bed098b 100644
--- a/src/styles/adaptedStyles/index.ts
+++ b/src/styles/adaptedStyles/index.ts
@@ -6,7 +6,7 @@ import './btn.scss'
 import './userCard.scss'
 import './searchPage.scss'
 import './videoPage.scss'
-import './animeVideoPage.scss'
+import './animePlayback&MoviePage.scss'
 import './momentsPage.scss'
 import './historyPage.scss'
 import './userSpacePage.scss'
diff --git a/src/styles/adaptedStyles/momentsPage.scss b/src/styles/adaptedStyles/momentsPage.scss
index 0c56e1dd..81f81918 100644
--- a/src/styles/adaptedStyles/momentsPage.scss
+++ b/src/styles/adaptedStyles/momentsPage.scss
@@ -92,50 +92,6 @@ aside section.sticky {
   top: 70px !important;
 }
 
-// pined moment
-.bili-dyn-item__tag {
-  box-shadow: inset 0 -1px 0 var(--bew-border-color);
-  color: var(--bew-text-2);
-}
-
-.bili-dyn-my-info,
-.bili-dyn-my-info--skeleton,
-.bili-dyn-publishing,
-.bili-dyn-up-list,
-.bili-dyn-list-tabs,
-.bili-dyn-item,
-.bili-dyn-banner,
-.topic-panel,
-.bili-dyn-live-users,
-.bili-dyn-live-users__title,
-.bili-dyn-list-loading {
-  background-color: var(--bew-content-solid-1);
-  color: var(--bew-text-1);
-}
-
-.bili-rich-textarea__inner {
-  background-color: transparent;
-  color: var(--bew-text-1);
-}
-
-.bili-dyn-my-info__stat__item__count,
-.bili-rich-text__content,
-.topic-panel__nav-title,
-.relevant-topic__title,
-.dyn-goods__one__detail__name,
-.dyn-ugc__detail__title,
-.dyn-reserve__title,
-.bili-dyn-live-users__item__uname,
-.dyn-additional-common__detail__title,
-.bili-dyn-interaction__item__desc .bili-rich-text-module,
-.bili-album__watch__control__option {
-  color: var(--bew-text-1);
-}
-
-.bili-dyn-up-list__item__name {
-  color: var(--bew-text-2);
-}
-
 .bili-dyn-my-info__stat__item:hover > div:first-child,
 .bili-dyn-up-list__item.active .bili-dyn-up-list__item__name,
 .bili-dyn-list-tabs__item.active,
@@ -155,18 +111,19 @@ aside section.sticky {
 .dyn-reserve__desc__first.highlight,
 .dyn-reserve__lottery__text,
 .bili-album__watch__control__option:hover,
-.bili-gallery__pagination__index {
+.bili-gallery__pagination__index,
+.bili-dyn-card-medialist:hover .bili-dyn-card-medialist__title,
+.bili-dyn-card-pgc:hover .bili-dyn-card-pgc__title {
   color: var(--bew-theme-color);
 }
 
-.bili-dyn-up-list__item__face span {
+.bili-dyn-up-list__item__face span,
+.bili-dyn-card-video__badge,
+.bili-dyn-card-medialist__badge,
+.bili-dyn-title__label {
   background-color: var(--bew-theme-color);
 }
 
-.bili-dyn-card-video__desc {
-  color: var(--bew-text-2);
-}
-
 .bili-dyn-action:not(.disabled).active i,
 .bili-dyn-action:not(.disabled):hover i,
 .relevant-topic:before,
@@ -178,50 +135,11 @@ aside section.sticky {
   filter: var(--bew-filter-icon-glow);
 }
 
-.bili-dyn-topic__card:hover,
-.bili-rich-text-link:hover,
-.bili-rich-text-module:hover,
-.bili-rich-text-topic:hover {
-  background-color: var(--bew-fill-2);
-}
-
-.bili-topic-search__popover {
-  background-color: var(--bew-fill-1);
-  border-color: var(--bew-border-color);
-}
-
-.dyn-goods__wrap,
-.dyn-reserve__card,
-.dyn-additional-common__wrap,
-.bili-dyn-content__orig.reference,
-.dyn-ugc__wrap {
-  background-color: var(--bew-fill-1);
-  color: var(--bew-text-1);
-}
-
-.reference .dyn-goods__wrap,
-.reference .dyn-reserve__card,
-.reference .dyn-additional-common__wrap,
-.reference .bili-dyn-content__orig.reference,
-.reference .dyn-ugc__wrap {
-  background-color: var(--bew-content-solid-1);
-  color: var(--bew-text-1);
-}
-
 .dyn-reserve__lottery__text:after,
 .bili-album__watch__track__activeitemborder {
   border-color: var(--bew-theme-color);
 }
 
-.bili-topic-search__input__prefix,
-.bili-topic-search__input__text {
-  color: var(--bew-text-2);
-}
-
-.bili-dyn-publishing__hint:after {
-  color: var(--bew-border-color);
-}
-
 .bili-dyn-publishing__action,
 .dyn-goods__one__action button,
 .dyn-reserve__action button,
@@ -238,40 +156,148 @@ aside section.sticky {
   box-shadow: 0 0 0 2px var(--bew-theme-color);
 }
 
-.bili-dyn-up-list__item__face {
-  background-color: var(--bew-fill-1);
-}
-
 .bili-dyn-list-tabs__highlight {
   background-color: var(--bew-theme-color);
 }
 
-.bili-dyn-title__text {
-  color: var(--bew-text-1) !important;
-}
-
-.bili-dyn-card-video {
-  border-color: var(--bew-border-color);
-}
-.bili-dyn-card-video__body {
-  background-color: var(--bew-content-solid-1);
-}
-
-.bili-dyn-card-video__title {
-  color: var(--bew-text-1);
-}
-
-.bili-album__watch__control {
-  background-color: var(--bew-fill-1);
-}
-
-.bili-dyn-version-control__btn {
-  background-color: var(--bew-content-solid-1);
-  border-color: var(--bew-border-color);
-  color: var(--bew-text-1);
-}
-
 .bili-dyn-live-users__item__face-container {
   box-shadow: 0 0 0 1px var(--bew-theme-color);
 }
+
+.dark {
+  .bili-dyn-item__tag {
+    box-shadow: inset 0 -1px 0 var(--bew-border-color);
+    color: var(--bew-text-2);
+  }
+
+  .bili-dyn-up-list__item__name,
+  .bili-dyn-card-medialist__desc {
+    color: var(--bew-text-2);
+  }
+
+  .bili-dyn-my-info,
+  .bili-dyn-my-info--skeleton,
+  .bili-dyn-publishing,
+  .bili-dyn-up-list,
+  .bili-dyn-list-tabs,
+  .bili-dyn-item,
+  .bili-dyn-banner,
+  .topic-panel,
+  .bili-dyn-live-users,
+  .bili-dyn-live-users__title,
+  .bili-dyn-list-loading {
+    background-color: var(--bew-content-solid-1);
+  }
+
+  .bili-rich-textarea__inner {
+    background-color: transparent;
+    color: var(--bew-text-1);
+  }
+
+  .bili-dyn-my-info__stat__item__count,
+  .bili-rich-text__content,
+  .topic-panel__nav-title,
+  .relevant-topic__title,
+  .dyn-goods__one__detail__name,
+  .dyn-ugc__detail__title,
+  .dyn-reserve__title,
+  .bili-dyn-live-users__item__uname,
+  .dyn-additional-common__detail__title,
+  .bili-dyn-interaction__item__desc .bili-rich-text-module,
+  .bili-album__watch__control__option,
+  .bili-dyn-my-info,
+  .bili-dyn-my-info--skeleton,
+  .bili-dyn-publishing,
+  .bili-dyn-up-list,
+  .bili-dyn-list-tabs,
+  .bili-dyn-item,
+  .bili-dyn-banner,
+  .topic-panel,
+  .bili-dyn-live-users,
+  .bili-dyn-live-users__title,
+  .bili-dyn-list-loading,
+  .bili-dyn-card-pgc__title {
+    color: var(--bew-text-1);
+  }
+
+  .bili-dyn-card-video__desc {
+    color: var(--bew-text-2);
+  }
+
+  .bili-dyn-topic__card:hover,
+  .bili-rich-text-link:hover,
+  .bili-rich-text-module:hover,
+  .bili-rich-text-topic:hover {
+    background-color: var(--bew-fill-2);
+  }
+
+  .bili-topic-search__popover {
+    background-color: var(--bew-fill-1);
+    border-color: var(--bew-border-color);
+  }
+
+  .dyn-goods__wrap,
+  .dyn-reserve__card,
+  .dyn-additional-common__wrap,
+  .bili-dyn-content__orig.reference,
+  .dyn-ugc__wrap {
+    background-color: var(--bew-fill-1);
+    color: var(--bew-text-1);
+  }
+
+  .reference .dyn-goods__wrap,
+  .reference .dyn-reserve__card,
+  .reference .dyn-additional-common__wrap,
+  .reference .bili-dyn-content__orig.reference,
+  .reference .dyn-ugc__wrap,
+  .bili-dyn-card-medialist__body,
+  .bili-dyn-card-video__body,
+  .bili-dyn-card-pgc__body {
+    background-color: var(--bew-content-solid-1);
+  }
+
+  .reference .dyn-goods__wrap,
+  .reference .dyn-reserve__card,
+  .reference .dyn-additional-common__wrap,
+  .reference .bili-dyn-content__orig.reference,
+  .reference .dyn-ugc__wrap,
+  .bili-dyn-card-video__title,
+  .bili-dyn-card-medialist__title {
+    color: var(--bew-text-1);
+  }
+
+  .bili-topic-search__input__prefix,
+  .bili-topic-search__input__text {
+    color: var(--bew-text-2);
+  }
+
+  .bili-dyn-publishing__hint:after {
+    color: var(--bew-border-color);
+  }
+
+  .bili-dyn-up-list__item__face {
+    background-color: var(--bew-fill-1);
+  }
+
+  .bili-dyn-title__text {
+    color: var(--bew-text-1) !important;
+  }
+
+  .bili-dyn-card-video,
+  .bili-dyn-card-medialist,
+  .bili-dyn-card-pgc {
+    border-color: var(--bew-border-color);
+  }
+
+  .bili-album__watch__control {
+    background-color: var(--bew-fill-1);
+  }
+
+  .bili-dyn-version-control__btn {
+    background-color: var(--bew-content-solid-1);
+    border-color: var(--bew-border-color);
+    color: var(--bew-text-1);
+  }
+}
+
 // #endregion