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 • 8.42 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
245
/*********************
246
* CAJA File manager *
247
*********************/
248
// pathpar toggle button
249
.caja-navigation-window button.toggle.image-button {
250
border-radius: $corner-radius;
251
}
252
253
// pathbar
254
// pathbar buttons
255
.caja-pathbar button {
256
margin: 0 -1px 0 -2px;
257
// padding: 4px;
258
259
@extend %pathbar_button;
260
261
// arrow button
262
> widget {
263
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
264
-GtkArrow-arrow-scaling: 1;
265
}
266
}
267
268
// places, treeview, history, information, emblems and notes
269
// .caja-side-pane notebook treeview.view,
270
// .caja-side-pane notebook textview.view text,
271
.caja-side-pane notebook viewport.frame,
272
.caja-side-pane notebook widget .vertical {
273
background-color: $base;
274
}
275
276
// treeview rows
277
.caja-side-pane treeview.view {
278
// padding: 2px 0;
279
}
280
281
.caja-side-pane notebook,
282
.caja-notebook {
283
border-top: 1px solid $divider;
284
285
.frame { border-style: none; }
286
}
287
288
// window and desktop mode
289
.caja-canvas-item {
290
// border-radius: $corner-radius;
291
}
292
293
// desktop mode
294
.caja-desktop.caja-canvas-item {
295
@extend .nautilus-desktop.nautilus-canvas-item;
296
}
297
298
.caja-desktop EelEditableLabel.entry {
299
}
300
301
// statusbar
302
.caja-navigation-window statusbar {
303
margin: 0 -10px;
304
padding: 0 4px;
305
border-top: 1px solid $divider;
306
}
307
308
// infobar
309
.caja-notebook frame > border {
310
border-style: none;
311
}
312
313
#caja-extra-view-widget {
314
border-bottom: 1px solid $divider;
315
background-color: $base; // needs overriding
316
317
> box > box > label { font-weight: bold; }
318
}
319
320
321
/*********
322
* Pluma *
323
*********/
324
// Pluma status bar
325
.pluma-window statusbar {
326
margin: 0 -10px;
327
padding: 0 4px;
328
border-top: 1px solid $divider;
329
330
frame {
331
> border { border-style: none; }
332
333
button.flat {
334
padding: 0 4px;
335
border-radius: 0;
336
337
widget {
338
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
339
-GtkArrow-arrow-scaling: 1;
340
}
341
}
342
}
343
}
344
345
// Printpreview
346
.pluma-print-preview {
347
toolbar { border-bottom: 1px solid $divider; }
348
349
// scrolledwindow { background-color: $base; }
350
}
351
352
// sidebar file-browser
353
.pluma-window paned.horizontal box.vertical {
354
box.horizontal button.flat {
355
margin: 1px;
356
357
@extend %small_button;
358
}
359
360
.frame { border-style: none; }
361
362
notebook.frame {
363
margin-top: -1px;
364
border-top: 1px solid $divider;
365
366
box.vertical toolbar.horizontal { border-bottom: 1px solid $divider; }
367
}
368
}
369
370
371
/*********
372
* Atril *
373
*********/
374
.atril-window paned.horizontal box.vertical {
375
.frame { border-style: none; }
376
377
notebook .frame { border-top: 1px solid $divider; }
378
}
379
380
381
/* mate-screensaver lock dialog */
382
.lock-dialog {
383
border: 1px solid $frame;
384
border-radius: $corner-radius + 1px;
385
box-shadow: $shadow-4, inset 0 1px highlight($surface); // not sure if box-shadow works here
386
background-color: $surface;
387
388
frame > border { border-style: none; }
389
390
button {
391
@extend %simple_flat_button;
392
}
393
}
394
395
/* multimedia OSD */
396
MsdOsdWindow.background.osd {
397
border-radius: $corner-radius;
398
background-color: $tooltip;
399
color: on($tooltip);
400
401
.trough {
402
border-radius: 0;
403
background-color: on($tooltip, divider);
404
}
405
406
.progressbar {
407
border-radius: 0;
408
background-color: $primary;
409
}
410
411
// For mate-settings-daemon noncomposited osd windows
412
&.msd-osd-window-solid {
413
}
414
}
415