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>
16 lines
1.7 KiB
CSS
16 lines
1.7 KiB
CSS
:root { --z-overlay: 100; --z-dropdown: 110; --z-modal: 120; }
|
|
.dropdown-portal { pointer-events: none; }
|
|
.dropdown-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: auto; background: var(--scrim); }
|
|
.dropdown-menu { position: fixed; z-index: var(--z-dropdown); display: grid; gap: 2px; padding: 6px; min-width: 196px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; border: 1px solid var(--border-control); border-radius: 14px; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow); pointer-events: auto; }
|
|
.dropdown-menu__item { width: 100%; min-height: 44px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font: inherit; font-size: .875rem; line-height: 1.4; text-align: left; cursor: pointer; }
|
|
.dropdown-menu__item:hover { background: var(--surface-raised); }
|
|
.dropdown-menu__item.is-selected { background: var(--surface-selected); }
|
|
.dropdown-menu__item:active { background: var(--surface-selected); }
|
|
.dropdown-menu__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
|
|
.dropdown-menu__item.is-danger { color: var(--danger); }
|
|
.dropdown-menu__item:disabled { opacity: .5; cursor: not-allowed; }
|
|
.dropdown-menu__icon, .dropdown-menu__icon svg, .dropdown-menu__item > img { width: 21px; height: 21px; flex: 0 0 21px; object-fit: contain; }
|
|
.dropdown-menu__icon { color: var(--text-secondary); }
|
|
.dropdown-menu__item.is-danger .dropdown-menu__icon { color: var(--danger); }
|
|
.dropdown-menu__divider { height: 1px; margin: 5px 8px; background: var(--border-subtle); }
|