github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2025-02-01 08:51:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: update colors

Browse Source
This commit is contained in:
qier222 2020-12-09 16:55:13 +08:00
parent 58f1d55641
commit d66ceded6e
4 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -72,6 +72,8 @@ export default {
--color-secondary: #7a7a7b;
--color-secondary-bg: #f5f5f7;
--color-navbar-bg: rgba(255, 255, 255, 0.86);
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
}
[data-theme="dark"] {
@ -83,6 +85,8 @@ export default {
--color-secondary-bg: #323232;
--color-navbar-bg: #335eea;
--color-navbar-bg: rgba(34, 34, 34, 0.86);
--color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
--color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
}
#app {

2
src/components/ButtonIcon.vue
View File

@ -27,7 +27,7 @@ button {
margin-left: 0;
}
&:hover {
background: var(--color-secondary-bg);
background: var(--color-secondary-bg-for-transparent);
}
&:active {
transform: scale(0.92);

6
src/components/ContextMenu.vue
View File

@ -85,6 +85,9 @@ export default {
backdrop-filter: blur(16px) contrast(120%);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.menu .item:hover {
color: var(--color-text);
}
}
.menu .item {
@ -95,7 +98,8 @@ export default {
cursor: default;
color: var(--color-text);
&:hover {
background: var(--color-secondary-bg);
color: var(--color-primary);
background: var(--color-primary-bg-for-transparent);
}
}

17
src/components/Navbar.vue
View File

@ -139,7 +139,7 @@ nav {
left: 12px;
}
&:hover {
background: var(--color-secondary-bg);
background: var(--color-secondary-bg-for-transparent);
}
&:active {
transform: scale(0.92);
@ -167,7 +167,7 @@ nav {
display: flex;
align-items: center;
height: 32px;
background: var(--color-secondary-bg);
background: var(--color-secondary-bg-for-transparent);
border-radius: 8px;
width: 200px;
}
@ -194,7 +194,7 @@ nav {
}
.active {
background: var(--color-primary-bg);
background: var(--color-primary-bg-for-transparent);
input,
.svg-icon {
opacity: 1;
@ -203,6 +203,17 @@ nav {
}
}
[data-theme="dark"] {
.search-box {
.active {
input,
.svg-icon {
color: var(--color-text);
}
}
}
}
.right-part {
flex: 1;
display: flex;