From 6f77a13733e951d5202b06d031b51918026b40a0 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 24 Sep 2023 21:39:11 +0800
Subject: [PATCH] style: adjust styles

---
 src/contentScripts/index.ts                   |   2 +-
 .../animePlayback&MoviePage.scss              | 231 +++++++++++++++++-
 src/styles/adaptedStyles/comments.scss        | 139 ++++++-----
 src/styles/adaptedStyles/index.ts             |   1 +
 src/styles/adaptedStyles/momentsPage.scss     |   4 +
 src/styles/adaptedStyles/videoPlayer.scss     |   4 +
 src/styles/variables.scss                     |  22 ++
 7 files changed, 333 insertions(+), 70 deletions(-)
 create mode 100644 src/styles/adaptedStyles/videoPlayer.scss

diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 119b9b89..34d5e7cf 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -44,7 +44,7 @@ if (isFirefox) {
     ) {
       setTimeout(() => {
         document.documentElement.removeChild(beforeLoadedStyleEl)
-      }, 400)
+      }, 300)
     }
     else {
       window.onload = () => {
diff --git a/src/styles/adaptedStyles/animePlayback&MoviePage.scss b/src/styles/adaptedStyles/animePlayback&MoviePage.scss
index 41b7c81e..b1cc7366 100644
--- a/src/styles/adaptedStyles/animePlayback&MoviePage.scss
+++ b/src/styles/adaptedStyles/animePlayback&MoviePage.scss
@@ -2,6 +2,17 @@
   box-sizing: unset;
 }
 
+body .special-cover::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 10%);
+  pointer-events: none;
+}
+
 .numberListItem_number_list_item__wszA4.numberListItem_select__ar1X5,
 .follow_btnFollow__OFY3n,
 .squirtle-controller.squirtle-pgc .squirtle-progress-timeline,
@@ -40,6 +51,16 @@
   background-color: var(--bew-theme-color) !important;
 }
 
+.promptBar_remindActionWrap__ftBEp
+  .promptBar_btnItemWrap__SM_zQ
+  .positionBtn_btn__Cl153 {
+  background: var(--bew-theme-color) !important;
+}
+
+.follow_btnFollow__OFY3n:hover {
+  background-color: var(--bew-theme-color-80);
+}
+
 .mediainfo_mediaToolbar__uEabN .mediainfo_btnHome__ci38K {
   background-color: var(--bew-theme-color-10);
 }
@@ -101,11 +122,6 @@
   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 {
@@ -125,10 +141,27 @@
     background-color: var(--bew-fill-1);
   }
 
+  .follow_btnFollow__OFY3n.follow_followed__smKNK {
+    background-color: var(--bew-fill-2) !important;
+  }
+
+  .SectionSelector_SectionSelector__WS4H3 .SectionSelector_expand__Oh9Lt {
+    background: linear-gradient(
+      270deg,
+      var(--bew-content-solid-1) 46.21%,
+      transparent
+    );
+  }
+
   .numberListItem_number_list_item__wszA4 {
     --bg1: var(--bew-fill-1);
   }
 
+  .mediainfo_mediaInfo__Cpow4,
+  .recommend_wrap__pgu8c {
+    border-color: var(--bew-border-color);
+  }
+
   .mediainfo_mediaRight__jv5hq
     .mediainfo_media_desc_section__bOFBw
     .mediainfo_display_area__CEKfP
@@ -157,3 +190,191 @@
     color: var(--bew-text-2);
   }
 }
+
+// #region Old anime playback & movie page
+.main-container .tool-bar .coin-info.active i,
+.main-container .tool-bar .coin-info:hover i,
+.main-container .tool-bar .like-info.active i,
+.main-container .tool-bar .like-info:hover i,
+.main-container .tool-bar .coin-info.active span,
+.main-container .tool-bar .coin-info:hover span,
+.main-container .tool-bar .like-info.active span,
+.main-container .tool-bar .like-info:hover span,
+.main-container
+  .tool-bar
+  .share-info
+  .share-more
+  .share-wrapper
+  .share-btn:hover
+  i,
+.main-container
+  .tool-bar
+  .share-info
+  .share-more
+  .share-wrapper
+  .share-btn:hover
+  span,
+.main-container .tool-bar .share-info:hover i,
+.main-container .tool-bar .share-info:hover span,
+.main-container .tool-bar .mobile-info:hover i,
+.main-container .tool-bar .mobile-info:hover span,
+.main-container .tool-bar .watch-info:hover span,
+.ep-list-wrapper .ep-item i,
+.section-ep-wrapper .ep-item i,
+.up-info .btn-follow-up,
+.main-container .media-info .media-right .media-desc i {
+  color: var(--bew-theme-color);
+}
+
+.main-container
+  .review-module
+  .review-list
+  .review-item
+  .review-header
+  #review-author-nick-name.review-author.is-vip,
+.up-info > a .up-name.vip,
+.main-container .review-module .review-list .review-item:hover .review-title,
+.main-container .review-module .module-title .more-link:hover {
+  color: var(--bew-theme-color) !important;
+}
+
+.main-container .ep-list-wrapper .list-wrapper.simple ul .ep-item.cursor,
+.main-container .pay-bar .vip .btn-pay,
+.main-container .media-info .media-right .media-tool-bar .btn-follow,
+.main-container .nav-tools .tool-item:hover {
+  background-color: var(--bew-theme-color);
+}
+
+.ep-list-wrapper .ep-item .badge.pink,
+.section-ep-wrapper .ep-item .badge.pink,
+.main-container .nav-tools .tool-item:hover {
+  background-color: var(--bew-theme-color) !important;
+}
+
+.main-container .pay-bar .vip .btn-pay:hover,
+.main-container .media-info .media-right .media-tool-bar .btn-follow:hover {
+  background-color: var(--bew-theme-color-80);
+}
+
+.main-container .ep-list-wrapper .list-wrapper.simple ul .ep-item.cursor {
+  border-color: var(--bew-theme-color);
+}
+
+.main-container .nav-tools .tool-item:hover {
+  border-color: var(--bew-theme-color) !important;
+}
+
+.main-container .tool-bar .watch-info:hover #watch-together-icon-1 path {
+  fill: var(--bew-theme-color) !important;
+}
+
+.dark {
+  .main-container .media-info .media-right .media-title,
+  .main-container .media-info .media-right .pub-wrapper,
+  .main-container .media-info .media-right .media-desc,
+  .main-container .season-list .series-title,
+  .main-container .season-list .ss-list-wrapper .ss-item .ss-info .ss-title,
+  .main-container
+    .recom-wrapper
+    .recom-list
+    .recom-item
+    .info-wrapper
+    .video-title,
+  .main-container .plp-l .comment-wrapper .b-head,
+  .main-container .media-info .media-right .pub-wrapper .home-link,
+  .main-container .ep-list-wrapper .list-title h4,
+  .ep-section-module .section-title,
+  .ep-list-wrapper .ep-item a,
+  .section-ep-wrapper .ep-item a,
+  .main-container .review-module .review-list .review-item .review-title,
+  .main-container .review-module .review-list .review-item .review-content,
+  .main-container .media-info .media-right .pub-wrapper .av-link,
+  .main-container .review-module .module-title .more-link,
+  .main-container .nav-tools .tool-item:hover {
+    color: var(--bew-text-1);
+  }
+
+  .main-container .tool-bar span,
+  .main-container .tool-bar i,
+  .main-container .season-list .ss-list-wrapper .ss-item .ss-info .pub-info,
+  .main-container
+    .recom-wrapper
+    .recom-list
+    .recom-item
+    .info-wrapper
+    .video-subtitle,
+  .main-container
+    .recom-wrapper
+    .recom-list
+    .recom-item
+    .info-wrapper
+    .video-count,
+  .main-container .media-info .media-right .media-count,
+  .main-container .review-module .review-list .review-item .pub-time,
+  .main-container
+    .review-module
+    .review-list
+    .review-item
+    .review-header
+    #review-author-nick-name.review-author,
+  .main-container .media-info .media-right .media-tool-bar .btn-rating,
+  .main-container .nav-tools .tool-item {
+    color: var(--bew-text-2);
+  }
+
+  .main-container .season-list .ss-list-wrapper .ss-item .ss-info .ss-count {
+    color: var(--bew-text-3);
+  }
+
+  .main-container .media-info .media-right .media-tool-bar .btn-follow.active {
+    color: var(--bew-fill-4);
+  }
+
+  .main-container .tool-bar path {
+    fill: var(--bew-text-2);
+  }
+
+  .main-container .media-info,
+  .main-container .review-module,
+  .main-container .plp-l .split-line,
+  .main-container .media-info .media-right .media-tool-bar .btn-rating,
+  .main-container .nav-tools .tool-item {
+    border-color: var(--bew-border-color);
+  }
+
+  .main-container
+    .media-info
+    .media-right
+    .pub-wrapper
+    .up-info-wrapper
+    .split-line {
+    background-color: var(--bew-border-color);
+  }
+
+  .main-container .ep-list-wrapper,
+  .ep-section-module,
+  .main-container .review-module .review-list .review-item .review-body,
+  .main-container .nav-tools .tool-item {
+    background-color: var(--bew-content-solid-1);
+  }
+
+  .ep-list-wrapper .ep-item.cursor,
+  .section-ep-wrapper .ep-item.cursor,
+  .main-container .media-info .media-right .media-tool-bar .btn-rating {
+    background-color: var(--bew-fill-1);
+  }
+
+  .main-container .media-info .media-right .media-tool-bar .btn-follow.active {
+    background-color: var(--bew-fill-2) !important;
+  }
+
+  .ep-list-wrapper .ep-item:hover,
+  .section-ep-wrapper .ep-item:hover {
+    background-color: var(--bew-fill-2);
+  }
+
+  .main-container .media-info .media-right .media-desc i {
+    background-color: var(--bew-bg);
+  }
+}
+// #endregion
diff --git a/src/styles/adaptedStyles/comments.scss b/src/styles/adaptedStyles/comments.scss
index a4957c9f..bdcca394 100644
--- a/src/styles/adaptedStyles/comments.scss
+++ b/src/styles/adaptedStyles/comments.scss
@@ -69,32 +69,12 @@
   border-color: var(--bew-theme-color);
 }
 
-.bb-comment,
-.comment-bilibili-fold,
-.bb-comment .comment-send.comment-send-lite,
-.comment-bilibili-fold .comment-send.comment-send-lite,
-.bb-comment .comment-send-lite.comment-send-lite,
-.comment-bilibili-fold .comment-send-lite.comment-send-lite {
-  background-color: var(--bew-content-solid-1);
-}
-
-// .bb-comment .comment-list .list-item .user .name,
-.comment-bilibili-fold .comment-list .list-item .user .name,
-.bb-comment .comment-header .tabs-order li,
-.comment-bilibili-fold .comment-header .tabs-order li,
-.bili-dyn-forward-publishing__editor .bili-rich-textarea__inner {
-  color: var(--bew-text-1);
-}
-
-.bili-dyn-forward-item__uname,
-.bb-comment .comment-list .list-item .user .name {
-  color: var(--bew-text-1) !important;
-}
-
-.bb-comment .comment-header .tabs-order li.on,
-.comment-bilibili-fold .comment-header .tabs-order li.on {
-  border-color: var(--bew-theme-color);
-  color: var(--bew-theme-color);
+.bb-comment .comment-send .comment-submit:hover,
+.comment-bilibili-fold .comment-send .comment-submit:hover,
+.bb-comment .comment-send-lite .comment-submit:hover,
+.comment-bilibili-fold .comment-send-lite .comment-submit:hover {
+  background-color: var(--bew-theme-color-80);
+  border-color: var(--bew-theme-color-80);
 }
 
 .bb-comment .comment-header .tabs-order li:hover,
@@ -107,27 +87,6 @@
   color: var(--bew-theme-color);
 }
 
-.bb-comment .comment-header,
-.comment-bilibili-fold .comment-header,
-.bb-comment .comment-list .list-item .con,
-.comment-bilibili-fold .comment-list .list-item .con,
-.bb-comment .comment-send .comment-emoji,
-.comment-bilibili-fold .comment-send .comment-emoji,
-.bb-comment .comment-send-lite .comment-emoji,
-.comment-bilibili-fold .comment-send-lite .comment-emoji,
-.bb-comment .bottom-page.center,
-.bili-dyn-forward__item,
-.bili-dyn-forward__more {
-  border-color: var(--bew-border-color);
-}
-
-.bb-comment .comment-send .comment-emoji,
-.comment-bilibili-fold .comment-send .comment-emoji,
-.bb-comment .comment-send-lite .comment-emoji,
-.comment-bilibili-fold .comment-send-lite .comment-emoji {
-  box-shadow: unset;
-}
-
 .bb-comment .comment-list .list-item .info span.liked i,
 .comment-bilibili-fold .comment-list .list-item .info span.liked i,
 .bb-comment .comment-list .list-item .info span.hated i,
@@ -139,16 +98,6 @@
   filter: var(--bew-filter-icon-glow);
 }
 
-.bb-comment .comment-send .textarea-container .ipt-txt,
-.comment-bilibili-fold .comment-send .textarea-container .ipt-txt,
-.bb-comment .comment-send-lite .textarea-container .ipt-txt,
-.comment-bilibili-fold .comment-send-lite .textarea-container .ipt-txt,
-.bili-dyn-forward-publishing__editor {
-  background-color: var(--bew-fill-1);
-  border-color: var(--bew-border-color);
-  color: var(--bew-text-1);
-}
-
 .bb-comment .comment-send .textarea-container:hover textarea,
 .comment-bilibili-fold .comment-send .textarea-container:hover textarea,
 .bb-comment .comment-send-lite .textarea-container:hover textarea,
@@ -185,17 +134,79 @@
   background-color: var(--bew-theme-color);
 }
 
-// UP主觉得很赞
-.bb-comment .comment-list .list-item .info .reply-tags span,
-.comment-bilibili-fold .comment-list .list-item .info .reply-tags span {
-  background-color: var(--bew-fill-1) !important;
-  color: var(--bew-text-2) !important;
-}
-
 // pin tag
 .bb-comment .stick,
 .comment-bilibili-fold .stick {
   border-color: var(--bew-theme-color);
   color: var(--bew-theme-color);
 }
+
+.dark {
+  .bb-comment,
+  .comment-bilibili-fold,
+  .bb-comment .comment-send.comment-send-lite,
+  .comment-bilibili-fold .comment-send.comment-send-lite,
+  .bb-comment .comment-send-lite.comment-send-lite,
+  .comment-bilibili-fold .comment-send-lite.comment-send-lite {
+    // background-color: var(--bew-content-solid-1);
+    background-color: var(--bew-bg);
+  }
+
+  // .bb-comment .comment-list .list-item .user .name,
+  .comment-bilibili-fold .comment-list .list-item .user .name,
+  .bb-comment .comment-header .tabs-order li,
+  .comment-bilibili-fold .comment-header .tabs-order li,
+  .bili-dyn-forward-publishing__editor .bili-rich-textarea__inner {
+    color: var(--bew-text-1);
+  }
+
+  .bili-dyn-forward-item__uname,
+  .bb-comment .comment-list .list-item .user .name {
+    color: var(--bew-text-1) !important;
+  }
+
+  .bb-comment .comment-header .tabs-order li.on,
+  .comment-bilibili-fold .comment-header .tabs-order li.on {
+    border-color: var(--bew-theme-color);
+    color: var(--bew-theme-color);
+  }
+
+  .bb-comment .comment-header,
+  .comment-bilibili-fold .comment-header,
+  .bb-comment .comment-list .list-item .con,
+  .comment-bilibili-fold .comment-list .list-item .con,
+  .bb-comment .comment-send .comment-emoji,
+  .comment-bilibili-fold .comment-send .comment-emoji,
+  .bb-comment .comment-send-lite .comment-emoji,
+  .comment-bilibili-fold .comment-send-lite .comment-emoji,
+  .bb-comment .bottom-page.center,
+  .bili-dyn-forward__item,
+  .bili-dyn-forward__more {
+    border-color: var(--bew-border-color);
+  }
+
+  .bb-comment .comment-send .comment-emoji,
+  .comment-bilibili-fold .comment-send .comment-emoji,
+  .bb-comment .comment-send-lite .comment-emoji,
+  .comment-bilibili-fold .comment-send-lite .comment-emoji {
+    box-shadow: unset;
+  }
+
+  .bb-comment .comment-send .textarea-container .ipt-txt,
+  .comment-bilibili-fold .comment-send .textarea-container .ipt-txt,
+  .bb-comment .comment-send-lite .textarea-container .ipt-txt,
+  .comment-bilibili-fold .comment-send-lite .textarea-container .ipt-txt,
+  .bili-dyn-forward-publishing__editor {
+    background-color: var(--bew-fill-1);
+    border-color: var(--bew-border-color);
+    color: var(--bew-text-1);
+  }
+
+  // UP主觉得很赞
+  .bb-comment .comment-list .list-item .info .reply-tags span,
+  .comment-bilibili-fold .comment-list .list-item .info .reply-tags span {
+    background-color: var(--bew-fill-1) !important;
+    color: var(--bew-text-2) !important;
+  }
+}
 // #endregion
diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts
index 2bed098b..3c5e3e79 100644
--- a/src/styles/adaptedStyles/index.ts
+++ b/src/styles/adaptedStyles/index.ts
@@ -4,6 +4,7 @@ import './footer.scss'
 import './modal.scss'
 import './btn.scss'
 import './userCard.scss'
+import './videoPlayer.scss'
 import './searchPage.scss'
 import './videoPage.scss'
 import './animePlayback&MoviePage.scss'
diff --git a/src/styles/adaptedStyles/momentsPage.scss b/src/styles/adaptedStyles/momentsPage.scss
index 81f81918..26a3225c 100644
--- a/src/styles/adaptedStyles/momentsPage.scss
+++ b/src/styles/adaptedStyles/momentsPage.scss
@@ -256,6 +256,10 @@ aside section.sticky {
     background-color: var(--bew-content-solid-1);
   }
 
+  .bili-dyn-item__panel .bili-comment {
+    --bg1: var(--bew-content-solid-1);
+  }
+
   .reference .dyn-goods__wrap,
   .reference .dyn-reserve__card,
   .reference .dyn-additional-common__wrap,
diff --git a/src/styles/adaptedStyles/videoPlayer.scss b/src/styles/adaptedStyles/videoPlayer.scss
new file mode 100644
index 00000000..e96026e7
--- /dev/null
+++ b/src/styles/adaptedStyles/videoPlayer.scss
@@ -0,0 +1,4 @@
+.bpx-player-toast-row .bpx-player-toast-item{
+  --bpx-toast-fn-color: var(--bew-theme-color);
+  --bpx-toast-fn-hover-color: var(--bew-theme-color-80);
+}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5a1d0ef2..8c6fa34e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -220,6 +220,28 @@
   --brand_blue_disabled: var(--bew-theme-color-60);
 
   --text_link: var(--bew-theme-color);
+
+  --bpx-dmsend-main-bg: var(--bew-content-solid-1);
+  --bpx-dmsend-input-bg: var(--bew-fill-1);
+  --bpx-dmsend-info-font: var(--bew-text-1);
+  --bpx-dmsend-switch-icon: var(--bew-text-2);
+  --bpx-dmsend-border: var(--bew-border-color);
+  --bpx-dmsend-input-font: var(--bew-text-1);
+  --bpx-fn-color: var(--bew-theme-color);
+  --bpx-primary-color: var(--bew-theme-color);
+  --bpx-fn-hover-color: var(--bew-theme-color-80);
+  --bpx-aux-header-bg: var(--bew-content-solid-1);
+  --bpx-aux-header-icon: var(--bew-text-2);
+  --bpx-aux-header-font: var(--bew-text-1);
+  --bpx-aux-content-bg: var(--bew-content-solid-1);
+  --bpx-aux-content-font1: var(--bew-text-1);
+  --bpx-aux-content-font2: var(--bew-text-2);
+  --bpx-aux-footer-bg: var(--bew-content-solid-1);
+  --bpx-aux-footer-font: var(--bew-text-3);
+  --bpx-aux-footer-font-hover: var(--bew-text-1);
+  --bpx-box-shadow: rgba(0, 0, 0, 0.2);
+  --bpx-toast-fn-color: var(--bew-theme-color);
+  --bpx-toast-fn-hover-color: var(--bew-theme-color-80);
 }
 
 :root.dark {