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);
27
&:disabled {
29
color: disabled-hint($on-panel);
30
}
31
&:checked {
33
color: $on-panel;
34
&:disabled {
36
color: disabled($on-panel);
37
}
38
}
39
}
40
}
41
// hide buttons
43
PanelToplevel.horizontal > grid > button {
44
min-width: 24px;
45
}
46
PanelToplevel.vertical > grid > button {
48
min-height: 24px;
49
}
50
#PanelApplet {
52
// border-width: 0;
53
}
54
PanelSeparator {
56
color: divider($on-panel);
57
}
58
// the grid left from na-tray and wncktasklist
60
MatePanelAppletFrameDBus > MatePanelAppletFrameDBus {
61
background-image:
62
repeating-linear-gradient(
63
currentcolor,
64
currentcolor 4px,
65
transparent 4px,
66
transparent 6px
67
);
68
background-repeat: no-repeat;
69
background-size: 4px 10px;
70
color: disabled-hint($on-panel);
71
&:dir(ltr) {
73
background-position: 3px;
74
}
75
&:dir(rtl) {
77
background-position: calc(100% - 3px);
78
}
79
}
80
// main menu
82
.mate-panel-menu-bar {
83
// set normal menubar button
84
menubar > menuitem {
85
color: hint($on-panel);
86
&:hover {
88
color: $on-panel;
89
}
90
&:disabled {
92
color: disabled-hint($on-panel);
93
}
94
}
95
&.horizontal menubar > menuitem {
97
padding: 0 8px;
98
}
99
&.vertical menubar > menuitem {
101
padding: 8px 0;
102
}
103
// set normal menubar menuitem
105
menubar menu > menuitem {
106
// adjust sizing since the menuitem has large icons
107
min-height: $menuitem-size;
108
padding: 0 6px;
109
// font-weight: initial;
110
}
111
}
112
// all applets
114
.mate-panel-menu-bar #PanelApplet button {
115
-GtkWidget-window-dragging: true;
116
// padding: 4px;
117
}
118
.mate-panel-menu-bar #tasklist-button {
120
border-image:
121
radial-gradient(
122
circle closest-corner at center calc(100% - 1px),
123
currentcolor 0%,
124
transparent 0%
125
) 0 0 0 / 0 0 0;
126
&:checked {
128
border-image:
129
radial-gradient(
130
circle closest-corner at center calc(100% - 1px),
131
currentcolor 100%,
132
transparent 0%
133
) 0 0 2 / 0 0 2px;
134
}
135
// instead of #tasklist-button { padding: 0 4px; }
137
image:dir(ltr),
138
label:dir(rtl) {
139
padding-left: 4px;
140
}
141
label:dir(ltr),
143
image:dir(rtl) {
144
padding-right: 4px;
145
}
146
}
147
// #tasklist-button is always horizontal even if the panel is vertical
149
.mate-panel-menu-bar.vertical #tasklist-button {
150
min-height: 32px;
151
}
152
#showdesktop-button {
154
.mate-panel-menu-bar.horizontal & image {
155
min-width: 24px;
156
padding: 0 4px;
157
}
158
.mate-panel-menu-bar.vertical & image {
160
min-height: 24px;
161
padding: 4px 0;
162
}
163
}
164
// WnckPager
166
PanelApplet.wnck-applet .wnck-pager {
167
background-color: transparent;
168
color: primary($on-panel);
169
&:hover {
171
background-color: overlay("hover", $on-panel);
172
}
173
&:active {
175
background-color: overlay("pressed", $on-panel);
176
}
177
&:selected {
179
background-color: $primary;
180
}
181
}
182
#clock-applet-button {
184
.mate-panel-menu-bar.horizontal & label {
185
padding: 0 8px;
186
}
187
.mate-panel-menu-bar.vertical & label {
189
padding: 8px 0;
190
}
191
}
192
#MatePanelPopupWindow {
194
border: 1px solid divider($on-surface);
195
border-radius: $corner-radius + 1px;
196
box-shadow: inset 0 1px highlight($surface);
197
background-color: $surface;
198
frame > border {
200
border-style: none;
201
}
202
calendar {
204
border-style: none;
205
&:not(:selected) {
207
background-color: transparent;
208
}
209
// Add separator between calendar and location
211
+ box {
212
margin-top: -5px;
213
padding-top: 5px;
214
border-top: 1px solid divider($on-surface);
215
}
216
}
217
expander > title {
219
min-height: 32px;
220
}
221
button {
223
@extend %button-flat-basic;
224
padding: 4px 16px;
226
}
227
// Weird, this sets the border color of the clockmap
229
> frame > box > box > box > widget {
230
color: divider($on-surface);
231
}
232
}
233
na-tray-applet {
235
-NaTrayApplet-icon-padding: 3px;
236
-NaTrayApplet-icon-size: 16;
237
}
238
// remove right space a bit
240
na-tray-applet > widget > box {
241
// margin-right: 2px;
242
}
243
// no background for icon-padding area
245
na-tray-applet widget box widget {
246
// background-color: transparent;
247
}
248
// Classic icon style
250
.mate-panel-menu-bar {
251
-PanelMenuBar-icon-visible: true;
252
}
253
// volume applet, brightness applet
255
.mate-panel-applet-slider {
256
border: 1px solid divider($on-surface);
257
border-radius: $corner-radius + 1px;
258
box-shadow: inset 0 1px highlight($surface);
259
background-color: $surface;
260
frame > border {
262
border-style: none;
263
}
264
}
265
// mate-menu
267
// #PanelApplet itself cannot change the background-color
269
#PanelApplet {
270
&:not(:selected) > box {
271
transition: $transition;
272
}
273
&:selected > box {
275
background-color: overlay("activated", $on-panel);
276
color: $on-panel;
277
}
278
}
279
#mate-menu {
281
// FIXME, does not work
282
border: 1px solid divider($on-surface);
283
background-color: $surface;
284
button {
286
@extend %button-flat-basic;
287
min-height: 24px;
289
min-width: 24px;
290
padding: 4px 0;
291
color: $on-surface;
292
font-weight: normal;
293
&:not(.flat) {
295
background-color: overlay("activated", $on-surface);
296
}
297
image,
299
label + label {
300
color: hint($on-surface);
301
}
302
}
303
entry {
305
margin: 0 0 4px;
306
image {
308
margin: 0;
309
}
310
+ button {
312
margin: 0 4px 4px;
313
padding: ($medium-size - 24px) / 2;
314
}
315
}
316
}
317
// brisk-menu
319
.brisk-menu {
320
box-shadow: inset 0 1px highlight($surface);
321
background-color: $surface;
322
entry {
324
margin-bottom: -2px;
325
border-bottom: 1px solid divider($on-surface);
326
border-image: none;
327
box-shadow: none;
328
background-color: transparent;
329
}
330
entry + box > box {
332
&:dir(ltr) {
333
margin-right: -2px;
334
border-right: 1px solid divider($on-surface);
335
}
336
&:dir(rtl) {
338
margin-left: -2px;
339
border-left: 1px solid divider($on-surface);
340
}
341
}
342
.categories-list {
344
padding-top: 4px;
345
button {
347
margin: 0 4px;
348
&:checked {
350
@include ink-color($primary);
351
}
352
}
353
}
354
.session-button {
356
padding: ($large-size - 24px) / 2;
357
}
358
.frame {
360
border-style: none;
361
}
362
.apps-list {
364
padding: 4px 0;
365
background-color: transparent;
366
row {
368
padding: 0;
369
&:hover {
371
box-shadow: none;
372
}
373
}
374
button {
376
border-radius: 0;
377
color: $on-surface;
378
font-weight: normal;
379
}
380
}
381
}
382
/**
384
* CAJA File manager
385
*/
386
// pathbar toggle button
388
.caja-navigation-window box.horizontal > button.toggle.image-button {
389
@extend %button-flat-activatable;
390
border-radius: $corner-radius;
392
}
393
// pathbar
395
// pathbar buttons
396
.caja-pathbar button {
397
margin: 0 -1px 0 -2px;
398
// padding: 4px;
399
@extend %pathbar_button;
401
// NOTE: padding is hard-coded to 0
403
&.slider-button {
404
min-width: 24px;
405
}
406
// arrow button
408
> widget {
409
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
410
-GtkArrow-arrow-scaling: 1;
411
}
412
}
413
// places, treeview, history, information, emblems and notes
415
// .caja-side-pane notebook treeview.view,
416
// .caja-side-pane notebook textview.view text,
417
.caja-side-pane notebook viewport.frame,
418
.caja-side-pane notebook widget .vertical {
419
background-color: $base;
420
}
421
// treeview rows
423
.caja-side-pane treeview.view {
424
// padding: 2px 0;
425
}
426
.caja-side-pane notebook,
428
.caja-notebook {
429
border-top: 1px solid divider($on-surface);
430
.frame {
432
border-style: none;
433
}
434
}
435
// window and desktop mode
437
.caja-canvas-item {
438
border-radius: $corner-radius;
439
}
440
// desktop mode
442
.caja-desktop.caja-canvas-item {
443
@extend %iconview-desktop;
444
}
445
.caja-desktop EelEditableLabel.entry {
447
}
448
// override https://github.com/mate-desktop/caja/blob/master/data/caja.css
450
.caja-desktop.view .entry,
451
.caja-navigation-window .view .entry {
452
border: none;
453
border-radius: $corner-radius;
454
background-color: entry-fill($on-surface);
455
background-image: none;
456
color: $on-surface;
457
&:selected {
459
background-color: $overlay-selected;
460
}
461
}
462
.caja-desktop.view .entry {
464
background-color: $scrim-alt;
465
color: $on-dark;
466
text-shadow: $text-shadow;
467
caret-color: currentcolor; // this shouldn't be needed.
468
&:selected {
470
// FIXME: this should have light overlay.
471
background-color: $overlay-selected;
472
}
473
}
474
// statusbar
476
.caja-navigation-window statusbar {
477
margin: 0 -10px;
478
padding: 0 4px;
479
border-top: 1px solid divider($on-surface);
480
}
481
// infobar
483
.caja-notebook frame > border {
485
border-style: none;
486
}
487
#caja-extra-view-widget {
489
border-bottom: 1px solid divider($on-surface);
490
background-color: $base;
491
> box > box > label {
493
font-weight: bold;
494
}
495
button {
497
@extend %button-flat;
498
&:not(:disabled) {
500
@include ink-color($primary);
501
}
502
}
503
}
504
/**
506
* Pluma
507
*/
508
// Pluma status bar
510
.pluma-window statusbar {
511
margin: 0 -10px;
512
padding: 0 4px;
513
border-top: 1px solid divider($on-surface);
514
frame {
516
> border {
517
border-style: none;
518
}
519
button.flat {
521
padding: 0 4px;
522
border-radius: 0;
523
widget {
525
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
526
-GtkArrow-arrow-scaling: 1;
527
}
528
}
529
}
530
}
531
// Printpreview
533
.pluma-print-preview {
534
toolbar {
535
border-bottom: 1px solid divider($on-surface);
536
}
537
scrolledwindow {
539
// background-color: $base;
540
}
541
}
542
// sidebar file-browser
544
.pluma-window paned.horizontal box.vertical {
545
box.horizontal button.flat {
546
margin: 1px;
547
@extend %button-small;
549
}
550
.frame {
552
border-style: none;
553
}
554
notebook.frame {
556
margin-top: -1px;
557
border-top: 1px solid divider($on-surface);
558
box.vertical toolbar.horizontal {
560
border-bottom: 1px solid divider($on-surface);
561
}
562
}
563
}
564
/**
566
* Atril
567
*/
568
.atril-window paned.horizontal box.vertical {
570
.frame {
571
border-style: none;
572
}
573
notebook .frame {
575
border-top: 1px solid divider($on-surface);
576
}
577
}
578
/* mate-screensaver lock dialog */
580
.lock-dialog {
582
border: 1px solid divider($on-surface);
583
border-radius: $corner-radius + 1px;
584
box-shadow: $shadow-z6, inset 0 1px highlight($surface); // not sure if box-shadow works here
585
background-color: $surface;
586
frame > border {
588
border-style: none;
589
}
590
button {
592
@extend %button-flat;
593
&:not(:disabled) {
595
@include ink-color($primary);
596
}
597
}
598
}
599
/* multimedia OSD */
601
MsdOsdWindow.background.osd {
603
border-radius: $corner-radius;
604
background-color: $tooltip;
605
color: $on-tooltip;
606
.trough {
608
border-radius: 0;
609
background-color: disabled-stroke($on-tooltip);
610
}
611
.progressbar {
613
border-radius: 0;
614
background-color: $on-tooltip;
615
}
616
// For mate-settings-daemon noncomposited osd windows
618
&.msd-osd-window-solid {
619
}
620
}
621