chore: remove unused CSS selectors from Svelte components
Clean up dead CSS that remained after HTML refactors: - NowPlayingBar, Sidebar, PlaylistManagerView, FavoritesView - PlaylistModal, LocalLibraryView, PlaylistDetailView - Dropdown, MigrationModal, AlbumCard, QualityBadge - SearchPlaylistCard, LocalLibraryTagEditorModal - TrackReplacementModal, ImmersiveHeader, SuggestionsPanel - LyricsFocusPanel, ExpandedPlayer, FocusMode - ArtistDetailView, SearchView, SettingsView
This commit is contained in:
vicrodh committed
1 parent
678693d0c4
commit
cec4c32bcc
22 files changed
+2
-1196
No files matched your search
@@ -378,16 +378,6 @@
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.play-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.action-overlay {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
|
||||
@@ -417,12 +417,6 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-theme="light"] .option.selected,
|
||||
[data-theme="warm"] .option.selected {
|
||||
background-color: rgba(var(--accent-primary), 0.15);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
|
||||
@@ -522,17 +522,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.title-row :global(.stack-icon) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -519,18 +519,6 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.track-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.track-title-row :global(.stack-icon) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -841,32 +841,6 @@ input[type="number"] {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin-top: 10px;
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
color: var(--text-primary);
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ref-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ref-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.ref-label {
|
||||
font-size: 12px;
|
||||
|
||||
@@ -327,8 +327,4 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Layout-specific: equal width buttons */
|
||||
.modal-footer :global(.btn) {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -740,20 +740,6 @@
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.song-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.song-title-row :global(.stack-icon) {
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.song-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -808,15 +808,6 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.label-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1125,100 +1116,4 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.danger-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #ef4444;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #ef4444;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.btn-danger:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.delete-confirm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.delete-confirm span {
|
||||
font-size: 13px;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.delete-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-tertiary);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
.btn-cancel:hover:not(:disabled) {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: #ef4444;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
.btn-delete:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-cancel:disabled,
|
||||
.btn-delete:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -188,24 +188,6 @@
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
[data-theme="light"] .quality-badge {
|
||||
background: rgba(40, 42, 54, 0.85);
|
||||
border: 1px solid rgba(40, 42, 54, 0.95);
|
||||
}
|
||||
|
||||
[data-theme="light"] .tier-label,
|
||||
[data-theme="light"] .quality-info {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="light"] .badge-icon {
|
||||
filter: invert(1) brightness(1.5);
|
||||
}
|
||||
|
||||
[data-theme="light"] .badge-icon.hires {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@@ -213,12 +213,6 @@
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.artwork-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.action-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
@@ -1761,11 +1761,6 @@
|
||||
}
|
||||
|
||||
|
||||
/* Compensate margin-right in collapsed mode by shifting icons slightly right */
|
||||
.sidebar.collapsed .playlists-scroll .nav-item {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.playlists-loading,
|
||||
.no-playlists {
|
||||
font-size: 12px;
|
||||
@@ -2137,10 +2132,6 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-item .submenu-arrow {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background: var(--bg-tertiary);
|
||||
|
||||
@@ -578,11 +578,4 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
@@ -415,18 +415,5 @@
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.mode-switcher {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -121,10 +121,6 @@
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
|
||||
}
|
||||
|
||||
.no-lyrics {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -505,21 +505,6 @@
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
z-index: 10; /* Above overlay */
|
||||
}
|
||||
|
||||
.card-info :global(.tooltip-container) {
|
||||
color: var(--alpha-50, rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
|
||||
.card-info:hover :global(.tooltip-container) {
|
||||
color: var(--alpha-80, rgba(255, 255, 255, 0.8));
|
||||
}
|
||||
|
||||
/* Image wrapper with hover effects */
|
||||
.card-image-wrapper {
|
||||
position: relative;
|
||||
|
||||
@@ -2698,12 +2698,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.artist-stats {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.biography {
|
||||
max-width: 100%;
|
||||
margin-bottom: 16px;
|
||||
@@ -2992,135 +2986,6 @@
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.similar-artists {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.similar-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.similar-loading {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.similar-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.similar-separator {
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.similar-artist {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
|
||||
.similar-artist:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* MusicBrainz Relationships */
|
||||
.mb-relationships-loading {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mb-relationships {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mb-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mb-section-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.mb-members-list,
|
||||
.mb-groups-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mb-member,
|
||||
.mb-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.mb-member:hover,
|
||||
.mb-group:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.mb-member.past {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mb-member.past:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mb-member-icon,
|
||||
.mb-group-icon {
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mb-member-name,
|
||||
.mb-group-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mb-member-role {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: transparent;
|
||||
|
||||
@@ -2314,11 +2314,6 @@
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.search-icon-inline {
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input-inline {
|
||||
flex: 1;
|
||||
background: none;
|
||||
@@ -2478,62 +2473,12 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background-color: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.search-container :global(.search-icon) {
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-clear:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.results-count {
|
||||
margin-left: auto;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.context-menu-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
@@ -2633,11 +2578,6 @@
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.track-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.track-sections {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
@@ -2658,42 +2598,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.track-group-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.track-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.track-group-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.track-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.track-group-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.track-group-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.album-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -3968,15 +3968,6 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.folder-path-small {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono, 'Courier New', monospace);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.folder-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
@@ -4057,21 +4048,6 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.folder-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.folder-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.folder-path {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
@@ -4170,25 +4146,6 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.danger-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
color: #ef4444;
|
||||
border: 1px solid #ef4444;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.danger-btn:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
/* Sticky Navigation */
|
||||
.jump-nav {
|
||||
@@ -4333,54 +4290,6 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.artist-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
flex: 1;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.clear-search:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -4483,21 +4392,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dropdown-section-label {
|
||||
padding: 6px 10px 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background: var(--border-subtle);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
/* Filter Panel */
|
||||
.filter-badge {
|
||||
display: inline-flex;
|
||||
@@ -4661,21 +4555,6 @@
|
||||
}
|
||||
|
||||
/* Sort dropdown */
|
||||
.sort-btn {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sort-btn .sort-direction {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sort-btn :global(.chevron) {
|
||||
margin-left: 2px;
|
||||
opacity: 0.6;
|
||||
transition: transform 150ms ease;
|
||||
}
|
||||
|
||||
.sort-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
@@ -4766,12 +4645,6 @@
|
||||
}
|
||||
|
||||
/* Album Grid */
|
||||
.album-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 24px 14px; /* row-gap column-gap */
|
||||
}
|
||||
|
||||
.album-sections {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
@@ -4791,38 +4664,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-group-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.album-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.album-group-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.album-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.album-group-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Album List */
|
||||
.album-list {
|
||||
display: flex;
|
||||
@@ -4885,12 +4726,7 @@
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.album-row-quality {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.album-row-quality .quality-badge {
|
||||
.album-row-meta .quality-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--alpha-85);
|
||||
@@ -4903,12 +4739,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.album-row-quality .quality-badge.hires {
|
||||
background: linear-gradient(135deg, #fbbf24 0%, #b8860b 100%);
|
||||
color: #1a1a1a;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Track Controls */
|
||||
.track-controls {
|
||||
display: flex;
|
||||
@@ -4931,53 +4761,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.track-group-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.track-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.track-group-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.track-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.track-group-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.track-group-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.alpha-index {
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 6px 4px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.alpha-index-inline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -5015,167 +4798,6 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Artist Grid */
|
||||
.artist-sections {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.artist-sections.virtualized {
|
||||
flex: 1;
|
||||
height: calc(100vh - 280px);
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.artist-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.artist-list-virtualized {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.artist-list-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
|
||||
.artist-list-row:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.artist-list-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.artist-list-icon.has-image {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.artist-list-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.artist-list-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.artist-list-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.artist-list-stats {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.artist-image-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid var(--alpha-15);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.artist-image-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.artist-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 50%;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.artist-icon.has-image {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.artist-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.artist-stats {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Track List */
|
||||
.track-list {
|
||||
display: flex;
|
||||
@@ -5552,27 +5174,6 @@
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
transition: border-color 150ms ease;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus:not(:disabled) {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -5629,17 +5230,6 @@
|
||||
width: calc(100% + 8px);
|
||||
}
|
||||
|
||||
.discogs-placeholder {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.discogs-hint {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@@ -2119,15 +2119,6 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.artwork-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.artwork-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -2253,23 +2244,6 @@
|
||||
}
|
||||
|
||||
|
||||
.icon-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.track-list {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@@ -1668,74 +1668,6 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Folder Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
min-width: 320px;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-group input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--alpha-10);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
transition: border-color 150ms ease;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-actions-right {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2031,10 +1963,6 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.drag-handle-placeholder {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
padding: 4px;
|
||||
background: transparent;
|
||||
|
||||
@@ -2233,88 +2233,6 @@
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
/* Track card for Most Popular */
|
||||
.track-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.track-card:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.track-card.most-popular-card {
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.track-card-artwork {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-card-artwork img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.track-card-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.track-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.track-card-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.track-card-artist {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.track-card-album {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Popular Card (for Most Popular tracks/albums) */
|
||||
.popular-card {
|
||||
width: 160px;
|
||||
@@ -2642,15 +2560,6 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.artists-grid-compact {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.artists-carousel-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -2661,34 +2570,6 @@
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.artists-grid-compact .artist-card {
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.artists-grid-compact .artist-image-wrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.artists-grid-compact::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.artists-grid-compact::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.artists-grid-compact::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.artists-grid-compact::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
.bottom-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -2886,10 +2767,5 @@
|
||||
.bottom-section {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.artists-grid-compact {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3290,13 +3290,6 @@ flatpak override --user --filesystem=/home/USUARIO/Música com.blitzfc.qbz</pre>
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.setting-row:has(.radio-group) {
|
||||
height: auto;
|
||||
min-height: 48px;
|
||||
padding: 12px 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.setting-value {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
@@ -3313,43 +3306,6 @@ flatpak override --user --filesystem=/home/USUARIO/Música com.blitzfc.qbz</pre>
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.radio-option:hover {
|
||||
background: var(--alpha-5);
|
||||
}
|
||||
|
||||
.radio-option input[type="radio"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent-color, #1db954);
|
||||
}
|
||||
|
||||
.radio-option span {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
@@ -3415,41 +3371,14 @@ flatpak override --user --filesystem=/home/USUARIO/Música com.blitzfc.qbz</pre>
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.folder-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--text-muted);
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.folder-btn:hover {
|
||||
border-color: var(--text-primary);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Harmonize button widths across settings rows */
|
||||
.connect-btn,
|
||||
.clear-btn,
|
||||
.folder-btn,
|
||||
.logout-btn {
|
||||
.clear-btn {
|
||||
min-width: 140px;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.folder-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Last.fm styles */
|
||||
.lastfm-connected {
|
||||
display: flex;
|
||||
|
||||
Reference in new issue
Block a user