LucasDLTG/dsp-thomann-interface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: responsive header

Browse Source
This commit is contained in:
LucasDLTG
2026-07-24 14:50:59 +02:00
parent 4c146902e3
commit 3d7c0d2332
15 changed files with 364 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Button/Button.css
View File

@ -1,20 +1,23 @@
.btn {
width: auto;
height: 36px;
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition:
background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
opacity var(--dur-base) var(--ease-standard);
box-sizing: border-box;
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
}
.btn:disabled {
@ -22,73 +25,25 @@
cursor: not-allowed;
}
/* Primary */
.btn-primary {
background: var(--accent-brand);
color: #0d0f12;
}
.btn-primary:hover:not(:disabled) {
background: #6f9bf2;
}
/* Ghost */
.btn-ghost {
background: transparent;
border-color: var(--border-hairline);
color: var(--text-muted);
}
.btn-ghost:hover {
color: var(--text-primary);
border-color: var(--text-muted);
}
/* Toggle */
.btn-toggle {
width: 90%;
height: 40px;
margin: 8px auto;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
/* same as ghost */
background: transparent;
border-color: var(--border-hairline);
color: var(--text-muted);
}
.btn-toggle:hover {
color: var(--text-primary);
border-color: var(--text-muted);
background: transparent;
}
/* Active states only */
.btn-toggle.active-warning {
background: var(--accent-connecting);
border-color: var(--accent-connecting);
color: var(--bg-void);
}
.btn-toggle.active-danger {
background: var(--accent-down);
border-color: var(--accent-down);
color: var(--text-primary);
}
.btn-outline {
background: transparent;
border-color: var(--border-hairline);
color: var(--text-muted);
}
.btn-outline:hover:not(:disabled) {
color: var(--text-primary);
border-color: var(--text-muted);
}
}