mirror of
https://github.com/ZHANGTIANYAO1/teamspeak-music-bot.git
synced 2026-10-01 20:42:50 +08:00
feat(web): mobile-responsive redesign with Library view and design tokens
Add mobile layout (mini player, bottom tab bar, responsive navbar), new Library view, redesigned bot dropdown with action buttons, and centralize colors/typography/shadows into CSS variables in variables.scss. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
1bd6ab9975
commit
1552fa1a39
11 files changed
+684
-139
No files matched your search
@@ -820,16 +820,16 @@ onUnmounted(() => {
|
||||
background: var(--border-color);
|
||||
color: var(--text-tertiary);
|
||||
&.online {
|
||||
background: rgba(51, 94, 234, 0.15);
|
||||
background: var(--color-primary-15);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&.playing {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
color: #4caf50;
|
||||
background: var(--color-online-15);
|
||||
color: var(--color-online);
|
||||
}
|
||||
&.paused {
|
||||
background: rgba(255, 152, 0, 0.15);
|
||||
color: #ff9800;
|
||||
background: var(--color-paused-15);
|
||||
color: var(--color-paused);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -853,7 +853,7 @@ onUnmounted(() => {
|
||||
color: var(--color-primary);
|
||||
|
||||
&.bilibili-icon {
|
||||
color: #00a1d6;
|
||||
color: var(--brand-bilibili);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -865,7 +865,7 @@ onUnmounted(() => {
|
||||
.account-status {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
&.logged { color: #4caf50; }
|
||||
&.logged { color: var(--color-online); }
|
||||
}
|
||||
|
||||
.login-methods {
|
||||
@@ -888,7 +888,7 @@ onUnmounted(() => {
|
||||
|
||||
&:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
&.active {
|
||||
background: rgba(51, 94, 234, 0.1);
|
||||
background: var(--color-primary-10);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -1012,7 +1012,7 @@ onUnmounted(() => {
|
||||
&:hover { border-color: var(--border-color); }
|
||||
&.active {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(51, 94, 234, 0.1);
|
||||
background: var(--color-primary-10);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user