Hide donut eye icon and always show details eyes on narrow layouts
- Use !important to ensure chart eye btn is hidden on narrow (≤850px) - Always show eye buttons in details panel on narrow layouts (opacity 0.5) - Touch devices don't have hover, so eyes need to be visible by default - Desktop (>850px) retains hover behavior for eye icons Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
f6ae4aa3de
commit
0821d8f6f0
15
styles.css
15
styles.css
@ -365,8 +365,9 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chart-eye-btn {
|
.chart-eye-btn {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
@ -415,10 +416,6 @@ body {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-eye-btn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 400px) {
|
@media (max-width: 400px) {
|
||||||
@ -515,6 +512,14 @@ body {
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Always show eye buttons on touch/narrow devices (no hover) */
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
.eye-btn,
|
||||||
|
.header-eye-btn {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Floating eye button on chart (shown when hovering over sunburst sector) */
|
/* Floating eye button on chart (shown when hovering over sunburst sector) */
|
||||||
.chart-eye-btn {
|
.chart-eye-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user