aboutsummaryrefslogtreecommitdiff
path: root/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces
diff options
context:
space:
mode:
authorRyan Schanzenbacher <ryan@rschanz.org>2026-07-09 22:15:53 -0400
committerRyan Schanzenbacher <ryan@rschanz.org>2026-07-09 22:15:53 -0400
commitd06784958d73159b5e4abafe5114804662114ed7 (patch)
treed8464262c1aa1f10553a5b11a9fda3e505e71f7f /users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces
parent1a71e94eb8ca1585201263cf654611ef6849d359 (diff)
move ubersicht modules in tree
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces')
-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
3 files changed, 339 insertions, 0 deletions
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`;