Bilibili-Evolved/registry/lib/components/style/dark-mode/dark-slice-16.scss

973 lines
18 KiB
SCSS

@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-item,
.bili-opus-view {
~ .bili-tabs {
.bili-tabs__header {
@include background-color('4');
@include border-color('5');
}
.bili-tabs__nav__item {
@include color('e');
&.is-active,
&:hover {
@include theme-color();
}
}
// .bili-tabs__content {
// .comment-wrap {
// @include background-color();
// }
// }
}
}
.reaction-list {
.reaction-item {
box-shadow: inset 0 -0.5px 0 0 #666 !important;
}
}
.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();
}
}