A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 _panel.scss

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