From 36f6bd55fdf7f95754a5ade29f1071a108264e4f Mon Sep 17 00:00:00 2001 From: hakadao Date: Sun, 16 Jun 2024 17:35:05 +0800 Subject: [PATCH] refactor(AdaptedStyles): move styles from articlesRanking && articlesList to articlesPage --- .../adaptedStyles/articlesListPage.scss | 71 ---------- src/styles/adaptedStyles/articlesPage.scss | 127 ++++++++++++++++-- .../adaptedStyles/articlesRankingPage.scss | 51 ------- src/styles/adaptedStyles/index.ts | 12 -- 4 files changed, 117 insertions(+), 144 deletions(-) delete mode 100644 src/styles/adaptedStyles/articlesListPage.scss delete mode 100644 src/styles/adaptedStyles/articlesRankingPage.scss diff --git a/src/styles/adaptedStyles/articlesListPage.scss b/src/styles/adaptedStyles/articlesListPage.scss deleted file mode 100644 index 5a9b9bee..00000000 --- a/src/styles/adaptedStyles/articlesListPage.scss +++ /dev/null @@ -1,71 +0,0 @@ -.bewly-design.articlesListPage { - // #region theme color adaption part - // Increase the priority of the style inside by writing a non-existent selector in `:not()` - :not(fdjslfds) { - .list-container .article-list-block .article-item .item-holder .article-content:hover .article-title, - .list-container - .article-list-block - .article-item - .item-holder - .article-content - .article-left-block - .article-info-bar - .reply:hover { - color: var(--bew-theme-color); - } - - .error-container .error-panel .rollback-btn, - .error-container .error-manga .change-img-btn, - .list-container .list-info-block .right-side .up-info-block .follow-btn:not(.on), - .modalBox .sure { - background-color: var(--bew-theme-color); - } - } - // #endregion - - // #region dark mode adaption part - &.dark { - .list-container .list-info-block .right-side .title, - .list-container .list-info-block .right-side .up-info-block .up-name, - .list-container .article-list-block .article-item .item-holder .article-content .article-title, - .modalBox, - .modalBox .cancel { - color: var(--bew-text-1); - } - - .list-container .list-info-block .right-side .col, - .list-container .list-info-block .right-side .summary, - .list-container .list-info-block .right-side .up-info-block .follow-btn.on { - color: var(--bew-text-2); - } - - .error-container .error-panel, - .error-container .error-split, - .error-container .error-manga, - .list-container .list-info-block, - .list-container .article-list-block, - .list-container .article-list-block .article-item { - background-color: var(--bew-bg); - } - - .modalBox { - background-color: var(--bew-content-solid-1); - } - - .list-container .list-info-block .right-side .col .split-line { - background-color: var(--bew-border-color); - } - - .list-container .list-info-block .right-side .up-info-block .follow-btn.on, - .modalBox .cancel { - background-color: var(--bew-fill-1); - } - - .list-container .list-info-block .right-side .up-info-block .follow-btn.on, - .list-container .article-list-block .article-item .item-holder .article-content .article-left-block, - .modalBox .cancel { - border-color: var(--bew-border-color); - } - } - // #endregion -} diff --git a/src/styles/adaptedStyles/articlesPage.scss b/src/styles/adaptedStyles/articlesPage.scss index caed4ab2..3c3d54fe 100644 --- a/src/styles/adaptedStyles/articlesPage.scss +++ b/src/styles/adaptedStyles/articlesPage.scss @@ -11,6 +11,10 @@ padding-right: 20px; } + #biliMainHeader { + height: 70px !important; + } + // #region theme color adaption part // Increase the priority of the style inside by writing a non-existent selector in :not() :not(fdjslfds) { @@ -40,7 +44,29 @@ .read-article-holder .card-text-label, .share-dynamic-dialog .sdd-card .name, .bili-dialog-bomb .appeal-box .wrap .container .textarea .memo a, - .article-tags .tag-item:hover { + .article-tags .tag-item:hover, + #App .rank-module .tab-bar .tab-item.on, + #App .rank-module .tab-bar .tab-item:hover, + #App .rank-module .article-list .article-item .item-holder .article-content:hover .article-title, + #App + .rank-module + .article-list + .article-item + .item-holder + .article-content + .article-left-block + .article-info-bar + .reply:hover, + #App .rank-module .article-list .article-item .item-holder .score-module .score, + .list-container .article-list-block .article-item .item-holder .article-content:hover .article-title, + .list-container + .article-list-block + .article-item + .item-holder + .article-content + .article-left-block + .article-info-bar + .reply:hover { color: var(--bew-theme-color); } @@ -52,7 +78,11 @@ .article-detail .unfollow, .modal-box-holder .modal-box .modal-footer .modal-btn-primary, .bili-dialog-bomb .appeal-box .submit .confirm, - .bili-dialog-bomb .appeal-box .wrap .container .options .option .checkbox.checked:before { + .bili-dialog-bomb .appeal-box .wrap .container .options .option .checkbox.checked:before, + .error-container .error-panel .rollback-btn, + .error-container .error-manga .change-img-btn, + .list-container .list-info-block .right-side .up-info-block .follow-btn:not(.on), + .modalBox .sure { background-color: var(--bew-theme-color); } @@ -61,7 +91,8 @@ .categories-bar .tag-item.on, .modal-box-holder .modal-box .modal-footer .modal-btn-primary, .read-article-holder .card-text-label, - .bili-dialog-bomb .appeal-box .wrap .container .options .option .checkbox.checked { + .bili-dialog-bomb .appeal-box .wrap .container .options .option .checkbox.checked, + #App .rank-module .tab-bar .tab-item.on { border-color: var(--bew-theme-color); } @@ -124,7 +155,14 @@ .van-popover.van-followed, .van-popover.van-followed .follow_dropdown li:hover, .share-dynamic-dialog .sdd-head, - .share-success-dialog .info { + .share-success-dialog .info, + #App, + #App .rank-module .article-list .article-item .item-holder .article-content .article-title, + .list-container .list-info-block .right-side .title, + .list-container .list-info-block .right-side .up-info-block .up-name, + .list-container .article-list-block .article-item .item-holder .article-content .article-title, + .modalBox, + .modalBox .cancel { color: var(--bew-text-1); } @@ -153,7 +191,11 @@ .bili-dialog-bomb .appeal-box .submit .cancel, .interaction-info .toolbar .share-box .qrcode-tit, .share-dynamic-dialog .sdd-input, - .share-success-dialog .hint { + .share-success-dialog .hint, + #App .rank-module .tips, + .list-container .list-info-block .right-side .col, + .list-container .list-info-block .right-side .summary, + .list-container .list-info-block .right-side .up-info-block .follow-btn.on { color: var(--bew-text-2); } @@ -174,7 +216,53 @@ .interaction-info .toolbar .share-box, .interaction-info, .followed, - .share-dynamic-dialog .sdd-card .sdd-card-content { + .share-dynamic-dialog .sdd-card .sdd-card-content, + #App + .rank-module + .article-list + .article-item + .item-holder + .article-content + .article-left-block + .article-info-bar + .up-content + .nick-name, + #App + .rank-module + .article-list + .article-item + .item-holder + .article-content + .article-left-block + .article-info-bar + .category, + #App + .rank-module + .article-list + .article-item + .item-holder + .article-content + .article-left-block + .article-info-bar + .like, + #App + .rank-module + .article-list + .article-item + .item-holder + .article-content + .article-left-block + .article-info-bar + .reply, + #App + .rank-module + .article-list + .article-item + .item-holder + .article-content + .article-left-block + .article-info-bar + .view { color: var(--bew-text-3); } @@ -189,7 +277,13 @@ .bili-dialog-bomb .appeal-box .header, .bili-dialog-bomb .appeal-box .submit, .bili-dialog-bomb .appeal-box .submit .cancel, - .bili-button.primary.plain { + .bili-button.primary.plain, + .error-container .error-panel, + .error-container .error-split, + .error-container .error-manga, + .list-container .list-info-block, + .list-container .article-list-block, + .list-container .article-list-block .article-item { background-color: transparent; } @@ -225,7 +319,8 @@ .page-content .right-side .search-module .search-block .search-word-panel .panel-title p span, .page-content .left-side .partitio-name .filter .filter-btn-lst, .to-top, - .bili-dialog-bomb .appeal-box { + .bili-dialog-bomb .appeal-box, + .modalBox { background-color: var(--bew-elevated-solid-1); } @@ -236,7 +331,10 @@ .page-content .right-side .rank-module .rank-list .item .rank-index, .article-read-info .spoiler, - .page-content .right-side .up-list .fresh-btn { + .page-content .right-side .up-list .fresh-btn, + #App .rank-module .tips, + .list-container .list-info-block .right-side .up-info-block .follow-btn.on, + .modalBox .cancel { background-color: var(--bew-fill-1); } @@ -248,6 +346,10 @@ background-color: var(--bew-fill-2); } + #App .rank-module .article-list .article-item { + background-color: transparent; + } + .page-content .left-side .article-list .article-list-holder .article-item, .page-content .right-side .up-list .title, .page-content .right-side .rank-module .rank-tabs-bar, @@ -278,7 +380,12 @@ .read-article-holder .row-video-holder, .interaction-info .toolbar .share-box .qrcode-box, .share-dynamic-dialog .sdd-action-bar, - .share-dynamic-dialog .sdd-head { + .share-dynamic-dialog .sdd-head, + #App .rank-module .article-list .article-item .item-holder .article-content, + .list-container .list-info-block .right-side .col .split-line, + .list-container .list-info-block .right-side .up-info-block .follow-btn.on, + .list-container .article-list-block .article-item .item-holder .article-content .article-left-block, + .modalBox .cancel { border-color: var(--bew-border-color); } diff --git a/src/styles/adaptedStyles/articlesRankingPage.scss b/src/styles/adaptedStyles/articlesRankingPage.scss deleted file mode 100644 index 2ffb95fe..00000000 --- a/src/styles/adaptedStyles/articlesRankingPage.scss +++ /dev/null @@ -1,51 +0,0 @@ -.bewly-design.articlesRankingPage { - // #region theme color adaption part - // Increase the priority of the style inside by writing a non-existent selector in `:not()` - :not(fdjslfds) { - #App .rank-module .tab-bar .tab-item.on, - #App .rank-module .tab-bar .tab-item:hover, - #App .rank-module .article-list .article-item .item-holder .article-content:hover .article-title, - #App - .rank-module - .article-list - .article-item - .item-holder - .article-content - .article-left-block - .article-info-bar - .reply:hover, - #App .rank-module .article-list .article-item .item-holder .score-module .score { - color: var(--bew-theme-color); - } - - #App .rank-module .tab-bar .tab-item.on { - border-color: var(--bew-theme-color); - } - } - // #endregion - - // #region dark mode adaption part - &.dark { - #App, - #App .rank-module .article-list .article-item .item-holder .article-content .article-title { - color: var(--bew-text-1); - } - - #App .rank-module .tips { - color: var(--bew-text-2); - } - - #App .rank-module .tips { - background-color: var(--bew-fill-1); - } - - #App .rank-module .article-list .article-item { - background-color: var(--bew-bg); - } - - #App .rank-module .article-list .article-item .item-holder .article-content { - border-color: var(--bew-border-color); - } - } - // #endregion -} diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts index 0fa55f2b..ba85c699 100644 --- a/src/styles/adaptedStyles/index.ts +++ b/src/styles/adaptedStyles/index.ts @@ -104,18 +104,6 @@ async function setupStyles() { document.documentElement.classList.add('articlesPage') } - // articles list page 专栏列表页 - else if (/https?:\/\/(?:www\.)?bilibili\.com\/read\/readlist.*/.test(currentUrl)) { - await import('./articlesListPage.scss') - document.documentElement.classList.add('articlesListPage') - } - - // articles ranking page 专栏排行榜页 - else if (/https?:\/\/(?:www\.)?bilibili\.com\/read\/ranking.*/.test(currentUrl)) { - await import('./articlesRankingPage.scss') - document.documentElement.classList.add('articlesRankingPage') - } - // 404 page 404页 else if (/^https?:\/\/(?:www\.)?bilibili\.com\/404.*$/.test(currentUrl)) { await import('./error404Page.scss')