SHA256
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>
This commit is contained in:
q
+88
-39
@@ -1,19 +1,28 @@
|
||||
:root {
|
||||
--background: #101b20;
|
||||
--surface: #17272d;
|
||||
--surface-selected: #213b3a;
|
||||
--text-primary: #e8f2f1;
|
||||
--text-secondary: #98adaf;
|
||||
--border-subtle: #2a3b40;
|
||||
--border-control: #71888a;
|
||||
--accent: #94e1ce;
|
||||
--on-accent: #102c27;
|
||||
--focus-ring: #94e1ce;
|
||||
--reaction-active: #f29aab;
|
||||
--danger: #ffaba8;
|
||||
--success: #94e1ce;
|
||||
--warning: #e6c184;
|
||||
--background: #12141f;
|
||||
--surface: #1c2031;
|
||||
--surface-selected: #272c45;
|
||||
--text-primary: #eceefa;
|
||||
--text-secondary: #a0a6c2;
|
||||
--border-subtle: #343a55;
|
||||
--border-control: #6d7396;
|
||||
--accent: #a9b4ff;
|
||||
--on-accent: #151a3d;
|
||||
--focus-ring: #a9b4ff;
|
||||
--reaction-active: #ff9bb3;
|
||||
--danger: #ffa7a3;
|
||||
--success: #8fdab4;
|
||||
--warning: #e8c585;
|
||||
--scrim: #00000099;
|
||||
/* Язык связей: один цвет — один тип отношения во всём приложении (граф, личные, профиль). */
|
||||
--rel-contact: #8c63ff; /* обычная связь / контакт */
|
||||
--rel-family: #f0b82e; /* семья / близкий круг */
|
||||
--rel-shining: #68d8ff; /* «сияющий» */
|
||||
--rel-link: #19e58a; /* активная «Связь» */
|
||||
--rel-contact-glow: color-mix(in srgb, var(--rel-contact) 24%, transparent);
|
||||
--rel-family-glow: color-mix(in srgb, var(--rel-family) 30%, transparent);
|
||||
--rel-shining-glow: color-mix(in srgb, var(--rel-shining) 35%, transparent);
|
||||
--rel-link-glow: color-mix(in srgb, var(--rel-link) 24%, transparent);
|
||||
--bg-0: var(--background);
|
||||
--bg-1: var(--surface);
|
||||
--bg-2: var(--surface-selected);
|
||||
@@ -24,36 +33,74 @@
|
||||
--text-muted: var(--text-secondary);
|
||||
--accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
|
||||
--ok: var(--success);
|
||||
/* Единый цвет основных действий: стартовые/регистрационные кнопки,
|
||||
* настройки и scroll-down. */
|
||||
--shine-action-blue: #1248a3;
|
||||
--shine-action-blue-hover: #1b62cf;
|
||||
--shine-action-blue-pressed: #0d3577;
|
||||
/* Устаревшее имя «синего» основного действия — теперь это акцент палитры. */
|
||||
--shine-action-blue: var(--accent);
|
||||
--shine-action-blue-hover: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
|
||||
--shine-action-blue-pressed: color-mix(in srgb, var(--accent) 80%, var(--background));
|
||||
--shine-action-blue-rgb: 18, 72, 163;
|
||||
--radius-lg: 14px;
|
||||
|
||||
/* ===== Общая шкала: все разделы берут размеры отсюда, а не задают свои ===== */
|
||||
/* Отступы */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
--page-gutter: var(--space-4);
|
||||
/* Скругления */
|
||||
--radius-xs: 8px;
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 12px;
|
||||
--radius-sm: 9px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 20px;
|
||||
--radius-pill: 999px;
|
||||
/* Текст: размер / межстрочный */
|
||||
--text-xs: .75rem; --leading-xs: 1.125rem; /* подписи, время */
|
||||
--text-sm: .8125rem; --leading-sm: 1.25rem; /* вторичный текст */
|
||||
--text-md: .9375rem; --leading-md: 1.375rem; /* основной текст */
|
||||
--text-lg: 1.0625rem; --leading-lg: 1.5rem; /* заголовок панели */
|
||||
--text-xl: 1.375rem; --leading-xl: 1.75rem; /* заголовок экрана */
|
||||
--weight-medium: 500;
|
||||
--weight-bold: 600;
|
||||
/* Контролы */
|
||||
--control-height: 44px;
|
||||
--icon-size: 22px;
|
||||
--avatar-sm: 32px;
|
||||
--avatar-md: 40px;
|
||||
--avatar-lg: 48px;
|
||||
/* Поверх медиа (фото/видео) — всегда тёмная подложка, в любой теме */
|
||||
--media-overlay: rgba(0, 0, 0, 0.45);
|
||||
--on-media: #ffffff;
|
||||
--duration-fast: 160ms;
|
||||
|
||||
--shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
|
||||
--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
|
||||
--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
--background: #faf7f0;
|
||||
--surface: #fffdf8;
|
||||
--surface-selected: #efe6d6;
|
||||
--text-primary: #302c25;
|
||||
--text-secondary: #706658;
|
||||
--border-subtle: #e6dfd1;
|
||||
--border-control: #978b79;
|
||||
--accent: #93511e;
|
||||
--on-accent: #fffaf3;
|
||||
--focus-ring: #93511e;
|
||||
--reaction-active: #a43350;
|
||||
--danger: #b13135;
|
||||
--success: #346a48;
|
||||
--warning: #845b14;
|
||||
--background: #eef0f5;
|
||||
--surface: #ffffff;
|
||||
--surface-selected: #dde3f5;
|
||||
--text-primary: #1e2233;
|
||||
--text-secondary: #5c6279;
|
||||
--border-subtle: #d5d9e5;
|
||||
--border-control: #8a90a8;
|
||||
--accent: #4c5caa;
|
||||
--on-accent: #ffffff;
|
||||
--focus-ring: #4c5caa;
|
||||
--reaction-active: #c02a55;
|
||||
--danger: #b3261e;
|
||||
--success: #2c6b4a;
|
||||
--warning: #7d5a10;
|
||||
--scrim: #302c2566;
|
||||
--shadow: 0 16px 42px rgba(65, 49, 28, 0.14);
|
||||
--shadow: 0 16px 42px rgba(30, 34, 51, 0.14);
|
||||
--shadow-sm: 0 2px 8px rgba(30, 34, 51, 0.08);
|
||||
--rel-contact: #6b3fe0;
|
||||
--rel-family: #a8740a;
|
||||
--rel-shining: #0a7fb3;
|
||||
--rel-link: #0b8a52;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -75,7 +122,9 @@ body {
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -92,7 +141,7 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.notification-card--new { background: rgba(108, 92, 231, .10); border-color: rgba(143, 126, 255, .42); }
|
||||
.notification-card--new { background: var(--accent-soft); border-color: var(--accent); }
|
||||
.notification-card--new::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; position: absolute; right: 12px; top: 12px; opacity: .9; }
|
||||
.notification-card { position: relative; }
|
||||
.notification-new-divider { text-align: center; font-size: 11px; letter-spacing: .12em; opacity: .72; padding: 6px 0; }
|
||||
|
||||
Reference in New Issue
Block a user