@import './dark-definitions';
@import 'common';

#disable-popup-modal,
#vip-exchange-modal {
  .vip-exchange .months button.disabled {
    @include background-color('2');
  }
}

.action-row {
  .sch-pub-btn.publishing,
  .sch-pub-btn.disabled,
  .publish-btn.publishing,
  .publish-btn.disabled {
    @include background-color('2');
  }
}
.link-footer,
.payment-active,
.app-body .section-block,
.bl-button--primary:disabled,
.tab-list .tab-item.active:before,
.player-auxiliary-area .player-auxiliary-bscrollbar .bscroll-indicator,
.home-content .publish-btn.disabled {
  @include background-color('2');
}
.manga-detail .episode-list-component .episode-list .list-header .header-item.selected {
  @include background-color('3');
}
.wrapper .elec-btn.disabled,
.f-list-hover:hover,
.status_box .status_btn.disabled,
.game-groom-m .num,
.container .pagination,
.fjw-case-detail .ban-detail .content-box .video-model,
.app-body .section-block.with-bottom-radius,
.app-body .section-block.with-radius,
.pagination-container li.pagination,
.main-container .pay-bar .vip .btn-pay.active,
.main-container .media-info .media-right .media-tool-bar .btn-follow.active,
.open-dialog-masker .open-dialog-content .open-footer .btn-normal.disabled,
.open-dialog-masker .open-dialog-content .open-footer .btn-normal.disabled:hover,
.main-container .media-info .media-right .media-tool-bar .btn-follow.active,
.coupon-content-con .coupon-btn-disable,
.customize-wrp .select {
  @include background-color('4');
}
.danmaku-wrap .player-auxiliary-area .player-auxiliary-danmaku-wrap .bscroll-indicator {
  @include background-color('5');
}
.bpx-player-auxiliary .bpx-player-dm-wrap,
.player-auxiliary-area .player-auxiliary-bscrollbar {
  .bscroll-vertical-scrollbar,
  .bscroll-vertical-scrollbar.mousedown,
  &:hover .bscroll-vertical-scrollbar {
    @include background-color();
  }
  .bscroll-indicator {
    @include background-color('5');
  }
}
.bpx-player-auxiliary .bpx-player-dm-wrap,
.danmaku-wrap .player-auxiliary-area .player-auxiliary-danmaku-wrap {
  .bscroll-vertical-scrollbar.mousedown,
  &:hover .bscroll-vertical-scrollbar {
    @include background-color();
  }
}
.m-recommend-item div.box {
  @include background-color();
}

blockquote {
  &,
  * {
    @include color('a');
  }
  @each $color in 'blue', 'gray', 'green', 'lblue', 'pink', 'purple', 'yellow' {
    @each $value in '01', '02', '03', '04' {
      .color-#{$color}-#{$value} {
        @include color('a');
      }
    }
  }
}
.open-dialog-masker .open-dialog-content .open-footer .btn-normal.disabled {
  &,
  &:hover {
    @include color('a');
  }
}
.status_box .status_btn.disabled {
  @include color('a');
}
.live-room-app .guard-rank-cntr {
  .tabs.isHundred .item.active {
    @include color('e');
  }
  &.hundred,
  &.thousand {
    .live-skin-main-a-text,
    .page-box .live-skin-main-text,
    .live-skin-highlight-text {
      @include color('e');
    }
  }
}
.bb-comment .no-login .comment-submit {
  .common &,
  & {
    @include color('9');
    @include background-color('4');
    @include border-color();
  }
}

.home-page .sticky-bar .bar-content .message,
.cover .disabled-cover,
.el-input__inner,
.commnent-screen-wrap .el-input__inner,
.tag-list li.tag-item.on,
.bp-popup-panel .title-ctnr .popup-title,
.s-paging > ul > a.current,
.s-paging > ul > span.current,
.score-info .go-movie,
.invitation-record-warp .invtable .inputdone,
#app .sticky-bar .bar-content .message,
.coupon-content-con .coupon-btn-disable,
.customize-wrp .select,
.manga-detail .episode-list-component .episode-list .list-data .list-item.last-read,
.popup-content-ctnr .bl-button--ghost {
  @include color('e');
}

.link-footer,
.el-input__inner,
.commnent-screen-wrap .el-input__inner,
.ui-input-textarea.focus,
.user-setting-warp .el-radio-button__orig-radio:checked + .el-radio-button__inner,
.tabs-bar,
.score-info .go-movie,
.select-box-v2-container .select-box-v2-controller-disabled,
.popup-content-ctnr .bl-button--ghost:hover,
.song-info .info-wrap .type-list .item-list .type-item.active,
.enter-failure .password-input .pink-border,
#rank-list-vm .tabs.isHundred .item {
  @include border-color();
}

.home-page .sticky-bar .bar-content .message:hover,
.other a a:hover,
.more-data a:hover,
.rank-item .content .info .detail a a:hover,
.rank-item .content .other a:hover,
.rank-item .content .more-data:hover,
.edit-button:hover > .icon-font,
.edit-button:hover > span .left-nav-item-childed:hover,
.left-nav-wrapper .active .left-nav-item-child,
.left-nav-wrapper .active,
.left-nav-wrapper .advice-btn:hover,
.left-nav-wrapper .left-nav-item.active,
.left-nav-wrapper .left-nav-item.active i.active,
.left-nav-wrapper .left-nav-list.on .left-nav-item .icon,
.left-nav-wrapper .left-nav-list.on .left-nav-item,
.drop-list-v2-container .drop-list-v2-item-selected .drop-list-v2-item-cont p.item-cont-main,
.voucher-ing .voucher-left-money,
.voucher-ing .voucher-left-money:before,
.voucher-no-used .voucher-left-money,
.voucher-no-used .voucher-left-money:before,
.detail-wrp .detail-content[data-v-00c9b213] p a span,
.room-info-down-row .icon-label.hover-text-blue:hover .label,
.room-introduction .edit-button:hover > .icon-font,
.room-introduction .edit-button:hover > span,
.im-popup .bp-popup-panel .title-ctnr .popup-title,
.live-skin-normal-a-text:active,
.up-info .u-info .name .username.is-vip:hover,
#app .sticky-bar .bar-content .message:hover,
.el-select-dropdown__item.selected,
.r-con .members-info .up-card .info-name.is-vip:hover,
.app-layout .style-section .tag-block .tag-containers .style-tag.selected,
.manga-detail .episode-list-component .episode-list .list-header .header-item.selected,
.live-room-app .guard-rank-cntr.hundred .live-skin-main-a-text:hover,
.live-room-app .guard-rank-cntr.thousand .live-skin-main-a-text:hover,
.container .video-panel .play-all .bilifont,
.round-corner .van-popper-favorite .play-all .bilifont,
.rank-item .content .info:hover .title,
.rank-list .rank-item .content .info:hover .title,
.rank-list .rank-item .content .info .up-name:hover,
.n .n-fs:hover p,
.n .n-gz:hover p {
  @include theme-color();
}

.season-timeline .season-group.today,
.season-timeline .season-group.today .group-time::before,
.aside-ctnr .author-info .communicate-btn,
.tag-list li.tag-item.on,
.tag-list li.tag-item:hover,
.page-list-box .page-input:focus,
.page-list-box .page-input:hover,
.popup-content-ctnr .bl-button--ghost,
.manga-detail .episode-list-component .episode-list .list-data .list-item.last-read {
  @include theme-border-color();
}
.season-timeline .season-group.today.is-published .group-time::before,
.bg-blue,
.security-list .child-list li a.bg-blue:hover,
.face-g-tab li.current,
.el-date-table td.end-date,
.el-date-table td.start-date,
.tag-list li.tag-item.on,
.face-g-list#my-g-list .face-g-block .my-mp-block .mp-info .btn-white,
.user-setting-warp .el-radio-button__orig-radio:checked + .el-radio-button__inner,
.user-my-btn .el-button--primary,
.popup-content-ctnr .bl-button--primary,
.popup-content-ctnr .bl-button--ghost:hover,
.song-info .info-wrap .type-list .item-list .type-item.active {
  @include theme-background-color();
}
.face-g-tab li.current,
.current .tab-btn-link,
.el-date-table td.current:not(.disabled),
.el-date-table td.end-date,
.el-date-table td.start-date,
.style-section .tag-block .tag-containers .style-tag:active,
.popup-content-ctnr .bl-button--ghost:hover {
  @include foreground-color();
}

#bilibili-player {
  box-shadow: 0 4px 8px 0 #0004 !important;
}
#bilibiliPlayer {
  box-shadow: 0 4px 8px 0 #0004;
  @include background-color('2');
}

.live-skin-coloration-area {
  .live-skin-separate-area,
  .live-skin-separate-area-hover:hover {
    @include background-color('2');
  }
  .live-skin-normal-a-text {
    &,
    &:link,
    &:visited {
      @include color('e');
    }
  }
  .live-skin-normal-text {
    @include color('e');
  }
  .live-skin-main-text,
  .live-skin-highlight-text {
    @include color('e');
  }
  .live-skin-highlight-border,
  .live-skin-separate-border {
    @include border-color();
  }
  .live-skin-normal-a-text:hover {
    @include theme-color();
  }
  .room-info-ctnr .info-section .live-skin-highlight-border {
    @include theme-border-color();
  }
  .live-skin-highlight-bg {
    @include theme-background-color();
  }
}

// ::-webkit-scrollbar {
//   width: 5px !important;
//   height: 5px !important;
// }
// ::-webkit-scrollbar-corner,
// ::-webkit-scrollbar-track {
//   background: transparent !important;
// }
// ::-webkit-resizer,
// ::-webkit-scrollbar-thumb {
//   background: #444 !important;
//   border-radius: 3px;
// }
// ::-webkit-scrollbar-thumb:hover {
//   background: #555 !important;
// }
// * {
//   scrollbar-color: #444 transparent !important;
//   scrollbar-width: thin !important;
// }
.members-info .avatar-name__container .is-vip,
.members-info .wide-members .avatar .is-vip,
.up-info .up-info_right .name .username.is-vip {
  color: #fb7299 !important;
}
.bilibili-player .bilibili-player-video-danmaku-setting-left-block-content .bilibili-player-block-filter-type.disabled {
  .bilibili-player-block-filter-image {
    @include theme-fill();
  }
  .bilibili-player-block-filter-label {
    @include theme-color();
  }
}
.left-container #head-info-vm.head-info-section {
  @include background-color('4');
}
#link-navbar-vm.link-navbar-ctnr {
  &,
  & .link-navbar {
    @include background-color('3');
  }
  .nav-item,
  .nav-item .area-list-panel .list-item,
  .nav-logo,
  .shortcuts-ctnr .shortcut-item,
  .user-panel-ctnr .user-panel .header-node .username-info,
  .user-panel-ctnr .user-panel .user-level-detail .detail-link {
    @include color('e');
  }
  .link-panel-ctnr .ps__thumb-x,
  .link-panel-ctnr .ps__thumb-y {
    @include background-color('4');
  }
  .link-panel-ctnr .totally-empty-hint,
  .nav-item .area-list-panel,
  .user-panel-ctnr .user-panel,
  .user-panel-ctnr .user-panel .load-error-panel,
  .user-panel-ctnr .user-panel .user-level-detail {
    @include background-color('3');
  }
  .right-part > .shortcuts-ctnr .shortcut-item:hover {
    @include background-color();
  }
  .content-ctnr {
    .items .item .light-name,
    .items .item .name,
    .title {
      @include color('e');
    }
  }
}

.link-navbar-wrap,
.link-navbar-ctnr {
  .link-navbar {
    @include background-color('2');
    box-shadow: inset 0 -1px #333 !important;
  }
  .shortcut-item .list-item:hover {
    @include background-color();
  }
  .link-navbar .main-ctnr .nav-item .area-list-panel {
    @include background-color('2');
    @include border-color('3');
    .list-item:hover {
      @include background-color('4');
    }
  }
  .showmore-link {
    .more-label-text {
      @include color('e');
    }
    .down-arrow-icon-block .down-arrow {
      @include to-white();
    }
    .more-tab-content {
      @include background-color('2');
      @include border-color('3');
      .waterfall-item:hover {
        @include background-color('4');
      }
    }
  }
  .list-item .startlive-btn {
    span {
      @include color('e');
    }
  }
}
.search-bar-ctnr {
  .search-bar.search-bar {
    @include no-shadow();
    &:hover {
      @include background-color();
    }
  }
  #nav-searchform {
    @include background-color();
    @include border-color('3');
    &.is-actived,
    &.is-focus {
      .nav-search-content {
        @include background-color('4');
      }
    }
  }
  .nav-search-clean path {
    @include fill('a');
  }
  .search-btn {
    &:hover {
      @include background-color('4');
    }
    .search-icon {
      @include to-white();
    }
  }
  .search-pannel {
    @include background-color('2');
    .header {
      .title {
        @include color('e');
      }
      .clear {
        @include color('a');
      }
    }
    .histories {
      .history-item {
        @include background-color('3');
        @include color('e');
      }
    }
    .history-fold-wrap {
      .fold-text {
        @include color('a');
      }
      .fold-icon {
        @include fill('a');
      }
      &:hover {
        .fold-text {
          @include theme-color();
        }
        .fold-icon {
          @include theme-fill();
        }
      }
    }
    .trending {
      .trending-item {
        &.active,
        &:focus,
        &:hover {
          @include background-color('3');
        }
        .trendings-rank {
          @include color('a');
          &.search-rank-top {
            @include color('e');
          }
        }
        .trending-text {
          @include color('e');
        }
      }
    }
  }
}
.user-panel-ctnr {
  .user-panel {
    @include border-color('3');
    @include background-color('2');
    .level-progress {
      @include background-color('3');
    }
    .user-level {
      @include theme-color();
    }
    .section-block {
      @include background-color();
    }
    .battery-content {
      @include color('e');
    }
    .pay-button {
      @include theme-background-color();
      @include foreground-color();
    }
    .content-ctnr {
      .control-block {
        &:hover {
          @include background-color('4');
        }
      }
      .ctrl-btn {
        @include color('e');
        .icon {
          @include to-white();
        }
      }
      .cut-line {
        @include border-color('4');
      }
      .loginout-btn {
        @include color('e');
        .login-out-icon {
          @include to-white();
        }
      }
    }
  }
}
.link-panel-ctnr {
  @include background-color('2');
  @include border-color('3');
  @include color('e');
  .load-more-btn {
    @include background-color();
    @include color('e');
    &:hover {
      @include background-color('4');
    }
  }
}
.calendar-checkin {
  @include background-color('2');
  @include border-color('3');
  @include color('e');
  .divider {
    @include background-color('3');
  }
  .title {
    @include background-color();
  }
  .calendar-wrapper {
    @include background-color();
  }
  .checkin-btn {
    @include background-color();
    @include color('e');
    &:hover {
      @include background-color('4');
    }
  }
}
.download-panel-ctnr {
  @include background-color('2');
  @include border-color('3');
  @include color('e');
  .content-ctnr {
    .title {
      @include color('e');
    }
    .item {
      .name,
      .light-name {
        @include color('e');
      }
      .desc {
        @include color('a');
      }
      .download-link {
        @include color('a');
        &:hover {
          @include theme-color();
        }
      }
      &:hover {
        .light-name {
          @include theme-color();
        }
      }
    }
  }
}
