@import "./dark-definitions"; @import "common"; .bui-button { .bui-button-blue, .bui-button-blue:hover, .bui-button-gray3:hover { @include theme-background-color(); @include foreground-color(); } } .bpx-docker-minor { @include background-color(); } .bpx-player-auxiliary { .bui-dropdown { @include background-color(); .bui-dropdown-wrap { @include fill("e"); @include color("e"); &.bui-dropdown-unfold .bui-dropdown-icon, .bui-dropdown-icon:hover { @include theme-fill(); } } .bui-dropdown-items { @include background-color("4"); @include border-color(); .bui-dropdown-item { @include color("e"); @include background-color(); &::before { @include hide(); } &:hover { @include theme-color(); @include background-color("2"); } } } } .bpx-player-dm-load-status { @include background-color(); @include color("a"); } .bpx-player-collapse { .bui-collapse-body { @include background-color("3"); } .bpx-player-dm-function { @include background-color(); > * { @include color("e"); @include background-color(); } } .bpx-player-dm-wrap { @include background-color(); .dm-info-row { @include color("a"); .dm-info-dm { @include color("e"); } .dm-info-block-btn, .dm-info-report-btn { @include background-color("5"); @include border-color(); @include color("e"); &:hover { @include theme-background-color(); @include foreground-color(); } } } .bui-long-list-item-selected .dm-info-row { @include background-color("4"); } } .bpx-player-dm-btn-footer { @include background-color(); .bpx-player-dm-btn-history { &, &.bpx-player-disable, &.bpx-player-disable:hover { @include background-color("4"); @include color("a"); } &:hover { @include color("e"); } } } } .bpx-player-block-area { .bpx-player-block-label { @include color("e"); } .bpx-player-block-sync-btn { @include theme-color(); @include theme-fill(); } .bpx-player-block-add-input { @include border-color("6"); @include color("e"); @include background-color("4"); &:focus-within { @include theme-border-color(); } } .bpx-player-block-add-btn, .bpx-player-block-add-btn .bui-area { @include border-color(); @include background-color("4"); @include color("e"); &:hover { @include theme-background-color(); @include foreground-color(); } } .bpx-player-block-list { @include background-color("2"); .bpx-player-block-list-function { @include color("a"); } .bpx-player-state-list-wrap > * { @include color("a"); @include fill("a"); &.bpx-player-block-list-delete:hover { @include theme-color(); @include theme-fill(); } &.bpx-player-block-list-state { @include theme-color(); } } .bpx-player-block-list-line { @include color("e"); @include background-color(); } } } .bpx-player-contextmenu { @include background-color("3"); @include border-color(); box-shadow: 0 0 5px #222 !important; > li { @include color("e"); &:hover { @include background-color("4"); } } } .bpx-player-adv-danmaku, .bpx-player-setting { @include background-color(); } .bpx-player-adv-danmaku-panel { @include border-color(); .bpx-player-adv-danmaku-group { @include border-color("4"); .bpx-player-adv-danmaku-title { @include color("e"); } } .bpx-player-adv-danmaku-btn, .bpx-player-adv-danmaku-btn .bui-area { @include background-color("4"); @include color("e"); &.active, &:hover { @include theme-background-color(); @include foreground-color(); } } .bpx-player-adv-danmaku-pos-title { @include color("e"); } } } .ep-list-wrapper, .section-ep-wrapper { .ep-item a { @include color("e"); } } #bilibili-player-placeholder-bottom { @include background-color('3'); &-left, &-right { @include background-color('4'); } } #bpx-svg-sprite-danmu-on { path:last-child { @include theme-fill(); } } .bpx-player-container { box-shadow: 0 4px 8px 0 #0004 !important; .squirtle-controller { .squirtle-high-energy { @include to-theme("blue"); } .squirtle-progress-timeline { @include theme-background-color(); } } .bpx-player-sending-area::before { @include background-color(); } .bpx-player-sending-bar { @include background-color('2'); @include on-fullscreen { @include background-color(); } .bpx-player-video-btn-dm, .bpx-player-dm-setting, .bpx-player-dm-switch { @include fill('a'); } .bui-danmaku-switch-on { path:last-child { @include theme-fill(); } } .bpx-player-dm-switch:hover, .bpx-player-dm-setting:hover, .bpx-player-video-btn-dm:hover { @include fill('e'); } .bpx-player-dm-input { @include color("e"); } .bpx-player-block-filter-type.bpx-player-active > * { @include theme-color(); @include theme-fill(); } .bpx-player-mode-selection-container .selection-span.active { &, &:hover { @include theme-fill(); } } .bpx-player-video-inputbar { background-color: rgba(255, 255, 255, 0.06667) !important; .bpx-player-video-inputbar-wrap { @include border-color(); .bpx-player-dm-wrap { a, a:hover { @include theme-color(); } } .bpx-player-dm-hint { a { @include color("a"); @include fill("a"); &:hover { @include theme-color(); @include theme-fill(); } } } } } } .bpx-player-video-info { @include color("a"); } } .twp-container .new-twp-btn { &.confirm, &.ticket, &.vip { @include theme-background-color(); @include foreground-color(); .current { @include foreground-color(); } } } .msg-push-new { @include background-color("2"); .ar-recommend-item__info { &--title { @include color("e"); } &--desc .time, &--view { @include color("a"); } } } .send-box .core-style { @include color("e"); } .section.user-info { .user-info-title { @include border-color("5"); } .tag-content, .info-value, .info-title { @include color("e"); } .iconfont, .info-command { @include color("a"); } } .h-notice { @include background-color("3"); a { @include color("e"); } svg path { @include fill("e"); } } .video-info .video-data .argue { &, & i { color: #e1a411 !important; } background: #312d21 !important; } .short-review-content { .review-edit-header { .media-info { h4 { @include color("e"); } .rate-tip { @include color("a"); } } } .review-body-wrap { @include border-color("5"); @include background-color("2"); &:focus-within { @include theme-border-color(); } textarea, textarea:focus-within { @include background-color(); @include border-color(); } .tip { @include color("a"); } .mr-btn { &, &:hover, &:active { @include foreground-color(); @include theme-background-color(); @include border-color(); } } } } .fans-medal-dialog { @include background-color("2"); .van-dialog__title { @include color("e"); } .van-dialog__close { @include color("a"); } } @mixin fans-medal-list { .list { .content { @include border-color("4"); @include background-color("3"); .btn { @include theme-background-color(); @include foreground-color(); } &.border { @include theme-border-color(); opacity: 1 !important; } .info { @include no-image(); @include background-color(); .num, .name { @include color("e"); } .img, .image { @include to-theme("pink"); } .limit { &, & .before { @include color("a"); } } .progress { @include background-color("5"); .blue { @include theme-background-color(); } } } } } } // 粉丝勋章墙的 iframe, 实在不理解为什么这也要弄个 iframe, 还起这么泛的名称, 感觉很容易和其他地方冲突 #app > #main > .container { .header { .name { @include color("e"); } .count { @include color("a"); span { @include theme-color(); } } } @include fans-medal-list(); } .container.medalList { @include background-color(); .title { .name { @include color("e"); } img { @include to-theme("blue"); } .mount { @include color("a"); } .button { @include theme-color(); } } @include fans-medal-list(); } .ztolayer-dialog { @include background-color("2"); .dialog-title .title { @include theme-color(); } .dialog-body { @include color("e"); .info { @include color("a"); } .configItem .switch { @include to-theme("pink"); } } } .bilibili-player-video-info-hover { @include background-color("2"); &-num { @include color("e"); } &-tips { @include color("a"); } } #i_cecream { @include background-color(); .mini-header { .header-entry-avatar { @include border-color("3"); } .default-entry, .right-entry-icon, .mini-header__title > span { @include color("e"); } .right-entry-text { @include color("a"); } .header-upload-entry { @include theme-background-color(); @include foreground-color(); .header-upload-entry__icon { @include foreground-color(); } &:hover { @include theme-background-color("90"); } } } .bili-header, .home-header { @include background-color(); &__banner { @include background-color("3"); } &.fixed-top .home-header__bar { @include background-color("2"); } &__channel { @include background-color(); .channel-items__left { @include border-color('4'); } .channel-link__right { @include color('e'); svg path { @include fill('e'); } } .channel-entry-more__link, .channel-link { @include color("e"); @include background-color("3"); @include border-color(); &:hover { @include color("e"); @include background-color("5"); } } } .channel-icons { &__item { @include color("e"); } .channel-notify { @include border-color("2"); } } } .primary-btn { @include color("e"); @include background-color("3"); @include border-color(); &:hover { @include background-color("5"); } } .area-header { .roll-btn { @include color("e"); } .title { @include color("e"); &:hover { @include theme-color(); } } .track-switch { @include background-color("3"); @include color("a"); .switch-bar { @include theme-background-color(); } button { &:hover { @include background-color("5"); } &.is-active { @include foreground-color(); } } } } :not(.aside-head) > .area-header { .mouse-switch > * { @include color("a"); @include background-color("3"); &:hover { @include color("a"); @include background-color("5"); } &.is-active { @include theme-background-color(); @include foreground-color(); } } } .aside-head { .mouse-switch > * { @include color("a"); &.is-active { @include theme-color(); &::after { @include theme-background-color(); } } } } .aside-body { .list-state-error, .list-state-nothing, .list-state-loading { @include background-color("4"); span { @include color("a"); } } } } .v-popover-content { @include border-color(); @include background-color("3"); } $media-types: (video, bangumi, cheese, live, manga, movie, ogv, article); @each $type in $media-types { .bili-rank-list-#{$type} { &__list { @include border-color(); @include background-color(); } &__item:nth-of-type(2n + 1) { @include background-color("3"); } &__item:nth-of-type(2n) { @include background-color("4"); } .rank-#{$type}-card { &__popover { @include background-color(); &--icon, &--stats, &--subtitle, &--author { @include color("a"); } &--stats { @include border-color("4"); } } &__cover { @include background-color("3"); } &__info--pts, &__info--schedule, &__info--styles { @include color("a"); } } } .bili-#{$type}-card { &__info--tit { &:hover { @include theme-color(); } } &__info--living { @include to-theme("pink"); } &__info--pub, &__info--subtitle, &__info--styles, &__info--uname { @include color("a"); } &__info--owner { @include color("a"); &:hover { @include theme-color(); } } .v-img, &__image, &__cover, &__image--wrap { @include background-color("3"); } &__skeleton { &--light, &--text, &--face, &--cover { @include background-color("4"); } } &__wrap { @include background-color(); } } } .n-drawer-container .elevator { @include background-color("2"); .elevator-head { @include color("e"); } .elevator-core { &.is-active { @include background-color("3"); } &:hover { @include background-color("4"); } .name { @include color("e"); } .icon { @include color("a"); } } } #bilibili-footer { @include background-color(); .split-line { @include background-color("4"); } p { @include color("e"); } a { @include color("e"); &:hover { @include theme-color(); } } .link-item .bt { @include color("a"); } .text-con { &__line { &--link { @include color("a"); } } } } .footer-qrcode-popover, .footer-wechat-popover { .qrcode-text { @include color("e"); } } .gm-skeleton { .chat-input-ctnr { @include border-color("3"); @include background-color("2"); .medal-section { @include border-color("3"); } } } .suggest-wrap .suggest-item { @include color("e"); &:hover { @include background("6e"); } } #all-list { .sub-filter { @include background("6e"); } .icon-tid2-arr { @include color("6e"); } .mixin-list .user-list { .all-user-item > .user-row .title, .u-videos .video-item .video-desc { @include color("e"); } } } .dyn-topic-panel { .topic-panel { @include background("4"); &__nav { &-title { @include color("e"); } } .relevant-topic { &::before { @include to-gray(0.8); } &:hover .relevant-topic__title { @include theme-color(); } &__title { @include color("e"); } &__exposed { @include color("a"); } } } } .bili-topic-selector { &__search { .bili-topic-search { &__input__prefix, &__input__text { @include color("a"); } &__popover { @include background-color("3"); @include border-color(); } &__popover.active { @include theme-shadow(); .bili-topic-search { &__input { @include background-color("4"); &__inner { @include color("e"); &::placeholder { @include color("a"); } } &__text { @include color("9"); } } } } } } .bili-topic-item { &__cloud { &:hover { @include background("2"); } &__prefix { @include to-gray(0.8); } &__name { @include color("e"); } &__desc { @include color("a"); } } } &__rcmd { &__default { .bili-topic-item { &__stela { @include background("3"); &__prefix { @include to-theme("blue"); } &__name { @include to-theme("blue"); } } } } .bili-topic-rcmd-more { &__action { @include background("3"); @include theme-color(); } &__items { .bili-topic-item__cloud { &__prefix { @include theme-color(); } &__name { @include color("e"); } } } &__popover { @include background("3"); @include border-color(); &.hover { @include theme-shadow(); } } } } &__bulletin { @include background("4"); .bili-topic-item { &__normal { &:hover { @include theme-background("10"); } &__prefix { @include to-theme("blue"); } &__name { @include to-theme("blue"); } } } &__clear { @include to-theme("blue"); } } } .comment-setting { .settings-panel { @include background("3"); @include border-color(); @include theme-shadow(); &__option { @include color("e"); &:hover { @include color("e"); @include background-color("2"); } &--active { @include theme-color(); &:hover { @include theme-color(); } } } } } .toolbar-box { .icon-reserve.live:hover { @include to-theme("blue"); } } .bili-popup-layer { @include background-color("2"); @include border-color(); &__content { .dynamic-reserve { &__type { @include color("e"); } &__form__item { &.title { .bili-input { &::before { @include border-color(); } &:hover::before { @include theme-border-color(); } &__inner { @include color("e"); @include background-color("4"); } } } &.datetime { .date-input { input { @include background-color("4"); } &::before { @include border-color(); } &:hover::before { @include theme-border-color(); } .calendar.active { @include to-theme("blue"); } } .scroll-input { .s-input-wrap { &::before { @include border-color(); } &:hover::before { @include theme-border-color(); } .s-input { @include background-color("4"); @include color("e"); } } .s-label { @include color("a"); } .s-panel { @include theme-border-color(); @include background-color("4"); .s-item { @include color("e"); &:hover { @include theme-color(); } } } } } } &__about { img { @include to-theme("blue"); } .link { @include theme-color(); } } } } &__footer { &::after { @include border-color(); } } @at-root #{&}__button { @include color("e"); &.confirm { @include theme-background-color(); } &.cancel { @include background("4"); } &::before { @include border-color(); } } } .dyn-topic { &__card:hover { @include theme-background("10"); } &__icon { @include to-theme("blue"); } &__text { @include theme-color(); } } .base-video-sections { @include background-color("4"); .first-line-title { @include color("e"); } .next-button, .cur-page { @include color("a"); } .video-sections-head_second-line { &, .abstract { @include color("a"); } } .video-section-list .video-episode-card { @include color("e"); &__info { transition: background-color .2s ease-out; &:hover { @include background-color("2"); } .video-episode-card__info-duration { @include color("a"); } } &__info-playing { @include background-color("3"); .video-episode-card__info-title { @include theme-color(); } .cur-play-icon { @include to-theme("blue"); } } } .border-bottom-line { @include background-color("6"); } } .reply-warp, .up-info { .u-face .u-face__avatar { @include background-color("4"); } .bili-avatar { @include no-image(); @include background-color("4"); } } .user-card-avatar, .up-info-v1 { .bili-avatar { @include no-image(); @include background-color("4"); } } .v-wrap .float-nav { &__btn--fixed, .nav-btn-item { @include background-color("3"); @include color("e"); @include border-color(); &:hover { @include theme-background-color(); @include foreground-color(); } } } .user-card { .card-user-name { @include color('e'); } .card-social-info { > a { @include color('e'); .social-info-title { @include color('a'); } } } .card-sign { @include color('a'); } .card-btn-warp { .card-attention-btn { @include theme-background-color(); @include border-color(); @include foreground-color(); &.attention { @include background-color('4'); @include color('e'); } } .card-message-btn { @include border-color('8'); @include color('e'); @include background-color(); } } .info p { @include color("e"); } .gray-text { @include color("a"); } }