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);
202
background-clip: padding-box;
203
background-color: $surface;
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);
266
background-clip: padding-box;
267
background-color: $surface;
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
background-clip: padding-box;
293
background-color: $surface;
294
button {
296
@extend %button-flat-basic;
297
min-height: 24px;
299
min-width: 24px;
300
padding: 4px 0;
301
color: $on-surface;
302
font-weight: normal;
303
&:not(.flat) {
305
background-color: overlay("activated", $on-surface);
306
}
307
image,
309
label + label {
310
color: hint($on-surface);
311
}
312
}
313
entry {
315
margin: 0 0 4px;
316
image {
318
margin: 0;
319
}
320
+ button {
322
margin: 0 4px 4px;
323
padding: ($medium-size - 24px) / 2;
324
}
325
}
326
}
327
// brisk-menu
329
.brisk-menu {
330
box-shadow: inset 0 1px highlight($surface);
331
background-color: $surface;
332
entry {
334
margin-bottom: -2px;
335
border-bottom: 1px solid divider($on-surface);
336
border-image: none;
337
box-shadow: none;
338
background-color: transparent;
339
}
340
entry + box > box {
342
&:dir(ltr) {
343
margin-right: -2px;
344
border-right: 1px solid divider($on-surface);
345
}
346
&:dir(rtl) {
348
margin-left: -2px;
349
border-left: 1px solid divider($on-surface);
350
}
351
}
352
.categories-list {
354
padding-top: 4px;
355
button {
357
margin: 0 4px;
358
}
359
}
360
.session-button {
362
padding: ($large-size - 24px) / 2;
363
}
364
.frame {
366
border-style: none;
367
background-color: transparent;
368
}
369
.apps-list {
371
padding: 4px 0;
372
background-color: transparent;
373
row {
375
padding: 0;
376
&:hover {
378
box-shadow: none;
379
}
380
}
381
button {
383
border-radius: 0;
384
color: $on-surface;
385
font-weight: normal;
386
}
387
}
388
}
389
/**
391
* CAJA File manager
392
*/
393
// pathbar toggle button
395
.caja-navigation-window box.horizontal > button.toggle.image-button {
396
@extend %button-flat-activatable;
397
border-radius: $corner-radius;
399
}
400
// pathbar
402
// pathbar buttons
403
.caja-pathbar button {
404
margin: 0 -1px 0 -2px;
405
// padding: 4px;
406
@extend %pathbar_button;
408
// NOTE: padding is hard-coded to 0
410
&.slider-button {
411
min-width: 24px;
412
}
413
// arrow button
415
> widget {
416
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
417
-GtkArrow-arrow-scaling: 1;
418
}
419
}
420
// places, treeview, history, information, emblems and notes
422
// .caja-side-pane notebook treeview.view,
423
// .caja-side-pane notebook textview.view text,
424
.caja-side-pane notebook viewport.frame,
425
.caja-side-pane notebook widget .vertical {
426
// background-color: $base;
427
}
428
// treeview rows
430
.caja-side-pane treeview.view {
431
// padding: 2px 0;
432
}
433
.caja-side-pane notebook,
435
.caja-notebook {
436
border-top: 1px solid divider($on-surface);
437
.frame {
439
border-style: none;
440
background-color: transparent;
441
}
442
}
443
// window and desktop mode
445
.caja-canvas-item {
446
border-radius: $corner-radius;
447
}
448
// desktop mode
450
.caja-desktop.caja-canvas-item {
451
@extend %iconview-desktop;
452
}
453
.caja-desktop EelEditableLabel.entry {
455
}
456
// override https://github.com/mate-desktop/caja/blob/master/data/caja.css
458
.caja-desktop.view .entry,
459
.caja-navigation-window .view .entry {
460
border: none;
461
border-radius: $corner-radius;
462
background-color: entry-fill($on-surface);
463
background-image: none;
464
color: $on-surface;
465
&:selected {
467
background-color: $overlay-selected;
468
}
469
}
470
.caja-desktop.view .entry {
472
background-color: $scrim-alt;
473
color: $on-dark;
474
text-shadow: $text-shadow;
475
caret-color: currentcolor; // this shouldn't be needed.
476
&:selected {
478
// FIXME: this should have light overlay.
479
background-color: $overlay-selected;
480
}
481
}
482
// statusbar
484
.caja-navigation-window statusbar {
485
margin: 0 -10px;
486
padding: 0 4px;
487
border-top: 1px solid divider($on-surface);
488
}
489
// infobar
491
.caja-notebook frame > border {
493
border-style: none;
494
background-color: transparent;
495
}
496
#caja-extra-view-widget {
498
border-bottom: 1px solid divider($on-surface);
499
// background-color: $base;
500
> box > box > label {
502
font-weight: bold;
503
}
504
button {
506
@extend %button-flat;
507
&:not(:disabled) {
509
color: $primary;
510
@include ink-color($primary, $button-style: "flat");
511
}
512
}
513
}
514
/**
516
* Pluma
517
*/
518
// Pluma status bar
520
.pluma-window statusbar {
521
margin: 0 -10px;
522
padding: 0 4px;
523
border-top: 1px solid divider($on-surface);
524
frame {
526
> border {
527
border-style: none;
528
background-color: transparent;
529
}
530
button.flat {
532
padding: 0 4px;
533
border-radius: 0;
534
widget {
536
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
537
-GtkArrow-arrow-scaling: 1;
538
}
539
}
540
}
541
}
542
// Printpreview
544
.pluma-print-preview {
545
toolbar {
546
border-bottom: 1px solid divider($on-surface);
547
}
548
scrolledwindow {
550
// background-color: $base;
551
}
552
}
553
// sidebar file-browser
555
.pluma-window paned.horizontal box.vertical {
556
box.horizontal button.flat {
557
margin: 1px;
558
@extend %button-small;
560
}
561
.frame {
563
border-style: none;
564
background-color: transparent;
565
}
566
notebook.frame {
568
margin-top: -1px;
569
border-top: 1px solid divider($on-surface);
570
box.vertical toolbar.horizontal {
572
border-bottom: 1px solid divider($on-surface);
573
}
574
}
575
}
576
/**
578
* Atril
579
*/
580
.atril-window paned.horizontal box.vertical {
582
.frame {
583
border-style: none;
584
background-color: transparent;
585
}
586
notebook .frame {
588
border-top: 1px solid divider($on-surface);
589
}
590
}
591
/* mate-screensaver lock dialog */
593
.lock-dialog {
595
border: 1px solid divider($on-surface);
596
border-radius: $corner-radius + 1px;
597
box-shadow: $shadow-z6, inset 0 1px highlight($surface); // not sure if box-shadow works here
598
background-clip: padding-box;
599
background-color: $surface;
600
frame > border {
602
border-style: none;
603
background-color: transparent;
604
}
605
button {
607
@extend %button-flat;
608
&:not(:disabled) {
610
color: $primary;
611
@include ink-color($primary, $button-style: "flat");
612
}
613
}
614
}
615
/* multimedia OSD */
617
MsdOsdWindow.background.osd {
619
border-radius: $corner-radius;
620
background-color: $tooltip;
621
color: $on-tooltip;
622
.trough {
624
border-radius: 0;
625
background-color: disabled-stroke($on-tooltip);
626
}
627
.progressbar {
629
border-radius: 0;
630
background-color: $on-tooltip;
631
}
632
// For mate-settings-daemon noncomposited osd windows
634
&.msd-osd-window-solid {
635
}
636
}
637