UI: свайпы вкладок и навигация тредов

2026-08-12 19:37:29 +04:00
parent b4b23afc10
commit e8a4713f6e
9 changed files with 770 additions and 26 deletions
@@ -59,6 +59,124 @@ body::before {
  padding: 14px 14px 24px;
 }

+.screen-swipe-overlay {
+  --swipe-overlay-opacity: 0.12;
+  position: absolute;
+  top: var(--call-minimized-bar-height, 0px);
+  left: 0;
+  right: 0;
+  bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom));
+  z-index: 8;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 1;
+}
+
+.screen-swipe-overlay::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(5, 10, 20, 0.06) 0%, rgba(5, 10, 20, 0.16) 100%),
+    radial-gradient(circle at center, rgba(89, 165, 255, 0.06) 0%, transparent 70%);
+  opacity: var(--swipe-overlay-opacity, 0.12);
+}
+
+.screen-swipe-pane {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+.screen-swipe-pane--current {
+  left: 0;
+  z-index: 1;
+}
+
+.screen-swipe-pane--target {
+  left: 0;
+  z-index: 2;
+  filter: saturate(1.03);
+}
+
+.screen-swipe-slot {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.screen-swipe-slot--topbar {
+  top: 0;
+  padding: 0 12px;
+  pointer-events: none;
+}
+
+.screen-swipe-slot--topbar > * {
+  pointer-events: none;
+}
+
+.screen-swipe-slot--content {
+  top: calc(var(--topbar-height, 0px));
+  bottom: var(--composer-height, 0px);
+  overflow-y: auto;
+  padding: 14px 14px 24px;
+}
+
+.screen-swipe-slot--composer {
+  bottom: 0;
+  padding: 0 12px 8px;
+  pointer-events: none;
+}
+
+.screen-swipe-slot--composer > * {
+  pointer-events: none;
+}
+
+.screen-swipe-pane--target::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(8, 14, 28, 0.05) 0%, rgba(8, 14, 28, 0.12) 100%);
+  pointer-events: none;
+}
+
+.screen-swipe-pane--left {
+  box-shadow: -24px 0 34px rgba(3, 7, 18, 0.34);
+}
+
+.screen-swipe-pane--right {
+  box-shadow: 24px 0 34px rgba(3, 7, 18, 0.34);
+}
+
+.screen-swipe-divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  width: 2px;
+  z-index: 3;
+  background:
+    linear-gradient(180deg, rgba(248, 251, 255, 0.68) 0%, rgba(137, 186, 255, 0.52) 48%, rgba(53, 90, 144, 0.34) 100%);
+  box-shadow:
+    0 0 0 1px rgba(14, 24, 42, 0.08),
+    0 0 18px rgba(80, 154, 255, 0.22);
+  pointer-events: none;
+}
+
+.app-shell--swiping .toolbar-slot {
+  pointer-events: none;
+}
+
+.topbar-slot--swipe-hidden,
+.screen-content--swipe-hidden,
+.composer-slot--swipe-hidden {
+  opacity: 0;
+}
+
 .screen-content.no-app-chrome {
  top: var(--call-minimized-bar-height, 0px);
  bottom: 0;