BewlyBewly/src/styles/adaptedStyles/pages/notificationsPage.scss

.notificationsPage {
  #message-navbar {
    display: none;
  }
}

.bewly-design.notificationsPage {
  // remove original Bilibili background image
  body,
  &.bili_dark body {
    background: unset;
  }

  #message-navbar {
    + .container {
      margin-top: 0;
      padding-top: var(--bew-top-bar-height);
      height: calc(100vh - var(--bew-top-bar-height));

      &::after {
        content: "";
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/light_bg.8e46311e.png)
          bottom/cover no-repeat fixed;
        pointer-events: none;
      }
    }
  }

  &.dark #message-navbar {
    + .container {
      &::after {
        background: url(https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/dark_bg.e136e3d5.png)
          bottom/cover no-repeat fixed;
        opacity: 0.2;
      }
    }
  }

  .message-list::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 140, 0.44);
  }

  #link-message-container {
    z-index: 1;
  }

  // #region theme color adaption part
  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
  :not(foobar) {
    .space-left {
      .item:hover a,
      .item.active a,
      .item:hover,
      .item.active {
        color: var(--bew-theme-color) !important;
      }
    }

    .at,
    .line-1 .name-field a:hover,
    .im-dynamic-link,
    .im-topic-link,
    .header .tab.active,
    .link,
    .dynamic-link,
    .line-1 .like-item:hover,
    .space-right .space-right-top .title a:hover,
    .button-box .item > button.active,
    .operate-btn,
    .action-menu .menu-list a:hover,
    .bp-popup-panel .title-ctnr .popup-title,
    .bl-button--ghost,
    .action-button.del-button:hover svg *,
    .love-card .action-button:hover > svg *,
    .content .input-section .row .emoji-btn:hover svg *,
    .content .input-section .row .emoji-btn.active svg *,
    .reply-card .action-button:not(.del-button):hover > svg *,
    .at-card .action-button:not(.del-button):hover > svg *,
    .action-button.active svg *,
    .bili-im .left .title .back-link:hover,
    .bl-button--shallow-o:hover,
    .bl-button--shallow-o:active,
    .bl-button--shallow-o.active,
    .bl-button--shallow-o[active],
    .notify-wrapper .notify-push .set-push:not(.disabled),
    .msg-notify .link:hover,
    .msg-more,
    .error .btn,
    .detail .content.active:hover {
      color: var(--bew-theme-color);
    }

    .content .input-section .row .emoji-btn:hover,
    .content .input-section .row .emoji-btn.active,
    .action-button:hover,
    .action-button.active {
      color: var(--bew-theme-color) !important;
    }

    .send-btn.active,
    .bl-button--ghost:hover {
      color: white;
    }

    .at:hover,
    .im-dynamic-link:hover,
    .im-topic-link:hover {
      color: var(--bew-theme-color-80);
    }

    .css-o1815x .border,
    .css-o1815x .dot,
    .action-button:hover .border,
    .action-button > .action-icon.active .border {
      fill: var(--bew-theme-color) !important;
    }

    .header .tab.active,
    .medal-admin,
    .medal-system,
    .medal-master,
    .send-btn.active,
    .operate-btn,
    .bl-button--ghost,
    .bl-button--ghost:hover,
    .bl-button--shallow-o:hover,
    .bl-button--shallow-o:active,
    .bl-button--shallow-o.active,
    .bl-button--shallow-o[active] {
      border-color: var(--bew-theme-color);
    }

    .content .input-section .row .emoji-btn:hover,
    .content .input-section .row .emoji-btn.active,
    .reply-textarea:focus {
      border-color: var(--bew-theme-color) !important;
    }

    .tab-list .tab-item.active::before {
      border-top-color: var(--bew-theme-color);
    }

    .medal-admin,
    .medal-system,
    .medal-master,
    .send-btn.active,
    .tab-list .tab-item.active::after,
    .content .btnrow .btn.save,
    .send-button,
    .notify-number,
    .bl-button--primary,
    .bl-button--ghost:hover,
    .message .message-content.is-me,
    .notify-dot,
    .content .kw-search-row .create-btn {
      background-color: var(--bew-theme-color);
    }

    .is-up > .message > .message-content,
    .toggle.active {
      background-color: var(--bew-theme-color) !important;
    }

    .bl-button--shallow-o:active,
    .bl-button--shallow-o.active,
    .bl-button--shallow-o[active],
    .cs-actions-wrap .cs-actions .cs-action-item:hover {
      background-color: var(--bew-theme-color-20);
    }

    .send-btn.active:hover,
    .bl-button--primary:hover {
      background-color: var(--bew-theme-color-80);
    }

    .emoji-container .emotion-btn-box:active,
    .emoji-container .emotion-btn-box:hover,
    .image-upload-btn.opened,
    .image-upload-btn:hover,
    .customer-actions-wraper .customer-actions-btn:active,
    .customer-actions-wraper .customer-actions-btn:hover,
    .helper-btn.active::before,
    .load-more .icon,
    .msg-notify .link:hover i {
      filter: var(--bew-filter-icon-glow);
    }
  }
  // #endregion

  // #region dark mode adaption part
  &.dark,
  &.bili_dark {
    .space-left {
      .title,
      .item a {
        color: var(--bew-text-1);
      }

      .side-bar .icon {
        filter: contrast(0) brightness(2);
      }
    }

    .loading .progress {
      background-color: transparent;
      filter: contrast(0) brightness(2);
    }

    .space-right .space-right-top .title,
    .space-right .line-2,
    .line-1 .name-field,
    .title,
    .config,
    .radio-selector,
    .header .tab,
    .bili-im .list-item .name,
    .bili-im .list-item .last-word,
    .bili-im .message .message-content:not(.is-img),
    .bili-im .msg-notify .cover-container .table-container .modules .module .detail,
    .bili-im .core-style,
    .detail .content,
    .follow-btn.active,
    .bp-emoji-box .emoji.kaomoji,
    .bp-emoji-box2 .emoji.kaomoji,
    .reply-textarea,
    .ar-recommend-item__info--title,
    .action-menu .menu-list a,
    .context-menu,
    .bp-popup-panel .content-text,
    .bp-popup-panel .selector-box,
    .textarea,
    .tab-list,
    .group-helper-msg-list .name,
    .share-card.video-type .content,
    .bili-im,
    .bl-button--shallow-o,
    .cs-self-service .cs-self-service-list .cs-self-service-item .tool-title,
    .auto-reply-push__desc,
    .content .row .left .title {
      color: var(--bew-text-1);
    }

    .line-1,
    .text-box,
    .bottom,
    .tip,
    .bili-im .msg-notify .content,
    .follow-btn.inactive,
    .notify-wrapper .notify-text,
    .msg-time .time,
    .send-btn:not(.active),
    .orginal-reply,
    .content .input-section .row .emoji-btn,
    .content .btnrow .btn.save.disabled,
    .content .btnrow .btn.clear,
    .msg-push-new__leave-message--text,
    .bp-icon-font.icon-close:before,
    .cs-actions-wrap .cs-actions .cs-action-item,
    .ar-recommend-item__info--desc .time,
    .ar-recommend-item__info--view,
    .content .row .left .desc {
      color: var(--bew-text-2);
    }

    .line-3,
    .line-3 *,
    .bili-im .msg-notify .cover-container .table-container .modules .module .mtitle,
    .content .btnrow .btn.clear:hover {
      color: var(--bew-text-3);
    }

    .notify-wrapper .notify-push .set-push.disabled {
      color: var(--bew-text-4);
    }

    .divider,
    .at-item:not(:last-child)::after,
    .love-item:not(:last-child)::after,
    .header,
    .bili-im .left,
    .bili-im .left .title,
    .bili-im .right .title,
    .bili-im .send-box,
    .liked-user:not(:last-child)::after,
    .follow-btn.active,
    .divided-line,
    .static-popup,
    .send-btn:not(.active),
    .content .input-section,
    .content .input-section .row .emoji-btn,
    .content .btnrow .btn.clear,
    .reply-textarea,
    .action-menu .menu-list,
    .bl-button--shallow-o,
    .cs-actions-wrap {
      border-color: var(--bew-border-color);
    }

    .action-menu .menu-list:before {
      border-right-color: var(--bew-border-color);
      border-top-color: var(--bew-border-color);
    }

    .share-card .footer {
      border-top-color: var(--bew-border-color);
    }

    .orginal-reply {
      border-color: var(--bew-text-2);
    }

    .space-right .space-right-top .title,
    .card,
    .config {
      box-shadow: unset;
    }

    .lds-spinner div:after {
      background-color: var(--bew-text-1);
    }

    .config .config-item:not(:first-child)::before,
    .bili-im .msg-notify hr,
    .divider-last::before,
    .divider-last::after,
    .header::after,
    .split-line,
    .content .chr {
      background-color: var(--bew-border-color);
    }

    .space-left,
    .space-right {
      background-color: var(--bew-content);
    }

    .bili-im .left,
    .bili-im .msg-notify,
    .bili-im .msg-push-new,
    .bili-im .message .message-content:not(.is-img),
    .bili-im .send-box,
    .follow-btn.inactive,
    .follow-btn.active,
    .notify-wrapper .notify-text,
    .bp-emoji-box .pagination,
    .bp-emoji-box2 .pagination,
    .send-btn:not(.active),
    .toggle,
    .content .btnrow .btn.save.disabled,
    .reply-textarea,
    .list-item.top,
    .cs-self-service .cs-self-service-list .cs-self-service-item,
    .cs-order-notice,
    .cs-rich-text-answer .rich-answer-evaluate .ev-thumb,
    .cs-q-tab-area ul.cs-q-tabs li.cs-q-tab-item.active,
    .auto-reply-push,
    .content .kw-search-row .kw-search {
      background-color: var(--bew-fill-1);
    }

    .bili-im .list-item.active,
    .bili-im .list-item:hover,
    .bp-emoji-box .emoji-cover.selected,
    .bp-emoji-box .emoji:hover,
    .bp-emoji-box2 .emoji-cover.selected,
    .bp-emoji-box2 .emoji:hover,
    .action-menu .menu-list a:hover,
    .context-menu li:hover {
      background-color: var(--bew-fill-2);
    }

    .msg-push-new__leave-message {
      background-color: var(--bew-fill-3);
    }

    .bili-im .name.name-loading {
      background-color: var(--bew-skeleton);
    }

    .emoji-list .emoji {
      background-color: transparent;
    }

    .link-progress-tv {
      background-color: transparent !important;
    }

    .space-right-top .title,
    .card,
    .config,
    .bili-im,
    .bili-im .message-list {
      background-color: var(--bew-content-solid);
    }

    .cs-q-tab-area ul.cs-q-tabs {
      background-color: var(--bew-content-alt-solid);
    }

    .static-popup,
    .action-menu .menu-list,
    .action-menu .menu-list:before,
    .context-menu,
    .bp-popup-panel,
    .group-helper-msg-list,
    .tab-list .tab-item.active::before,
    .group-helper-msg-list::after,
    .cs-actions-wrap {
      background-color: var(--bew-elevated-solid);
    }

    .cs-q-tab-area.shadow:after {
      background: linear-gradient(270deg, var(--bew-content-alt-solid) 0%, transparent 100%);
    }

    .follow-btn.inactive,
    .content .btnrow .btn.save.disabled {
      opacity: 0.6;
    }

    .action-button > .action-icon .border {
      fill: var(--bew-text-3);
    }

    .link-progress-tv {
      filter: invert(1) brightness(2);
    }

    .share-card.video-type .content {
      color: var(--bew-text-1);
    }

    .share-card .footer {
      border-top: 1px solid var(--bew-border-color);
    }
  }
  // #endregion
}