_panel.scss
ASCII text
1
/* Top Bar */
2
3
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../gnome-shell";
6
@use "../overview/overview";
7
8
$color: theme-color.$panel;
9
$on-color: theme-color.$on-panel;
10
11
@if gnome-shell.$version >= 3.26 and gnome-shell.$version < 3.32 {
12
$color: theme-color.$scrim;
13
$on-color: theme-color.$on-scrim;
14
}
15
16
$button-hpadding: 12px;
17
18
@if theme.$compact {
19
$button-hpadding: 8px;
20
}
21
22
#panel {
23
transition-duration: overview.$transition-duration;
24
height: theme.$menu-item-height;
25
background-color: $color;
26
font-weight: bold;
27
font-feature-settings: "tnum";
28
29
// spacing between activities, app menu and such
30
#panelLeft,
31
#panelCenter {
32
spacing: 0;
33
}
34
35
// the rounded outset corners
36
.panel-corner {
37
-panel-corner-radius: 0;
38
-panel-corner-background-color: transparent;
39
-panel-corner-border-width: 0;
40
-panel-corner-border-color: transparent;
41
42
@if gnome-shell.$version >= 40 {
43
-panel-corner-opacity: 0;
44
transition-duration: overview.$transition-duration;
45
} @else {
46
&:active, &:overview, &:focus {
47
-panel-corner-border-color: transparent;
48
}
49
}
50
}
51
52
// panel menus
53
.panel-button {
54
-natural-hpadding: $button-hpadding;
55
-minimum-hpadding: $button-hpadding / 2;
56
transition-duration: theme.$state-duration;
57
border: 0;
58
border-radius: 0;
59
color: theme-color.hint($on-color);
60
text-shadow: none;
61
font-weight: bold;
62
63
@if gnome-shell.$version >= 3.36 {
64
&.clock-display {
65
.clock {
66
transition-duration: theme.$state-duration;
67
border: 0;
68
border-radius: 0;
69
}
70
}
71
}
72
73
.system-status-icon,
74
.app-menu-icon > StIcon,
75
.popup-menu-arrow {
76
icon-shadow: none;
77
}
78
79
&:hover {
80
box-shadow: none;
81
color: $on-color;
82
text-shadow: none;
83
84
@if gnome-shell.$version >= 3.36 {
85
&.clock-display {
86
box-shadow: none;
87
88
.clock {
89
box-shadow: none;
90
}
91
}
92
}
93
94
.system-status-icon,
95
.app-menu-icon > StIcon,
96
.popup-menu-arrow {
97
icon-shadow: none;
98
}
99
}
100
101
&:active, &:overview, &:focus, &:checked {
102
box-shadow: inset 0 -2px $on-color;
103
// Trick due to St limitations. It needs a background to draw a box-shadow
104
background-color: rgba($color, .01);
105
color: $on-color;
106
107
@if gnome-shell.$version >= 3.36 {
108
// The clock display needs to have the background on .clock because
109
// we want to exclude the do-not-disturb indicator from the background
110
&.clock-display {
111
box-shadow: none;
112
background-color: transparent;
113
114
.clock {
115
box-shadow: inset 0 -2px $on-color;
116
background-color: rgba($color, .01);
117
}
118
}
119
}
120
121
> .system-status-icon {
122
icon-shadow: none;
123
}
124
}
125
126
// status area icons
127
.system-status-icon {
128
icon-size: 16px;
129
padding: 0 4px;
130
131
@if gnome-shell.$version >= 40 {
132
margin: 0 4px;
133
}
134
}
135
136
@if gnome-shell.$version >= 40 {
137
.panel-status-indicators-box .system-status-icon,
138
.panel-status-menu-box .system-status-icon {
139
margin: 0;
140
}
141
}
142
143
// app menu icon
144
.app-menu-icon {
145
-st-icon-style: symbolic;
146
// dimensions of the icon are hardcoded
147
148
@if gnome-shell.$version < 40 {
149
margin-left: 4px;
150
margin-right: 4px;
151
}
152
}
153
154
@if gnome-shell.$version >= 40 {
155
&#panelActivities {
156
-natural-hpadding: $button-hpadding;
157
}
158
}
159
}
160
161
.panel-status-indicators-box,
162
.panel-status-menu-box {
163
spacing: 2px;
164
}
165
166
// spacing between power icon and (optional) percentage label
167
.power-status.panel-status-indicators-box {
168
spacing: 0;
169
}
170
171
// indicator for active
172
.screencast-indicator,
173
.remote-access-indicator {
174
color: theme-color.$warning;
175
}
176
177
// transparent panel on lock & login screens
178
@at-root %transparent-panel {
179
background-color: transparent;
180
181
.panel-corner {
182
@if gnome-shell.$version >= 40 {
183
-panel-corner-opacity: 0;
184
} @else {
185
-panel-corner-radius: 0;
186
-panel-corner-background-color: transparent;
187
-panel-corner-border-color: transparent;
188
}
189
}
190
191
.panel-button {
192
color: theme-color.hint(theme-color.$on-dark);
193
194
&:hover, &:active, &:overview, &:focus, &:checked {
195
color: theme-color.$on-dark;
196
}
197
}
198
}
199
200
&.unlock-screen,
201
&.login-screen,
202
&:overview {
203
@extend %transparent-panel;
204
}
205
206
@if gnome-shell.$version < 3.36 {
207
&.lock-screen {
208
@extend %transparent-panel;
209
background-color: theme-color.$scrim-alt;
210
}
211
}
212
213
@if gnome-shell.$version >= 3.26 and gnome-shell.$version < 3.32 {
214
&.solid {
215
transition-duration: overview.$transition-duration;
216
background-color: theme-color.$panel;
217
218
.panel-corner {
219
-panel-corner-background-color: transparent;
220
}
221
222
.panel-button {
223
color: theme-color.hint(theme-color.$on-panel);
224
text-shadow: none;
225
226
&:hover, &:active, &:overview, &:focus, &:checked {
227
color: theme-color.$on-panel;
228
}
229
}
230
231
.system-status-icon,
232
.app-menu-icon > StIcon,
233
.popup-menu-arrow {
234
icon-shadow: none;
235
}
236
}
237
}
238
}
239
240
// App Menu
241
#appMenu {
242
spacing: 4px;
243
244
@if gnome-shell.$version < 3.34 {
245
spinner-image: url("process-working.svg");
246
}
247
248
.label-shadow {
249
color: transparent;
250
}
251
252
@if gnome-shell.$version >= 40 {
253
.panel-status-menu-box {
254
padding: 0;
255
spacing: 4px;
256
}
257
}
258
}
259
260
.clock-display-box {
261
spacing: 0;
262
263
.clock {
264
padding-left: $button-hpadding;
265
padding-right: $button-hpadding;
266
}
267
}
268