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