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.

 _mate.scss

View raw Download
text/plain • 7.8 kiB
ASCII text
        
            
1
// based css:
2
// https://github.com/mate-desktop/mate-themes/blob/master/desktop-themes/Menta/gtk-3.0/mate-applications.css
3
4
/**************
5
* Mate-Panel *
6
**************/
7
// first make all transparent
8
.mate-panel-menu-bar menubar,
9
#PanelApplet-window-menu-applet-button {
10
background-color: transparent;
11
}
12
13
// let's start it
14
.mate-panel-menu-bar {
15
background-color: $solid_panel_bg_color;
16
font-weight: 500;
17
18
// Avoid changing the menu text color
19
&:not(.popup) { color: $inverse_secondary_fg_color; }
20
21
button {
22
@extend %flat_button;
23
@extend %button_selected.flat;
24
25
min-height: 16px;
26
min-width: 16px;
27
padding: 0; // NOTE: Most buttons padding are hard-coded to 0 (except hide buttons)
28
border-radius: 0;
29
30
&:checked { background-color: $inverse_divider_color; }
31
}
32
}
33
34
// hide buttons
35
PanelToplevel.horizontal > grid > button {
36
min-width: 24px;
37
}
38
39
PanelToplevel.vertical > grid > button {
40
min-height: 24px;
41
}
42
43
#PanelApplet {
44
// border-width: 0;
45
}
46
47
PanelSeparator {
48
color: $inverse_divider_color;
49
}
50
51
// the grid left from na-tray and wncktasklist
52
MatePanelAppletFrameDBus {
53
border-style: solid;
54
border-color: $inverse_divider_color;
55
56
.mate-panel-menu-bar.horizontal & { border-width: 0 1px; }
57
.mate-panel-menu-bar.vertical & { border-width: 1px 0; }
58
}
59
60
// main menu
61
.mate-panel-menu-bar {
62
// set normal menubar button
63
menubar > menuitem {
64
color: $inverse_secondary_fg_color;
65
66
&:hover {
67
background-color: $inverse_divider_color;
68
color: $inverse_fg_color;
69
}
70
71
&:disabled { color: $inverse_disabled_secondary_fg_color; }
72
}
73
74
&.horizontal menubar > menuitem { padding: 0 8px; }
75
&.vertical menubar > menuitem { padding: 8px 0; }
76
77
// set normal menubar menuitem
78
menubar menu > menuitem {
79
// adjust sizing since the menuitem has large icons
80
min-height: $menuitem_size;
81
padding: 0 6px;
82
// font-weight: initial;
83
}
84
}
85
86
// all applets
87
.mate-panel-menu-bar #PanelApplet button {
88
-GtkWidget-window-dragging: true;
89
// padding: 4px;
90
}
91
92
.mate-panel-menu-bar #tasklist-button {
93
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
94
currentColor 0%,
95
transparent 0%)
96
0 0 0 / 0 0 0px;
97
98
&:checked {
99
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
100
currentColor 100%,
101
transparent 0%)
102
0 0 2 / 0 0 2px;
103
}
104
105
// instead of #tasklist-button { padding: 0 4px; }
106
image:dir(ltr), label:dir(rtl) { padding-left: 4px; }
107
label:dir(ltr), image:dir(rtl) { padding-right: 4px; }
108
}
109
110
// #tasklist-button is always horizontal even if the panel is vertical
111
.mate-panel-menu-bar.vertical #tasklist-button { min-height: 32px; }
112
113
#showdesktop-button {
114
.mate-panel-menu-bar.horizontal & image {
115
min-width: 24px;
116
padding: 0 4px;
117
}
118
119
.mate-panel-menu-bar.vertical & image {
120
min-height: 24px;
121
padding: 4px 0;
122
}
123
}
124
125
// WnckPager
126
PanelApplet.wnck-applet .wnck-pager {
127
background-color: transparent;
128
color: $alt_primary_color;
129
130
&:hover { background-color: $inverse_divider_color; }
131
132
&:active { background-color: $inverse_track_color; }
133
134
&:selected { background-color: $primary_color; }
135
}
136
137
#clock-applet-button {
138
.mate-panel-menu-bar.horizontal & label { padding: 0 8px; }
139
.mate-panel-menu-bar.vertical & label { padding: 8px 0; }
140
}
141
142
#MatePanelPopupWindow {
143
border: 1px solid $border_color;
144
border-radius: $material_radius + 1px;
145
box-shadow: inset 0 1px $highlight_color;
146
147
frame > border { border-style: none; }
148
149
button { padding: 4px 16px; }
150
151
// FIXME, does not work
152
ClockMap { border: 1px solid $border_color; }
153
154
// Instead, this works
155
widget { color: $border_color; }
156
}
157
158
na-tray-applet {
159
-NaTrayApplet-icon-padding: 3px;
160
-NaTrayApplet-icon-size: 16;
161
}
162
163
// remove right space a bit
164
na-tray-applet > widget > box {
165
// margin-right: 2px;
166
}
167
168
// no background for icon-padding area
169
na-tray-applet widget box widget {
170
// background-color: transparent;
171
}
172
173
// Classic icon style
174
.mate-panel-menu-bar {
175
-PanelMenuBar-icon-visible: true;
176
}
177
178
// volume applet, brightness applet
179
.mate-panel-applet-slider {
180
border: 1px solid $border_color;
181
border-radius: $material_radius + 1px;
182
box-shadow: inset 0 1px $highlight_color;
183
background-color: $bg_color;
184
185
frame > border { border-style: none; }
186
}
187
188
// mate-menu
189
190
// mimic menubar menuitem style
191
#PanelApplet {
192
&:not(:selected) > box { transition: $shorter_transition; }
193
194
&:selected > box {
195
background-color: $inverse_divider_color;
196
color: $inverse_fg_color;
197
}
198
}
199
200
#mate-menu {
201
// FIXME, does not work
202
border: 1px solid $border_color;
203
204
button {
205
@extend %simple_flat_button;
206
207
min-height: 24px;
208
min-width: 24px;
209
padding: 4px 0;
210
color: $fg_color;
211
font-weight: normal;
212
213
label:not(:first-child) { color: $secondary_fg_color; }
214
}
215
216
entry {
217
margin: 0 0 8px;
218
219
image { margin: 0; }
220
221
+ button {
222
margin: 0 4px 8px;
223
padding: ($medium_size - 24px) / 2;
224
}
225
}
226
}
227
228
229
/*********************
230
* CAJA File manager *
231
*********************/
232
// pathpar toggle button
233
.caja-navigation-window button.toggle.image-button {
234
border-radius: $material_radius;
235
}
236
237
// pathbar
238
// pathbar buttons
239
.caja-pathbar button {
240
margin: 0 -1px 0 -2px;
241
// padding: 4px;
242
243
@extend %pathbar_button;
244
245
// arrow button
246
> widget {
247
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
248
-GtkArrow-arrow-scaling: 1;
249
}
250
}
251
252
// places, treeview, history, information, emblems and notes
253
// .caja-side-pane notebook treeview.view,
254
// .caja-side-pane notebook textview.view text,
255
.caja-side-pane notebook viewport.frame,
256
.caja-side-pane notebook widget .vertical {
257
background-color: $base_color;
258
}
259
260
// treeview rows
261
.caja-side-pane treeview.view {
262
// padding: 2px 0;
263
}
264
265
.caja-side-pane notebook,
266
.caja-notebook {
267
border-top: 1px solid $border_color;
268
269
.frame { border-style: none; }
270
}
271
272
// window and desktop mode
273
.caja-canvas-item {
274
// border-radius: $material_radius;
275
}
276
277
// desktop mode
278
.caja-desktop.caja-canvas-item {
279
@extend .nautilus-desktop.nautilus-canvas-item;
280
}
281
282
.caja-desktop EelEditableLabel.entry {
283
}
284
285
// statusbar
286
.caja-navigation-window statusbar {
287
margin: 0 -10px;
288
padding: 0 4px;
289
border-top: 1px solid $border_color;
290
}
291
292
// infobar
293
.caja-notebook frame > border {
294
border-style: none;
295
}
296
297
#caja-extra-view-widget {
298
border-bottom: 1px solid $border_color;
299
background-color: $bg_color; // needs overriding
300
301
> box > box > label { font-weight: bold; }
302
}
303
304
305
/*********
306
* Pluma *
307
*********/
308
// Pluma status bar
309
.pluma-window statusbar {
310
margin: 0 -10px;
311
padding: 0 4px;
312
border-top: 1px solid $border_color;
313
314
frame {
315
> border { border-style: none; }
316
317
button.flat {
318
padding: 0 4px;
319
border-radius: 0;
320
321
widget {
322
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
323
-GtkArrow-arrow-scaling: 1;
324
}
325
}
326
}
327
}
328
329
// Printpreview
330
.pluma-print-preview {
331
toolbar { border-bottom: 1px solid $border_color; }
332
333
// scrolledwindow { background-color: $base_color; }
334
}
335
336
// sidebar file-browser
337
.pluma-window paned.horizontal box.vertical {
338
box.horizontal button.flat {
339
margin: 1px;
340
341
@extend %small_button;
342
}
343
344
.frame { border-style: none; }
345
346
notebook.frame {
347
margin-top: -1px;
348
border-top: 1px solid $border_color;
349
350
box.vertical toolbar.horizontal { border-bottom: 1px solid $border_color; }
351
}
352
}
353
354
355
/*********
356
* Atril *
357
*********/
358
.atril-window paned.horizontal box.vertical {
359
.frame { border-style: none; }
360
361
notebook .frame { border-top: 1px solid $border_color; }
362
}
363
364
365
/* mate-screensaver lock dialog */
366
.lock-dialog {
367
border-radius: $material_radius;
368
// not sure if box-shadow works here
369
box-shadow: $shadow_4, inset 0 1px $highlight_color;
370
371
frame > border { border-style: none; }
372
}
373