root
234c17bce8
GNOME 50 extension. Panel background fully transparent; each panel button (clock, quick settings, indicators) gets a translucent rounded pill with hover/active states. Clock's built-in inner highlight suppressed to avoid double background. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
37 lines
1.0 KiB
CSS
37 lines
1.0 KiB
CSS
/* Fully transparent top bar */
|
|
#panel {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Each item (clock, quick settings, extension indicators, ...) becomes a
|
|
translucent rounded pill */
|
|
#panel .panel-button {
|
|
background-color: rgba(20, 20, 24, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 16px;
|
|
margin: 4px 3px;
|
|
padding: 0 12px;
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
#panel .panel-button:hover {
|
|
background-color: rgba(45, 45, 52, 0.65);
|
|
}
|
|
|
|
#panel .panel-button:active,
|
|
#panel .panel-button:checked,
|
|
#panel .panel-button:focus {
|
|
background-color: rgba(60, 60, 70, 0.75);
|
|
}
|
|
|
|
/* 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;
|
|
}
|