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
}
207
calendar {
209
border-style: none;
210
&:not(:selected) {
212
background-color: transparent;
213
}
214
// Add separator between calendar and location
216
+ box {
217
margin-top: -5px;
218
padding-top: 5px;
219
border-top: 1px solid divider($on-surface);
220
}
221
}
222
expander > title {
224
min-height: 32px;
225
}
226
button {
228
@extend %button-flat-basic;
229
padding: 4px 16px;
231
}
232
// Weird, this sets the border color of the clockmap
234
> frame > box > box > box > widget {
235
color: divider($on-surface);
236
}
237
}
238
na-tray-applet {
240
-NaTrayApplet-icon-padding: 3px;
241
-NaTrayApplet-icon-size: 16;
242
}
243
// remove right space a bit
245
na-tray-applet > widget > box {
246
// margin-right: 2px;
247
}
248
// no background for icon-padding area
250
na-tray-applet widget box widget {
251
// background-color: transparent;
252
}
253
// Classic icon style
255
.mate-panel-menu-bar {
256
-PanelMenuBar-icon-visible: true;
257
}
258
// volume applet, brightness applet
260
.mate-panel-applet-slider {
261
border: 1px solid divider($on-surface);
262
border-radius: $corner-radius + 1px;
263
box-shadow: inset 0 1px highlight($surface);
264
background-clip: padding-box;
265
background-color: $surface;
266
frame > border {
268
border-style: none;
269
}
270
}
271
// mate-menu
273
// #PanelApplet itself cannot change the background-color
275
#PanelApplet {
276
&:not(:selected) > box {
277
transition: $transition;
278
}
279
&:selected > box {
281
background-color: overlay("activated", $on-panel);
282
color: $on-panel;
283
}
284
}
285
#mate-menu {
287
// FIXME, does not work
288
border: 1px solid divider($on-surface);
289
background-clip: padding-box;
290
background-color: $surface;
291
button {
293
@extend %button-flat-basic;
294
min-height: 24px;
296
min-width: 24px;
297
padding: 4px 0;
298
color: $on-surface;
299
font-weight: normal;
300
&:not(.flat) {
302
background-color: overlay("activated", $on-surface);
303
}
304
image,
306
label + label {
307
color: hint($on-surface);
308
}
309
}
310
entry {
312
margin: 0 0 4px;
313
image {
315
margin: 0;
316
}
317
+ button {
319
margin: 0 4px 4px;
320
padding: ($medium-size - 24px) / 2;
321
}
322
}
323
}
324
// brisk-menu
326
.brisk-menu {
327
box-shadow: inset 0 1px highlight($surface);
328
background-color: $surface;
329
entry {
331
margin-bottom: -2px;
332
border-bottom: 1px solid divider($on-surface);
333
border-image: none;
334
box-shadow: none;
335
background-color: transparent;
336
}
337
entry + box > box {
339
&:dir(ltr) {
340
margin-right: -2px;
341
border-right: 1px solid divider($on-surface);
342
}
343
&:dir(rtl) {
345
margin-left: -2px;
346
border-left: 1px solid divider($on-surface);
347
}
348
}
349
.categories-list {
351
padding-top: 4px;
352
button {
354
margin: 0 4px;
355
&:checked {
357
background-color: overlay("activated", $primary);
358
color: $primary;
359
@include ink-color($primary);
360
}
361
}
362
}
363
.session-button {
365
padding: ($large-size - 24px) / 2;
366
}
367
.frame {
369
border-style: none;
370
}
371
.apps-list {
373
padding: 4px 0;
374
background-color: transparent;
375
row {
377
padding: 0;
378
&:hover {
380
box-shadow: none;
381
}
382
}
383
button {
385
border-radius: 0;
386
color: $on-surface;
387
font-weight: normal;
388
}
389
}
390
}
391
/**
393
* CAJA File manager
394
*/
395
// pathbar toggle button
397
.caja-navigation-window box.horizontal > button.toggle.image-button {
398
@extend %button-flat-activatable;
399
border-radius: $corner-radius;
401
}
402
// pathbar
404
// pathbar buttons
405
.caja-pathbar button {
406
margin: 0 -1px 0 -2px;
407
// padding: 4px;
408
@extend %pathbar_button;
410
// NOTE: padding is hard-coded to 0
412
&.slider-button {
413
min-width: 24px;
414
}
415
// arrow button
417
> widget {
418
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
419
-GtkArrow-arrow-scaling: 1;
420
}
421
}
422
// places, treeview, history, information, emblems and notes
424
// .caja-side-pane notebook treeview.view,
425
// .caja-side-pane notebook textview.view text,
426
.caja-side-pane notebook viewport.frame,
427
.caja-side-pane notebook widget .vertical {
428
background-color: $base;
429
}
430
// treeview rows
432
.caja-side-pane treeview.view {
433
// padding: 2px 0;
434
}
435
.caja-side-pane notebook,
437
.caja-notebook {
438
border-top: 1px solid divider($on-surface);
439
.frame {
441
border-style: none;
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
}
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);
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
}
529
button.flat {
531
padding: 0 4px;
532
border-radius: 0;
533
widget {
535
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
536
-GtkArrow-arrow-scaling: 1;
537
}
538
}
539
}
540
}
541
// Printpreview
543
.pluma-print-preview {
544
toolbar {
545
border-bottom: 1px solid divider($on-surface);
546
}
547
scrolledwindow {
549
// background-color: $base;
550
}
551
}
552
// sidebar file-browser
554
.pluma-window paned.horizontal box.vertical {
555
box.horizontal button.flat {
556
margin: 1px;
557
@extend %button-small;
559
}
560
.frame {
562
border-style: none;
563
}
564
notebook.frame {
566
margin-top: -1px;
567
border-top: 1px solid divider($on-surface);
568
box.vertical toolbar.horizontal {
570
border-bottom: 1px solid divider($on-surface);
571
}
572
}
573
}
574
/**
576
* Atril
577
*/
578
.atril-window paned.horizontal box.vertical {
580
.frame {
581
border-style: none;
582
}
583
notebook .frame {
585
border-top: 1px solid divider($on-surface);
586
}
587
}
588
/* mate-screensaver lock dialog */
590
.lock-dialog {
592
border: 1px solid divider($on-surface);
593
border-radius: $corner-radius + 1px;
594
box-shadow: $shadow-z6, inset 0 1px highlight($surface); // not sure if box-shadow works here
595
background-clip: padding-box;
596
background-color: $surface;
597
frame > border {
599
border-style: none;
600
}
601
button {
603
@extend %button-flat;
604
&:not(:disabled) {
606
color: $primary;
607
@include ink-color($primary);
608
}
609
}
610
}
611
/* multimedia OSD */
613
MsdOsdWindow.background.osd {
615
border-radius: $corner-radius;
616
background-color: $tooltip;
617
color: $on-tooltip;
618
.trough {
620
border-radius: 0;
621
background-color: disabled-stroke($on-tooltip);
622
}
623
.progressbar {
625
border-radius: 0;
626
background-color: $on-tooltip;
627
}
628
// For mate-settings-daemon noncomposited osd windows
630
&.msd-osd-window-solid {
631
}
632
}
633