mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-03-27 17:58:56 +08:00
feat: dark mode support (#53)
This commit is contained in:
qier222
GitHub
parent
4e482941ed
commit
b655c59761
28
src/App.vue
28
src/App.vue
@ -50,11 +50,36 @@ export default {
|
||||
<style lang="scss">
|
||||
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
:root {
|
||||
--color-body-bg: #ffffff;
|
||||
--color-text: #000;
|
||||
--color-primary: #335eea;
|
||||
--color-primary-bg: #eaeffd;
|
||||
--color-secondary: #7a7a7b;
|
||||
--color-secondary-bg: #f5f5f7;
|
||||
--color-navbar-bg: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-body-bg: #222222;
|
||||
--color-text: #ffffff;
|
||||
--color-primary: #335eea;
|
||||
--color-primary-bg: #bbcdff;
|
||||
--color-secondary: #7a7a7b;
|
||||
--color-secondary-bg: #323232;
|
||||
--color-navbar-bg: #335eea;
|
||||
--color-navbar-bg: rgba(34, 34, 34, 0.86);
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
|
||||
PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
|
||||
WenQuanYi Micro Hei, sans-serif;
|
||||
width: 100%;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
body {
|
||||
background-color: var(--color-body-bg);
|
||||
}
|
||||
|
||||
html {
|
||||
@ -102,12 +127,13 @@ a {
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-left: 1px solid rgba(128, 128, 128, 0.18);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
background: rgb(216, 216, 216);
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
|
||||
.slide-up-enter-active,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* rail style */
|
||||
.vue-slider-rail {
|
||||
background-color: #eee;
|
||||
background-color: rgba(128, 128, 128, 0.18);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@ -54,7 +54,8 @@
|
||||
|
||||
/* volume style */
|
||||
.volume-control .vue-slider-process {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0.8;
|
||||
background-color: var(--color-text);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -108,5 +108,11 @@ export default {
|
||||
high: "High",
|
||||
lossless: "Lossless",
|
||||
},
|
||||
appearance: {
|
||||
text: "Appearance",
|
||||
auto: "Auto",
|
||||
light: "Light",
|
||||
dark: "Dark",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -6,9 +6,6 @@ export default {
|
||||
library: "资料库",
|
||||
search: "搜索",
|
||||
},
|
||||
footer: {
|
||||
settings: "设置",
|
||||
},
|
||||
home: {
|
||||
recommendPlaylist: "推荐歌单",
|
||||
recommendArtist: "推荐歌手",
|
||||
@ -34,7 +31,7 @@ export default {
|
||||
albums: "专辑",
|
||||
withAlbums: "张专辑",
|
||||
artist: "歌手",
|
||||
videos: "个视频",
|
||||
videos: "个MV",
|
||||
},
|
||||
album: {
|
||||
released: "发行于",
|
||||
@ -103,7 +100,7 @@ export default {
|
||||
songs: "首歌",
|
||||
},
|
||||
settings: {
|
||||
settings: "选项",
|
||||
settings: "设置",
|
||||
logout: "登出",
|
||||
language: "语言",
|
||||
musicQuality: {
|
||||
@ -113,5 +110,11 @@ export default {
|
||||
high: "极高",
|
||||
lossless: "无损",
|
||||
},
|
||||
appearance: {
|
||||
text: "外观",
|
||||
auto: "自动",
|
||||
light: "浅色",
|
||||
dark: "深色",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -45,4 +45,24 @@ if ([undefined, null].includes(store.state.settings.lang)) {
|
||||
localStorage.setItem("settings", JSON.stringify(store.state.settings));
|
||||
}
|
||||
|
||||
if (
|
||||
store.state.settings.appearance !== "auto" &&
|
||||
store.state.settings.appearance !== undefined
|
||||
) {
|
||||
document.body.setAttribute("data-theme", store.state.settings.appearance);
|
||||
} else {
|
||||
document.body.setAttribute(
|
||||
"data-theme",
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
|
||||
);
|
||||
}
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (store.state.settings.appearance === "auto") {
|
||||
store.commit("updateTmpAppearance", e.matches ? "dark" : "light");
|
||||
document.body.setAttribute("data-theme", e.matches ? "dark" : "light");
|
||||
}
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
const initState = {
|
||||
howler: null,
|
||||
accountLogin: false,
|
||||
usernameLogin: false,
|
||||
liked: {
|
||||
songs: [],
|
||||
},
|
||||
@ -85,6 +87,7 @@ const initState = {
|
||||
id: 0,
|
||||
},
|
||||
lang: null,
|
||||
appearance: "auto",
|
||||
musicQuality: 320000,
|
||||
showGithubIcon: true,
|
||||
showPlaylistsByAppleMusic: true,
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
export default {
|
||||
howler: null,
|
||||
accountLogin: false,
|
||||
usernameLogin: false,
|
||||
liked: {
|
||||
songs: [],
|
||||
},
|
||||
@ -9,6 +11,4 @@ export default {
|
||||
},
|
||||
player: JSON.parse(localStorage.getItem("player")),
|
||||
settings: JSON.parse(localStorage.getItem("settings")),
|
||||
accountLogin: false,
|
||||
usernameLogin: false,
|
||||
};
|
||||
|
||||
@ -200,6 +200,7 @@ export default {
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
margin-left: 56px;
|
||||
color: var(--color-text);
|
||||
.title {
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
@ -208,7 +209,7 @@ export default {
|
||||
}
|
||||
.artist {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
margin-top: 24px;
|
||||
a {
|
||||
font-weight: 600;
|
||||
@ -216,13 +217,13 @@ export default {
|
||||
}
|
||||
.date-and-count {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.description {
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -230,8 +231,8 @@ export default {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transition: color 0.3s;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -281,7 +282,8 @@ export default {
|
||||
}
|
||||
|
||||
.explicit-symbol {
|
||||
color: rgba(0, 0, 0, 0.28);
|
||||
opacity: 0.28;
|
||||
color: var(--color-text);
|
||||
margin-right: 4px;
|
||||
.svg-icon {
|
||||
margin-bottom: -3px;
|
||||
@ -292,22 +294,25 @@ export default {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 36px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.48);
|
||||
opacity: 0.48;
|
||||
color: var(--color-text);
|
||||
div {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.album-time {
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
.more-by {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.18);
|
||||
|
||||
padding-top: 22px;
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,6 +195,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 72px;
|
||||
color: var(--color-text);
|
||||
img {
|
||||
height: 192px;
|
||||
width: 192px;
|
||||
@ -209,13 +210,13 @@ export default {
|
||||
|
||||
.artist {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.statistics {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@ -234,12 +235,14 @@ export default {
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 16px;
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.latest-release {
|
||||
color: var(--color-text);
|
||||
.release {
|
||||
display: flex;
|
||||
}
|
||||
@ -258,17 +261,16 @@ export default {
|
||||
.name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.date {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
opacity: 0.78;
|
||||
}
|
||||
.type {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
@ -281,11 +283,12 @@ export default {
|
||||
margin-top: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
opacity: 0.78;
|
||||
color: var(--color-secondary);
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
background: #f5f5f7;
|
||||
color: rgba(0, 0, 0, 0.96);
|
||||
opacity: 1;
|
||||
// background: var(--color-primary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,6 +161,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h1 {
|
||||
color: var(--color-text);
|
||||
font-size: 56px;
|
||||
}
|
||||
.buttons {
|
||||
@ -178,19 +179,18 @@ h1 {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: #f5f5f7;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
background-color: var(--color-secondary-bg);
|
||||
color: var(--color-secondary);
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.button.active {
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.playlists {
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
:color="'grey'"
|
||||
@click.native="goTo('/settings')"
|
||||
>
|
||||
{{ $t("footer.settings") }}
|
||||
{{ $t("settings.settings") }}
|
||||
</ButtonTwoTone>
|
||||
</footer>
|
||||
</div>
|
||||
@ -161,40 +161,11 @@ export default {
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
|
||||
color: var(--color-text);
|
||||
a {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 12px 12px 24px 12px;
|
||||
.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;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
line-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
// margin-top: 4px;
|
||||
}
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -186,6 +186,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
color: var(--color-text);
|
||||
.head {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
@ -220,25 +221,21 @@ h1 {
|
||||
transition: all 0.4s;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #eaeffd;
|
||||
// background: linear-gradient(-30deg, #60a6f7, #4364f7, #0052d4);
|
||||
// color: white;
|
||||
// background: linear-gradient(149.46deg, #450af5, #8e8ee5 99.16%);
|
||||
background: var(--color-primary-bg);
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--color-primary);
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #335eea;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 15px;
|
||||
margin-top: 2px;
|
||||
color: #335eea;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -248,16 +245,14 @@ h1 {
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
// background: rgba(255, 255, 255, 1);
|
||||
background: #335eea;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
transition: 0.2s;
|
||||
box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.2);
|
||||
cursor: default;
|
||||
|
||||
.svg-icon {
|
||||
// color: #3f63f5;
|
||||
color: #eaeffd;
|
||||
color: var(--color-primary-bg);
|
||||
margin-left: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@ -277,7 +272,8 @@ h1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
color: rgba(51, 94, 234, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-primary);
|
||||
p {
|
||||
margin-top: 2px;
|
||||
}
|
||||
@ -287,7 +283,8 @@ h1 {
|
||||
.playlists {
|
||||
margin-top: 54px;
|
||||
.title {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
opacity: 0.88;
|
||||
margin-bottom: 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
|
||||
@ -206,6 +206,7 @@ export default {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 48px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.section-1 {
|
||||
@ -216,11 +217,6 @@ export default {
|
||||
height: 64px;
|
||||
margin: 20px;
|
||||
}
|
||||
.svg-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: rgba(82, 82, 82, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
@ -233,12 +229,13 @@ export default {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text);
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
background: var(--color-secondary-bg);
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
}
|
||||
@ -265,7 +262,12 @@ export default {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--color-text);
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
input#countryCode {
|
||||
@ -276,10 +278,10 @@ export default {
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #eaeffd;
|
||||
background: var(--color-primary-bg);
|
||||
input,
|
||||
.svg-icon {
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -290,8 +292,8 @@ export default {
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
background-color: var(--color-primary-bg);
|
||||
color: var(--color-primary);
|
||||
border-radius: 8px;
|
||||
margin-top: 24px;
|
||||
transition: 0.2s;
|
||||
@ -311,17 +313,19 @@ export default {
|
||||
a {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
color: var(--color-text);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 300px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.18);
|
||||
border-top: 1px solid rgba(128, 128, 128);
|
||||
margin-top: 48px;
|
||||
padding-top: 12px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.48);
|
||||
color: var(--color-text);
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
@ -346,7 +350,7 @@ button.loading {
|
||||
.loading span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #335eea;
|
||||
background-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
margin: 0 2px;
|
||||
animation: loading 1.4s infinite both;
|
||||
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
this.$router.push({ path: "/library" });
|
||||
});
|
||||
},
|
||||
throttleSearch: throttle(function () {
|
||||
throttleSearch: throttle(function() {
|
||||
this.search();
|
||||
}, 500),
|
||||
},
|
||||
@ -107,6 +107,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -121,7 +122,7 @@ export default {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(0, 0, 0, 0.78);
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,13 +133,13 @@ export default {
|
||||
height: 48px;
|
||||
border-radius: 11px;
|
||||
width: 326px;
|
||||
background: #eaeffd;
|
||||
background: var(--color-primary-bg);
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
margin: {
|
||||
left: 12px;
|
||||
right: 8px;
|
||||
@ -153,9 +154,10 @@ export default {
|
||||
width: 115%;
|
||||
font-weight: 600;
|
||||
margin-top: -1px;
|
||||
color: #335eea;
|
||||
color: var(--color-primary);
|
||||
&::placeholder {
|
||||
color: #335eeac4;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -187,15 +189,15 @@ export default {
|
||||
margin-left: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background: #f5f5f7;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.user.active {
|
||||
transition: 0.2s;
|
||||
background: #eaeffd;
|
||||
.name {
|
||||
color: #335eea;
|
||||
background: var(--color-primary-bg);
|
||||
.nickname {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -127,19 +127,20 @@ export default {
|
||||
|
||||
.video-info {
|
||||
margin-top: 12px;
|
||||
color: var(--color-text);
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.artist {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
margin-top: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
@ -149,7 +150,8 @@ export default {
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--color-text);
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,7 +41,7 @@ export default {
|
||||
},
|
||||
sortedTracks() {
|
||||
function compare(property) {
|
||||
return function (obj1, obj2) {
|
||||
return function(obj1, obj2) {
|
||||
var value1 = obj1[property];
|
||||
var value2 = obj2[property];
|
||||
return value1 - value2;
|
||||
@ -106,5 +106,6 @@ h1 {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 18px;
|
||||
cursor: default;
|
||||
color: var(--color-text);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,7 +27,9 @@
|
||||
>
|
||||
<a
|
||||
v-else
|
||||
:href="`https://music.163.com/#/user/home?id=${playlist.creator.userId}`"
|
||||
:href="
|
||||
`https://music.163.com/#/user/home?id=${playlist.creator.userId}`
|
||||
"
|
||||
target="blank"
|
||||
>{{ playlist.creator.nickname }}</a
|
||||
>
|
||||
@ -226,20 +228,24 @@ export default {
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.artist {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-top: 24px;
|
||||
}
|
||||
.date-and-count {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
margin-top: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -247,8 +253,8 @@ export default {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transition: color 0.3s;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
@ -299,6 +305,7 @@ export default {
|
||||
.user-info {
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
color: var(--color-text);
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
|
||||
@ -192,15 +192,17 @@ export default {
|
||||
h1 {
|
||||
margin-top: -10px;
|
||||
margin-bottom: 0;
|
||||
color: var(--color-text);
|
||||
span {
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
opacity: 0.58;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
opacity: 0.88;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 16px;
|
||||
margin-top: 46px;
|
||||
}
|
||||
@ -219,6 +221,7 @@ h1 {
|
||||
padding-right: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
.artist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -236,6 +239,7 @@ h1 {
|
||||
|
||||
.albums-list {
|
||||
display: flex;
|
||||
color: var(--color-text);
|
||||
.album {
|
||||
img {
|
||||
height: 128px;
|
||||
@ -249,7 +253,6 @@ h1 {
|
||||
.name {
|
||||
margin-top: 6px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-size: 14px;
|
||||
width: 128px;
|
||||
display: -webkit-box;
|
||||
@ -259,7 +262,7 @@ h1 {
|
||||
}
|
||||
.artist {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
opacity: 0.68;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user