refactor: replace hardcoded colors with CSS variables
- FocusMode: replace #000, white with theme variables - miniplayer: replace #6366f1, #fff, #818cf8 with accent/text variables - AlbumDetailView: replace #666666 with --text-muted - LoginView: use --danger and --warning variables for error/timeout boxes - PlaylistModal: use .icon-inline utility class Add to app.css: - Warning color variables (--warning, --warning-bg, --warning-border) - .icon-inline and .badge-warning utility classes
This commit is contained in:
vicrodh committed
1 parent
8ae4f62401
commit
590fea538c
6 files changed
+57
-28
No files matched your search
+29
@@ -21,6 +21,11 @@
|
||||
--danger-border: rgba(239, 68, 68, 0.3);
|
||||
--danger-hover: rgba(239, 68, 68, 0.2);
|
||||
|
||||
--warning: #fbbf24;
|
||||
--warning-bg: rgba(251, 191, 36, 0.1);
|
||||
--warning-border: rgba(251, 191, 36, 0.3);
|
||||
--warning-hover: rgba(251, 191, 36, 0.2);
|
||||
|
||||
--border-subtle: #2a2a2a;
|
||||
--border-strong: #3a3a3a;
|
||||
|
||||
@@ -85,6 +90,11 @@
|
||||
--danger-border: rgba(220, 38, 38, 0.3);
|
||||
--danger-hover: rgba(220, 38, 38, 0.15);
|
||||
|
||||
--warning: #d97706;
|
||||
--warning-bg: rgba(217, 119, 6, 0.1);
|
||||
--warning-border: rgba(217, 119, 6, 0.3);
|
||||
--warning-hover: rgba(217, 119, 6, 0.15);
|
||||
|
||||
/* Alpha overrides for light theme - use black-based */
|
||||
--alpha-4: rgba(0, 0, 0, 0.04);
|
||||
--alpha-5: rgba(0, 0, 0, 0.05);
|
||||
@@ -533,3 +543,22 @@ select {
|
||||
font-size: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ============ Utility Classes ============ */
|
||||
|
||||
/* Icon inline with text */
|
||||
.icon-inline {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* Warning badge (complements .btn-danger) */
|
||||
.badge-warning {
|
||||
background: rgba(251, 191, 36, 0.1);
|
||||
color: #fbbf24;
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -299,7 +299,7 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 110;
|
||||
background-color: #000;
|
||||
background-color: var(--bg-primary);
|
||||
cursor: default;
|
||||
animation: fadeIn 300ms ease-out;
|
||||
overflow: hidden;
|
||||
@@ -362,7 +362,7 @@
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: white;
|
||||
color: var(--text-primary);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -534,7 +534,7 @@
|
||||
.track-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -595,7 +595,7 @@
|
||||
}
|
||||
|
||||
.control-btn:not(:disabled):hover {
|
||||
color: white;
|
||||
color: var(--text-primary);
|
||||
background: var(--alpha-10);
|
||||
}
|
||||
|
||||
@@ -604,7 +604,7 @@
|
||||
height: 52px;
|
||||
background: var(--alpha-15);
|
||||
backdrop-filter: blur(4px);
|
||||
color: white;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.play-btn:hover {
|
||||
@@ -647,7 +647,7 @@
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: white;
|
||||
background: var(--text-primary);
|
||||
border-radius: 2px;
|
||||
transition: width 100ms linear;
|
||||
}
|
||||
@@ -658,7 +658,7 @@
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
background: var(--text-primary);
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
@@ -703,7 +703,7 @@
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
background: var(--text-primary);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
@@ -719,7 +719,7 @@
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
|
||||
@@ -504,7 +504,7 @@
|
||||
{#if folders.length > 0}
|
||||
<div class="form-group">
|
||||
<label for="folder-select">
|
||||
<Folder size={14} style="display: inline; vertical-align: middle; margin-right: 4px;" />
|
||||
<Folder size={14} class="icon-inline" />
|
||||
Folder
|
||||
</label>
|
||||
<select
|
||||
|
||||
@@ -654,7 +654,7 @@
|
||||
|
||||
.album-stats {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@@ -694,7 +694,7 @@
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #666666;
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -411,13 +411,13 @@
|
||||
.error-box {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
background-color: var(--danger-bg);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.error-box p {
|
||||
color: #ff6b6b;
|
||||
color: var(--danger);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -430,8 +430,8 @@
|
||||
.timeout-box {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
background-color: rgba(251, 191, 36, 0.1);
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
background-color: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@@ -439,7 +439,7 @@
|
||||
.timeout-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fbbf24;
|
||||
color: var(--warning);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -554,9 +554,9 @@
|
||||
|
||||
.error-message {
|
||||
padding: 12px 16px;
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
background-color: var(--danger-bg);
|
||||
border-radius: 8px;
|
||||
color: #ff6b6b;
|
||||
color: var(--danger);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
@@ -364,7 +364,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
color: white;
|
||||
color: var(--text-primary);
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
@@ -441,8 +441,8 @@
|
||||
}
|
||||
|
||||
.restore-btn:hover {
|
||||
background: rgba(99, 102, 241, 0.3);
|
||||
color: #a5b4fc;
|
||||
background: var(--accent-bg);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.track-info {
|
||||
@@ -461,7 +461,7 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -513,7 +513,7 @@
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #6366f1;
|
||||
background: var(--accent-primary);
|
||||
border-radius: 2px;
|
||||
transition: width 100ms linear;
|
||||
}
|
||||
@@ -568,7 +568,7 @@
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
background: var(--text-primary);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
@@ -584,7 +584,7 @@
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
font-size: 11px;
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
@@ -612,7 +612,7 @@
|
||||
|
||||
.ctrl-btn:hover {
|
||||
background: var(--alpha-8);
|
||||
color: #fff;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctrl-btn:active {
|
||||
@@ -620,7 +620,7 @@
|
||||
}
|
||||
|
||||
.ctrl-btn.active {
|
||||
color: #818cf8;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.ctrl-btn.play {
|
||||
|
||||
Reference in new issue
Block a user