From 4d4fe86240fe1453330a6069e67afd6475948bf6 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sat, 2 Sep 2023 18:55:42 +0800 Subject: [PATCH] style: adjust dark mode style --- src/contentScripts/index.ts | 4 +- src/contentScripts/views/App.vue | 3 +- src/styles/adaptedStyles/index.scss | 1 - src/styles/adaptedStyles/index.ts | 15 ++++++ src/styles/adaptedStyles/search-page.scss | 14 +++++ src/styles/adaptedStyles/video-page.scss | 63 ++++++++++++++++++++++- src/styles/index.ts | 2 +- src/styles/main.scss | 14 ++--- 8 files changed, 99 insertions(+), 17 deletions(-) delete mode 100644 src/styles/adaptedStyles/index.scss create mode 100644 src/styles/adaptedStyles/index.ts create mode 100644 src/styles/adaptedStyles/search-page.scss diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index 056ed31d..02633a70 100644 --- a/src/contentScripts/index.ts +++ b/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) }) } diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 6ade810d..a1177e0c 100644 --- a/src/contentScripts/views/App.vue +++ b/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() as Ref const mainAppOpacity = ref(0) const showTopbarMask = ref(false) diff --git a/src/styles/adaptedStyles/index.scss b/src/styles/adaptedStyles/index.scss deleted file mode 100644 index f4c62e31..00000000 --- a/src/styles/adaptedStyles/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './video-page.scss' \ No newline at end of file diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts new file mode 100644 index 00000000..65951643 --- /dev/null +++ b/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) +// ) diff --git a/src/styles/adaptedStyles/search-page.scss b/src/styles/adaptedStyles/search-page.scss new file mode 100644 index 00000000..434c2ffb --- /dev/null +++ b/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; + } +} diff --git a/src/styles/adaptedStyles/video-page.scss b/src/styles/adaptedStyles/video-page.scss index b5180e8f..8840fb05 100644 --- a/src/styles/adaptedStyles/video-page.scss +++ b/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); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 3f3d736b..bd2b4062 100644 --- a/src/styles/index.ts +++ b/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' diff --git a/src/styles/main.scss b/src/styles/main.scss index 2ad0026b..352077dd 100644 --- a/src/styles/main.scss +++ b/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; +} \ No newline at end of file