From 2fc05fcb1ede70b40406acf3c4d9400bf91ab4df Mon Sep 17 00:00:00 2001 From: hakadao Date: Fri, 3 May 2024 00:07:59 +0800 Subject: [PATCH] refactor(historyPage.scss): Adjust styling --- src/styles/adaptedStyles/historyPage.scss | 195 +++++++++++----------- 1 file changed, 95 insertions(+), 100 deletions(-) diff --git a/src/styles/adaptedStyles/historyPage.scss b/src/styles/adaptedStyles/historyPage.scss index 427cd439..5a3aca3f 100644 --- a/src/styles/adaptedStyles/historyPage.scss +++ b/src/styles/adaptedStyles/historyPage.scss @@ -1,124 +1,119 @@ .bewly-design.historyPage { - .history-wrap .b-head .b-head-t, - .history-wrap .warn .txt { - color: var(--bew-text-1); - } - .b-head-search { - border-color: var(--bew-border-color) !important; - color: var(--bew-text-1); + // #region theme color adaption part + // Increase the priority of the style inside by writing a non-existent selector in `:not()` + :not(fdjslfds) { - &.input-active { + .history-list .r-info .w-info .username:hover, + .history-wrap a.btn { + color: var(--bew-theme-color); + } + + .history-wrap .warn .btn, + .history-wrap .time-label.active, + .history-wrap a.btn:hover { + color: white; + } + + .history-wrap a.btn, + .history-wrap .time-label, + .history-list .r-info .title:hover { + color: var(--bew-theme-color); + } + + .history-wrap .active, + .history-wrap .history-btn .btn:hover, + .history-wrap a.btn:hover, + .history-wrap .active, + .history-wrap .warn .btn, + .history-list .cover-contain .progress { + background-color: var(--bew-theme-color); + } + + .go-top-m .go-top:hover { + background-color: var(--bew-theme-color) !important; + } + + .history-wrap .active:before, + .history-wrap .time-label:after, + .history-wrap .time-label.active:before { + border-left-color: var(--bew-theme-color); + } + + .history-wrap .history-btn .btn:hover { + border-color: var(--bew-theme-color); + } + + .b-head-search.input-active, + .history-wrap a.btn, + .history-wrap .time-label, + .history-wrap .time-label.active, + .history-wrap a.btn:hover, + .go-top-m .go-top:hover { border-color: var(--bew-theme-color) !important; } - .b-head-search_input { - background-color: unset; - } - - .search-icon > img, - .search-cancel > img { + .b-head-search .search-icon>img, + .b-head-search .search-cancel>img { filter: var(--bew-filter-icon-glow); } } - .history-wrap a.btn:hover, - .history-wrap .active { - background-color: var(--bew-theme-color); - } + // #endregion - .history-wrap .warn .btn { - background-color: var(--bew-theme-color); - color: white; - } + // #region dark mode adaption part + &.dark { - .history-wrap .history-btn .btn:hover { - background-color: var(--bew-theme-color); - border-color: var(--bew-theme-color); - } + .history-wrap .warn .txt, + .history-wrap .b-head .b-head-t, + .b-head-search, + .history-list .r-info .title { + color: var(--bew-text-1); + } - .history-wrap .active:before { - border-left-color: var(--bew-theme-color); - } + .history-list .r-info .w-info .username { + color: var(--bew-text-2); + } - .history-list .l-info { - border-right-color: var(--bew-fill-2); - } + .history-list .r-info .w-info .device, + .history-list .r-info .w-info .pro-txt, + .history-list .r-info .w-info .name { + color: var(--bew-text-3); + } - .history-list .l-info .lastplay-time .history-red-round { - border-left-color: var(--bew-fill-2); - } + .history-list .r-info .history-mark, + .history-list .r-info .r-txt { + border-color: var(--bew-border-color); + } - .history-wrap .time-label.active, - .history-wrap a.btn:hover { - border-color: var(--bew-theme-color) !important; - color: white; - } + .go-top-m .go-top, + .b-head-search { + border-color: var(--bew-border-color) !important; + } - .history-wrap a.btn, - .history-wrap .time-label { - border-color: var(--bew-theme-color) !important; - color: var(--bew-theme-color); - } - .history-wrap .time-label:after { - border-left-color: var(--bew-theme-color); - } - .history-wrap .time-label:before { - border-left-color: var(--bew-bg); - } - .history-wrap .time-label.active:before { - border-left-color: var(--bew-theme-color); - } + .history-list .l-info { + border-right-color: var(--bew-fill-2); + } - .history-list .cover-contain .progress { - background-color: var(--bew-theme-color); - } + .history-list .r-info .w-info .name { + border-left-color: var(--bew-border-color); + } - .history-list .r-info { - background-color: unset; - } + .history-list .l-info .lastplay-time .history-red-round { + border-left-color: var(--bew-fill-2); + } - .history-list .r-info .r-txt { - border-color: var(--bew-border-color); - } + .history-wrap .time-label:before { + border-left-color: var(--bew-bg); + } - .history-list .r-info .title { - color: var(--bew-text-1); - } + .history-list .r-info, + .b-head-search .b-head-search_input { + background-color: unset; + } - .history-list .r-info .title:hover { - color: var(--bew-theme-color); - } - - .history-list .r-info .w-info .device, - .history-list .r-info .w-info .pro-txt, - .history-list .r-info .w-info .name { - color: var(--bew-text-3); - } - - .history-list .r-info .w-info .name { - border-left-color: var(--bew-border-color); - } - - .history-list .r-info .w-info .username { - color: var(--bew-text-2); - } - - .history-list .r-info .w-info .username:hover { - color: var(--bew-theme-color); - } - - .history-list .r-info .history-mark { - border-color: var(--bew-border-color); - } - - .go-top-m .go-top { - background-color: var(--bew-content-solid-1) !important; - border-color: var(--bew-border-color) !important; - - &:hover { - background-color: var(--bew-theme-color) !important; - border-color: var(--bew-theme-color) !important; + .go-top-m .go-top { + background-color: var(--bew-content-solid-1) !important; } } -} +} \ No newline at end of file