SHA256
qandClaude Opus 5.5
2e62616b46
Палитра «Сияние» по умолчанию, новые роли цветов. Лента канала: плоские записи, ряд действий с равным шагом иконок, дата у записи. Обсуждение со строкой ввода, личный чат, шторки. Вход и регистрация: стартовый экран (надпись «СИЯНИЕ», сияние мандалы), настройки входа со статусами серверов, статус логина в одну строку, вход с другого устройства (код, таймер, шаги), сохранение ключей с переключателями. Корневые разделы – заголовок по центру; фильтр чатов – переключатель; уведомления – список как в чатах; фото – просмотр на весь экран. Общее: один зазор под шапкой (--page-top-gap), переключатели высотой с поле ввода, второстепенные кнопки по одной роли (в том числе на экранах устройств и серверов), иконки только из ui-icon.js, полоса прокрутки скрыта, среднее тире в текстах интерфейса. Что нужно от сервера и разработчика – docs/UI-Design/UI-v4-for-dev.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
107 lines
3.5 KiB
CSS
107 lines
3.5 KiB
CSS
/* Полноэкранный просмотр фото и видео (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; }
|
|
}
|