@lijian-ui/dsh-term 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/client.js +21 -13
- package/lib/client.js.map +1 -1
- package/lib/tsconfig.client.tsbuildinfo +1 -1
- package/lib/types/client/term/AnimatedDock.d.ts +4 -2
- package/lib/types/client/term/AnimatedDock.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/client/term/AnimatedDock.tsx +18 -9
- package/src/client/term/animated-dock.module.css +16 -12
|
@@ -6,40 +6,44 @@
|
|
|
6
6
|
height: 40px;
|
|
7
7
|
padding: 0 10px 4px;
|
|
8
8
|
border-radius: 16px;
|
|
9
|
-
background: rgba(
|
|
10
|
-
border: 1px solid rgba(255, 255, 255, 0.
|
|
9
|
+
background: rgba(0, 0, 0, 0.85);
|
|
10
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
11
11
|
backdrop-filter: blur(12px);
|
|
12
12
|
-webkit-backdrop-filter: blur(12px);
|
|
13
13
|
overflow: visible;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
/* Circular icon button.
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
/* Circular icon button. The framer-motion spring sets `transform: scale()`
|
|
17
|
+
inline (fixed 40×40 base box; the visual size grows via scale, never via
|
|
18
|
+
layout). `transform-origin: center bottom` makes it rise off the shelf like a
|
|
19
|
+
real dock without ever reflowing its neighbours. */
|
|
19
20
|
.item {
|
|
20
21
|
position: relative;
|
|
21
|
-
|
|
22
|
+
width: 40px;
|
|
23
|
+
height: 40px;
|
|
22
24
|
display: inline-flex;
|
|
23
25
|
align-items: center;
|
|
24
26
|
justify-content: center;
|
|
25
27
|
border: none;
|
|
26
28
|
border-radius: 9999px;
|
|
27
|
-
background:
|
|
28
|
-
color:
|
|
29
|
+
background: #000000;
|
|
30
|
+
color: #ffffff;
|
|
29
31
|
cursor: pointer;
|
|
30
32
|
overflow: visible;
|
|
33
|
+
transform-origin: center bottom;
|
|
34
|
+
will-change: transform;
|
|
31
35
|
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
.item:hover {
|
|
35
|
-
background:
|
|
36
|
-
color:
|
|
39
|
+
background: #1a1a1a;
|
|
40
|
+
color: #ffffff;
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
/* Open-panel highlight: primary tint + thin ring to mirror the live state. */
|
|
40
44
|
.item.active {
|
|
41
|
-
background: var(--aion-primary
|
|
42
|
-
color:
|
|
45
|
+
background: var(--aion-primary, #6ea0ff);
|
|
46
|
+
color: #ffffff;
|
|
43
47
|
box-shadow: 0 0 0 1.5px var(--aion-primary, #6ea0ff);
|
|
44
48
|
}
|
|
45
49
|
|