root
7fb448da53
Default theme paints state highlights via inset box-shadow (white overlay), which washed out the pills on hover/open. Clear it in all states and re-do highlights via background alpha. Clock width now set through -natural-hpadding (the property panel buttons actually use). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
53 lines
1.7 KiB
CSS
53 lines
1.7 KiB
CSS
/* Fully transparent top bar */
|
|
#panel {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Each item (clock, quick settings, extension indicators, ...) becomes a
|
|
translucent rounded pill. Default theme highlights states with
|
|
`box-shadow: inset 0 0 0 100px ...` (white overlay), so box-shadow must
|
|
be cleared in every state and the highlight re-done via background. */
|
|
#panel .panel-button {
|
|
background-color: rgba(0, 0, 0, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 16px;
|
|
margin: 4px 3px;
|
|
transition-duration: 150ms;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#panel .panel-button:hover,
|
|
#panel .panel-button:focus,
|
|
#panel .panel-button.clock-display:hover,
|
|
#panel .panel-button.clock-display:focus {
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
box-shadow: none;
|
|
}
|
|
|
|
#panel .panel-button:active,
|
|
#panel .panel-button:checked,
|
|
#panel .panel-button:active:hover,
|
|
#panel .panel-button:checked:hover,
|
|
#panel .panel-button.clock-display:active,
|
|
#panel .panel-button.clock-display:checked {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Clock: default theme paints its own highlight on the inner .clock child,
|
|
which doubles up with our pill — kill it in every state */
|
|
#panel .panel-button.clock-display .clock,
|
|
#panel .panel-button.clock-display:hover .clock,
|
|
#panel .panel-button.clock-display:active .clock,
|
|
#panel .panel-button.clock-display:checked .clock,
|
|
#panel .panel-button.clock-display:focus .clock {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Tighter clock pill — panel buttons size horizontally via -natural-hpadding
|
|
(default 12px), not regular padding */
|
|
#panel .panel-button.clock-display {
|
|
-natural-hpadding: 6px;
|
|
}
|