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
&:active, &:overview, &:focus {
26
-panel-corner-border-color: transparent;
27
}
28
}
29
// panel menus
31
.panel-button {
32
-natural-hpadding: $panel-button-hpadding;
33
-minimum-hpadding: $panel-button-hpadding / 2;
34
transition-duration: $duration;
35
color: hint(on($background));
36
text-shadow: none;
37
font-weight: bold;
38
.system-status-icon,
40
.app-menu-icon > StIcon,
41
.popup-menu-arrow {
42
icon-shadow: none;
43
}
44
&:hover {
46
color: on($background);
47
text-shadow: none;
48
.system-status-icon,
50
.app-menu-icon > StIcon,
51
.popup-menu-arrow {
52
icon-shadow: none;
53
}
54
}
55
&:active, &:overview, &:focus, &:checked {
57
box-shadow: inset 0 -2px on($background);
58
// Trick due to St limitations. It needs a background to draw a box-shadow
59
background-color: rgba($background, .01);
60
color: on($background);
61
> .system-status-icon {
63
icon-shadow: none;
64
}
65
}
66
@if $version >= 3.36 {
68
&.clock-display {
69
// Move highlight from .panel-button to .clock
70
&:active, &:overview, &:focus, &:checked {
71
box-shadow: none;
72
background-color: transparent;
73
.clock {
75
box-shadow: inset 0 -2px on($background);
76
background-color: rgba($background, .01);
77
}
78
}
79
}
80
}
81
// status area icons
83
.system-status-icon {
84
icon-size: 16px;
85
padding: 0 4px;
86
}
87
// app menu icon
89
.app-menu-icon {
90
-st-icon-style: symbolic;
91
margin-left: 4px;
92
margin-right: 4px;
93
// dimensions of the icon are hardcoded
94
}
95
}
96
.panel-status-indicators-box,
98
.panel-status-menu-box {
99
spacing: 2px;
100
}
101
// spacing between power icon and (optional) percentage label
103
.power-status.panel-status-indicators-box {
104
spacing: 0;
105
}
106
// indicator for active
108
.screencast-indicator,
109
.remote-access-indicator {
110
color: $warning;
111
}
112
// transparent panel on lock & login screens
114
@at-root %transparent-panel {
115
background-color: transparent;
116
.panel-corner {
118
-panel-corner-radius: 0;
119
-panel-corner-background-color: transparent;
120
-panel-corner-border-color: transparent;
121
}
122
.panel-button {
124
color: hint($on-dark);
125
&:hover, &:active, &:overview, &:focus, &:checked {
127
color: $on-dark;
128
}
129
}
130
}
131
&:overview,
133
&.unlock-screen,
134
&.login-screen {
135
@extend %transparent-panel;
136
}
137
@if $version < 3.36 {
139
&.lock-screen {
140
@extend %transparent-panel;
141
background-color: $scrim-alt;
142
}
143
}
144
@if $version >= 3.26 and $version < 3.32 {
146
&.solid {
147
transition-duration: $duration-panel;
148
background-color: $panel;
149
.panel-corner {
151
-panel-corner-background-color: transparent;
152
}
153
.panel-button {
155
color: hint($on-panel);
156
text-shadow: none;
157
&:hover, &:active, &:overview, &:focus, &:checked {
159
color: $on-panel;
160
}
161
}
162
.system-status-icon,
164
.app-menu-icon > StIcon,
165
.popup-menu-arrow {
166
icon-shadow: none;
167
}
168
}
169
}
170
}
171
// App Menu
173
#appMenu {
174
spacing: 4px;
175
@if $version < 3.34 {
177
spinner-image: url("process-working.svg");
178
}
179
.label-shadow {
181
color: transparent;
182
}
183
}
184