lzw-723/butterfliu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改前端配色
All checks were successful
Go CI / test-and-build (push) Successful in 11s
Details
Web CI / lint-test-build (push) Successful in 22s
Details

Browse Source
This commit is contained in:
lzw-723
2026-04-06 15:12:58 +08:00
parent e4615e122e
commit 76e3e3c99f
9 changed files with 50 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.vue
View File

@@ -66,7 +66,7 @@ const sidebarOpen = ref(false)
/* === 侧边栏 === */
.sidebar {
width: 220px;
background: linear-gradient(180deg, var(--stone-1) 0%, var(--stone-0) 100%);
background: linear-gradient(180deg, var(--gray-1) 0%, var(--gray-0) 100%);
padding: var(--size-5);
border-right: 1px solid var(--border);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

14
web/src/assets/base.css
View File

@@ -12,7 +12,7 @@
@import 'open-props/buttons/light';
/* individual imports */
@import 'open-props/indigo';
@import 'open-props/violet';
@import 'open-props/easings';
@import 'open-props/animations';
@import 'open-props/sizes';
@@ -43,12 +43,12 @@ html {
}
::-webkit-scrollbar-thumb {
background: var(--stone-4);
background: var(--gray-4);
border-radius: var(--radius-2);
}
::-webkit-scrollbar-thumb:hover {
background: var(--stone-5);
background: var(--gray-5);
}
/* 按钮重置 — 覆盖 Open Props 默认样式 */
@@ -67,10 +67,10 @@ textarea {
font-family: inherit;
font-size: var(--font-size-1);
padding: var(--size-2) var(--size-3);
border: 1px solid var(--stone-3);
border: 1px solid var(--gray-3);
border-radius: var(--radius-2);
background-color: var(--stone-0);
color: var(--stone-10);
background-color: var(--gray-0);
color: var(--gray-10);
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
width: 100%;
@@ -92,7 +92,7 @@ input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
color: var(--stone-5);
color: var(--gray-5);
}
/* 页面切换过渡 */

22
web/src/assets/main.css
View File

@@ -2,17 +2,17 @@
/* 使用 Open Props 的自定义颜色变量 */
:root {
--brand: var(--orange-6);
--brand-hover: var(--orange-7);
--brand-light: var(--orange-2);
--brand: var(--violet-6);
--brand-hover: var(--violet-7);
--brand-light: var(--violet-2);
--text-light: var(--gray-5);
--body-bg: var(--stone-0);
--surface: var(--stone-1);
--surface-hover: var(--stone-2);
--border: var(--stone-3);
--text-primary: var(--stone-11);
--text-secondary: var(--stone-7);
--text-muted: var(--stone-5);
--body-bg: var(--gray-0);
--surface: var(--gray-1);
--surface-hover: var(--gray-2);
--border: var(--gray-3);
--text-primary: var(--gray-11);
--text-secondary: var(--gray-7);
--text-muted: var(--gray-5);
}
/* 全局背景 */
@@ -79,7 +79,7 @@ li {
.btn-secondary:hover {
background-color: var(--surface-hover);
border-color: var(--stone-4);
border-color: var(--gray-4);
}
.btn-ghost {

2
web/src/components/AddLibraryDialog.vue
View File

@@ -81,7 +81,7 @@ const handleClose = () => emit('update:modelValue', false)
position: relative;
border: none;
border-radius: var(--radius-3);
background-color: var(--stone-0);
background-color: var(--gray-0);
box-shadow: var(--shadow-5);
padding: 0;
width: 100%;

39
web/src/components/AudioPlayer.vue
View File

@@ -83,8 +83,8 @@ function onVolumeChange(e) {
align-items: center;
gap: var(--size-3);
padding: var(--size-4);
background-color: var(--stone-2);
border-top: 1px solid var(--stone-4);
background-color: var(--gray-2);
border-top: 1px solid var(--gray-4);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
@@ -107,7 +107,7 @@ function onVolumeChange(e) {
display: block;
font-weight: 600;
font-size: var(--font-size-1);
color: var(--stone-9);
color: var(--gray-9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -116,7 +116,7 @@ function onVolumeChange(e) {
.track-artist {
font-size: var(--font-size-0);
color: var(--stone-7);
color: var(--gray-7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -136,30 +136,31 @@ function onVolumeChange(e) {
border: none;
background: none;
cursor: pointer;
color: var(--stone-9);
color: var(--gray-9);
transition: color 0.2s;
}
.control-btn:hover {
color: var(--stone-11);
color: var(--gray-11);
}
.play-btn {
width: var(--size-8);
height: var(--size-8);
border: none;
background: var(--stone-9);
background: var(--violet-6);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--stone-1);
transition: transform 0.2s;
color: var(--white);
transition: transform 0.2s, background-color 0.2s;
}
.play-btn:hover {
transform: scale(1.1);
background: var(--violet-7);
}
.player-progress {
@@ -172,7 +173,7 @@ function onVolumeChange(e) {
.time {
font-size: var(--font-size-0);
color: var(--stone-7);
color: var(--gray-7);
min-width: 35px;
}
@@ -181,7 +182,7 @@ function onVolumeChange(e) {
height: 4px;
-webkit-appearance: none;
appearance: none;
background: var(--stone-4);
background: var(--gray-4);
border-radius: 2px;
cursor: pointer;
}
@@ -191,11 +192,15 @@ function onVolumeChange(e) {
appearance: none;
width: 12px;
height: 12px;
background: var(--stone-9);
background: var(--violet-6);
border-radius: 50%;
cursor: pointer;
}
.progress-bar::-webkit-slider-thumb:hover {
background: var(--violet-7);
}
.player-volume {
display: flex;
align-items: center;
@@ -208,7 +213,7 @@ function onVolumeChange(e) {
border: none;
background: none;
cursor: pointer;
color: var(--stone-9);
color: var(--gray-9);
}
.volume-slider {
@@ -216,7 +221,7 @@ function onVolumeChange(e) {
height: 4px;
-webkit-appearance: none;
appearance: none;
background: var(--stone-4);
background: var(--gray-4);
border-radius: 2px;
cursor: pointer;
}
@@ -226,11 +231,15 @@ function onVolumeChange(e) {
appearance: none;
width: 10px;
height: 10px;
background: var(--stone-9);
background: var(--violet-6);
border-radius: 50%;
cursor: pointer;
}
.volume-slider::-webkit-slider-thumb:hover {
background: var(--violet-7);
}
/* 移动端响应式 */
@media (max-width: 768px) {
.player {

2
web/src/components/DropDown.vue
View File

@@ -58,7 +58,7 @@ onBeforeUnmount(() => {
top: calc(100% + 4px);
right: 0;
z-index: 1000;
background-color: var(--stone-0);
background-color: var(--gray-0);
border: 1px solid var(--border);
border-radius: var(--radius-2);
box-shadow: var(--shadow-3);

6
web/src/components/LibraryCard.vue
View File

@@ -44,7 +44,7 @@ const viewSongs = () => {
align-items: center;
justify-content: center;
gap: var(--size-2);
background: linear-gradient(135deg, var(--stone-1) 0%, var(--stone-2) 100%);
background: linear-gradient(135deg, var(--gray-1) 0%, var(--gray-2) 100%);
border: 1px solid var(--border);
aspect-ratio: var(--ratio-square);
border-radius: var(--radius-3);
@@ -56,7 +56,7 @@ const viewSongs = () => {
.library-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-3);
border-color: var(--stone-4);
border-color: var(--gray-4);
}
.card-icon {
@@ -104,7 +104,7 @@ const viewSongs = () => {
}
.card-menu-btn:hover {
background-color: var(--stone-3);
background-color: var(--gray-3);
color: var(--text-primary);
}
</style>

2
web/src/views/MusicView.vue
View File

@@ -130,7 +130,7 @@ onMounted(() => {
}
.empty-icon {
color: var(--stone-4);
color: var(--gray-4);
margin-bottom: var(--size-4);
}

2
web/src/views/SettingsView.vue
View File

@@ -115,7 +115,7 @@ onMounted(() => {
}
.empty-icon {
color: var(--stone-4);
color: var(--gray-4);
margin-bottom: var(--size-4);
}