@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, .van-popper .tips-panel, .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(); }