Bilibili-Evolved/registry/lib/components/style/dark-mode/dark-slice-15.scss
2023-04-08 23:54:27 +08:00

1144 lines
23 KiB
SCSS

@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");
}
}