aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: новый общий стиль, тёмная/светлая тема, настраиваемая палитра

Browse Source 
- 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
2026-09-26 10:05:26 +03:00
co-authored by Claude Opus 5.5
parent 6e5b57fd7c
commit f8900e531a
94 changed files with 3337 additions and 2432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/styles/components/call-ui.css
+39 -39
View File
@@ -28,8 +28,8 @@
gap: 10px;
min-height: 44px;
padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
border-bottom: 1px solid rgba(159, 255, 196, 0.28);
background: linear-gradient(180deg, rgba(30, 138, 79, 0.98), rgba(18, 106, 60, 0.98));
border-bottom: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
background: linear-gradient(180deg, var(--success), var(--surface));
box-shadow: 0 10px 24px rgba(5, 30, 16, 0.28);
pointer-events: auto;
}
@@ -42,7 +42,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -60,22 +60,22 @@
.call-minimized-bar-text:hover {
color: #ffffff;
color: var(--text-primary);
filter: brightness(1.12);
}
.call-minimized-bar-text:active {
color: #ffffff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
.call-minimized-bar-text:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -109,7 +109,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -119,7 +119,7 @@
.call-icon-btn:hover {
color: #ffffff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -129,12 +129,12 @@
.call-icon-btn:active {
color: #ffffff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
border: 0;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
@@ -142,7 +142,7 @@
.call-icon-btn:disabled {
opacity: 1;
color: rgba(255, 255, 255, 0.42);
color: var(--text-secondary);
background: transparent;
border: 0;
box-shadow: none;
@@ -153,7 +153,7 @@
.call-icon-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -193,7 +193,7 @@
.call-overlay {
position: absolute;
inset: 0;
background: rgba(4, 8, 16, 0.88);
background: var(--surface);
backdrop-filter: blur(8px);
pointer-events: auto;
}
@@ -205,13 +205,13 @@
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at 50% 18%, rgba(79, 124, 208, 0.24), transparent 34%),
linear-gradient(180deg, rgba(11, 20, 38, 0.98), rgba(3, 7, 15, 1));
radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%),
linear-gradient(180deg, var(--surface), var(--surface));
}
.call-overlay-panel--remote-video {
background: #010203;
background: var(--surface);
}
@@ -234,7 +234,7 @@
min-height: 22px;
font-size: 14px;
font-weight: 700;
color: rgba(236, 242, 255, 0.94);
color: var(--text-primary);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
}
@@ -252,7 +252,7 @@
bottom: calc(12px + env(safe-area-inset-bottom));
z-index: 4;
text-align: center;
color: rgba(207, 219, 246, 0.84);
color: var(--text-primary);
font-size: 13px;
pointer-events: none;
}
@@ -263,13 +263,13 @@
inset: 0;
overflow: hidden;
background:
radial-gradient(circle at 50% 24%, rgba(54, 88, 151, 0.48), transparent 30%),
linear-gradient(180deg, rgba(9, 17, 32, 0.98), rgba(2, 5, 12, 1));
radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 30%),
linear-gradient(180deg, var(--surface), var(--surface));
}
.call-video-stage--remote-video {
background: #000;
background: var(--surface);
}
@@ -279,7 +279,7 @@
width: 100%;
height: 100%;
object-fit: cover;
background: #02050a;
background: var(--surface);
}
@@ -320,8 +320,8 @@
min-width: 100%;
min-height: 100%;
border-radius: 999px;
border: 2px solid rgba(221, 233, 255, 0.2);
background: linear-gradient(180deg, rgba(18, 31, 58, 0.96), rgba(9, 15, 29, 0.98));
border: 2px solid var(--border-subtle);
background: linear-gradient(180deg, var(--surface), var(--surface));
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}
@@ -337,7 +337,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #f4f8ff;
color: var(--text-primary);
font-size: clamp(20px, 5.8vw, 28px);
font-weight: 700;
letter-spacing: 0.02em;
@@ -345,7 +345,7 @@
.call-kind {
color: #ffffff;
color: var(--text-primary);
font-size: clamp(27px, 8vw, 40px);
font-weight: 800;
letter-spacing: 0.05em;
@@ -355,7 +355,7 @@
.call-hero-status {
max-width: 88vw;
color: rgba(211, 223, 246, 0.9);
color: var(--text-primary);
font-size: 14px;
line-height: 1.35;
}
@@ -370,8 +370,8 @@
aspect-ratio: 3 / 4;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(176, 205, 255, 0.38);
background: rgba(7, 12, 22, 0.94);
border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
background: var(--surface);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
cursor: grab;
touch-action: none;
@@ -436,7 +436,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -447,7 +447,7 @@
.call-accept-btn:hover {
color: #ffffff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -457,12 +457,12 @@
.call-accept-btn:active {
color: #ffffff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
border: 0;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
@@ -470,7 +470,7 @@
.call-accept-btn:disabled {
opacity: 1;
color: rgba(255, 255, 255, 0.42);
color: var(--text-secondary);
background: transparent;
border: 0;
box-shadow: none;
@@ -481,7 +481,7 @@
.call-accept-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}