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