Files
SHiNE-server/shine-UI/styles/components/nav-list.css
T
qandClaude Opus 5.5 f8900e531a UI: новый общий стиль, тёмная/светлая тема, настраиваемая палитра
- styles/main.css: роли цветов (по умолчанию «Индиго»), шкала отступов/скруглений/шрифтов,
  цвета отношений для обеих тем; жёсткие цвета в стилях заменены на роли.
- Палитра: пресеты и личные правки, «Оформление» Авто/День/Ночь, долгое нажатие —
  редактор цветов с экспортом/импортом.
- Каналы: пузыри постов автора, плашки дней, строка «Написать в канал…», «О канале»,
  создание канала с адресом из названия; лента открывается на свежих постах.
- Чаты: плоский список, чипы-фильтры, пузыри, плашки дней; нижняя панель скрыта в переписке.
- Корневые разделы — единая шапка; профиль и чужой профиль — общая карточка;
  настройки, кошелёк, сеансы — меню-списки.
- Нижняя панель: иконки без подписей, бейджи на иконках.
- confirmDialog вместо window.confirm/alert; на телефоне диалоги — шторки снизу.
- docs/UI-Design/ISSUES-for-dev.md — найденные ошибки сервера/UI.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-26 10:05:26 +03:00

37 lines
2.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* Меню-список: группа строк «название / подсказка / ›» — для переходов по разделам
* (кошелёк, настройки разработчика и т. п.). Для действий без перехода — обычные кнопки. */
.nav-list { display: grid; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.nav-list__title { margin: var(--space-2) 0 var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-bold); }
.nav-row {
width: 100%;
min-height: 56px;
padding: 10px 40px 10px 14px;
position: relative;
display: grid;
align-content: center;
gap: 2px;
border: 0;
border-top: 1px solid var(--border-subtle);
border-radius: 0;
color: var(--text-primary);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.nav-row:first-child { border-top: 0; }
.nav-row::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 22px; line-height: 1; }
.nav-row:hover { background: var(--surface-selected); }
.nav-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nav-row__label { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-medium); }
.nav-row__hint { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); }
.nav-row--danger .nav-row__label { color: var(--danger); }
.nav-row--danger::after { content: none; }
.nav-row__label.is-empty { color: var(--text-secondary); font-weight: 400; }
.nav-list > .nav-row.profile-param-item { margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
.nav-list > .nav-row.profile-param-item:hover { background: var(--surface-selected); }
.language-row::after { content: none; }
.language-row[aria-checked='true']::after { content: '✓'; color: var(--accent); font-size: 18px; font-weight: var(--weight-bold); }