@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(); } } } } } .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 { &.active .name { @include set-theme-color("border-bottom-color"); @include theme-color(); } .name { @include set-color("border-bottom-color", "a"); } } .gift-reveal-header { @include set-color("border-bottom-color", "6"); } } #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); } }