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/features/messages.css
+85 -52
View File
@@ -11,9 +11,9 @@
margin: 0 6px;
padding: 14px;
border-radius: 24px;
background: rgba(7, 10, 18, 0.88);
border: 1px solid rgba(140, 99, 255, 0.24);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
background: var(--surface);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-sm);
}
@@ -25,7 +25,7 @@
.contact-search-results-title {
font-size: 14px;
font-weight: 700;
color: rgba(252, 234, 192, 0.92);
color: var(--text-secondary);
text-align: center;
}
@@ -44,7 +44,7 @@
.dm-screen {
position: relative;
isolation: isolate;
color: rgba(255, 255, 255, 0.9);
color: var(--text-primary);
min-height: 100%;
align-content: start;
}
@@ -74,11 +74,11 @@
min-height: 74px;
padding: 10px 12px 10px 10px;
border-radius: 26px;
background: rgba(7, 10, 18, 0.88);
background: var(--surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(140, 99, 255, 0.32); /* оконтовка = цвет линии связи; default = violet (контакт) */
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
border: 1px solid color-mix(in srgb, var(--rel-contact) 32%, transparent); /* оконтовка = цвет линии связи; default = violet (контакт) */
box-shadow: none;
cursor: pointer;
}
@@ -86,7 +86,7 @@
.dm-card--family { border-color: transparent; }
/* линия связи: gold (семья) */
.dm-card--shining { border-color: rgba(104, 216, 255, 0.45); }
.dm-card--shining { border-color: color-mix(in srgb, var(--rel-shining) 45%, transparent); }
/* линия связи: cyan (сияющий) */
.dm-screen .list-item .avatar {
@@ -103,7 +103,7 @@
.dm-screen .meta-muted {
color: rgba(255, 255, 255, 0.5);
color: var(--text-secondary);
}
@@ -127,7 +127,7 @@
height: 36px;
object-fit: contain;
display: block;
filter: drop-shadow(0 0 7px rgba(71, 196, 255, 0.38));
filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rel-shining) 38%, transparent));
}
@@ -138,14 +138,14 @@
/* Центр шапки — светящийся бренд «Shine» */
@keyframes dm-shine-pulse {
0%, 100% { text-shadow: 0 0 5px rgba(240, 184, 46, 0.42), 0 0 12px rgba(240, 184, 46, 0.26), 0 0 22px rgba(240, 184, 46, 0.12); }
50% { text-shadow: 0 0 9px rgba(240, 184, 46, 0.68), 0 0 20px rgba(240, 184, 46, 0.46), 0 0 34px rgba(240, 184, 46, 0.26); }
0%, 100% { text-shadow: 0 0 5px color-mix(in srgb, var(--rel-family) 42%, transparent), 0 0 12px color-mix(in srgb, var(--rel-family) 26%, transparent); }
50% { text-shadow: 0 0 9px color-mix(in srgb, var(--rel-family) 68%, transparent), 0 0 20px color-mix(in srgb, var(--rel-family) 46%, transparent); }
}
.dm-divider { position: relative; height: 18px; margin: 6px 14px 8px; }
.dm-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 184, 46, 0.5), transparent); }
.dm-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rel-family) 50%, transparent), transparent); }
.dm-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: var(--rel-family); box-shadow: 0 0 8px var(--rel-family-glow); }
@@ -163,7 +163,7 @@
.dm-dialog-card .dm-row-title { font-size: 16px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-dialog-card .dm-row-last-message { font-size: 14px; color: rgba(244, 246, 255, 0.48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-dialog-card .dm-row-last-message { font-size: 14px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-contact-note {
display: inline-flex;
@@ -171,9 +171,9 @@
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(244, 246, 255, 0.62);
border: 1px solid var(--border-subtle);
background: var(--surface-selected);
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
@@ -201,13 +201,13 @@
второй похожий эффект. Радиальный ореол повторяет стопы узла графа; SVG-фильтр #fg-shine-glow есть только на
стр. «Связи», поэтому здесь мягкий CSS-blur. Мини-сфера компактная — не размывает текст/соседей. */
.dm-av--shining {
border: 1px solid rgba(150, 240, 255, 0.62);
border: 1px solid color-mix(in srgb, var(--rel-shining) 62%, transparent);
animation: fg-shine-glow 3.6s ease-in-out infinite;
}
.dm-av--shining::before {
content: ""; position: absolute; inset: -12px; border-radius: 50%; z-index: -1; pointer-events: none;
background: radial-gradient(circle, rgba(140, 240, 255, 0.5) 0%, rgba(130, 235, 255, 0.18) 46%, rgba(130, 235, 255, 0) 72%);
background: radial-gradient(circle, color-mix(in srgb, var(--rel-shining) 50%, transparent) 0%, color-mix(in srgb, var(--rel-shining) 18%, transparent) 46%, transparent 72%);
filter: blur(3.4px); /* = stdDeviation 3.4 SVG-фильтра #fg-shine-glow графа; геометрия inset −12px тоже как у узла (58px↔56px, scale≈1) */
animation: fg-shine-halo 3.6s ease-in-out infinite;
}
@@ -243,7 +243,7 @@
.dm-row-time {
font-size: 12px;
font-weight: 600;
color: rgba(244, 246, 255, 0.44);
color: var(--text-secondary);
}
.dm-row-time--empty {
@@ -257,10 +257,10 @@
min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: var(--text);
background: rgba(140, 99, 255, 0.16); border: 1px solid rgba(140, 99, 255, 0.55);
color: var(--on-accent); background: var(--accent); border: 0;
}
.dm-chevron { display: inline-flex; color: rgba(244, 246, 255, 0.32); }
.dm-chevron { display: inline-flex; color: var(--text-secondary); }
.dm-chevron svg { width: 16px; height: 16px; }
@@ -281,7 +281,7 @@
.dm-via {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 24px; height: 24px; padding: 0; border-radius: 8px; cursor: pointer;
color: var(--rel-link); border: 1px solid rgba(25, 229, 138, 0.5); background: rgba(25, 229, 138, 0.08);
color: var(--rel-link); border: 1px solid color-mix(in srgb, var(--rel-link) 50%, transparent); background: color-mix(in srgb, var(--rel-link) 8%, transparent);
}
.dm-via-icon { display: inline-flex; }
@@ -292,21 +292,21 @@
.dm-via-path {
display: none; position: absolute; left: 14px; right: 14px; top: 46px; z-index: 6;
flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 12px;
background: rgba(8, 12, 20, 0.97); border: 1px solid rgba(25, 229, 138, 0.35);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
background: var(--surface); border: 1px solid color-mix(in srgb, var(--rel-link) 35%, transparent);
box-shadow: var(--shadow);
}
.dm-via-path.is-open { display: flex; }
.dm-via-node {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 4px; border-radius: 11px;
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--surface); border: 1px solid var(--border-subtle);
color: var(--text); font-size: 12px; cursor: default;
}
button.dm-via-node { cursor: pointer; }
button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
button.dm-via-node:hover { border-color: color-mix(in srgb, var(--rel-link) 50%, transparent); }
.dm-via-node-ava { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
@@ -314,11 +314,11 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
.dm-via-node-ava .avatar-fallback { font-size: 9px; font-weight: 700; }
.dm-via-me { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(150deg, #F0B82E, #D49F22); color: #1a1205; font-size: 10px; font-weight: 700; }
.dm-via-me { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rel-family); color: var(--background); font-size: 10px; font-weight: 700; }
.dm-via-node-name { white-space: nowrap; }
.dm-via-arrow { font-size: 12px; color: rgba(25, 229, 138, 0.8); }
.dm-via-arrow { font-size: 12px; color: var(--rel-link); }
.screen-content:has(> .dm-screen) {
@@ -367,9 +367,9 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
padding: 7px 14px;
border-radius: 999px;
border: 1px solid transparent;
background: rgba(9, 15, 26, 0.92);
color: rgba(245, 226, 179, 0.96);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
background: var(--surface);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
@@ -388,7 +388,7 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
border-radius: 50%;
border: 2px solid transparent;
border-top-color: transparent;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.18);
box-shadow: none;
animation: dm-history-loader-spin 0.85s linear infinite;
}
@@ -415,10 +415,10 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
.dm-screen .input {
background: rgba(255, 255, 255, 0.04);
background: var(--surface);
border: 1px solid transparent;
border-radius: 14px;
color: rgba(255, 255, 255, 0.92);
color: var(--text-primary);
}
@@ -436,9 +436,9 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(17, 26, 46, 0.62);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #d9e6ff;
background: var(--surface);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-size: 14px;
}
@@ -456,11 +456,7 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
inset: -12px -12px 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(260px 260px at 86% 10%, rgba(147, 112, 219, 0.25), transparent 72%),
radial-gradient(220px 220px at 14% 84%, rgba(147, 112, 219, 0.2), transparent 72%),
radial-gradient(220px 220px at 76% 68%, rgba(212, 175, 55, 0.16), transparent 75%),
radial-gradient(190px 190px at 26% 20%, rgba(212, 175, 55, 0.12), transparent 74%),
#05070A;
background: none;
animation: dm-orbs-drift 16s ease-in-out infinite alternate;
content: none;
}
@@ -470,12 +466,12 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
margin: 0 20px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(18, 24, 38, 0.42);
background: var(--surface);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid transparent;
color: rgba(225, 233, 248, 0.86);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
color: var(--text-secondary);
box-shadow: none;
display: flex;
justify-content: center;
align-items: center;
@@ -605,8 +601,7 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
min-width: 18px;
flex: 0 0 18px;
object-fit: contain;
color: #65b7ff;
filter: drop-shadow(0 0 5px rgba(39, 141, 255, 0.28));
color: var(--accent);
}
@@ -652,8 +647,8 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
/* «Личные»: широкие, низкие и более плотные плитки. */
.dm-list-screen .dm-list {
width: calc(100% + 16px);
margin-inline: -8px;
width: 100%;
margin-inline: 0;
gap: 4px;
}
@@ -661,7 +656,7 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
.dm-list-screen .dm-dialog-card {
border: 0;
box-shadow: none;
background: rgba(7, 10, 18, 0.42);
background: var(--surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
grid-template-columns: 50px minmax(0, 1fr) auto;
@@ -736,3 +731,41 @@ button.dm-via-node:hover { border-color: rgba(25, 229, 138, 0.5); }
grid-row: 2;
align-self: center;
}
.dm-list { gap: 0; margin-inline: 0; padding: 0; padding-bottom: calc(86px + 16px); }
.dm-list-screen .dm-dialog-card,
.dm-dialog-card {
min-height: 68px;
margin: 0;
padding: 10px 0;
gap: 12px;
grid-template-columns: 48px minmax(0, 1fr) auto;
border: 0;
border-radius: 0;
background: linear-gradient(var(--border-subtle), var(--border-subtle)) right bottom / calc(100% - 60px) 1px no-repeat;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: background-color var(--duration-fast) ease;
}
.dm-dialog-card:hover { background-color: color-mix(in srgb, var(--surface) 66%, transparent); }
.dm-dialog-card:active { background-color: var(--surface-selected); }
.dm-dialog-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.dm-card--family .dm-av .avatar { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--rel-family); }
.dm-card--shining .dm-av .avatar { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--rel-shining); }
.dm-dialog-card .dm-row-title { font-size: var(--text-md); font-weight: var(--weight-bold); }
.dm-dialog-card .dm-row-last-message { font-size: var(--text-sm); }
.dm-row-time { font-size: var(--text-xs); font-weight: 400; color: var(--text-secondary); }
.dm-contact-note { flex-shrink: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--rel-contact); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.dm-contact-note--close_friend { color: var(--rel-family); }
.dm-filter-row { margin-bottom: var(--space-1); }
.dm-row-meta-col { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.dm-row-meta-line { display: flex; align-items: center; gap: 0; }
.dm-unread-badge { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--on-accent); background: var(--accent); border: 0; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.dm-list-screen > .card.meta-muted, .dm-list > .card.meta-muted { margin: var(--space-6) 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: center; color: var(--text-secondary); }
.dm-divider { height: auto; margin: 0; padding: var(--space-4) 0 var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-bold); }
.dm-divider::before, .dm-divider::after { content: none; }
.contact-search-results { gap: 0; margin-top: var(--space-3); }
.contact-search-results .contact-search-results-title { margin: 0 0 var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); }
.dm-filter-row { gap: 6px; }
.dm-filter-row .chip { padding: 0 12px; }
.dm-row-last-message.is-encrypted { font-style: italic; }