1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
// Styles for /lib/components/{yabai|aerospace}/process.jsx components
export const styles = /* css */ `
.process {
display: flex;
pointer-events: none;
touch-action: none;
}
.process--centered {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.process:empty {
display: none;
}
.process__container {
display: flex;
align-items: stretch;
box-sizing: border-box;
pointer-events: auto;
touch-action: auto;
}
.process--centered .process__container {
height: var(--bar-height);
margin: 0 auto;
padding: var(--bar-inner-margin);
}
.simple-bar--no-bar-background .process__container:not(:empty) {
padding: 4px 5px;
background-color: var(--background);
box-shadow: var(--light-shadow);
border-radius: var(--bar-radius);
}
.process__layout {
display: flex;
align-items: center;
padding: var(--item-inner-margin);
color: var(--white);
font-family: var(--font);
font-size: var(--font-size);
background-color: var(--main-alt);
border-radius: var(--item-radius);
box-shadow: var(--light-shadow);
}
.simple-bar--spaces-background-color-as-foreground .process__layout {
color: var(--foreground);
font-weight: 700;
background-color: transparent;
box-shadow: none;
}
.process__skhd-mode {
display: flex;
align-items: center;
padding: var(--item-inner-margin);
color: var(--foreground);
background-color: var(--minor);
font-family: var(--font);
font-size: var(--font-size);
border-radius: var(--item-radius);
box-shadow: var(--light-shadow);
font-style: italic;
text-transform: uppercase;
}
.process__window {
display: flex;
align-items: center;
gap: 3px;
margin: var(--item-outer-margin);
padding: var(--item-inner-margin);
color: currentColor;
font-family: var(--font);
font-size: var(--font-size);
background-color: var(--minor);
border-radius: var(--item-radius);
border: 0;
outline: none;
box-shadow: var(--light-shadow);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing),
border 160ms var(--transition-easing), box-shadow 160ms var(--transition-easing);
z-index: 0;
}
.simple-bar--spaces-background-color-as-foreground .process__window {
background-color: transparent;
box-shadow: none;
}
.simple-bar--no-shadow .process__container,
.simple-bar--no-bar-background.simple-bar--no-shadow .process__container,
.simple-bar--no-shadow .process__layout,
.simple-bar--no-shadow .process__skhd-mode,
.simple-bar--no-shadow .process__window {
box-shadow: none;
}
.process__window:only-child {
margin: 0;
}
.process__window--only-current {
background-color: var(--minor);
}
.process__window--focused {
color: var(--minor);
background-color: var(--foreground);
}
.process__stack-index {
padding: 2px 5px;
color: var(--foreground);
background-color: var(--background);
font-size: calc(var(--font-size) - 1px);
border-radius: var(--item-radius);
}
.process__window--focused .process__stack-index {
color: var(--white);
background-color: var(--main-alt);
}
.simple-bar--spaces-background-color-as-foreground .process__window--focused {
color: var(--foreground);
background-color: transparent;
box-shadow: var(--light-shadow), 0 0 0 1px var(--foreground);
}
.process__window:not(.process__window--only-current):not(.process__window--focused):is(:hover, :active) {
box-shadow: var(--light-shadow), var(--hover-ring);
}
.process__icon {
flex: 0 0 11px;
width: 11px;
height: 11px;
fill: currentColor;
transition: margin-right 160ms var(--transition-easing);
}
.process__window--only-current .process__icon,
.process__window--focused .process__icon,
.process__window--expanded .process__icon {
margin-right: 6px;
}
.process__window--only-icon .process__icon {
margin-right: 0;
}
.process__inner {
max-width: 0;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
transition: max-width 160ms var(--transition-easing);
}
.process__window--focused .process__inner,
.process__window--expanded .process__inner {
max-width: var(--item-max-width);
}
.process__window--only-current .process__inner {
max-width: 400px;
}
.process__name {
margin-top: 2px;
white-space: nowrap;
transition: transform 160ms var(--transition-easing);
}
`;
|
