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/network.css
+78 -72
View File
@@ -15,9 +15,9 @@
.network-board {
position: relative;
height: 290px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: radial-gradient(circle at center, rgba(83, 216, 251, 0.08), rgba(255, 255, 255, 0.01));
background: radial-gradient(circle at center, color-mix(in srgb, var(--rel-shining) 8%, transparent), color-mix(in srgb, var(--text-primary) 1%, transparent));
overflow: hidden;
}
@@ -71,7 +71,7 @@
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
color: #bfd2ff;
color: var(--text-primary);
}
@@ -88,13 +88,13 @@
height: 2px;
display: inline-block;
border-radius: 2px;
background: rgba(120, 179, 255, 0.95);
background: color-mix(in srgb, var(--rel-shining) 95%, transparent);
position: relative;
}
.legend-line.relative {
background: rgba(255, 159, 94, 0.95);
background: color-mix(in srgb, var(--rel-family) 95%, transparent);
}
@@ -105,7 +105,7 @@
top: -3px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid rgba(120, 179, 255, 0.95);
border-left: 6px solid color-mix(in srgb, var(--rel-shining) 95%, transparent);
}
@@ -124,12 +124,12 @@
.network-link.is-friend {
stroke: rgba(120, 179, 255, 0.88);
stroke: var(--rel-shining);
}
.network-link.is-relative {
stroke: rgba(255, 159, 94, 0.9);
stroke: var(--rel-family);
}
@@ -142,8 +142,8 @@
display: grid;
place-items: center;
font-weight: 700;
background: #2b3f66;
border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--surface);
border: 1px solid var(--border-subtle);
box-shadow: 0 8px 16px rgba(4, 8, 15, 0.35);
}
@@ -158,9 +158,9 @@
padding: 0 6px;
border-radius: 999px;
border: 1px solid transparent;
background: linear-gradient(180deg, rgba(255, 219, 145, 0.98), rgba(232, 165, 64, 0.98));
color: #3a2003;
font-size: 10px;
background: linear-gradient(180deg, var(--rel-family), var(--rel-family));
color: var(--rel-family);
font-size: 11px;
line-height: 16px;
font-weight: 800;
letter-spacing: 0.3px;
@@ -175,33 +175,33 @@
position: absolute;
inset: -14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(130, 235, 255, 0.62) 0%, rgba(130, 235, 255, 0.28) 42%, rgba(130, 235, 255, 0) 76%);
background: radial-gradient(circle, color-mix(in srgb, var(--rel-shining) 62%, transparent) 0%, color-mix(in srgb, var(--rel-shining) 28%, transparent) 42%, color-mix(in srgb, var(--rel-shining) 0%, transparent) 76%);
filter: blur(2px);
z-index: -1;
}
.node.is-shine .node-dot {
box-shadow: 0 0 0 2px rgba(143, 231, 255, 0.5), 0 0 28px rgba(102, 220, 255, 0.58), 0 8px 16px rgba(4, 8, 15, 0.35);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--rel-shining) 50%, transparent), 0 0 28px color-mix(in srgb, var(--rel-shining) 58%, transparent), 0 8px 16px rgba(4, 8, 15, 0.35);
}
.node.is-friend .node-dot {
background: linear-gradient(165deg, #2f4f80, #2a3f62);
background: linear-gradient(165deg, var(--rel-contact), var(--surface));
}
.node.is-relative .node-dot {
background: linear-gradient(165deg, #785038, #5f3e2c);
border-color: rgba(255, 194, 143, 0.55);
background: linear-gradient(165deg, var(--rel-family), var(--surface));
border-color: color-mix(in srgb, var(--rel-family) 55%, transparent);
}
.node.center .node-dot {
width: 60px;
height: 60px;
background: linear-gradient(130deg, #3a5f8e, #3dc4df);
color: #061119;
background: linear-gradient(130deg, var(--rel-shining), var(--rel-shining));
color: var(--on-accent);
}
@@ -209,8 +209,8 @@
display: grid;
gap: 1px;
margin-top: 1px;
font-size: 10px;
color: #d6e2ff;
font-size: 11px;
color: var(--text-primary);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
line-height: 1.12;
}
@@ -224,7 +224,7 @@
.node-name {
display: grid;
gap: 1px;
color: #f2f6ff;
color: var(--text-primary);
}
@@ -238,8 +238,8 @@
.node-login {
display: block;
color: #c8dafd;
font-size: 10px;
color: var(--text-primary);
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -248,8 +248,8 @@
.node-relation {
display: block;
color: #ffd5b3;
font-size: 10px;
color: var(--text-primary);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
@@ -264,15 +264,15 @@
.network-search-candidate.is-selected {
border-color: rgba(132, 209, 255, 0.78);
background: rgba(65, 118, 191, 0.24);
border-color: color-mix(in srgb, var(--rel-shining) 78%, transparent);
background: color-mix(in srgb, var(--rel-shining) 24%, transparent);
}
.node:focus-visible .node-dot,
.node:hover .node-dot {
border-color: rgba(166, 218, 255, 0.92);
box-shadow: 0 0 0 3px rgba(77, 160, 255, 0.2), 0 8px 16px rgba(4, 8, 15, 0.35);
border-color: color-mix(in srgb, var(--rel-shining) 92%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rel-shining) 20%, transparent), 0 8px 16px rgba(4, 8, 15, 0.35);
}
@@ -319,19 +319,6 @@
/* Одинаковая фактическая высота и типографика самих верхних чипов. */
.app-top-tabs .fg-filter-chip {
min-height: var(--app-primary-tab-min-height);
height: var(--app-primary-tab-min-height);
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-main);
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* «Связи»: фильтры остаются ниже интерактивной части общего TopBar. */
@@ -355,42 +342,61 @@
background:
linear-gradient(
to right,
rgba(5, 7, 10, 0.96) 0%,
rgba(5, 7, 10, 0.72) 4%,
rgba(5, 7, 10, 0.42) 8%,
rgba(5, 7, 10, 0.18) 12%,
rgba(5, 7, 10, 0.06) 15%,
rgba(5, 7, 10, 0) 18%
var(--background) 0%,
var(--background) 4%,
var(--background) 8%,
color-mix(in srgb, var(--background) 18%, transparent) 12%,
color-mix(in srgb, var(--background) 6%, transparent) 15%,
color-mix(in srgb, var(--background) 0%, transparent) 18%
) left center / 50% 100% no-repeat,
linear-gradient(
to left,
rgba(5, 7, 10, 0.96) 0%,
rgba(5, 7, 10, 0.72) 4%,
rgba(5, 7, 10, 0.42) 8%,
rgba(5, 7, 10, 0.18) 12%,
rgba(5, 7, 10, 0.06) 15%,
rgba(5, 7, 10, 0) 18%
var(--background) 0%,
var(--background) 4%,
var(--background) 8%,
color-mix(in srgb, var(--background) 18%, transparent) 12%,
color-mix(in srgb, var(--background) 6%, transparent) 15%,
color-mix(in srgb, var(--background) 0%, transparent) 18%
) right center / 50% 100% no-repeat;
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.96) 0%,
rgba(0, 0, 0, 0.76) 18%,
rgba(0, 0, 0, 0.46) 34%,
rgba(0, 0, 0, 0.18) 47%,
rgba(0, 0, 0, 0.28) 58%,
rgba(0, 0, 0, 0.54) 72%,
rgba(0, 0, 0, 0.82) 88%,
rgba(0, 0, 0, 0.96) 100%
var(--background) 0%,
var(--background) 18%,
var(--background) 34%,
color-mix(in srgb, var(--background) 18%, transparent) 47%,
color-mix(in srgb, var(--background) 28%, transparent) 58%,
var(--background) 72%,
var(--background) 88%,
var(--background) 100%
);
mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.96) 0%,
rgba(0, 0, 0, 0.76) 18%,
rgba(0, 0, 0, 0.46) 34%,
rgba(0, 0, 0, 0.18) 47%,
rgba(0, 0, 0, 0.28) 58%,
rgba(0, 0, 0, 0.54) 72%,
rgba(0, 0, 0, 0.82) 88%,
rgba(0, 0, 0, 0.96) 100%
var(--background) 0%,
var(--background) 18%,
var(--background) 34%,
color-mix(in srgb, var(--background) 18%, transparent) 47%,
color-mix(in srgb, var(--background) 28%, transparent) 58%,
var(--background) 72%,
var(--background) 88%,
var(--background) 100%
);
}
.network-screen { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--rel-shining) 7%, transparent), transparent 70%); }
.network-board--full { border: 0; background: transparent; }
.network-screen .fg-stage { background: transparent; }
.network-stage > .fg-filter-bar.app-top-tabs {
left: 0;
right: 0;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
padding-inline: var(--page-gutter);
scrollbar-width: none;
pointer-events: auto;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.network-stage > .fg-filter-bar.app-top-tabs::-webkit-scrollbar { display: none; }