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