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: rgba($tooltip_bg_color, $higher_opacity);
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
font-weight: bold;
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
font-weight: bold;
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
// possibily deprecated - referenced in keyboard applet only
379
.panel-status-button {
380
-natural-hpadding: 4px;
381
-minimum-hpadding: 4px;
382
font-weight: bold;
383
color: $titlebar_secondary_fg_color;
384
height: 2em;
385
&:hover {
386
color: $titlebar_fg_color;
387
}
388
}
389
// used by power applet to warn of low battery
390
.system-status-icon {
391
icon-size: 1.14em;
392
padding: 0;
393
spacing: 0;
394
&.warning {
395
color: $warning_color;
396
}
397
&.error {
398
color: $error_color;
399
}
400
}
401
// a non feature - not worth themeing
402
.panel-corner {
403
&:active {
404
}
405
&:overview {
406
}
407
&:focus {
408
}
409
}
410
// expo & scale view section
411
#overview {
412
spacing: 12px;
413
}
414
.window-caption {
415
@include font(caption);
416
background-color: rgba(0, 0, 0, 0.01);
418
color: $titlebar_secondary_fg_color;
419
padding: 4px 6px;
420
text-align: center;
421
height: 1.5em;
422
-cinnamon-caption-spacing: 12px;
423
&#selected {
424
color: $titlebar_fg_color;
425
box-shadow: 0 -3px 0 0 $accent-color inset;
426
}
427
}
428
.workspace-controls {
429
visible-height: 32px;
430
}
431
.workspace-thumbnails-background {
432
color: $titlebar_secondary_fg_color;
433
background-color: $inverse_panel_bg_color;
434
border: none;
435
padding: 8px;
436
border-radius: 2px 0 0 2px;
437
&:rtl { border-radius: 0 2px 2px 0;}
438
}
439
.workspace-thumbnails {
440
spacing: 32px;
441
}
442
.workspace-add-button {
443
background-image: url(assets/add-workspace.svg);
444
height: 200px;
445
width: 35px;
446
transition-duration: shorter_duration;
447
&:hover {
448
background-image: url(assets/add-workspace-hover.svg);
449
}
450
&:active {
451
background-image: url(assets/add-workspace-active.svg);
452
}
453
}
454
.workspace-close-button, .window-close {
455
background-image: url(assets/close-window.svg);
456
height: 32px;
457
width: 32px;
458
-cinnamon-close-overlap: 20px;
459
&:rtl {
460
-st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
461
}
462
}
463
.window-close-area {
464
background-image: url(assets/trash-icon.png);
465
background-size: 100px;
466
background-color: $alt_panel_bg_color;
467
border: 1px solid $border_color;
468
border-bottom-width: 0;
469
border-radius: 20px 20px 0 0;
470
height: 120px;
471
width: 400px;
472
}
473
// this is OK with solid or transparent backgrounds
474
.expo-background {
475
background-color: $panel_bg_color;
476
}
477
// this always looks better semi transparent
478
.workspace-overview-background-shade {
479
background-color: $panel_bg_color;
480
}
481
.expo-workspace-thumbnail-frame {
482
border: 1px solid $border_color;
483
&#active {
484
border: 1px solid $accent_color;
485
}
486
}
487
// dialog box for the cinnamon debug utility
488
#LookingGlassDialog {
489
@extend %osd-panel-shared;
490
spacing: 4px;
492
padding: 8px;
493
}
494
// the calendar displayed by the calendar applet is a heavily modified menu and inherits from the .menu selectosr
495
// indivudual elements within the menu can be themed seperately with these selectors
496
.calendar {
497
padding: 4px 8px;
498
spacing-rows: 2px;
499
spacing-columns: 4px;
500
}
501
// also covers the year label
502
.datemenu-date-label {
503
@include font(title);
504
height: $menuitem_size - 2px * 2;
506
margin: 2px;
507
padding: 6px 16px;
508
border-radius: 2px;
509
color: $fg_color;
510
text-align: center;
511
&:focus { background-color: $divider_color };
512
}
513
.calendar-month-label {
514
@include font(body-2);
515
height: $menuitem_size - 6px * 2;
517
margin: 2px;
518
padding: 6px 16px;
519
border-radius: 2px;
520
color: $fg_color;
521
text-align: center;
522
&:focus { background-color: $divider_color };
523
}
524
.calendar-change-month-back {
525
@extend %calendar-shared;
526
background-image: url(assets/calendar-arrow-left.svg);
528
&:rtl {
529
background-image: url(assets/calendar-arrow-right.svg);
530
}
531
}
532
.calendar-change-month-forward {
533
@extend %calendar-shared;
534
background-image: url(assets/calendar-arrow-right.svg);
536
&:rtl {
537
background-image: url(assets/calendar-arrow-left.svg);
538
}
539
}
540
.calendar-day-base {
541
@include font(caption);
542
text-align: center;
544
width: $menuitem_size; height: $menuitem_size;
545
padding: 0;
546
margin: 2px;
547
border-radius: 100px;
548
&:hover,&:focus { background-color: $track_color; }
549
&:active {
550
color: $inverse_fg_color;
551
background-color: $accent_color;
552
border-color: transparent;
553
}
554
}
555
.calendar-week-number {
556
@include font(caption);
557
width: $menuitem_size - 7px; height: $menuitem_size;
559
margin: 2px;
560
padding: 0;
561
border-radius: 100px;
562
background-color: transparent;
563
color: $hint_fg_color;
564
text-align: center;
565
}
566
.calendar-day-heading {
567
@include font(caption);
568
width: $menuitem_size; height: $menuitem_size - 7px;
570
margin: 2px;
571
padding: 0;
572
border-radius: 100px;
573
background-color: transparent;
574
color: $hint_fg_color;
575
text-align: center;
576
}
577
.calendar-day {
578
border-width: 0;
579
}
580
.calendar-day-top {
581
border-top-width: 0;
582
}
583
.calendar-day-left {
584
border-left-width: 0;
585
}
586
.calendar-work-day {
587
}
588
.calendar-nonwork-day {
589
color: $fg_color;
590
}
591
.calendar-today {
592
font-weight: bold;
593
border: none;
594
}
595
.calendar-day-with-events {
596
color: $link_color;
597
font-weight: normal;
598
text-decoration: underline;
599
background-image: none;
600
}
601
.calendar-other-month-day {
602
color: $disabled_secondary_fg_color;
603
opacity: 0.5;
604
}
605
.calendar-week-number {
606
width: $menuitem_size; height: $menuitem_size - 7px;
607
margin: 2px;
608
padding: 7px 0 0;
609
border-radius: 100px;
610
background-color: transparent;
611
color: $hint_fg_color;
612
font-size: inherit;
613
font-weight: bold;
614
text-align: center;
615
}
616
// notification system
617
#notification {
618
background-color: $alt_lighter_bg_color;
619
border-radius: 2px;
620
border: 1px solid $border_color;
621
padding: 8px;
622
spacing-rows: 4px;
623
spacing-columns: 8px;
624
margin-from-right-edge-of-screen: 20px;
625
width: 34em;
626
color: $fg_color;
627
box-shadow: $shadow_2;
628
&.multi-line-notification {
629
padding-bottom: 8px;
630
}
631
StEntry {
632
@extend %dialog-entry-shared;
633
}
634
.url-highlighter {
635
link-color: $link_color;
636
}
637
}
638
// min height 159px is required to avoid stretching/distortion of notification image
639
.notification-with-image {
640
min-height: 159px;
641
color: $fg_color;
642
}
643
#notification-scrollview {
644
max-height: 10em;
645
> {
646
.top-shadow {
647
height: 1em;
648
}
649
.bottom-shadow {
650
height: 1em;
651
}
652
}
653
&:ltr > StScrollBar {
654
padding-left: 6px;
655
}
656
&:rtl > StScrollBar {
657
padding-right: 6px;
658
}
659
}
660
#notification-body {
661
spacing: 4px;
662
}
663
#notification-actions {
664
spacing: 8px;
665
}
666
.notification-button {
667
@extend %button-shared;
668
}
669
.notification-icon-button {
670
@extend %icon-button-shared;
671
> StIcon {
673
icon-size: 1.5em;
674
}
675
}
676
// non 3D alt-tab options
677
#altTabPopup {
678
padding: 8px;
679
spacing: 16px;
680
}
681
.switcher-list {
682
@extend %osd-panel-shared;
683
transition-duration: $shorter_duration;
685
.item-box {
686
padding: 8px;
687
border-radius: 2px;
688
&:selected {
689
background-color: $divider_color;
690
}
691
}
692
.thumbnail-box {
693
padding: 2px;
694
spacing: 4px;
695
}
696
.thumbnail {
697
width: 256px
698
}
699
.separator {
700
width: 1px;
701
background: $border_color;
702
}
703
}
704
.switcher-list-item-container {
705
spacing: 8px;
706
}
707
.thumbnail-scroll-gradient-left {
708
background-gradient-direction: horizontal;
709
background-gradient-start: rgba(51, 51, 51, 1.0);
710
background-gradient-end: rgba(51, 51, 51, 0);
711
border-radius: 2px;
712
border-radius-topright: 0;
713
border-radius-bottomright: 0;
714
width: 60px;
715
}
716
.thumbnail-scroll-gradient-right {
717
background-gradient-direction: horizontal;
718
background-gradient-start: rgba(51, 51, 51, 0);
719
background-gradient-end: rgba(51, 51, 51, 1.0);
720
border-radius: 2px;
721
border-radius-topleft: 0;
722
border-radius-bottomleft: 0;
723
width: 60px;
724
}
725
.switcher-arrow {
726
border-color: rgba(0,0,0,0);
727
color: $hint_fg_color;
728
&:highlighted {
729
color: $fg_color;
730
}
731
}
732
.switcher-preview-backdrop {
733
background-color: $panel_bg_color;
734
}
735
// hot corners animation
736
.ripple-box {
737
width: 104px;
738
height: 104px;
739
background-image: url(assets/corner-ripple.png);
740
background-color: $accent_color;
741
border-radius: 52px;
742
}
743
// on screen messages and input boxes
744
.modal-dialog {
745
@extend %osd-panel-shared;
746
padding: 16px 20px;
748
}
749
.modal-dialog-button-box {
750
spacing: 16px;
751
}
752
.modal-dialog-button {
753
@extend %button-shared;
754
}
755
.info-osd {
756
@extend %osd-info-workspace-shared;
757
}
758
// run dialog (ALT-F2)
759
.run-dialog-label {
760
color: $hint_fg_color;
761
padding-bottom: .4em;
762
}
763
.run-dialog-error-label {
764
color: $error_color;
765
}
766
.run-dialog-error-box {
767
padding-top: 16px;
768
spacing: 6px;
769
}
770
.run-dialog-completion-box {
771
padding-left: 15px;
772
}
773
.run-dialog-entry {
774
@extend %dialog-entry-shared;
775
}
776
.run-dialog {
777
border-radius: 2px;
778
padding: 16px 20px;
779
}
780
// this is an full screen overlay that is displayed with any cinnamon OSD or modal dialog which needs to always be semi transparent
781
.lightbox {
782
background-color: $alt_panel_bg_color;
783
}
784
// removable media dialogs
785
.cinnamon-mount-operation-icon {
786
icon-size: 4.8em;
787
}
788
.mount-password-reask {
789
color: $warning_color;
790
}
791
.show-processes-dialog {
792
spacing: 24px;
793
}
794
.mount-question-dialog {
795
spacing: 24px;
796
}
797
.show-processes-dialog-subject {
798
@extend %dialogs-subject-shared;
799
&:rtl {
801
@extend %dialogs-subject-rtl-shared;
802
}
803
}
804
.mount-question-dialog-subject {
805
@extend %dialogs-subject-shared;
806
&:rtl {
808
@extend %dialogs-subject-rtl-shared;
809
}
810
}
811
.show-processes-dialog-description {
812
@extend %dialogs-description-shared;
813
&:rtl {
815
padding-right: 17px;
816
}
817
}
818
.mount-question-dialog-description {
819
@extend %dialogs-description-shared;
820
&:rtl {
822
padding-right: 17px;
823
}
824
}
825
.show-processes-dialog-app-list {
826
max-height: 200px;
827
padding-top: 24px;
828
padding-left: 49px;
829
padding-right: 32px;
830
&:rtl {
831
padding-right: 49px;
832
padding-left: 32px;
833
}
834
}
835
.show-processes-dialog-app-list-item {
836
color: $fg_color;
837
&:hover {
838
color: $fg_color;
839
}
840
&:ltr {
841
padding-right: 1em;
842
}
843
&:rtl {
844
padding-left: 1em;
845
}
846
}
847
.show-processes-dialog-app-list-item-icon {
848
&:ltr {
849
padding-right: 17px;
850
}
851
&:rtl {
852
padding-left: 17px;
853
}
854
}
855
.show-processes-dialog-app-list-item-name {
856
}
857
// desktop zoom feature
858
.magnifier-zoom-region {
859
border: 3px solid $border_color;
860
&.full-screen {
861
border-width: 0;
862
}
863
}
864
// on screen keyboard
865
#keyboard {
866
background-color: $panel_bg_color;
867
}
868
.keyboard-key {
869
@extend %icon-button-shared;
870
@include font(button);
871
}
872
.keyboard-layout {
873
spacing: 8px;
874
padding: 8px;
875
}
876
.keyboard-row {
877
spacing: 16px;
878
}
879
.keyboard-subkeys { //long press on a key popup
880
color: inherit;
881
padding: 5px;
882
-arrow-border-radius: 0;
883
-arrow-background-color: transparent;
884
-arrow-border-width: 0;
885
-arrow-border-color: transparent;
886
-arrow-base: 0;
887
-arrow-rise: 0;
888
-boxpointer-gap: 5px;
889
background-color: $bg_color;
890
border-radius: 2px;
891
box-shadow: $shadow_2;
892
}
893
// main menu applet
894
.menu-favorites-box {
895
padding: 8px;
896
}
897
.menu-favorites-button {
898
padding: 0.4em 4px;
899
&:hover {
900
background-color: $divider_color;
901
border-radius: 2px;
902
color: $fg_color;
903
}
904
}
905
.menu-categories-box {
906
padding: 8px;
907
}
908
.menu-applications-inner-box {
909
padding: 8px;
910
}
911
.menu-applications-outer-box {
912
padding: 8px;
913
border-radius: 2px;
914
}
915
.menu-application-button {
916
padding: 0.4em 4px;
917
&:highlighted {
918
font-weight: bold;
919
}
920
}
921
.menu-application-button-selected {
922
padding: 0.4em 4px;
923
background-color: $divider_color;
924
border-radius: 2px;
925
color: $fg_color;
926
&:highlighted {
927
font-weight: bold;
928
}
929
}
930
.menu-application-button-label {
931
@extend %menu-button-label-shared;
932
}
933
.menu-category-button {
934
padding: 0.4em 4px;
935
}
936
.menu-category-button-greyed {
937
padding: 0.4em 4px;
938
color: $secondary_fg_color;
939
font-style: italic;
940
}
941
.menu-category-button-selected {
942
padding: 0.4em 4px;
943
background-color: $divider_color;
944
border-radius: 2px;
945
color: $fg_color;
946
&:hover {
947
}
948
}
949
.menu-category-button-label {
950
@extend %menu-button-label-shared;
951
}
952
// in the stock menu app descriptions are shown at the base of the menu
953
.menu-selected-app-box {
954
padding: 8px;
955
margin-bottom: 4px;
956
text-align: right;
957
&:rtl {
958
text-align: left;
959
}
960
}
961
.menu-selected-app-title {
962
@include font(caption);
963
}
964
.menu-selected-app-description {
965
@include font(caption);
966
max-width: 150px;
968
}
969
// the menus search box
970
.menu-search-box {
971
&:ltr {
972
padding-left: 30px;
973
padding-bottom: 5px;
974
padding-top: 5px;
975
}
976
&:rtl {
977
padding-right: 30px;
978
padding-bottom: 5px;
979
padding-top: 5px;
980
}
981
}
982
#menu-search-entry {
983
@extend %dialog-entry-shared;
984
}
985
.menu-search-entry-icon {
986
icon-size: 1em;
987
padding: 0 0;
988
color: $hint_fg_color;
989
}
990
// the window list applet. Some third party applets inherit some of this theming.
991
.window-list-box {
992
@include font(caption);
993
994
spacing: 4px;
995
padding: 0 3px;
996
&.vertical {
997
spacing: 4px;
998
padding: 3px 0;
999
}
1000
#appMenuIcon {
1001
}
1002
&:highlight {
1003
background: $titlebar_track_color;
1004
color: $titlebar_fg_color;
1005
}
1006
}
1007
.window-list-item-label {
1008
}
1009
// progress was added with cinnamon 3.6 and allows compatible applications to use the window list as a progress bar
1010
.window-list-item-box {
1011
background-color: rgba(0, 0, 0, 0.01);
1012
transition-duration: $shorter_duration;
1013
&:hover {
1014
color: $titlebar_fg_color;
1015
}
1016
&:highlight {
1017
}
1018
.progress {
1019
background-color: $success_color;
1020
}
1021
}
1022
.window-list-item-demands-attention {
1023
background-color: $info_bg_color;
1024
color: $titlebar_secondary_fg_color;
1025
}
1026
// cinnamon 3.8 will support an improved window-list-thumbnail preview which now has it's own selector
1027
.window-list-preview {
1028
background-color: $alt_lighter_bg_color;
1029
border-radius: 2px;
1030
padding: 10px 15px;
1031
spacing: 1em;
1032
color: $fg_color;
1033
}
1034
// the sound player applet
1035
.sound-player {
1036
StButton {
1037
@extend %icon-button-shared;
1038
&:small {
1040
min-width: $small_size;
1041
min-height: $small_size;
1042
padding: 4px;
1043
StIcon {
1044
icon-size: 1em;
1045
}
1046
}
1047
StIcon {
1048
icon-size: 1.5em;
1049
}
1050
}
1051
.slider {
1052
@extend %slider-shared;
1053
height: 5px;
1055
}
1056
StBoxLayout {
1057
spacing: 0.5em;
1058
}
1059
> StBoxLayout {
1060
padding: 5px;
1061
}
1062
}
1063
.sound-player-generic-coverart {
1064
background: rgba(0,0,0,0.2);
1065
}
1066
.sound-player-overlay {
1067
background-color: $alt_lighter_bg_color;
1068
min-width: 300px;
1069
padding: 12px 16px;
1070
spacing: 0.5em;
1071
color: $secondary_fg_color;
1072
}
1073
// workspace switcher applet simple button view
1074
.workspace-button {
1075
background-color: $opaque_panel_bg_color;
1076
width: 2em;
1077
height: 1em;
1078
color: $titlebar_secondary_fg_color;
1079
margin: 2px;
1080
&:outlined {
1081
background-color: $titlebar_track_color;
1082
color: $titlebar_fg_color;
1083
}
1084
}
1085
// workspace switcher applet graph view
1086
.workspace-graph {
1087
background-color: $panel_bg_color;
1088
.workspace {
1089
background-color: $opaque_panel_bg_color;
1090
border: 1px solid $border_color;
1091
&:active {
1092
background-color: $titlebar_track_color;
1093
border: 1px solid $border_color;
1095
.windows {
1096
-active-window-background: rgba(255, 255, 255, 0.8);
1097
-active-window-border: rgba(0, 0, 0, 0.9);
1098
-inactive-window-background: rgba(140, 140, 140, 0.8);
1099
-inactive-window-border: rgba(0, 0, 0, 0.7);
1100
}
1101
}
1102
.windows {
1103
-active-window-background: rgba(140, 140, 140, 0.8);
1104
-active-window-border: rgba(0, 0, 0, 0.7);
1105
-inactive-window-background: rgba(140, 140, 140, 0.8);
1106
-inactive-window-border: rgba(0, 0, 0, 0.7);
1107
}
1108
}
1109
}
1110
// most panel launcher themeing is orientation specific
1111
.panel-launchers {
1112
padding: 0 4px;
1113
spacing: 4px;
1114
transition-duration: $shorter_duration;
1115
.launcher {
1116
background-color:rgba(0, 0, 0, 0.01);
1117
}
1118
&.vertical {
1119
padding: 4px 0;
1120
spacing: 4px;
1121
.launcher .icon-box {
1122
padding-top: 0;
1123
}
1124
}
1125
}
1126
// applets in general
1127
.applet-separator-line, .applet-separator-line-vertical {
1128
width: 2px;
1129
background: $titlebar_divider_color;
1130
}
1131
.applet-spacer:highlight {
1132
background: $highlight_color;
1133
}
1134
.applet-box {
1135
background-color: rgba(0, 0, 0, 0.01);
1136
color: $titlebar_secondary_fg_color;
1137
transition-duration: $shorter_duration;
1138
&:checked {
1139
color: $titlebar_fg_color;
1140
.applet-label {
1141
color: $titlebar_fg_color;
1142
}
1143
}
1144
&:hover {
1145
color: $titlebar_fg_color;
1146
.applet-label {
1147
color: $titlebar_fg_color;
1148
}
1149
}
1150
&:highlight {
1151
background: $titlebar_track_color;
1152
color: $titlebar_fg_color;
1153
.applet-label {
1154
color: $titlebar_fg_color;
1155
}
1156
}
1157
}
1158
.applet-label {
1159
@include font(body-2);
1160
color: $titlebar_secondary_fg_color;
1162
}
1163
// icon-size set to 22 to match hard-coded menu icon size - applet-icon style is used for search provider results in menu
1164
.applet-icon {
1165
color: $titlebar_secondary_fg_color;
1166
padding: 0;
1167
spacing: 0;
1168
icon-size: 22px;
1169
}
1170
// desklets - the base .desklet selector is for 'undecorated' desklets however some subtle background themeing is desirable
1171
// to maintain visibility irrespctive of wallpaper and to allow for the highlighting scheme to work
1172
.desklet {
1173
@include font(caption);
1174
1175
color: $titlebar_fg_color;
1176
border: none;
1177
box-shadow: $shadow_4;
1178
padding: 12px;
1179
background-color: $alt_panel_bg_color;
1180
border-radius: 2px
1181
}
1182
// these do not inherit from .desklet
1183
.desklet-with-borders {
1184
@extend %desklet-shared;
1185
@include font(caption);
1186
background-color: $alt_lighter_bg_color;
1188
border-radius: 2px;
1189
&:highlight {
1190
background-color: $highlight_color;
1191
}
1192
}
1193
.desklet-with-borders-and-header {
1194
@extend %desklet-shared;
1195
@include font(caption);
1196
1197
background-color: $alt_lighter_bg_color;
1198
border-radius-bottomleft: 2px;
1199
border-radius-bottomright: 2px;
1200
&:highlight {
1201
background-color: $highlight_color;
1202
}
1203
}
1204
.desklet-header {
1205
@include font(title)
1206
@extend %desklet-shared;
1207
background-color: $alt_lighter_bg_color;
1209
border-radius-topleft: 2px;
1210
border-radius-topright: 2px;
1211
&:highlight {
1212
background-color: $highlight_color;
1213
}
1214
}
1215
.photoframe-box {
1216
@extend %desklet-shared;
1217
1218
background-color: $alt_lighter_bg_color;
1219
border-radius: 2px;
1220
&:highlight {
1221
background-color: $highlight_color;
1222
}
1223
}
1224
.desklet-drag-placeholder {
1225
border: 2px solid $accent_color;
1226
background-color: $alt_panel_bg_color;
1227
border-radius: 2px;
1228
}
1229
.launcher {
1230
padding: 1px;
1231
.icon-box {
1232
padding-top: 2px;
1233
}
1234
}
1235
// applet 'about' OSDs - inherits from modal dialogs
1236
.about-content {
1237
min-width: 250px;
1238
min-height: 150px;
1239
spacing: 8px;
1240
padding-bottom: 16px;
1241
}
1242
.about-title {
1243
@include font(title);
1244
}
1245
.about-uuid {
1246
@include font(caption);
1247
}
1248
.about-icon {
1249
padding-right: 20px;
1250
}
1251
.about-scrollBox {
1252
border: 1px solid $border_color;
1253
border-radius: 2px;
1254
}
1255
.about-scrollBox-innerBox {
1256
padding: 1.2em;
1257
spacing: 1.2em;
1258
}
1259
.about-description {
1260
padding-top: 4px;
1261
}
1262
.about-version {
1263
padding-left: 7px;
1264
}
1265
.workspace-osd {
1266
@extend %osd-info-workspace-shared;
1267
}
1268
.expo-workspaces-name-entry {
1269
@include font(body-1);
1270
background-color: rgba(0, 0, 0, 0.01);
1272
color: $titlebar_secondary_fg_color;
1273
padding: 4px 6px;
1274
selection-background-color: $titlebar_track_color;
1275
selected-color: $titlebar_fg_color;
1276
caret-color: $titlebar_hint_fg_color;
1277
text-align: center;
1278
height: 1.5em;
1279
border-radius: 2px;
1280
-cinnamon-caption-spacing: 12px;
1281
&#selected {
1282
color: $titlebar_fg_color;
1283
background-color: $titlebar_track_color;
1284
}
1285
&:focus {
1286
color: $titlebar_fg_color;
1287
box-shadow: 0 -3px 0 0 $accent-color inset;
1288
}
1289
&:hover {
1290
box-shadow: 0 -3px 0 0 $accent-color inset;
1291
}
1292
}
1293
.notification-applet-padding {
1294
padding: .5em 1em;
1295
}
1296
.notification-applet-container {
1297
max-height: 100px;
1298
}
1299
.check-box {
1300
CinnamonGenericContainer {
1301
spacing: 8px;
1302
}
1303
StBin {
1304
@extend %check-box-shared;
1305
}
1306
&:focus {
1307
StBin {
1308
@extend %check-box-shared;
1309
}
1310
&:checked StBin {
1311
background-image: url(assets/checkbox.svg);
1312
}
1313
}
1314
StLabel {
1315
}
1316
&:checked StBin {
1317
background-image: url(assets/checkbox.svg);
1318
}
1319
}
1320
.radiobutton {
1321
CinnamonGenericContainer {
1322
spacing: 8px;
1323
}
1324
StBin {
1325
@extend %radiobutton-shared;
1326
}
1327
&:focus {
1328
StBin {
1329
@extend %radiobutton-shared;
1330
}
1331
&:checked StBin {
1332
background-image: url(assets/radiobutton.svg);
1333
}
1334
}
1335
StLabel {
1336
}
1337
&:checked StBin {
1338
background-image: url(assets/radiobutton.svg);
1339
}
1340
}
1341
.flashspot {
1342
background-color: $accent_color;
1343
}
1344
// displayed when media keys are pressed.
1345
.osd-window {
1346
@extend %osd-panel-shared;
1347
spacing: 1em;
1349
padding: 16px;
1350
.level {
1351
height: 0.7em;
1352
border-radius: 0.3em;
1353
background-color: $track_color;
1354
}
1355
.level-bar {
1356
border-radius: 0.3em;
1357
background-color: $accent_color;
1358
}
1359
}
1360
// on screen preview of windows tiling placement
1361
.tile-preview {
1362
@extend %tile-shared;
1363
&.snap {
1365
@extend %tile-shared-snap;
1366
}
1367
}
1368
.tile-hud {
1369
@extend %tile-shared;
1370
&.snap {
1372
@extend %tile-shared-snap;
1373
}
1374
&:top {
1375
border-top-width: 0;
1376
border-radius: 0 0 10px 10px;
1378
}
1379
&:bottom {
1380
border-bottom-width: 0;
1381
border-radius: 2px 2px 0 0;
1383
}
1384
&:left {
1385
border-left-width: 0;
1386
border-radius: 0 10px 10px 0;
1388
}
1389
&:right {
1390
border-right-width: 0;
1391
border-radius: 10px 0 0 10px;
1393
}
1394
&:top-left {
1395
border-top-width: 0;
1396
border-left-width: 0;
1397
border-radius: 0 0 10px 0;
1399
}
1400
&:top-right {
1401
border-top-width: 0;
1402
border-right-width: 0;
1403
border-radius: 0 0 0 10px;
1405
}
1406
&:bottom-left {
1407
border-bottom-width: 0;
1408
border-left-width: 0;
1409
border-radius: 0 10px 0 0;
1411
}
1412
&:bottom-right {
1413
border-bottom-width: 0;
1414
border-right-width: 0;
1415
border-radius: 10px 0 0 0;
1417
}
1418
}
1419
.systray {
1420
spacing: 4px;
1421
}
1422
// user-applet specific themeing - overrides applet stylesheet
1423
.user-box {
1424
padding: 0.4em 1.3em;
1425
spacing: 10px;
1426
}
1427
.user-icon {
1428
padding: 4px;
1429
border: none;
1430
}
1431
.user-label {
1432
color: $titlebar_secondary_fg_color;
1433
font-weight: bold;
1434
}
1435