_switcher.scss
ASCII text
1
/* App Switcher */
2
3
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../typography";
6
@use "osd";
7
8
.switcher-popup {
9
padding: 8px;
10
spacing: 16px;
11
}
12
13
// switcher onscreen panel
14
.switcher-list {
15
@include osd.panel;
16
17
.switcher-list-item-container {
18
spacing: 8px;
19
}
20
21
.item-box {
22
transition-duration: theme.$state-duration;
23
padding: 8px;
24
border: 0;
25
border-radius: theme.$corner-radius;
26
27
&:outlined {
28
padding: 8px;
29
border: 0;
30
box-shadow: none;
31
background-color: theme-color.activated-overlay(theme-color.$on-surface);
32
color: inherit;
33
}
34
35
&:selected {
36
background-color: theme-color.$selected-overlay;
37
color: inherit;
38
}
39
}
40
41
// window thumbnails
42
.thumbnail-box {
43
padding: 2px;
44
spacing: 4px;
45
}
46
47
.thumbnail {
48
width: 256px;
49
}
50
51
.separator {
52
width: 1px;
53
background: theme-color.divider(theme-color.$on-surface);
54
}
55
}
56
57
.switcher-arrow {
58
transition-duration: theme.$state-duration;
59
border-color: transparent;
60
color: theme-color.hint(theme-color.$on-surface);
61
62
&:highlighted {
63
color: theme-color.$on-surface;
64
}
65
}
66
67
// Input Source Switcher
68
.input-source-switcher-symbol {
69
width: 96px;
70
height: 96px;
71
@include typography.headline3;
72
}
73
74
// Window cycler highlight
75
.cycler-highlight {
76
border: 4px solid theme-color.$primary;
77
}
78