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
@use "../../../theme";
5
@use "../../../theme-color";
6
@use "../common";
7
@use "../drawing";
8
/**
10
* Mate-Panel
11
*/
12
// first make all transparent
14
.mate-panel-menu-bar menubar,
15
#PanelApplet-window-menu-applet-button {
16
background-color: transparent;
17
}
18
// let's start it
20
.mate-panel-menu-bar {
21
background-color: theme-color.$panel;
22
color: theme-color.hint(theme-color.$on-panel);
23
font-weight: 500;
24
button {
26
min-height: 16px;
27
min-width: 16px;
28
padding: 0; // NOTE: Most buttons padding are hard-coded to 0 (except for hide buttons)
29
border-radius: 0;
30
color: theme-color.hint(theme-color.$on-panel);
31
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat");
32
&:disabled {
34
background-color: transparent;
35
color: theme-color.disabled-hint(theme-color.$on-panel);
36
}
37
&:checked {
39
$background-color: theme-color.activated-overlay(theme-color.$on-panel);
40
color: theme-color.$on-panel;
41
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat", $on: $background-color);
42
&:disabled {
44
background-color: theme-color.activated-overlay(theme-color.$on-panel);
45
color: theme-color.disabled(theme-color.$on-panel);
46
}
47
}
48
}
49
}
50
// hide buttons
52
PanelToplevel.horizontal > grid > button {
53
min-width: 24px;
54
}
55
PanelToplevel.vertical > grid > button {
57
min-height: 24px;
58
}
59
#PanelApplet {
61
// border-width: 0;
62
}
63
PanelSeparator {
65
color: theme-color.divider(theme-color.$on-panel);
66
}
67
// the grid left from na-tray and wncktasklist
69
MatePanelAppletFrameDBus > MatePanelAppletFrameDBus {
70
background-image:
71
repeating-linear-gradient(
72
currentcolor,
73
currentcolor 4px,
74
transparent 4px,
75
transparent 6px
76
);
77
background-repeat: no-repeat;
78
background-size: 4px 10px;
79
color: theme-color.disabled-hint(theme-color.$on-panel);
80
&:dir(ltr) {
82
background-position: 3px;
83
}
84
&:dir(rtl) {
86
background-position: calc(100% - 3px);
87
}
88
}
89
// main menu
91
.mate-panel-menu-bar {
92
// set normal menubar button
93
menubar > menuitem {
94
color: theme-color.hint(theme-color.$on-panel);
95
&:hover {
97
background-color: theme-color.activated-overlay(theme-color.$on-panel);
98
color: theme-color.$on-panel;
99
}
100
&:disabled {
102
color: theme-color.disabled-hint(theme-color.$on-panel);
103
}
104
}
105
&.horizontal menubar > menuitem {
107
padding: 0 8px;
108
}
109
&.vertical menubar > menuitem {
111
padding: 8px 0;
112
}
113
// set normal menubar menuitem
115
menubar menu > menuitem {
116
// adjust sizing since the menuitem has large icons
117
min-height: theme.$menuitem-size;
118
padding: 0 6px;
119
// font-weight: initial;
120
}
121
}
122
// all applets
124
.mate-panel-menu-bar #PanelApplet button {
125
-GtkWidget-window-dragging: true;
126
// padding: 4px;
127
}
128
.mate-panel-menu-bar #tasklist-button {
130
border-image:
131
radial-gradient(
132
circle closest-corner at center calc(100% - 1px),
133
currentcolor 0%,
134
transparent 0%
135
) 0 0 0 / 0 0 0;
136
&:checked {
138
border-image:
139
radial-gradient(
140
circle closest-corner at center calc(100% - 1px),
141
currentcolor 100%,
142
transparent 0%
143
) 0 0 2 / 0 0 2px;
144
}
145
// instead of #tasklist-button { padding: 0 4px; }
147
image:dir(ltr),
148
label:dir(rtl) {
149
padding-left: 4px;
150
}
151
label:dir(ltr),
153
image:dir(rtl) {
154
padding-right: 4px;
155
}
156
}
157
// #tasklist-button is always horizontal even if the panel is vertical
159
.mate-panel-menu-bar.vertical #tasklist-button {
160
min-height: 32px;
161
}
162
#showdesktop-button {
164
.mate-panel-menu-bar.horizontal & image {
165
min-width: 24px;
166
padding: 0 4px;
167
}
168
.mate-panel-menu-bar.vertical & image {
170
min-height: 24px;
171
padding: 4px 0;
172
}
173
}
174
// WnckPager
176
PanelApplet.wnck-applet .wnck-pager {
177
background-color: transparent;
178
color: theme-color.primary(theme-color.$on-panel);
179
&:hover {
181
background-color: theme-color.hover-overlay(theme-color.$on-panel);
182
}
183
&:active {
185
background-color: theme-color.pressed-overlay(theme-color.$on-panel);
186
}
187
&:selected {
189
background-color: theme-color.$primary;
190
}
191
}
192
#clock-applet-button {
194
.mate-panel-menu-bar.horizontal & label {
195
padding: 0 8px;
196
}
197
.mate-panel-menu-bar.vertical & label {
199
padding: 8px 0;
200
}
201
}
202
#MatePanelPopupWindow {
204
border: 1px solid theme-color.divider(theme-color.$on-surface);
205
border-radius: theme.$corner-radius + 1px;
206
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
207
background-clip: padding-box;
208
background-color: theme-color.$surface-z8;
209
frame > border {
211
border-style: none;
212
background-color: transparent;
213
}
214
calendar {
216
border-style: none;
217
&:not(:selected) {
219
background-color: transparent;
220
}
221
// Add separator between calendar and location
223
+ box {
224
margin-top: -5px;
225
padding-top: 5px;
226
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
227
}
228
}
229
expander > title {
231
min-height: 32px;
232
}
233
button {
235
@extend %button-flat-basic;
236
padding: 4px 16px;
238
}
239
// Weird, this sets the border color of the clockmap
241
> frame > box > box > box > widget {
242
color: theme-color.divider(theme-color.$on-surface);
243
}
244
}
245
na-tray-applet {
247
-NaTrayApplet-icon-padding: 3px;
248
-NaTrayApplet-icon-size: 16;
249
}
250
// remove right space a bit
252
na-tray-applet > widget > box {
253
// margin-right: 2px;
254
}
255
// no background for icon-padding area
257
na-tray-applet widget box widget {
258
// background-color: transparent;
259
}
260
// Classic icon style
262
.mate-panel-menu-bar {
263
-PanelMenuBar-icon-visible: true;
264
}
265
// volume applet, brightness applet
267
.mate-panel-applet-slider {
268
border: 1px solid theme-color.divider(theme-color.$on-surface);
269
border-radius: theme.$corner-radius + 1px;
270
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
271
background-clip: padding-box;
272
background-color: theme-color.$surface-z8;
273
frame > border {
275
border-style: none;
276
background-color: transparent;
277
}
278
}
279
// mate-menu
281
// #PanelApplet itself cannot change the background-color
283
#PanelApplet {
284
&:not(:selected) > box {
285
transition: theme.$transition;
286
}
287
&:selected > box {
289
background-color: theme-color.activated-overlay(theme-color.$on-panel);
290
color: theme-color.$on-panel;
291
}
292
}
293
#mate-menu {
295
// FIXME, does not work
296
border: 1px solid theme-color.divider(theme-color.$on-surface);
297
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
298
background-clip: padding-box;
299
background-color: theme-color.$surface-z8;
300
button {
302
@extend %button-flat-basic;
303
min-height: 24px;
305
min-width: 24px;
306
padding: 4px 0;
307
color: theme-color.$on-surface;
308
font-weight: normal;
309
&:not(.flat) {
311
background-color: theme-color.activated-overlay(theme-color.$on-surface);
312
}
313
image,
315
label + label {
316
color: theme-color.hint(theme-color.$on-surface);
317
}
318
}
319
entry {
321
margin: 0 0 4px;
322
image {
324
margin: 0;
325
}
326
+ button {
328
margin: 0 4px 4px;
329
padding: (theme.$medium-size - 24px) / 2;
330
}
331
}
332
}
333
// brisk-menu
335
.brisk-menu {
336
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
337
background-color: theme-color.$surface-z8;
338
entry {
340
margin-bottom: -2px;
341
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
342
border-image: none;
343
box-shadow: none;
344
background-color: transparent;
345
}
346
entry + box > box {
348
&:dir(ltr) {
349
margin-right: -2px;
350
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
351
}
352
&:dir(rtl) {
354
margin-left: -2px;
355
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
356
}
357
}
358
.categories-list {
360
padding-top: 4px;
361
button {
363
margin: 0 4px;
364
}
365
}
366
.session-button {
368
padding: (theme.$large-size - 24px) / 2;
369
}
370
.frame {
372
border-style: none;
373
background-color: transparent;
374
}
375
.apps-list {
377
padding: 4px 0;
378
background-color: transparent;
379
row {
381
padding: 0;
382
&:hover {
384
box-shadow: none;
385
}
386
}
387
button {
389
border-radius: 0;
390
color: theme-color.$on-surface;
391
font-weight: normal;
392
}
393
}
394
}
395
/**
397
* CAJA File manager
398
*/
399
// pathbar toggle button
401
.caja-navigation-window box.horizontal > button.toggle.image-button {
402
@extend %button-flat-activatable;
403
border-radius: theme.$corner-radius;
405
}
406
// pathbar
408
// pathbar buttons
409
.caja-pathbar button {
410
margin: 0 -1px 0 -2px;
411
// padding: 4px;
412
@extend %pathbar_button;
414
// NOTE: padding is hard-coded to 0
416
&.slider-button {
417
min-width: 24px;
418
}
419
// arrow button
421
> widget {
422
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
423
-GtkArrow-arrow-scaling: 1;
424
}
425
}
426
// places, treeview, history, information, emblems and notes
428
// .caja-side-pane notebook treeview.view,
429
// .caja-side-pane notebook textview.view text,
430
.caja-side-pane notebook viewport.frame,
431
.caja-side-pane notebook widget .vertical {
432
// background-color: $surface-z1;
433
}
434
// treeview rows
436
.caja-side-pane treeview.view {
437
// padding: 2px 0;
438
}
439
.caja-side-pane notebook,
441
.caja-notebook {
442
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
443
.frame {
445
border-style: none;
446
background-color: transparent;
447
}
448
}
449
// window and desktop mode
451
.caja-canvas-item {
452
border-radius: theme.$corner-radius;
453
}
454
// desktop mode
456
.caja-desktop.caja-canvas-item {
457
@extend %iconview-desktop;
458
}
459
.caja-desktop EelEditableLabel.entry {
461
}
462
// override https://github.com/mate-desktop/caja/blob/master/data/caja.css
464
.caja-desktop.view .entry,
465
.caja-navigation-window .view .entry {
466
border: none;
467
border-radius: theme.$corner-radius;
468
background-color: theme-color.entry-fill(theme-color.$on-surface);
469
background-image: none;
470
color: theme-color.$on-surface;
471
&:selected {
473
background-color: theme-color.$selected-overlay;
474
}
475
}
476
.caja-desktop.view .entry {
478
background-color: theme-color.$scrim-alt;
479
color: theme-color.$on-dark;
480
text-shadow: theme.$text-shadow;
481
caret-color: currentcolor; // this shouldn't be needed.
482
&:selected {
484
// FIXME: this should have light overlay.
485
background-color: theme-color.$selected-overlay;
486
}
487
}
488
// statusbar
490
.caja-navigation-window statusbar {
491
margin: 0 -10px;
492
padding: 0 4px;
493
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
494
}
495
// infobar
497
.caja-notebook frame > border {
499
border-style: none;
500
background-color: transparent;
501
}
502
#caja-extra-view-widget {
504
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
505
// background-color: $surface-z1;
506
> box > box > label {
508
font-weight: bold;
509
}
510
button {
512
@extend %button-flat;
513
&:not(:disabled) {
515
color: theme-color.$primary;
516
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
517
}
518
}
519
}
520
/**
522
* Pluma
523
*/
524
// Pluma status bar
526
.pluma-window statusbar {
527
margin: 0 -10px;
528
padding: 0 4px;
529
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
530
frame {
532
> border {
533
border-style: none;
534
background-color: transparent;
535
}
536
button.flat {
538
padding: 0 4px;
539
border-radius: 0;
540
widget {
542
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
543
-GtkArrow-arrow-scaling: 1;
544
}
545
}
546
}
547
}
548
// Printpreview
550
.pluma-print-preview {
551
toolbar {
552
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
553
}
554
scrolledwindow {
556
// background-color: $surface-z1;
557
}
558
}
559
// sidebar file-browser
561
.pluma-window paned.horizontal box.vertical {
562
box.horizontal button.flat {
563
margin: 1px;
564
@extend %button-small;
566
}
567
.frame {
569
border-style: none;
570
background-color: transparent;
571
}
572
notebook.frame {
574
margin-top: -1px;
575
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
576
box.vertical toolbar.horizontal {
578
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
579
}
580
}
581
}
582
/**
584
* Atril
585
*/
586
.atril-window paned.horizontal box.vertical {
588
.frame {
589
border-style: none;
590
background-color: transparent;
591
}
592
notebook .frame {
594
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
595
}
596
}
597
/* mate-screensaver lock dialog */
599
.lock-dialog {
601
border: 1px solid theme-color.divider(theme-color.$on-surface);
602
border-radius: theme.$corner-radius + 1px;
603
box-shadow: theme.$shadow-z6, inset 0 1px theme-color.highlight(theme-color.$surface-z8); // not sure if box-shadow works here
604
background-clip: padding-box;
605
background-color: theme-color.$surface-z8;
606
frame > border {
608
border-style: none;
609
background-color: transparent;
610
}
611
button {
613
@extend %button-flat;
614
&:not(:disabled) {
616
color: theme-color.$primary;
617
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
618
}
619
}
620
}
621
/* multimedia OSD */
623
MsdOsdWindow.background.osd {
625
border-radius: theme.$corner-radius;
626
background-color: theme-color.$tooltip;
627
color: theme-color.$on-tooltip;
628
.trough {
630
border-radius: 0;
631
background-color: theme-color.disabled-stroke(theme-color.$on-tooltip);
632
}
633
.progressbar {
635
border-radius: 0;
636
background-color: theme-color.$on-tooltip;
637
}
638
// For mate-settings-daemon noncomposited osd windows
640
&.msd-osd-window-solid {
641
}
642
}
643