ASCII text
1
// Based on:
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 "../../../shadow";
7
@use "../common";
8
@use "../drawing";
9
/**
11
* Mate-Panel
12
*/
13
// first make all transparent
15
.mate-panel-menu-bar menubar,
16
#PanelApplet-window-menu-applet-button {
17
background-color: transparent;
18
}
19
// let's start it
21
.mate-panel-menu-bar {
22
background-color: theme-color.$panel;
23
color: theme-color.hint(theme-color.$on-panel);
24
font-weight: 500;
25
button {
27
min-height: 16px;
28
min-width: 16px;
29
padding: 0; // NOTE: Most buttons padding are hard-coded to 0 (except for hide buttons)
30
border-radius: 0;
31
color: theme-color.hint(theme-color.$on-panel);
32
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat");
33
&:disabled {
35
background-color: transparent;
36
color: theme-color.disabled-hint(theme-color.$on-panel);
37
}
38
&:checked {
40
$background-color: theme-color.activated-overlay(theme-color.$on-panel);
41
color: theme-color.$on-panel;
42
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat", $on: $background-color);
43
&:disabled {
45
background-color: theme-color.activated-overlay(theme-color.$on-panel);
46
color: theme-color.disabled(theme-color.$on-panel);
47
}
48
}
49
}
50
}
51
// hide buttons
53
PanelToplevel.horizontal > grid > button {
54
min-width: 24px;
55
}
56
PanelToplevel.vertical > grid > button {
58
min-height: 24px;
59
}
60
#PanelApplet {
62
// border-width: 0;
63
}
64
PanelSeparator {
66
color: theme-color.divider(theme-color.$on-panel);
67
}
68
// the grid left from na-tray and wncktasklist
70
MatePanelAppletFrameDBus > MatePanelAppletFrameDBus {
71
background-image:
72
repeating-linear-gradient(
73
currentcolor,
74
currentcolor 4px,
75
transparent 4px,
76
transparent 6px
77
);
78
background-repeat: no-repeat;
79
background-size: 4px 10px;
80
color: theme-color.disabled-hint(theme-color.$on-panel);
81
&:dir(ltr) {
83
background-position: 3px;
84
}
85
&:dir(rtl) {
87
background-position: calc(100% - 3px);
88
}
89
}
90
// main menu
92
.mate-panel-menu-bar {
93
// set normal menubar button
94
menubar > menuitem {
95
color: theme-color.hint(theme-color.$on-panel);
96
&:hover {
98
background-color: theme-color.activated-overlay(theme-color.$on-panel);
99
color: theme-color.$on-panel;
100
}
101
&:disabled {
103
color: theme-color.disabled-hint(theme-color.$on-panel);
104
}
105
}
106
&.horizontal menubar > menuitem {
108
padding: 0 8px;
109
}
110
&.vertical menubar > menuitem {
112
padding: 8px 0;
113
}
114
// set normal menubar menuitem
116
menubar menu > menuitem {
117
// adjust sizing since the menuitem has large icons
118
min-height: theme.$menu-item-dense-height;
119
padding: 0 6px;
120
// font-weight: initial;
121
}
122
}
123
// all applets
125
.mate-panel-menu-bar #PanelApplet button {
126
-GtkWidget-window-dragging: true;
127
// padding: 4px;
128
}
129
.mate-panel-menu-bar #tasklist-button {
131
border-image:
132
radial-gradient(
133
circle closest-corner at center calc(100% - 1px),
134
currentcolor 0%,
135
transparent 0%
136
) 0 0 0 / 0 0 0;
137
&:checked {
139
border-image:
140
radial-gradient(
141
circle closest-corner at center calc(100% - 1px),
142
currentcolor 100%,
143
transparent 0%
144
) 0 0 2 / 0 0 2px;
145
}
146
// instead of #tasklist-button { padding: 0 4px; }
148
image:dir(ltr),
149
label:dir(rtl) {
150
padding-left: 4px;
151
}
152
label:dir(ltr),
154
image:dir(rtl) {
155
padding-right: 4px;
156
}
157
}
158
// #tasklist-button is always horizontal even if the panel is vertical
160
.mate-panel-menu-bar.vertical #tasklist-button {
161
min-height: 32px;
162
}
163
#showdesktop-button {
165
.mate-panel-menu-bar.horizontal & image {
166
min-width: 24px;
167
padding: 0 4px;
168
}
169
.mate-panel-menu-bar.vertical & image {
171
min-height: 24px;
172
padding: 4px 0;
173
}
174
}
175
// WnckPager
177
PanelApplet.wnck-applet .wnck-pager {
178
background-color: transparent;
179
color: theme-color.primary(theme-color.$on-panel);
180
&:hover {
182
background-color: theme-color.hover-overlay(theme-color.$on-panel);
183
}
184
&:active {
186
background-color: theme-color.pressed-overlay(theme-color.$on-panel);
187
}
188
&:selected {
190
background-color: theme-color.$primary;
191
}
192
}
193
#clock-applet-button {
195
.mate-panel-menu-bar.horizontal & label {
196
padding: 0 8px;
197
}
198
.mate-panel-menu-bar.vertical & label {
200
padding: 8px 0;
201
}
202
}
203
#MatePanelPopupWindow {
205
border: 1px solid theme-color.divider(theme-color.$on-surface);
206
border-radius: theme.$corner-radius + 1px;
207
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
208
background-clip: padding-box;
209
background-color: theme-color.$surface-z8;
210
frame > border {
212
border-style: none;
213
background-color: transparent;
214
}
215
calendar {
217
border-style: none;
218
&:not(:selected) {
220
background-color: transparent;
221
}
222
// Add separator between calendar and location
224
+ box {
225
margin-top: -5px;
226
padding-top: 5px;
227
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
228
}
229
}
230
expander > title {
232
min-height: 32px;
233
}
234
button {
236
@extend %button-flat-basic;
237
padding: 4px 16px;
239
}
240
// Weird, this sets the border color of the clockmap
242
> frame > box > box > box > widget {
243
color: theme-color.divider(theme-color.$on-surface);
244
}
245
}
246
na-tray-applet {
248
-NaTrayApplet-icon-padding: 3px;
249
-NaTrayApplet-icon-size: 16;
250
}
251
// remove right space a bit
253
na-tray-applet > widget > box {
254
// margin-right: 2px;
255
}
256
// no background for icon-padding area
258
na-tray-applet widget box widget {
259
// background-color: transparent;
260
}
261
// Classic icon style
263
.mate-panel-menu-bar {
264
-PanelMenuBar-icon-visible: true;
265
}
266
// volume applet, brightness applet
268
.mate-panel-applet-slider {
269
border: 1px solid theme-color.divider(theme-color.$on-surface);
270
border-radius: theme.$corner-radius + 1px;
271
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
272
background-clip: padding-box;
273
background-color: theme-color.$surface-z8;
274
frame > border {
276
border-style: none;
277
background-color: transparent;
278
}
279
}
280
// mate-menu
282
// #PanelApplet itself cannot change the background-color
284
#PanelApplet {
285
&:not(:selected) > box {
286
transition: theme.$transition;
287
}
288
&:selected > box {
290
background-color: theme-color.activated-overlay(theme-color.$on-panel);
291
color: theme-color.$on-panel;
292
}
293
}
294
#mate-menu {
296
// FIXME, does not work
297
border: 1px solid theme-color.divider(theme-color.$on-surface);
298
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
299
background-clip: padding-box;
300
background-color: theme-color.$surface-z8;
301
button {
303
@extend %button-flat-basic;
304
min-height: 24px;
306
min-width: 24px;
307
padding: 4px 0;
308
color: theme-color.$on-surface;
309
font-weight: normal;
310
&:not(.flat) {
312
background-color: theme-color.activated-overlay(theme-color.$on-surface);
313
}
314
image,
316
label + label {
317
color: theme-color.hint(theme-color.$on-surface);
318
}
319
}
320
entry {
322
margin: 0 0 4px;
323
image {
325
margin: 0;
326
}
327
+ button {
329
margin: 0 4px 4px;
330
padding: (theme.$medium-size - 24px) / 2;
331
}
332
}
333
}
334
// brisk-menu
336
.brisk-menu {
337
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
338
background-color: theme-color.$surface-z8;
339
entry {
341
margin-bottom: -2px;
342
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
343
border-image: none;
344
box-shadow: none;
345
background-color: transparent;
346
}
347
entry + box > box {
349
&:dir(ltr) {
350
margin-right: -2px;
351
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
352
}
353
&:dir(rtl) {
355
margin-left: -2px;
356
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
357
}
358
}
359
.categories-list {
361
padding-top: 4px;
362
button {
364
margin: 0 4px;
365
}
366
}
367
.session-button {
369
padding: (theme.$large-size - 24px) / 2;
370
}
371
.frame {
373
border-style: none;
374
background-color: transparent;
375
}
376
.apps-list {
378
padding: 4px 0;
379
background-color: transparent;
380
row {
382
padding: 0;
383
&:hover {
385
box-shadow: none;
386
}
387
}
388
button {
390
border-radius: 0;
391
color: theme-color.$on-surface;
392
font-weight: normal;
393
}
394
}
395
}
396
/**
398
* CAJA File manager
399
*/
400
// pathbar toggle button
402
.caja-navigation-window box.horizontal > button.toggle.image-button {
403
@extend %button-flat-activatable;
404
border-radius: theme.$corner-radius;
406
}
407
// pathbar
409
// pathbar buttons
410
.caja-pathbar button {
411
margin: 0 -1px 0 -2px;
412
// padding: 4px;
413
@extend %pathbar_button;
415
// NOTE: padding is hard-coded to 0
417
&.slider-button {
418
min-width: 24px;
419
}
420
// arrow button
422
> widget {
423
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
424
-GtkArrow-arrow-scaling: 1;
425
}
426
}
427
// places, treeview, history, information, emblems and notes
429
// .caja-side-pane notebook treeview.view,
430
// .caja-side-pane notebook textview.view text,
431
.caja-side-pane notebook viewport.frame,
432
.caja-side-pane notebook widget .vertical {
433
// background-color: $surface-z1;
434
}
435
// treeview rows
437
.caja-side-pane treeview.view {
438
// padding: 2px 0;
439
}
440
.caja-side-pane notebook,
442
.caja-notebook {
443
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
444
.frame {
446
border-style: none;
447
background-color: transparent;
448
}
449
}
450
// window and desktop mode
452
.caja-canvas-item {
453
border-radius: theme.$corner-radius;
454
}
455
// desktop mode
457
.caja-desktop.caja-canvas-item {
458
@extend %iconview-desktop;
459
}
460
.caja-desktop EelEditableLabel.entry {
462
}
463
// override https://github.com/mate-desktop/caja/blob/master/data/caja.css
465
.caja-desktop.view .entry,
466
.caja-navigation-window .view .entry {
467
border: none;
468
border-radius: theme.$corner-radius;
469
background-color: theme-color.entry-fill(theme-color.$on-surface);
470
background-image: none;
471
color: theme-color.$on-surface;
472
&:selected {
474
background-color: theme-color.$selected-overlay;
475
}
476
}
477
.caja-desktop.view .entry {
479
background-color: theme-color.$scrim-alt;
480
color: theme-color.$on-dark;
481
text-shadow: shadow.$text-shadow;
482
caret-color: currentcolor; // this shouldn't be needed.
483
&:selected {
485
// FIXME: this should have light overlay.
486
background-color: theme-color.$selected-overlay;
487
}
488
}
489
// statusbar
491
.caja-navigation-window statusbar {
492
margin: 0 -10px;
493
padding: 0 4px;
494
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
495
}
496
// infobar
498
.caja-notebook frame > border {
500
border-style: none;
501
background-color: transparent;
502
}
503
#caja-extra-view-widget {
505
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
506
// background-color: $surface-z1;
507
> box > box > label {
509
font-weight: bold;
510
}
511
button {
513
@extend %button-flat;
514
&:not(:disabled) {
516
color: theme-color.$primary;
517
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
518
}
519
}
520
}
521
/**
523
* Pluma
524
*/
525
// Pluma status bar
527
.pluma-window statusbar {
528
margin: 0 -10px;
529
padding: 0 4px;
530
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
531
frame {
533
> border {
534
border-style: none;
535
background-color: transparent;
536
}
537
button.flat {
539
padding: 0 4px;
540
border-radius: 0;
541
widget {
543
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
544
-GtkArrow-arrow-scaling: 1;
545
}
546
}
547
}
548
}
549
// Printpreview
551
.pluma-print-preview {
552
toolbar {
553
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
554
}
555
scrolledwindow {
557
// background-color: $surface-z1;
558
}
559
}
560
// sidebar file-browser
562
.pluma-window paned.horizontal box.vertical {
563
box.horizontal button.flat {
564
margin: 1px;
565
@extend %button-small;
567
}
568
.frame {
570
border-style: none;
571
background-color: transparent;
572
}
573
notebook.frame {
575
margin-top: -1px;
576
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
577
box.vertical toolbar.horizontal {
579
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
580
}
581
}
582
}
583
/**
585
* Atril
586
*/
587
.atril-window paned.horizontal box.vertical {
589
.frame {
590
border-style: none;
591
background-color: transparent;
592
}
593
notebook .frame {
595
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
596
}
597
}
598
/* mate-screensaver lock dialog */
600
.lock-dialog {
602
border: 1px solid theme-color.divider(theme-color.$on-surface);
603
border-radius: theme.$corner-radius + 1px;
604
box-shadow: shadow.$z6, inset 0 1px theme-color.highlight(theme-color.$surface-z8); // not sure if box-shadow works here
605
background-clip: padding-box;
606
background-color: theme-color.$surface-z8;
607
frame > border {
609
border-style: none;
610
background-color: transparent;
611
}
612
button {
614
@extend %button-flat;
615
&:not(:disabled) {
617
color: theme-color.$primary;
618
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
619
}
620
}
621
}
622
/* multimedia OSD */
624
MsdOsdWindow.background.osd {
626
border-radius: theme.$corner-radius;
627
background-color: theme-color.$tooltip;
628
color: theme-color.$on-tooltip;
629
.trough {
631
border-radius: 0;
632
background-color: theme-color.disabled-stroke(theme-color.$on-tooltip);
633
}
634
.progressbar {
636
border-radius: 0;
637
background-color: theme-color.$on-tooltip;
638
}
639
// For mate-settings-daemon noncomposited osd windows
641
&.msd-osd-window-solid {
642
}
643
}
644