mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-17 13:48:02 +00:00
feat: dark mode support (#53)
This commit is contained in:
qier222
GitHub
parent
4e482941ed
commit
b655c59761
26 changed files with 301 additions and 181 deletions
|
|
@ -19,7 +19,7 @@ button {
|
|||
border-radius: 25%;
|
||||
transition: 0.2s;
|
||||
.svg-icon {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ button {
|
|||
margin-left: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: #f5f5f7;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@ button {
|
|||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
margin-right: 12px;
|
||||
transition: 0.2s;
|
||||
.svg-icon {
|
||||
|
|
@ -70,8 +70,8 @@ button {
|
|||
}
|
||||
}
|
||||
button.grey {
|
||||
background-color: #f5f5f7;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--color-secondary-bg);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
button.transparent {
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -129,13 +129,13 @@ export default {
|
|||
|
||||
.item {
|
||||
margin: 12px 12px 24px 12px;
|
||||
color: var(--color-text);
|
||||
.text {
|
||||
width: 208px;
|
||||
margin-top: 8px;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 20px;
|
||||
|
||||
display: -webkit-box;
|
||||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
line-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -170,7 +170,8 @@ export default {
|
|||
}
|
||||
|
||||
.explicit-symbol {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
float: right;
|
||||
.svg-icon {
|
||||
margin-bottom: -3px;
|
||||
|
|
@ -178,7 +179,8 @@ export default {
|
|||
}
|
||||
|
||||
.lock-icon {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
margin-right: 4px;
|
||||
// float: right;
|
||||
.svg-icon {
|
||||
|
|
@ -189,7 +191,8 @@ export default {
|
|||
|
||||
.play-count {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
opacity: 0.58;
|
||||
color: var(--color-text);
|
||||
font-size: 12px;
|
||||
.svg-icon {
|
||||
margin-right: 3px;
|
||||
|
|
|
|||
|
|
@ -76,11 +76,12 @@ export default {
|
|||
.mv {
|
||||
margin: 12px 12px 24px 12px;
|
||||
width: 204px;
|
||||
color: var(--color-text);
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
@ -88,7 +89,7 @@ export default {
|
|||
}
|
||||
.artist {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
|
|||
|
|
@ -103,7 +103,10 @@ nav {
|
|||
left: 10vw;
|
||||
}
|
||||
backdrop-filter: saturate(180%) blur(30px);
|
||||
background-color: rgba(255, 255, 255, 0.86);
|
||||
|
||||
// background: var(--color-body-bg);
|
||||
// background-color: rgba(255, 255, 255, 0.86);
|
||||
background-color: var(--color-navbar-bg);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
@ -127,15 +130,15 @@ nav {
|
|||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
color: black;
|
||||
color: var(--color-text);
|
||||
transition: 0.2s;
|
||||
margin: {
|
||||
right: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background: #eaeffd;
|
||||
color: #335eea;
|
||||
background: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
|
|
@ -143,7 +146,7 @@ nav {
|
|||
}
|
||||
}
|
||||
a.active {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +166,7 @@ nav {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
background: var(--color-secondary-bg);
|
||||
border-radius: 8px;
|
||||
width: 200px;
|
||||
}
|
||||
|
|
@ -171,7 +174,8 @@ nav {
|
|||
.svg-icon {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
color: #aaaaaa;
|
||||
color: var(--color-text);
|
||||
opacity: 0.28;
|
||||
margin: {
|
||||
left: 8px;
|
||||
right: 4px;
|
||||
|
|
@ -185,13 +189,15 @@ nav {
|
|||
width: 96%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #eaeffd;
|
||||
background: var(--color-primary-bg);
|
||||
input,
|
||||
.svg-icon {
|
||||
color: #335eea;
|
||||
opacity: 1;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -205,6 +211,7 @@ nav {
|
|||
margin-right: 16px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -294,7 +294,8 @@ export default {
|
|||
justify-content: space-around;
|
||||
height: 64px;
|
||||
backdrop-filter: saturate(180%) blur(30px);
|
||||
background-color: rgba(255, 255, 255, 0.86);
|
||||
// background-color: rgba(255, 255, 255, 0.86);
|
||||
background-color: var(--color-navbar-bg);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
@ -334,7 +335,8 @@ export default {
|
|||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
|
|
@ -348,7 +350,8 @@ export default {
|
|||
}
|
||||
.artist {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
opacity: 0.58;
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
@ -394,7 +397,7 @@ export default {
|
|||
}
|
||||
}
|
||||
.active .svg-icon {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.volume-control {
|
||||
margin-left: 4px;
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ button {
|
|||
.svg-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
|
|
@ -180,12 +180,16 @@ button {
|
|||
border-radius: 8px;
|
||||
margin: 0 20px 0 10px;
|
||||
width: 12px;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
color: var(--color-text);
|
||||
cursor: default;
|
||||
span {
|
||||
opacity: 0.58;
|
||||
}
|
||||
}
|
||||
|
||||
.explicit-symbol {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
.svg-icon {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
|
@ -221,7 +225,7 @@ button {
|
|||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
cursor: default;
|
||||
padding-right: 16px;
|
||||
display: -webkit-box;
|
||||
|
|
@ -233,13 +237,14 @@ button {
|
|||
margin-right: 2px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.72);
|
||||
opacity: 0.72;
|
||||
}
|
||||
}
|
||||
.artist {
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
@ -247,7 +252,7 @@ button {
|
|||
a {
|
||||
span {
|
||||
margin-right: 3px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
|
@ -260,7 +265,8 @@ button {
|
|||
flex: 1;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
@ -274,10 +280,12 @@ button {
|
|||
justify-content: flex-end;
|
||||
margin-right: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
}
|
||||
&:hover {
|
||||
transition: all 0.3s;
|
||||
background: #f5f5f7;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
}
|
||||
.track.disable {
|
||||
|
|
@ -290,7 +298,7 @@ button {
|
|||
.time,
|
||||
.no,
|
||||
.featured {
|
||||
color: rgba(0, 0, 0, 0.28) !important;
|
||||
opacity: 0.28 !important;
|
||||
}
|
||||
&:hover {
|
||||
background: none;
|
||||
|
|
@ -325,24 +333,22 @@ button {
|
|||
}
|
||||
|
||||
.track.playing {
|
||||
background: #eaeffd;
|
||||
color: #335eea;
|
||||
background: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
.title,
|
||||
.album {
|
||||
color: #335eea;
|
||||
.album,
|
||||
.time {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.title .featured,
|
||||
.artist {
|
||||
color: #335eea;
|
||||
.artist,
|
||||
.explicit-symbol {
|
||||
color: var(--color-primary);
|
||||
opacity: 0.88;
|
||||
}
|
||||
.no span {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.78;
|
||||
}
|
||||
.explicit-symbol {
|
||||
color: #335eea;
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue