authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-07-24 00:41:10+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-23 22:41:10+00:00
log67a7b1a1d3443beeedc6a3bd7fe9dd875f016b11
treea062d06a9652ac2ca68c24e8868219616bb1be86
parentce467da9cfae3d7952ce13a9e2450e2908e9f224
signature Signed by PGP key B5690EEEBB952194

Improve composer glass fallbacks (#4406)

Co-authored-by: codex <codex@users.noreply.github.com>

1 files changed, 34 insertions(+), 1 deletions(-)

apps/web/src/index.css+34-1
...@@ -453,6 +453,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -453,6 +453,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
453 inset: 0;453 inset: 0;
454 border: 1px solid var(--chat-composer-outline);454 border: 1px solid var(--chat-composer-outline);
455 border-radius: inherit;455 border-radius: inherit;
456 content: "";
457 }
458
459 .chat-composer-glass-shell-with-context .chat-composer-glass-host::after {
456 /* Keep the attachment seam open; the strip continues the outer outline below. */460 /* Keep the attachment seam open; the strip continues the outer outline below. */
457 clip-path: polygon(461 clip-path: polygon(
458 0 0,462 0 0,
...@@ -464,7 +468,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -464,7 +468,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
464 22px 100%,468 22px 100%,
465 0 100%469 0 100%
466 );470 );
467 content: "";
468 }471 }
469472
470 .chat-composer-context-strip {473 .chat-composer-context-strip {
...@@ -512,6 +515,36 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -512,6 +515,36 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
512 box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);515 box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
513 }516 }
514517
518 @supports not (clip-path: shape(from 0 0, line to 1px 1px)) {
519 .chat-composer-glass-shell-with-context::before {
520 inset-block-end: var(--chat-composer-context-extension);
521 border-radius: 22px;
522 clip-path: none;
523 }
524
525 .chat-composer-context-strip::before {
526 background: color-mix(
527 in srgb,
528 var(--chat-composer-glass-surface) var(--glass-opacity),
529 transparent
530 );
531 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
532 backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
533 }
534
535 .dark .chat-composer-context-strip::before {
536 background:
537 linear-gradient(
538 to bottom,
539 transparent 0 1rem,
540 rgb(0 0 0 / 18%) 1rem,
541 transparent calc(1rem + 10px)
542 ),
543 linear-gradient(rgb(255 255 255 / 2%), rgb(255 255 255 / 2%)),
544 color-mix(in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent);
545 }
546 }
547
515 .alert-glass {548 .alert-glass {
516 --alert-glass-tint: transparent;549 --alert-glass-tint: transparent;
517550