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