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