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/window-close.svg);
522
height: 32px;
523
width: 32px;
524
-cinnamon-close-overlap: 20px;
525
&:hover {
526
background-image: url(assets/window-close-hover.svg);
527
}
528
&:active {
529
background-image: url(assets/window-close-active.svg);
530
}
531
&:rtl {
532
-st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
533
}
534
}
535
.window-border {
536
border: 1px solid divider($on-surface);
537
}
538
.window-close-area {
539
background-image: url(assets/trash-icon.png);
540
background-size: 100px;
541
background-color: $scrim-alt;
542
border: 1px solid divider($on-surface);
543
border-bottom-width: 0;
544
border-radius: 20px 20px 0 0;
545
height: 120px;
546
width: 400px;
547
}
548
// this is OK with solid or transparent backgrounds
549
.expo-background {
550
background-color: $scrim;
551
}
552
// this always looks better semi transparent
553
.workspace-overview-background-shade {
554
background-color: $scrim;
555
}
556
.expo-workspace-thumbnail-frame {
557
border: 1px solid divider($on-surface);
558
&#active {
559
border: 1px solid $primary;
560
}
561
}
562
// dialog box for the cinnamon debug utility
563
#LookingGlassDialog {
564
@extend %osd-panel-shared;
565
spacing: 4px;
567
padding: 8px;
568
}
569
// the calendar displayed by the calendar applet is a heavily modified menu and inherits from the .menu selectosr
570
// indivudual elements within the menu can be themed seperately with these selectors
571
.calendar {
572
padding: 4px 8px;
573
spacing-rows: 2px;
574
spacing-columns: 4px;
575
}
576
// also covers the year label
577
.datemenu-date-label {
578
@include type(headline6);
579
height: $menuitem-size - 2px * 2;
581
margin: 2px;
582
padding: 6px 16px;
583
border-radius: $corner-radius;
584
color: $on-surface;
585
text-align: center;
586
&:focus { background-color: divider($on-surface) };
587
}
588
.calendar-month-label {
589
@include type(subtitle2);
590
height: $menuitem-size - 6px * 2;
592
margin: 2px;
593
padding: 6px 16px;
594
border-radius: $corner-radius;
595
color: $on-surface;
596
text-align: center;
597
&:focus { background-color: divider($on-surface) };
598
}
599
.calendar-change-month-back {
600
@extend %calendar-shared;
601
background-image: url(assets/calendar-arrow-left.svg);
603
&:rtl {
604
background-image: url(assets/calendar-arrow-right.svg);
605
}
606
}
607
.calendar-change-month-forward {
608
@extend %calendar-shared;
609
background-image: url(assets/calendar-arrow-right.svg);
611
&:rtl {
612
background-image: url(assets/calendar-arrow-left.svg);
613
}
614
}
615
.calendar-day-base {
616
@include type(caption);
617
text-align: center;
619
width: $menuitem-size; height: $menuitem-size;
620
padding: 0;
621
margin: 2px;
622
border-radius: 100px;
623
&:hover,&:focus { background-color: stroke($on-titlebar); }
624
&:active {
625
color: $on-primary;
626
background-color: $primary;
627
border-color: transparent;
628
}
629
}
630
.calendar-week-number {
631
@include type(caption);
632
width: $menuitem-size - 7px; height: $menuitem-size;
634
margin: 2px;
635
padding: 0;
636
border-radius: 100px;
637
background-color: transparent;
638
color: disabled($on-surface);
639
text-align: center;
640
}
641
.calendar-day-heading {
642
@include type(caption);
643
width: $menuitem-size; height: $menuitem-size - 7px;
645
margin: 2px;
646
padding: 0;
647
border-radius: 100px;
648
background-color: transparent;
649
color: disabled($on-surface);
650
text-align: center;
651
}
652
.calendar-day {
653
border-width: 0;
654
}
655
.calendar-day-top {
656
border-top-width: 0;
657
}
658
.calendar-day-left {
659
border-left-width: 0;
660
}
661
.calendar-work-day {
662
}
663
.calendar-nonwork-day {
664
color: $on-surface;
665
}
666
.calendar-today {
667
font-weight: bold;
668
border: none;
669
}
670
.calendar-day-with-events {
671
color: $primary;
672
font-weight: normal;
673
text-decoration: underline;
674
background-image: none;
675
}
676
.calendar-other-month-day {
677
color: disabled-hint($on-surface);
678
opacity: 0.5;
679
}
680
.calendar-week-number {
681
width: $menuitem-size; height: $menuitem-size - 7px;
682
margin: 2px;
683
padding: 7px 0 0;
684
border-radius: 100px;
685
background-color: transparent;
686
color: disabled($on-surface);
687
font-size: inherit;
688
font-weight: bold;
689
text-align: center;
690
}
691
// notification system
692
#notification {
693
background-color: $surface-z8;
694
border-radius: $corner-radius;
695
border: 1px solid divider($on-surface);
696
padding: 8px;
697
spacing-rows: 4px;
698
spacing-columns: 8px;
699
margin-from-right-edge-of-screen: 20px;
700
width: 34em;
701
color: $on-surface;
702
box-shadow: $shadow-z4;
703
&.multi-line-notification {
704
padding-bottom: 8px;
705
}
706
StEntry {
707
@extend %dialog-entry-shared;
708
}
709
.url-highlighter {
710
link-color: $primary;
711
}
712
}
713
// min height 159px is required to avoid stretching/distortion of notification image
714
.notification-with-image {
715
min-height: 159px;
716
color: $on-surface;
717
}
718
#notification-scrollview {
719
max-height: 10em;
720
> {
721
.top-shadow {
722
height: 1em;
723
}
724
.bottom-shadow {
725
height: 1em;
726
}
727
}
728
&:ltr > StScrollBar {
729
padding-left: 6px;
730
}
731
&:rtl > StScrollBar {
732
padding-right: 6px;
733
}
734
}
735
#notification-body {
736
spacing: 4px;
737
}
738
#notification-actions {
739
spacing: 8px;
740
}
741
.notification-button {
742
@extend %button-shared;
743
}
744
.notification-icon-button {
745
@extend %icon-button-shared;
746
> StIcon {
748
icon-size: 1.5em;
749
}
750
}
751
// non 3D alt-tab options
752
#altTabPopup {
753
padding: 8px;
754
spacing: 16px;
755
}
756
.switcher-list {
757
@extend %osd-panel-shared;
758
transition-duration: $duration;
760
.item-box {
761
padding: 8px;
762
border-radius: $corner-radius;
763
&:selected {
764
background-color: divider($on-surface);
765
}
766
}
767
.thumbnail-box {
768
padding: 2px;
769
spacing: 4px;
770
}
771
.thumbnail {
772
width: 256px
773
}
774
.separator {
775
width: 1px;
776
background: divider($on-surface);
777
}
778
}
779
.switcher-list-item-container {
780
spacing: 8px;
781
}
782
.thumbnail-scroll-gradient-left {
783
background-gradient-direction: horizontal;
784
background-gradient-start: rgba(51, 51, 51, 1.0);
785
background-gradient-end: rgba(51, 51, 51, 0);
786
border-radius: $corner-radius;
787
border-radius-topright: 0;
788
border-radius-bottomright: 0;
789
width: 60px;
790
}
791
.thumbnail-scroll-gradient-right {
792
background-gradient-direction: horizontal;
793
background-gradient-start: rgba(51, 51, 51, 0);
794
background-gradient-end: rgba(51, 51, 51, 1.0);
795
border-radius: $corner-radius;
796
border-radius-topleft: 0;
797
border-radius-bottomleft: 0;
798
width: 60px;
799
}
800
.switcher-arrow {
801
border-color: rgba(0,0,0,0);
802
color: hint($on-surface);
803
&:highlighted {
804
color: $on-surface;
805
}
806
}
807
.switcher-preview-backdrop {
808
background-color: $scrim;
809
}
810
// hot corners animation
811
.ripple-box {
812
width: 104px;
813
height: 104px;
814
background-image: url(assets/corner-ripple.png);
815
background-color: $primary;
816
border-radius: 52px;
817
}
818
// on screen messages and input boxes
819
.modal-dialog {
820
@extend %osd-panel-shared;
821
padding: 16px 20px;
823
}
824
.modal-dialog-button-box {
825
spacing: 16px;
826
}
827
.modal-dialog-button {
828
@extend %button-shared;
829
}
830
.info-osd {
831
@extend %osd-info-workspace-shared;
832
}
833
// run dialog (ALT-F2)
834
.run-dialog-label {
835
color: hint($on-surface);
836
padding-bottom: .4em;
837
}
838
.run-dialog-error-label {
839
color: $error;
840
}
841
.run-dialog-error-box {
842
padding-top: 16px;
843
spacing: 6px;
844
}
845
.run-dialog-completion-box {
846
padding-left: 15px;
847
}
848
.run-dialog-entry {
849
@extend %dialog-entry-shared;
850
}
851
.run-dialog {
852
border-radius: $corner-radius;
853
padding: 16px 20px;
854
}
855
// this is an full screen overlay that is displayed with any cinnamon OSD or modal dialog which needs to always be semi transparent
856
.lightbox {
857
background-color: $scrim-alt;
858
}
859
// removable media dialogs
860
.cinnamon-mount-operation-icon {
861
icon-size: 4.8em;
862
}
863
.mount-password-reask {
864
color: $warning;
865
}
866
.show-processes-dialog {
867
spacing: 24px;
868
}
869
.mount-question-dialog {
870
spacing: 24px;
871
}
872
.show-processes-dialog-subject {
873
@extend %dialogs-subject-shared;
874
&:rtl {
876
@extend %dialogs-subject-rtl-shared;
877
}
878
}
879
.mount-question-dialog-subject {
880
@extend %dialogs-subject-shared;
881
&:rtl {
883
@extend %dialogs-subject-rtl-shared;
884
}
885
}
886
.show-processes-dialog-description {
887
@extend %dialogs-description-shared;
888
&:rtl {
890
padding-right: 17px;
891
}
892
}
893
.mount-question-dialog-description {
894
@extend %dialogs-description-shared;
895
&:rtl {
897
padding-right: 17px;
898
}
899
}
900
.show-processes-dialog-app-list {
901
max-height: 200px;
902
padding-top: 24px;
903
padding-left: 49px;
904
padding-right: 32px;
905
&:rtl {
906
padding-right: 49px;
907
padding-left: 32px;
908
}
909
}
910
.show-processes-dialog-app-list-item {
911
color: $on-surface;
912
&:hover {
913
color: $on-surface;
914
}
915
&:ltr {
916
padding-right: 1em;
917
}
918
&:rtl {
919
padding-left: 1em;
920
}
921
}
922
.show-processes-dialog-app-list-item-icon {
923
&:ltr {
924
padding-right: 17px;
925
}
926
&:rtl {
927
padding-left: 17px;
928
}
929
}
930
.show-processes-dialog-app-list-item-name {
931
}
932
// desktop zoom feature
933
.magnifier-zoom-region {
934
border: 3px solid divider($on-surface);
935
&.full-screen {
936
border-width: 0;
937
}
938
}
939
// on screen keyboard
940
#keyboard {
941
background-color: $scrim;
942
}
943
.keyboard-key {
944
@extend %icon-button-shared;
945
@include type(button);
946
}
947
.keyboard-layout {
948
spacing: 8px;
949
padding: 8px;
950
}
951
.keyboard-row {
952
spacing: 16px;
953
}
954
.keyboard-subkeys { //long press on a key popup
955
color: inherit;
956
padding: 5px;
957
-arrow-border-radius: 0;
958
-arrow-background-color: transparent;
959
-arrow-border-width: 0;
960
-arrow-border-color: transparent;
961
-arrow-base: 0;
962
-arrow-rise: 0;
963
-boxpointer-gap: 5px;
964
background-color: $surface-z8;
965
border-radius: $corner-radius;
966
box-shadow: $shadow-z4;
967
}
968
// main menu applet
969
.menu-favorites-box {
970
padding: 8px;
971
}
972
.menu-favorites-button {
973
padding: 0.4em 4px;
974
&:hover {
975
background-color: divider($on-surface);
976
border-radius: $corner-radius;
977
color: $on-surface;
978
}
979
}
980
.menu-categories-box {
981
padding: 8px;
982
}
983
.menu-applications-inner-box {
984
padding: 8px;
985
}
986
.menu-applications-outer-box {
987
padding: 8px;
988
border-radius: $corner-radius;
989
}
990
.menu-application-button {
991
padding: 0.4em 4px;
992
&:highlighted {
993
font-weight: bold;
994
}
995
}
996
.menu-application-button-selected {
997
padding: 0.4em 4px;
998
background-color: divider($on-surface);
999
border-radius: $corner-radius;
1000
color: $on-surface;
1001
&:highlighted {
1002
font-weight: bold;
1003
}
1004
}
1005
.menu-application-button-label {
1006
@extend %menu-button-label-shared;
1007
}
1008
.menu-category-button {
1009
padding: 0.4em 4px;
1010
}
1011
.menu-category-button-greyed {
1012
padding: 0.4em 4px;
1013
color: hint($on-surface);
1014
font-style: italic;
1015
}
1016
.menu-category-button-selected {
1017
padding: 0.4em 4px;
1018
background-color: divider($on-surface);
1019
border-radius: $corner-radius;
1020
color: $on-surface;
1021
&:hover {
1022
}
1023
}
1024
.menu-category-button-label {
1025
@extend %menu-button-label-shared;
1026
}
1027
// in the stock menu app descriptions are shown at the base of the menu
1028
.menu-selected-app-box {
1029
padding: 8px;
1030
margin-bottom: 4px;
1031
text-align: right;
1032
&:rtl {
1033
text-align: left;
1034
}
1035
}
1036
.menu-selected-app-title {
1037
@include type(caption);
1038
}
1039
.menu-selected-app-description {
1040
@include type(caption);
1041
max-width: 150px;
1043
}
1044
// the menus search box
1045
.menu-search-box {
1046
&:ltr {
1047
padding-left: 30px;
1048
padding-bottom: 5px;
1049
padding-top: 5px;
1050
}
1051
&:rtl {
1052
padding-right: 30px;
1053
padding-bottom: 5px;
1054
padding-top: 5px;
1055
}
1056
}
1057
#menu-search-entry {
1058
@extend %dialog-entry-shared;
1059
}
1060
.menu-search-entry-icon {
1061
icon-size: 1em;
1062
padding: 0 0;
1063
color: disabled($on-surface);
1064
}
1065
// the window list applet. Some third party applets inherit some of this theming.
1066
.window-list-box {
1067
@include type(caption);
1068
1069
spacing: 4px;
1070
padding: 0 3px;
1071
&.vertical {
1072
spacing: 4px;
1073
padding: 3px 0;
1074
}
1075
#appMenuIcon {
1076
}
1077
&:highlight {
1078
background: stroke($on-titlebar);
1079
color: $on-titlebar;
1080
}
1081
}
1082
.window-list-item-label {
1083
}
1084
// progress was added with cinnamon 3.6 and allows compatible applications to use the window list as a progress bar
1085
.window-list-item-box {
1086
background-color: rgba(0, 0, 0, 0.01);
1087
transition-duration: $duration;
1088
&:hover {
1089
color: $on-titlebar;
1090
}
1091
&:active, &:checked, &:focus {
1092
background-color: stroke($on-titlebar);
1093
color: $on-titlebar;
1094
&:hover {
1095
color: $on-titlebar;
1096
}
1097
}
1098
.progress {
1099
background-color: $success;
1100
}
1101
}
1102
.window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel {
1103
padding-left: 3px;
1104
}
1105
.window-list-item-demands-attention {
1106
background-color: $titlebar;
1107
color: hint($on-titlebar);
1108
}
1109
// cinnamon 3.8 will support an improved window-list-thumbnail preview which now has it's own selector
1110
.window-list-preview {
1111
background-color: $surface-z8;
1112
border-radius: $corner-radius;
1113
padding: 10px 15px;
1114
spacing: 1em;
1115
color: $on-surface;
1116
box-shadow: $shadow-z8;
1117
}
1118
// Cinnamon 4.0 has a new grouped window list applet with it's own selectors.
1119
// Initial theme support is defined here. Some theming is defined in the panel orientation specific section above.
1120
.grouped-window-list {
1121
&-thumbnail-label {
1122
padding-left: 3px;
1123
padding-bottom: 6px;
1124
}
1125
&-number-label {
1126
@include type(caption);
1127
1128
z-index: 99;
1129
}
1130
&-list-button-label {
1131
padding-left: 3px;
1132
}
1133
&-badge {
1134
border-radius: $circular-radius;
1135
background-color: $panel-solid;
1136
}
1137
&-thumbnail-alert {
1138
background: $warning;
1139
}
1140
&-item-box {
1141
background-color: rgba(0, 0, 0, 0.01);
1142
transition-duration: $duration;
1143
&:hover {
1144
color: $on-titlebar;
1145
}
1146
&:active, &:checked {
1147
background-color: divider($on-titlebar);
1148
&:hover {
1149
color: $on-titlebar;
1150
}
1151
}
1152
&:focus {
1153
background-color: stroke($on-titlebar);
1154
color: $on-titlebar;
1155
&:hover {
1156
color: $on-titlebar;
1157
}
1158
}
1159
.progress {
1160
background-color: $success;
1161
}
1162
}
1163
&-item-demands-attention {
1164
background-color: $titlebar;
1165
color: hint($on-titlebar);
1166
}
1167
&-thumbnail-menu {
1168
padding: 20px;
1169
border: none;
1170
border-radius: $corner-radius;
1171
color: hint($on-titlebar);
1172
background: none;
1173
.item-box {
1174
padding: 8px;
1175
spacing: 2px;
1176
border-radius: $corner-radius;
1177
&:outlined {
1178
border: 2px solid divider($on-surface);
1179
color: $on-titlebar;
1180
}
1181
&:selected {
1182
background: divider($on-titlebar);
1183
color: $on-titlebar;
1184
}
1185
> StBoxLayout { // icon and title
1186
&:ltr { margin: 1px 0 0 6px; }
1187
&:rtl { margin: 1px 6px 0 0; }
1188
StLabel { padding-bottom: 2px; }
1190
}
1191
> StButton { // close button
1193
&:ltr { margin: 1px 6px 0 0; }
1194
&:rtl { margin: 1px 0 0 6px; }
1195
}
1196
}
1197
.thumbnail-box {
1198
padding: 2px;
1199
}
1200
.thumbnail {
1201
width: 256px;
1202
}
1203
.separator {
1204
width: 1px;
1205
background: divider($on-surface);
1206
}
1207
}
1208
}
1209
// the sound player applet
1210
.sound-player {
1211
StButton {
1212
@extend %icon-button-shared;
1213
&:small {
1215
min-width: $small-size;
1216
min-height: $small-size;
1217
padding: 4px;
1218
StIcon {
1219
icon-size: 1em;
1220
}
1221
}
1222
StIcon {
1223
icon-size: 1.5em;
1224
}
1225
}
1226
.slider {
1227
@extend %slider-shared;
1228
height: 5px;
1230
}
1231
StBoxLayout {
1232
spacing: 0.5em;
1233
}
1234
> StBoxLayout {
1235
padding: 5px;
1236
}
1237
}
1238
.sound-player-generic-coverart {
1239
background: rgba(0,0,0,0.2);
1240
}
1241
.sound-player-overlay {
1242
background-color: $surface-z8;
1243
min-width: 300px;
1244
padding: 12px 16px;
1245
spacing: 0.5em;
1246
color: hint($on-surface);
1247
}
1248
// workspace switcher applet simple button view
1249
.workspace-button {
1250
background-color: $panel-solid;
1251
width: 2em;
1252
height: 1em;
1253
color: hint($on-titlebar);
1254
margin: 2px;
1255
&:outlined {
1256
background-color: stroke($on-titlebar);
1257
color: $on-titlebar;
1258
}
1259
}
1260
// workspace switcher applet graph view
1261
.workspace-graph {
1262
background-color: $scrim;
1263
.workspace {
1264
background-color: $panel-solid;
1265
border: 1px solid divider($on-surface);
1266
&:active {
1267
background-color: stroke($on-titlebar);
1268
border: 1px solid divider($on-surface);
1270
.windows {
1271
-active-window-background: rgba(255, 255, 255, 0.8);
1272
-active-window-border: rgba(0, 0, 0, 0.9);
1273
-inactive-window-background: rgba(140, 140, 140, 0.8);
1274
-inactive-window-border: rgba(0, 0, 0, 0.7);
1275
}
1276
}
1277
.windows {
1278
-active-window-background: rgba(140, 140, 140, 0.8);
1279
-active-window-border: rgba(0, 0, 0, 0.7);
1280
-inactive-window-background: rgba(140, 140, 140, 0.8);
1281
-inactive-window-border: rgba(0, 0, 0, 0.7);
1282
}
1283
}
1284
}
1285
// most panel launcher themeing is orientation specific
1286
.panel-launchers {
1287
padding: 0 4px;
1288
spacing: 4px;
1289
transition-duration: $duration;
1290
.launcher {
1291
background-color:rgba(0, 0, 0, 0.01);
1292
}
1293
&.vertical {
1294
padding: 4px 0;
1295
spacing: 4px;
1296
.launcher .icon-box {
1297
padding-top: 0;
1298
}
1299
}
1300
}
1301
// applets in general
1302
.applet-separator-line, .applet-separator-line-vertical {
1303
width: 2px;
1304
background: divider($on-titlebar);
1305
}
1306
.applet-spacer:highlight {
1307
background: highlight($surface-z8);
1308
}
1309
.applet-box {
1310
background-color: rgba(0, 0, 0, 0.01);
1311
color: hint($on-titlebar);
1312
transition-duration: $duration;
1313
&:checked {
1314
color: $on-titlebar;
1315
.applet-label {
1316
color: $on-titlebar;
1317
}
1318
}
1319
&:hover {
1320
color: $on-titlebar;
1321
.applet-label {
1322
color: $on-titlebar;
1323
}
1324
}
1325
&:highlight {
1326
background: stroke($on-titlebar);
1327
color: $on-titlebar;
1328
.applet-label {
1329
color: $on-titlebar;
1330
}
1331
}
1332
}
1333
.applet-label {
1334
@include type(subtitle2);
1335
color: hint($on-titlebar);
1337
}
1338
// icon-size set to 22 to match hard-coded menu icon size - applet-icon style is used for search provider results in menu
1339
.applet-icon {
1340
color: hint($on-titlebar);
1341
padding: 0;
1342
spacing: 0;
1343
icon-size: 22px;
1344
}
1345
// desklets - the base .desklet selector is for 'undecorated' desklets however some subtle background themeing is desirable
1346
// to maintain visibility irrespctive of wallpaper and to allow for the highlighting scheme to work
1347
.desklet {
1348
@include type(caption);
1349
1350
color: $on-titlebar;
1351
border: none;
1352
box-shadow: $shadow-z8;
1353
padding: 12px;
1354
background-color: $scrim-alt;
1355
border-radius: $corner-radius
1356
}
1357
// these do not inherit from .desklet
1358
.desklet-with-borders {
1359
@extend %desklet-shared;
1360
@include type(caption);
1361
background-color: $surface-z8;
1363
border-radius: $corner-radius;
1364
&:highlight {
1365
background-color: highlight($surface-z8);
1366
}
1367
}
1368
.desklet-with-borders-and-header {
1369
@extend %desklet-shared;
1370
@include type(caption);
1371
1372
background-color: $surface-z8;
1373
border-radius-bottomleft: 2px;
1374
border-radius-bottomright: 2px;
1375
&:highlight {
1376
background-color: highlight($surface-z8);
1377
}
1378
}
1379
.desklet-header {
1380
@include type(headline6);
1381
@extend %desklet-shared;
1382
background-color: $surface-z8;
1384
border-radius-topleft: 2px;
1385
border-radius-topright: 2px;
1386
&:highlight {
1387
background-color: highlight($surface-z8);
1388
}
1389
}
1390
.photoframe-box {
1391
@extend %desklet-shared;
1392
1393
background-color: $surface-z8;
1394
border-radius: $corner-radius;
1395
&:highlight {
1396
background-color: highlight($surface-z8);
1397
}
1398
}
1399
.desklet-drag-placeholder {
1400
border: 2px solid $primary;
1401
background-color: $scrim-alt;
1402
border-radius: $corner-radius;
1403
}
1404
.launcher {
1405
padding: 1px;
1406
.icon-box {
1407
padding-top: 2px;
1408
}
1409
}
1410
// applet 'about' OSDs - inherits from modal dialogs
1411
.about-content {
1412
min-width: 250px;
1413
min-height: 150px;
1414
spacing: 8px;
1415
padding-bottom: 16px;
1416
}
1417
.about-title {
1418
@include type(headline6);
1419
}
1420
.about-uuid {
1421
@include type(caption);
1422
}
1423
.about-icon {
1424
padding-right: 20px;
1425
}
1426
.about-scrollBox {
1427
border: 1px solid divider($on-surface);
1428
border-radius: $corner-radius;
1429
}
1430
.about-scrollBox-innerBox {
1431
padding: 1.2em;
1432
spacing: 1.2em;
1433
}
1434
.about-description {
1435
padding-top: 4px;
1436
}
1437
.about-version {
1438
padding-left: 7px;
1439
}
1440
.workspace-osd {
1441
@extend %osd-info-workspace-shared;
1442
}
1443
.expo-workspaces-name-entry {
1444
@include type(body1);
1445
background-color: entry-fill($on-dark);
1447
color: $on-dark;
1448
padding: 0 8px;
1449
selection-background-color: stroke($on-dark);
1450
selected-color: $on-dark;
1451
caret-color: $on-dark;
1452
text-align: center;
1453
height: $medium-size;
1454
border-radius: $corner-radius $corner-radius 0 0;
1455
-cinnamon-caption-spacing: 12px;
1456
&#selected {
1457
color: $on-dark;
1458
background-color: stroke($on-dark);
1459
}
1460
&:focus {
1461
color: $on-dark;
1462
box-shadow: inset 0 -2px $on-dark;
1463
}
1464
&:hover {
1465
background-color: divider($on-dark);
1466
}
1467
}
1468
.notification-applet-padding {
1469
padding: .5em 1em;
1470
}
1471
.notification-applet-container {
1472
max-height: 100px;
1473
}
1474
.check-box {
1475
CinnamonGenericContainer {
1476
spacing: 8px;
1477
}
1478
StBin {
1479
@extend %check-box-shared;
1480
}
1481
&:focus {
1482
StBin {
1483
@extend %check-box-shared;
1484
}
1485
&:checked StBin {
1486
background-image: url(assets/checkbox.svg);
1487
}
1488
}
1489
StLabel {
1490
}
1491
&:checked StBin {
1492
background-image: url(assets/checkbox.svg);
1493
}
1494
}
1495
.radiobutton {
1496
CinnamonGenericContainer {
1497
spacing: 8px;
1498
}
1499
StBin {
1500
@extend %radiobutton-shared;
1501
}
1502
&:focus {
1503
StBin {
1504
@extend %radiobutton-shared;
1505
}
1506
&:checked StBin {
1507
background-image: url(assets/radiobutton.svg);
1508
}
1509
}
1510
StLabel {
1511
}
1512
&:checked StBin {
1513
background-image: url(assets/radiobutton.svg);
1514
}
1515
}
1516
.flashspot {
1517
background-color: $primary;
1518
}
1519
// displayed when media keys are pressed.
1520
.osd-window {
1521
@extend %osd-panel-shared;
1522
spacing: 1em;
1524
padding: 16px;
1525
.level {
1526
height: 0.7em;
1527
border-radius: 0.3em;
1528
background-color: stroke($on-surface);
1529
}
1530
.level-bar {
1531
border-radius: 0.3em;
1532
background-color: $primary;
1533
}
1534
}
1535
// on screen preview of windows tiling placement
1536
.tile-preview {
1537
@extend %tile-shared;
1538
&.snap {
1540
@extend %tile-shared-snap;
1541
}
1542
}
1543
.tile-hud {
1544
@extend %tile-shared;
1545
&.snap {
1547
@extend %tile-shared-snap;
1548
}
1549
&:top {
1550
border-top-width: 0;
1551
border-radius: 0 0 10px 10px;
1553
}
1554
&:bottom {
1555
border-bottom-width: 0;
1556
border-radius: $corner-radius $corner-radius 0 0;
1558
}
1559
&:left {
1560
border-left-width: 0;
1561
border-radius: 0 10px 10px 0;
1563
}
1564
&:right {
1565
border-right-width: 0;
1566
border-radius: 10px 0 0 10px;
1568
}
1569
&:top-left {
1570
border-top-width: 0;
1571
border-left-width: 0;
1572
border-radius: 0 0 10px 0;
1574
}
1575
&:top-right {
1576
border-top-width: 0;
1577
border-right-width: 0;
1578
border-radius: 0 0 0 10px;
1580
}
1581
&:bottom-left {
1582
border-bottom-width: 0;
1583
border-left-width: 0;
1584
border-radius: 0 10px 0 0;
1586
}
1587
&:bottom-right {
1588
border-bottom-width: 0;
1589
border-right-width: 0;
1590
border-radius: 10px 0 0 0;
1592
}
1593
}
1594
.systray {
1595
spacing: 4px;
1596
}
1597
// user-applet specific themeing - overrides applet stylesheet
1598
.user-box {
1599
padding: 0.4em 1.3em;
1600
spacing: 10px;
1601
}
1602
.user-icon {
1603
padding: 4px;
1604
border: none;
1605
}
1606
.user-label {
1607
@include type(subtitle2);
1608
1609
color: $on-surface;
1610
}
1611