Bilibili-Evolved/registry/lib/components/style/dark-mode/dark-slice-9.scss
2022-07-09 14:39:18 +08:00

1082 lines
24 KiB
SCSS

@import "./dark-definitions";
@mixin level-badge($levels, $color) {
@each $num in $levels {
.level-#{$num} {
border-color: $color !important;
}
.level-#{$num} .label {
background-color: $color !important;
}
.level-#{$num} .level {
color: $color !important;
}
}
}
@include level-badge(1 2 3 4, #44b0a0);
@include level-badge(5 6 7 8, #74b0f6);
@include level-badge(9 10 11 12, #ba94f2);
.van-popover .level-bar .level-progress {
background-color: #ffae00 !important;
}
#biliAppHomeSetting > div,
.app-layout .manga-navbar,
.manga-navbar .drop-list,
.hover-panel-wrap,
.hover-panel-wrapper,
.van-popover .container,
.container .play-all,
.container .split-line .history-tip,
.lang-change .lang-intro,
#gift-package-item-box .panel-wrapper,
.title-renew-panel .actions,
.user-title-using-cntr .panel,
.international-home {
@include background-color("2");
}
.manga-navbar {
.search-bar .search-bar-bg,
.user-panel .drop-list .logout-btn-container,
.drop-list .more-btn-container {
@include background-color("3");
}
}
.skeleton {
.skeleton-head,
.skeleton-focusbtn,
.skeleton-user-name,
.skeleton-time,
.skeleton-content {
@include background-color("3");
}
}
.yzly-content-ctnr .btn,
.recommend-area-ctnr .rec-area-item,
.container .level-intro,
.van-popover .upload-item:hover,
.container .play-all:hover,
.van-popover .btn-box .btn.reg-btn:hover,
.international-header .bili-banner,
.message-list-content .notify-wrapper .notify-text,
.user-title-using-cntr .user-title-box {
@include background-color("3");
}
.up-info .u-face .fa {
@include background-color("4");
}
.share-step {
.core-style {
@include color("e");
@include border-color("4");
@include background-color();
&:hover,
&:focus-within {
@include background-color();
@include theme-border-color();
}
}
}
.grid-area-ctnr {
.hab-ctnr,
.news-ctnr,
.rank-ctnr {
@include background-color("4");
}
}
.confirmorder-container {
@include background-color("4");
@include no-shadow();
h1 {
@include color("e");
span {
@include color("a");
}
}
.card {
.card-bottom .delete {
@include to-gray();
&:hover {
@include to-theme("pink");
}
}
&.active {
@include theme-border-color();
&::before {
@include to-theme("pink");
}
}
}
.discounts {
@include border-color("5");
.discounts-list p {
@include border-color();
@include background-color("1");
@include color("6");
}
}
.total-container div span {
@include color("e");
&.total {
@include theme-color();
}
}
.confirm-bottom .confirm-paybtn.active {
@include to-theme("pink");
}
.confirm-bottom .service-term {
@include color("a");
.check-icon,
.check-icon.checked {
@include to-theme("pink");
}
.term-content {
@include theme-color();
}
}
}
.eticket-container {
.top-box .header {
@include border-color();
@include background-color("3");
.header-back {
@include to-white();
}
h1 {
@include color("e");
}
&::after {
@include border-color();
}
}
.eticket-info-container {
@include background-color("4");
@include no-shadow();
}
.eticket-info-right {
div {
@include color("e");
}
p {
@include color("a");
}
}
.qrcode-container {
@include background-color("4");
.qrcode-tip {
@include background-color();
@include color("e");
}
.qrcode-container-item .qrcode-hide-tip {
@include color("e");
}
.ticket-code,
.ticket-type {
&,
.color-gray-light {
@include color("a");
}
span {
@include color("e");
}
}
.addr-map {
@include background-color("38");
h1 {
@include color("e");
}
p {
@include color("a");
}
.map-icon {
@include to-theme("pink");
}
}
}
}
.orderdetail-container {
.orderdetail-wrapper {
@include color("a");
.wrapper-ticket {
@include color("e");
.tip {
@include theme-color();
}
}
}
.total-container div span {
@include color("e");
&.total {
@include theme-color();
}
}
}
.s_tag .btn-add,
#biliAppHomeSetting select,
#biliAppHomeSetting input,
.highlight-areas-ctnr .highlight-area-item,
.van-popover .level-bar,
.van-popover .btn-box .btn.reg-btn,
.van-popper-history .view-all,
.share-content .video-card,
.section-block .flip-view {
@include background-color("4");
}
.love-card .header::after {
@include background-color("5");
}
.s_tag .btn-add span {
@include background-color("e");
}
.coin-dialog-mask .coin-operated .mc .mc-box {
@include background-color("f");
}
.card .risk-tip-content {
background-color: #624f27 !important;
}
/* a
{
background-image: none !important;
} */
.manga-navbar .nav-list,
.text-info-ctnr,
.news-ctnr .more-link:hover,
.news-ctnr .more-link,
.news-content,
.live-room-app .aside-area .chat-history-panel-top,
.title-renew-panel .card,
.publish-panel .editor:hover,
.publish-panel .editor:focus,
.publish-panel .editor:focus-within,
.page-container {
@include background-color();
}
.manga-navbar .search-bar .placeholder-list .placeholder-item {
@include color("8");
}
.manga-navbar .data-list .list-container {
.empty-hinter,
.failure-hinter,
.loading-hinter {
@include color("a");
}
}
#biliAppHomeSetting label ~ span,
.video-container .text-area .view-danmaku,
.follow-dialog-wrap .special-tip,
.center-box .line-3 .action-button,
.highlight-areas-ctnr .area-desc,
.rank-item .room-title,
.bb-comment .comment-list .list-item .blacklist-font-color,
.container .split-line .history-tip,
.comment-bilibili-fold .comment-list .list-item .blacklist-font-color,
.list-item .publish-time,
.share-content .video-card .up-info .tip,
.live-panel .title .count,
.video-desc .reprint {
@include color("a");
}
#biliAppHomeSetting {
select,
input,
a {
@include color("e");
}
}
.manga-navbar {
.search-bar .search-input,
.user-info-panel .user-name,
.user-info-panel .info-item,
.user-panel .drop-list .logout-btn-container .logout-button,
.drop-list .more-btn-container .more-button {
@include color("e");
}
}
.medal-ctnr {
.fans-medal-item.special-medal .label .content {
background-color: inherit !important;
}
}
.reply {
.divider {
@include border-color("5");
}
.divider-last {
&::before,
&::after {
@include background-color("5");
}
span {
@include color("a");
}
}
}
.share-success {
.success-text {
@include color("e");
}
.success-link {
@include theme-color();
}
.success-btn {
@include border-color();
@include background-color("4");
@include color("e");
}
}
.center-box {
.line-1 {
.name-field {
@include color("e");
a {
@include color("e");
}
}
.like-item {
@include color("e");
}
}
.line-2 {
.im-dynamic-link {
@include theme-color();
}
}
}
.bb-comment,
.comment-bilibili-fold {
.comment-send .dynamic-repost {
@include color("c");
}
}
.manga-navbar-history-list .action-button,
.manga-navbar-favourite-manga .action-button,
.love-card .header,
.banner-ctnr .banner-title,
.item-ctnr .item-title,
.tab-ctnr .tab-item,
.rank-item .room-anchor,
.area-detail-ctnr .area-title,
.yzly-ctnr .yzly-title,
.recommend-area-ctnr .title-text,
.recommend-area-ctnr .area-name,
.more-ctnr,
.news-ctnr .more-link,
.van-popover .coins .info a,
.van-popper-login .title,
.van-popover .btn-box .btn.reg-btn,
.van-popper-history .view-all,
.van-popper-upload .upload-item .bilifont,
.news-content,
.bilibili-player-video-danmaku-setting-left-block-word,
.share-content .video-card .up-info .name,
.user-title-using-cntr .user-title-box .name,
.bilibili-player-video-control .bilibili-player-video-btn-pagelist,
.bilibili-player-video-control .bilibili-player-video-btn-speed,
.gridview-content-container .song-intro,
.song-padding .song-intro {
@include color("e");
}
.van-popover .vip:hover,
.international-header .mini-upload:hover {
@include color("f");
}
.superChat-card-detail {
.card-item-middle-top .name,
.card-item-top-right {
@include color("e");
}
}
$rankColors: (
#61c05a: #44b0a0,
#5896de: #74b0f6,
#a068f1: #ba94f2,
#ff86b2: #ff86b2,
#ff9f3d: #f6be18,
#1a544b: #f6be18,
#414967: #f6be18,
#2d0855: #f6be18,
);
@each $current, $original in $rankColors {
$rgb: "rgb(" + red($current) + ", " + green($current) + ", " + blue($current) + ")";
.fans-medal-item:not(.medal-guard) {
&[style*="border-color: #{$rgb}"],
&[style*="border-color: #{$current}"] {
border-color: $original !important;
.label {
background-color: $original !important;
}
.fans-medal-label {
@include no-image();
@include color("2");
background-color: $original !important;
}
.level {
color: $original !important;
}
.fans-medal-level {
@include background-color("2");
color: $original !important;
}
}
}
}
.fans-medal-item.medal-guard {
.fans-medal-level {
@include background-color("2");
@include color("e");
}
}
$highlight-map: (
1: #a0a7dc,
2: #c7aade,
3: #deb29c,
4: #afb7e8,
5: #dcbf94,
6: #95c5a8,
);
.highlight-areas-ctnr .highlight-area-item {
@each $nth, $color in $highlight-map {
&:nth-child(#{$nth}) .area-name {
color: $color !important;
}
}
}
.card-content .like-users-panel {
&::before {
@include background-color("6");
}
.users-box {
@include color("e");
.like-users-list {
&,
&:active,
&:link,
&:visited {
@include color("e");
}
}
}
.suffix-text {
@include color("a");
}
}
.live-room-app .aside-area .chat-control-panel {
@include no-image();
}
.charge-container {
@include background-color();
.charge-header-close {
@include to-white();
}
.charge-header-bg {
@include no-image();
}
.charge-header {
.user-link {
@include background-color("3");
@include border-color();
.user-name {
@include color("e");
}
&:hover .user-name {
@include theme-color();
}
}
}
.battery-item {
.battery-bg {
@include background-color("3");
@include border-color();
}
.battery-tool input {
@include background-color();
@include border-color("4");
@include color("e");
}
&.active {
.battery-bg {
@include background-color("4");
@include theme-border-color();
}
.battery-text {
@include theme-color();
}
.battery-tool input {
@include theme-border-color();
}
}
}
.charge-info {
@include color("e");
span {
@include theme-color();
}
}
.split-line {
@include background-color("4");
}
.battery-pay-info {
@include color("e");
span {
@include theme-color();
}
.battery-pay-tips span {
@include color("a");
}
}
.battery-tips {
@include color("a");
a,
a:hover {
@include theme-color();
}
}
.checkbox-bwxr.active {
@include to-theme("blue");
}
.btn-default {
@include theme-background-color("80");
@include foreground-color();
@include border-color();
&:hover {
@include theme-background-color();
}
}
.charge-success-content {
> p {
@include color("e");
span,
i {
@include theme-color();
}
}
> .charge-success-message {
@include theme-border-color();
.charge-success-message-tool span {
@include color("a");
}
}
}
}
.activity-m {
.inside-wrp {
@include border-color("4");
.right .inside-bg::before {
background-image: linear-gradient(90deg, #222, transparent 30%) !important;
}
}
.hinter-msg {
@include color("e");
}
.b-btn-praise {
@include theme-background-color();
@include foreground-color();
&.voted {
@include color("a");
@include border-color();
@include background-color("3");
}
}
}
.bui-switch {
.bui-switch-name {
.bui-switch-reddot {
@include theme-background-color();
}
}
.bui-switch-input {
&:checked + .bui-switch-label .bui-switch-body {
@include theme-background-color();
.bui-switch-dot {
@include theme-fill();
}
}
}
&:hover {
.bui-switch-name {
@include theme-color();
}
}
}
.bilibili-player-video-control .bilibili-player-video-btn-setting-left-more:hover {
&,
.bp-svgicon {
@include theme-color();
@include theme-fill();
}
}
.june-activity-entry .progress-bar {
@include color("a");
@include background-color();
@include border-color("37a29c");
}
.focus-us .text {
@include color("6d757a");
}
.main-wrap {
.container {
@include no-shadow();
}
.bg-circle {
@include background-color("4");
}
.version-date,
.text-wrap {
@include color("a");
}
.info-title {
@include color("e");
}
.info-select {
@include border-color("5");
li {
@include color("e");
&.active {
@include foreground-color();
@include theme-background-color();
}
}
}
}
.channel-sidebar {
@include background-color("2");
@include border-color("4");
.sidebar-search-bar {
@include border-color("3");
.inner-input {
@include color("e");
@include background-color();
}
}
.discovery-panel {
@include border-color("4");
&__title {
@include color("e");
&.discovery-panel__title--active {
@include background-color("3");
}
&:hover {
@include background-color("4");
}
.iconfont {
@include color("e");
}
}
.content-item {
&__name {
@include color("e");
}
&__count {
@include color("a");
}
&.content-item--active {
@include background-color("3");
}
&:hover {
@include background-color("4");
}
}
&__toggle {
@include background-color();
@include color("a");
}
}
.subscribe-panel {
@include background-color();
&__title {
.text {
@include color("e");
}
.count,
.btn {
@include color("a");
}
}
&__login {
.hint {
@include color("a");
}
.login-btn {
@include theme-background-color();
@include foreground-color();
}
}
.subscribe-item--active {
@include background-color("3");
}
.subscribe-item {
&:hover {
@include background-color("4");
}
.cover {
@include background-color("4");
}
.name {
@include color("e");
}
}
}
&::-webkit-scrollbar {
@include background-color();
}
}
.discovery-container {
.type-header {
.header-info {
.title {
@include color("e");
}
.count {
@include color("a");
}
}
}
.slide-channel-panel {
.arrow-btn .iconfont {
@include color("a");
}
.slide {
.mini-channel-card {
@include background-color("3");
@include color("e");
.cover {
@include background-color("28");
}
.label {
@include color("a");
}
}
}
}
.hot-channel-panel {
.change-btn {
@include border-color();
@include color("e");
@include background-color("3");
img {
@include to-white();
}
}
.list {
.card {
@include background-color();
.title {
@include color("e");
}
}
}
}
}
.detail-page-container {
.detail-banner {
&:not([style*="background-color"]) {
@include background-color("4");
}
.mini-channel-card .cover {
@include background-color();
}
#app & .relative-panel .header {
@include background-color();
}
&-title {
.cover::before {
@include background-color();
}
}
}
.detail-panels {
.van-tabs-bar::after {
@include background-color();
}
.van-tabs-wrap .van-tabs-tab:not(.van-tabs-tab-active) {
@include color("e");
}
.year-selector,
.play-selector {
&__item {
@include background-color();
&:not([style*="border"]) {
@include color("a");
@include border-color("4");
}
}
}
.rank-card-panel {
.header {
.title {
@include color("e");
}
.desc {
@include color("a");
}
}
.toggle {
> span {
@include background-color("2");
@include color("a");
}
&::before {
@include background-color("4");
}
}
}
}
}
.category-container {
.inner-container {
&__header {
.title {
@include color("e");
}
.count {
@include color("a");
}
}
}
}
.detail-page-container,
.discovery-container,
.category-container {
@include background-color("2");
&::-webkit-scrollbar-track {
@include border-color();
}
.video-card {
&__content {
.cover-picture {
@include background-color("4");
}
}
.video-name {
@include color("e");
&:hover {
@include theme-color();
}
}
.up-name {
@include color("a");
&:hover {
@include theme-color();
}
}
}
.channel-list-preview {
.header-info {
.title {
@include color("e");
}
.header-desc {
@include color("a");
}
}
.channel-btns {
> [class*="btn"] {
@include theme-border-color();
@include theme-color();
}
}
}
@include back-top-btn();
}
.international-home .contact-help {
@include color("9");
@include background-color("3");
@include border-color();
box-shadow: 0 6px 10px 0 #111 !important;
}
.bili-header-m,
.international-header,
.van-popover {
.mini-type .nav-search {
#nav_searchform {
@include background-color("3");
@include border-color();
.nav-search-keyword {
@include color("a");
&:focus {
@include color("e");
}
}
}
.nav-search-btn {
@include background-color("4");
.nav-search-submit {
@include color("e");
}
&:hover .nav-search-submit {
@include theme-color();
}
}
}
}
.most-viewed-panel {
> .icon {
@include fill("6");
&.active {
@include fill("a");
&:hover {
@include theme-fill();
}
}
}
.most-viewed-item {
.section {
.avatar {
@include border-color("4");
box-shadow: 0 0 0 1px transparent !important;
&.active {
box-shadow: 0 0 0 1px var(--theme-color) !important;
}
}
.icon-all {
@include theme-background-color("30");
@include border-color("4");
box-shadow: 0 0 0 1px transparent !important;
&.active {
box-shadow: 0 0 0 1px var(--theme-color) !important;
}
.icon {
@include theme-fill();
}
}
}
.icon-bg-1 {
.icon-bg-2 {
@include theme-background-color("10");
@include border-color("4");
}
.icon {
@include theme-fill();
}
.avatar {
@include background-color("2");
@include border-color("4");
}
&.active {
@include theme-background-color();
.icon-bg-2 {
background-color: rgba(64, 64, 64, 0.875) !important;
}
}
}
}
}
.live-up .live-up-img {
box-shadow: 0 0 0 1px var(--theme-color) !important;
@include border-color("4");
@include background-color("2");
}
.bilibili-search-suggest,
.bilibili-search-history {
@include background-color("3");
@include border-color();
}
.module-game .rule .detail .content {
@include color("0");
}
#biliAppHomeSetting {
select,
input {
@include border-color();
border-radius: 4px;
}
}
.hover-panel-wrap,
.recommend-area-ctnr .rec-area-item,
.hover-panel-wrapper,
.van-popper-login .btn-box .btn,
.van-popper-history .view-all,
.at-popup,
.chat-popups-section .draw-full-ctnr,
#gift-package-item-box .panel-wrapper::before,
.title-renew-panel .actions {
@include border-color();
}
.wide-members .avatar {
@include border-color("3");
}
.manga-navbar .search-bar .confirm-btn .search-icon,
.container .level-intro .svg-icon {
@include to-white();
}
.side-bar-btn .size-bar-text {
filter: brightness(0.6) invert(1) hue-rotate(180deg) !important;
text-shadow: 0 0 0px;
}
#link-message-container .config {
@include no-shadow();
}
.confirmorder-container .confirm-bottom .confirm-paybtn.active,
.whole-detail-info-wrapper .product-buy-wrapper .unsale-btn {
box-shadow: 0 3px 4px 0 #6e4752 !important;
}
.app-layout .manga-navbar {
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0px !important;
}
.highlight-areas-ctnr .highlight-area-item.hover {
box-shadow: 0 7px 11px 0 rgba(0, 0, 0, 0.18) !important;
}
.hover-panel-wrap {
box-shadow: 0 13px 20px 0 rgba(0, 0, 0, 0.22) !important;
}
.van-popper .popper__arrow {
@include hide();
}
.nav-tab-bar .tab-item[data-tab-id="1"]:not(.on)::before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/OVAAAD00lEQVRYw+2YbWhVdRzHb2aWsILo4UVC5Pd3drfdIZNW1sRod7eW1gSxLIxo5aWgB1GHbkNaDILoAaJYtKQNRDHQTcp6McQoISusXuSLZTXXICVoa3Nmtu0+nE8vdtzd1T3c7dzzzu/31b2X+//w+//+5/y+54RCVzSLKq+zqD1t9driPB4uCxjm3G+f6ILI2E7bu+ElgcB0u3UJIXcd23mT19jMqnHsiF6vXJjv2iqtX5S5HzDAZHWzFbnCjjq35BFnK21UxBlmKv3ESlfoRKQgf5vZL17F9QBDfMkRkpOQf1ON0Of5qm+/iHu4f2jEQYhDWVWeptwVzmN5wIVXiFL3LwB6qEAYMRou6SXsR1jvhqv919cq3gIgyVpEDT9P2UmXGMKiPnFcpT/FLwC0Ie5hiOn0DsJafAKLbhMrvAUfRbQxvX5A2Dd+O3i3WOcteC/ixxmAZxDq89vBKvGUt+Au6iYujak0jNCg3ztMRDxEbvoNYd1+gTfILXHHcgJ2IazL/2XxnTiSE3AbwqnzD9whanPA9RNxRdFS38BlN2pQfDUrsB5hB/Jz894qyt0/ZsQdQNhoofICbF6gz0SUnmlxnYRdYc/kbR5GCnRcLHP3kboMNkAjQjjNeY5O2itElBa6GfNG1VGaiLhCI1ab/0wTEzYRnpYTyUSpzqKiAEKU7RJvJz5idQZ1VsetySkNJo0utAHxKwCfIuzrisXBJtJqUe0dk+cQeiHgCKw28Z53VIpRym4NFFd+jQbFKQAOIuyLgOuzNWKNt6GbEPZ80MDd4n1vyFrCkuGbA8VFFums6Ju4Z+pwwPUV1ogab0NrEc6mvCPCZc5L1qp2zz1iOTFixHBQWnvVrnZrceJ5mQ6RAmuVO/kZcHrbmL3iO2vbx6KUnYl9dNBBB7tpyHKL9/0etiSUFtbkD7dalLl9Oea0b91CLGGOH+AesYonc/ZdiKU75/2cZMdy691lvTzo2Dwyto2JZTzAxjlU+ASVlCBsoDg8t+qW2DnR9N8Ic9cQ8YSw3sii2UbOtU6FnnXiTtyJO4dEufvycD3zcR02IuzD8bWsquj6qWq6T7/Pr2M5eEgbL+2YY+dFdbqBRuqTm89FU9FkllNV6ap0VTrmXnTm0/gvWf9IRVPRVHVy2/kdifrU+qSQW/hg9kDtFNtnfPjyo1aETk7CVSzWvw6DBKcKRGFJ5risFesJUg0INWZFvpZAgYcRdiwDPCO6AwVeoBilim8a39BScSen6A3Uj4wKZ0MoFAqFiu/Idd759sMXD82LOqGTAft7543mBVfeoAeg/wFlFeKImou+wAAAAABJRU5ErkJggg==") !important;
}
.aside-item.active .item-border,
.aside-item:hover .item-border {
@include theme-border-color();
}
.aside-item::after {
border-right-color: var(--theme-color) !important;
}
#bilibili_pbp,
#bilibili_pbp_canvas {
@include to-theme("blue");
}
.interact-dialog .btn,
.rookie-guide .close-button,
#biliAppHomeSetting button,
.van-popover .btn-box .btn,
.van-popper-history .view-all:hover,
.bui-button.bui-button-gray:hover,
.live-up .live-up-img-box,
.shortcuts-ctnr .hinter,
.shortcuts-ctnr .num-hinter,
.user-panel-ctnr .msg-hinter,
.user-panel-ctnr .msg-count {
@include theme-background-color();
}
#biliAppHomeSetting h2,
.video-desc .subtitle a,
.tab-ctnr .tab-item:hover,
.tab-ctnr .tab-item.activated,
.more-ctnr:hover,
.news-ctnr .more-link:hover,
.van-popover .coins .info a:hover,
.van-popper-upload .upload-item:hover .bilifont,
.bilibili-search-suggest .suggest-item .suggest_high_light,
.new-topic-panel .tag-item .content:hover,
.bilibili-player-video-toast-item .video-float-hint-btn.hint-red,
.bilibili-player-video-btn-speed-menu-list.bilibili-player-active {
@include theme-color();
}
.interact-dialog .btn,
.rookie-guide .close-button,
#biliAppHomeSetting button,
.van-popover .btn-box .btn,
.van-popper-history .view-all:hover,
.bui-button.bui-button-gray:hover,
.user-panel-ctnr .msg-count {
@include foreground-color();
}