@import './dark-definitions'; #app > .bg { @include no-image(); } @mixin dyn-container-skeleton() { &--skeleton { @include background-color('4'); } } .bili-dyn-live-users { @include dyn-container-skeleton(); @include background-color('4'); &__title { @include color('e'); span { @include color('a'); } } &__more { @include color('a'); &::after { @include border-color('a'); } &:hover { @include theme-color(); &::after { @include theme-border-color(); } } } &__item { &__face-container { box-shadow: 0 0 0 1px var(--theme-color) !important; } &__uname { @include color('e'); } &__title { @include color('a'); } } } .bili-dyn-my-info { @include dyn-container-skeleton(); @include background-color('4'); &__name { @include color('e'); } &__stat__item { &__count, .item-num { @include color('e'); } &:hover { .bili-dyn-my-info__stat__item__count, .item-num { @include theme-color(); } } &__label, .item-desc { @include color('a'); } } } .bili-dyn-publishing { @include dyn-container-skeleton(); @include background-color('4'); &__tools { &__item { // 这里用 filter 会导致弹窗内容也被影响, 暂时先去掉了 // &.active, // &:hover { // @include to-theme('blue'); // } &.emoji { @include background-color(); } } } .bili-rich-textarea__inner { @include background-color(); @include color('e'); &.empty::before { @include color('a'); } } &-timing-setting { @include background-color('2'); &__label { @include color('e'); } } &__hint { @include color('a'); &::after { @include color('6'); } } &__action { @include theme-background-color(); @include foreground-color(); &.disabled { @include background-color('6'); @include color('a'); } } } .bili-dyn-up-list { @include dyn-container-skeleton(); @include background-color('4'); &__prev, &__next { @include to-gray(); &.disabled { opacity: 0.4 !important; } &:hover:not(.disabled) { @include to-white(); } } &__shadow-left, &__shadow-left .shadow { background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #444) !important; } &__shadow-right, &__shadow-right .shadow { background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #444) !important; } &__item { &__face { @include border-color(); box-shadow: 0 0 0 1px #999 !important; &.all { @include theme-background-color('30'); @include no-shadow(); img { @include to-theme('blue'); } } span { @include theme-background-color(); @include border-color('4'); } } &__name { @include color('e'); } &.active { .bili-dyn-up-list__item__face { @include theme-background-color('30'); box-shadow: 0 0 0 1px var(--theme-color) !important; } .bili-dyn-up-list__item__name { @include theme-color(); } } } } .bili-dyn-list-tabs { @include dyn-container-skeleton(); @include background-color('4'); &__item { @include color('e'); &:hover, &.active { @include theme-color(); } } &__highlight { @include theme-background-color(); } } .bili-dyn-list { &__notification { @include theme-background-color(); @include foreground-color(); } } .bili-dyn-item { @include background-color('4'); .bili-dyn-title { &__text { &:not([style*='color:']) { @include color('e'); } &:hover { @include theme-color(); } } } .bili-dyn-time { @include color('a'); &:hover { @include theme-color(); } } .bili-dyn-more { &__container:hover { @include background-color('3'); } &__btn { &:hover { @include to-theme('blue'); } } &__menu { @include color('e'); &__item { &:hover { @include theme-color(); } } } } .bili-dyn-action { @include color('a'); &__icon { @include to-gray(); } &.active, &:hover { @include theme-color(); .bili-dyn-action__icon { @include to-theme('blue'); } } } .bili-dyn-card-article, .bili-dyn-card-common { @include background-color('3'); &:hover { @include no-shadow(); } } .bili-dyn-card-music { @include border-color(); @include background-color('3'); @include no-shadow(); &__title { @include color('e'); &:hover { @include theme-color(); } } &__label { @include color('a'); } } .bili-dyn-card-article, .bili-dyn-card-pgc, .bili-dyn-card-common, .bili-dyn-card-live, .bili-dyn-card-video { @include border-color('4'); &__body { @include background-color('38'); } &__title { @include color('e'); } &__desc, &__text, &__stat { @include color('a'); } &__tag { &.state--1 { @include theme-background-color(); } &.state--0 { @include background-color('2'); } } &__badge { @include theme-background-color(); } &:hover { .bili-dyn-card-article__title, .bili-dyn-card-pgc__title, .bili-dyn-card-common__title, .bili-dyn-card-live__title, .bili-dyn-card-video__title { @include theme-color(); } } } .bili-dyn-topic { &__card { &:hover { @include theme-background-color('20'); } } &__icon, &__text { @include theme-color(); } } .bili-rich-text { &__content { @include color('e'); } &__action { @include theme-color(); } &-module, &-link, &-topic { @include theme-color(); &::before { @include to-theme('blue'); } &:hover { @include theme-background-color('20'); } } &-module { @include color('e'); &.at, &.vote, &.lottery { @include theme-color(); } } } .bili-dyn-content { &__orig { &.reference { @include background-color('30'); } } .dyn-none { @include color('e'); img { @include to-white(); } } } .dyn-orig-author { &__name { @include color('e'); &:hover { @include theme-color(); } } &__action { @include color('a'); } &__following { @include theme-border-color(); @include theme-color(); &::before { @include to-theme('blue'); } } } .bili-dyn-interaction { &::before { @include background-color('6'); } .bili-rich-text__content { @include color('a'); .at { @include color('e'); } } } .bili-dyn-item { &__tag { @include color('e'); box-shadow: inset 0 -1px 0 #555 !important; } &__extra { @include border-color('6'); } &-fold { @include color('a'); &:hover { @include theme-color(); } } } .dyn-match { &__mark span { @include color('a'); } &__wrap { @include background-color('3'); } &__center__top, &__center__bottom, &__team__name, &__title { @include color('e'); } &__head { @include border-color('5'); } &__action button { @include theme-background-color(); @include foreground-color(); } } .dyn-additional-common { &__mark span { @include color('a'); } &__wrap { @include background-color('3'); } &__cover { @include background-color('2'); } &__detail { &__title { @include color('e'); } &__desc { @include color('a'); } } &__action { button { @include theme-background-color(); @include foreground-color(); &.check { @include background-color('4'); @include color('a'); } } } } .dyn-reserve { &__card { @include background-color('3'); } &__title { @include color('e'); } &__desc { @include color('a'); } &__action button { @include theme-background-color(); @include foreground-color(); &.check, &.disabled { @include background-color('6'); @include color('a'); } } } .dyn-ugc { &__wrap { @include background-color('3'); } &__cover { @include background-color(); } &__detail { &__title { @include color('e'); } &__desc { @include color('a'); } } } .dyn-card-opus { &__title { @include color('e'); } } } .bili-dyn-forward { &__item { @include border-color('6'); } &-item { &__uname:not([style*='color:']) { @include color('e'); } &__time { @include color('a'); } &__action { @include theme-color(); } } &__more { @include color('a'); @include border-color(); } &-publishing { &__action { &__count { @include color('a'); } &__btn { @include theme-background-color(); @include foreground-color(); } } &__emoji { @include border-color(); @include no-shadow(); @include color('a'); @include background-color('2'); i { @include to-gray(); } &:hover { @include color('e'); i { @include to-white(); } } } &__editor { @include border-color(); @include background-color('2'); &:focus-within { @include theme-border-color(); } .bili-rich-textarea__inner { @include color('e'); @include background-color(); &::before { @include color('a'); } } } } } .bili-dyn-report { @include background-color('3'); &__title { @include color('e'); } &__message { @include color('a'); } &__remark { &__tip { @include color('a'); } &__content { @include background-color('2'); @include border-color('5'); &:focus-within { @include theme-border-color(); } } } &__button { @include background-color('5'); @include color('e'); @include border-color(); &.confirm { @include theme-background-color(); @include foreground-color(); @include border-color(); } } } .bili-modal { @include background-color('3'); @include color('e'); &__title { @include color('e'); } &__close { @include color('a'); } &__button { @include background-color('5'); @include color('e'); @include border-color(); &.confirm { @include theme-background-color(); @include foreground-color(); @include border-color(); } } } .bili-dyn-banner { @include background-color('4'); @include dyn-container-skeleton(); &__title { @include color('e'); } } .topic-panel { @include background-color('4'); @include dyn-container-skeleton(); &__nav-title { @include color('e'); } .relevant-topic { &::before { @include to-theme('blue'); } &__title { @include color('e'); } &__exposed { @include color('a'); } &-container__item { &:hover { @include background-color('5'); } } } } .bili-dyn-list-loading { @include background-color('4'); } .bili-popover { @include no-shadow(); &, &__arrow { @include border-color('8884'); @include background-color('3'); } &-modal { &__footer::after { @include border-color('5'); } &__button { border: 1px solid; @include color('e'); @include background-color(); @include border-color('8'); &::before { @include border-color(); } &:hover { @include theme-color(); @include theme-border-color(); } &.confirm:not(.disabled) { @include theme-background-color(); @include border-color(); @include foreground-color(); } &.disabled { @include background-color('5'); @include border-color(); @include color('a'); } } } } .bili-awesome-img { &--sleepy { @include background-color('28'); } } .bili-user-profile { &, &__error, &__loading { @include background-color('3'); @include color('e'); } .bili-user-profile-view { &__info { &__uname:not([style*='color:']) { @include color('e'); } &__stat { @include color('a'); span { @include color('e'); } } &__signature { @include color('a'); } &__button { &.follow { @include border-color(); @include theme-background-color(); @include foreground-color(); &.checked { @include background-color('5'); @include color('a'); } } &.chat { @include background-color(); @include border-color('5'); @include color('e'); &:hover { @include theme-border-color(); @include theme-color(); } } } } } } .bili-emoji { @include color('e'); &__list__item { &:hover { @include background-color('5'); } } &__footer { @include background-color(); @include border-color('4'); } &__pkg { &:hover, &.active { @include background-color('5'); } } } .bili-pics-uploader { &__title { @include color('e'); } &__desc { @include color('a'); } } .bili-at-popup { @include background-color('3'); @include color('e'); @include border-color('8884'); &__hint { @include color('e'); } &__group-name { @include color('a'); } &__user { &-name { @include color('e'); } &-fans { @include color('a'); } &--selected { @include background-color('5'); } } } .bili-create-poll { &__opt__title { @include color('e'); } } .bili-input { &, &__inner { @include background-color(); @include color('e'); } &__count { @include color('a'); } &::before { @include border-color('6'); } &:focus-within::before { @include theme-border-color(); } } .bili-radio { &__inner { @include border-color('a'); @include background-color(); &::after { @include theme-background-color(); } } &__label { @include color('e'); } &.checked { .bili-radio__inner { @include theme-border-color(); } } } .bili-select-dropdown { @include background-color('3'); @include theme-shadow(); &__item { @include color('e'); &:hover { @include background-color('5'); } } } .bili-reserve { &__type { @include color('e'); } &__form { &__title { @include color('a'); } } } .bili-time-picker { &__child { &__unit { @include color('a'); } } .bili-input { &__suffix { .bili-picker-input__suffix--up { @include theme-border-color(); } } } } .bili-date-picker { &-input { &__suffix--calendar-active { @include to-theme('blue'); } } &__header { @include border-color('5'); &__label { @include color('a'); } button i { @include border-color('a'); } } &__body { thead { tr th { @include color('a'); } } tbody { tr td { @include color('e'); &.disabled { @include color('5'); } &.active { @include theme-color(); @include theme-border-color(); } } } } } .bili-picker-panel { @include background-color('3'); @include border-color('8884'); .bili-picker { &__option { @include color('e'); &.active { @include theme-color(); } } } } .dyn-vote { @include border-color(); &__cover { @include background-color('2f3436'); @include to-theme('blue'); } &__body { @include background-color('3'); } &__detail { &__title { @include color('e'); } &__desc { @include color('a'); } } &__action { button { @include theme-background-color(); @include foreground-color(); } } } .bili-popup { &__wrap { @include background-color('2'); } &__header { @include border-color('4'); &__title { @include color('e'); } &__close { path { @include fill('a'); } } } } .bili-album { &__watch { &__control { @include background-color('2'); &__option { @include color('e'); i { @include to-white(); } &:hover { @include theme-color(); i { @include to-theme('blue'); } } } } &__content { @include background-color('3'); } &__track { &__item { &::before { @include theme-border-color(); } } } } &__preview__picture { @include background-color(); } }