refactor(AdaptedStyles): move styles from articlesRanking && articlesList to articlesPage

2025-04-14 13:15:29 +00:00 · 2024-06-16 17:35:05 +08:00
parent 5f925f4eb6
commit 36f6bd55fd
4 changed files with 117 additions and 144 deletions
--- a/src/styles/adaptedStyles/articlesListPage.scss
+++ b/src/styles/adaptedStyles/articlesListPage.scss
@@ -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
-}
--- 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);
    }

--- a/src/styles/adaptedStyles/articlesRankingPage.scss
+++ b/src/styles/adaptedStyles/articlesRankingPage.scss
@@ -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
-}
--- 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')