vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #148 from SamidyFR/revert-143-feature/tabbed-settings

Browse source 
Revert "Tabbed settings / settings split in sections"
This commit is contained in:
Samidy 2026-02-04 16:37:45 +03:00 committed by GitHub
commit 64e7a34e58
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 728 additions and 867 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1533
index.html
View file

File diff suppressed because it is too large Load diff

13
js/ui-interactions.js
View file

@ -473,19 +473,6 @@ export function initializeUIInteractions(player, api, ui) {
}); });
}); });
// Settings tabs
document.querySelectorAll('.settings-tab').forEach((tab) => {
tab.addEventListener('click', () => {
document.querySelectorAll('.settings-tab').forEach((t) => t.classList.remove('active'));
document.querySelectorAll('.settings-tab-content').forEach((c) => c.classList.remove('active'));
tab.classList.add('active');
const contentId = `settings-tab-${tab.dataset.tab}`;
document.getElementById(contentId)?.classList.add('active');
});
});
// Tooltip for truncated text // Tooltip for truncated text
let tooltipEl = document.getElementById('custom-tooltip'); let tooltipEl = document.getElementById('custom-tooltip');
if (!tooltipEl) { if (!tooltipEl) {

49
styles.css
View file

@ -890,55 +890,6 @@ input[type='search']::-webkit-search-cancel-button {
/* Use standardized animation */ /* Use standardized animation */
} }
/* Settings Tabs */
.settings-tabs {
display: flex;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.settings-tab {
background: transparent;
border: none;
color: var(--muted-foreground);
padding: var(--spacing-sm) var(--spacing-lg);
cursor: pointer;
font-size: 1rem;
font-weight: 500;
border-bottom: 2px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
transition:
color var(--transition-fast),
background-color var(--transition-fast),
transform var(--transition-fast);
position: relative;
}
.settings-tab:hover {
color: var(--foreground);
background-color: rgb(var(--highlight-rgb), 0.05);
}
.settings-tab:active {
transform: translateY(1px);
}
.settings-tab.active {
color: var(--foreground);
border-bottom-color: var(--highlight);
}
.settings-tab-content {
display: none;
}
.settings-tab-content.active {
display: block;
animation: fade-in-slide-up 0.4s var(--ease-out-back);
}
.card-grid { .card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));