@pathscale/ui 1.1.48 → 1.1.50
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.
|
@@ -26,14 +26,17 @@
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
/* -------------------------------------------------------------------------------------------------
|
|
29
|
-
* Background panel —
|
|
29
|
+
* Background panel — original soft-edge shape with a subtle glass treatment.
|
|
30
|
+
* Per customer feedback: keep the prior shape/borders, only add a glass feel.
|
|
30
31
|
* -----------------------------------------------------------------------------------------------*/
|
|
31
32
|
.floating-dock__bg {
|
|
32
33
|
position: absolute;
|
|
33
34
|
inset: 0;
|
|
34
35
|
z-index: -1;
|
|
35
36
|
border-radius: 1rem;
|
|
36
|
-
background-color: var(--color-base-100);
|
|
37
|
+
background-color: color-mix(in srgb, var(--color-base-100) 55%, transparent);
|
|
38
|
+
backdrop-filter: blur(12px) saturate(160%);
|
|
39
|
+
-webkit-backdrop-filter: blur(12px) saturate(160%);
|
|
37
40
|
box-shadow:
|
|
38
41
|
inset 0 1px 0 0 var(--color-base-300),
|
|
39
42
|
0 1px 0 0 var(--color-base-100);
|
|
@@ -41,7 +44,7 @@
|
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
/* -------------------------------------------------------------------------------------------------
|
|
44
|
-
* Item wrapper
|
|
47
|
+
* Item wrapper — original look: rounded pill, semi-opaque, hover bumps opacity.
|
|
45
48
|
* -----------------------------------------------------------------------------------------------*/
|
|
46
49
|
.floating-dock__item {
|
|
47
50
|
position: relative;
|
|
@@ -94,7 +97,9 @@
|
|
|
94
97
|
white-space: pre;
|
|
95
98
|
border-radius: var(--radius-field, 0.375rem);
|
|
96
99
|
border: 1px solid var(--color-base-300);
|
|
97
|
-
background-color: var(--color-base-100);
|
|
100
|
+
background-color: color-mix(in srgb, var(--color-base-100) 75%, transparent);
|
|
101
|
+
backdrop-filter: blur(8px) saturate(160%);
|
|
102
|
+
-webkit-backdrop-filter: blur(8px) saturate(160%);
|
|
98
103
|
color: var(--color-base-content);
|
|
99
104
|
padding: 0.125rem 0.5rem;
|
|
100
105
|
font-size: 0.75rem;
|
|
@@ -167,6 +172,16 @@
|
|
|
167
172
|
color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
|
|
168
173
|
}
|
|
169
174
|
|
|
175
|
+
/* a11y */
|
|
176
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
177
|
+
.floating-dock__bg,
|
|
178
|
+
.floating-dock__tooltip {
|
|
179
|
+
backdrop-filter: none;
|
|
180
|
+
-webkit-backdrop-filter: none;
|
|
181
|
+
background-color: var(--color-base-100);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
170
185
|
/* -------------------------------------------------------------------------------------------------
|
|
171
186
|
* Responsive: hide desktop on small, mobile on large
|
|
172
187
|
* -----------------------------------------------------------------------------------------------*/
|
|
@@ -544,7 +544,7 @@ const FloatingDock = (rawProps)=>{
|
|
|
544
544
|
iconSize: local.iconSize ?? 20,
|
|
545
545
|
hoverIconSize: local.hoverIconSize ?? 20,
|
|
546
546
|
magnifyRange: local.magnifyRange ?? 110,
|
|
547
|
-
magnify:
|
|
547
|
+
magnify: true === local.magnify,
|
|
548
548
|
nudge: local.nudge ?? 20,
|
|
549
549
|
gap: local.gap ?? 8,
|
|
550
550
|
tooltipDir: local.tooltipDirection ?? "top",
|