mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
973 lines
18 KiB
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();
|
|
}
|
|
}
|