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
background-color: transparent;
26
color: hint($on-panel);
27
@include ink-color($on-panel);
28
&:disabled {
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);
37
&:disabled {
39
color: disabled($on-panel);
40
}
41
}
42
}
43
}
44
// hide buttons
46
PanelToplevel.horizontal > grid > button {
47
min-width: 24px;
48
}
49
PanelToplevel.vertical > grid > button {
51
min-height: 24px;
52
}
53
#PanelApplet {
55
// border-width: 0;
56
}
57
PanelSeparator {
59
color: divider($on-panel);
60
}
61
// the grid left from na-tray and wncktasklist
63
MatePanelAppletFrameDBus > MatePanelAppletFrameDBus {
64
background-image:
65
repeating-linear-gradient(
66
currentcolor,
67
currentcolor 4px,
68
transparent 4px,
69
transparent 6px
70
);
71
background-repeat: no-repeat;
72
background-size: 4px 10px;
73
color: disabled-hint($on-panel);
74
&:dir(ltr) {
76
background-position: 3px;
77
}
78
&:dir(rtl) {
80
background-position: calc(100% - 3px);
81
}
82
}
83
// main menu
85
.mate-panel-menu-bar {
86
// set normal menubar button
87
menubar > menuitem {
88
color: hint($on-panel);
89
&:hover {
91
background-color: overlay("activated", $on-panel);
92
color: $on-panel;
93
}
94
&:disabled {
96
color: disabled-hint($on-panel);
97
}
98
}
99
&.horizontal menubar > menuitem {
101
padding: 0 8px;
102
}
103
&.vertical menubar > menuitem {
105
padding: 8px 0;
106
}
107
// set normal menubar menuitem
109
menubar menu > menuitem {
110
// adjust sizing since the menuitem has large icons
111
min-height: $menuitem-size;
112
padding: 0 6px;
113
// font-weight: initial;
114
}
115
}
116
// all applets
118
.mate-panel-menu-bar #PanelApplet button {
119
-GtkWidget-window-dragging: true;
120
// padding: 4px;
121
}
122
.mate-panel-menu-bar #tasklist-button {
124
border-image:
125
radial-gradient(
126
circle closest-corner at center calc(100% - 1px),
127
currentcolor 0%,
128
transparent 0%
129
) 0 0 0 / 0 0 0;
130
&:checked {
132
border-image:
133
radial-gradient(
134
circle closest-corner at center calc(100% - 1px),
135
currentcolor 100%,
136
transparent 0%
137
) 0 0 2 / 0 0 2px;
138
}
139
// instead of #tasklist-button { padding: 0 4px; }
141
image:dir(ltr),
142
label:dir(rtl) {
143
padding-left: 4px;
144
}
145
label:dir(ltr),
147
image:dir(rtl) {
148
padding-right: 4px;
149
}
150
}
151
// #tasklist-button is always horizontal even if the panel is vertical
153
.mate-panel-menu-bar.vertical #tasklist-button {
154
min-height: 32px;
155
}
156
#showdesktop-button {
158
.mate-panel-menu-bar.horizontal & image {
159
min-width: 24px;
160
padding: 0 4px;
161
}
162
.mate-panel-menu-bar.vertical & image {
164
min-height: 24px;
165
padding: 4px 0;
166
}
167
}
168
// WnckPager
170
PanelApplet.wnck-applet .wnck-pager {
171
background-color: transparent;
172
color: primary($on-panel);
173
&:hover {
175
background-color: overlay("hover", $on-panel);
176
}
177
&:active {
179
background-color: overlay("pressed", $on-panel);
180
}
181
&:selected {
183
background-color: $primary;
184
}
185
}
186
#clock-applet-button {
188
.mate-panel-menu-bar.horizontal & label {
189
padding: 0 8px;
190
}
191
.mate-panel-menu-bar.vertical & label {
193
padding: 8px 0;
194
}
195
}
196
#MatePanelPopupWindow {
198
border: 1px solid divider($on-surface);
199
border-radius: $corner-radius + 1px;
200
box-shadow: inset 0 1px highlight($surface);
201
background-clip: padding-box;
202
background-color: $surface;
203
frame > border {
205
border-style: none;
206
background-color: transparent;
207
}
208
calendar {
210
border-style: none;
211
&:not(:selected) {
213
background-color: transparent;
214
}
215
// Add separator between calendar and location
217
+ box {
218
margin-top: -5px;
219
padding-top: 5px;
220
border-top: 1px solid divider($on-surface);
221
}
222
}
223
expander > title {
225
min-height: 32px;
226
}
227
button {
229
@extend %button-flat-basic;
230
padding: 4px 16px;
232
}
233
// Weird, this sets the border color of the clockmap
235
> frame > box > box > box > widget {
236
color: divider($on-surface);
237
}
238
}
239
na-tray-applet {
241
-NaTrayApplet-icon-padding: 3px;
242
-NaTrayApplet-icon-size: 16;
243
}
244
// remove right space a bit
246
na-tray-applet > widget > box {
247
// margin-right: 2px;
248
}
249
// no background for icon-padding area
251
na-tray-applet widget box widget {
252
// background-color: transparent;
253
}
254
// Classic icon style
256
.mate-panel-menu-bar {
257
-PanelMenuBar-icon-visible: true;
258
}
259
// volume applet, brightness applet
261
.mate-panel-applet-slider {
262
border: 1px solid divider($on-surface);
263
border-radius: $corner-radius + 1px;
264
box-shadow: inset 0 1px highlight($surface);
265
background-clip: padding-box;
266
background-color: $surface;
267
frame > border {
269
border-style: none;
270
background-color: transparent;
271
}
272
}
273
// mate-menu
275
// #PanelApplet itself cannot change the background-color
277
#PanelApplet {
278
&:not(:selected) > box {
279
transition: $transition;
280
}
281
&:selected > box {
283
background-color: overlay("activated", $on-panel);
284
color: $on-panel;
285
}
286
}
287
#mate-menu {
289
// FIXME, does not work
290
border: 1px solid divider($on-surface);
291
background-clip: padding-box;
292
background-color: $surface;
293
button {
295
@extend %button-flat-basic;
296
min-height: 24px;
298
min-width: 24px;
299
padding: 4px 0;
300
color: $on-surface;
301
font-weight: normal;
302
&:not(.flat) {
304
background-color: overlay("activated", $on-surface);
305
}
306
image,
308
label + label {
309
color: hint($on-surface);
310
}
311
}
312
entry {
314
margin: 0 0 4px;
315
image {
317
margin: 0;
318
}
319
+ button {
321
margin: 0 4px 4px;
322
padding: ($medium-size - 24px) / 2;
323
}
324
}
325
}
326
// brisk-menu
328
.brisk-menu {
329
box-shadow: inset 0 1px highlight($surface);
330
background-color: $surface;
331
entry {
333
margin-bottom: -2px;
334
border-bottom: 1px solid divider($on-surface);
335
border-image: none;
336
box-shadow: none;
337
background-color: transparent;
338
}
339
entry + box > box {
341
&:dir(ltr) {
342
margin-right: -2px;
343
border-right: 1px solid divider($on-surface);
344
}
345
&:dir(rtl) {
347
margin-left: -2px;
348
border-left: 1px solid divider($on-surface);
349
}
350
}
351
.categories-list {
353
padding-top: 4px;
354
button {
356
margin: 0 4px;
357
&:checked {
359
background-color: overlay("activated", $primary);
360
color: $primary;
361
@include ink-color($primary);
362
}
363
}
364
}
365
.session-button {
367
padding: ($large-size - 24px) / 2;
368
}
369
.frame {
371
border-style: none;
372
background-color: transparent;
373
}
374
.apps-list {
376
padding: 4px 0;
377
background-color: transparent;
378
row {
380
padding: 0;
381
&:hover {
383
box-shadow: none;
384
}
385
}
386
button {
388
border-radius: 0;
389
color: $on-surface;
390
font-weight: normal;
391
}
392
}
393
}
394
/**
396
* CAJA File manager
397
*/
398
// pathbar toggle button
400
.caja-navigation-window box.horizontal > button.toggle.image-button {
401
@extend %button-flat-activatable;
402
border-radius: $corner-radius;
404
}
405
// pathbar
407
// pathbar buttons
408
.caja-pathbar button {
409
margin: 0 -1px 0 -2px;
410
// padding: 4px;
411
@extend %pathbar_button;
413
// NOTE: padding is hard-coded to 0
415
&.slider-button {
416
min-width: 24px;
417
}
418
// arrow button
420
> widget {
421
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
422
-GtkArrow-arrow-scaling: 1;
423
}
424
}
425
// places, treeview, history, information, emblems and notes
427
// .caja-side-pane notebook treeview.view,
428
// .caja-side-pane notebook textview.view text,
429
.caja-side-pane notebook viewport.frame,
430
.caja-side-pane notebook widget .vertical {
431
// background-color: $base;
432
}
433
// treeview rows
435
.caja-side-pane treeview.view {
436
// padding: 2px 0;
437
}
438
.caja-side-pane notebook,
440
.caja-notebook {
441
border-top: 1px solid divider($on-surface);
442
.frame {
444
border-style: none;
445
background-color: transparent;
446
}
447
}
448
// window and desktop mode
450
.caja-canvas-item {
451
border-radius: $corner-radius;
452
}
453
// desktop mode
455
.caja-desktop.caja-canvas-item {
456
@extend %iconview-desktop;
457
}
458
.caja-desktop EelEditableLabel.entry {
460
}
461
// override https://github.com/mate-desktop/caja/blob/master/data/caja.css
463
.caja-desktop.view .entry,
464
.caja-navigation-window .view .entry {
465
border: none;
466
border-radius: $corner-radius;
467
background-color: entry-fill($on-surface);
468
background-image: none;
469
color: $on-surface;
470
&:selected {
472
background-color: $overlay-selected;
473
}
474
}
475
.caja-desktop.view .entry {
477
background-color: $scrim-alt;
478
color: $on-dark;
479
text-shadow: $text-shadow;
480
caret-color: currentcolor; // this shouldn't be needed.
481
&:selected {
483
// FIXME: this should have light overlay.
484
background-color: $overlay-selected;
485
}
486
}
487
// statusbar
489
.caja-navigation-window statusbar {
490
margin: 0 -10px;
491
padding: 0 4px;
492
border-top: 1px solid divider($on-surface);
493
}
494
// infobar
496
.caja-notebook frame > border {
498
border-style: none;
499
background-color: transparent;
500
}
501
#caja-extra-view-widget {
503
border-bottom: 1px solid divider($on-surface);
504
// background-color: $base;
505
> box > box > label {
507
font-weight: bold;
508
}
509
button {
511
@extend %button-flat;
512
&:not(:disabled) {
514
color: $primary;
515
@include ink-color($primary);
516
}
517
}
518
}
519
/**
521
* Pluma
522
*/
523
// Pluma status bar
525
.pluma-window statusbar {
526
margin: 0 -10px;
527
padding: 0 4px;
528
border-top: 1px solid divider($on-surface);
529
frame {
531
> border {
532
border-style: none;
533
background-color: transparent;
534
}
535
button.flat {
537
padding: 0 4px;
538
border-radius: 0;
539
widget {
541
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
542
-GtkArrow-arrow-scaling: 1;
543
}
544
}
545
}
546
}
547
// Printpreview
549
.pluma-print-preview {
550
toolbar {
551
border-bottom: 1px solid divider($on-surface);
552
}
553
scrolledwindow {
555
// background-color: $base;
556
}
557
}
558
// sidebar file-browser
560
.pluma-window paned.horizontal box.vertical {
561
box.horizontal button.flat {
562
margin: 1px;
563
@extend %button-small;
565
}
566
.frame {
568
border-style: none;
569
background-color: transparent;
570
}
571
notebook.frame {
573
margin-top: -1px;
574
border-top: 1px solid divider($on-surface);
575
box.vertical toolbar.horizontal {
577
border-bottom: 1px solid divider($on-surface);
578
}
579
}
580
}
581
/**
583
* Atril
584
*/
585
.atril-window paned.horizontal box.vertical {
587
.frame {
588
border-style: none;
589
background-color: transparent;
590
}
591
notebook .frame {
593
border-top: 1px solid divider($on-surface);
594
}
595
}
596
/* mate-screensaver lock dialog */
598
.lock-dialog {
600
border: 1px solid divider($on-surface);
601
border-radius: $corner-radius + 1px;
602
box-shadow: $shadow-z6, inset 0 1px highlight($surface); // not sure if box-shadow works here
603
background-clip: padding-box;
604
background-color: $surface;
605
frame > border {
607
border-style: none;
608
background-color: transparent;
609
}
610
button {
612
@extend %button-flat;
613
&:not(:disabled) {
615
color: $primary;
616
@include ink-color($primary);
617
}
618
}
619
}
620
/* multimedia OSD */
622
MsdOsdWindow.background.osd {
624
border-radius: $corner-radius;
625
background-color: $tooltip;
626
color: $on-tooltip;
627
.trough {
629
border-radius: 0;
630
background-color: disabled-stroke($on-tooltip);
631
}
632
.progressbar {
634
border-radius: 0;
635
background-color: $on-tooltip;
636
}
637
// For mate-settings-daemon noncomposited osd windows
639
&.msd-osd-window-solid {
640
}
641
}
642