@import './dark-definitions'; .series { .bt-top .bt { @include color('e'); } .van-pagination { @include color('e'); &-point { @include background-color('3'); .van-pagination-item:hover, .van-pagination-active { @include theme-background-color(); } } &-btn-next, &-btn-prev { @include color('e'); @include background-color('4'); @include border-color(); } &-pager { li { @include color('e'); } } } .switch-button { @include background-color('3'); &.on { @include theme-background-color(); } &.on::after, &::after { @include color('e'); } } .series-box .video-card-common { @include background-color(); } } .multi-page .cur-list .list-box li .duration { @include color('a'); } .interact-dialog .dialog-body { @include background-color('2'); &::before { content: ''; background: url(https://s1.hdslb.com/bfs/static/jinkela/video/asserts/interact-dialog.png); filter: invert(1); background-size: 242px 198px; width: 242px; height: 198px; display: block; position: absolute; background-repeat: no-repeat; clip-path: inset(60% 35% 0 35%); } } #app { .channel-sidebar { .search-history-panel { @include background-color('3'); @include border-color('4'); .history-item { &:hover, &.focus { @include background-color('2'); } .item-value { @include color('e'); } .delete-icon:hover { @include theme-color(); } } .clear-btn { @include theme-color(); } } } .search-container { @include background-color(); .header-info { .title { @include color('e'); } .count { @include color('a'); } } .card-list { .header-info, .channel-info { .title { @include color('e'); } } .channel-btns, .channel-btn { @include to-theme('blue'); } .list { .video-card { .video-name { @include color('e'); &:hover { @include theme-color(); } } } } } @include back-top-btn(); } } #page-dynamic, .detail-card { .bb-comment { .no-login { .textarea-container { .baffle, .comment-submit { @include background-color('6'); } } .comment-emoji { @include background-color('6'); } } } } .back-top-tools { @include back-top-btn('.backup', '&'); } .s-space { .follow-main { .follow-header { .follow-tabs { @include color('e'); span:hover { @include theme-color(); } .active { @include theme-color(); &::before { @include set-theme-color('border-bottom-color'); } &::after { @include theme-background-color(); } } } .search-component { &:hover { @include theme-border-color(); } &.search-component-focus { @include border-color('a'); } .search-component-input input { @include background-color(); @include color('e'); } .icon-follow-search:hover { @include to-theme('blue'); } } .follow-search-result { @include color('a'); } } } .album-content { .album-list { &__title { @include color('e'); } &__tabs { @include background-color('2'); .album-list__tab { &-name { @include color('e'); } } .album-list__tab--active { .album-list__tab-name { @include theme-color(); } } } &__content { .album-card { &__title { @include color('e'); &:hover { @include theme-color(); } } } } } } .search-page { @include background-color('4'); .search-nav { @include color('e'); } .search-nav-item { .num { @include color('a'); } &:hover { @include background-color('5'); .text { @include theme-color(); } } &.search-nav-actived { @include theme-background-color(); .text, .num { @include foreground-color(); } } } .feed-dynamic { @include border-color(); .feed-dynamic-header-search-kw, .feed-dynamic-header-title { @include color('e'); } .feed-dynamic-header-search { @include color('a'); } .feed-dynamic-header-search-count { @include theme-color(); } .card .main-content .single-icon { @include grayscale(); } } } } .switch-wrap { .type { &.active i, &.active:hover i { @include to-theme('blue'); } &.imgleft:not(.active) { &:hover i { background-position: -148px -376px !important; opacity: 1; } i { opacity: 0.7; transition: opacity 0.2s ease-out; } } &.aver:not(.active) { &:hover i { background-position: -194px -376px !important; opacity: 1; } i { opacity: 0.7; transition: opacity 0.2s ease-out; } } } } .sponsor-mini-rank { .sponsor-rank-container { .sponsor-rank-item:nth-child(n + 4) { .sp-rank { @include color('e'); } } } } .sponsor-rank-dialog { .sponsor-rank-content { @include background-color('4'); ::-webkit-resizer, ::-webkit-scrollbar-thumb { @include background-color('3'); &:hover { @include background-color('5'); } } .sp-rank-header { .sp-list-nav { @include set-color('border-bottom-color', '5'); } } .sp-rank-body { .sp-rank-list { .sponsor-rank-item { &:nth-child(n + 4) .sp-rank i { @include background-color('3'); @include color('e'); } .sp-user:not([class~='vip']) { @include color('e'); } .sp-msg { @include background-color('3'); @include border-color(); &::before { @include set-color('border-top-color', '3'); @include set-color('border-left-color', '3'); @include background-color('3'); } p { @include color('e'); } } } } } } } .sponsor-pay-content { .sponsor-pay-header { @include set-color('border-bottom', '5'); } .sponsor-pay-body { .sponsor-choice { .active .sponsor-border { @include background-color(); } .sponsor-border { @include background-color('3'); } .active input[name='custom-amount'] { @include color('e'); } input[name='custom-amount'] { @include background-color('3'); @include color('6'); } } } .sp-pay-qrcode { .sponsor-qrcode { .step-other { @include to-theme('blue'); } } } } #biliMainHeader { .mini-header, .base-mini-header { @include background-color('2'); .base-mini-header-logo { @include to-white(); } .base-nav-link-main, .base-mini-header-pulldown-icon, .base-nav-link-item { @include color('e'); } .base-mini-upload { @include theme-background-color(); @include foreground-color(); } } } .v-wrap .vcd .cover { @include background-color('4'); } .live-btn-ctnr { .icon-arrow-right { @include theme-color(); } } // TODO 修复 html 样式误伤,导致圆角无法呈现的问题 #app-container { .share-step { .ogv-card { .name { @include color('e'); } @include background-color('3'); } .bp-emoji-box { @include color('e'); } } } .link-footer .footer-img-linker li { a:hover .footer-img-item { @include color('e'); @include border-color(); } .footer-img-item { @include border-color('a'); } } div[role='alertdialog'] .link-popup-panel { top: unset !important; .popup-content-ctnr p { @include color('a'); } } .streamer-calendar { @include background-color('2'); .subscribe-tips { @include color('e'); } .streamer-calendar-nav { @include background-color('4'); @include border-color(); .tabs-wrapper { .tabs { .tabs-item { &:hover { @include color('e'); } &::after { @include theme-background-color(); } &.tabs-item-active { @include color('e'); } } } } .month-tabs-btn { @include background-color(); &:hover, &:focus { @include to-theme('blue'); } } .month-tabs-title { @include color('e'); } .streamer-calendar-description { @include color('a'); } .btn-blue { @include theme-background-color(); } } .calendar-watch { // .calendar-recommend{} .calendar-follow { @include border-color(); @include background-color('4'); .calendar-follow-title { @include color('e'); .calendar-follow-description { @include color('a'); } } .calendar-follow-empty { .calendar-follow-empty-tips { margin-left: 36px; & p { @include color('e'); } } } .calendar-follow-cards-container { .anchor-card { .anchor-card-avatar { @include border-color('6'); } .anchor-card-info { .anchor-card-title { @include color('e'); } .anchor-card-action { @include theme-background-color(); } } } } } .calendar-search { @include border-color(); @include background-color('4'); .calendar-search-top { .calendar-search-title { @include color('e'); } .calendar-search-input-wrapper { @include background-color('3'); .calendar-search-input { @include color('e'); } .calendar-search-action:hover { @include to-theme('blue'); } } } .calendar-search-content { .anchor-card-info { .anchor-card-avatar { @include border-color('6'); } .anchor-card-title { @include color('e'); } } .calendar-search-message { @include color('a'); } } } .basic-calendar { @include border-color(); .basic-calendar-thead { .basic-calendar-thead-th { @include color('a'); @include border-color('6'); @include background-color('4'); } } .basic-calendar-tbody { .basic-calendar-item { @include border-color('6'); @include background-color('3'); .calendar-item-top { .calendar-item-date { .calendar-item-today { @include theme-background-color(); } &:not(.calendar-item-today) { filter: invert(1); } } .calendar-item-switch-cards-wrapper { @include background-color(); .calendar-item-switch-cards { @include background-color(); &:not([disabled='disabled']):hover { @include theme-background-color(); } @include border-color('6'); } } } .calendar-item-card-wrapper { .calendar-card { @include border-color(); @include background-color('3'); .calendar-card-top { .calendar-card-time { @include color('e'); &.calendar-card-time-end { @include color('a'); } } .calendar-card-follow { @include theme-background-color(); &.calendar-card-follow-subscribed { @include background-color('5'); } } } .calendar-card-info { .calendar-card-anchor { @include color('e'); } } .calendar-card-title { @include color('a'); } &.calendar-card-follow-highlight { @include theme-background-color(); .calendar-card-top .calendar-card-time { @include color('e'); } .calendar-card-title { @include color('3'); } } } } .calendar-item-cards-wrapper-odd { .calendar-item-card-wrapper:nth-of-type(2n) .calendar-card { @include background-color('4'); } } .calendar-item-cards-wrapper-even { .calendar-item-card-wrapper:nth-of-type(odd) .calendar-card { @include background-color('4'); } } } } } } .share-panel { @include border-color(); @include background-color('4'); } .side-bar { .side-bar-btn { @include theme-color(); @include border-color(); @include background-color('4'); .side-bar-btn-icon { @include to-theme('blue'); } } } } html { &, body { @include background-color(); } &:not(.iframe) { &, body { @include background-color('2'); } } } .bb-comment .comment-list .list-item { .text .jump-img, .text-con .jump-img { @include to-theme('blue'); } } // 进度条 viewport .bilibili-player-view-points[data-type='-1'] > span { @include background-color('aaaa'); } .resizable-component { .note-drag-bar { @include background-color('4'); @include color('a'); .status-bar { @include color('a'); } .operation-btns { .space-btn, .question-btn, .close-btn { @include background-color('5'); @include color('d'); &:hover { @include theme-color(); } } } } .ai-summary-popup { @include border-color('3'); @include background-color('2'); .ai-summary-popup-tips-text { @include color('e'); } .ai-summary-popup-header { &::after { @include background-color('e'); } .ai-summary-popup-header-clickable-area { @include to-gray(); } } .ai-summary-popup-body { .ai-summary-popup-body-abstracts { @include color('e'); } .ai-summary-popup-body-outline .section:hover { @include background-color('3'); } } } // B 站的父容器和 note-container 圆角没对齐,会漏一点白色出来 &.note-pc { @include background-color('3'); } .note-container { overflow: hidden; // B 站写的 .note-detail 容器溢出了 @include border-color(); @include background-color('3'); // 修复上述圆角对齐问题 .note-header { @include background-color('3'); .note-title, .back-note-list, .jump-note-package, .close-note { @include color('e'); @include background-color('3'); svg { @include to-white(); } &:active { @include background-color('2'); } } .note-operation { @include background-color('4'); } } .note-content { .note-card-container .note-card { @include background-color('2'); .note-content { @include background-color('2'); @include color('e'); } } .note-detail { @include background-color('3'); @include color('e'); .up-desc-container .desc-top .up-name { @include to-white(); } .preview-editor { @include color('e'); } .note-operation .sanlian-box { @include background-color('4'); @include border-color('3'); } } .note-editor { .ql-editor, .ql-toolbar, .ql-picker-options, .ql-picker-label { @include background-color('2'); @include color('e'); } .ql-bar { &:not(.ql-active) { i, svg { cursor: pointer; &:not(:hover) { @include to-white(); } } } &.ql-active { i, svg { @include theme-color(); } } } } } } } .bili-note { @include background-color('3'); .ql-toolbar { @include color('9'); @include background-color(); .readonly-mask { background-color: #000 !important; opacity: 0.4 !important; } .ql-stroke { @include set-color('stroke', '9'); } .ql-picker { color: inherit !important; } .ql-picker-label { &:hover, &.ql-active { @include theme-color(); } &:hover { .ql-stroke { @include set-theme-color('stroke'); } .ql-fill { @include set-theme-color('fill'); } } } .ql-picker-options { @include background-color(); @include color('a'); } .ql-picker-item:hover, button.ql-active, button:hover, .ql-picker-item.ql-selected { @include theme-color(); } .ql-tag { @include theme-background-color(); } .edit-btn { @include theme-border-color(); @include theme-color(); &.save-edit { @include color('e'); @include theme-background-color(); } } // 修复 个人空间 - 我的笔记 下按钮颜色使用原生颜色的问题 button { @include color('9'); } } .editor-innter { @include color('e'); @include border-color(); @include background-color('2'); .ql-tag-blot { .time-tag-item { @include background-color('3'); @include border-color(); @include theme-color(); .time-tag-item__text::before { @include theme-background-color(); } } } .ql-image-preview { box-shadow: 0 2px 8px 0 hsl(0deg 0% 15% / 50%) !important; @include border-color(); .img-preview { @include border-color('3'); } } } } .modalBox { @include color('e'); @include background-color('4'); .cancel { @include color('e'); @include border-color(); @include background-color('6'); } .sure { @include theme-background-color(); } } .member-container .up-info .attention { @include theme-background-color(); } .wide-members .avatar-list .van-icon-general_addto_s { @include theme-background-color(); } .be-dropdown-item:hover { @include theme-color(); } .fav-main { .album-card { .btn { @include color('e'); @include border-color(); @include background-color('2'); } } } .pugv-item { .item-infos { .main-title { @include color('e'); } } } .bilibili-player-popup-area { .bilibili-player-video-popup-follow { @include background-color('4'); &:not(.bilibili-player-video-popup-followed) { @include theme-background-color(); } } .bilibili-player-video-popup-active svg, path[fill] { @include set-theme-color('fill'); } path[stroke] { @include set-theme-color('stroke'); } } .is-max .percentage-bar { @include theme-background-color('40'); } .vote-options .checked { @include to-theme('pink'); } .article-tab .article-list .list-item .fold-box:hover { @include theme-color(); } .header-video-card .video-info .line-1 { @include color('e'); } .van-popper { .level-content { .level-intro { @include color('e'); @include background-color('3'); &__link { @include theme-color(); svg { @include set-theme-color('fill'); } } } } .logout span { @include color('e'); &:hover { @include background-color('3'); } } } .list-item { &:hover, &.active { @include background-color('3'); } } #bili-icon_dingdao_yingbi { path { @include set-theme-color('fill'); } } .player-auxiliary-playlist-item:hover .player-auxiliary-playlist-item-title { @include theme-color(); } .gift-panel-box { @include border-color(); .gift-tab { @include color('e'); &.active { @include theme-color(); .name { @include set-theme-color('border-bottom-color'); @include theme-color(); } .underline { @include theme-border-color(); } } .name { @include set-color('border-bottom-color', 'a'); } } .gift-reveal-header { @include border-color('5'); } } #app .container .question { @include color('e'); } @each $module in home, video, article, search { .music-#{$module} { .tabs { @include set-color('border-bottom-color', '6'); a.active { @if $module == search { .name { @include theme-color(); @include set-theme-color('border-bottom-color'); } } @else { @include theme-color(); @include set-theme-color('border-bottom-color'); } } @if $module == search { a:hover .name { @include theme-color(); } } } .search-bar { @include border-color('6'); input { @include color('e'); } } .select-type { @include color('e'); li { @include background-color('3'); &.on { @include theme-background-color(); } } .toggle { @include border-color(); @include background-color('3'); } } @if $module != home { .music-pagination { a, span { @include color('e'); @include border-color(); @include background-color('3'); &:hover { @include theme-background-color(); } } .current { @include theme-background-color(); } } } @if $module == article { .article-card { @include set-color('border-bottom-color', '6'); .l-con:hover h2 { @include theme-color(); } } } @if index(home search, $module) { .exchange-btn i { @include color('e'); } } } } @each $module in topic, active { .#{$module}-list { @include back-top-btn('.back-top', null); } } .vp-container { @include set-color('border-bottom-color', '4'); } .bb-comment .reply-notice .notice-item { @include theme-background-color(); } .video-page-card .card-box .info .title:hover { @include theme-color(); } .bilibili-player-video-interactive-list { .small.hover circle { @include set-theme-color('fill'); } } .control-panel-ctnr { @include background-color('4'); .chat-input-ctnr { @include border-color('3'); @include background-color('2'); &.chat-input-focus { @include theme-border-color(); } .medal-section { @include border-color('3'); &.focus-textarea { @include theme-border-color(); } } } .control-panel-icon-row .icon-item { &.danmu-block-icon { @include fill('e'); } &.active, &:hover { @include theme-fill(); } } } #control-panel-ctnr-box { @include no-image; } .live-web-player-controller { .vertical-slider-wrap, .horizontal-slider-wrap { .slider-handle, .slider-track { @include theme-background-color(); } } .danmaku .handle { @include theme-background-color(); } .quality-wrap .quality-it.selected { @include theme-color(); } input[type='radio']:checked + label::before { @include theme-background-color(); @include theme-border-color(); } } .bilibili-player-drag-mask-progress .bilibili-player-drag-mask-progress-tempo { @include theme-background-color(); } .list-wrapper { @at-root #eplist_module &.detail .ep-item { @include background-color(); &:hover .ep-title { @include theme-color(); } } .ep-item.visited:not(.cursor) { @include color('a'); } } .bp-popup-panel { #editor { @include background-color('3'); @include color('e'); } .publish-btn { @include theme-background-color(); } } .article-action .more .more-ops-list ul li:hover { @include theme-color(); } .bilibili-player-context-menu-container ul > li { a { @include color('e'); &:hover { @include background-color(); } } } .coin-dialog-mask .like-checkbox { @include color('e'); i { @include to-theme('blue'); } } .international-home .rcmd-box-wrap .change-btn { @include border-color(); @include color('e'); @include background-color('4'); &:hover { @include theme-background-color(); } } .bangumi-options .opt-list li { @include background-color('3'); @include color('e'); &:hover { @include theme-color(); @include background-color('4'); } &.disabled { @include color('a'); @include background-color(); } } .emoji-tab-slider { .prev, .next { filter: invert(1); } }