3eb40df06b
With the introduction of the transparent panel in the overview, we started making the panel text/icon color slightly brighter in the overview and on the lockscreen to ensure best contrast. Now unfortunately, setting the text color incurred a relayout of the underlying ClutterText actor (fixed with https://gitlab.gnome.org/GNOME/mutter/-/merge_requests/1750), and setting the icon color causes the icon texture to get regenerated (fixed with https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/932). Regenerating the icon texture will replace the icon actor, which also causes a relayout. This relayout of the panel has been measured to add at least 1 millisecond (the numbers fluctuated a lot) to about 5 ms it takes to layout the first frame when showing the overview. Since https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/932 is unlikely to land this cycle, this commit proposes a different solution: Simply don't use a different color for text in the overview. To avoid issues with contrast in the overview, make the default color slightly brighter and change it from #ccc to #ddd. Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1733>
141 lines
3.2 KiB
SCSS
141 lines
3.2 KiB
SCSS
/* Top Bar */
|
|
// a.k.a. the panel
|
|
|
|
$panel_corner_radius: $base_border_radius+1;
|
|
$panel_bg_color: #000;
|
|
$panel_fg_color: #ddd;
|
|
$panel_height: 2.2em;
|
|
$panel_transition_duration: 250ms; // same as the overview transition duration
|
|
|
|
#panel {
|
|
background-color: $panel_bg_color;
|
|
font-weight: bold;
|
|
height: $panel_height;
|
|
font-feature-settings: "tnum";
|
|
transition-duration: $panel_transition_duration;
|
|
|
|
// transparent panel on lock & login screens
|
|
&.unlock-screen,
|
|
&.login-screen,
|
|
&:overview {
|
|
background-color: transparent;
|
|
|
|
.panel-corner {
|
|
-panel-corner-opacity: 0;
|
|
}
|
|
}
|
|
|
|
// spacing between activities, app menu and such
|
|
#panelLeft, #panelCenter {
|
|
spacing: $base_spacing;
|
|
}
|
|
|
|
// the rounded outset corners
|
|
.panel-corner {
|
|
-panel-corner-radius: $panel_corner_radius;
|
|
-panel-corner-background-color: $panel_bg_color;
|
|
-panel-corner-border-width: 2px;
|
|
-panel-corner-border-color: transparent;
|
|
-panel-corner-opacity: 1;
|
|
transition-duration: $panel_transition_duration;
|
|
}
|
|
|
|
// panel menus
|
|
.panel-button {
|
|
font-weight: bold;
|
|
color: $panel_fg_color;
|
|
-natural-hpadding: $base_padding * 2;
|
|
-minimum-hpadding: $base_padding;
|
|
transition-duration: 150ms;
|
|
border: 3px solid transparent;
|
|
border-radius: 99px;
|
|
|
|
&.clock-display {
|
|
.clock {
|
|
transition-duration: 150ms;
|
|
border: 3px solid transparent;
|
|
border-radius: 99px;
|
|
}
|
|
}
|
|
|
|
&:hover, &:active, &:overview, &:focus, &:checked {
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
|
|
|
|
// The clock display needs to have the background on .clock because
|
|
// we want to exclude the do-not-disturb indicator from the background
|
|
&.clock-display {
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
|
|
}
|
|
}
|
|
}
|
|
|
|
// status area icons
|
|
.system-status-icon {
|
|
icon-size: $base_icon_size;
|
|
padding: $base_padding - 1px;
|
|
margin: 0 $base_margin;
|
|
}
|
|
|
|
.panel-status-indicators-box .system-status-icon,
|
|
.panel-status-menu-box .system-status-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
// app menu icon
|
|
.app-menu-icon {
|
|
-st-icon-style: symbolic;
|
|
// dimensions of the icon are hardcoded
|
|
}
|
|
|
|
&#panelActivities {
|
|
-natural-hpadding: $base_padding * 3;
|
|
}
|
|
}
|
|
|
|
&.unlock-screen,
|
|
&.login-screen,
|
|
&:overview {
|
|
.panel-button {
|
|
&:hover, &:active, &:overview, &:focus, &:checked {
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
|
|
|
|
&.clock-display {
|
|
box-shadow: none;
|
|
|
|
.clock {
|
|
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-status-indicators-box,
|
|
.panel-status-menu-box {
|
|
spacing: 2px;
|
|
}
|
|
|
|
// spacing between power icon and (optional) percentage label
|
|
.power-status.panel-status-indicators-box {
|
|
spacing: 0;
|
|
}
|
|
|
|
// indicator for active
|
|
.screencast-indicator,
|
|
.remote-access-indicator { color: $warning_color; }
|
|
}
|
|
|
|
// App Menu
|
|
#appMenu {
|
|
spacing: $base_spacing;
|
|
.label-shadow { color: transparent; }
|
|
}
|
|
|
|
#appMenu .panel-status-menu-box {
|
|
padding: 0 $base_padding;
|
|
spacing: $base_spacing;
|
|
}
|