style: adjust dark mode style

src/contentScripts/index.ts

@@ -21,7 +21,7 @@ if (isFirefox) {
     setTimeout(() => {
       document.documentElement.style.opacity = '1'
       // document.documentElement.style.transition = 'unset'
-    }, 800)
+    }, 500)
 
     isFirstScriptExecute = false
   })
@@ -32,7 +32,7 @@ else {
     setTimeout(() => {
       document.documentElement.style.opacity = '1'
       // document.documentElement.style.transition = 'unset'
-    }, 800)
+    }, 500)
   })
 }
 

src/contentScripts/views/App.vue

@@ -10,7 +10,6 @@ import Anime from './Anime/Anime.vue'
 import History from './History/History.vue'
 import WatchLater from './WatchLater/WatchLater.vue'
 import Favorites from './Favorites/Favorites.vue'
-import Video from './Video/Video.vue'
 import { accessKey, settings } from '~/logic'
 import '~/styles/index.ts'
 import { AppPage, LanguageType } from '~/enums/appEnums'
@@ -37,7 +36,7 @@ const isDark = useDark({
   },
 })
 const toggleDark = useToggle(isDark)
-const pages = { Home, Search, Anime, History, WatchLater, Favorites, Video }
+const pages = { Home, Search, Anime, History, WatchLater, Favorites }
 const mainAppRef = ref<HTMLElement>() as Ref<HTMLElement>
 const mainAppOpacity = ref<number>(0)
 const showTopbarMask = ref<boolean>(false)

src/styles/adaptedStyles/index.scss

@@ -1 +0,0 @@
-@import './video-page.scss'

src/styles/adaptedStyles/index.ts

@@ -0,0 +1,15 @@
+import('./video-page.scss')
+import('./search-page.scss')
+// const currentUrl = document.URL
+// if (
+//   // video page
+//   /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
+//   // watch later playlist
+//   || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
+//   // favorite playlist
+//   || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl)
+// )
+// else if (
+//   // search page
+//   /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
+// )

src/styles/adaptedStyles/search-page.scss

@@ -0,0 +1,14 @@
+// .search-input-container .search-fixed-header.search-sticky-header {
+//   display: none;;
+// }
+
+.dark {
+  .keyword,
+  .search-input-wrap .suggest_high_light {
+    color: var(--bew-theme-color);
+  }
+
+  .media-footer-badge {
+    background-color: var(--bew-theme-color) !important;
+  }
+}

src/styles/adaptedStyles/video-page.scss

@@ -1,8 +1,58 @@
+// // adjust watcher later playlist container
+// .playlist-container {
+//   padding: 0 70px;
+// }
+
+// // video page
+// .video-container-v1 {
+//   padding: 0 70px;
+// }
+
+.video-container-v1 .right-container,
+.playlist-container .playlist-container--right {
+  width: 350px !important;
+}
+
 .dark {
   .user-card-m-exp .layout {
     display: none;
   }
 
+  .user-card-m-exp .user-info-wrapper {
+    background-color: var(--bew-bg);
+    border-radius: 0 0 8px 8px;
+  }
+
+  .up-detail .up-detail-top .up-name,
+  .user-card-m-exp .user-info-wrapper .info .user .name {
+    color: var(--bew-text-1) !important;
+  }
+
+  .user-card-m-exp .user-info-wrapper .info .user .user-label {
+    background-color: var(--bew-theme-color) !important;
+  }
+
+  .membersinfo-upcard .staff-info .staff-name.is-vip {
+    color: var(--bew-theme-color) !important;
+  }
+
+  .upinfo-btn-panel .new-charge-btn .charge-btn-icon img,
+  .bpx-player-viewpoint-menu-item-active,
+  .cur-play-icon,
+  .multi-page-v1 .cur-list .list-box li.on img,
+  .reply-content-container .reply-content .icon {
+    filter: saturate(0) brightness(2);
+  }
+
+  // Tick icon for  danmaku enable
+  .bui-danmaku-switch
+    .bui-danmaku-switch-input:checked
+    + .bui-danmaku-switch-label
+    .bui-danmaku-switch-on
+    path:nth-child(2) {
+    fill: var(--bew-theme-color);
+  }
+
   .user-card-m-exp .user-info-wrapper .info .btn-box .like:hover {
     background-color: var(--bew-theme-color-80);
     border-color: var(--bew-theme-color-80);
@@ -19,8 +69,19 @@
     border: none;
   }
 
+  .video-share-popover
+    .video-share-dropdown
+    .dropdown-top
+    .dropdown-top-left
+    .capture-bar
+    .bar-right
+    .copy-link:hover {
+    background-color: var(--bew-theme-color-80);
+  }
+
   // 評論人用戶名
-  .reply-item .root-reply-container .content-warp .user-info .user-name {
+  .reply-item .root-reply-container .content-warp .user-info .user-name,
+  .sub-reply-item .sub-user-info .sub-user-name {
     // --520c991b: var(--bew-theme-color);
     color: var(--bew-text-1);
   }

src/styles/index.ts

@@ -3,4 +3,4 @@ import './variables.scss'
 import './main.scss'
 import './reset.scss'
 import 'uno.css'
-import './adaptedStyles/index.scss'
+import './adaptedStyles'

src/styles/main.scss

@@ -56,16 +56,10 @@ h6 {
   --at-apply: color-$bew-text-1;
 }
 
-// adjust watcher later playlist container
-.playlist-container {
-  padding: 0 70px;
-}
-
-// video page
-.video-container-v1 {
-  padding: 0 70px;
-}
-
 .card-loaded {
   background-color: var(--bew-elevated-solid-1);
 }
+
+.brand_blue {
+  color: var(--bew-theme-color) !important;
+}