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/settings.css
+91 -80
View File
@@ -8,7 +8,7 @@
.settings-developer-panel {
margin-top: 2px;
padding-top: 8px;
border-top: 1px solid rgba(132, 157, 206, 0.22);
border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
@@ -20,13 +20,13 @@
.settings-dev-avatar-meta {
min-height: 18px;
font-size: 13px;
color: #d9e7ff;
color: var(--text-primary);
}
.settings-dev-avatar-error {
min-height: 18px;
color: #f0a9b3;
color: var(--danger);
}
@@ -44,8 +44,8 @@
.language-choice-card {
padding: 16px;
background: rgba(38, 43, 52, 0.74);
border: 1px solid rgba(255, 255, 255, 0.10);
background: var(--surface);
border: 1px solid var(--border-subtle);
}
@@ -68,11 +68,11 @@
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
border: 1px solid rgba(210, 222, 241, 0.16);
border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
border-radius: 16px;
background: rgba(255, 255, 255, 0.035);
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -82,31 +82,31 @@
}
.language-choice-option:hover {
border-color: rgba(210, 222, 241, 0.16);
background: rgba(255, 255, 255, 0.035);
border-color: color-mix(in srgb, var(--accent) 16%, transparent);
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
transform: none;
filter: brightness(1.12);
}
.language-choice-option: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);
}
.language-choice-option:focus-visible {
border: 1px solid rgba(210, 222, 241, 0.16);
background: rgba(255, 255, 255, 0.035);
border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
box-shadow: none;
color: #ffffff;
outline: 2px solid rgba(255, 255, 255, 0.62);
color: var(--text-primary);
outline: 2px solid var(--border-control);
outline-offset: 2px;
transform: none;
}
@@ -114,15 +114,15 @@
.language-choice-option.is-selected,
.language-choice-option.is-selected:hover,
.language-choice-option.is-selected:focus-visible {
border: 1px solid rgba(92, 190, 255, 0.62);
background: rgba(39, 141, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10);
border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
}
.language-choice-option.is-selected:active {
border: 1px solid rgba(92, 190, 255, 0.62);
background: rgba(39, 141, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10);
border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
@@ -135,47 +135,51 @@
.language-choice-code {
color: rgba(255,255,255,.5);
color: var(--text-secondary);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
}
/* ===== Вложенные настройки: тот же рамочный язык действий ===== */
.screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab) {
border: 1px solid rgba(183, 203, 235, 0.28);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255,255,255,.055), transparent 30%),
rgba(8, 19, 42, .58);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 5px 16px rgba(0,0,0,.18);
color: #ffffff;
.screen-content.settings-bordered-actions :is(.secondary-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .profile-relative-suggest-item) {
min-height: var(--control-height);
padding-inline: 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: none;
color: var(--text-primary);
font-size: var(--text-md);
font-weight: var(--weight-medium);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding-inline: 14px;
transform: none;
}
.screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab):hover {
border-color: rgba(213, 225, 247, 0.42);
background:
linear-gradient(180deg, rgba(255,255,255,.075), transparent 30%),
rgba(10, 24, 52, .68);
color: #ffffff;
transform: none;
filter: brightness(1.12);
.screen-content.settings-bordered-actions .primary-btn {
min-height: var(--control-height);
border: 0;
border-radius: var(--radius-md);
background: var(--accent);
color: var(--on-accent);
box-shadow: none;
font-size: var(--text-md);
font-weight: var(--weight-medium);
}
.screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .session-item, .profile-relative-suggest-item, .help-fab):active {
transform: none;
filter: brightness(0.9);
.screen-content.settings-bordered-actions .destructive-btn {
font-size: var(--text-md);
font-weight: var(--weight-medium);
min-height: var(--control-height);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--danger);
box-shadow: none;
}
.screen-content.settings-bordered-actions :is(.secondary-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn, .profile-relative-suggest-item, .destructive-btn):hover { background: var(--surface-selected); filter: none; }
.screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn):active { transform: scale(0.98); filter: none; }
.screen-content.settings-bordered-actions :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .settings-bordered-btn):disabled { color: var(--text-secondary); background: var(--surface-selected); border-color: transparent; }
/* Language selector: actual two-position switch with explicit confirmation. */
@@ -186,9 +190,9 @@
gap: 0;
padding: 4px;
min-height: 58px;
border: 1px solid rgba(190, 210, 238, .18);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: 18px;
background: rgba(12, 22, 40, .72);
background: var(--surface);
overflow: hidden;
}
@@ -199,10 +203,10 @@
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
border: 1px solid rgba(99, 190, 255, .52);
border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
border-radius: 14px;
background: linear-gradient(180deg, rgba(76, 166, 255, .28), rgba(30, 105, 204, .20));
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(63,160,255,.14);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 14%, transparent);
transition: transform 180ms ease;
}
@@ -217,7 +221,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #fff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -231,7 +235,7 @@
}
.language-segment:hover {
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -239,18 +243,18 @@
}
.language-segment:active {
color: #fff;
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);
}
.language-segment:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -297,7 +301,7 @@
}
.settings-shine-logo-button:focus-visible {
outline: 2px solid rgba(167, 205, 255, 0.7);
outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
outline-offset: 4px;
border-radius: 22px;
}
@@ -308,7 +312,7 @@
max-height: 126px;
object-fit: contain;
pointer-events: none;
filter: drop-shadow(0 12px 30px rgba(73, 126, 216, 0.16));
filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--accent) 16%, transparent));
}
.settings-feature-toggle-row {
@@ -330,28 +334,28 @@
.settings-feature-toggle-title {
font-size: 15px;
font-weight: 700;
color: rgba(246, 250, 255, 0.96);
color: var(--text-primary);
}
.settings-feature-toggle-hint {
font-size: 12px;
line-height: 1.4;
color: rgba(194, 210, 236, 0.68);
color: var(--text-secondary);
}
.settings-feature-switch {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 48px;
height: 28px;
margin: 0;
padding: 2px;
border: 1px solid rgba(189, 207, 238, 0.26);
border-radius: 999px;
background: rgba(8, 17, 34, 0.72);
box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.28);
border: 1px solid var(--border-control);
border-radius: var(--radius-pill);
background: var(--surface-selected);
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.settings-feature-switch::after {
@@ -360,23 +364,30 @@
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(235, 243, 255, 0.9);
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
transition: transform 150ms ease;
background: var(--text-secondary);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
}
.settings-feature-switch:checked {
border-color: rgba(86, 174, 255, 0.6);
background: rgba(38, 132, 237, 0.48);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 16px rgba(58, 148, 255, 0.12);
border-color: var(--accent);
background: var(--accent);
}
.settings-feature-switch:checked::after {
transform: translateX(20px);
background: #ffffff;
background: var(--on-accent);
}
.settings-feature-switch:focus-visible {
outline: 2px solid rgba(190, 220, 255, 0.82);
outline: 2px solid color-mix(in srgb, var(--accent) 82%, transparent);
outline-offset: 3px;
}
.settings-shine-logo-button { justify-self: center; }
.settings-shine-logo { width: 48px; height: 48px; max-height: 48px; object-fit: contain; }
.settings-shine-logo-button { min-height: 0; padding: 0; margin: 0 auto; }
.settings-sections { gap: var(--space-4); }
.settings-theme-card { gap: var(--space-2); }
.settings-intro { padding-top: var(--space-3); }
.settings-intro > p { margin: 0; padding-inline: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); }