@floegence/floe-webapp-core 0.52.2 → 0.52.3
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/dist/components/ui/FloatingWindow.js +42 -35
- package/dist/floe.css +39 -44
- package/dist/styles.css +1 -1
- package/dist/surface.css +40 -2
- package/package.json +1 -1
package/dist/surface.css
CHANGED
|
@@ -409,20 +409,50 @@
|
|
|
409
409
|
@media (forced-colors: none) {
|
|
410
410
|
:root[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light'])
|
|
411
411
|
[data-floe-floating-window-surface='true'][data-floe-surface='floating'] {
|
|
412
|
+
--floe-window-radius: 10px;
|
|
412
413
|
background: var(--floe-window-background);
|
|
413
414
|
color: var(--floe-window-foreground);
|
|
414
415
|
--muted-foreground: var(--floe-window-muted-foreground);
|
|
415
416
|
border-color: var(--floe-window-border);
|
|
416
417
|
--floe-surface-decoration: var(--floe-window-shadow);
|
|
418
|
+
border-radius: var(--floe-window-radius);
|
|
417
419
|
|
|
418
420
|
& [data-floe-floating-window-titlebar='true'] {
|
|
419
|
-
|
|
420
|
-
|
|
421
|
+
position: relative;
|
|
422
|
+
background-color: var(--floe-window-titlebar-background);
|
|
423
|
+
background-image: none;
|
|
424
|
+
border-bottom-color: var(--floe-surface-divider);
|
|
421
425
|
color: var(--floe-window-foreground);
|
|
422
426
|
transition: none;
|
|
427
|
+
border-radius: calc(var(--floe-window-radius) - 1px) calc(var(--floe-window-radius) - 1px) 0 0;
|
|
428
|
+
}
|
|
429
|
+
& [data-floe-floating-window-titlebar='true']::before {
|
|
430
|
+
content: '';
|
|
431
|
+
position: absolute;
|
|
432
|
+
inset: 0 14px auto;
|
|
433
|
+
height: 1px;
|
|
434
|
+
background: linear-gradient(
|
|
435
|
+
90deg,
|
|
436
|
+
transparent,
|
|
437
|
+
color-mix(in srgb, var(--ring) 42%, transparent) 50%,
|
|
438
|
+
transparent
|
|
439
|
+
);
|
|
440
|
+
opacity: 0.72;
|
|
441
|
+
pointer-events: none;
|
|
423
442
|
}
|
|
424
443
|
&[data-floe-floating-window-state='inactive'] > [data-floe-floating-window-titlebar='true'] {
|
|
425
444
|
background: color-mix(in srgb, var(--floe-window-titlebar-background) 50%, var(--floe-window-background));
|
|
445
|
+
background-image: none;
|
|
446
|
+
}
|
|
447
|
+
&[data-floe-floating-window-state='active'] > [data-floe-floating-window-titlebar='true'] {
|
|
448
|
+
background-color: color-mix(in srgb, var(--accent) 24%, var(--floe-window-titlebar-background));
|
|
449
|
+
}
|
|
450
|
+
& [data-floe-floating-window-content='true'] {
|
|
451
|
+
background: color-mix(in srgb, var(--floe-window-background) 96%, var(--background));
|
|
452
|
+
}
|
|
453
|
+
& [data-floe-floating-window-footer='true'] {
|
|
454
|
+
background: color-mix(in srgb, var(--floe-window-background) 92%, var(--muted));
|
|
455
|
+
border-top-color: var(--floe-surface-divider);
|
|
426
456
|
}
|
|
427
457
|
& > [data-floe-floating-window-titlebar='true'] button {
|
|
428
458
|
transition-property: background-color, border-color, opacity;
|
|
@@ -436,6 +466,14 @@
|
|
|
436
466
|
}
|
|
437
467
|
}
|
|
438
468
|
|
|
469
|
+
/* Dark shell palettes use a restrained dark step for active chrome so the
|
|
470
|
+
* window remains discoverable without a bright outline or animated glow. */
|
|
471
|
+
:root.dark[data-floe-surface-style='soft-neumorphic']:not([data-floe-shell-theme='hc-light'])
|
|
472
|
+
[data-floe-floating-window-surface='true'][data-floe-floating-window-state='active']
|
|
473
|
+
> [data-floe-floating-window-titlebar='true'] {
|
|
474
|
+
background-color: color-mix(in srgb, var(--background) 38%, var(--floe-window-titlebar-background));
|
|
475
|
+
}
|
|
476
|
+
|
|
439
477
|
/* FloatingWindow keeps rich text at scale 1 throughout its short presence
|
|
440
478
|
* motion. Only presence promotes this panel; the existing geometry owner
|
|
441
479
|
* already promotes direct drag/resize, so adding a second hot layer is wasteful. */
|