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

.video-info-v1 .video-data {
  @include color('a');
}
.members-info-v1 {
  .normal-members-header {
    @include background-color('4');
    @include color('e');
    .person {
      @include color('a');
    }
    .btn path {
      @include fill('e');
    }
  }
  .normal-members-container {
    .avatar {
      @include border-color('4');
      @include background-color('3');
    }
    .upname {
      @include color('e');
      &.is-vip {
        @include vip-color();
      }
    }
    .info-tag {
      @include color('a');
    }
    .attention {
      @include theme-background-color();
      @include foreground-color();
    }
  }
}
.up-info-v1 {
  .up-info_right_message {
    &,
    & i {
      @include color('8');
    }
  }
  .following-charge-btn {
    @include theme-background-color('80');
    @include foreground-color();
    &:hover {
      @include theme-background-color();
    }
  }
  .not-follow-charge-btn,
  .charge-btn {
    border: 1px solid;
    @include background-color();
    @include theme-border-color('80');
    @include theme-color('80');
    &:hover {
      @include theme-border-color();
      @include theme-color();
    }
  }
  .follow-btn {
    &.not-follow {
      path {
        @include foreground-fill();
      }
    }
  }
}
.user-card-m-exp {
  @include background-color('3');
  @include border-color();
  .social {
    a,
    span {
      @include color('e');
      .tip_text {
        @include color('a');
      }
    }
  }
  .btn-box {
    .like {
      @include theme-background-color();
      &,
      & .plus {
        @include foreground-color();
      }
      &:hover {
        opacity: 0.8;
      }
    }
    .liked {
      @include background-color('4');
      &,
      & .plus {
        @include color('a');
      }
      &:hover,
      &:hover .plus {
        @include color('e');
      }
    }
    .message {
      @include color('e');
    }
  }
}
.float-nav-exp,
.fixed-nav {
  .nav-menu {
    .item {
      @include color('e');
      @include background-color('3');
      @include border-color();
      .item-icon path {
        @include fill('e');
      }
      &:hover {
        @include theme-background-color();
        @include foreground-color();
        .item-icon path {
          @include foreground-fill();
        }
      }
    }
  }
}
.bui-collapse-header {
  .bui-collapse-arrow-text {
    .arrow-icon {
      @include fill('e');
    }
  }
}
.multi-page-v1 {
  @include background-color('4');
  .head-left {
    .cur-page {
      @include color('a');
    }
    .range-box i {
      @include color('a');
      &:hover {
        @include theme-color();
      }
    }
  }
  .head-right {
    .next-button {
      @include color('a');
    }
  }
  .cur-list {
    .list-box {
      > li {
        &,
        & a {
          @include color('e');
        }
        &:hover {
          @include background-color('5');
        }
        &.on {
          @include background-color('5');
          img {
            @include to-theme('blue');
          }
          &,
          & a {
            @include theme-color();
          }
        }
        .duration {
          @include color('a');
        }
      }
    }
    .module-box {
      > li {
        @include background-color('5');
        @include border-color();
        &,
        & a {
          @include color('e');
        }
        &:hover {
          @include background-color('6');
        }
        &.on {
          @include theme-background-color();
          &,
          & a {
            @include foreground-color();
          }
        }
      }
    }
  }
}
.recommend-list-v1 {
  .rec-title {
    @include color('e');
  }
  .next-button {
    @include color('a');
  }
  .split-line {
    @include background-color('5');
  }
  .rec-footer {
    @include background-color('3');
    @include color('e');
  }
}
.video-sections-v1,
.base-video-sections-v1 {
  @include background-color('4');
}
.video-page-special-card-small,
.video-page-card-small {
  .pic-box {
    @include background-color('3');
  }
  .info .title {
    @include color('e');
    &:hover {
      @include theme-color();
    }
  }
  .playinfo,
  .upname a {
    @include color('a');
    svg path {
      @include fill('a');
    }
  }
}
.bilibili-player-video-sendbar .bilibili-player-video-danmaku-root {
  .bilibili-player-video-btn-danmaku {
    @include fill('a');
    &:hover {
      @include fill('e');
    }
  }
  .bilibili-player-video-danmaku-input::-webkit-input-placeholder {
    @include color('fff4');
  }
  .bilibili-player-video-danmaku {
    &-setting,
    &-switch {
      @include fill('a');
      @include on-fullscreen {
        @include fill('e');
      }
      &:hover {
        @include fill('e');
      }
    }
  }
  .bui-danmaku-switch-on {
    path[fill] {
      @include theme-fill();
    }
  }
}
.video-toolbar-v1 {
  .toolbar-left {
    @include color('8');
    > span {
      @include color('8');
      @include fill('8');
      .info-text {
        @include color('8');
      }
      &:hover,
      &.on {
        @include theme-color();
        @include theme-fill();
        .info-text {
          @include theme-color();
        }
      }
    }
  }
  .toolbar-right {
    @include color('a');
    > div,
    > span {
      @include color('8');
      @include fill('8');
      &:hover {
        @include theme-color();
        @include theme-fill();
      }
    }
  }
}
.van-popover.van-more {
  @include background-color('3');
  @include border-color('8884');
  .more_dropdown {
    li {
      @include color('e');
      @include fill('e');
    }
  }
}
.video-desc-v1 {
  .desc-info {
    @include color('e');
    a {
      @include theme-color();
    }
  }
  .toggle-btn span {
    @include color('e');
  }
}
.s_tag-v1 {
  @include border-color('4');
  .tag-area {
    .tag {
      @include background-color();
      &-more,
      .tag-link {
        @include color('e');
        @include background-color('3');
        > svg {
          @include fill('e');
        }
      }
      .tag-icon {
        @include to-theme('blue');
      }
      .rarrow-icon {
        @include fill('e');
      }
      &-more:hover,
      &:hover .tag-link {
        @include theme-background-color();
        @include foreground-color();
        > svg {
          @include foreground-fill();
        }
      }
      .tag-channel-pane-exp {
        @include background-color('3');
        .channel-cover {
          @include border-color('3');
        }
        .channel-title {
          @include color('e');
        }
        .channel-desc {
          @include color('a');
        }
        .channel-btns {
          &__link {
            @include theme-border-color();
            @include theme-color();
          }
          &__subs {
            @include theme-background-color();
            @include foreground-color();
            @include border-color();
            &.is-subs {
              @include background-color('4');
              @include color('8');
            }
          }
        }
      }
    }
  }
}
.activity-m-v1 {
  @include background-color();
  .inside-wrp {
    @include border-color();
    @include background-color('3');
    .left {
      @include color('e');
    }
    .right {
      .inside-bg::before {
        background-image: linear-gradient(to right, #333, transparent 30%) !important;
      }
    }
  }
}
.reply-navigation {
  .nav-title {
    @include color('e');
    .total-reply {
      @include color('a');
    }
  }
  .nav-sort {
    @include color('8');
    .time-sort:hover,
    .hot-sort:hover {
      @include theme-color();
    }
    &.time .time-sort,
    &.hot .hot-sort {
      @include color('e');
    }
  }
}
.reply-warp {
  .reply-box-textarea::-webkit-input-placeholder {
    @include color('8');
  }
  .reply-box-warp {
    @include background-color('2');
    @include border-color('5');
  }
  .fixed-reply-box {
    .reply-box {
      @include background-color('2');
      @include border-color('5');
    }
  }
  .reply-box-send {
    @include theme-background-color('50');
    .send-text {
      @include foreground-color('50');
    }
    &::after {
      @include hide();
    }
    &.send-active {
      @include theme-background-color();
      .send-text {
        @include foreground-color();
      }
    }
  }
  .at-btn {
    .at-icon path,
    .at-icon ellipse {
      @include stroke('a');
    }
    &:hover {
      .at-icon path,
      .at-icon ellipse {
        @include stroke('e');
      }
    }
  }
  .emoji-btn {
    .box-emoji-icon path {
      @include fill('a');
    }

    &:hover {
      .box-emoji-icon path {
        @include fill('e');
      }
    }
  }
  .image-btn {
    .image-icon path {
      @include fill('a');
    }
    &:hover {
      .image-icon path {
        @include fill('e');
      }
    }
  }
  .image-btn,
  .emoji-btn,
  .at-btn {
    @include border-color('4');
    @include background-color('3');
    @include color('a');
    &:hover {
      @include color('e');
    }
  }
  .reply-loading {
    @include color('a');
  }
  .emoji-panel {
    @include border-color('8884');
    @include color('e');
    .emoji-title {
      @include background-color('3');
    }
    .emoji-content {
      @include background-color('3');
      .emoji-info:hover {
        @include background-color('5');
      }
    }
    .emoji-tab {
      @include background-color('4');
      .emoji-type {
        &.current-type {
          @include background-color('5');
        }
        &:hover {
          @include background-color('6');
        }
      }
    }
    .emoji-slider {
      .svg-icon {
        &[style*='c9ccd0'] {
          @include color('8');
        }
        &[style*='61666d'] {
          @include color('e');
        }
      }
    }
  }
  $prefixes: ('', 'sub-');
  @each $prefix in $prefixes {
    .#{$prefix}user-info {
      .#{$prefix}user-name {
        @include color('c');
      }
    }
    .#{$prefix}reply-content {
      @include color('e');
      .user-link {
        @include theme-color();
      }
    }
    .#{$prefix}reply-info {
      @include color('a');
      .svg-icon {
        &.dislike,
        &.like {
          @include color('a');
          &:hover {
            @include theme-color();
          }
        }
        &.liked,
        &.disliked {
          @include theme-color();
          ~ span {
            @include theme-color();
          }
        }
      }
      .#{$prefix}reply-btn {
        &:hover {
          @include theme-color();
        }
      }
      .#{$prefix}reply-operation-warp {
        .operation-icon {
          @include color('a');
        }
        &:hover {
          .operation-icon {
            @include theme-color();
          }
        }
        .operation-list {
          @include background-color('3');
          @include color('e');
          .operation-option {
            &:hover {
              @include background-color('4');
              .option-title {
                @include theme-color();
              }
            }
          }
        }
      }
    }
    .#{$prefix}reply-tag-item {
      @include background-color('3');
      @include color('e');
    }
  }
  .reply-item {
    .content-warp {
      @include border-color('4');
    }
    .icon,
    .jump-url-prefix {
      @include to-theme('blue');
    }
    .jump-link,
    .jump-url-link {
      @include theme-color();
    }
    .bottom-line {
      @include border-color('4');
    }
  }
  .view-more {
    @include color('a');
    .view-more-btn {
      @include theme-color();
    }
    .view-more-pagination {
      @include color('a');
      .pagination-btn,
      .pagination-page-number {
        &:hover,
        &.current-page {
          @include theme-color();
        }
      }
    }
  }
  .reply-end {
    @include color('a');
  }
}
.coin-operated-m-exp {
  @include background-color('3');
  .icon.close {
    @include to-white();
  }
  .coin-title {
    @include color('e');
    span {
      @include theme-color();
    }
  }
  .mc {
    &-box {
      @include border-color('8');
      .c-num {
        @include color('e');
      }
      &.on {
        @include theme-border-color();
        .c-num {
          @include theme-color();
        }
      }
    }
  }
  .like-checkbox {
    @include color('e');
    input[type='checkbox'] {
      &:checked + i {
        @include to-theme('blue');
      }
    }
  }
  .coin-bottom {
    .tips {
      @include color('a');
    }
  }
}
.follow-dialog-wrap-exp,
.collection-m-exp {
  @include background-color('3');
  .title {
    @include color('e');
    @include border-color('5');
    i.close {
      @include to-white();
    }
  }
  .special-tip {
    @include color('a');
  }
  .bottom {
    @include border-color('5');
    .submit-move {
      @include theme-background-color();
      @include foreground-color();
      &.disable {
        @include background-color('5');
        @include color('8');
      }
    }
  }
}
.share_dropdown {
  @include color('e');
  @include background-color('3');
  .box-right {
    @include border-color('4');
  }
  .capture-bar {
    .bar-left {
      @include color('a');
    }
    .bar-right {
      .copy-link {
        @include theme-background-color();
        @include foreground-color();
      }
    }
  }
  .share-link {
    @include background-color('4');
    #link_copy {
      @include background-color();
      @include color('e');
    }
    .btn {
      @include theme-color();
    }
  }
  .box-top-right {
    box-shadow: -0.5px 0 0 #555 !important;
  }
  .box-bottom {
    @include background-color('4');
  }
}

.player-auxiliary-filter-playlist {
  .player-auxiliary-playlist-user {
    @include color('a');
  }
  .player-auxiliary-playlist-bottom {
    @include border-color('6');
  }
}

.player-auxiliary-setting-menu-wrap {
  @include background-color('3');
  @include border-color('8884');
  .player-auxiliary-setting-menu-list {
    @include color('e');
    &::before {
      @include hide();
    }
    &:hover {
      @include background-color('2');
    }
  }
}
.player-auxiliary-adv-danmaku {
  @include border-color('4');
  * {
    // 这个不能用 important
    background-color: #222;
    color: #eee;
  }
  .mask::after {
    @include background-color('222A');
  }
}
.player-auxiliary-danmaku-wrap {
  @include background-color();
  .player-auxiliary-danmaku-load-status {
    @include background-color();
    @include color('a');
  }
}
.player-auxiliary-danmaku-function {
  @include background-color();

  .player-auxiliary-danmaku-multiple-control {
    @include background-color('2');
  }
  #{contains('player-auxiliary-danmaku-btn-')} {
    @include background-color();
  }
}
.player-auxiliary-block-wrap {
  @include border-color('4');
}
.player-auxiliary-modal-container {
  @include border-color('8884');
  .player-auxiliary-modal-header {
    @include background-color();
  }
}
.player-auxiliary-modal-close.bpm-btn {
  @include background-color();
  i {
    @include color('a');
  }
}
.fav-list-container {
  .nav-add {
    .icon {
      @include to-gray();
    }
    .text {
      @include color('e');
    }
  }
}
.edit-media-list {
  .edit-info {
    .cover-title {
      @include color('e');
    }
    .upload-cover:not([style*='background-image']) {
      filter: invert(1);
    }
  }
  .name-input {
    @include border-color('4');
    @include background-color();
    @include color('e');
    &::-webkit-input-placeholder {
      @include color('8');
    }
  }
  .media-list-intro {
    &::-webkit-input-placeholder {
      @include color('8');
    }
  }
  .intro-num-limit,
  .name-num-limit {
    @include color('a');
  }
}
.upload-center-clip {
  .head-wrap {
    @include border-color('6');
  }
  .img-clip-title {
    @include color('e');
  }
  .img-clip-tips {
    @include color('a');
  }
  .reset-img .reset-select {
    @include color('a');
    .icon-reset {
      @include to-gray();
    }
  }
  .modal-footer {
    .cancel-btn {
      @include border-color('6');
      @include color('e');
    }
    .confirm-btn {
      @include theme-background-color();
      @include foreground-color();
      @include border-color();
    }
  }
}
.favList-info {
  .favInfo-cover.empty {
    filter: invert(0.8);
    .fav-invalid {
      filter: invert(1);
    }
  }
}
.live-room-app {
  .hot-rank-text {
    @include theme-background-color('80');
    @include foreground-color();
  }
}
.bili-gallery {
  &__pagination {
    &__index {
      @include theme-color();
    }
  }
}
#bilibili-player-placeholder,
.bpx-player-container {
  box-shadow: none !important;
}
.comment-m-v1 {
  .comment-container {
    @include background-color();
  }
}
.bili-comment.browser-pc {
  @include background-color();
  .comment-container {
    @include background-color();
  }
}
.recommended-container,
.recommended-container_floor-aside {
  .container {
    @include background-color();
  }
}
.feed-floor .channel-floor {
  @include border-color('4');
}
.bili-video-card {
  &__info--tit {
    a {
      @include color('e');
    }
  }
}
.bpx-player-progress-schedule-current {
  @include theme-background-color();
}
.bpx-player-ctrl-playbackrate-menu-item.bpx-state-active {
  @include theme-color();
}
.bpx-player-progress-move-indicator-down {
  border-top-color: var(--theme-color) !important;
}
.bpx-player-progress-move-indicator-up {
  border-bottom-color: var(--theme-color) !important;
}
.reply-content .top-icon {
  @include theme-border-color();
  @include theme-color();
}
.startlive-icon {
  @include to-theme('blue');
}
.right-area .tip-wrap .icon path[fill='#00AEEC'] {
  @include theme-fill();
}
.bpx-player-pbp-videoshot rect[clip-path] {
  @include theme-fill();
}

#{contains('numberListItem_number_list_item')} {
  @include background-color('5');
  @include border-color();
  &:hover {
    @include theme-border-color();
  }
  &#{contains('numberListItem_select')} {
    @include theme-border-color();
    #{contains('numberListItem_title')} {
      @include theme-color();
    }
  }
}

#{contains('review_review_module')} {
  @include border-color('4');

  #{contains('review_review_item_fill')} {
    @include background-color('4');
  }

  #{contains('review_module_title')},
  #{contains('review_review_title')} {
    @include color('e');
  }

  #{contains('review_review_author')} {
    @include color('e');
    &#{contains('review_is-vip')} {
      @include vip-color();
    }
  }
  #{contains('review_review_content')} {
    @include color('a');
  }
}

#{contains('epitem_ep_item')} {
  &:hover {
    @include background-color('5');
  }

  a {
    @include color('e');
    &:hover {
      @include theme-color();
    }
  }

  &#{contains('epitem_cursor')} {
    @include background-color('5');
    path {
      @include theme-fill();
    }
  }
}

#{contains('seasonlist_season_list')} {
  #{contains('seasonlist_ss_title')} {
    @include color('e');
  }
  #{contains('seasonlist_expand_more')} {
    @include background-color('4');
    @include color('e');
  }
}

#{contains('mediainfo_media_info')} {
  @include border-color('4');

  #{contains('mediainfo_media_desc')} {
    &,
    & i {
      @include color('e');
    }
  }
  #{contains('mediainfo_media_title')} {
    @include color('e');
  }
  #{contains('mediainfo_av_link')},
  #{contains('mediainfo_home_link')},
  #{contains('mediainfo_media_pub')} {
    @include color('a');
  }

  #{contains('mediainfo_ellipsis')},
  #{contains('mediainfo_media_desc')} i {
    @include background();
    @include theme-color();
  }
}

#{contains('section_ep_section_module')} {
  @include background-color('4');
  #{contains('section_section_title')} {
    @include color('e');
  }
}

#{contains('RecommendItem_wrap')} {
  #{contains('RecommendItem_title')} {
    @include color('e');
  }
}

#{contains('eplist_ep_list_wrapper')} {
  @include background-color('4');
  #{contains('eplist_list_title')} #{contains('eplist_left_wrap')} h4 {
    @include color('e');
  }
  #{contains('numberListItem_title')} {
    @include color('e');
  }
  #{contains('eplist_ep_list_order')} {
    @include to-theme('blue');
  }
  #{contains('longListItem_wrap')} {
    @include color('e');
    &:hover {
      @include background-color('5');
      #{contains('longListItem_text')} {
        @include theme-color();
      }
    }
    &#{contains('longListItem_select')} {
      @include background-color('5');
    }
    #{contains('longListItem_icon')} {
      path {
        @include theme-fill();
      }
    }
  }
  #{contains('modeChangeBtn_icon')} {
    path {
      @include fill('a');
    }
    &:hover path {
      @include theme-fill();
    }
  }
}
#{contains('operation_split_line')} {
  @include border-color('4');
}
#{contains('mediainfo_btn_rating')} {
  @include background-color();
}
#{contains('DanmukuBox_wrap')} {
  @include background();
}
#{contains('paybar_pay_bar')} {
  #{contains('paybar_btn_pay')} {
    @include border-color();
    @include theme-background-color();
    @include foreground-color();
    &#{contains('paybar_active')} {
      @include background-color('4');
      @include color('e');
    }
  }
}
.player-left-components {
  #{contains('toolbar_toolbar')} {
    #{contains('toolbar_item_info')} {
      #{contains('toolbar_icon')} path {
        @include fill('a');
      }
      #{contains('toolbar_counts_num')} {
        @include color('a');
      }
      &#{contains('toolbar_active')},
      &:hover {
        #{contains('toolbar_icon')}path {
          @include theme-fill();
        }
        #{contains('toolbar_counts_num')} {
          @include theme-color();
        }
      }
    }
  }
}
.b-img {
  @include background-color('3');
}
