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

1107 lines
23 KiB
SCSS

@import "./dark-definitions";
#app {
.header {
.left-block {
.logo {
@include theme-color();
}
.main-site {
@include color("e");
}
}
.right-block {
@include color("e");
.i-frame::before {
@include background-color();
}
}
}
.cc-nav-wrp {
@include background-color();
.slider-bar .bar-item .bcc-nav-slider {
&-sub-menu {
& > span,
a {
@include color("e");
}
.router {
&-item.active {
@include theme-color();
i {
@include theme-color();
}
}
&_wrap {
i {
@include color("a");
}
&.active {
@include theme-color();
i {
@include theme-color();
}
}
}
}
&:hover {
@include background();
}
&__group {
.router-item,
a {
@include color("a");
}
}
}
&-item__wrap {
.router {
&-item.active {
@include theme-color();
i {
@include theme-color();
}
}
&_wrap {
i {
@include color("a");
}
}
}
&:hover {
@include background();
}
}
}
}
.cc-body {
@include background-color();
.message-notice_wrap .tips-item_wrap {
@include background-color("4");
}
.chief-recommend-module .carousel-box,
.data-card {
@include background-color();
}
.new-calendar-wrap {
@include background-color("2");
.calendarEntry_box .calendarEntry_content {
@include color("e");
.luck_wrap .luck_title {
@include theme-background-color();
@include foreground-color();
}
}
.headerClass {
@include color("e");
}
.calendar-header {
@include border-color("4");
}
.calendar-body {
.date-wrap {
@include color("a");
.wrap-content .today {
@include theme-color();
}
}
.date-desc_wrap {
@include background();
.item-desc_card {
@include background-color("3");
.item-desc_title .item-title {
@include color("e");
}
.item-desc_body .item-desc__content {
@include color("e");
@include border-color();
.nothing-wrap {
@include background();
.release-link {
@include theme-color();
}
}
}
}
}
.calendar-box {
@include border-color();
}
}
}
.notice_wrap {
@include background-color("4");
.notice_title .notice-txt {
@include color("e");
}
.notice_body .hot-item {
.item-left p,
.item-right {
@include color("a");
}
}
}
.academy-wrap {
@include background-color();
.header .academy-tag {
@include color("e");
}
.content {
.tabs .tabs__header {
@include border-color("4");
.tabs__header-item {
@include color("a");
&.is-active {
@include theme-color();
&:after {
@include theme-background-color();
}
}
}
}
.list-item {
.title {
@include color("e");
}
.view {
@include color("a");
}
}
}
}
.side-utils .feedback-container {
.item-desc {
@include color("e");
}
.bcc-popover {
@include background-color("4");
@include color("e");
@include border-color();
box-shadow: 0 7px 11px 0 rgba(0, 0, 0, 0.18) !important;
.help-wrap li {
.title {
@include color("e");
.bcc-icon-ic_enter {
@include color("e");
}
}
&:hover {
@include background-color("3");
}
}
&[x-placement^="left"] .popper__arrow {
@include border-color();
&:after {
@include border-color();
}
}
}
}
.dc-section1-body {
@include background-color();
.dc-section-item1_title_name p {
@include color("e");
}
}
.lab-wrap {
@include background-color();
.lab-guide img {
filter: brightness(0.5) contrast(3) !important;
}
.lab-title {
@include color("a");
}
.lab-item {
@include border-color("4");
.lab-item-header {
.item-info .item-title {
.title {
@include color("e");
}
.desc {
@include color("a");
}
}
.item-operate span {
@include color("e");
}
}
.lab-item-content {
@include background-color();
.divide-line {
@include background-color("4");
}
.content-detail {
p {
@include color("e");
}
.detail-desc,
.feedback {
@include color("a");
a {
@include theme-color();
}
}
.carousel-wrapper .panel .pic .card-img img {
filter: brightness(0.5) contrast(3) !important;
}
}
}
}
}
.cc-article-wrp .article {
&-header .search-wrp {
@include border-color();
}
&-card {
.meta-status .status {
@include theme-color();
}
.select-box .select-item.is-disabled {
@include background-color();
}
}
}
}
.detail {
@include background-color();
}
.category {
@include background-color("4");
}
}
.el-popover {
@include background-color("2");
@include border-color();
&.header-popover-download .link {
div p:first-child {
@include color("e");
}
&:hover {
@include background-color("4");
}
}
}
.round-corner {
.international-header .mini-type {
@include background-color("2");
box-shadow: rgba(0, 0, 0, 0.4) 0 2px 10px 1px !important;
.nav-link .nav-link-ul {
.nav-link-item .link .bili-Navbar_logo,
&.mini .bili-icon_dingdao_xiazaiapp {
@include color("e");
}
}
.nav-user-center .user-con .item .name {
@include color("e");
}
}
.channel-menu-mini {
@include background-color("2");
box-shadow: rgba(0, 0, 0, 0.3) 0 4px 8px 0px !important;
.r-box {
@include border-color("4");
}
.box a:hover {
@include background-color("0001");
}
}
.van-popper {
&-avatar {
.nickname:not([style*="rgb(251, 114, 153)"]),
.level-info .grade {
@include color("e");
}
.coins,
.counts {
@include border-color("4");
}
.coins .contact {
.email,
.phone {
&-icon--bind {
@include theme-color();
}
}
}
.count-item .item {
&-key,
&-value {
color: inherit !important;
}
}
.links {
@include border-color("4");
.link-title {
@include color("e");
}
.link-item:hover {
@include background-color("3");
}
}
}
&-favorite {
.tab-item--normal,
.video-info .line-2 {
@include color("e");
}
.tab-item--active {
@include theme-background-color();
@include foreground-color();
}
.tabs-panel {
@include border-color("4");
}
.video-card:hover,
.tab-item--normal:hover {
@include background-color("3");
}
.play-all {
@include background-color();
@include border-color("4");
}
}
&-history {
.tab-header {
@include border-color("4");
.tab-item {
@include color("e");
&--active {
@include theme-background-color();
@include foreground-color();
}
}
}
.panel {
.video-card:hover {
@include background-color("3");
}
.progress {
@include theme-background-color();
}
.video-info {
span.date {
@include background-color();
}
.line-2 {
@include color("e");
}
}
}
}
}
.page-container {
@include background-color();
.bangumi-spoiler-container {
@include background-color("4");
@include color("e");
}
.tag-container {
.tag-item {
span {
@include color("e");
}
.tag-border .tag-border-inner {
display: none;
}
.tag-content {
@include background-color("4");
@include border-color();
}
&:hover .tag-content {
@include theme-background-color();
@include foreground-color();
}
}
}
.publish-panel {
.core-style {
@include background-color();
@include color("e");
@include border-color();
&:hover,
&:focus-within,
&:active {
@include theme-border-color();
}
}
.publish-btn {
@include background-color("2");
@include color("e");
&:hover {
@include theme-background-color();
@include foreground-color();
}
}
}
}
.container-body {
.b-head.topic {
@include border-color();
}
.art_list li {
@include background-color();
@include border-color();
h2 a {
@include color("e");
}
.info,
.artInfo {
@include color("a");
}
}
}
}
.canary-container {
.file-list-v2-container {
.file-title h1,
.normal-v2-container .normal-title-wrp > h1,
.fans-dynamic-v2-container .fans-dynamic-v2-title-wrp > h1 {
@include color("e");
}
.upload-v2-sortable {
&-chosen,
&-ghost {
@include background-color("4");
}
}
.input-box-v2-3-container {
@include background-color("4");
@include border-color();
& > input {
@include color("e");
}
&.input-box-v2-3-active,
&:hover {
@include theme-border-color();
}
}
}
.file-content-v2-container {
.normal-v2-container .normal-title-wrp > h1 {
@include color("e");
}
.cover-v2-detail-wrp .cover-v2-selector {
@include border-color("4");
.cover-v2-selector-deg {
@include background-color("4");
@include border-color();
}
}
.cover-preview-modal-container .cover-preview-modal-content {
@include background-color("4");
.cover-preview-modal-head {
@include color("e");
@include border-color();
}
.cover-preview-modal-body .cover-preview-modal-body-item-selected {
@include theme-border-color();
&-icon {
@include to-theme("blue");
}
}
.cover-preview-modal-foot div:first-child {
@include theme-background-color();
@include foreground-color();
}
}
}
.upload-step-3-container-v2 {
@include background-color();
.step-controller-v2-container .step-ctrl {
&-complete-content,
&-wait-content {
@include color("a");
}
&-active-content {
@include color("e");
}
&-complete-icon {
@include theme-color();
@include theme-border-color();
}
&-line-active {
@include theme-background-color();
}
&-active-icon {
@include theme-background-color();
@include foreground-color();
}
&-line.step-ctrl-line-wait {
@include background-color("4");
}
&-wait-icon {
@include color("4");
@include border-color("4");
}
}
.upload-3-v2-success {
&-split {
@include background-color("4");
}
&-go-url a {
@include background-color("4");
@include color("e");
@include border-color();
&:hover {
@include theme-background-color();
@include foreground-color();
@include border-color();
}
}
&-hint-2 {
@include color("a");
}
}
.upload-3-v2-follow {
@include background-color();
&-title,
&-name {
@include color("a");
}
&-btn.follow {
@include theme-background-color();
@include foreground-color();
}
}
}
}
.room-feed .tabs .item > span:after {
@include theme-background-color();
}
.customer-service {
.self-panel .scroll-container .item > span,
.panel-title {
@include color("e");
}
.customer-card {
@include border-color("4");
.card-header {
@include background-color("4");
.name {
@include color("e");
}
}
.card-content > a {
@include color("a");
&:hover {
@include theme-color();
}
}
}
.guess-panel {
.panel-header .title {
@include color("e");
}
.question-container {
@include border-color("4");
.title {
.circle {
@include theme-background-color();
}
& > p {
@include color("e");
}
}
.answer {
@include color("a");
& > a {
@include theme-color();
}
}
}
}
.other-panel .card {
.title {
@include color("e");
@include border-color();
}
.detail {
&-text,
p {
@include color("e");
& > a {
@include theme-color();
}
}
.ask-btn {
@include theme-background-color();
@include foreground-color();
}
}
}
}
#app-body {
#player-and-interaction-area {
#head-info,
.gift-control-panel,
.aside-area {
@include background-color("4");
}
#gift-control-area {
@include border-color();
}
}
#section-ctnr .header {
@include background-color();
}
}
.imagesbox .boost-slider-wrap .boost-slider-border {
@include theme-border-color();
}
.superchat-content {
@include background-color("4");
.home-page {
background-image: none !important;
.introduction {
@include color("e");
&:before {
@include to-white();
}
}
.close {
@include to-white();
}
.superchat-textarea {
.base-info {
@include background-color();
.duration-tip {
@include color("e");
.time-icon {
@include to-white();
}
}
}
.user-info {
@include color("e");
}
.text-ctnr,
.textarea,
.textarea:hover {
@include background-color();
}
}
.trans-btn {
@include theme-color();
@include theme-border-color();
}
.price-options {
.price-option {
@include color("e");
&.selected {
@include theme-color();
@include theme-border-color();
}
}
.other {
@include color("e");
.input {
@include background-color();
@include color("e");
}
}
}
}
.buy-btn {
@include theme-background-color();
@include foreground-color();
}
.super-rank {
@include background-color("4");
.top {
.header-title {
@include color("e");
}
.nav {
@include background-color("2");
.nav-item {
&-1,
&-2 {
@include color("e");
&.active {
@include theme-background-color();
@include foreground-color();
}
}
}
}
}
.list-box {
.empty>.box {
@include background-color();
.h2>.special {
@include theme-color();
}
}
.message-item {
&-info {
.rank-icon>.num {
@include background-color("2");
@include color("e");
}
&>.user-info .publish-date,
&>.amount {
@include color("a");
}
}
&-context {
@include color("e");
}
}
.anchor-item {
&-info {
&>.user-info {
.amount,
.room,
.message-info {
@include color("a");
}
.user-name {
@include color("e");
}
}
.rank-icon>.num {
@include background-color("2");
@include color("e");
}
}
&-assists>.sub-tit {
@include color("e");
}
}
.keep-text {
@include color("a");
}
}
.on-list-anchor>.right {
@include theme-color();
}
.not-list {
&>.left {
&>.rank,
&>.aside {
@include color("a");
.special {
@include theme-color();
}
}
}
&>.right {
@include theme-color();
}
}
}
}
.rank-item {
@include border-color("4");
.other {
@include border-color("4");
span {
@include color("a");
}
.other-link {
.title {
@include color("e");
}
&:hover .title {
@include theme-color();
}
}
}
}
.card-content .tag {
@include theme-background-color();
@include foreground-color();
}
.wide-members .avatar {
&-list {
i {
@include background-color("2");
&:hover {
@include theme-color();
}
}
.van-icon-general {
&_back_s:after {
background: linear-gradient(-270deg,#222,hsla(0,0%,100%,0)) !important;
}
&_enter_s:after {
background: linear-gradient(270deg,#222,hsla(0,0%,100%,0)) !important;
}
}
}
.tag {
@include background-color("2");
@include color("e");
@include theme-border-color();
}
.up-name {
@include color("e");
}
}
.router-view {
.list .top {
@include background-color("3");
}
.config {
@include background-color("4");
@include color("e");
.css-o1815x {
@include to-theme("blue");
}
.config-item {
&:not(:first-child)::before {
@include background-color("5");
}
.radio-selector {
@include color("e");
}
}
}
}
.message-list {
.share-card .footer {
@include color("a");
@include border-color("4");
}
.msg-push {
@include background-color("2");
hr {
@include background-color("4");
}
}
}
.live-skin-coloration-area .rank-cntr {
.daily-text {
@include color("e");
}
}
.guard-rank-cntr .rank-cntr .btn-box {
&.btn-hundreds {
display: none !important;
}
.daily-record-title {
@include background-color("2");
@include color("e");
}
.l-line,
.r-line {
@include border-color();
}
.guard-daily-record .daily-text {
@include color("e");
}
}
.live-record-list {
.live-record-list-cntr {
@include background-color("4");
@include border-color();
.record-title {
@include color("e");
}
.pagination {
@include background-color();
.jumping-ctnr .jumping-input {
@include background-color("2");
}
}
}
}
.bp-svg-icon.taobao-link {
@include to-theme("blue");
}
.home-page {
.fixed-bg,
.fixed-bg-cover {
background-image: none !important;
}
}
.cinema-movie-wrapper {
.title {
@include color("e");
}
.preview-item {
.title:hover {
@include theme-color();
}
.cover {
@include background();
}
}
div[name="web_tag"] {
a {
@include color("e");
&:hover {
@include theme-color();
}
}
}
div[name="web_rank"] {
.more {
@at-root #icon_操作_前往 {
@include fill("e");
}
}
}
div[name="web_index"] {
.card {
z-index: 0;
}
}
.coming-soon-wrapper .mine {
@include color("e");
@include background-color("4");
@include border-color();
&:hover {
@include background-color("3");
}
}
.card-wrapper .card-item {
.time-line-wrapper.empty .date {
@include color("a");
}
.follow-btn.followed {
@include background-color("3");
@include color("a");
}
.title:hover {
@include theme-color();
}
}
.banner-wrapper .side-list .side-item.selected:hover .title {
@include theme-color();
}
.filter-wrapper .filter-block {
.filter-block-title span {
@include color("e");
}
.filter-list a.filter-item {
@include color("a");
&:hover {
@include theme-color();
}
}
}
.hot-recom-wrapper {
.hot-title {
@include color("e");
}
.hot-trailer .player-list {
@include background-color("4");
.list-count {
@include color("a");
.num {
@include theme-color();
}
}
.list-item-wrap .list-item {
.list-desc {
@include color("e");
}
&.selected {
@include background-color("2");
.list-cover {
@include theme-border-color();
&:after {
@include to-theme("pink");
}
}
}
}
}
}
.activity-wrap .title {
@include color("e");
}
.pindan-wrap,
.rank-wrap {
.slider-contro span {
@include background-color("4");
}
.head-section .title,
.preview-item .text .title {
@include color("e");
}
}
.hot-wrapper {
.title,
.right .recent-item a {
@include color("e");
}
}
.rank-wrap .head-section .more span {
@include foreground-color();
@include border-color();
&:hover {
@include theme-background-color();
}
}
}
.popup-card {
@include background();
.info {
@include background-color("4");
.title {
@include color("e");
&:hover {
@include theme-color();
}
}
.style .style-item {
@include background-color("2");
@include color("a");
}
.time {
@include color("a");
.split-line {
@include background-color("a");
}
}
.desc {
@include color("a");
}
.action-group .follow-btn {
@include theme-border-color();
.follow-icon g#方案1 {
@include fill("e");
}
&.followed {
@include background-color("3");
@include border-color("3");
@include color("a");
}
}
}
}
.live-up {
.live-detail {
.up-name {
@include color("e");
}
.live-name {
@include color("a");
}
}
.live-up-img {
@include border-color();
box-shadow: 0 0 0 1px var(--theme-color) !important;
}
}
.most-viewed-panel {
@include background-color("4");
.list-content .most-viewed-item {
.name {
@include color("a");
&.active {
@include theme-color();
}
}
&:hover .name {
@include theme-color();
}
.section .avatar .red-dot {
@include theme-background-color();
@include border-color("4");
}
}
}