renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(historyPage.scss): Adjust styling

Browse Source
This commit is contained in:
hakadao
2024-05-03 00:07:59 +08:00
parent 64a7fce64b
commit 2fc05fcb1e
1 changed files with 95 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/styles/adaptedStyles/historyPage.scss
View File

@@ -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;
}
}
}
}