.bewly-design.videoPage {
  .up-detail .up-detail-top .up-name.is_vip:hover .mask,
  .up-detail .up-detail-top .up-name.small-vip:hover .mask,
  .up-detail .up-detail-top .up-name.vip:hover .mask {
    display: none;
  }

  // ai 小助手
  [class^="_VideoAssistant"] {
    --app_bg: #f1f6fc;
    --app_graph_bg: #e6ecf4;
  }

  [class^="_VideoAssistant"] * {
    --brand_blue: var(--bew-bili-blue);
  }

  &.dark [class^="_VideoAssistant"] {
    --app_bg: var(--bew-elevated-alt-solid);
    --app_graph_bg: var(--bew-fill-1);
  }

  // #region theme color adaption part
  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
  :not(foobar) {
    .content .group-list li input[type="checkbox"] + i {
      border-radius: 5px;
      border: 1px solid var(--bew-border-color);
    }

    .coin-operated-m-exp .like-checkbox input[type="checkbox"]:checked + i {
      border-radius: 3px;
    }

    .content .group-list li input[type="checkbox"]:checked + i,
    .content .group-list li input[type="checkbox"]:checked:hover + i,
    .coin-operated-m-exp .like-checkbox input[type="checkbox"]:checked + i,
    .video-share-popover
      .video-share-dropdown
      .dropdown-top
      .dropdown-top-left
      .capture-bar
      .bar-left
      > label
      #check-timestamp:checked::after {
      background: var(--bew-theme-color) url(//s1.hdslb.com/bfs/static/jinkela/note-list/assets/ic_check.svg) no-repeat
        50% / 9px;
    }

    .content .group-list li input[type="checkbox"] + i,
    .content .group-list li input[type="checkbox"]:hover + i {
      background: unset;
    }

    .note-list .list-note-operation,
    .note-pc .note-container .note-header .note-operation,
    .note-up .up-desc-container .desc-top .attention-btn-container:not(.is-attention),
    .up-detail .up-detail-top .live-status:hover {
      background-color: var(--bew-theme-color);
    }

    .user-card-m-exp .user-info-wrapper .info .user .user-label,
    #pub button,
    .editor-innter div:last-child div {
      background-color: var(--bew-theme-color) !important;
    }

    .note-list .list-note-operation:hover,
    .note-pc .note-container .note-header .note-operation:hover,
    .user-card-m-exp .user-info-wrapper .info .btn-box .like:not(.liked):hover,
    .coin-operated-m-exp .coin-bottom .bi-btn:hover,
    .video-share-popover
      .video-share-dropdown
      .dropdown-top
      .dropdown-top-left
      .capture-bar
      .bar-right
      .copy-link:hover,
    .note-up .up-desc-container .desc-top .attention-btn-container:hover,
    .note-up .up-desc-container .desc-top .attention-btn-container.is-attention:hover,
    .report-dialog .vui_dialog--footer .report-dialog-footer .button-wrap .comfirm-report:hover,
    .collection-m-exp .bottom .btn:hover,
    .upinfo-btn-panel .following-charge-btn:hover {
      background-color: var(--bew-theme-color-80);
    }

    .upinfo-btn-panel .follow-btn.not-follow:hover {
      background-color: var(--bew-theme-color-80) !important;
    }

    .bili-danmaku-x-vote-an.bili-danmaku-x-select .bili-danmaku-x-vote-an-bg-buffer {
      background-color: var(--bew-theme-color-60) !important;
    }

    .collection-m-exp .content .group-list .add-group .input-group .submit,
    .follow-dialog-wrap-exp .follow-dialog-window .content .group-list .add-group .input-group .submitGroup {
      background-color: var(--bew-theme-color-10);
    }

    .video-argue .video-argue-inner.strong {
      background-color: var(--bew-error-color-10);
    }

    ._Fallback_1t0d5_1 ._Main_1t0d5_10 ._Item_1t0d5_15 {
      background-color: var(--bew-content);
    }

    ._SeekSections_1iu0q_1 ._Item_1iu0q_1 ._Parts_1iu0q_16 ._Part_1iu0q_16 ._Time_1iu0q_28 ._TimeText_1iu0q_35,
    ._SeekSections_1iu0q_1 ._Item_1iu0q_1 ._Parts_1iu0q_16 ._Part_1iu0q_16:hover {
      background-color: var(--bew-fill-1);
    }

    .video-sections-v1 .video-sections-head_first-line .first-line-left .first-line-title:hover,
    .note-detail .note-operation .tab-action-item.is-active .tab-icon {
      color: var(--bew-theme-color);
    }

    .membersinfo-upcard .staff-info .staff-name.is-vip,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
    .ql-snow.ql-toolbar .ql-picker-item:hover,
    .ql-snow .ql-toolbar .ql-picker-item:hover,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active,
    .ql-snow.ql-toolbar .ql-picker-label:hover,
    .ql-snow .ql-toolbar .ql-picker-label:hover,
    .ql-snow.ql-toolbar button.ql-active,
    .ql-snow .ql-toolbar button.ql-active,
    .ql-snow.ql-toolbar button:focus,
    .ql-snow .ql-toolbar button:focus,
    .ql-snow.ql-toolbar button:hover,
    .ql-snow .ql-toolbar button:hover,
    .up-name.is_vip,
    .up-name.small-vip,
    .up-detail .up-detail-top .up-name[style*="color: rgb(251, 114, 153)"],
    .up-detail .up-detail-top .up-name[style*="color:#FB7299;"],
    .user-card-m-exp .user-info-wrapper .info .user .name[style*="color: rgb(251, 114, 153)"] {
      color: var(--bew-theme-color) !important;
    }

    .upinfo-btn-panel .not-follow-charge-btn:hover {
      color: var(--bew-theme-color-80);
    }

    .up-name.is_vip:hover,
    .up-name.small-vip:hover,
    .up-detail .up-detail-top .up-name:hover,
    .up-detail .up-detail-top .up-name[style*="color: rgb(251, 114, 153)"]:hover,
    .up-detail .up-detail-top .up-name[style*="color:#FB7299;"]:hover {
      color: var(--bew-theme-color-80) !important;
    }

    .note-pc .note-container .note-header .note-operation.detail,
    .note-up .up-desc-container .desc-top .attention-btn-container:hover {
      color: white;
    }

    .video-argue .video-argue-inner.strong {
      color: var(--bew-error-color);
    }

    .coin-operated-m-exp .mc-box:hover,
    .coin-operated-m-exp .mc-box.on,
    .note-pc .note-container .note-header .note-operation,
    .content .group-list li:hover input[type="checkbox"] + i,
    .content .group-list li input[type="checkbox"]:checked + i,
    .content .group-list li input[type="checkbox"]:checked:hover + i,
    .coin-operated-m-exp .like-checkbox input[type="checkbox"]:checked + i {
      border-color: var(--bew-theme-color);
    }

    .editor-innter div:last-child {
      border-color: var(--bew-theme-color) !important;
    }

    .upinfo-btn-panel .not-follow-charge-btn:hover,
    .user-card-m-exp .user-info-wrapper .info .btn-box .like:not(.liked):hover,
    .coin-operated-m-exp .coin-bottom .bi-btn:hover {
      border-color: var(--bew-theme-color-80);
    }

    // Tick icon for  danmaku enable
    .bui-danmaku-switch
      .bui-danmaku-switch-input:checked
      + .bui-danmaku-switch-label
      .bui-danmaku-switch-on
      path:nth-child(2),
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button:hover .ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-fill,
    .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill {
      fill: var(--bew-theme-color);
    }

    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar button:focus .ql-stroke,
    .ql-snow .ql-toolbar button:focus .ql-stroke,
    .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow.ql-toolbar button:hover .ql-stroke,
    .ql-snow .ql-toolbar button:hover .ql-stroke,
    .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar button:hover .ql-stroke-miter {
      stroke: var(--bew-theme-color);
    }

    // AI视频总结
    .video-ai-assistant .video-ai-assistant-info {
      -webkit-text-fill-color: var(--bew-theme-color);
    }

    .upinfo-btn-panel .new-charge-btn .charge-btn-icon img,
    .bpx-player-viewpoint-menu-item-active,
    .cur-play-icon,
    .multi-page-v1 .cur-list .list-box li.on img,
    .upinfo-btn-panel .new-charge-btn .charge-btn-icon img,
    .playing-gif {
      filter: var(--bew-filter-icon-glow);
    }

    .video-share-popover
      .video-share-dropdown
      .dropdown-top
      .dropdown-top-left
      .capture-bar
      .bar-left
      > label
      #check-timestamp:checked {
      overflow: hidden;
    }
  }

  // #endregion

  // #region dark mode adaption part
  &.dark {
    .video-ai-assistant .video-ai-assistant-bg::before,
    .note-pc .note-container .note-header .back-note-list:hover,
    .note-pc .note-container .note-header .jump-note-package:hover,
    .note-pc .note-container .note-header .close-note:hover {
      background: var(--bew-fill-2);
    }

    .rcmd-tab-switcher .rcmd-tab-move.right .rcmd-tab-move-inner {
      background: linear-gradient(270deg, var(--bew-bg) 61.53%, transparent 100%);
    }

    .rcmd-tab-switcher .rcmd-tab-move.left .rcmd-tab-move-inner {
      background: linear-gradient(90deg, var(--bew-bg) 61.53%, transparent 100%);
    }

    .note-list .note-card-container .note-card,
    .resizable-component .ql-tag-blot .time-tag-item,
    .ql-toolbar,
    ._Tabs_krx6h_1 ._TabItem_krx6h_8._Active_krx6h_36,
    ._SeekSections_1iu0q_1 ._Item_1iu0q_1,
    ._Fallback_1t0d5_1 ._Main_1t0d5_10 ._Item_1t0d5_15,
    .video-argue .video-argue-inner.general {
      background-color: var(--bew-fill-1);
    }

    ._SeekSections_1iu0q_1 ._Item_1iu0q_1 ._Parts_1iu0q_16 ._Part_1iu0q_16:hover {
      background-color: var(--bew-fill-2);
    }

    .bpx-player-container[data-revision="1"]
      .bpx-player-sending-bar
      .bpx-player-video-inputbar
      .bpx-player-dm-btn-send.bui-disabled
      .bui-button-blue,
    .bpx-player-container[data-revision="2"]
      .bpx-player-sending-bar
      .bpx-player-video-inputbar
      .bpx-player-dm-btn-send.bui-disabled
      .bui-button-blue
      .modal-wrapper
      .modal-header-close:hover,
    .note-up .up-desc-container .desc-top .attention-btn-container.is-attention {
      background-color: var(--bew-fill-3);
    }

    .note-pc .note-container,
    .note-detail {
      background-color: var(--bew-elevated-solid);
    }

    .note-pc .note-container .note-header {
      background-color: var(--bew-elevated-solid) !important;
    }

    .note-detail .note-operation .sanlian-box,
    .ql-snow .ql-picker-options {
      background-color: var(--bew-elevated-solid);
    }

    .app .navbar {
      background-color: var(--bew-bg) !important; // 稿件举报窗
    }

    .resizable-component .editor-innter {
      background-color: unset;
    }

    .note-pc .note-container .note-header *,
    .note-list .note-card-container .note-card .note-content,
    .note-up .up-desc-container .desc-top .up-name,
    .resizable-component .ql-tag-blot .time-tag-item__text,
    .ql-snow.ql-toolbar button,
    .ql-snow .ql-toolbar button,
    .ql-snow .ql-picker,
    .video-owner-state .video-owner-state-item,
    .ql-editor .ql-color-\#000000,
    .ql-editor,
    .up-detail .up-detail-top .up-name {
      color: var(--bew-text-1);
    }

    .user-card-m-exp .user-info-wrapper .info .user .name,
    .editor-innter div:last-child div:last-child {
      color: var(--bew-text-1) !important;
    }

    .note-list .note-card-container .note-card .user-info .user-name,
    .note-up .up-desc-container .desc-bottom,
    .note-detail .note-operation .tab-action-item .tab-action-icon .tab-num,
    .reply-item .root-reply-container .content-warp .vote-info__text {
      color: var(--bew-text-2);
    }

    .note-list .note-card-container .note-card .note-info,
    .video-argue .video-argue-inner.general {
      color: var(--bew-text-3);
    }

    .note-pc .note-container .note-header path {
      fill: var(--bew-text-1);
    }

    .ql-snow .ql-fill,
    .ql-snow .ql-stroke.ql-fill {
      fill: var(--bew-text-2);
    }

    .ql-snow .ql-stroke,
    .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
      stroke: var(--bew-text-1);
    }

    .video-share-popover,
    .note-list .part-line,
    .note-pc .note-container,
    .note-list .note-card-container .note-card:hover,
    .note-detail .note-operation .sanlian-box {
      border-color: var(--bew-border-color);
    }

    .qrcode .van-qrcode {
      box-shadow: 0 0 0 5px white;
    }
  }
  //  #endregion
}
