jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-11-03 22:03:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Phrase setup panel: prominent collapsed header

Browse Source 
The collapsed Setup row was a small muted 13px text link (plus the
default disclosure triangle next to our chevron). Now a proper bar:
bordered/rounded, 15px semibold, hover feedback, chevron rotates on
open, default marker hidden.
This commit is contained in:
Jens Mohrmann
2026-09-20 00:20:58 +02:00
parent 7a030f2728
commit 05d5548d0c
1 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.css
View File

@@ -1041,29 +1041,53 @@ button {
.phrase-setup { .phrase-setup {
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid color-mix(in srgb, var(--color-text-main) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-main) 18%, transparent);
padding-bottom: 12px; border-radius: 10px;
background: color-mix(in srgb, var(--color-text-main) 4%, transparent);
} }
.phrase-setup summary { .phrase-setup summary {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 15px;
color: var(--color-text-muted); font-weight: 600;
color: var(--color-text-main);
padding: 12px 14px;
user-select: none; user-select: none;
list-style: none;
border-radius: 10px;
transition: background 0.15s ease;
}
/* Hide the default disclosure triangle — the chevron icon does the job */
.phrase-setup summary::-webkit-details-marker {
display: none;
} }
.phrase-setup summary:hover { .phrase-setup summary:hover {
color: var(--color-text-main); background: color-mix(in srgb, var(--color-text-main) 7%, transparent);
}
.phrase-setup[open] summary {
border-bottom: 1px solid color-mix(in srgb, var(--color-text-main) 12%, transparent);
border-radius: 10px 10px 0 0;
}
.phrase-setup summary svg {
transition: transform 0.15s ease;
}
.phrase-setup[open] summary svg {
transform: rotate(180deg);
} }
.phrase-setup-grid { .phrase-setup-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px 14px; gap: 10px 14px;
margin-top: 12px; padding: 12px 14px 14px;
} }
.phrase-setup-grid label { .phrase-setup-grid label {