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-color: $surface;
202
frame > border {
204
border-style: none;
205
}
206
calendar {
208
border-style: none;
209
&:not(:selected) {
211
background-color: transparent;
212
}
213
// Add separator between calendar and location
215
+ box {
216
margin-top: -5px;
217
padding-top: 5px;
218
border-top: 1px solid divider($on-surface);
219
}
220
}
221
expander > title {
223
min-height: 32px;
224
}
225
button {
227
@extend %button-flat-basic;
228
padding: 4px 16px;
230
}
231
// Weird, this sets the border color of the clockmap
233
> frame > box > box > box > widget {
234
color: divider($on-surface);
235
}
236
}
237
na-tray-applet {
239
-NaTrayApplet-icon-padding: 3px;
240
-NaTrayApplet-icon-size: 16;
241
}
242
// remove right space a bit
244
na-tray-applet > widget > box {
245
// margin-right: 2px;
246
}
247
// no background for icon-padding area
249
na-tray-applet widget box widget {
250
// background-color: transparent;
251
}
252
// Classic icon style
254
.mate-panel-menu-bar {
255
-PanelMenuBar-icon-visible: true;
256
}
257
// volume applet, brightness applet
259
.mate-panel-applet-slider {
260
border: 1px solid divider($on-surface);
261
border-radius: $corner-radius + 1px;
262
box-shadow: inset 0 1px highlight($surface);
263
background-color: $surface;
264
frame > border {
266
border-style: none;
267
}
268
}
269
// mate-menu
271
// #PanelApplet itself cannot change the background-color
273
#PanelApplet {
274
&:not(:selected) > box {
275
transition: $transition;
276
}
277
&:selected > box {
279
background-color: overlay("activated", $on-panel);
280
color: $on-panel;
281
}
282
}
283
#mate-menu {
285
// FIXME, does not work
286
border: 1px solid divider($on-surface);
287
background-color: $surface;
288
button {
290
@extend %button-flat-basic;
291
min-height: 24px;
293
min-width: 24px;
294
padding: 4px 0;
295
color: $on-surface;
296
font-weight: normal;
297
&:not(.flat) {
299
background-color: overlay("activated", $on-surface);
300
}
301
image,
303
label + label {
304
color: hint($on-surface);
305
}
306
}
307
entry {
309
margin: 0 0 4px;
310
image {
312
margin: 0;
313
}
314
+ button {
316
margin: 0 4px 4px;
317
padding: ($medium-size - 24px) / 2;
318
}
319
}
320
}
321
// brisk-menu
323
.brisk-menu {
324
box-shadow: inset 0 1px highlight($surface);
325
background-color: $surface;
326
entry {
328
margin-bottom: -2px;
329
border-bottom: 1px solid divider($on-surface);
330
border-image: none;
331
box-shadow: none;
332
background-color: transparent;
333
}
334
entry + box > box {
336
&:dir(ltr) {
337
margin-right: -2px;
338
border-right: 1px solid divider($on-surface);
339
}
340
&:dir(rtl) {
342
margin-left: -2px;
343
border-left: 1px solid divider($on-surface);
344
}
345
}
346
.categories-list {
348
padding-top: 4px;
349
button {
351
margin: 0 4px;
352
&:checked {
354
background-color: overlay("activated", $primary);
355
color: $primary;
356
@include ink-color($primary);
357
}
358
}
359
}
360
.session-button {
362
padding: ($large-size - 24px) / 2;
363
}
364
.frame {
366
border-style: none;
367
}
368
.apps-list {
370
padding: 4px 0;
371
background-color: transparent;
372
row {
374
padding: 0;
375
&:hover {
377
box-shadow: none;
378
}
379
}
380
button {
382
border-radius: 0;
383
color: $on-surface;
384
font-weight: normal;
385
}
386
}
387
}
388
/**
390
* CAJA File manager
391
*/
392
// pathbar toggle button
394
.caja-navigation-window box.horizontal > button.toggle.image-button {
395
@extend %button-flat-activatable;
396
border-radius: $corner-radius;
398
}
399
// pathbar
401
// pathbar buttons
402
.caja-pathbar button {
403
margin: 0 -1px 0 -2px;
404
// padding: 4px;
405
@extend %pathbar_button;
407
// NOTE: padding is hard-coded to 0
409
&.slider-button {
410
min-width: 24px;
411
}
412
// arrow button
414
> widget {
415
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
416
-GtkArrow-arrow-scaling: 1;
417
}
418
}
419
// places, treeview, history, information, emblems and notes
421
// .caja-side-pane notebook treeview.view,
422
// .caja-side-pane notebook textview.view text,
423
.caja-side-pane notebook viewport.frame,
424
.caja-side-pane notebook widget .vertical {
425
background-color: $base;
426
}
427
// treeview rows
429
.caja-side-pane treeview.view {
430
// padding: 2px 0;
431
}
432
.caja-side-pane notebook,
434
.caja-notebook {
435
border-top: 1px solid divider($on-surface);
436
.frame {
438
border-style: none;
439
}
440
}
441
// window and desktop mode
443
.caja-canvas-item {
444
border-radius: $corner-radius;
445
}
446
// desktop mode
448
.caja-desktop.caja-canvas-item {
449
@extend %iconview-desktop;
450
}
451
.caja-desktop EelEditableLabel.entry {
453
}
454
// override https://github.com/mate-desktop/caja/blob/master/data/caja.css
456
.caja-desktop.view .entry,
457
.caja-navigation-window .view .entry {
458
border: none;
459
border-radius: $corner-radius;
460
background-color: entry-fill($on-surface);
461
background-image: none;
462
color: $on-surface;
463
&:selected {
465
background-color: $overlay-selected;
466
}
467
}
468
.caja-desktop.view .entry {
470
background-color: $scrim-alt;
471
color: $on-dark;
472
text-shadow: $text-shadow;
473
caret-color: currentcolor; // this shouldn't be needed.
474
&:selected {
476
// FIXME: this should have light overlay.
477
background-color: $overlay-selected;
478
}
479
}
480
// statusbar
482
.caja-navigation-window statusbar {
483
margin: 0 -10px;
484
padding: 0 4px;
485
border-top: 1px solid divider($on-surface);
486
}
487
// infobar
489
.caja-notebook frame > border {
491
border-style: none;
492
}
493
#caja-extra-view-widget {
495
border-bottom: 1px solid divider($on-surface);
496
background-color: $base;
497
> box > box > label {
499
font-weight: bold;
500
}
501
button {
503
@extend %button-flat;
504
&:not(:disabled) {
506
color: $primary;
507
@include ink-color($primary);
508
}
509
}
510
}
511
/**
513
* Pluma
514
*/
515
// Pluma status bar
517
.pluma-window statusbar {
518
margin: 0 -10px;
519
padding: 0 4px;
520
border-top: 1px solid divider($on-surface);
521
frame {
523
> border {
524
border-style: none;
525
}
526
button.flat {
528
padding: 0 4px;
529
border-radius: 0;
530
widget {
532
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
533
-GtkArrow-arrow-scaling: 1;
534
}
535
}
536
}
537
}
538
// Printpreview
540
.pluma-print-preview {
541
toolbar {
542
border-bottom: 1px solid divider($on-surface);
543
}
544
scrolledwindow {
546
// background-color: $base;
547
}
548
}
549
// sidebar file-browser
551
.pluma-window paned.horizontal box.vertical {
552
box.horizontal button.flat {
553
margin: 1px;
554
@extend %button-small;
556
}
557
.frame {
559
border-style: none;
560
}
561
notebook.frame {
563
margin-top: -1px;
564
border-top: 1px solid divider($on-surface);
565
box.vertical toolbar.horizontal {
567
border-bottom: 1px solid divider($on-surface);
568
}
569
}
570
}
571
/**
573
* Atril
574
*/
575
.atril-window paned.horizontal box.vertical {
577
.frame {
578
border-style: none;
579
}
580
notebook .frame {
582
border-top: 1px solid divider($on-surface);
583
}
584
}
585
/* mate-screensaver lock dialog */
587
.lock-dialog {
589
border: 1px solid divider($on-surface);
590
border-radius: $corner-radius + 1px;
591
box-shadow: $shadow-z6, inset 0 1px highlight($surface); // not sure if box-shadow works here
592
background-color: $surface;
593
frame > border {
595
border-style: none;
596
}
597
button {
599
@extend %button-flat;
600
&:not(:disabled) {
602
color: $primary;
603
@include ink-color($primary);
604
}
605
}
606
}
607
/* multimedia OSD */
609
MsdOsdWindow.background.osd {
611
border-radius: $corner-radius;
612
background-color: $tooltip;
613
color: $on-tooltip;
614
.trough {
616
border-radius: 0;
617
background-color: disabled-stroke($on-tooltip);
618
}
619
.progressbar {
621
border-radius: 0;
622
background-color: $on-tooltip;
623
}
624
// For mate-settings-daemon noncomposited osd windows
626
&.msd-osd-window-solid {
627
}
628
}
629