Merge pull request #1716 from LonelySteve/dark-style

dark style
This commit is contained in:
Grant Howard 2021-04-10 11:37:01 +08:00 committed by GitHub
commit 87b5657eee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 273 additions and 15 deletions

View File

@ -59,6 +59,15 @@
@include set-theme-color("stroke", $level);
}
$vip-color: "FB7299";
@mixin vip-color() {
@include set-color("color", $vip-color);
}
@mixin vip-background-color() {
@include set-color("background-color", $vip-color);
}
@mixin foreground-background-color($level: "") {
@include set-foreground-color("background-color", $level);
}

View File

@ -886,7 +886,6 @@ div.con header,
.wrapper .modal-body .choice-wrp .battery-desp input,
.wrapper .elec-main-title,
.wrapper .elec-sub-title,
.paging-box .current,
.paging-box .dian,
.paging-box .next,
.paging-box .prev,
@ -1822,8 +1821,8 @@ a.s-btn:hover,
.live-panel .more-button .more:hover::after,
.coin-operated-m .mc-box.on,
.tab-list .tb-item.active,
.up-info-holder .fixed-box .follow-btn-holder .follow-btn,
.up-info-holder .fixed-box .follow-btn-holder .follow-btn:hover,
.up-info-holder .fixed-box .follow-btn-holder .follow-btn:not(.followed),
.up-info-holder .fixed-box .follow-btn-holder .follow-btn:not(.followed):hover,
.right-side-bar .to-comment:hover,
.right-side-bar .to-top:hover,
.btn-submit,
@ -1994,6 +1993,7 @@ li.tag:hover,
{
background-color: var(--theme-color) !important;
}
.paging-box .current,
p.t:hover,
p.ri-title:hover,
div.r-text>.t:hover,

View File

@ -41,17 +41,20 @@
.multi-page .cur-list .list-box li .duration {
@include color("a");
}
.interact-dialog .con::before {
content: "";
background: url(https://s1.hdslb.com/bfs/static/jinkela/video/asserts/interact-dialog.png);
filter: invert(1);
background-size: 242px 198px;
width: 242px;
height: 198px;
display: block;
position: absolute;
background-repeat: no-repeat;
clip-path: inset(60% 35% 0 35%);
.interact-dialog .dialog-body {
@include background-color("2");
&::before {
content: "";
background: url(https://s1.hdslb.com/bfs/static/jinkela/video/asserts/interact-dialog.png);
filter: invert(1);
background-size: 242px 198px;
width: 242px;
height: 198px;
display: block;
position: absolute;
background-repeat: no-repeat;
clip-path: inset(60% 35% 0 35%);
}
}
#app {
.channel-sidebar {

View File

@ -210,7 +210,7 @@
@include theme-stroke();
}
&-playlist-item-img {
@include no-image
@include no-image;
}
}
.remd-video-card .card-box .pic-box {
@ -223,3 +223,249 @@
.video-info .video-title .tit {
@include color("e");
}
a {
&.name[style*="color:#FB7299"],
&.name[style*="color: #FB7299"],
&.name[style*="color: rgb(251, 114, 153)"],
&.username.is_vip[style*="color:#FB7299"],
&.c-pointer[style*="color: rgb(251, 114, 153)"] {
@include vip-color();
}
}
.bili-search {
.video-item.list {
@include set-color("border-bottom-color", "4");
.headline {
.type {
@include border-color();
@include background-color("4");
@include color("e");
}
.title {
@include color("e");
&:hover {
@include theme-color();
}
}
}
.des {
@include color("a");
}
}
}
.main-container .tool-bar {
.watch-info {
> span {
@include color("a");
}
#watch-together-icon-1 {
@include fill("a");
}
&:hover {
> span {
@include theme-color();
}
#watch-together-icon-1 {
@include theme-fill();
}
}
.watch-more {
@include no-shadow();
@include background-color("4");
@include border-color();
.title {
@include color("e");
}
}
}
}
.error-container .error-404 img {
@include to-theme("blue");
}
.popular-video-container {
@include back-top-btn();
}
.m-layer .b-btn-cancel {
@include color("e");
&:hover {
@include theme-color();
}
}
.follow-btn.followed {
@include border-color("");
@include background-color("4");
@include color("a");
}
#article-list-index .index-holder {
.article-item:not(.on) {
.point {
@include background-color("6");
}
}
.article-item {
.title {
@include color("e");
&:hover {
@include theme-color();
}
}
}
}
.main-container .bottom-brief-introduction {
@include background-color("2");
}
.fullscreen-loading .tv-bg + .container {
@include background-color();
.retry-btn {
@include theme-background-color();
}
}
[style*="color: #00A1D6"] {
@include theme-color();
}
.main-show-c {
.film-change-page {
.search {
.append {
@include theme-background-color();
}
}
.list-container {
.season-item {
.change-btn {
@include theme-border-color();
@include theme-color();
&:hover {
@include theme-background-color();
@include color("f");
}
}
}
}
}
.plp-r {
.tab {
.title-active {
@include theme-color();
}
}
.chat-container {
.user-guide {
.top-c {
.l .switch-c.checked {
@include theme-background-color();
}
.r:hover {
@include theme-color();
svg g g {
@include theme-fill();
}
}
}
.user-share {
@include background-color("2");
.share-content {
@include background-color("2");
.left {
.share-btn {
&:hover {
span,
i {
@include theme-color();
}
}
span,
i {
@include color("a");
}
}
.copy-action {
.copy-title {
@include color("a");
}
input[type="text"] {
@include background-color();
@include color("e");
@include border-color("4");
}
.copy-btn {
@include theme-background-color();
}
}
}
.right {
::after {
@include background-color("6");
}
}
}
}
}
.input-area {
.text-c {
@include set-theme-color("caret-color");
}
.input-c.border {
@include theme-border-color();
}
}
.static-popup {
@include border-color();
@include background-color("4");
.emoji {
@include background-color("4");
&:hover {
@include background-color("2");
}
}
}
}
.play-list {
.header {
.change-film {
@include theme-background-color();
}
}
.other-item {
.current-play {
@include to-theme("blue");
}
}
}
}
}
#user-card-container {
@include theme-border-color();
@include background-color("4");
.face-cc {
@include border-color("4");
}
.info .name.vip-red-name {
@include vip-color();
}
}
.dialog-base-wrapper .popup-content .ogv-dialog-confirm {
@include background-color("4");
.close .icon:hover {
@include theme-color();
svg path {
@include theme-fill();
}
}
.title {
@include set-color("border-bottom-color", "6");
}
.short-msg .content {
@include color("a");
}
.bottom-oper {
.btn.cancel {
@include border-color();
@include background-color("6");
@include color("e");
}
.btn.submit {
@include theme-background-color();
}
}
}