@import "./dark-definitions";
.new-topic-panel {
  @include background-color("4");
  .tag-item .label {
    @include background-color("3");
    @include color("e");
  }
  .more-button .more:hover {
    @include theme-color();
    &::after {
      @include theme-border-color();
    }
  }
}
.bypb-window .online {
  @include background-color("4");
  @include border-color();
  a {
    @include color("e");
    &:hover {
      @include theme-color();
    }
  }
}
.bilibili-search-history {
  .history-item:hover {
    @include background-color("2");
  }
  .cancel-icon:hover {
    @include theme-color();
  }
}

.v-wrap .r-con .notice {
  @include background-color("4");
}
.video-container .text-area .subtitle {
  @include color("a");
}
.image-upload-btn:hover {
  @include to-theme("blue");
}

.msg-notify {
  @include background-color("2");
  hr {
    @include background-color("4");
  }
  .context-menu {
    @include background-color("4");
    @include color("e");
  }
  .link i {
    @include to-theme("blue");
  }
}
.popup-bg-cntr .popup-cntr {
  @include background-color("4");
  .left-part {
    @include background-color("2");
    .round-item {
      .round-name {
        @include color("e");
      }
      .round-state {
        @include color("a");
      }
      &.active {
        background-image: none !important;
        @include background-color("4");
        .round-name .progress {
          @include theme-color();
        }
      }
    }
  }
  .right-part {
    .activity-name,
    .not-bingo,
    .not-join {
      @include color("e");
    }
    .bingo-list {
      @include background-color("5");
      .title {
        @include color("e");
      }
      .bingo-group-item-cntr .bingo-group-item .title {
        @include color("a");
      }
    }
    .award-list-cntr {
      .title {
        @include color("e");
      }
      .award-list .award-item {
        .desc {
          @include color("a");
        }
        img {
          @include theme-border-color();
        }
      }
    }
    .right-top-corner .rule {
      @include theme-color();
    }
    .help-cntr {
      @include background-color("2");
      .title {
        @include color("e");
      }
    }
  }
}
.draw-fold-cntr .sender-info {
  @include background-color("2");
  @include color("e");
  box-shadow: 0 0 0 1px var(--theme-color) !important;
  .name {
    @include color("e");
  }
  .words {
    @include color("a");
  }
}
.article-holder .bangumi-card a .cover {
  @include border-color("4");
}

.user-panel .number-part {
  .numbers {
    @include color("e");
  }
  &:hover .numbers {
    @include theme-color();
  }
}
.main-container .ep-list-wrapper .list-title {
  .mode-change i,
  .ep-list-order {
    @include to-theme("blue");
    &:hover {
      @include to-theme("blue");
    }
  }
}
.gift-item.buy {
  &.hover,
  &.hover-item,
  &:hover {
    @include background-color("3");
  }
}
.cntr {
  .user-protocol {
    @include border-color("4");
  }
  .silver-seed-store {
    @include background-color("4");
    .content {
      @include background-color("2");
    }
  }
}
.collection-bg .collection-board {
  @include background-color("2");
  .collection-submit {
    @include background-color("4");
  }
  .collection-list .collection-li {
    .collection-attr {
      @include color("a");
    }
    .collection-name,
    .collection-song-number {
      @include color("e");
    }
  }
  .collection-submit {
    @include color("a");
    &.active {
      @include theme-background-color();
      @include color("e");
    }
  }
  .collection-theme {
    @include color("e");
  }
  .collection-list {
    @include border-color("4");
    .collection-li {
      .collection-checkbox .collection-checked,
      &:hover .collection-checkbox,
      &:hover .collection-name {
        @include theme-color();
      }
    }
  }
}
.channel-menu-mini .box a:hover {
  @include background-color("4");
}
.game-item .info .grade-wrap {
  @include color("a");
  .other-grades {
    @include background-color("4");
    @include border-color();
    .grade-li {
      @include color("a");
    }
  }
}
.classroom-wrapper {
  .nav-wrapper {
    @include color("e");
    .rec-title {
      @include color("e");
    }
  }
  .content .block{
    &-title,
    &-page-progress,
    &-list-item-title {
      @include color("e");
    }
    &-list .slider-contro .slider {
      &-prev,
      &-next {
        @include to-white();
        &:hover {
          @include to-theme("white");
          @include background-color("4");
        }
      }
    }
  }
  .rank-title {
    @include color("e");
  }
}
.s_tag .tag-area {
  .tag,
  .tag-item {
    @include background-color("4");
    @include border-color();
    @include color("e");
    &:hover {
      @include theme-background-color();
      @include foreground-color();
    }
  }
  .topic-link {
    @include color("e");
    .tag-icon {
      @include to-white();
    }
  }
  .channel {
    &-icon {
      @include to-white();
    }
    &-name {
      @include color("e");
    }
  }
  .tag-channel-pane {
    @include background-color("3");
    .channel {
      &-cover {
        @include border-color("3");
      }
      &-title {
        @include color("e");
      }
      &-desc {
        @include color("a");
      }
      &-btns {
        &__link {
          @include theme-color();
          @include theme-border-color();
          &:hover {
            @include foreground-color();
            @include theme-background-color();
          }
        }
        .is-subs {
          @include background-color("2");
          @include color("e");
          @include border-color();
        }
        .no-subs {
          @include foreground-color();
          @include theme-border-color();
          @include theme-background-color();
        }
        .tag-channel-cancel-popup {
          @include background-color("4");
          p {
            @include color("e");
          }
          a.btn-ok {
            @include foreground-color();
            @include theme-background-color();
          }
          a.btn-no {
            @include color("e");
            @include background-color("2");
          }
        }
      }
    }
  }
}
.share-board .song-share .font-blue {
  @include theme-color();
}
.guard-store-box {
  .buy-detail {
    @include color("e");
    .master {
      @include theme-color();
    }
  }
  .select-month {
    @include color("e");
    .month-selector .month-info {
      @include color("e");
      @include theme-border-color();
      .month-list {
        @include background-color("4");
        .month-item {
          @include color("e");
          &:hover .days {
            @include theme-color();
          }
        }
      }
      .triangle:before {
        @include border-color("4");
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        border-bottom-color: transparent !important;
      }
    }
  }
  .expired-date {
    @include color("a");
  }
  .btn-box .total-price {
    @include color("e");
  }
}
.crowdfunding-container {
  .current-num-wrap {
    .current-num {
      @include color("e");
    }
    .join-status {
      @include color("a");
    }
  }
  .tips-container .status {
    @include theme-color();
    &.fail {
      @include color("a");
    }
    &.nostart {
      @include color("e");
    }
  }
  .progress-container {
    @include background-color("2");
    .progress-fill.highlight {
      @include theme-background-color();
    }
  }
  .current-pro-num.highlight {
    @include theme-color();
  }
  .goal-container {
    @include color("a");
    .goal-num,
    .goal-time {
      @include color("e");
    }
  }
  .risk-tip-container .risk-content {
    @include background-color("2");
  }
}
.ticket-tips-wrapper .merchant-section {
  @include background-color("4");
  .merchant-header {
    @include color("e");
    span {
      @include to-theme("pink");
    }
  }
  .baseinfo-wrapper .content-item .title {
    @include background-color("3");
    .fold-btn:hover {
      .open,
      .close {
        @include to-theme("pink");
      }
    }
  }
}
.searchresult-total-number {
  .left-line {
    background-image:linear-gradient(90deg,#444,#aaa) !important;
  }
  .right-line {
    background-image:linear-gradient(90deg,#aaa,#444) !important;
  }
  .total-num {
    @include color("a");
  }
}
.h #h-sign:focus {
  @include background-color("4");
  @include color("e");
  box-shadow: inset 0 2px 4px #0008 !important;
}
.action-button:hover .border, .action-button > .action-icon.active .border {
  @include theme-fill();
}
.history-list .r-info .w-info {
  .device {
    @include color("a");
  }
  .name {
    @include border-color("4");
  }
}
.loading-card {
  .cover,
  .title,
  .up,
  .desc {
    @include background-color("4");
  }
}
.bili-im {
  @include background-color("4");
  @include color("e");
  box-shadow: none !important;
  .left {
    @include border-color("5");
    .title {
      @include border-color("5");
    }
  }
}
.fans-medal-item {
  .label {
    .content {
      @include color("2");
    }
  }
}
.chat-control-panel .bottom{
  .content {
    @include background-color();
    @include color("2");
  }
  .medal-ctnr {
    .title ~ .qs-icon {
      @include color("a");
    }
  }
  .medal-wear-body {
    .medal-item {
      .progress-level-div {
        .progress-div {
          @include background-color("4");
          .progress-num-span {
            @include theme-color();
          }
          &-cover {
            @include theme-background-color();
          }
        }
        .level-span {
          @include color("a");
        }
      }
      .limit-progress-div {
        @include color("a");
      }
    }
  }
  .footer-line {
    @include border-color("4");
  }
  .medal-wear-footer {
    @include theme-color();
    a {
      @include theme-color();
    }
  }
}
.join-fans-body .desc-text p,
.main p span,
.WordSection1 p,
.chat-history-panel .brush-prompt .brush-prompt-item {
  @include color("e");
}
.content-main {
  p,
  h5,
  h6 {
    @include color("e");
  }
}
.act-rich-style-init .act-rich-render-content {
  @include color("e");
  p span {
    @include color("a");
    a strong {
      @include theme-color();
    }
  }
}
.long-page .page-content {
  @include background-color();
  @include color("e");
  @include border-color("4");
  h1,
  .strong {
    @include color("e");
  }
}
.bb-comment .comment-list .list-item .info .reply-tags span {
  @include background-color("3");
  @include color("a");
}
.bilibili-player-video-sendbar {
  &-left,
  &-right {
    @include background-color("4");
  }
}
.post-content .bangumi-container {
  @include border-color();
}
.jumping-ctnr .jumping-input {
  @include background-color("2");
}
.qrpay-group .qrpay-content .more-pay {
  .more-text {
    @include color("a");
  }
  .more-btn {
    @include theme-background-color();
    @include color("e");
  }
}
.b-info {
  .balance {
    &-top {
      .button {
        @include border-color();
      }
      &:after {
        @include background-color("a");
      }
      .balance-row {
        .balance-title {
          @include color("e");
        }
        .balance-right {
          .balance-price,
          .balance-name {
            @include theme-color();
          }
          .shell-channel .shell-item {
            @include background-color("3");
            @include border-color();
            &-active {
              @include theme-border-color();
            }
            .channel-name {
              @include color("e");
            }
          }
          input {
            @include background-color("4");
            @include color("e");
            &::placeholder {
              @include color("a");
            }
          }
          .all-btn {
            @include theme-color();
          }
          .withdraw-btn {
            @include theme-background-color();
          }
        }
      }
    }
    &-footer .part-balance-name {
      @include color("e");
      .unbb-des {
        @include background-color("3");
        background-image: none !important;
        a {
          @include theme-color();
        }
      }
      .check-detail-btn {
        @include theme-color();
      }
    }
  }
  .warning-group {
    @include border-color();
    .warning-title {
      @include color("e");
    }
  }
  .rule-btn {
    @include theme-color();
    @include theme-border-color();
  }
}
.spend-recode .title-group .selected-title:after {
  @include theme-background-color();
}
#newsList,
#newsDetail {
  li.tag:hover {
    @include background-color();

    span {
      @include theme-color();
    }
  }
}
#app-ctnr .label-wrapper .content {
  @include background-color();
}
.my-album .link-panigation li.panigation.selected {
  @include theme-background-color();
  @include foreground-color();
}
.container.similar-songs-content {
  @include background-color();
  .similar-title,
  .similar-songs-title {
    @include color("e");
  }
  .play-songs-btn {
    @include theme-background-color();
    @include foreground-color();
  }
  .similar-songs-list {
    @include border-color();
    .list-item {
      &.odd {
        @include background-color("3");
      }
      &.even {
        @include background-color("4");
      }
      .song-sort {
        @include color("e");
      }
      .song-title .song-float:hover,
      .song-title .song-collection.font-blue,
      .song-uname.font-blue {
        @include theme-color();
      }
    }
  }
}
.fansmedal-popover {
  .target-user {
    @include theme-color();
  }
}
.bp-right .des-content {
  @include background-color("2");
  .text-content .title {
    @include color("e");
  }
  .button {
    @include theme-background-color();
    @include foreground-color();
  }
}
.comment-jump-url img {
  @include to-theme("blue");
}
.wide-members__title,
.s_tag .tag-area>li .tag-link {
  @include color("e");
}
.members-info {
  .avatar-name__container .name-text {
    @include color("e");
  }
  .avatar {
    @include background-color("4");
    .info-tag {
      @include background-color("3");
      @include theme-color();
      @include theme-border-color();
    }
    .attention {
      @include theme-background-color();
    }
  }
}
#page-video .play-all-btn {
  @include color("e");
  &>img {
    @include to-theme("pink");
  }
}
.video-card-common a {
  @include color("e");
  &:hover {
    @include theme-color();
  }
}
a.bp_box_bot_click {
  @include theme-border-color();
}
.el-date-table td {
  &.available:hover {
    @include theme-color();
  }
  &.current:not(.disabled) span {
    @include theme-background-color();
  }
  &.today span {
    @include foreground-color();
  }
  &.disabled div {
    @include background-color("3");
    @include color("a");
  }
}
.list-introText {
  @include theme-color();
}
.song-list .song-li .song-shadow {
  @include theme-background-color(30);
}
.recommend-list .rec-title {
  @include color("e");
  .next-buttom {
    @include color("a");
    .switch-button {
      @include background-color("4");
      @include border-color("4");
      &.on {
        @include theme-background-color();
        @include theme-border-color();
      }
    }
  }
}

.nav-tabs {
  @include border-color("4");
  .nav-tabs__item {
    @include border-color();
    &>span,
    &>div>span {
      @include color("e");
    }
    &:hover span,
    &--active span {
      @include theme-color();
    }
    &--active {
      @include theme-border-color();
    }
  }
}
.rank-container {
  .rank-tab-wrap .rank-tab {
    @include color("e");
    &--active {
      @include theme-background-color();
      @include foreground-color();
    }
  }
  .rank-list .rank-item:hover {
    box-shadow: 0px 1px 10px 0px var(--theme-color-30) !important;
  }
  @include back-top-btn();
}
.popular-list .popular-tips,
.history-list .history-tips,
.rank-container .rank-tips {
  @include color("a");
}
.video-card .video-card__info {
  .video-name {
    @include color("e");
  }
  &:hover .video-name {
    @include theme-color();
  }
  .rcmd-tag {
    @include border-color("4");
  }
  .strong-tag {
    @include background-color("4");
    @include theme-color();
  }
  .weak-tag {
    @include theme-color();
    @include theme-border-color();
  }
  .up-name {
    @include color("a");
  }
}
.weekly-header {
  .current-tiem {
    @include color("e");
  }
  .panel {
    @include background-color("3");
    .item-active {
      @include theme-background-color();
      .item-info,
      .item-title {
        @include foreground-color();
      }
    }
    .item-title {
      @include color("e");
    }
    .item-info {
      @include color("a");
    }
    .select-item:not(.item-active):hover {
      @include background-color("4");
    }
  }
}
.video-card {
  .weekly-hint {
    @include background-color("4");
    @include color("a");
  }
  .history-hint {
    @include background-color("4");
  }
}
.rank-list .rank-item .content .img,
.rank-list .rank-item .content .img .cover {
  @include background-color("4");
  @include border-color();
}
.manga-detail {
  .layout,
  .section .right-side .recommendation {
    @include background-color("4");
  }
  .episode-list-component .episode-list .list-header .header-item {
    @include background-color("5");
  }
  .section .right-side {
    .recommendation .header-content .more:hover {
      @include background-color();
      @include theme-color();
    }
    .recommendation .header-content .more:hover .emmet-right,
    .ranking-jump:hover .emmet-right {
      @include to-theme("blue");
    }
  }
  .comic-info-panel .comic-detail {
    .comic-title {
      @include color("e");
    }
    .comic-info {
      @include color("a");
    }
  }
  .section .right-side .recommendation .header-content .title {
    @include theme-color();
  }
}
.container .back-to-content {
  @include background-color("4");
  .back-to-top-button:hover .icon-top {
    @include to-theme("blue");
  }
}
.classroom-innerWrapper {
  .classroom-rec {
    .title {
      @include color("e");
    }
    .rank-index {
      @include background-color("4");
    }
  }
  .upComming {
    .block-page-progress {
      @include color("e");
    }
    .block-list .slider-contro .slider-next:hover,
    .block-list .slider-contro .slider-prev:hover {
      @include background-color("4");
    }
    .tags {
      @include background-color("2");
      @include color("a");
    }
  }
}
.up-info .up-info_right .name .message:hover,
.up-info .up-info_right .name .message:hover i,
.shop-desc .desc-box .price {
  @include theme-color();
}

.header-video-card:hover {
  @include background-color("3");
}
.video-toolbar .note-btn {
  @include theme-color();
  @include theme-border-color();
  &:hover {
    @include theme-background-color();
    @include foreground-color();
  }
}
.my-notebook {
  .note-header {
    @include border-color();
    .note-title {
      .note-text {
        @include color("e");
      }
      .note-count {
        @include color("a");
      }
    }
  }
  .note-single-item {
    @include border-color("5");
    &--selected {
      @include background-color("3");
    }
    .note-item__detail {
      &--title {
        @include color("e");
      }
      &--info {
        .go-video-btn {
          @include theme-color();
          @include theme-border-color();
          &:hover {
            @include theme-background-color();
            @include foreground-color();
          }
        }
        .update-mtime {
          @include color("a");
        }
      }
    }
  }
}
.van-popover {
  &.popover-live,
  &.popover-manga,
  &.popover-game {
    @include background-color();
  }
}
