ASCII text
1
@use "../../theme";
2
@use "../../theme-color";
3
@use "../../st-theme";
4
@use "../../gnome-shell/sass/drawing";
5
@use "extends";
6
// defines font family and standard font size across the whole theme
8
// em is preferred for better support for text scaling
9
stage {
10
@include drawing.type(body2);
11
font-family: st-theme.$font-family;
13
color: theme-color.$on-surface;
14
}
15
.cinnamon-link {
16
color: theme-color.$primary;
17
font-style: italic;
18
&:hover {
19
color: theme-color.$primary;
20
}
21
}
22
.label-shadow {
23
color: transparent;
24
}
25
// themeing for various standard elements
26
StScrollBar {
27
padding: 0px;
28
StButton {
29
&#vhandle, &#hhandle {
30
background-color: theme-color.disabled(theme-color.$on-surface);
31
border-radius: 100px;
32
margin: 4px;
33
&:hover {
34
background-color: theme-color.hint(theme-color.$on-surface);
35
}
36
}
37
}
38
StBin#trough {
39
margin: 4px;
40
border-radius: 100px;
41
background-color: theme-color.divider(theme-color.$on-surface);
42
}
43
}
44
StScrollView {
45
&.vfade {
46
-st-vfade-offset: 32px;
47
}
48
&.hfade {
49
-st-hfade-offset: 32px;
50
}
51
StScrollBar {
52
min-width: 16px;
53
min-height: 16px;
54
}
55
}
56
.separator {
57
@extend %separator-shared;
58
}
59
.slider {
60
@extend %slider-shared;
61
}
62
#Tooltip {
63
@include drawing.type(caption);
64
padding: 6px 8px;
66
color: theme-color.$on-tooltip;
67
text-align: center;
68
border-radius: theme.$corner-radius;
69
background-color: theme-color.$tooltip;
70
}
71
// applet menus. Note that cinnamon versions before 3.2 uses deprecated styles
72
// .popup-menu and .popup-menu-boxpointer. These are excluded as it is not possible
73
// due to other upstream changes to create a universal cinnamon theme that supports pre and post cinnamon 3.2
74
.menu {
75
@extend %menu-shared;
76
min-width: 100px;
77
margin: 4px;
78
}
79
// new style-classes for alternative stock menu
80
.menu-top-box {
81
spacing: 5px;
82
}
83
.menu-systembuttons-box {
84
padding: 10px;
85
}
86
.popup-sub-menu {
87
background-color: theme-color.entry-fill(theme-color.$on-surface);
88
}
89
.popup-menu-arrow {
90
icon-size: 1.14em;
91
}
92
// scale view right click menu
93
.popup-combo-menu {
94
@extend %menu-shared;
95
padding: 8px 0;
96
}
97
.popup-menu-content{
98
padding: 8px 0;
99
}
100
// individual menu entries are themed here
102
.popup-menu-item {
103
padding: 0.4em 16px;
104
spacing: 8px;
105
transition-duration: st-theme.$duration;
106
&:active {
107
background-color: theme-color.hover-overlay(theme-color.$on-surface);
108
color: theme-color.$on-surface;
109
transition-duration: 0ms;
110
}
111
&:insensitive {
112
color: theme-color.disabled(theme-color.$on-surface);
113
}
114
}
115
.popup-image-menu-item {
116
color: theme-color.hint(theme-color.$on-surface);
117
}
118
.popup-combobox-item {
119
padding: 0.4em 16px;
120
}
121
// sliders and separators in menus
122
.popup-separator-menu-item {
123
@extend %separator-shared;
124
}
125
.popup-slider-menu-item {
126
@extend %slider-shared;
127
}
128
.popup-device-menu-item {
129
spacing: .5em;
130
}
131
.popup-inactive-menu-item {
132
color: theme-color.$on-surface;
133
&:insensitive {
134
color: theme-color.disabled(theme-color.$on-surface);
135
}
136
}
137
.popup-subtitle-menu-item {
138
@include drawing.type(subtitle2);
139
}
140
.popup-menu-icon {
141
icon-size: 1.14em;
142
}
143
.popup-menu-item-dot {
144
}
145
.popup-submenu-menu-item:open {
146
}
147
.popup-alternating-menu-item:alternate {
148
@include drawing.type(subtitle2);
149
}
150
// toggles in menus
151
.toggle-switch {
152
width: 40px;
153
height: 20px;
154
}
155
.toggle-switch-us, .toggle-switch-intl {
156
background-image: url(assets/toggle-off.svg);
157
&:checked {
158
background-image: url(assets/toggle-on.svg);
159
}
160
}
161
.nm-menu-item-icons {
162
spacing: .5em;
163
icon-size: 1.14em;
164
}
165
// panels can be on any side of the screen
166
// some panel item theming is specific to panel orientation and is included in this section
167
// each panel is also split into three zones
168
// dnd is for panel edit mode
169
// dummy is for adding or moving panels
170
#panel {
171
color: theme-color.hint(theme-color.$on-titlebar);
172
background-color: theme-color.$scrim;
173
height: 2.5em;
174
width: 3.2em;
175
&:highlight {
176
background-color: theme-color.stroke(theme-color.$on-titlebar);
177
}
178
}
179
.panel-dummy {
180
background-color: rgba(255, 0, 0, 0.6);
181
&:entered {
182
background-color: rgba(0, 255, 0, 0.6);
183
}
184
}
185
.panelLeft {
186
spacing: 4px;
187
&:dnd {
188
background-color: rgba(255, 0, 0, 0.6);
189
}
190
&:ltr {
191
padding-right: 4px;
192
}
193
&:rtl {
194
padding-left: 4px;
195
}
196
&.vertical {
197
padding: 0;
198
&:dnd {
199
}
200
}
201
}
202
.panelCenter {
203
spacing: 4px;
204
&:dnd {
205
background-color: rgba(0, 255, 0, 0.6);
206
}
207
&.vertical {
208
padding-left: 0;
209
padding-right: 0;
210
&:dnd {
211
}
212
}
213
}
214
.panelRight {
215
spacing: 4px;
216
&:dnd {
217
background-color: rgba(0, 0, 255, 0.6);
218
}
219
&:ltr {
220
padding-left: 0;
221
spacing: 0;
222
}
223
&:rtl {
224
padding-right: 0;
225
spacing: 0;
226
}
227
&.vertical {
228
padding: 0;
229
&:dnd {
230
}
231
}
232
}
233
// orientation specific panel-item theming is defined here
234
// non orientation specific theming for panel-items is defined later in the stylesheet
235
.panel-top {
236
.window-list-item-box {
237
&:hover {
238
box-shadow: 0 3px 0 0 theme-color.$primary inset;
239
}
240
&:active, &:checked, &:focus {
241
&:hover {
242
box-shadow: 0 3px 0 0 theme-color.$primary inset;
243
}
244
}
245
}
246
.grouped-window-list-item-box {
247
&:hover {
248
box-shadow: 0 3px 0 0 theme-color.$primary inset;
249
}
250
&:active, &:checked {
251
&:hover {
252
box-shadow: 0 3px 0 0 theme-color.$primary inset;
253
}
254
}
255
&:focus {
256
&:hover {
257
box-shadow: 0 3px 0 0 theme-color.$primary inset;
258
}
259
}
260
}
261
.grouped-window-list-badge {
262
margin-top: 2px;
263
}
264
.workspace-switcher, .workspace-graph, .workspace-button {
265
padding: 1px 4px;
266
}
267
.workspace-graph, .workspace-button {
268
&:hover {
269
box-shadow: 0 3px 0 0 theme-color.$primary inset;
270
}
271
}
272
.applet-box {
273
padding: 0 4px;
274
&:hover {
275
box-shadow: 0 3px 0 0 theme-color.$primary inset;
276
}
277
}
278
.applet-label {
279
}
280
.panel-launchers .launcher:hover {
281
box-shadow: 0 3px 0 0 theme-color.$primary inset;
282
}
283
.applet-separator {
284
padding: 3px 4px;
285
}
286
.systray:hover {
287
box-shadow: 0 4px 0 0 theme-color.$primary inset;
288
}
289
}
290
.panel-bottom {
291
.window-list-item-box {
292
&:hover {
293
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
294
}
295
&:active, &:checked, &:focus {
296
&:hover {
297
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
298
}
299
}
300
}
301
.grouped-window-list-item-box {
302
&:hover {
303
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
304
}
305
&:active, &:checked {
306
&:hover {
307
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
308
}
309
}
310
&:focus {
311
&:hover {
312
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
313
}
314
}
315
}
316
.workspace-switcher, .workspace-graph, .workspace-button {
317
padding: 1px 4px;
318
}
319
.workspace-graph, .workspace-button {
320
&:hover {
321
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
322
}
323
}
324
.applet-box {
325
padding: 0 4px;
326
&:hover {
327
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
328
}
329
}
330
.applet-label {
331
}
332
.panel-launchers .launcher:hover {
333
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
334
}
335
.applet-separator {
336
padding: 3px 4px;
337
}
338
.systray:hover {
339
box-shadow: 0 4px 0 0 theme-color.$primary inset;
340
}
341
}
342
.panel-left {
343
.window-list-item-box {
344
&:hover {
345
box-shadow: 3px 0 0 0 theme-color.$primary inset;
346
}
347
&:active, &:checked, &:focus {
348
&:hover {
349
box-shadow: 3px 0 0 0 theme-color.$primary inset;
350
}
351
}
352
}
353
.grouped-window-list-item-box {
354
&:hover {
355
box-shadow: 3px 0 0 0 theme-color.$primary inset;
356
}
357
&:active, &:checked {
358
&:hover {
359
box-shadow: 3px 0 0 0 theme-color.$primary inset;
360
}
361
}
362
&:focus {
363
&:hover {
364
box-shadow: 3px 0 0 0 theme-color.$primary inset;
365
}
366
}
367
}
368
.grouped-window-list-badge {
369
margin-left: 2px;
370
}
371
.workspace-switcher, .workspace-graph, .workspace-button {
372
padding: 4px 1px;
373
min-height: 1.2em;
374
}
375
.workspace-graph, .workspace-button {
376
&:hover {
377
box-shadow: 3px 0 0 0 theme-color.$primary inset;
378
}
379
}
380
.applet-box {
381
padding: 4px 0;
382
&:hover {
383
box-shadow: 3px 0 0 0 theme-color.$primary inset;
384
}
385
}
386
.applet-label {
387
}
388
.panel-launchers .launcher:hover {
389
box-shadow: 3px 0 0 0 theme-color.$primary inset;
390
}
391
.applet-separator {
392
padding: 4px 3px;
393
}
394
.systray:hover {
395
box-shadow: 4px 0 0 0 theme-color.$primary inset;
396
}
397
}
398
.panel-right {
399
.window-list-item-box {
400
&:hover {
401
box-shadow: -3px 0 0 0 theme-color.$primary inset;
402
}
403
&:active, &:checked, &:focus {
404
&:hover {
405
box-shadow: -3px 0 0 0 theme-color.$primary inset;
406
}
407
}
408
}
409
.grouped-window-list-item-box {
410
&:hover {
411
box-shadow: -3px 0 0 0 theme-color.$primary inset;
412
}
413
&:active, &:checked {
414
&:hover {
415
box-shadow: -3px 0 0 0 theme-color.$primary inset;
416
}
417
}
418
&:focus {
419
&:hover {
420
box-shadow: -3px 0 0 0 theme-color.$primary inset;
421
}
422
}
423
}
424
.workspace-switcher, .workspace-graph, .workspace-button {
425
padding: 4px 1px;
426
min-height: 1.2em;
427
}
428
.workspace-graph, .workspace-button {
429
&:hover {
430
box-shadow: -3px 0 0 0 theme-color.$primary inset;
431
}
432
}
433
.applet-box {
434
padding: 4px 0;
435
&:hover {
436
box-shadow: -3px 0 0 0 theme-color.$primary inset;
437
}
438
}
439
.applet-label {
440
}
441
.panel-launchers .launcher:hover {
442
box-shadow: -3px 0 0 0 theme-color.$primary inset;
443
}
444
.applet-separator {
445
padding: 4px 3px;
446
}
447
.systray:hover {
448
box-shadow: -4px 0 0 0 theme-color.$primary inset;
449
}
450
}
451
// keyboard layout applet
452
.panel-status-button {
453
@include drawing.type(subtitle2);
454
-natural-hpadding: 4px;
455
-minimum-hpadding: 4px;
456
color: theme-color.hint(theme-color.$on-titlebar);
457
&:hover {
458
color: theme-color.$on-titlebar;
459
}
460
}
461
// used by power applet to warn of low battery
462
.system-status-icon {
463
icon-size: 1.14em;
464
padding: 0;
465
spacing: 0;
466
&.warning {
467
color: theme-color.$warning;
468
}
469
&.error {
470
color: theme-color.$error;
471
}
472
}
473
// a non feature - not worth themeing
474
.panel-corner {
475
&:active {
476
}
477
&:overview {
478
}
479
&:focus {
480
}
481
}
482
// expo & scale view section
483
#overview {
484
spacing: 12px;
485
}
486
.overview-empty-placeholder {
487
@extend %osd-info-workspace-shared;
488
}
490
.window-caption {
491
@include drawing.type(caption);
492
background-color: rgba(0, 0, 0, 0.01);
494
color: theme-color.hint(theme-color.$on-titlebar);
495
padding: 4px 6px;
496
text-align: center;
497
height: 1.5em;
498
-cinnamon-caption-spacing: 12px;
499
&#selected, &:focus {
500
color: theme-color.$on-titlebar;
501
box-shadow: 0 -3px 0 0 theme-color.$primary inset;
502
}
503
}
504
.workspace-controls {
505
visible-height: 32px;
506
}
507
.workspace-thumbnails-background {
508
color: theme-color.hint(theme-color.$on-titlebar);
509
background-color: theme-color.fill(theme-color.$on-dark);
510
border: none;
511
padding: 8px;
512
border-radius: theme.$corner-radius 0 0 theme.$corner-radius;
513
&:rtl {
514
border-radius: 0 theme.$corner-radius theme.$corner-radius 0;
515
}
516
}
517
.workspace-thumbnails {
518
spacing: 32px;
519
}
520
.workspace-add-button {
521
background-image: url(assets/add-workspace.svg);
522
height: 200px;
523
width: 35px;
524
transition-duration: shorter_duration;
525
&:hover {
526
background-image: url(assets/add-workspace-hover.svg);
527
}
528
&:active {
529
background-image: url(assets/add-workspace-active.svg);
530
}
531
}
532
.workspace-close-button, .window-close {
533
background-image: url(assets/window-close.svg);
534
height: 32px;
535
width: 32px;
536
-cinnamon-close-overlap: 20px;
537
&:hover {
538
background-image: url(assets/window-close-hover.svg);
539
}
540
&:active {
541
background-image: url(assets/window-close-active.svg);
542
}
543
&:rtl {
544
-st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
545
}
546
}
547
.window-border {
548
border: 1px solid theme-color.divider(theme-color.$on-surface);
549
}
550
.window-close-area {
551
background-image: url(assets/trash-icon.png);
552
background-size: 100px;
553
background-color: theme-color.$scrim-alt;
554
border: 1px solid theme-color.divider(theme-color.$on-surface);
555
border-bottom-width: 0;
556
border-radius: 20px 20px 0 0;
557
height: 120px;
558
width: 400px;
559
}
560
// this is OK with solid or transparent backgrounds
561
.expo-background {
562
background-color: theme-color.$scrim;
563
}
564
// this always looks better semi transparent
565
.workspace-overview-background-shade {
566
background-color: theme-color.$scrim;
567
}
568
.expo-workspace-thumbnail-frame {
569
border: 1px solid theme-color.divider(theme-color.$on-surface);
570
&#active {
571
border: 1px solid theme-color.$primary;
572
}
573
}
574
// dialog box for the cinnamon debug utility
575
#LookingGlassDialog {
576
@extend %osd-panel-shared;
577
spacing: 4px;
579
padding: 8px;
580
}
581
// the calendar displayed by the calendar applet is a heavily modified menu and inherits from the .menu selectosr
582
// indivudual elements within the menu can be themed seperately with these selectors
583
.calendar {
584
padding: 4px 8px;
585
spacing-rows: 2px;
586
spacing-columns: 4px;
587
}
588
// also covers the year label
589
.datemenu-date-label {
590
@include drawing.type(headline6);
591
height: st-theme.$menuitem-size - 2px * 2;
593
margin: 2px;
594
padding: 6px 16px;
595
border-radius: theme.$corner-radius;
596
color: theme-color.$on-surface;
597
text-align: center;
598
&:focus {
599
background-color: theme-color.divider(theme-color.$on-surface);
600
}
601
}
602
.calendar-month-label {
603
@include drawing.type(subtitle2);
604
height: st-theme.$menuitem-size - 6px * 2;
606
margin: 2px;
607
padding: 6px 16px;
608
border-radius: theme.$corner-radius;
609
color: theme-color.$on-surface;
610
text-align: center;
611
&:focus {
612
background-color: theme-color.divider(theme-color.$on-surface);
613
}
614
}
615
.calendar-change-month-back {
616
@extend %calendar-shared;
617
background-image: url(assets/calendar-arrow-left.svg);
619
&:rtl {
620
background-image: url(assets/calendar-arrow-right.svg);
621
}
622
}
623
.calendar-change-month-forward {
624
@extend %calendar-shared;
625
background-image: url(assets/calendar-arrow-right.svg);
627
&:rtl {
628
background-image: url(assets/calendar-arrow-left.svg);
629
}
630
}
631
.calendar-day-base {
632
@include drawing.type(caption);
633
text-align: center;
635
width: st-theme.$menuitem-size;
636
height: st-theme.$menuitem-size;
637
padding: 0;
638
margin: 2px;
639
border-radius: 100px;
640
&:hover,
641
&:focus {
642
background-color: theme-color.stroke(theme-color.$on-titlebar);
643
}
644
&:active {
645
color: theme-color.$on-primary;
646
background-color: theme-color.$primary;
647
border-color: transparent;
648
}
649
}
650
.calendar-week-number {
651
@include drawing.type(caption);
652
width: st-theme.$menuitem-size - 7px;
654
height: st-theme.$menuitem-size;
655
margin: 2px;
656
padding: 0;
657
border-radius: 100px;
658
background-color: transparent;
659
color: theme-color.disabled(theme-color.$on-surface);
660
text-align: center;
661
}
662
.calendar-day-heading {
663
@include drawing.type(caption);
664
width: st-theme.$menuitem-size;
666
height: st-theme.$menuitem-size - 7px;
667
margin: 2px;
668
padding: 0;
669
border-radius: 100px;
670
background-color: transparent;
671
color: theme-color.disabled(theme-color.$on-surface);
672
text-align: center;
673
}
674
.calendar-day {
675
border-width: 0;
676
}
677
.calendar-day-top {
678
border-top-width: 0;
679
}
680
.calendar-day-left {
681
border-left-width: 0;
682
}
683
.calendar-work-day {
684
}
685
.calendar-nonwork-day {
686
color: theme-color.$on-surface;
687
}
688
.calendar-today {
689
font-weight: bold;
690
border: none;
691
}
692
.calendar-day-with-events {
693
color: theme-color.$primary;
694
font-weight: normal;
695
text-decoration: underline;
696
background-image: none;
697
}
698
.calendar-other-month-day {
699
color: theme-color.disabled-hint(theme-color.$on-surface);
700
opacity: 0.5;
701
}
702
.calendar-week-number {
703
width: st-theme.$menuitem-size;
704
height: st-theme.$menuitem-size - 7px;
705
margin: 2px;
706
padding: 7px 0 0;
707
border-radius: 100px;
708
background-color: transparent;
709
color: theme-color.disabled(theme-color.$on-surface);
710
font-size: inherit;
711
font-weight: bold;
712
text-align: center;
713
}
714
// notification system
715
#notification {
716
background-color: theme-color.$surface-z8;
717
border-radius: theme.$corner-radius;
718
border: 1px solid theme-color.divider(theme-color.$on-surface);
719
padding: 8px;
720
spacing-rows: 4px;
721
spacing-columns: 8px;
722
margin-from-right-edge-of-screen: 20px;
723
width: 34em;
724
color: theme-color.$on-surface;
725
box-shadow: theme.$shadow-z4;
726
&.multi-line-notification {
727
padding-bottom: 8px;
728
}
729
StEntry {
730
@extend %dialog-entry-shared;
731
}
732
.url-highlighter {
733
link-color: theme-color.$primary;
734
}
735
}
736
// min height 159px is required to avoid stretching/distortion of notification image
737
.notification-with-image {
738
min-height: 159px;
739
color: theme-color.$on-surface;
740
}
741
#notification-scrollview {
742
max-height: 10em;
743
> {
744
.top-shadow {
745
height: 1em;
746
}
747
.bottom-shadow {
748
height: 1em;
749
}
750
}
751
&:ltr > StScrollBar {
752
padding-left: 6px;
753
}
754
&:rtl > StScrollBar {
755
padding-right: 6px;
756
}
757
}
758
#notification-body {
759
spacing: 4px;
760
}
761
#notification-actions {
762
spacing: 8px;
763
}
764
.notification-button {
765
@extend %button-shared;
766
}
767
.notification-icon-button {
768
@extend %icon-button-shared;
769
> StIcon {
771
icon-size: 1.5em;
772
}
773
}
774
// non 3D alt-tab options
775
#altTabPopup {
776
padding: 8px;
777
spacing: 16px;
778
}
779
.switcher-list {
780
@extend %osd-panel-shared;
781
transition-duration: st-theme.$duration;
783
.item-box {
784
padding: 8px;
785
border-radius: theme.$corner-radius;
786
&:selected {
787
background-color: theme-color.divider(theme-color.$on-surface);
788
}
789
}
790
.thumbnail-box {
791
padding: 2px;
792
spacing: 4px;
793
}
794
.thumbnail {
795
width: 256px
796
}
797
.separator {
798
width: 1px;
799
background: theme-color.divider(theme-color.$on-surface);
800
}
801
}
802
.switcher-list-item-container {
803
spacing: 8px;
804
}
805
.thumbnail-scroll-gradient-left {
806
background-gradient-direction: horizontal;
807
background-gradient-start: rgba(51, 51, 51, 1.0);
808
background-gradient-end: rgba(51, 51, 51, 0);
809
border-radius: theme.$corner-radius;
810
border-radius-topright: 0;
811
border-radius-bottomright: 0;
812
width: 60px;
813
}
814
.thumbnail-scroll-gradient-right {
815
background-gradient-direction: horizontal;
816
background-gradient-start: rgba(51, 51, 51, 0);
817
background-gradient-end: rgba(51, 51, 51, 1.0);
818
border-radius: theme.$corner-radius;
819
border-radius-topleft: 0;
820
border-radius-bottomleft: 0;
821
width: 60px;
822
}
823
.switcher-arrow {
824
border-color: rgba(0,0,0,0);
825
color: theme-color.hint(theme-color.$on-surface);
826
&:highlighted {
827
color: theme-color.$on-surface;
828
}
829
}
830
.switcher-preview-backdrop {
831
background-color: theme-color.$scrim;
832
}
833
// hot corners animation
834
.ripple-box {
835
width: 104px;
836
height: 104px;
837
background-image: url(assets/corner-ripple.png);
838
background-color: theme-color.$primary;
839
border-radius: 52px;
840
}
841
// on screen messages and input boxes
842
.modal-dialog {
843
@extend %osd-panel-shared;
844
padding: 16px 20px;
846
}
847
.modal-dialog-button-box {
848
spacing: 16px;
849
}
850
.modal-dialog-button {
851
@extend %button-shared;
852
}
853
.info-osd {
854
@extend %osd-info-workspace-shared;
855
}
856
// run dialog (ALT-F2)
857
.run-dialog-label {
858
color: theme-color.hint(theme-color.$on-surface);
859
padding-bottom: .4em;
860
}
861
.run-dialog-error-label {
862
color: theme-color.$error;
863
}
864
.run-dialog-error-box {
865
padding-top: 16px;
866
spacing: 6px;
867
}
868
.run-dialog-completion-box {
869
padding-left: 15px;
870
}
871
.run-dialog-entry {
872
@extend %dialog-entry-shared;
873
}
874
.run-dialog {
875
border-radius: theme.$corner-radius;
876
padding: 16px 20px;
877
}
878
// this is an full screen overlay that is displayed with any cinnamon OSD or modal dialog which needs to always be semi transparent
879
.lightbox {
880
background-color: theme-color.$scrim-alt;
881
}
882
// removable media dialogs
883
.cinnamon-mount-operation-icon {
884
icon-size: 4.8em;
885
}
886
.mount-password-reask {
887
color: theme-color.$warning;
888
}
889
.show-processes-dialog {
890
spacing: 24px;
891
}
892
.mount-question-dialog {
893
spacing: 24px;
894
}
895
.show-processes-dialog-subject {
896
@extend %dialogs-subject-shared;
897
&:rtl {
899
@extend %dialogs-subject-rtl-shared;
900
}
901
}
902
.mount-question-dialog-subject {
903
@extend %dialogs-subject-shared;
904
&:rtl {
906
@extend %dialogs-subject-rtl-shared;
907
}
908
}
909
.show-processes-dialog-description {
910
@extend %dialogs-description-shared;
911
&:rtl {
913
padding-right: 17px;
914
}
915
}
916
.mount-question-dialog-description {
917
@extend %dialogs-description-shared;
918
&:rtl {
920
padding-right: 17px;
921
}
922
}
923
.show-processes-dialog-app-list {
924
max-height: 200px;
925
padding-top: 24px;
926
padding-left: 49px;
927
padding-right: 32px;
928
&:rtl {
929
padding-right: 49px;
930
padding-left: 32px;
931
}
932
}
933
.show-processes-dialog-app-list-item {
934
color: theme-color.$on-surface;
935
&:hover {
936
color: theme-color.$on-surface;
937
}
938
&:ltr {
939
padding-right: 1em;
940
}
941
&:rtl {
942
padding-left: 1em;
943
}
944
}
945
.show-processes-dialog-app-list-item-icon {
946
&:ltr {
947
padding-right: 17px;
948
}
949
&:rtl {
950
padding-left: 17px;
951
}
952
}
953
.show-processes-dialog-app-list-item-name {
954
}
955
// desktop zoom feature
956
.magnifier-zoom-region {
957
border: 3px solid theme-color.divider(theme-color.$on-surface);
958
&.full-screen {
959
border-width: 0;
960
}
961
}
962
// on screen keyboard
963
#keyboard {
964
background-color: theme-color.$scrim;
965
}
966
.keyboard-key {
967
@extend %icon-button-shared;
968
@include drawing.type(button);
969
}
970
.keyboard-layout {
971
spacing: 8px;
972
padding: 8px;
973
}
974
.keyboard-row {
975
spacing: 16px;
976
}
977
.keyboard-subkeys { //long press on a key popup
978
color: inherit;
979
padding: 5px;
980
-arrow-border-radius: 0;
981
-arrow-background-color: transparent;
982
-arrow-border-width: 0;
983
-arrow-border-color: transparent;
984
-arrow-base: 0;
985
-arrow-rise: 0;
986
-boxpointer-gap: 5px;
987
background-color: theme-color.$surface-z8;
988
border-radius: theme.$corner-radius;
989
box-shadow: theme.$shadow-z4;
990
}
991
// main menu applet
992
.menu-favorites-box {
993
padding: 8px;
994
}
995
.menu-favorites-button {
996
padding: 0.4em 4px;
997
&:hover {
998
background-color: theme-color.divider(theme-color.$on-surface);
999
border-radius: theme.$corner-radius;
1000
color: theme-color.$on-surface;
1001
}
1002
}
1003
.menu-categories-box {
1004
padding: 8px;
1005
}
1006
.menu-applications-inner-box {
1007
padding: 8px;
1008
}
1009
.menu-applications-outer-box {
1010
padding: 8px;
1011
border-radius: theme.$corner-radius;
1012
}
1013
.menu-application-button {
1014
padding: 0.4em 4px;
1015
&:highlighted {
1016
font-weight: bold;
1017
}
1018
}
1019
.menu-application-button-selected {
1020
padding: 0.4em 4px;
1021
background-color: theme-color.divider(theme-color.$on-surface);
1022
border-radius: theme.$corner-radius;
1023
color: theme-color.$on-surface;
1024
&:highlighted {
1025
font-weight: bold;
1026
}
1027
}
1028
.menu-application-button-label {
1029
@extend %menu-button-label-shared;
1030
}
1031
.menu-category-button {
1032
padding: 0.4em 4px;
1033
}
1034
.menu-category-button-greyed {
1035
padding: 0.4em 4px;
1036
color: theme-color.hint(theme-color.$on-surface);
1037
font-style: italic;
1038
}
1039
.menu-category-button-selected {
1040
padding: 0.4em 4px;
1041
background-color: theme-color.divider(theme-color.$on-surface);
1042
border-radius: theme.$corner-radius;
1043
color: theme-color.$on-surface;
1044
&:hover {
1045
}
1046
}
1047
.menu-category-button-label {
1048
@extend %menu-button-label-shared;
1049
}
1050
// in the stock menu app descriptions are shown at the base of the menu
1051
.menu-selected-app-box {
1052
padding: 8px;
1053
margin-bottom: 4px;
1054
text-align: right;
1055
&:rtl {
1056
text-align: left;
1057
}
1058
}
1059
.menu-selected-app-title {
1060
@include drawing.type(caption);
1061
}
1062
.menu-selected-app-description {
1063
@include drawing.type(caption);
1064
max-width: 150px;
1066
}
1067
// the menus search box
1068
.menu-search-box {
1069
&:ltr {
1070
padding-left: 30px;
1071
padding-bottom: 5px;
1072
padding-top: 5px;
1073
}
1074
&:rtl {
1075
padding-right: 30px;
1076
padding-bottom: 5px;
1077
padding-top: 5px;
1078
}
1079
}
1080
#menu-search-entry {
1081
@extend %dialog-entry-shared;
1082
}
1083
.menu-search-entry-icon {
1084
icon-size: 1em;
1085
padding: 0 0;
1086
color: theme-color.disabled(theme-color.$on-surface);
1087
}
1088
// the window list applet. Some third party applets inherit some of this theming.
1089
.window-list-box {
1090
@include drawing.type(caption);
1091
spacing: 4px;
1093
padding: 0 3px;
1094
&.vertical {
1095
spacing: 4px;
1096
padding: 3px 0;
1097
}
1098
#appMenuIcon {
1099
}
1100
&:highlight {
1101
background: theme-color.stroke(theme-color.$on-titlebar);
1102
color: theme-color.$on-titlebar;
1103
}
1104
}
1105
.window-list-item-label {
1106
}
1107
// progress was added with cinnamon 3.6 and allows compatible applications to use the window list as a progress bar
1108
.window-list-item-box {
1109
background-color: rgba(0, 0, 0, 0.01);
1110
transition-duration: st-theme.$duration;
1111
&:hover {
1112
color: theme-color.$on-titlebar;
1113
}
1114
&:active, &:checked, &:focus {
1115
background-color: theme-color.stroke(theme-color.$on-titlebar);
1116
color: theme-color.$on-titlebar;
1117
&:hover {
1118
color: theme-color.$on-titlebar;
1119
}
1120
}
1121
.progress {
1122
background-color: theme-color.$success;
1123
}
1124
}
1125
.window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel {
1126
padding-left: 3px;
1127
}
1128
.window-list-item-demands-attention {
1129
background-color: theme-color.$titlebar;
1130
color: theme-color.hint(theme-color.$on-titlebar);
1131
}
1132
// cinnamon 3.8 will support an improved window-list-thumbnail preview which now has it's own selector
1133
.window-list-preview {
1134
background-color: theme-color.$surface-z8;
1135
border-radius: theme.$corner-radius;
1136
padding: 10px 15px;
1137
spacing: 1em;
1138
color: theme-color.$on-surface;
1139
box-shadow: theme.$shadow-z8;
1140
}
1141
// Cinnamon 4.0 has a new grouped window list applet with it's own selectors.
1142
// Initial theme support is defined here. Some theming is defined in the panel orientation specific section above.
1143
.grouped-window-list {
1144
&-thumbnail-label {
1145
padding-left: 3px;
1146
padding-bottom: 6px;
1147
}
1148
&-number-label {
1149
@include drawing.type(caption);
1150
z-index: 99;
1152
}
1153
&-list-button-label {
1154
padding-left: 3px;
1155
}
1156
&-badge {
1157
border-radius: theme.$circular-radius;
1158
background-color: theme-color.$panel-solid;
1159
}
1160
&-thumbnail-alert {
1161
background: theme-color.$warning;
1162
}
1163
&-item-box {
1164
background-color: rgba(0, 0, 0, 0.01);
1165
transition-duration: st-theme.$duration;
1166
&:hover {
1167
color: theme-color.$on-titlebar;
1168
}
1169
&:active, &:checked {
1170
background-color: theme-color.divider(theme-color.$on-titlebar);
1171
&:hover {
1172
color: theme-color.$on-titlebar;
1173
}
1174
}
1175
&:focus {
1176
background-color: theme-color.stroke(theme-color.$on-titlebar);
1177
color: theme-color.$on-titlebar;
1178
&:hover {
1179
color: theme-color.$on-titlebar;
1180
}
1181
}
1182
.progress {
1183
background-color: theme-color.$success;
1184
}
1185
}
1186
&-item-demands-attention {
1187
background-color: theme-color.$titlebar;
1188
color: theme-color.hint(theme-color.$on-titlebar);
1189
}
1190
&-thumbnail-menu {
1191
padding: 20px;
1192
border: none;
1193
border-radius: theme.$corner-radius;
1194
color: theme-color.hint(theme-color.$on-titlebar);
1195
background: none;
1196
.item-box {
1197
padding: 8px;
1198
spacing: 2px;
1199
border-radius: theme.$corner-radius;
1200
&:outlined {
1201
border: 2px solid theme-color.divider(theme-color.$on-surface);
1202
color: theme-color.$on-titlebar;
1203
}
1204
&:selected {
1205
background: theme-color.divider(theme-color.$on-titlebar);
1206
color: theme-color.$on-titlebar;
1207
}
1208
> StBoxLayout { // icon and title
1209
&:ltr { margin: 1px 0 0 6px; }
1210
&:rtl { margin: 1px 6px 0 0; }
1211
StLabel { padding-bottom: 2px; }
1213
}
1214
> StButton { // close button
1216
&:ltr { margin: 1px 6px 0 0; }
1217
&:rtl { margin: 1px 0 0 6px; }
1218
}
1219
}
1220
.thumbnail-box {
1221
padding: 2px;
1222
}
1223
.thumbnail {
1224
width: 256px;
1225
}
1226
.separator {
1227
width: 1px;
1228
background: theme-color.divider(theme-color.$on-surface);
1229
}
1230
}
1231
}
1232
// the sound player applet
1233
.sound-player {
1234
StButton {
1235
@extend %icon-button-shared;
1236
&:small {
1238
min-width: theme.$small-size;
1239
min-height: theme.$small-size;
1240
padding: 4px;
1241
StIcon {
1242
icon-size: 1em;
1243
}
1244
}
1245
StIcon {
1246
icon-size: 1.5em;
1247
}
1248
}
1249
.slider {
1250
@extend %slider-shared;
1251
height: 5px;
1253
}
1254
StBoxLayout {
1255
spacing: 0.5em;
1256
}
1257
> StBoxLayout {
1258
padding: 5px;
1259
}
1260
}
1261
.sound-player-generic-coverart {
1262
background: rgba(0,0,0,0.2);
1263
}
1264
.sound-player-overlay {
1265
background-color: theme-color.$surface-z8;
1266
min-width: 300px;
1267
padding: 12px 16px;
1268
spacing: 0.5em;
1269
color: theme-color.hint(theme-color.$on-surface);
1270
}
1271
// workspace switcher applet simple button view
1272
.workspace-button {
1273
background-color: theme-color.$panel-solid;
1274
width: 2em;
1275
height: 1em;
1276
color: theme-color.hint(theme-color.$on-titlebar);
1277
margin: 2px;
1278
&:outlined {
1279
background-color: theme-color.stroke(theme-color.$on-titlebar);
1280
color: theme-color.$on-titlebar;
1281
}
1282
}
1283
// workspace switcher applet graph view
1284
.workspace-graph {
1285
background-color: theme-color.$scrim;
1286
.workspace {
1287
background-color: theme-color.$panel-solid;
1288
border: 1px solid theme-color.divider(theme-color.$on-surface);
1289
&:active {
1290
background-color: theme-color.stroke(theme-color.$on-titlebar);
1291
border: 1px solid theme-color.divider(theme-color.$on-surface);
1293
.windows {
1294
-active-window-background: rgba(255, 255, 255, 0.8);
1295
-active-window-border: rgba(0, 0, 0, 0.9);
1296
-inactive-window-background: rgba(140, 140, 140, 0.8);
1297
-inactive-window-border: rgba(0, 0, 0, 0.7);
1298
}
1299
}
1300
.windows {
1301
-active-window-background: rgba(140, 140, 140, 0.8);
1302
-active-window-border: rgba(0, 0, 0, 0.7);
1303
-inactive-window-background: rgba(140, 140, 140, 0.8);
1304
-inactive-window-border: rgba(0, 0, 0, 0.7);
1305
}
1306
}
1307
}
1308
// most panel launcher themeing is orientation specific
1309
.panel-launchers {
1310
padding: 0 4px;
1311
spacing: 4px;
1312
transition-duration: st-theme.$duration;
1313
.launcher {
1314
background-color:rgba(0, 0, 0, 0.01);
1315
}
1316
&.vertical {
1317
padding: 4px 0;
1318
spacing: 4px;
1319
.launcher .icon-box {
1320
padding-top: 0;
1321
}
1322
}
1323
}
1324
// applets in general
1325
.applet-separator-line, .applet-separator-line-vertical {
1326
width: 2px;
1327
background: theme-color.divider(theme-color.$on-titlebar);
1328
}
1329
.applet-spacer:highlight {
1330
background: theme-color.highlight(theme-color.$surface-z8);
1331
}
1332
.applet-box {
1333
background-color: rgba(0, 0, 0, 0.01);
1334
color: theme-color.hint(theme-color.$on-titlebar);
1335
transition-duration: st-theme.$duration;
1336
&:checked {
1337
color: theme-color.$on-titlebar;
1338
.applet-label {
1339
color: theme-color.$on-titlebar;
1340
}
1341
}
1342
&:hover {
1343
color: theme-color.$on-titlebar;
1344
.applet-label {
1345
color: theme-color.$on-titlebar;
1346
}
1347
}
1348
&:highlight {
1349
background: theme-color.stroke(theme-color.$on-titlebar);
1350
color: theme-color.$on-titlebar;
1351
.applet-label {
1352
color: theme-color.$on-titlebar;
1353
}
1354
}
1355
}
1356
.applet-label {
1357
@include drawing.type(subtitle2);
1358
color: theme-color.hint(theme-color.$on-titlebar);
1360
}
1361
// icon-size set to 22 to match hard-coded menu icon size - applet-icon style is used for search provider results in menu
1362
.applet-icon {
1363
color: theme-color.hint(theme-color.$on-titlebar);
1364
padding: 0;
1365
spacing: 0;
1366
icon-size: 22px;
1367
}
1368
// desklets - the base .desklet selector is for 'undecorated' desklets however some subtle background themeing is desirable
1369
// to maintain visibility irrespctive of wallpaper and to allow for the highlighting scheme to work
1370
.desklet {
1371
@include drawing.type(caption);
1372
color: theme-color.$on-titlebar;
1374
border: none;
1375
box-shadow: theme.$shadow-z8;
1376
padding: 12px;
1377
background-color: theme-color.$scrim-alt;
1378
border-radius: theme.$corner-radius
1379
}
1380
// these do not inherit from .desklet
1381
.desklet-with-borders {
1382
@extend %desklet-shared;
1383
@include drawing.type(caption);
1384
background-color: theme-color.$surface-z8;
1386
border-radius: theme.$corner-radius;
1387
&:highlight {
1388
background-color: theme-color.highlight(theme-color.$surface-z8);
1389
}
1390
}
1391
.desklet-with-borders-and-header {
1392
@extend %desklet-shared;
1393
@include drawing.type(caption);
1394
background-color: theme-color.$surface-z8;
1396
border-radius-bottomleft: 2px;
1397
border-radius-bottomright: 2px;
1398
&:highlight {
1399
background-color: theme-color.highlight(theme-color.$surface-z8);
1400
}
1401
}
1402
.desklet-header {
1403
@include drawing.type(headline6);
1404
@extend %desklet-shared;
1405
background-color: theme-color.$surface-z8;
1407
border-radius-topleft: 2px;
1408
border-radius-topright: 2px;
1409
&:highlight {
1410
background-color: theme-color.highlight(theme-color.$surface-z8);
1411
}
1412
}
1413
.photoframe-box {
1414
@extend %desklet-shared;
1415
background-color: theme-color.$surface-z8;
1417
border-radius: theme.$corner-radius;
1418
&:highlight {
1419
background-color: theme-color.highlight(theme-color.$surface-z8);
1420
}
1421
}
1422
.desklet-drag-placeholder {
1423
border: 2px solid theme-color.$primary;
1424
background-color: theme-color.$scrim-alt;
1425
border-radius: theme.$corner-radius;
1426
}
1427
.launcher {
1428
padding: 1px;
1429
.icon-box {
1430
padding-top: 2px;
1431
}
1432
}
1433
// applet 'about' OSDs - inherits from modal dialogs
1434
.about-content {
1435
min-width: 250px;
1436
min-height: 150px;
1437
spacing: 8px;
1438
padding-bottom: 16px;
1439
}
1440
.about-title {
1441
@include drawing.type(headline6);
1442
}
1443
.about-uuid {
1444
@include drawing.type(caption);
1445
}
1446
.about-icon {
1447
padding-right: 20px;
1448
}
1449
.about-scrollBox {
1450
border: 1px solid theme-color.divider(theme-color.$on-surface);
1451
border-radius: theme.$corner-radius;
1452
}
1453
.about-scrollBox-innerBox {
1454
padding: 1.2em;
1455
spacing: 1.2em;
1456
}
1457
.about-description {
1458
padding-top: 4px;
1459
}
1460
.about-version {
1461
padding-left: 7px;
1462
}
1463
.workspace-osd {
1464
@extend %osd-info-workspace-shared;
1465
}
1466
.expo-workspaces-name-entry {
1467
@include drawing.type(body1);
1468
background-color: theme-color.entry-fill(theme-color.$on-dark);
1470
color: theme-color.$on-dark;
1471
padding: 0 8px;
1472
selection-background-color: theme-color.stroke(theme-color.$on-dark);
1473
selected-color: theme-color.$on-dark;
1474
caret-color: theme-color.$on-dark;
1475
text-align: center;
1476
height: theme.$medium-size;
1477
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1478
-cinnamon-caption-spacing: 12px;
1479
&#selected {
1480
color: theme-color.$on-dark;
1481
background-color: theme-color.stroke(theme-color.$on-dark);
1482
}
1483
&:focus {
1484
color: theme-color.$on-dark;
1485
box-shadow: inset 0 -2px theme-color.$on-dark;
1486
}
1487
&:hover {
1488
background-color: theme-color.divider(theme-color.$on-dark);
1489
}
1490
}
1491
.notification-applet-padding {
1492
padding: .5em 1em;
1493
}
1494
.notification-applet-container {
1495
max-height: 100px;
1496
}
1497
.check-box {
1498
CinnamonGenericContainer {
1499
spacing: 8px;
1500
}
1501
StBin {
1502
@extend %check-box-shared;
1503
}
1504
&:focus {
1505
StBin {
1506
@extend %check-box-shared;
1507
}
1508
&:checked StBin {
1509
background-image: url(assets/checkbox.svg);
1510
}
1511
}
1512
StLabel {
1513
}
1514
&:checked StBin {
1515
background-image: url(assets/checkbox.svg);
1516
}
1517
}
1518
.radiobutton {
1519
CinnamonGenericContainer {
1520
spacing: 8px;
1521
}
1522
StBin {
1523
@extend %radiobutton-shared;
1524
}
1525
&:focus {
1526
StBin {
1527
@extend %radiobutton-shared;
1528
}
1529
&:checked StBin {
1530
background-image: url(assets/radiobutton.svg);
1531
}
1532
}
1533
StLabel {
1534
}
1535
&:checked StBin {
1536
background-image: url(assets/radiobutton.svg);
1537
}
1538
}
1539
.flashspot {
1540
background-color: theme-color.$primary;
1541
}
1542
// displayed when media keys are pressed.
1543
.osd-window {
1544
@extend %osd-panel-shared;
1545
spacing: 1em;
1547
padding: 16px;
1548
.level {
1549
height: 0.7em;
1550
border-radius: 0.3em;
1551
background-color: theme-color.stroke(theme-color.$on-surface);
1552
}
1553
.level-bar {
1554
border-radius: 0.3em;
1555
background-color: theme-color.$primary;
1556
}
1557
}
1558
// on screen preview of windows tiling placement
1559
.tile-preview {
1560
@extend %tile-shared;
1561
&.snap {
1563
@extend %tile-shared-snap;
1564
}
1565
}
1566
.tile-hud {
1567
@extend %tile-shared;
1568
&.snap {
1570
@extend %tile-shared-snap;
1571
}
1572
&:top {
1573
border-top-width: 0;
1574
border-radius: 0 0 10px 10px;
1576
}
1577
&:bottom {
1578
border-bottom-width: 0;
1579
border-radius: theme.$corner-radius theme.$corner-radius 0 0;
1581
}
1582
&:left {
1583
border-left-width: 0;
1584
border-radius: 0 10px 10px 0;
1586
}
1587
&:right {
1588
border-right-width: 0;
1589
border-radius: 10px 0 0 10px;
1591
}
1592
&:top-left {
1593
border-top-width: 0;
1594
border-left-width: 0;
1595
border-radius: 0 0 10px 0;
1597
}
1598
&:top-right {
1599
border-top-width: 0;
1600
border-right-width: 0;
1601
border-radius: 0 0 0 10px;
1603
}
1604
&:bottom-left {
1605
border-bottom-width: 0;
1606
border-left-width: 0;
1607
border-radius: 0 10px 0 0;
1609
}
1610
&:bottom-right {
1611
border-bottom-width: 0;
1612
border-right-width: 0;
1613
border-radius: 10px 0 0 0;
1615
}
1616
}
1617
.systray {
1618
spacing: 4px;
1619
}
1620
// user-applet specific themeing - overrides applet stylesheet
1621
.user-box {
1622
padding: 0.4em 1.3em;
1623
spacing: 10px;
1624
}
1625
.user-icon {
1626
padding: 4px;
1627
border: none;
1628
}
1629
.user-label {
1630
@include drawing.type(subtitle2);
1631
color: theme-color.$on-surface;
1633
}
1634