aboutsummaryrefslogtreecommitdiff
path: root/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js
diff options
context:
space:
mode:
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js')
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js101
1 files changed, 101 insertions, 0 deletions
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`;