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

Revert "Tabbed settings / settings split in sections"

Browse source
This commit is contained in:
Samidy 2026-02-04 16:37:32 +03:00 committed by GitHub
parent 68ee80c2ba
commit 41c0eaaebe
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
let tooltipEl = document.getElementById('custom-tooltip');
if (!tooltipEl) {

49
styles.css
View file

@ -890,55 +890,6 @@ input[type='search']::-webkit-search-cancel-button {
/* 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 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));