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
/**
5
* Mate-Panel
6
*/
7
// first make all transparent
9
.mate-panel-menu-bar menubar,
10
#PanelApplet-window-menu-applet-button {
11
background-color: transparent;
12
}
13
// let's start it
15
.mate-panel-menu-bar {
16
background-color: $panel;
17
color: hint($on-panel);
18
font-weight: 500;
19
button {
21
min-height: 16px;
22
min-width: 16px;
23
padding: 0; // NOTE: Most buttons padding are hard-coded to 0 (except for hide buttons)
24
border-radius: 0;
25
color: hint($on-panel);
26
@include ink-color($on-panel, $button-style: "flat");
27
&:disabled {
29
background-color: transparent;
30
color: disabled-hint($on-panel);
31
}
32
&:checked {
34
$background-color: overlay("activated", $on-panel);
35
color: $on-panel;
36
@include ink-color($on-panel, $button-style: "flat", $on: $background-color);
37
&:disabled {
39
background-color: overlay("activated", $on-panel);
40
color: disabled($on-panel);
41
}
42
}
43
}
44
}
45
// hide buttons
47
PanelToplevel.horizontal > grid > button {
48
min-width: 24px;
49
}
50
PanelToplevel.vertical > grid > button {
52
min-height: 24px;
53
}
54
#PanelApplet {
56
// border-width: 0;
57
}
58
PanelSeparator {
60
color: divider($on-panel);
61
}
62
// the grid left from na-tray and wncktasklist
64
MatePanelAppletFrameDBus > MatePanelAppletFrameDBus {
65
background-image:
66
repeating-linear-gradient(
67
currentcolor,
68
currentcolor 4px,
69
transparent 4px,
70
transparent 6px
71
);
72
background-repeat: no-repeat;
73
background-size: 4px 10px;
74
color: disabled-hint($on-panel);
75
&:dir(ltr) {
77
background-position: 3px;
78
}
79
&:dir(rtl) {
81
background-position: calc(100% - 3px);
82
}
83
}
84
// main menu
86
.mate-panel-menu-bar {
87
// set normal menubar button
88
menubar > menuitem {
89
color: hint($on-panel);
90
&:hover {
92
background-color: overlay("activated", $on-panel);
93
color: $on-panel;
94
}
95
&:disabled {
97
color: disabled-hint($on-panel);
98
}
99
}
100
&.horizontal menubar > menuitem {
102
padding: 0 8px;
103
}
104
&.vertical menubar > menuitem {
106
padding: 8px 0;
107
}
108
// set normal menubar menuitem
110
menubar menu > menuitem {
111
// adjust sizing since the menuitem has large icons
112
min-height: $menuitem-size;
113
padding: 0 6px;
114
// font-weight: initial;
115
}
116
}
117
// all applets
119
.mate-panel-menu-bar #PanelApplet button {
120
-GtkWidget-window-dragging: true;
121
// padding: 4px;
122
}
123
.mate-panel-menu-bar #tasklist-button {
125
border-image:
126
radial-gradient(
127
circle closest-corner at center calc(100% - 1px),
128
currentcolor 0%,
129
transparent 0%
130
) 0 0 0 / 0 0 0;
131
&:checked {
133
border-image:
134
radial-gradient(
135
circle closest-corner at center calc(100% - 1px),
136
currentcolor 100%,
137
transparent 0%
138
) 0 0 2 / 0 0 2px;
139
}
140
// instead of #tasklist-button { padding: 0 4px; }
142
image:dir(ltr),
143
label:dir(rtl) {
144
padding-left: 4px;
145
}
146
label:dir(ltr),
148
image:dir(rtl) {
149
padding-right: 4px;
150
}
151
}
152
// #tasklist-button is always horizontal even if the panel is vertical
154
.mate-panel-menu-bar.vertical #tasklist-button {
155
min-height: 32px;
156
}
157
#showdesktop-button {
159
.mate-panel-menu-bar.horizontal & image {
160
min-width: 24px;
161
padding: 0 4px;
162
}
163
.mate-panel-menu-bar.vertical & image {
165
min-height: 24px;
166
padding: 4px 0;
167
}
168
}
169
// WnckPager
171
PanelApplet.wnck-applet .wnck-pager {
172
background-color: transparent;
173
color: primary($on-panel);
174
&:hover {
176
background-color: overlay("hover", $on-panel);
177
}
178
&:active {
180
background-color: overlay("pressed", $on-panel);
181
}
182
&:selected {
184
background-color: $primary;
185
}
186
}
187
#clock-applet-button {
189
.mate-panel-menu-bar.horizontal & label {
190
padding: 0 8px;
191
}
192
.mate-panel-menu-bar.vertical & label {
194
padding: 8px 0;
195
}
196
}
197
#MatePanelPopupWindow {
199
border: 1px solid divider($on-surface);
200
border-radius: $corner-radius + 1px;
201
box-shadow: inset 0 1px highlight($surface-z8);
202
background-clip: padding-box;
203
background-color: $surface-z8;
204
frame > border {
206
border-style: none;
207
background-color: transparent;
208
}
209
calendar {
211
border-style: none;
212
&:not(:selected) {
214
background-color: transparent;
215
}
216
// Add separator between calendar and location
218
+ box {
219
margin-top: -5px;
220
padding-top: 5px;
221
border-top: 1px solid divider($on-surface);
222
}
223
}
224
expander > title {
226
min-height: 32px;
227
}
228
button {
230
@extend %button-flat-basic;
231
padding: 4px 16px;
233
}
234
// Weird, this sets the border color of the clockmap
236
> frame > box > box > box > widget {
237
color: divider($on-surface);
238
}
239
}
240
na-tray-applet {
242
-NaTrayApplet-icon-padding: 3px;
243
-NaTrayApplet-icon-size: 16;
244
}
245
// remove right space a bit
247
na-tray-applet > widget > box {
248
// margin-right: 2px;
249
}
250
// no background for icon-padding area
252
na-tray-applet widget box widget {
253
// background-color: transparent;
254
}
255
// Classic icon style
257
.mate-panel-menu-bar {
258
-PanelMenuBar-icon-visible: true;
259
}
260
// volume applet, brightness applet
262
.mate-panel-applet-slider {
263
border: 1px solid divider($on-surface);
264
border-radius: $corner-radius + 1px;
265
box-shadow: inset 0 1px highlight($surface-z8);
266
background-clip: padding-box;
267
background-color: $surface-z8;
268
frame > border {
270
border-style: none;
271
background-color: transparent;
272
}
273
}
274
// mate-menu
276
// #PanelApplet itself cannot change the background-color
278
#PanelApplet {
279
&:not(:selected) > box {
280
transition: $transition;
281
}
282
&:selected > box {
284
background-color: overlay("activated", $on-panel);
285
color: $on-panel;
286
}
287
}
288
#mate-menu {
290
// FIXME, does not work
291
border: 1px solid divider($on-surface);
292
box-shadow: inset 0 1px highlight($surface-z8);
293
background-clip: padding-box;
294
background-color: $surface-z8;
295
button {
297
@extend %button-flat-basic;
298
min-height: 24px;
300
min-width: 24px;
301
padding: 4px 0;
302
color: $on-surface;
303
font-weight: normal;
304
&:not(.flat) {
306
background-color: overlay("activated", $on-surface);
307
}
308
image,
310
label + label {
311
color: hint($on-surface);
312
}
313
}
314
entry {
316
margin: 0 0 4px;
317
image {
319
margin: 0;
320
}
321
+ button {
323
margin: 0 4px 4px;
324
padding: ($medium-size - 24px) / 2;
325
}
326
}
327
}
328
// brisk-menu
330
.brisk-menu {
331
box-shadow: inset 0 1px highlight($surface-z8);
332
background-color: $surface-z8;
333
entry {
335
margin-bottom: -2px;
336
border-bottom: 1px solid divider($on-surface);
337
border-image: none;
338
box-shadow: none;
339
background-color: transparent;
340
}
341
entry + box > box {
343
&:dir(ltr) {
344
margin-right: -2px;
345
border-right: 1px solid divider($on-surface);
346
}
347
&:dir(rtl) {
349
margin-left: -2px;
350
border-left: 1px solid divider($on-surface);
351
}
352
}
353
.categories-list {
355
padding-top: 4px;
356
button {
358
margin: 0 4px;
359
}
360
}
361
.session-button {
363
padding: ($large-size - 24px) / 2;
364
}
365
.frame {
367
border-style: none;
368
background-color: transparent;
369
}
370
.apps-list {
372
padding: 4px 0;
373
background-color: transparent;
374
row {
376
padding: 0;
377
&:hover {
379
box-shadow: none;
380
}
381
}
382
button {
384
border-radius: 0;
385
color: $on-surface;
386
font-weight: normal;
387
}
388
}
389
}
390
/**
392
* CAJA File manager
393
*/
394
// pathbar toggle button
396
.caja-navigation-window box.horizontal > button.toggle.image-button {
397
@extend %button-flat-activatable;
398
border-radius: $corner-radius;
400
}
401
// pathbar
403
// pathbar buttons
404
.caja-pathbar button {
405
margin: 0 -1px 0 -2px;
406
// padding: 4px;
407
@extend %pathbar_button;
409
// NOTE: padding is hard-coded to 0
411
&.slider-button {
412
min-width: 24px;
413
}
414
// arrow button
416
> widget {
417
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
418
-GtkArrow-arrow-scaling: 1;
419
}
420
}
421
// places, treeview, history, information, emblems and notes
423
// .caja-side-pane notebook treeview.view,
424
// .caja-side-pane notebook textview.view text,
425
.caja-side-pane notebook viewport.frame,
426
.caja-side-pane notebook widget .vertical {
427
// background-color: $surface-z1;
428
}
429
// treeview rows
431
.caja-side-pane treeview.view {
432
// padding: 2px 0;
433
}
434
.caja-side-pane notebook,
436
.caja-notebook {
437
border-top: 1px solid divider($on-surface);
438
.frame {
440
border-style: none;
441
background-color: transparent;
442
}
443
}
444
// window and desktop mode
446
.caja-canvas-item {
447
border-radius: $corner-radius;
448
}
449
// desktop mode
451
.caja-desktop.caja-canvas-item {
452
@extend %iconview-desktop;
453
}
454
.caja-desktop EelEditableLabel.entry {
456
}
457
// override https://github.com/mate-desktop/caja/blob/master/data/caja.css
459
.caja-desktop.view .entry,
460
.caja-navigation-window .view .entry {
461
border: none;
462
border-radius: $corner-radius;
463
background-color: entry-fill($on-surface);
464
background-image: none;
465
color: $on-surface;
466
&:selected {
468
background-color: $overlay-selected;
469
}
470
}
471
.caja-desktop.view .entry {
473
background-color: $scrim-alt;
474
color: $on-dark;
475
text-shadow: $text-shadow;
476
caret-color: currentcolor; // this shouldn't be needed.
477
&:selected {
479
// FIXME: this should have light overlay.
480
background-color: $overlay-selected;
481
}
482
}
483
// statusbar
485
.caja-navigation-window statusbar {
486
margin: 0 -10px;
487
padding: 0 4px;
488
border-top: 1px solid divider($on-surface);
489
}
490
// infobar
492
.caja-notebook frame > border {
494
border-style: none;
495
background-color: transparent;
496
}
497
#caja-extra-view-widget {
499
border-bottom: 1px solid divider($on-surface);
500
// background-color: $surface-z1;
501
> box > box > label {
503
font-weight: bold;
504
}
505
button {
507
@extend %button-flat;
508
&:not(:disabled) {
510
color: $primary;
511
@include ink-color($primary, $button-style: "flat");
512
}
513
}
514
}
515
/**
517
* Pluma
518
*/
519
// Pluma status bar
521
.pluma-window statusbar {
522
margin: 0 -10px;
523
padding: 0 4px;
524
border-top: 1px solid divider($on-surface);
525
frame {
527
> border {
528
border-style: none;
529
background-color: transparent;
530
}
531
button.flat {
533
padding: 0 4px;
534
border-radius: 0;
535
widget {
537
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
538
-GtkArrow-arrow-scaling: 1;
539
}
540
}
541
}
542
}
543
// Printpreview
545
.pluma-print-preview {
546
toolbar {
547
border-bottom: 1px solid divider($on-surface);
548
}
549
scrolledwindow {
551
// background-color: $surface-z1;
552
}
553
}
554
// sidebar file-browser
556
.pluma-window paned.horizontal box.vertical {
557
box.horizontal button.flat {
558
margin: 1px;
559
@extend %button-small;
561
}
562
.frame {
564
border-style: none;
565
background-color: transparent;
566
}
567
notebook.frame {
569
margin-top: -1px;
570
border-top: 1px solid divider($on-surface);
571
box.vertical toolbar.horizontal {
573
border-bottom: 1px solid divider($on-surface);
574
}
575
}
576
}
577
/**
579
* Atril
580
*/
581
.atril-window paned.horizontal box.vertical {
583
.frame {
584
border-style: none;
585
background-color: transparent;
586
}
587
notebook .frame {
589
border-top: 1px solid divider($on-surface);
590
}
591
}
592
/* mate-screensaver lock dialog */
594
.lock-dialog {
596
border: 1px solid divider($on-surface);
597
border-radius: $corner-radius + 1px;
598
box-shadow: $shadow-z6, inset 0 1px highlight($surface-z8); // not sure if box-shadow works here
599
background-clip: padding-box;
600
background-color: $surface-z8;
601
frame > border {
603
border-style: none;
604
background-color: transparent;
605
}
606
button {
608
@extend %button-flat;
609
&:not(:disabled) {
611
color: $primary;
612
@include ink-color($primary, $button-style: "flat");
613
}
614
}
615
}
616
/* multimedia OSD */
618
MsdOsdWindow.background.osd {
620
border-radius: $corner-radius;
621
background-color: $tooltip;
622
color: $on-tooltip;
623
.trough {
625
border-radius: 0;
626
background-color: disabled-stroke($on-tooltip);
627
}
628
.progressbar {
630
border-radius: 0;
631
background-color: $on-tooltip;
632
}
633
// For mate-settings-daemon noncomposited osd windows
635
&.msd-osd-window-solid {
636
}
637
}
638