UI v4: новый стиль по макету V3/V4 и доводка экранов

Палитра «Сияние» по умолчанию, новые роли цветов. Лента канала: плоские записи, ряд действий с равным шагом иконок, дата у записи. Обсуждение со строкой ввода, личный чат, шторки. Вход и регистрация: стартовый экран (надпись «СИЯНИЕ», сияние мандалы), настройки входа со статусами серверов, статус логина в одну строку, вход с другого устройства (код, таймер, шаги), сохранение ключей с переключателями. Корневые разделы – заголовок по центру; фильтр чатов – переключатель; уведомления – список как в чатах; фото – просмотр на весь экран. Общее: один зазор под шапкой (--page-top-gap), переключатели высотой с поле ввода, второстепенные кнопки по одной роли (в том числе на экранах устройств и серверов), иконки только из ui-icon.js, полоса прокрутки скрыта, среднее тире в текстах интерфейса. Что нужно от сервера и разработчика – docs/UI-Design/UI-v4-for-dev.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 01:36:52 +03:00
parent 13693a0a53
commit 2e62616b46
84 changed files with 2507 additions and 1583 deletions
@@ -0,0 +1,106 @@
+/* Полноэкранный просмотр фото и видео (js/components/media-viewer.js). Чёрный фон в обеих темах – как в галереях. */
+.media-viewer {
+  --viewer-dim: 1;
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: grid;
+  /* Слегка прозрачный фон; размытие не даёт ленте за ним отвлекать. */
+  background: rgb(0 0 0 / calc(0.88 * var(--viewer-dim)));
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  color: #fff;
+  touch-action: none;
+  animation: media-viewer-in 160ms ease-out;
+}
+
+/* Фото и под ним ряд «1/3 ↓» – одной группой по центру экрана. */
+.media-viewer__stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  min-height: 0;
+  padding: calc(56px + env(safe-area-inset-top)) 0 calc(var(--space-4) + env(safe-area-inset-bottom));
+  transition: transform 160ms ease-out;
+}
+
+.media-viewer__frame { display: grid; place-items: center; min-height: 0; max-width: 100%; }
+
+.media-viewer__media {
+  display: block;
+  max-width: 100vw;
+  max-height: calc(100dvh - 56px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.media-viewer__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 44px; }
+.media-viewer__counter { color: rgb(255 255 255 / 85%); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
+.media-viewer__counter[hidden] { display: none; }
+
+.media-viewer__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  min-height: calc(56px + env(safe-area-inset-top));
+  padding: env(safe-area-inset-top) var(--space-1) 0;
+  transition: opacity 160ms ease;
+}
+
+.media-viewer__btn,
+.media-viewer__nav {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+}
+
+.media-viewer__btn svg { width: 22px; height: 22px; }
+.media-viewer__btn:hover { background: rgb(255 255 255 / 12%); }
+.media-viewer__btn--round { background: rgb(255 255 255 / 16%); }
+.media-viewer__btn--round:hover { background: rgb(255 255 255 / 26%); }
+.media-viewer__btn:focus-visible,
+.media-viewer__nav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
+
+/* Стрелки листания – для компьютера; на телефоне листают смахиванием. */
+.media-viewer__nav {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  background: rgb(255 255 255 / 14%);
+  transform: translateY(-50%);
+  transition: opacity 160ms ease;
+}
+
+.media-viewer__nav svg { width: 22px; height: 22px; }
+.media-viewer__nav--prev { left: var(--space-3); }
+.media-viewer__nav--next { right: var(--space-3); }
+.media-viewer__nav[hidden] { display: none; }
+
+@media (hover: none) {
+  .media-viewer__nav { display: none; }
+}
+
+/* Нажатие на фото прячет панель – смотреть без помех. */
+.media-viewer.is-bare :is(.media-viewer__bar, .media-viewer__nav, .media-viewer__controls) { opacity: 0; pointer-events: none; }
+.media-viewer__controls { transition: opacity 160ms ease; }
+
+@keyframes media-viewer-in { from { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .media-viewer { animation: none; }
+  .media-viewer__stage { transition: none; }
+}