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 • 9.33 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: $panel;
16
font-weight: 500;
17
18
// Avoid changing the menu text color
19
&:not(.popup) { color: on($panel, secondary); }
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
}
31
32
// hide buttons
33
PanelToplevel.horizontal > grid > button {
34
min-width: 24px;
35
}
36
37
PanelToplevel.vertical > grid > button {
38
min-height: 24px;
39
}
40
41
#PanelApplet {
42
// border-width: 0;
43
}
44
45
PanelSeparator {
46
color: on($panel, divider);
47
}
48
49
// the grid left from na-tray and wncktasklist
50
MatePanelAppletFrameDBus {
51
border-style: solid;
52
border-color: on($panel, divider);
53
54
.mate-panel-menu-bar.horizontal & { border-width: 0 1px; }
55
.mate-panel-menu-bar.vertical & { border-width: 1px 0; }
56
}
57
58
// main menu
59
.mate-panel-menu-bar {
60
// set normal menubar button
61
menubar > menuitem {
62
color: on($panel, secondary);
63
64
&:hover { color: on($panel); }
65
66
&:disabled { color: on($panel, secondary-disabled); }
67
}
68
69
&.horizontal menubar > menuitem { padding: 0 8px; }
70
&.vertical menubar > menuitem { padding: 8px 0; }
71
72
// set normal menubar menuitem
73
menubar menu > menuitem {
74
// adjust sizing since the menuitem has large icons
75
min-height: $menuitem-size;
76
padding: 0 6px;
77
// font-weight: initial;
78
}
79
}
80
81
// all applets
82
.mate-panel-menu-bar #PanelApplet button {
83
-GtkWidget-window-dragging: true;
84
// padding: 4px;
85
}
86
87
.mate-panel-menu-bar #tasklist-button {
88
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
89
currentColor 0%,
90
transparent 0%)
91
0 0 0 / 0 0 0px;
92
93
&:checked {
94
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
95
currentColor 100%,
96
transparent 0%)
97
0 0 2 / 0 0 2px;
98
}
99
100
// instead of #tasklist-button { padding: 0 4px; }
101
image:dir(ltr), label:dir(rtl) { padding-left: 4px; }
102
label:dir(ltr), image:dir(rtl) { padding-right: 4px; }
103
}
104
105
// #tasklist-button is always horizontal even if the panel is vertical
106
.mate-panel-menu-bar.vertical #tasklist-button { min-height: 32px; }
107
108
#showdesktop-button {
109
.mate-panel-menu-bar.horizontal & image {
110
min-width: 24px;
111
padding: 0 4px;
112
}
113
114
.mate-panel-menu-bar.vertical & image {
115
min-height: 24px;
116
padding: 4px 0;
117
}
118
}
119
120
// WnckPager
121
PanelApplet.wnck-applet .wnck-pager {
122
background-color: transparent;
123
color: $primary-alt;
124
125
&:hover { background-color: $overlay-hover; }
126
127
&:active { background-color: $overlay-active; }
128
129
&:selected { background-color: $primary; }
130
}
131
132
#clock-applet-button {
133
.mate-panel-menu-bar.horizontal & label { padding: 0 8px; }
134
.mate-panel-menu-bar.vertical & label { padding: 8px 0; }
135
}
136
137
#MatePanelPopupWindow {
138
border: 1px solid $frame;
139
border-radius: $corner-radius + 1px;
140
box-shadow: inset 0 1px highlight($surface);
141
background-color: $surface;
142
143
frame > border { border-style: none; }
144
145
calendar {
146
border-style: none;
147
148
&:not(:selected) { background-color: transparent; }
149
150
// Add separator between calendar and location
151
+ box {
152
margin-top: -5px;
153
padding-top: 5px;
154
border-top: 1px solid $divider;
155
}
156
}
157
158
expander > title { min-height: 32px; }
159
160
button {
161
@extend %simple_flat_button;
162
163
padding: 4px 16px;
164
}
165
166
// Weird, this sets the border color of the clockmap
167
> frame > box > box > box > widget { color: $divider; }
168
}
169
170
na-tray-applet {
171
-NaTrayApplet-icon-padding: 3px;
172
-NaTrayApplet-icon-size: 16;
173
}
174
175
// remove right space a bit
176
na-tray-applet > widget > box {
177
// margin-right: 2px;
178
}
179
180
// no background for icon-padding area
181
na-tray-applet widget box widget {
182
// background-color: transparent;
183
}
184
185
// Classic icon style
186
.mate-panel-menu-bar {
187
-PanelMenuBar-icon-visible: true;
188
}
189
190
// volume applet, brightness applet
191
.mate-panel-applet-slider {
192
border: 1px solid $frame;
193
border-radius: $corner-radius + 1px;
194
box-shadow: inset 0 1px highlight($surface);
195
background-color: $surface;
196
197
frame > border { border-style: none; }
198
}
199
200
// mate-menu
201
202
// mimic menubar menuitem style
203
#PanelApplet {
204
&:not(:selected) > box { transition: $transition; }
205
206
&:selected > box {
207
background-color: $overlay-checked;
208
color: on($panel);
209
}
210
}
211
212
#mate-menu {
213
// FIXME, does not work
214
border: 1px solid $frame;
215
background-color: $surface;
216
217
button {
218
@extend %simple_flat_button;
219
220
min-height: 24px;
221
min-width: 24px;
222
padding: 4px 0;
223
color: $text;
224
font-weight: normal;
225
226
&:not(.flat) { background-color: $overlay-checked; }
227
228
image,
229
label + label { color: $text-secondary; }
230
}
231
232
entry {
233
margin: 0 0 4px;
234
235
image { margin: 0; }
236
237
+ button {
238
margin: 0 4px 4px;
239
padding: ($medium-size - 24px) / 2;
240
}
241
}
242
}
243
244
// brisk-menu
245
.brisk-menu {
246
box-shadow: inset 0 1px highlight($surface);
247
background-color: $surface;
248
249
entry {
250
margin-bottom: -2px;
251
border-bottom: 1px solid $divider;
252
border-image: none;
253
box-shadow: none;
254
background-color: transparent;
255
}
256
257
entry + box > box {
258
&:dir(ltr) {
259
margin-right: -2px;
260
border-right: 1px solid $divider;
261
}
262
263
&:dir(rtl) {
264
margin-left: -2px;
265
border-left: 1px solid $divider;
266
}
267
}
268
269
.categories-list {
270
padding-top: 4px;
271
272
button {
273
margin: 0 4px;
274
275
&:checked { color: $primary; }
276
}
277
}
278
279
.session-button { padding: ($large-size - 24px) / 2; }
280
281
.frame { border-style: none; }
282
283
.apps-list {
284
padding: 4px 0;
285
background-color: transparent;
286
287
row {
288
padding: 0;
289
290
&:hover { box-shadow: none; }
291
}
292
293
button {
294
border-radius: 0;
295
color: $text;
296
font-weight: normal;
297
}
298
}
299
}
300
301
302
/*********************
303
* CAJA File manager *
304
*********************/
305
// pathpar toggle button
306
.caja-navigation-window button.toggle.image-button {
307
border-radius: $corner-radius;
308
}
309
310
// pathbar
311
// pathbar buttons
312
.caja-pathbar button {
313
margin: 0 -1px 0 -2px;
314
// padding: 4px;
315
316
@extend %pathbar_button;
317
318
// arrow button
319
> widget {
320
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
321
-GtkArrow-arrow-scaling: 1;
322
}
323
}
324
325
// places, treeview, history, information, emblems and notes
326
// .caja-side-pane notebook treeview.view,
327
// .caja-side-pane notebook textview.view text,
328
.caja-side-pane notebook viewport.frame,
329
.caja-side-pane notebook widget .vertical {
330
background-color: $base;
331
}
332
333
// treeview rows
334
.caja-side-pane treeview.view {
335
// padding: 2px 0;
336
}
337
338
.caja-side-pane notebook,
339
.caja-notebook {
340
border-top: 1px solid $divider;
341
342
.frame { border-style: none; }
343
}
344
345
// window and desktop mode
346
.caja-canvas-item {
347
// border-radius: $corner-radius;
348
}
349
350
// desktop mode
351
.caja-desktop.caja-canvas-item {
352
@extend .nautilus-desktop.nautilus-canvas-item;
353
}
354
355
.caja-desktop EelEditableLabel.entry {
356
}
357
358
// statusbar
359
.caja-navigation-window statusbar {
360
margin: 0 -10px;
361
padding: 0 4px;
362
border-top: 1px solid $divider;
363
}
364
365
// infobar
366
.caja-notebook frame > border {
367
border-style: none;
368
}
369
370
#caja-extra-view-widget {
371
border-bottom: 1px solid $divider;
372
background-color: $base; // needs overriding
373
374
> box > box > label { font-weight: bold; }
375
}
376
377
378
/*********
379
* Pluma *
380
*********/
381
// Pluma status bar
382
.pluma-window statusbar {
383
margin: 0 -10px;
384
padding: 0 4px;
385
border-top: 1px solid $divider;
386
387
frame {
388
> border { border-style: none; }
389
390
button.flat {
391
padding: 0 4px;
392
border-radius: 0;
393
394
widget {
395
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
396
-GtkArrow-arrow-scaling: 1;
397
}
398
}
399
}
400
}
401
402
// Printpreview
403
.pluma-print-preview {
404
toolbar { border-bottom: 1px solid $divider; }
405
406
// scrolledwindow { background-color: $base; }
407
}
408
409
// sidebar file-browser
410
.pluma-window paned.horizontal box.vertical {
411
box.horizontal button.flat {
412
margin: 1px;
413
414
@extend %small_button;
415
}
416
417
.frame { border-style: none; }
418
419
notebook.frame {
420
margin-top: -1px;
421
border-top: 1px solid $divider;
422
423
box.vertical toolbar.horizontal { border-bottom: 1px solid $divider; }
424
}
425
}
426
427
428
/*********
429
* Atril *
430
*********/
431
.atril-window paned.horizontal box.vertical {
432
.frame { border-style: none; }
433
434
notebook .frame { border-top: 1px solid $divider; }
435
}
436
437
438
/* mate-screensaver lock dialog */
439
.lock-dialog {
440
border: 1px solid $frame;
441
border-radius: $corner-radius + 1px;
442
box-shadow: $shadow-4, inset 0 1px highlight($surface); // not sure if box-shadow works here
443
background-color: $surface;
444
445
frame > border { border-style: none; }
446
447
button {
448
@extend %simple_flat_button;
449
}
450
}
451
452
/* multimedia OSD */
453
MsdOsdWindow.background.osd {
454
border-radius: $corner-radius;
455
background-color: $tooltip;
456
color: on($tooltip);
457
458
.trough {
459
border-radius: 0;
460
background-color: on($tooltip, track-disabled);
461
}
462
463
.progressbar {
464
border-radius: 0;
465
background-color: $primary;
466
}
467
468
// For mate-settings-daemon noncomposited osd windows
469
&.msd-osd-window-solid {
470
}
471
}
472