aboutsummaryrefslogtreecommitdiff
path: root/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components
diff options
context:
space:
mode:
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components')
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js134
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js40
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js16
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js9
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js32
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js65
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js10
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js10
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js15
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js49
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js10
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js30
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js83
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js80
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js11
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js48
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js71
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js68
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js83
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js55
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js15
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js15
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js85
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js17
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js163
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js13
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js11
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js26
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js89
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js161
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js101
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js83
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js155
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js408
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js170
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js15
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js137
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js152
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js50
39 files changed, 2785 insertions, 0 deletions
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js
new file mode 100755
index 0000000..5c0c413
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js
@@ -0,0 +1,134 @@
1// Styles for /lib/components/data/battery.jsx component
2export const batteryStyles = /* css */ `
3.battery {
4 position: relative;
5 background-color: var(--magenta);
6 overflow: hidden;
7}
8.battery--caffeinate,
9.simple-bar--no-color-in-data .battery--caffeinate {
10 color: var(--black);
11 background-color: var(--white);
12}
13.simple-bar--widgets-background-color-as-foreground .battery {
14 color: var(--magenta);
15 background-color: transparent;
16}
17.simple-bar--widgets-background-color-as-foreground .battery--caffeinate {
18 color: var(--foreground);
19}
20.battery__icon {
21 position: relative;
22 width: 16px;
23 height: 9px;
24 margin-top: -2px;
25 margin-right: 10px;
26}
27.battery__icon::after {
28 content: '';
29 position: absolute;
30 top: calc(10% + 1px);
31 left: calc(100% + 2px);
32 width: 2px;
33 height: 80%;
34 border-radius: 0 3px 3px 0;
35 background-color: currentColor;
36}
37.simple-bar--no-color-in-data .battery__icon::after {
38 background-color: currentColor;
39}
40.battery__icon-inner {
41 position: relative;
42 width: 100%;
43 height: 100%;
44 border-radius: 3px;
45 border: 1px solid currentColor;
46 overflow: hidden;
47}
48.battery__charging-icon {
49 position: absolute;
50 top: -1px;
51 left: calc(50% - 6px);
52 width: 11px;
53 height: 11px;
54 fill: currentColor;
55 stroke: var(--magenta);
56 stroke-width: 2;
57}
58.simple-bar--no-color-in-data .battery__charging-icon {
59 stroke: var(--minor);
60}
61.battery--caffeinate .battery__charging-icon {
62 stroke: var(--white);
63}
64.simple-bar--widgets-background-color-as-foreground .battery__charging-icon {
65 stroke: var(--background);
66}
67.simple-bar--no-color-in-data .battery__icon-inner {
68 fill: currentColor;
69 border: 1px solid currentColor;
70}
71.battery__icon-filler {
72 position: absolute;
73 top: 1px;
74 left: 1px;
75 width: calc(100% - 2px);
76 height: calc(100% - 2px);
77 background-color: currentColor;
78 border-radius: 2px;
79 transform: scaleX(0);
80 transform-origin: left center;
81 transition: transform 160ms var(--transition-easing);
82 z-index: 0;
83}
84.simple-bar--no-color-in-data .battery__icon-filler {
85 background-color: currentColor;
86 opacity: 0.8;
87}
88.simple-bar--no-color-in-data .battery--caffeinate .battery__icon::after,
89.simple-bar--no-color-in-data .battery--caffeinate .battery__icon-filler {
90 background-color: currentColor;
91}
92.battery--low .battery__icon-filler {
93 background-color: var(--red);
94}
95.battery--low-power-mode .battery__icon-filler {
96 background-color: var(--yellow);
97}
98.battery__caffeinate-icon {
99 position: absolute;
100 top: calc(50% - 12px);
101 right: -4px;
102 width: 26px !important;
103 height: 26px !important;
104 opacity: 0.15;
105}
106.battery__caffeinate-icon g path {
107 animation: coffee-spur-sliding-up 1600ms var(--transition-easing) infinite;
108}
109.simple-bar--animations-disabled .battery__caffeinate-icon g path {
110 animation: none;
111}
112.battery__caffeinate-icon g path:nth-child(2) {
113 animation-delay: -600ms;
114}
115.battery__caffeinate-icon g path:nth-child(3) {
116 animation-delay: -280ms;
117}
118@keyframes coffee-spur-sliding-up {
119 0% {
120 opacity: 0;
121 transform: translateY(3px);
122 }
123 20% {
124 opacity: 0.7;
125 }
126 80% {
127 opacity: 0.7;
128 }
129 100% {
130 opacity: 0;
131 transform: translateY(-4px);
132 }
133}
134`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js
new file mode 100755
index 0000000..c70a1ee
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js
@@ -0,0 +1,40 @@
1// Styles for /lib/components/data/browser-track.jsx
2export const browserTrackStyles = /* css */ `
3.browser-track {
4 position: relative;
5 background-color: var(--green);
6}
7.simple-bar--widgets-background-color-as-foreground .browser-track {
8 color: var(--green);
9 background-color: transparent;
10}
11.browser-track__icons {
12 position: relative;
13}
14.browser-track__icons > svg:nth-of-type(1),
15.browser-track__icons > svg:nth-of-type(2) {
16 width: 10px;
17 height: 10px;
18 fill: currentColor;
19}
20.browser-track__icons > svg:nth-of-type(1) {
21 margin-right: 7px;
22}
23.simple-bar--no-color-in-data .browser-track__icons > svg:nth-of-type(1) {
24 fill: currentColor;
25}
26.browser-track__icons > svg:nth-of-type(2) {
27 position: absolute;
28 bottom: -1px;
29 right: 2px;
30 stroke: var(--green);
31 stroke-width: 3px;
32}
33.simple-bar--widgets-background-color-as-foreground .browser-track__icons > svg:nth-of-type(2) {
34 stroke: var(--background);
35}
36.simple-bar--no-color-in-data .browser-track__icons > svg:nth-of-type(2) {
37 fill: currentColor;
38 stroke: var(--minor);
39}
40`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js
new file mode 100755
index 0000000..672c246
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js
@@ -0,0 +1,16 @@
1// Styles for /lib/components/data/cpu.jsx component
2export const cpuStyles = /* css */ `
3.cpu {
4 color: var(--foreground);
5 background-color: var(--minor);
6}
7.cpu--graph {
8 min-width: 90px;
9 padding: 0;
10}
11.cpu__usage {
12 width: 4ch;
13 padding: 3px;
14 text-align: right;
15}
16`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js
new file mode 100755
index 0000000..3c9b0ae
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js
@@ -0,0 +1,9 @@
1// Styles for /lib/components/data/crypto.jsx component
2export const cryptoStyles = /* css */ `
3.crypto {
4 color: var(--foreground);
5 background-color: var(--minor);
6}
7.simple-bar--widgets-background-color-as-foreground .crypto {
8 background-color: transparent;
9}`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js
new file mode 100755
index 0000000..62710aa
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js
@@ -0,0 +1,32 @@
1// Styles for /lib/components/data/data-widget-loader.jsx component
2export const dataWidgetLoaderStyles = /* css */ `
3.data-widget-loader {
4 animation: data-widget-loader-appearance 320ms var(--transition-easing);
5}
6@keyframes data-widget-loader-appearance {
7 0% {
8 opacity: 0;
9 }
10}
11.data-widget-loader::before {
12 content: "";
13 width: 10px;
14 height: 10px;
15 margin-right: 7px;
16 background-color: currentColor;
17 border-radius: 50%;
18 opacity: 0.75;
19}
20.data-widget-loader__inner {
21 border: 2px solid transparent;
22 border-bottom-color: currentColor;
23 box-sizing: border-box;
24 border-radius: 50%;
25 animation: data-widget-loader-spining 640ms ease infinite;
26}
27@keyframes data-widget-loader-spining {
28 100% {
29 transform: rotate(360deg);
30 }
31}
32`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js
new file mode 100755
index 0000000..f0b5cf1
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js
@@ -0,0 +1,65 @@
1// Styles for /lib/components/data/data-widget.jsx component
2export const dataWidgetStyles = /* css */ `
3.data-widget {
4 display: flex;
5 align-items: center;
6 margin: var(--item-outer-margin);
7 padding: var(--item-inner-margin);
8 color: var(--background);
9 font-family: var(--font);
10 font-size: inherit;
11 background-color: var(--minor);
12 text-decoration: none;
13 white-space: nowrap;
14 border-radius: var(--item-radius);
15 border: 0;
16 outline: none;
17 cursor: default;
18 user-select: none;
19 -webkit-user-select: none;
20 box-shadow: var(--light-shadow);
21 transition: all 160ms var(--transition-easing);
22}
23.simple-bar--no-shadow .data-widget {
24 box-shadow: none;
25}
26.simple-bar--no-color-in-data .data-widget {
27 color: var(--foreground);
28 background-color: var(--minor);
29}
30.simple-bar--widgets-background-color-as-foreground .data-widget {
31 background-color: transparent;
32 box-shadow: none;
33}
34.simple-bar--widgets-background-color-as-foreground.simple-bar--no-color-in-data .data-widget {
35 color: var(--foreground) !important;
36 background-color: transparent;
37}
38.data-widget--clickable {
39 cursor: pointer;
40}
41.data-widget--clickable:hover {
42 box-shadow: var(--light-shadow), var(--hover-ring);
43}
44.data-widget--clickable:active {
45 box-shadow: var(--light-shadow), var(--focus-ring);
46}
47.data-widget > svg {
48 width: 14px;
49 height: 14px;
50 margin-right: 7px;
51 fill: currentColor;
52}
53.data-widget__inner {
54 max-width: var(--item-max-width);
55 display: flex;
56 flew-wrap: nowrap;
57 overflow: hidden;
58}
59.data-widget__slider {
60 display: flex;
61 align-items: center;
62 white-space: nowrap;
63 transition: transform 160ms var(--transition-easing);
64}
65`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js
new file mode 100755
index 0000000..c152449
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js
@@ -0,0 +1,10 @@
1// Styles for /lib/components/data/date-display.jsx component
2export const dateStyles = /* css */ `
3.date-display {
4 background-color: var(--cyan);
5}
6.simple-bar--widgets-background-color-as-foreground .date-display {
7 color: var(--cyan);
8 background-color: transparent;
9}
10`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js
new file mode 100755
index 0000000..f451ddc
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js
@@ -0,0 +1,10 @@
1// Styles for /lib/components/data/github.jsx component
2export const githubStyles = /* css */ `
3.github {
4 position: relative;
5 color: var(--foreground);
6 background-color: var(--minor);
7 overflow: hidden;
8 z-index: 0;
9}
10`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js
new file mode 100755
index 0000000..c3f4b78
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js
@@ -0,0 +1,15 @@
1// Styles for /lib/components/data/gpu.jsx component
2export const gpuStyles = /* css */ `
3.gpu {
4 color: var(--foreground);
5 background-color: var(--minor);
6}
7.gpu--graph {
8 min-width: 70px;
9 padding: 0;
10}
11.gpu__usage {
12 width: 4ch;
13 text-align: right;
14}
15`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js
new file mode 100755
index 0000000..0bf3609
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js
@@ -0,0 +1,49 @@
1// Styles for /lib/components/data/graph.jsx component
2export const graphStyles = /* css */ `
3.graph {
4 position: relative;
5 width: 100%;
6 height: 100%;
7 display: flex;
8 align-items: flex-end;
9 gap: 4px;
10 overflow: hidden;
11 border-radius: inherit;
12}
13.graph__bars {
14 flex: 1 1 100%;
15 height: 75%;
16 display: flex;
17 align-items: flex-end;
18 justify-content: flex-end;
19 pointer-events: none;
20}
21.graph__bar {
22 min-height: 1px;
23 opacity: 0.75;
24}
25.graph__data {
26 position: absolute;
27 top: 3px;
28 left: 3px;
29 width: calc(100% - 6px);
30 flex: 0 0 auto;
31 display: flex;
32 justify-content: space-between;
33 gap: 2px;
34}
35.graph__data-item {
36 display: flex;
37 align-items: center;
38 gap: 3px;
39}
40.graph__data-item-icon {
41 flex: 0 0 10px;
42 width: 10px;
43 height: 10px;
44 fill: currentColor;
45}
46.graph__data-item-value {
47 font-size: calc(var(--font-size) - 2px);
48}
49`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js
new file mode 100755
index 0000000..dfc4f70
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js
@@ -0,0 +1,10 @@
1// Styles for /lib/components/data/keyboard.jsx component
2export const keyboardStyles = /* css */ `
3.keyboard {
4 background-color: var(--main-alt);
5}
6.simple-bar--widgets-background-color-as-foreground .keyboard {
7 color: var(--main-alt);
8 background-color: transparent;
9}
10`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js
new file mode 100755
index 0000000..d0239bb
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js
@@ -0,0 +1,30 @@
1// Styles for /lib/components/data/memory.jsx component
2export const memoryStyles = /* css */ `
3.memory {
4 color: var(--foreground);
5 background-color: var(--minor);
6}
7.memory--low {
8 --pie-color: var(--green);
9}
10.memory--medium {
11 --pie-color: var(--yellow);
12}
13.memory--high {
14 --pie-color: var(--red);
15}
16.memory__pie {
17 flex: 0 0 21px;
18 width: 21px;
19 height: 21px;
20 border-radius: 50%;
21}
22.memory__content {
23 display: flex;
24 gap: 4px;
25 padding-left: 5px;
26}
27.memory--high .memory__content {
28 color: var(--red);
29}
30`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js
new file mode 100755
index 0000000..7a58f10
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js
@@ -0,0 +1,83 @@
1// Styles for /lib/components/data/mic.jsx component
2export const micStyles = /* css */ `
3.mic {
4font-variant-numeric: tabular-nums;
5 background-color: var(--orange);
6 transform: translateZ(0);
7}
8.simple-bar--widgets-background-color-as-foreground .mic {
9 color: var(--orange);
10 background-color: transparent;
11}
12.mic__slider-container {
13 --slider-size: 10px;
14
15 position: relative;
16 max-width: 0;
17 height: 100%;
18 display: flex;
19 align-items: center;
20 padding: 0;
21 overflow: hidden;
22 opacity: 0.7;
23 border-radius: var(--item-radius);
24 transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
25 opacity 320ms var(--transition-easing),
26 clip-path 0ms var(--transition-easing);
27}
28.mic:hover .mic__slider-container,
29.mic--dragging .mic__slider-container {
30 max-width: 100px;
31 clip-path: inset(-100vh -100vw);
32 transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
33 opacity 320ms var(--transition-easing),
34 clip-path 320ms 320ms var(--transition-easing)
35}
36.mic__slider-container:hover {
37 opacity: 1;
38}
39.mic__slider {
40 width: 100px;
41 height: var(--slider-size);
42 appearance: none;
43 background-color: var(--background);
44 border-radius: var(--item-radius);
45 outline: none;
46 -webkit-appearance: none;
47}
48.simple-bar--widgets-background-color-as-foreground .mic__slider {
49 background-color: var(--foreground);
50}
51.mic__slider::-webkit-slider-thumb {
52 width: var(--slider-size);
53 height: var(--slider-size);
54 background-color: var(--foreground);
55 border-radius: var(--item-radius);
56 cursor: pointer;
57 -webkit-appearance: none;
58 transform-origin: center;
59 transition: transform 160ms var(--transition-easing);
60}
61.simple-bar--widgets-background-color-as-foreground .mic__slider::-webkit-slider-thumb {
62 background-color: var(--orange);
63}
64.mic__slider::-webkit-slider-thumb:hover {
65 transform: scale(1.5);
66}
67.mic__display {
68 display: flex;
69 align-items: center;
70 margin-right: 4px;
71 overflow: hidden;
72}
73.mic__display:active {
74 color: currentColor;
75}
76.mic__display > svg {
77 flex-shrink: 0;
78 width: 14px;
79 height: 14px;
80 margin-right: 3px;
81 fill: currentColor;
82}
83`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js
new file mode 100755
index 0000000..da159ab
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js
@@ -0,0 +1,80 @@
1// Styles for /lib/components/data/mpd.jsx component
2export const mpdStyles = /* css */ `
3.mpd {
4 position: relative;
5 background-color: var(--cyan);
6}
7.simple-bar--widgets-background-color-as-foreground .mpd {
8 color: var(--cyan);
9 background-color: transparent;
10}
11.mpd__outer {
12 display: flex;
13 gap: 4px;
14}
15.mpd__inner {
16 max-width: 140px;
17 display: flex;
18 flew-wrap: nowrap;
19 overflow: hidden;
20}
21.mpd__info {
22 white-space: nowrap;
23 transition: transform 160ms var(--transition-easing);
24}
25.mpd__slider-container {
26 --slider-size: 10px;
27
28 position: relative;
29 max-width: 0;
30 height: 100%;
31 display: flex;
32 align-items: center;
33 padding: 0;
34 clip-path: inset(0);
35 opacity: 0.7;
36 border-radius: var(--item-radius);
37 transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
38 opacity 320ms var(--transition-easing),
39 clip-path 0ms var(--transition-easing);
40}
41.mpd:hover .mpd__slider-container,
42.mpd--dragging .mpd__slider-container {
43 max-width: 100px;
44 clip-path: inset(-100vh -100vw);
45 transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
46 opacity 320ms var(--transition-easing),
47 clip-path 320ms 320ms var(--transition-easing)
48}
49.mpd__slider-container:hover {
50 opacity: 1;
51}
52.mpd__slider {
53 width: 100px;
54 height: var(--slider-size);
55 appearance: none;
56 background-color: var(--background);
57 border-radius: var(--item-radius);
58 outline: none;
59 -webkit-appearance: none;
60}
61.simple-bar--widgets-background-color-as-foreground .mpd__slider {
62 background-color: var(--foreground);
63}
64.mpd__slider::-webkit-slider-thumb {
65 width: var(--slider-size);
66 height: var(--slider-size);
67 background-color: var(--foreground);
68 border-radius: var(--item-radius);
69 cursor: pointer;
70 -webkit-appearance: none;
71 transform-origin: center;
72 transition: transform 160ms var(--transition-easing);
73}
74.simple-bar--widgets-background-color-as-foreground .mpd__slider::-webkit-slider-thumb {
75 background-color: var(--blue);
76}
77.mpd__slider::-webkit-slider-thumb:hover {
78 transform: scale(1.5);
79}
80`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js
new file mode 100755
index 0000000..5de3b1f
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js
@@ -0,0 +1,11 @@
1// Styles for /lib/components/data/music.jsx component
2export const musicStyles = /* css */ `
3.music {
4 position: relative;
5 background-color: var(--green);
6}
7.simple-bar--widgets-background-color-as-foreground .music {
8 color: var(--green);
9 background-color: transparent;
10}
11`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js
new file mode 100755
index 0000000..384d970
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js
@@ -0,0 +1,48 @@
1// Styles for /lib/components/data/netstats.jsx component
2export const netstatsStyles = /* css */ `
3.netstats {
4 display: flex;
5 align-items: center;
6 justify-content: space-between;
7 gap: 6px;
8 color: var(--foreground);
9 background-color: var(--minor);
10 z-index: 0;
11}
12.netstats--graph {
13 min-width: 120px;
14 padding: 0;
15}
16.simple-bar--widgets-background-color-as-foreground .netstats {
17 background-color: transparent;
18}
19.netstats__item {
20 width: 9ch;
21 display: flex;
22 align-items: center;
23 justify-content: center;
24 gap: 4px;
25 padding: 0 4px;
26}
27.netstats__value {
28 display: flex;
29 align-items: baseline;
30 justify-content: flex-end;
31 margin: 0 auto;
32}
33.netstats__value > em {
34 font-size: 0.8em;
35 font-style: normal;
36}
37.netstats__icon {
38 flex: 0 0 12px;
39 width: 12px;
40 height: 12px;
41}
42.netstats__icon--download {
43 fill: var(--magenta);
44}
45.netstats__icon--upload {
46 fill: var(--blue);
47}
48`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js
new file mode 100755
index 0000000..c4a0a0f
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js
@@ -0,0 +1,71 @@
1// Styles for /lib/components/data/next-meeting.jsx component
2export const nextMeetingStyles = /* css */ `
3.next-meeting {
4 background-color: var(--cyan);
5}
6.simple-bar--widgets-background-color-as-foreground .next-meeting {
7 color: var(--cyan);
8 background-color: transparent;
9}
10.simple-bar--no-color-in-data .next-meeting {
11 background-color: var(--minor);
12}
13.next-meeting--upcoming {
14 background-color: var(--yellow) !important;
15}
16.simple-bar--widgets-background-color-as-foreground .next-meeting--upcoming {
17 color: var(--yellow);
18 background-color: transparent !important;
19}
20.next-meeting--urgent {
21 background-color: var(--red) !important;
22 animation: next-meeting-pulse 1.5s ease-in-out infinite;
23}
24.simple-bar--widgets-background-color-as-foreground .next-meeting--urgent {
25 color: var(--red);
26 background-color: transparent !important;
27}
28@keyframes next-meeting-pulse {
29 0%, 100% { opacity: 1; }
30 50% { opacity: 0.7; }
31}
32.simple-bar--animations-disabled .next-meeting--urgent {
33 animation: none;
34}
35.next-meeting__title {
36 max-width: 120px;
37 overflow: hidden;
38 text-overflow: ellipsis;
39 white-space: nowrap;
40 margin-right: 6px;
41}
42.next-meeting__time {
43 font-weight: 600;
44 opacity: 0.9;
45}
46.next-meeting__join {
47 margin-left: 6px;
48 padding: 2px 6px;
49 background-color: rgba(255, 255, 255, 0.2);
50 border: none;
51 border-radius: 3px;
52 color: inherit;
53 font-family: inherit;
54 font-size: 10px;
55 font-weight: 600;
56 cursor: pointer;
57 transition: background-color 160ms var(--transition-easing),
58 transform 160ms var(--transition-easing);
59}
60.next-meeting__join:hover {
61 background-color: rgba(255, 255, 255, 0.35);
62 transform: translateY(-1px);
63}
64.next-meeting__join:active {
65 transform: translateY(0);
66}
67.next-meeting__join:focus {
68 outline: none;
69 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
70}
71`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js
new file mode 100755
index 0000000..a1008c8
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js
@@ -0,0 +1,68 @@
1// Styles for /lib/components/data/notifications.jsx component
2export const notificationsStyles = /* css */ `
3.notifications {
4 display: flex;
5 align-items: center;
6 gap: 5px;
7 margin-left: 5px;
8}
9.notification-pill {
10 display: flex;
11 align-items: center;
12 gap: 5px;
13 padding: 7px 8px;
14 background-color: var(--red);
15 border: none;
16 border-radius: var(--item-radius);
17 color: var(--white);
18 font-family: inherit;
19 font-size: 11px;
20 cursor: pointer;
21 transition: background-color 160ms var(--transition-easing),
22 transform 160ms var(--transition-easing);
23}
24.notification-pill:hover {
25 filter: brightness(1.2);
26 transform: translateY(-1px);
27}
28.notification-pill:active {
29 transform: translateY(0);
30}
31.notification-pill:focus {
32 outline: none;
33 box-shadow: var(--focus-ring);
34}
35.simple-bar--no-color-in-data .notification-pill {
36 background-color: var(--minor);
37 color: var(--foreground);
38}
39.simple-bar--widgets-background-color-as-foreground .notification-pill {
40 background-color: transparent;
41 color: var(--red);
42 border: 1px solid var(--red);
43}
44.simple-bar--widgets-background-color-as-foreground .notification-pill:hover {
45 background-color: var(--red);
46 color: var(--white);
47}
48.notification-pill__icon {
49 width: 14px;
50 height: 14px;
51 fill: currentColor;
52 flex-shrink: 0;
53}
54.notification-pill__badge {
55 background-color: rgba(0, 0, 0, 0.3);
56 color: var(--white);
57 padding: 1px 5px;
58 border-radius: 6px;
59 font-size: 10px;
60 font-weight: 600;
61 min-width: 8px;
62 text-align: center;
63}
64.simple-bar--widgets-background-color-as-foreground .notification-pill__badge {
65 background-color: var(--red);
66 color: var(--white);
67}
68`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js
new file mode 100755
index 0000000..a45a862
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js
@@ -0,0 +1,83 @@
1// Styles for /lib/components/data/sound.jsx component
2export const soundStyles = /* css */ `
3.sound {
4 font-variant-numeric: tabular-nums;
5 background-color: var(--blue);
6 transform: translateZ(0);
7}
8.simple-bar--widgets-background-color-as-foreground .sound {
9 color: var(--blue);
10 background-color: transparent;
11}
12.sound__slider-container {
13 --slider-size: 10px;
14
15 position: relative;
16 max-width: 0;
17 height: 100%;
18 display: flex;
19 align-items: center;
20 padding: 0;
21 clip-path: inset(0);
22 opacity: 0.7;
23 border-radius: var(--item-radius);
24 transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
25 opacity 320ms var(--transition-easing),
26 clip-path 0ms var(--transition-easing);
27}
28.sound:hover .sound__slider-container,
29.sound--dragging .sound__slider-container {
30 max-width: 100px;
31 clip-path: inset(-100vh -100vw);
32 transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
33 opacity 320ms var(--transition-easing),
34 clip-path 320ms 320ms var(--transition-easing)
35}
36.sound__slider-container:hover {
37 opacity: 1;
38}
39.sound__slider {
40 width: 100px;
41 height: var(--slider-size);
42 appearance: none;
43 background-color: var(--background);
44 border-radius: var(--item-radius);
45 outline: none;
46 -webkit-appearance: none;
47}
48.simple-bar--widgets-background-color-as-foreground .sound__slider {
49 background-color: var(--foreground);
50}
51.sound__slider::-webkit-slider-thumb {
52 width: var(--slider-size);
53 height: var(--slider-size);
54 background-color: var(--foreground);
55 border-radius: var(--item-radius);
56 cursor: pointer;
57 -webkit-appearance: none;
58 transform-origin: center;
59 transition: transform 160ms var(--transition-easing);
60}
61.simple-bar--widgets-background-color-as-foreground .sound__slider::-webkit-slider-thumb {
62 background-color: var(--blue);
63}
64.sound__slider::-webkit-slider-thumb:hover {
65 transform: scale(1.5);
66}
67.sound__display {
68 display: flex;
69 align-items: center;
70 margin-right: 4px;
71 overflow: hidden;
72}
73.sound__display:active {
74 color: currentColor;
75}
76.sound__display > svg {
77 flex-shrink: 0;
78 width: 14px;
79 height: 14px;
80 margin-right: 3px;
81 fill: currentColor;
82}
83`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js
new file mode 100755
index 0000000..03d97a3
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js
@@ -0,0 +1,55 @@
1// Styles for /lib/components/data/specter.jsx component
2export const specterStyles = /* css */ `
3.specter {
4 position: absolute;
5 bottom: 0;
6 right: 30px;
7 display: flex;
8 align-items: flex-end;
9 z-index: 2;
10 pointer-events: none;
11 touch-action: none;
12}
13.simple-bar--animations-disabled .specter {
14 display: none;
15}
16.specter > span {
17 flex: 0 0 5px;
18 height: 15px;
19 max-height: 15px;
20 margin-left: 1px;
21 background-color: var(--main);
22 opacity: 0.1;
23 transform-origin: bottom;
24}
25.simple-bar--no-color-in-data .specter > span,
26.simple-bar--widgets-background-color-as-foreground .specter > span {
27 background-color: currentColor;
28}
29.specter > span {
30 animation: specter-waving 640ms var(--transition-easing) infinite;
31}
32.simple-bar--animations-disabled .specter > span {
33 animation: none;
34}
35.specter > span:nth-of-type(1) {
36 animation-delay: -460ms;
37}
38.specter > span:nth-of-type(2) {
39 animation-delay: -320ms;
40}
41.specter > span:nth-of-type(3) {
42 animation-delay: -200ms;
43}
44.specter > span:nth-of-type(4) {
45 animation-delay: -240ms;
46}
47.specter > span:nth-of-type(5) {
48 animation-delay: -150ms;
49}
50@keyframes specter-waving {
51 50% {
52 transform: scaleY(0.2);
53 }
54}
55`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js
new file mode 100755
index 0000000..0f9db7a
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js
@@ -0,0 +1,15 @@
1// Styles for /lib/components/data/spotify.jsx component
2export const spotifyStyles = /* css */ `
3.spotify {
4 position: relative;
5 background-color: var(--green);
6}
7.simple-bar--widgets-background-color-as-foreground .spotify {
8 color: var(--green);
9 background-color: transparent;
10}
11
12.spotify--hidden-metadata > svg {
13 margin-right: 0;
14}
15`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js
new file mode 100755
index 0000000..2c1eacd
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js
@@ -0,0 +1,15 @@
1// Styles for /lib/components/data/stock.jsx component
2export const stockStyles = /* css */ `
3.stock {
4 color: var(--foreground);
5 background-color: var(--minor);
6}
7.simple-bar--widgets-background-color-as-foreground .stock {
8 background-color: transparent;
9}
10.stockUp {
11 color: var(--green);
12}
13.stockDown {
14 color: var(--red);
15}`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js
new file mode 100755
index 0000000..ac04f90
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js
@@ -0,0 +1,85 @@
1// Styles for /lib/components/data/time.jsx component
2export const timeStyles = /* css */ `
3.time {
4 position: relative;
5 font-variant-numeric: tabular-nums;
6 background-color: var(--yellow);
7 overflow: hidden;
8 z-index: 0;
9}
10.simple-bar--widgets-background-color-as-foreground .time {
11 color: var(--yellow);
12 background-color: transparent;
13}
14.time__filler {
15 position: absolute;
16 top: 0;
17 left: 0;
18 width: 100%;
19 height: 100%;
20 transform: scaleX(0);
21 background-color: rgba(0, 0, 0, 0.15);
22 transform-origin: left;
23 pointer-events: none;
24 touch-action: none;
25 z-index: -1;
26}
27.simple-bar--widgets-background-color-as-foreground .time__filler {
28 background-color: transparent;
29}
30.time__icon {
31 position: relative;
32 flex: 0 0 15px;
33 width: 15px;
34 height: 15px;
35 margin-right: 7px;
36 border: 1px solid var(--background);
37 border-radius: 50%;
38}
39.simple-bar--widgets-background-color-as-foreground .time__icon {
40 border: 1px solid var(--yellow);
41}
42.simple-bar--no-color-in-data .time__icon {
43 border: 1px solid var(--foreground);
44}
45.time__hours,
46.time__minutes {
47 position: absolute;
48 bottom: 50%;
49 width: 1px;
50 left: 50%;
51 margin-left: -1px;
52 background-color: var(--background);
53 transform-origin: bottom;
54 transition: transform 160ms var(--transition-easing);
55 will-change: transform;
56}
57.simple-bar--widgets-background-color-as-foreground .time__hours,
58.simple-bar--widgets-background-color-as-foreground .time__minutes {
59 background-color: var(--yellow);
60}
61.simple-bar--no-color-in-data .time__hours,
62.simple-bar--no-color-in-data .time__minutes {
63 background-color: var(--foreground);
64}
65.time__hours {
66 height: 28%;
67}
68.time__minutes {
69 height: 43%;
70}
71@media only screen and (-webkit-min-device-pixel-ratio: 2),
72 only screen and (min-device-pixel-ratio: 2),
73 only screen and (min-resolution: 192dpi),
74 only screen and (min-resolution: 2dppx) {
75 .time__icon {
76 flex: 0 0 16px;
77 width: 16px;
78 height: 16px;
79 }
80 .time__hours,
81 .time__minutes {
82 margin-left: 0;
83 }
84}
85`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js
new file mode 100755
index 0000000..b486b18
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js
@@ -0,0 +1,17 @@
1// Styles for /lib/components/data/viscosity-vpn.jsx component
2export const viscosityVPNStyles = /* css */ `
3.viscosity-vpn {
4 background-color: var(--red);
5}
6.simple-bar--widgets-background-color-as-foreground .viscosity-vpn {
7 color: var(--red);
8 background-color: transparent;
9}
10.viscosity-vpn--disconnected {
11 background-color: var(--minor);
12}
13.simple-bar--widgets-background-color-as-foreground .viscosity-vpn--disconnected {
14 color: var(--minor);
15 background-color: transparent;
16}
17`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js
new file mode 100755
index 0000000..0b48abe
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js
@@ -0,0 +1,163 @@
1// Styles for /lib/components/data/weather.jsx component
2export const weatherStyles = /* css */ `
3.weather {
4 position: relative;
5 color: var(--foreground);
6 background-color: var(--minor);
7 overflow: hidden;
8 z-index: 0;
9}
10.simple-bar--widgets-background-color-as-foreground .weather {
11 background-color: transparent;
12}
13.weather__gradient {
14 position: absolute;
15 top: 0;
16 left: 0;
17 width: 100%;
18 height: 100%;
19 opacity: 0.65;
20 z-index: -1;
21}
22.weather--sunrise .weather__gradient {
23 background: linear-gradient(to top right, var(--main), var(--red), var(--yellow), var(--blue));
24}
25.weather--sunset .weather__gradient {
26 background: linear-gradient(to bottom right, var(--blue), var(--yellow), var(--red), var(--magenta), var(--main));
27}
28.simple-bar--no-color-in-data .weather__gradient {
29 display: none;
30}
31.sun-icon,
32.moon-icon {
33 transform-origin: 50% 50%;
34 animation: sunny-and-moon-scale-and-rotate 2560ms ease infinite;
35}
36.simple-bar--animations-disabled .sun-icon,
37.simple-bar--animations-disabled .moon-icon {
38 animation: none;
39}
40@keyframes sunny-and-moon-scale-and-rotate {
41 50% {
42 transform: rotate(14deg);
43 }
44}
45.cloud-icon {
46 transform: translateY(-1%) rotate(5deg);
47 animation: cloud-levitating 2560ms ease-in-out infinite;
48}
49.simple-bar--animations-disabled .cloud-icon {
50 animation: none;
51}
52@keyframes cloud-levitating {
53 50% {
54 transform: translateY(10%) rotate(-3deg);
55 }
56}
57.rain-icon > g > path {
58 animation: rain-translate 2560ms ease-in-out infinite;
59}
60.simple-bar--animations-disabled .rain-icon > g > path {
61 animation: none;
62}
63.rain-icon > g > path:nth-child(2) {
64 animation-delay: 320ms;
65}
66.rain-icon > g > path:nth-child(1) {
67 animation-delay: 640ms;
68}
69@keyframes rain-translate {
70 0% {
71 opacity: 0;
72 transform: translateY(-10%);
73 }
74 50% {
75 opacity: 0.5;
76 }
77 100% {
78 opacity: 0;
79 transform: translateY(10%);
80 }
81}
82.snow-icon > g > path {
83 animation: snow-translate 2560ms ease-in-out infinite;
84}
85.simple-bar--animations-disabled .snow-icon > g > path {
86 animation: none;
87}
88.snow-icon > g > path:nth-child(5) {
89 animation-delay: 320ms;
90}
91.snow-icon > g > path:nth-child(4) {
92 animation-delay: 640ms;
93}
94.snow-icon > g > path:nth-child(3) {
95 animation-delay: 960ms;
96}
97.snow-icon > g > path:nth-child(2) {
98 animation-delay: 1280ms;
99}
100.snow-icon > g > path:nth-child(1) {
101 animation-delay: 1600ms;
102}
103@keyframes phasing-snow {
104 50% {
105 opacity: 0.1;
106 }
107}
108.fog-icon > g > path {
109 animation: fog-phasing 2560ms ease-in-out infinite;
110}
111.simple-bar--animations-disabled .fog-icon > g > path {
112 animation: none;
113}
114.fog-icon > g > path:nth-child(8) {
115 animation-delay: -640ms;
116}
117.fog-icon > g > path:nth-child(7) {
118 animation-delay: -320ms;
119}
120.fog-icon > g > path:nth-child(5) {
121 animation-delay: 320ms;
122}
123.fog-icon > g > path:nth-child(4) {
124 animation-delay: 640ms;
125}
126.fog-icon > g > path:nth-child(3) {
127 animation-delay: 960ms;
128}
129.fog-icon > g > path:nth-child(2) {
130 animation-delay: 1280ms;
131}
132.fog-icon > g > path:nth-child(1) {
133 animation-delay: 1600ms;
134}
135@keyframes fog-phasing {
136 50% {
137 opacity: 0.2;
138 }
139}
140.storm-icon > g > path {
141 animation: flashing-storm 2560ms ease-in-out infinite;
142}
143.simple-bar--animations-disabled .storm-icon > g > path {
144 animation: none;
145}
146.storm-icon > g > path:nth-child(2) {
147 animation-delay: 320ms;
148}
149.storm-icon > g > path:nth-child(1) {
150 animation-delay: 640ms;
151}
152@keyframes flashing-storm {
153 15%,
154 30%,
155 34% {
156 opacity: 1;
157 }
158 16%,
159 31% {
160 opacity: 0;
161 }
162}
163`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js
new file mode 100755
index 0000000..8d2cc97
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js
@@ -0,0 +1,13 @@
1// Styles for /lib/components/data/wifi.jsx component
2export const wifiStyles = /* css */ `
3.wifi {
4 background-color: var(--red);
5}
6.simple-bar--widgets-background-color-as-foreground .wifi {
7 color: var(--red);
8 background-color: transparent;
9}
10.wifi--hidden-name > svg {
11 margin-right: 0;
12}
13`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js
new file mode 100755
index 0000000..703be21
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js
@@ -0,0 +1,11 @@
1// Styles for /lib/components/data/youtube-music.jsx component
2export const youtubeMusicStyles = /* css */ `
3.youtube-music {
4 position: relative;
5 background-color: var(--red);
6}
7.simple-bar--widgets-background-color-as-foreground .youtube-music {
8 color: var(--red);
9 background-color: transparent;
10}
11`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js
new file mode 100755
index 0000000..55b125c
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js
@@ -0,0 +1,26 @@
1// Styles for /lib/components/data/zoom.jsx component
2export const zoomStyles = /* css */ `
3.zoom {
4 position: relative;
5 display: flex;
6 align-items: center;
7 background-color: var(--minor);
8}
9.simple-bar--widgets-background-color-as-foreground .zoom {
10 color: var(--minor);
11 background-color: transparent;
12}
13.simple-bar--no-color-in-data .zoom {
14 background-color: var(--minor);
15}
16.zoom__icon {
17 width: 14px;
18 height: 14px;
19 fill: var(--red);
20 margin: 0 1px 0 4px;
21 transform: translateZ(0);
22}
23.zoom__icon--on {
24 fill: var(--green);
25}
26`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js
new file mode 100755
index 0000000..18e7b17
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js
@@ -0,0 +1,89 @@
1// Styles for /lib/components/missives/{missive|missives}.jsx components
2export const missivesStyles = /* css */ `
3.missives {
4 position: absolute;
5 top: 0;
6 left: 0;
7 width: 100%;
8 height: 100%;
9 pointer-events: none;
10 overflow: hidden;
11}
12.missive {
13 --gradient-size: 100px;
14
15 position: absolute;
16 top: 0;
17 width: fit-content;
18 height: 100%;
19 display: flex;
20 align-items: center;
21 gap: 10px;
22 padding: 0 16px;
23 box-sizing: border-box;
24 background-color: var(--background);
25 pointer-events: auto;
26 transition: transform 160ms var(--transition-easing);
27}
28.missive::after {
29 content: "";
30 position: absolute;
31 top: 0;
32 height: 100%;
33 width: var(--gradient-size);
34 pointer-events: none;
35}
36.missive--left {
37 left: 0;
38 animation: left-missive-appearance 320ms var(--transition-easing);
39}
40@keyframes left-missive-appearance {
41 0% {
42 transform: translateX(-100%);
43 }
44}
45.missive--left::after {
46 left: 100%;
47 background: linear-gradient(to right, var(--background) 0%, transparent 100%);
48}
49.missive--right {
50 right: 0;
51 flex-direction: row-reverse;
52 animation: right-missive-appearance 320ms var(--transition-easing);
53}
54@keyframes right-missive-appearance {
55 0% {
56 transform: translateX(100%);
57 }
58}
59.missive--right::after {
60 right: 100%;
61 background: linear-gradient(to left, var(--background) 0%, transparent 100%);
62}
63.missive__text {
64 max-width: calc(100vw - var(--gradient-size));
65 overflow: hidden;
66}
67.missive__close {
68 width: 24px;
69 height: 24px;
70 display: flex;
71 align-items: center;
72 justify-content: center;
73 fill: var(--foreground);
74 background-color: transparent;
75 border: 0;
76 cursor: pointer;
77 user-select: none;
78 border-radius: var(--item-radius);
79 transition: box-shadow 160ms var(--transition-easing);
80}
81.missive__close:hover {
82 box-shadow: var(--light-shadow), var(--hover-ring);
83}
84.missive__close-icon {
85 flex: 0 0 10px;
86 width: 10px;
87 height: 10px;
88}
89`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js
new file mode 100755
index 0000000..f674ac2
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js
@@ -0,0 +1,161 @@
1// Styles for /lib/components/{yabai|aerospace}/process.jsx components
2export const styles = /* css */ `
3.process {
4 display: flex;
5 pointer-events: none;
6 touch-action: none;
7}
8.process--centered {
9 position: absolute;
10 top: 0;
11 left: 0;
12 width: 100%;
13 height: 100%;
14}
15.process:empty {
16 display: none;
17}
18.process__container {
19 display: flex;
20 align-items: stretch;
21 box-sizing: border-box;
22 pointer-events: auto;
23 touch-action: auto;
24}
25.process--centered .process__container {
26 height: var(--bar-height);
27 margin: 0 auto;
28 padding: var(--bar-inner-margin);
29}
30.simple-bar--no-bar-background .process__container:not(:empty) {
31 padding: 4px 5px;
32 background-color: var(--background);
33 box-shadow: var(--light-shadow);
34 border-radius: var(--bar-radius);
35}
36.process__layout {
37 display: flex;
38 align-items: center;
39 padding: var(--item-inner-margin);
40 color: var(--white);
41 font-family: var(--font);
42 font-size: var(--font-size);
43 background-color: var(--main-alt);
44 border-radius: var(--item-radius);
45 box-shadow: var(--light-shadow);
46}
47.simple-bar--spaces-background-color-as-foreground .process__layout {
48 color: var(--foreground);
49 font-weight: 700;
50 background-color: transparent;
51 box-shadow: none;
52}
53.process__skhd-mode {
54 display: flex;
55 align-items: center;
56 padding: var(--item-inner-margin);
57 color: var(--foreground);
58 background-color: var(--minor);
59 font-family: var(--font);
60 font-size: var(--font-size);
61 border-radius: var(--item-radius);
62 box-shadow: var(--light-shadow);
63 font-style: italic;
64 text-transform: uppercase;
65}
66.process__window {
67 display: flex;
68 align-items: center;
69 gap: 3px;
70 margin: var(--item-outer-margin);
71 padding: var(--item-inner-margin);
72 color: currentColor;
73 font-family: var(--font);
74 font-size: var(--font-size);
75 background-color: var(--minor);
76 border-radius: var(--item-radius);
77 border: 0;
78 outline: none;
79 box-shadow: var(--light-shadow);
80 cursor: pointer;
81 user-select: none;
82 -webkit-user-select: none;
83 transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing),
84 border 160ms var(--transition-easing), box-shadow 160ms var(--transition-easing);
85 z-index: 0;
86}
87.simple-bar--spaces-background-color-as-foreground .process__window {
88 background-color: transparent;
89 box-shadow: none;
90}
91.simple-bar--no-shadow .process__container,
92.simple-bar--no-bar-background.simple-bar--no-shadow .process__container,
93.simple-bar--no-shadow .process__layout,
94.simple-bar--no-shadow .process__skhd-mode,
95.simple-bar--no-shadow .process__window {
96 box-shadow: none;
97}
98.process__window:only-child {
99 margin: 0;
100}
101.process__window--only-current {
102 background-color: var(--minor);
103}
104.process__window--focused {
105 color: var(--minor);
106 background-color: var(--foreground);
107}
108.process__stack-index {
109 padding: 2px 5px;
110 color: var(--foreground);
111 background-color: var(--background);
112 font-size: calc(var(--font-size) - 1px);
113 border-radius: var(--item-radius);
114}
115.process__window--focused .process__stack-index {
116 color: var(--white);
117 background-color: var(--main-alt);
118}
119.simple-bar--spaces-background-color-as-foreground .process__window--focused {
120 color: var(--foreground);
121 background-color: transparent;
122 box-shadow: var(--light-shadow), 0 0 0 1px var(--foreground);
123}
124.process__window:not(.process__window--only-current):not(.process__window--focused):is(:hover, :active) {
125 box-shadow: var(--light-shadow), var(--hover-ring);
126}
127.process__icon {
128 flex: 0 0 11px;
129 width: 11px;
130 height: 11px;
131 fill: currentColor;
132 transition: margin-right 160ms var(--transition-easing);
133}
134.process__window--only-current .process__icon,
135.process__window--focused .process__icon,
136.process__window--expanded .process__icon {
137 margin-right: 6px;
138}
139.process__window--only-icon .process__icon {
140 margin-right: 0;
141}
142.process__inner {
143 max-width: 0;
144 display: flex;
145 flex-wrap: nowrap;
146 overflow: hidden;
147 transition: max-width 160ms var(--transition-easing);
148}
149.process__window--focused .process__inner,
150.process__window--expanded .process__inner {
151 max-width: var(--item-max-width);
152}
153.process__window--only-current .process__inner {
154 max-width: 400px;
155}
156.process__name {
157 margin-top: 2px;
158 white-space: nowrap;
159 transition: transform 160ms var(--transition-easing);
160}
161`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js
new file mode 100755
index 0000000..fb0dba6
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js
@@ -0,0 +1,101 @@
1export const aerospaceDisplayManagerStyles = /* css */ `
2.aerospace-display-manager {
3 flex: 1 1 100%;
4 position: relative;
5 display: flex;
6 flex-direction: column;
7 gap: 10px;
8 padding: 10px;
9}
10.aerospace-display-manager::before {
11 content: '';
12 position: absolute;
13 top: 0;
14 left: 0;
15 width: 100%;
16 height: 100%;
17 background-color: var(--main-alt);
18 border-radius: var(--item-radius);
19 opacity: 0.1;
20 z-index: -1;
21}
22.aerospace-display-manager__label > em {
23 padding: 2px 3px;
24 font-size: calc(var(--font-size) - 2px);
25 color: var(--foreground);
26 background-color: var(--minor);
27 border-radius: 2px;
28}
29.aerospace-display-manager__displays {
30 display: flex;
31 flex-direction: column;
32 gap: 6px;
33}
34.aerospace-display-manager__display {
35 display: flex;
36 align-items: center;
37 gap: 2px;
38}
39.aerospace-display-manager__display > input {
40 width: 8ch;
41 padding: 2px 4px;
42 box-sizing: border-box;
43 font-family: var(--font);
44 font-size: calc(var(--font-size) * 0.9);
45 background-color: var(--white);
46 border: 0;
47 outline: none;
48 border-radius: 4px;
49 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
50}
51.aerospace-display-manager__display > input:hover {
52 box-shadow: var(--hover-ring);
53}
54.aerospace-display-manager__display > input:focus {
55 box-shadow: var(--focus-ring);
56}
57.aerospace-display-manager__remove-display {
58 padding: 3px 6px;
59 box-sizing: border-box;
60 background-color: var(--red);
61 border-radius: var(--item-radius);
62 border: 0;
63 box-shadow: var(--light-shadow);
64 cursor: pointer;
65 user-select: none;
66 -webkit-user-select: none;
67 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
68}
69.aerospace-display-manager__remove-display:hover {
70 box-shadow: var(--light-shadow), var(--focus-ring);
71}
72.aerospace-display-manager__remove-display > svg {
73 width: 8px;
74 height: 8px;
75 fill: var(--white);
76}
77.aerospace-display-manager__add {
78 width: fit-content;
79 display: flex;
80 align-items: center;
81 padding: 7px 10px;
82 font-family: var(--font);
83 font-size: calc(var(--font-size) * 0.9);
84 background-color: var(--green);
85 border-radius: var(--item-radius);
86 border: 0;
87 box-shadow: var(--light-shadow);
88 cursor: pointer;
89 user-select: none;
90 -webkit-user-select: none;
91 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
92}
93.aerospace-display-manager__add:hover {
94 box-shadow: var(--light-shadow), var(--focus-ring);
95}
96.aerospace-display-manager__add > svg {
97 width: 10px;
98 height: 10px;
99 margin-right: 1ch;
100}
101`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js
new file mode 100755
index 0000000..4064efd
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js
@@ -0,0 +1,83 @@
1export const colorPickerStyles = /* css */ `
2.color-picker {
3 margin-right: 1ch;
4}
5.color-picker__button {
6 width: 20px;
7 height: 20px;
8 border-radius: 50%;
9 border: 0;
10 cursor: pointer;
11}
12.color-picker__colors {
13 position: absolute;
14 top: 0;
15 left: 0;
16 width: 100%;
17 height: 100%;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 padding-bottom: 35px;
22 box-sizing: border-box;
23 -webkit-backdrop-filter: blur(5px);
24 border-radius: var(--item-radius);
25 z-index: 1;
26}
27.color-picker__colors > button,
28.color-picker__custom-color-preview {
29 width: 20px;
30 height: 20px;
31 margin: 0 10px;
32 border-radius: 50%;
33 border: 0;
34 cursor: pointer;
35 box-shadow: var(--light-shadow);
36}
37.color-picker__custom-color {
38 position: absolute;
39 bottom: 10px;
40 left: 0;
41 width: 100%;
42 height: 25px;
43 display: flex;
44 align-items: center;
45 justify-content: center;
46 z-index: 2;
47 pointer-events: none;
48 touch-action: none;
49}
50.color-picker__custom-color > * {
51 pointer-events: auto;
52 touch-action: auto;
53}
54.color-picker__custom-color-preview {
55 cursor: default;
56}
57input.color-picker__custom-color-input {
58 width: 48ch;
59}
60.color-picker__custom-color-submit {
61 margin-left: 8px;
62 padding: 7px 10px;
63 font-family: var(--font);
64 font-size: calc(var(--font-size) * 0.9);
65 background-color: var(--green);
66 border-radius: var(--item-radius);
67 border: 0;
68 cursor: pointer;
69 user-select: none;
70 -webkit-user-select: none;
71 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
72}
73.color-picker__custom-color-submit:not(:disabled) {
74 box-shadow: var(--light-shadow);
75}
76.color-picker__custom-color-submit:not(:disabled):hover {
77 box-shadow: var(--light-shadow), var(--focus-ring);
78}
79.color-picker__custom-color-submit:disabled {
80 opacity: 0.5;
81 cursor: not-allowed;
82}
83`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js
new file mode 100755
index 0000000..0c853d5
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js
@@ -0,0 +1,155 @@
1export const iconPickerStyles = /* css */ `
2.icon-picker {
3 margin-right: 1ch;
4}
5.icon-picker__button {
6 width: 50px;
7 height: 50px;
8 display: flex;
9 align-items: center;
10 justify-content: center;
11 fill: var(--foreground);
12 background-color: transparent;
13 border: 0;
14 cursor: pointer;
15 user-select: none;
16}
17.icon-picker__button > svg {
18 width: 24px;
19 height: 24px;
20}
21.icon-picker__dropdown {
22 position: absolute;
23 top: 0;
24 left: 0;
25 width: 100%;
26 height: 100%;
27 display: flex;
28 flex-direction: column;
29 -webkit-backdrop-filter: blur(5px);
30 border-radius: var(--item-radius);
31 overflow: hidden;
32 z-index: 1;
33}
34.icon-picker__search {
35 position: relative;
36 padding: 8px;
37 background-color: var(--main-alt);
38 border-bottom: 1px solid var(--foreground-alt);
39 display: flex;
40 align-items: center;
41 gap: 12px;
42}
43.icon-picker__back {
44 display: flex;
45 align-items: center;
46 padding: 10px 14px;
47 height: 28px;
48 background-color: var(--background);
49 border: 1px solid var(--foreground-alt);
50 border-radius: var(--item-radius);
51 color: var(--foreground);
52 font-family: var(--font);
53 font-size: 13px;
54 font-weight: 500;
55 cursor: pointer;
56 white-space: nowrap;
57 box-sizing: border-box;
58 transition: color 160ms var(--transition-easing),
59 background-color 160ms var(--transition-easing),
60 box-shadow 160ms var(--transition-easing);
61}
62.icon-picker__back:hover {
63 color: var(--background);
64 background-color: var(--foreground);
65 box-shadow: var(--hover-ring);
66}
67.icon-picker__back > svg {
68 width: 10px;
69 height: 10px;
70 margin-right: 6px;
71 fill: currentColor;
72}
73.icon-picker__search-input {
74 flex: 1;
75 height: 28px;
76 padding: 0 35px 0 14px;
77 border: 1px solid var(--foreground-alt);
78 border-radius: var(--item-radius);
79 background-color: var(--background);
80 color: var(--foreground);
81 font-size: 14px;
82 font-family: var(--font);
83 outline: none;
84 box-sizing: border-box;
85 position: relative;
86 transition: border 160ms var(--transition-easing),
87 box-shadow 160ms var(--transition-easing);
88}
89.icon-picker__search-input:focus {
90 border-color: var(--foreground);
91 box-shadow: var(--focus-ring);
92}
93.icon-picker__search-input::placeholder {
94 color: var(--foreground-alt);
95 opacity: 0.7;
96}
97.icon-picker__search-clear {
98 position: absolute;
99 right: 24px;
100 top: 50%;
101 transform: translateY(-50%);
102 background: none;
103 border: none;
104 color: var(--foreground-alt);
105 cursor: pointer;
106 font-size: 16px;
107 padding: 6px;
108 display: flex;
109 align-items: center;
110 justify-content: center;
111 border-radius: 50%;
112 transition: color 160ms var(--transition-easing),
113 background-color 160ms var(--transition-easing);
114}
115.icon-picker__search-clear:hover {
116 color: var(--foreground);
117 background-color: var(--main-alt);
118}
119.icon-picker__icons {
120 flex: 1;
121 display: flex;
122 align-items: flex-start;
123 justify-content: flex-start;
124 flex-wrap: wrap;
125 padding: 10px;
126 box-sizing: border-box;
127 overflow: auto;
128}
129.icon-picker__icons > button {
130 width: 30px;
131 height: 30px;
132 display: flex;
133 align-items: center;
134 justify-content: center;
135 margin: 5px;
136 border: 0;
137 background-color: var(--main-alt);
138 border-radius: var(--item-radius);
139 box-shadow: var(--light-shadow);
140 cursor: pointer;
141 user-select: none;
142}
143.icon-picker__icons > button > svg {
144 width: 24px;
145 height: 24px;
146 fill: var(--background);
147}
148.icon-picker__no-results {
149 width: 100%;
150 text-align: center;
151 color: var(--foreground-alt);
152 font-style: italic;
153 padding: 20px;
154}
155`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js
new file mode 100755
index 0000000..2fa37b0
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js
@@ -0,0 +1,408 @@
1// Styles for /lib/components/settings/settings.jsx component
2import { userWidgetsCreatorStyles } from "./user-widgets-creator";
3import { aerospaceDisplayManagerStyles } from "./aerospace-display-manager";
4
5export const settingsStyles = /* css */ `
6.settings {
7 z-index: 1;
8}
9.settings__overlay {
10 position: fixed;
11 top: 0;
12 left: 0;
13 width: 100%;
14 height: 100%;
15 z-index: 0;
16}
17.simple-bar--floating .settings__overlay,
18.simple-bar--no-bar-background .settings__overlay {
19 display: none;
20}
21.simple-bar--on-bottom .settings__overlay {
22 top: unset;
23 bottom: 28px;
24}
25.settings__outer {
26 --settings-width: 620px;
27 position: fixed;
28 left: calc(50% - (var(--settings-width) / 2));
29 top: calc(var(--bar-height) + 10px);
30 width: var(--settings-width);
31 display: flex;
32 flex-direction: column;
33 align-items: stretch;
34 padding: 20px;
35 background-color: var(--main);
36 border-radius: var(--item-radius);
37 box-shadow: var(--light-shadow);
38 z-index: 1;
39}
40.simple-bar--floating .settings__outer {
41 top: calc(var(--bar-height) + 20px);
42}
43.simple-bar--on-bottom .settings__outer {
44 top: unset;
45 bottom: calc(var(--bar-height) + 10px);
46}
47.settings__header {
48 display: flex;
49 align-items: center;
50 margin-bottom: 14px;
51 font-size: calc(var(--font-size) * 1.4);
52 font-weight: 700;
53}
54.settings__header-dot {
55 flex: 0 0 12px;
56 width: 12px;
57 height: 12px;
58 border-radius: 50%;
59 margin-right: 9px;
60}
61.settings__header-dot--close {
62 padding: 0;
63 background-color: var(--red);
64 cursor: pointer;
65 user-select: none;
66 border: 0;
67 -webkit-user-select: none;
68}
69.settings__header-dot--disabled {
70 background-color: grey;
71 opacity: 0.3;
72}
73.settings__tabs {
74 width: fit-content;
75 display: flex;
76 gap: 10px;
77 margin-bottom: 10px;
78 padding: 5px;
79 background-color: var(--minor);
80 border-radius: var(--item-radius);
81}
82.settings__tab {
83 flex: 0 0 auto;
84 display: flex;
85 align-items: center;
86 padding: 5px;
87 font-family: var(--font);
88 font-size: var(--font-size);
89 color: var(--foreground);
90 text-align: center;
91 background-color: transparent;
92 border-radius: var(--item-radius);
93 border: 0;
94 outline: none;
95 cursor: pointer;
96 user-select: none;
97 -webkit-user-select: none;
98 transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing),
99 box-shadow 160ms var(--transition-easing);
100}
101.settings__tab:hover {
102 box-shadow: var(--hover-ring);
103}
104.settings__tab:active {
105 box-shadow: var(--focus-ring);
106}
107.settings__tab--current {
108 color: var(--background);
109 background-color: var(--foreground);
110}
111.settings__inner {
112 display: flex;
113 align-items: flex-start;
114 flex-wrap: nowrap;
115 overflow: clip;
116}
117.settings__category {
118 flex: 0 0 100%;
119 max-height: 70vh;
120 display: flex;
121 flex-wrap: wrap;
122 gap: 6px;
123 padding: 0 10px 25px 0;
124 box-sizing: border-box;
125 overflow: auto;
126 transition: transform 160ms var(--transition-easing);
127}
128.settings__category::-webkit-scrollbar {
129 width: 5px;
130 height: 5px;
131}
132.settings__category::-webkit-scrollbar-track {
133 background-color: var(--main-alt);
134 opacity: 0.1;
135 border-radius: var(--item-radius);
136}
137.settings__category::-webkit-scrollbar-thumb {
138 background: var(--foreground);
139 border-radius: var(--item-radius);
140}
141.settings__inner-title {
142 flex: 0 0 100%;
143 font-size: calc(var(--font-size) * 1.2);
144 font-weight: 700;
145}
146.settings__item-title {
147 flex: 0 0 100%;
148 margin: 8px 0;
149 font-weight: 700;
150}
151.settings__item,
152.settings__item-option {
153 position: relative;
154 flex: 1 0 32%;
155 display: flex;
156 align-items: center;
157 gap: 4px;
158}
159.settings__item--full-width {
160 flex: 1 1 100%;
161}
162.settings__item--color {
163 flex: 0 0 32%;
164 flex-direction: column;
165 align-items: stretch;
166}
167.settings__item--radio {
168 flex: 0 0 100%;
169 display: flex;
170 flex-wrap: wrap;
171}
172.settings__item--textarea {
173 flex-direction: column;
174 align-items: stretch;
175 padding: 5px;
176}
177.settings__item--color > label,
178.settings__item--full-width.settings__item--text > label,
179.settings__item--full-width.settings__item--textarea > label {
180 flex: 0 0 auto;
181 white-space: nowrap;
182}
183.settings__item--text > input,
184.settings__item--textarea > textarea {
185 flex: 1 1 auto;
186 width: auto;
187 padding: 2px 4px;
188 box-sizing: border-box;
189 font-family: var(--font);
190 font-size: calc(var(--font-size) * 0.9);
191 background-color: var(--white);
192 border: 0;
193 outline: none;
194 border-radius: 4px;
195 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
196}
197.settings__item--textarea > textarea {
198 resize: vertical;
199}
200.settings__item--color > input,
201.settings__item--full-width.settings__item--text > input,
202.settings__item--full-width.settings__item--textarea > textarea {
203 flex: 1 1 100%;
204}
205.settings__item--text > input:hover,
206.settings__item--textarea > textarea:hover {
207 box-shadow: var(--hover-ring);
208}
209.settings__item--text > input:focus,
210.settings__item--textarea > textarea:focus {
211 box-shadow: var(--focus-ring);
212}
213.settings__item--color > input {
214 padding-left: 24px;
215}
216.settings__item-color-pill {
217 position: absolute;
218 bottom: 1px;
219 left: 2px;
220 height: 14px;
221 width: 14px;
222 border-radius: 2px;
223 border: 1px solid gray;
224}
225.settings__item > label > em {
226 padding: 2px 3px;
227 font-size: calc(var(--font-size) - 2px);
228 color: var(--foreground);
229 background-color: var(--minor);
230 border-radius: 2px;
231}
232.settings__documentation {
233 width: 100%;
234 margin-top: 5px;
235 padding: 10px;
236 color: var(--white);
237 background-color: var(--main-alt);
238 font-weight: 700;
239 border-radius: 5px;
240}
241.settings__documentation-icon {
242 display: inline-block;
243 width: 18px;
244 height: 18px;
245 margin-right: 8px;
246 margin-top: -2px;
247 vertical-align: middle;
248 fill: currentColor;
249}
250.settings__documentation a {
251 color: currentColor;
252}
253.settings__infos {
254 width: 100%;
255 margin-top: 5px;
256 padding: 10px;
257 color: var(--foreground);
258 background-color: var(--minor);
259 border-radius: 5px;
260}
261.settings__infos-title {
262 margin-bottom: 7px;
263 font-size: calc(var(--font-size) * 1.1);
264 font-weight: 700;
265}
266.settings__info {
267 font-style: italic;
268}
269.settings__bottom {
270 display: flex;
271 align-items: center;
272 justify-content: flex-end;
273 margin-top: 10px;
274}
275.settings__pending-changes {
276 margin: 0 10px;
277}
278.settings__refresh-button,
279.settings__import-button,
280.settings__export-button {
281 padding: 7px 10px;
282 font-family: var(--font);
283 font-size: calc(var(--font-size) * 0.9);
284 border-radius: var(--item-radius);
285 border: 0;
286 cursor: pointer;
287 user-select: none;
288 -webkit-user-select: none;
289 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
290}
291.settings__import-button,
292.settings__export-button {
293 margin-right: 10px;
294 color: var(--foreground);
295 background-color: var(--minor);
296}
297.settings__export-button {
298 margin-left: 10px;
299}
300.settings__refresh-button {
301 background-color: var(--green);
302}
303.settings__refresh-button:not(:disabled),
304.settings__import-button:not(:disabled),
305.settings__export-button:not(:disabled) {
306 box-shadow: var(--light-shadow);
307}
308.settings__refresh-button:not(:disabled):hover,
309.settings__import-button:not(:disabled):hover,
310.settings__export-button:not(:disabled):hover {
311 box-shadow: var(--light-shadow), var(--focus-ring);
312}
313.settings__refresh-button:disabled,
314.settings__import-button:disabled,
315.settings__export-button:disabled {
316 opacity: 0.5;
317 cursor: not-allowed;
318}
319.settings__import-export-label {
320 margin-right: auto;
321}
322.settings__widgets {
323 width: 100%;
324}
325.settings__widgets-breadcrumb {
326 height: 28px;
327 display: flex;
328 align-items: center;
329 gap: 6px;
330 padding: 2px 0 5px;
331 margin-bottom: 5px;
332}
333.settings__widgets-breadcrumb-title {
334 font-size: calc(var(--font-size) * 1.2);
335 font-weight: 700;
336}
337button.settings__widgets-breadcrumb-title {
338 padding: 0;
339 color: inherit;
340 font-family: inherit;
341 background-color: transparent;
342 text-decoration: underline;
343 cursor: pointer;
344 border: 0;
345}
346.settings__widgets-breadcrumb-current {
347 margin-bottom: -2px;
348}
349.settings__widgets-breadcrumb-back {
350 display: flex;
351 align-items: center;
352 margin-left: auto;
353 padding: 2px 10px;
354 background-color: var(--minor);
355 border: 1px solid var(--foreground-alt);
356 border-radius: var(--item-radius);
357 color: var(--foreground);
358 font-family: var(--font);
359 font-size: 13px;
360 font-weight: 500;
361 cursor: pointer;
362 white-space: nowrap;
363 box-sizing: border-box;
364 transition: color 160ms var(--transition-easing),
365 background-color 160ms var(--transition-easing),
366 box-shadow 160ms var(--transition-easing);
367}
368.settings__widgets-breadcrumb-back:hover {
369 box-shadow: var(--hover-ring);
370}
371.settings__widgets-breadcrumb-back-icon {
372 flex: 0 0 8px;
373 width: 8px;
374 height: 8px;
375 margin-right: 6px;
376 fill: currentColor;
377}
378.settings__widgets-list {
379 display: flex;
380 flex-direction: column;
381 gap: 6px;
382}
383.settings__widgets-item {
384 display: flex;
385 align-items: center;
386 gap: 10px;
387 padding: 10px;
388 background-color: var(--minor);
389 border-radius: var(--item-radius);
390}
391.settings__widgets-item:not(.settings__widgets-item--process) {
392 cursor: pointer;
393}
394.settings__widgets-item-icon {
395 flex: 0 0 10px;
396 width: 10px;
397 height: 10px;
398 margin-left: auto;
399 fill: currentcolor;
400}
401.settings__widget-settings {
402 display: flex;
403 flex-wrap: wrap;
404 gap: 6px;
405}
406${userWidgetsCreatorStyles}
407${aerospaceDisplayManagerStyles}
408`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js
new file mode 100755
index 0000000..417826a
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js
@@ -0,0 +1,170 @@
1import { colorPickerStyles } from "./color-picker";
2import { iconPickerStyles } from "./icon-picker";
3
4export const userWidgetsCreatorStyles = /* css */ `
5 .user-widgets-creator {
6 position: relative;
7 width: 100%;
8 display: flex;
9 flex-direction: column;
10 padding-bottom: 25px;
11 border-radius: var(--item-radius);
12 }
13 .user-widgets-creator__add {
14 position: sticky;
15 bottom: 0;
16 display: flex;
17 align-items: center;
18 margin: 0 auto;
19 padding: 7px 10px;
20 font-family: var(--font);
21 font-size: calc(var(--font-size) * 0.9);
22 background-color: var(--green);
23 border-radius: var(--item-radius);
24 border: 0;
25 box-shadow: var(--light-shadow);
26 cursor: pointer;
27 user-select: none;
28 -webkit-user-select: none;
29 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
30 }
31 .user-widgets-creator__add:hover {
32 box-shadow: var(--light-shadow), var(--focus-ring);
33 }
34 .user-widgets-creator__add > svg {
35 width: 10px;
36 height: 10px;
37 margin-right: 1ch;
38 }
39 .user-widget-creator {
40 position: relative;
41 display: flex;
42 align-items: center;
43 margin-bottom: 15px;
44 padding: 5px;
45 z-index: 0;
46 }
47 .user-widget-creator::before {
48 content: '';
49 position: absolute;
50 top: 0;
51 left: 0;
52 width: 100%;
53 height: 100%;
54 background-color: var(--main-alt);
55 border-radius: var(--item-radius);
56 opacity: 0.1;
57 z-index: -1;
58 }
59 .user-widget-creator__sort-buttons {
60 position: absolute;
61 top: 0;
62 left: 17px;
63 height: 100%;
64 display: flex;
65 flex-direction: column;
66 pointer-events: none;
67 touch-action: none;
68 }
69 .user-widget-creator__sort-button {
70 width: 26px;
71 height: 26px;
72 display: flex;
73 align-items: center;
74 justify-content: center;
75 padding: 0;
76 background-color: transparent;
77 border: 0;
78 cursor: pointer;
79 pointer-events: auto;
80 touch-action: auto;
81 }
82 .user-widget-creator__sort-button--before {
83 margin-bottom: 5px;
84 }
85 .user-widget-creator__sort-button--after {
86 margin-top: auto;
87 }
88 .user-widget-creator__sort-button > svg {
89 width: 22px;
90 height: 22px;
91 fill: var(--foreground);
92 }
93 .user-widget-creator__remove {
94 position: absolute;
95 top: 2px;
96 right: 2px;
97 padding: 5px;
98 background-color: var(--red);
99 border-radius: var(--item-radius);
100 border: 0;
101 box-shadow: var(--light-shadow);
102 cursor: pointer;
103 user-select: none;
104 -webkit-user-select: none;
105 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
106 }
107 .user-widget-creator__remove:hover {
108 box-shadow: var(--light-shadow), var(--focus-ring);
109 }
110 .user-widget-creator__remove > svg {
111 width: 10px;
112 height: 10px;
113 fill: var(--white);
114 }
115 .user-widget-creator__index {
116 position: absolute;
117 top: calc(50% - 40px);
118 left: 20px;
119 }
120 .user-widget-creator__right {
121 flex: 1 1 100%;
122 display: flex;
123 flex-direction: column;
124 }
125 .user-widget-creator__right-top {
126 display: flex;
127 align-items: center;
128 }
129 .user-widget-creator__right-top > label {
130 margin: 0 1ch 0 2ch;
131 }
132 .user-widget-creator__input-group {
133 display: flex;
134 align-items: center;
135 margin: 2px 0;
136 }
137 .user-widget-creator input[type="text"] {
138 width: auto;
139 margin: 3px 0;
140 padding: 2px 4px;
141 box-sizing: border-box;
142 font-family: var(--font);
143 font-size: calc(var(--font-size) * 0.9);
144 border: 0;
145 outline: none;
146 border-radius: 4px;
147 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
148 }
149 .user-widget-creator input[type="text"]:hover {
150 box-shadow: var(--hover-ring);
151 }
152 .user-widget-creator input[type="text"]:focus {
153 box-shadow: var(--focus-ring);
154 }
155 .user-widget-creator__input-group label {
156 white-space: nowrap;
157 }
158 .user-widget-creator__input-group input[type="text"] {
159 flex: 1 1 100%;
160 margin-left: 1ch;
161 }
162 .user-widget-creator__input-group input[type="checkbox"]:not(:first-child) {
163 margin-left: 16px;
164 }
165 .user-widget-creator__input-group input[type="checkbox"] {
166 margin-right: 6px;
167 }
168 ${colorPickerStyles}
169 ${iconPickerStyles}
170`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js
new file mode 100755
index 0000000..9d4535d
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js
@@ -0,0 +1,15 @@
1// Styles for /lib/components/side-icon.jsx component
2export const sideIconStyles = /* css */ `
3.side-icon {
4 display: flex;
5 align-items: center;
6 margin: 0 5px;
7 color: #fff;
8}
9
10.side-icon__svg {
11 width: 14px;
12 height: 14px;
13 fill: currentColor;
14}
15`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js
new file mode 100755
index 0000000..1f43895
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js
@@ -0,0 +1,137 @@
1export const spaceOptionsStyles = /* css */ `
2.space-options {
3 position: absolute;
4 top: calc(100% + 3px);
5 left: calc(50% - 22px);
6 height: 90%;
7 width: 50px;
8 height: 18px;
9 display: flex;
10 align-items: stretch;
11 background-color: var(--white);
12 opacity: 0;
13 pointer-events: none;
14 touch-action: none;
15 border-radius: 3px;
16 box-shadow: var(--light-shadow);
17 transform-origin: top center;
18 transform: translateZ(0) scale(0);
19 transition: opacity 160ms var(--transition-easing), transform 160ms var(--transition-easing);
20 z-index: 1;
21}
22.simple-bar--on-bottom .space-options {
23 top: unset;
24 bottom: calc(100% + 3px);
25 transform-origin: bottom center;
26}
27.simple-bar--inline-spaces-options .space-options {
28 height: 100%;
29 top: 0;
30 left: 100%;
31 border-radius: 3px;
32 transform-origin: center;
33}
34.space--hovered .space-options {
35 opacity: 1;
36 transform: translateZ(0);
37 pointer-events: auto;
38 touch-action: auto;
39 transition: opacity 160ms 1s var(--transition-easing), transform 160ms 1s var(--transition-easing);
40}
41.space--hovered.space--no-delay .space-options {
42 transition: opacity 160ms var(--transition-easing), transform 160ms var(--transition-easing);
43}
44.space-options::before {
45 content: "";
46 position: absolute;
47 bottom: 100%;
48 left: 0;
49 width: 100%;
50 height: 3px;
51 z-index: 2;
52}
53.space-options::after {
54 content: '';
55 position: absolute;
56 top: -3px;
57 left: calc(50% - 4px);
58 width: 0;
59 height: 0;
60 border-left: 4px solid transparent;
61 border-right: 4px solid transparent;
62 border-bottom: 3px solid var(--white);
63}
64.simple-bar--on-bottom .space-options::after {
65 top: unset;
66 bottom: -3px;
67 border-left: 4px solid transparent;
68 border-right: 4px solid transparent;
69 border-top: 3px solid var(--white);
70 border-bottom: none;
71}
72.simple-bar--inline-spaces-options .space-options::after {
73 top: calc(50% - 4px);
74 left: -3px;
75 border-top: 4px solid transparent;
76 border-bottom: 4px solid transparent;
77 border-right: 3px solid var(--white);
78 border-left: none;
79}
80.space-options__option {
81 position: relative;
82 flex: 1 1 100%;
83 display: flex;
84 align-items: center;
85 justify-content: center;
86 cursor: pointer;
87 user-select: none;
88 -webkit-user-select: none;
89 transform: translateZ(0);
90 transition: background-color 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
91}
92.space-options__option:last-child {
93 opacity: 0.8;
94 background-color: var(--red);
95}
96.space--fullscreen .space-options__option:last-child,
97.space:first-of-type:only-of-type .space-options__option:last-child,
98.space:first-of-type:nth-last-of-type(2) .space-options__option:last-child {
99 pointer-events: none;
100 touch-action: none;
101 opacity: 0.5;
102 filter: grayscale(100%);
103}
104.space:first-of-type .space-options__option--move-prev,
105.space:nth-last-of-type(1) .space-options__option--move-next,
106.space:first-of-type:only-of-type .space-options__option--move-prev,
107.space:first-of-type:only-of-type .space-options__option--move-next,
108.space:first-of-type:nth-last-of-type(1) .space-options__option--move-prev,
109.space:first-of-type:nth-last-of-type(1) .space-options__option--move-next {
110 opacity: 0.2;
111 pointer-events: none;
112 touch-action: none;
113}
114.space .space-options__option:first-of-type {
115 border-radius: 3px 0 0 3px;
116}
117.space-options__option:last-of-type {
118 border-radius: 0 3px 3px 0;
119}
120.space-options__option:not(:last-child):hover {
121 background-color: var(--transparent-dark);
122}
123.space-options__option:last-child:hover {
124 opacity: 1;
125}
126.space-options__option > svg {
127 width: 8px;
128 height: 8px;
129 fill: var(--black);
130 curor: pointer;
131 user-select: none;
132 -webkit-user-select: none;
133}
134.space-options__option:last-child > svg {
135 fill: var(--white);
136}
137`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js
new file mode 100755
index 0000000..0e6d1cb
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js
@@ -0,0 +1,152 @@
1export const spaceStyles = /* css */ `
2.space, .stickies {
3 position: relative;
4 display: flex;
5 align-items: center;
6 animation: space-appearance 320ms var(--transition-easing);
7}
8
9@keyframes space-appearance {
10 0% {
11 opacity: 0;
12 }
13}
14.space__inner,
15.spaces__add,
16.stickies__inner {
17 height: 100%;
18 display: flex;
19 align-items: center;
20 margin: var(--item-outer-margin);
21 padding: var(--item-inner-margin);
22 color: currentColor;
23 font-family: var(--font);
24 background-color: var(--minor);
25 border-radius: var(--item-radius);
26 border: 0;
27 outline: none;
28 box-shadow: var(--light-shadow);
29 cursor: pointer;
30 user-select: none;
31 -webkit-user-select: none;
32 transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing),
33 border 160ms var(--transition-easing), box-shadow 160ms var(--transition-easing);
34 z-index: 0;
35}
36.space__inner:disabled {
37 cursor: default;
38}
39.stickies__inner {
40 padding-block: 0;
41 background-color: var(--background);
42 box-shadow: none;
43 cursor: default;
44}
45.simple-bar--spaces-background-color-as-foreground .space__inner,
46.simple-bar--spaces-background-color-as-foreground .spaces__add,
47.simple-bar--spaces-background-color-as-foreground .stickies__inner {
48 background-color: transparent;
49 box-shadow: none;
50}
51.simple-bar--no-shadow .space__inner,
52.simple-bar--no-shadow .spaces__add,
53.simple-bar--no-shadow .stickies__inner {
54 box-shadow: none;
55}
56.space:first-of-type .space__inner {
57 margin-left: 0;
58}
59.space:hover .space__inner {
60 z-index: 1;
61}
62.spaces__add {
63 height: auto;
64 background-color: transparent;
65 box-shadow: none;
66}
67.spaces__add:hover {
68 background-color: var(--minor);
69}
70.space--fullscreen .space__inner {
71 color: var(--minor);
72 background-color: var(--yellow);
73}
74.simple-bar--spaces-background-color-as-foreground .space--fullscreen .space__inner {
75 color: var(--yellow);
76 background-color: transparent;
77}
78.space--focused .space__inner {
79 color: var(--minor);
80 background-color: var(--foreground);
81}
82.simple-bar--spaces-background-color-as-foreground .space--focused .space__inner {
83 color: var(--foreground);
84 background-color: transparent;
85}
86.space--visible .space__inner {
87 box-shadow: var(--light-shadow), var(--foreground-shadow);
88}
89.simple-bar--no-shadow .space--visible .space__inner {
90 box-shadow: none;
91}
92.space:not(.space--focused) .space__inner:not(:disabled):hover,
93.spaces__add:hover {
94 box-shadow: var(--light-shadow), var(--hover-ring);
95}
96.space:not(.space--focused) .space__inner:not(:disabled):active,
97.spaces__add:active {
98 box-shadow: var(--light-shadow), var(--focus-ring);
99}
100.simple-bar--no-shadow .space:not(.space--focused) .space__inner:not(:disabled):hover,
101.simple-bar--no-shadow .spaces__add:hover {
102 box-shadow: var(--hover-ring);
103}
104.simple-bar--no-shadow .space:not(.space--focused) .space__inner:not(:disabled):active,
105.simple-bar--no-shadow .spaces__add:active {
106box-shadow: var(--focus-ring);
107}
108.space__label {
109 display: block;
110 margin: 0;
111 color: currentColor;
112 font-family: inherit;
113 font-size: var(--font-size);
114 line-height: 1;
115 text-align: center;
116 background-color: transparent;
117 border: 0;
118 border-radius: 2px;
119 outline: none;
120}
121.space__label:not(:read-only):focus {
122 box-shadow: var(--focus-ring);
123}
124.simple-bar--spaces-background-color-as-foreground .space--focused .space__label {
125 font-weight: 700;
126}
127.space__icon {
128 flex: 0 0 11px;
129 width: 11px;
130 height: 11px;
131 margin-left: 6px;
132 fill: currentColor;
133 opacity: 0.5;
134 transform: translateZ(0);
135}
136.stickies__inner .space__icon:first-child {
137 margin: 0;
138}
139.space__icon--focused {
140 opacity: 1;
141}
142.space__icon--fullscreen {
143 fill: var(--yellow);
144}
145.space__icon--topmost {
146 fill: var(--orange);
147}
148.space--focused .space__icon--fullscreen {
149 stroke: rgba(0, 0, 0, 0.3);
150 stroke-width: 2px;
151}
152`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js
new file mode 100755
index 0000000..8657b9c
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js
@@ -0,0 +1,50 @@
1// Styles for /lib/components/{yabai|aerospace}/*.jsx components
2import { spaceStyles } from "./space";
3import { spaceOptionsStyles } from "./space-options";
4
5export const styles = /* css */ `
6.spaces {
7 flex: 0 0 auto;
8 display: flex;
9 align-items: stretch;
10}
11.simple-bar--no-bar-background .spaces {
12 padding: 4px 5px;
13 background-color: var(--background);
14 box-shadow: var(--light-shadow);
15 border-radius: var(--bar-radius);
16}
17.simple-bar--no-bar-background.simple-bar--no-shadow .spaces {
18 box-shadow: none;
19}
20.simple-bar--process-aligned-to-left .spaces {
21 margin-right: 4px;
22}
23.spaces__separator {
24 align-self: center;
25 flex: 0 0 5px;
26 width: 5px;
27 height: 5px;
28 margin: var(--item-outer-margin);
29 background-color: var(--foreground);
30 border-radius: 50%;
31 opacity: 0.35;
32}
33${spaceStyles}
34${spaceOptionsStyles}
35.spaces__add > svg {
36 width: 10px;
37 height: 10px;
38 fill: currentColor;
39}
40.spaces__end-separator {
41 align-self: center;
42 flex: 0 0 4px;
43 width: 4px;
44 height: 4px;
45 margin: var(--item-outer-margin);
46 background-color: var(--main-alt);
47 border-radius: 50%;
48 opacity: 0.35;
49}
50`;
generated by cgit v1.3 (git 2.53.0) at 2026-07-27 00:33:22 +0000