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