Fix button overlap: Add spacing and styling for visibility-toggle

- Add gap: 4px to section-title to prevent button overlap
- Style visibility-toggle button with blue color (vs red for Clear All)
- Show/Hide both buttons on hover (previously only Clear All)
- Add hover effects for both buttons
This commit is contained in:
DiTus
2026-02-26 20:39:50 +01:00
parent 659571cbc5
commit 2dc9eb5461

View File

@ -115,14 +115,17 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 4px;
} }
.section-title button.clear-all { .section-title button.clear-all,
.section-title button.visibility-toggle {
display: none; display: none;
margin-left: auto;
} }
.section-title:hover button.clear-all { .section-title:hover button.clear-all,
.section-title:hover button.visibility-toggle {
display: inline-block; display: inline-block;
} }
.visibility-toggle,
.clear-all { .clear-all {
background: var(--tv-red); background: var(--tv-red);
border: none; border: none;
@ -132,6 +135,10 @@
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.visibility-toggle {
background: var(--tv-blue);
}
.visibility-toggle:hover,
.clear-all:hover { .clear-all:hover {
opacity: 0.9; opacity: 0.9;
} }