Bilibili-Evolved/registry/lib/components/style/dark-mode/dark-slice-15.scss
2021-11-13 13:55:37 +08:00

997 lines
20 KiB
SCSS

@import "./dark-definitions";
.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();
&: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");
}
}
.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();
.bpx-player-dm-setting:hover {
@include theme-fill();
}
.bpx-player-video-btn-dm:hover {
@include theme-fill();
}
.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-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();
}
}