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/channel.css
+74 -192
View File
@@ -16,180 +16,71 @@
.entrypoint-history-item p { white-space: pre-wrap; overflow-wrap: anywhere; }
.entrypoint-history-item span { font-size: .75rem; color: var(--text-secondary); }
.channels-screen--channel-about {
padding-bottom: calc(22px + env(safe-area-inset-bottom));
padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.channel-about-card {
padding: 0;
overflow: hidden;
}
.channel-about-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.channel-about-content { gap: 16px; }
.channel-about-content {
gap: 0;
}
.channel-about-hero { display: grid; justify-items: center; gap: 4px; padding: 8px 16px 0; text-align: center; }
.channel-about-avatar-slot { margin-bottom: 8px; }
.channel-about-avatar.avatar { width: 88px; height: 88px; min-width: 88px; min-height: 88px; font-size: 32px; }
.channel-about-title { margin: 0; color: var(--text-primary); font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; overflow-wrap: anywhere; }
.channel-about-subline { color: var(--text-secondary); font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.channel-about-hero {
.channel-about-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.channel-about-tile {
min-height: 64px;
padding: 10px 4px 8px;
display: grid;
justify-items: center;
gap: 6px;
padding: 26px 20px 22px;
text-align: center;
}
.channel-about-avatar-slot {
margin-bottom: 8px;
}
.channel-about-avatar.channel-profile-avatar {
box-shadow: none;
}
.channel-about-title {
margin: 0;
color: var(--text-secondary);
font-size: clamp(24px, 7vw, 32px);
line-height: 1.12;
font-weight: 760;
overflow-wrap: anywhere;
}
.channel-about-technical {
color: rgba(196, 210, 238, 0.72);
font-size: 14px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.channel-about-subscribers {
color: rgba(170, 190, 226, 0.68);
font-size: 14px;
line-height: 1.35;
}
.channel-about-section {
display: grid;
gap: 10px;
padding: 20px;
border-top: 1px solid var(--text-secondary);
}
.channel-about-section h3 {
margin: 0;
color: rgba(255, 218, 135, 0.92);
font-size: 14px;
font-weight: 700;
}
.channel-about-description {
margin: 0;
color: rgba(235, 241, 255, 0.92);
font-size: 16px;
line-height: 1.58;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.channel-about-owner-link {
display: grid;
gap: 3px;
justify-items: start;
width: 100%;
padding: 0;
border: 0;
align-content: center;
gap: 4px;
border: 1px solid var(--border-subtle);
border-radius: 14px;
color: var(--accent);
background: var(--surface);
color: inherit;
font: inherit;
font-size: .75rem;
line-height: 1rem;
cursor: pointer;
transition: background-color 160ms ease;
}
.channel-about-tile svg { width: 22px; height: 22px; }
.channel-about-tile span { color: var(--text-primary); }
.channel-about-tile:hover, .channel-about-tile:active { background: var(--surface-selected); }
.channel-about-tile.is-active { background: var(--surface-selected); }
.channel-about-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.channel-about-tile:disabled { opacity: .6; cursor: wait; }
.channel-about-list { display: grid; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface); overflow: hidden; }
.channel-about-row {
width: 100%;
min-height: 56px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 12px;
border: 0;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.channel-about-owner-link strong {
color: var(--text-secondary);
font-size: 16px;
line-height: 1.3;
}
.channel-about-owner-link span {
color: rgba(176, 198, 234, 0.72);
font-size: 13px;
line-height: 1.3;
}
.channel-about-owner-link:hover strong,
.channel-about-owner-link:focus-visible strong {
color: var(--text-primary);
}
.channel-about-owner-link:focus-visible {
outline: 2px solid rgba(244, 220, 166, 0.52);
outline-offset: 5px;
border-radius: 8px;
}
.channel-about-support-btn {
width: 100%;
min-height: 44px;
margin-top: 2px;
}
.channel-about-link-box {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
min-height: 48px;
padding: 10px 10px 10px 12px;
border: 1px solid var(--border-subtle);
border-radius: 12px;
background: var(--surface);
}
.channel-about-link-box a,
.channel-about-link-box span {
color: rgba(169, 215, 255, 0.95);
font-size: 13px;
line-height: 1.45;
overflow-wrap: anywhere;
word-break: break-word;
}
.channel-about-copy-btn {
width: 38px;
min-width: 38px;
height: 38px;
min-height: 38px;
padding: 0;
display: inline-grid;
place-items: center;
font-size: 19px;
}
.channel-about-open-btn,
.channel-about-subscription-btn {
margin: 18px 20px 0;
min-height: 48px;
}
.channel-about-subscription-btn {
margin-top: 12px;
margin-bottom: 20px;
}
.channel-about-subscription-btn.is-unsubscribe {
border: 1px solid var(--border-subtle);
background: var(--surface);
color: var(--text-primary);
}
.channel-about-subscription-btn.is-unsubscribe:hover,
.channel-about-subscription-btn.is-unsubscribe:focus-visible {
background: var(--surface);
}
.channel-about-open-btn:last-child {
margin-bottom: 20px;
}
.channel-about-row--static { display: grid; gap: 4px; cursor: default; }
.channel-about-row:not(.channel-about-row--static):hover { background: var(--surface-selected); }
.channel-about-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.channel-about-row-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.channel-about-row-main strong { font-size: .9375rem; line-height: 1.375rem; font-weight: 600; overflow-wrap: anywhere; }
.channel-about-row-label { color: var(--text-secondary); font-size: .75rem; line-height: 1.125rem; }
.channel-about-row-chevron { color: var(--text-secondary); display: inline-flex; }
.channel-about-row-chevron svg { width: 18px; height: 18px; }
.channel-about-owner-avatar .avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 16px; }
.channel-about-description { margin: 0; font-size: .9375rem; line-height: 1.375rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.channel-about-link { color: var(--accent); font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.channel-about-technical { padding: 10px 14px; color: var(--text-secondary); font-size: .75rem; line-height: 1.125rem; overflow-wrap: anywhere; }
/* ===== Channel unsubscribe confirmation ===== */
#channel-unsubscribe-confirm-modal {
@@ -281,7 +172,7 @@
padding: 8px 10px;
border-radius: 10px;
background: var(--surface);
color: rgba(186, 215, 255, 0.8);
color: var(--text-secondary);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11px;
line-height: 1.45;
@@ -298,7 +189,7 @@
}
.channel-support-balance-row strong {
color: var(--text-secondary);
color: var(--text-primary);
text-align: right;
}
@@ -315,18 +206,18 @@
}
.channel-support-amount-row span {
color: rgba(232, 239, 255, 0.82);
color: var(--text-primary);
font-weight: 700;
}
.channel-support-status {
min-height: 18px;
margin: 2px 0 0;
color: rgba(192, 207, 236, 0.76);
color: var(--text-secondary);
}
.channel-support-status.is-error {
color: var(--text-primary);
color: var(--danger);
}
.channel-support-result {
@@ -348,7 +239,7 @@
.channel-support-result span,
.channel-support-result code {
color: rgba(220, 236, 255, 0.82);
color: var(--text-secondary);
font-size: 12px;
overflow-wrap: anywhere;
word-break: break-all;
@@ -360,15 +251,6 @@
}
@media (max-width: 420px) {
.channel-about-section {
padding-inline: 16px;
}
.channel-about-open-btn,
.channel-about-subscription-btn {
margin-inline: 16px;
}
.channel-support-balance-row {
grid-template-columns: 1fr auto;
}
@@ -404,20 +286,20 @@
.channel-donate-hero h2 {
margin: 0 0 4px;
color: var(--text-secondary);
font-size: clamp(24px, 7vw, 31px);
line-height: 1.12;
font-weight: 760;
color: var(--text-primary);
font-size: 1.5rem;
line-height: 1.875rem;
font-weight: 600;
}
.channel-donate-hero strong {
color: rgba(255, 230, 169, 0.94);
color: var(--text-primary);
font-size: 17px;
overflow-wrap: anywhere;
}
.channel-donate-hero span {
color: rgba(176, 198, 234, 0.72);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.4;
overflow-wrap: anywhere;
@@ -427,7 +309,7 @@
display: grid;
gap: 9px;
padding: 18px 20px;
border-top: 1px solid var(--text-secondary);
border-top: 1px solid var(--border-subtle);
}
.channel-donate-address {
@@ -435,7 +317,7 @@
padding: 9px 10px;
border-radius: 10px;
background: var(--surface);
color: rgba(186, 215, 255, 0.82);
color: var(--text-secondary);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11px;
line-height: 1.45;
@@ -453,7 +335,7 @@
}
.channel-donate-balance-row strong {
color: var(--text-secondary);
color: var(--text-primary);
text-align: right;
}
@@ -470,18 +352,18 @@
}
.channel-donate-amount-row span {
color: rgba(232, 239, 255, 0.82);
color: var(--text-primary);
font-weight: 700;
}
.channel-donate-status {
min-height: 18px;
margin: 14px 20px 0;
color: rgba(192, 207, 236, 0.76);
color: var(--text-secondary);
}
.channel-donate-status.is-error {
color: var(--text-primary);
color: var(--danger);
}
.channel-donate-result {
@@ -504,7 +386,7 @@
.channel-donate-result span,
.channel-donate-result code {
color: rgba(220, 236, 255, 0.82);
color: var(--text-secondary);
font-size: 12px;
overflow-wrap: anywhere;
word-break: break-all;
shine-UI/styles/features/channels-common.css
+57 -3
View File
@@ -14,8 +14,10 @@
}
.channel-message-head-row { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.channel-message-author-tile { display: flex; flex: 1; gap: 12px; align-items: center; min-width: 0; min-height: 44px; padding: 0; text-align: left; cursor: pointer; }
.channel-message-author { display: grid; min-width: 0; gap: 2px; }
.channel-message-avatar.avatar { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
.channel-message-author { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.channel-message-avatar.avatar { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 14px; }
.channel-message-card .author-line-num { display: none; }
.channel-message-author .channel-message-time::before { content: '·'; margin-right: 6px; }
.channel-message-title, .author-line-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.author-line-login { font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.author-line-num, .channel-message-time { font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); }
@@ -28,6 +30,7 @@
.channel-action-icon { display: inline-flex; font-size: 22px; line-height: 1; }
.channel-action-icon svg { width: 22px; height: 22px; }
.channel-action-counter { color: inherit; font-size: .75rem; }
.channel-action-counter:empty { display: none; } /* ноль не показываем — только иконку */
.channel-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.channel-action-reply, .thread-reply-btn { margin-left: auto; color: var(--accent); }
.channel-action-reply .channel-action-label, .thread-reply-btn .channel-action-label { position: static; width: auto; height: auto; clip: auto; }
@@ -40,7 +43,31 @@
.channel-header-title, .channel-header-owner { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-header-owner { color: var(--text-secondary); font-size: .75rem; line-height: 1rem; font-weight: 400; }
.channel-composer { display: flex; gap: 8px; padding: 8px 0; background: var(--background); }
.channel-composer > button { width: 100%; min-height: 44px; border-radius: 12px; color: var(--on-accent); background: var(--accent); }
.channel-compose-bar {
width: 100%;
min-height: 44px;
padding: 0 6px 0 16px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border-control);
border-radius: 22px;
color: var(--text-secondary);
background: var(--surface);
font: inherit;
font-size: 1rem;
text-align: left;
cursor: text;
transition: border-color 160ms ease;
}
.channel-compose-bar:hover { border-color: var(--accent); }
.channel-compose-bar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.channel-compose-bar__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-compose-bar__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--on-accent); background: var(--accent); flex-shrink: 0; }
.channel-compose-bar__icon svg { width: 20px; height: 20px; stroke-width: 2.2; }
.channel-day-separator { display: flex; justify-content: center; margin: 8px 0 10px; }
.channel-day-separator span { padding: 3px 10px; border-radius: 999px; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border-subtle); font-size: .75rem; line-height: 1.125rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.blockchain-details-grid { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; font-size: .75rem; }
.blockchain-details-grid code, .blockchain-raw-block { overflow-wrap: anywhere; white-space: pre-wrap; }
.blockchain-raw-block { max-height: 40vh; overflow: auto; padding: 12px; background: var(--background); }
@@ -49,3 +76,30 @@
.modal-danger-action { width: 100%; color: var(--danger); }
.thread-reply-context { color: var(--text-secondary); font-size: .75rem; line-height: 1.125rem; border-left: 2px solid var(--border-control); padding-left: 10px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .channels-screen *, .channel-composer * { animation: none; scroll-behavior: auto; transition: none; } }
.channels-screen .channel-message-card.channel-message-card--owner {
gap: 6px;
margin: 0 0 8px;
padding: 10px 12px 2px 14px;
border: 1px solid var(--border-subtle);
border-radius: 16px;
background: var(--surface);
justify-self: start;
width: fit-content;
min-width: min(100%, 17rem);
max-width: 100%;
}
.channels-screen .channel-message-card--owner:has(.message-attachment-carousel) { width: 100%; }
.channel-message-card--owner .channel-message-head-row[hidden] { display: none; }
.channel-message-card--owner .channel-message-body { line-height: 1.375rem; }
.channel-message-card--owner .channel-message-actions { gap: 0; margin-left: -8px; flex-wrap: nowrap; }
.channel-message-card--owner .channel-action-item { min-width: 40px; min-height: 40px; padding: 6px 8px; gap: 4px; }
.channel-message-card--owner .channel-action-icon svg { width: 20px; height: 20px; }
.channel-message-meta { display: flex; align-items: center; gap: 0; margin-left: auto; min-width: 0; }
.channel-message-meta .channel-message-time { white-space: nowrap; }
.channel-message-meta .channel-message-time::before { content: none; }
.channel-message-meta .channel-message-more { width: 40px; height: 40px; min-height: 40px; margin: 0 -4px 0 0; padding: 0; font-size: 20px; }
.channel-message-card--owner .attachment-carousel,
.channel-message-card--owner [class*='attachment'] { border-radius: 12px; }
.channels-screen--channel, .channels-screen--thread { padding-bottom: 8px; }
shine-UI/styles/features/channels-list.css
+17 -28
View File
@@ -1,17 +1,5 @@
/* Список каналов, поиск и форма создания. Визуальный owner этих экранов. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.channels-screen {
position: relative;
width: min(100%, 640px);
@@ -56,6 +44,9 @@
outline: 2px solid color-mix(in srgb, var(--focus-ring) 24%, transparent);
}
.channels-inline-search__icon { display: inline-flex; color: var(--text-secondary); }
.channels-inline-search__icon svg { width: 20px; height: 20px; }
.channels-inline-search input {
width: 100%;
min-width: 0;
@@ -67,7 +58,7 @@
font-size: 16px;
}
.channels-inline-search input::placeholder { color: var(--text-secondary); }
.channels-inline-search input::placeholder { color: color-mix(in srgb, var(--text-secondary) 62%, var(--surface)); opacity: 1; }
.channels-server-search {
min-height: 44px;
@@ -91,21 +82,20 @@
min-height: 76px;
padding: 14px 0;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
gap: 12px;
border: 0;
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
color: var(--text-primary);
background: transparent;
background: linear-gradient(var(--border-subtle), var(--border-subtle)) right bottom / calc(100% - 60px) 1px no-repeat;
box-shadow: none;
cursor: pointer;
transition: background-color 160ms ease;
}
.channel-row:hover { background: color-mix(in srgb, var(--surface) 66%, transparent); }
.channel-row:active { background: var(--surface-selected); }
.channel-row:hover { background-color: color-mix(in srgb, var(--surface) 66%, transparent); }
.channel-row:active { background-color: var(--surface-selected); }
.channel-row:focus-within { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.channels-screen--list .channel-row .avatar {
@@ -164,15 +154,20 @@
}
.channel-row-message { font-size: 13px; }
.channel-row-message.is-empty { font-style: italic; }
.channel-row-technical[hidden] { display: none; }
.channel-row { min-height: 68px; padding: 12px 0; }
.channel-row-description,
.channel-row-owner { display: none; }
.channel-row-controls {
align-self: end;
min-width: 24px;
position: absolute;
right: 0;
bottom: 14px;
display: grid;
justify-items: end;
}
.channel-row:has(.channel-row-count:not([hidden])) .channel-row-message { padding-right: 36px; }
.channel-row-count {
min-width: 22px;
@@ -233,7 +228,7 @@
cursor: pointer;
}
.channels-screen--add > .card { padding: 16px; }
.channels-screen--add > .card { gap: 20px; padding: 8px 0 16px; border: 0; border-radius: 0; background: transparent; }
.channel-create-avatar-head {
display: grid;
@@ -265,12 +260,6 @@
.channel-avatar-remove-btn[hidden] { display: none; }
.channel-create-login-hint, .channel-link-preview { font-size: 12px; line-height: 18px; }
.channels-screen--add :is(.input, .select) {
color: var(--text-primary);
background: var(--surface);
border-color: var(--border-control);
}
.channels-screen--add :is(.primary-btn, .secondary-btn) {
min-height: 44px;
border-radius: 12px;
@@ -280,7 +269,7 @@
.channels-screen--add .secondary-btn { color: var(--text-primary); border: 1px solid var(--border-control); background: var(--surface); }
@media (max-width: 360px) {
.channel-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
.channel-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
.channels-screen--list .channel-row .avatar { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.channels-server-search { padding-inline: 4px; }
.channel-create-avatar-head { grid-template-columns: 1fr; }
shine-UI/styles/features/chat.css
+162 -103
View File
@@ -30,7 +30,7 @@
align-items: center;
gap: 10px;
margin: 8px 0;
color: #9ab0de;
color: var(--accent);
font-size: 12px;
}
@@ -40,7 +40,7 @@
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, rgba(126, 150, 199, 0.12), rgba(126, 150, 199, 0.45), rgba(126, 150, 199, 0.12));
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
}
@@ -78,7 +78,7 @@
.bubble-reply-preview-author {
font-size: 12px;
font-weight: 700;
color: rgba(250, 221, 155, 0.94);
color: var(--warning);
}
@@ -86,7 +86,7 @@
margin-top: 3px;
font-size: 12px;
line-height: 1.3;
color: rgba(223, 233, 250, 0.86);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -99,16 +99,16 @@
justify-content: flex-end;
align-items: center;
gap: 5px;
font-size: 9px;
font-size: 11px;
line-height: 1.1;
color: rgba(198, 214, 247, 0.78);
color: var(--text-primary);
}
.bubble-meta-edited {
margin-top: 3px;
justify-content: flex-end;
color: rgba(235, 208, 137, 0.88);
color: var(--warning);
}
@@ -120,46 +120,46 @@
.bubble-status {
min-width: 14px;
text-align: right;
color: rgba(148, 163, 184, 0.92);
color: var(--text-primary);
}
.bubble-status--delivered,
.bubble-status--read {
color: rgba(215, 230, 255, 0.96);
text-shadow: 0 0 6px rgba(126, 180, 255, 0.36);
color: var(--text-primary);
text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 36%, transparent);
}
.bubble-status--failed {
color: rgba(255, 145, 145, 0.96);
color: var(--danger);
}
.bubble-delivery-note {
max-width: 280px;
margin-top: 6px;
font-size: 10px;
font-size: 11px;
line-height: 1.3;
color: rgba(255, 220, 142, 0.92);
color: var(--warning);
}
.bubble-delivery-note--failed {
color: rgba(255, 145, 145, 0.96);
color: var(--danger);
}
.bubble.in {
justify-self: start;
background: #1f2c46;
background: var(--surface);
border-top-left-radius: 6px;
}
.bubble.out {
justify-self: end;
background: #273f63;
background: var(--surface);
border-top-right-radius: 6px;
}
@@ -168,9 +168,9 @@
max-width: 90%;
justify-self: center;
border-radius: 16px;
border: 1px solid rgba(132, 170, 231, 0.28);
background: rgba(24, 36, 58, 0.72);
color: #dce8ff;
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
background: var(--surface);
color: var(--text-primary);
font-size: 12px;
padding: 12px 14px;
}
@@ -197,7 +197,7 @@
justify-content: center;
width: 28px;
height: 28px;
color: #d9ecff;
color: var(--text-primary);
flex: 0 0 auto;
}
@@ -213,26 +213,26 @@
position: absolute;
right: 4px;
bottom: 3px;
font-size: 10px;
font-size: 11px;
line-height: 1;
font-weight: 700;
}
.bubble-call-icon--incoming .bubble-call-icon-arrow {
color: rgba(167, 225, 255, 0.98);
color: var(--text-primary);
}
.bubble-call-icon--outgoing .bubble-call-icon-arrow {
color: rgba(255, 214, 132, 0.98);
color: var(--warning);
}
.bubble-call-title {
font-size: 14px;
font-weight: 700;
color: #eef6ff;
color: var(--text-primary);
line-height: 1.2;
}
@@ -245,12 +245,12 @@
.bubble-call-line--success {
color: #7ee19e;
color: var(--success);
}
.bubble-call-line--plain {
color: rgba(230, 240, 255, 0.94);
color: var(--text-primary);
}
@@ -324,8 +324,8 @@
.dm-screen .bubble.in {
justify-self: start;
border-radius: 18px 18px 18px 4px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(20, 25, 35, 0.58);
border: 1px solid var(--border-subtle);
background: var(--surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@@ -334,9 +334,9 @@
.dm-screen .bubble.out {
justify-self: end;
border-radius: 18px 18px 4px 18px;
border: 1px solid rgba(83, 216, 251, 0.4);
background: rgba(83, 216, 251, 0.16);
color: rgba(225, 248, 255, 0.97);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
background: color-mix(in srgb, var(--accent) 16%, transparent);
color: var(--text-primary);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@@ -351,8 +351,8 @@
padding: 10px 12px;
border-radius: 14px;
border: 1px solid transparent;
background: rgba(212, 175, 55, 0.12);
color: rgba(255, 233, 176, 0.96);
background: color-mix(in srgb, var(--warning) 12%, transparent);
color: var(--text-primary);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
@@ -432,7 +432,7 @@
.bubble.bubble--emoji-only .bubble-meta {
margin-top: 2px;
padding: 0 4px;
color: rgba(198, 214, 247, 0.72);
color: var(--text-secondary);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
@@ -473,22 +473,22 @@
height: 0;
}
.dm-input {
background: rgba(255, 255, 255, 0.04);
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
border: 1px solid transparent;
border-radius: 14px;
color: rgba(255, 255, 255, 0.92);
color: var(--text-primary);
}
.dm-input::placeholder {
color: rgba(255, 255, 255, 0.42);
color: var(--text-secondary);
}
.dm-send-btn {
background: rgba(212, 175, 55, 0.2);
background: color-mix(in srgb, var(--warning) 20%, transparent);
border: 1px solid transparent;
color: rgba(255, 217, 128, 0.98);
color: var(--warning);
border-radius: 14px;
font-weight: 700;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
@@ -534,9 +534,9 @@
.dm-message-action-btn--danger {
color: rgba(255, 182, 182, 0.98);
border-color: rgba(255, 120, 120, 0.3);
background: rgba(112, 28, 28, 0.22);
color: var(--text-primary);
border-color: color-mix(in srgb, var(--danger) 30%, transparent);
background: color-mix(in srgb, var(--surface) 22%, transparent);
}
@@ -671,16 +671,16 @@
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(8, 17, 31, 0.65);
border: 1px solid rgba(97, 198, 255, 0.26);
box-shadow: 0 0 0 1px rgba(97, 198, 255, 0.08), 0 0 12px rgba(64, 172, 255, 0.18);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent);
}
.chat-header-connections-btn:hover,
.chat-header-connections-btn:focus-visible {
border-color: rgba(111, 208, 255, 0.38);
box-shadow: 0 0 0 1px rgba(111, 208, 255, 0.16), 0 0 16px rgba(64, 172, 255, 0.28);
border-color: color-mix(in srgb, var(--accent) 38%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent);
}
@@ -722,23 +722,23 @@
.dm-chat-input .dm-input {
border-color: rgba(247, 251, 255, 0.12);
border-color: var(--border-subtle);
color: var(--app-topbar-gold);
text-shadow:
0 0 4px rgba(92, 190, 255, 0.34),
0 0 10px rgba(72, 145, 255, 0.16);
0 0 4px color-mix(in srgb, var(--accent) 34%, transparent),
0 0 10px color-mix(in srgb, var(--accent) 16%, transparent);
caret-color: var(--app-topbar-gold);
}
.dm-chat-input .dm-input:focus {
border-color: rgba(92, 190, 255, 0.28);
box-shadow: 0 0 0 1px rgba(92, 190, 255, 0.08);
border-color: color-mix(in srgb, var(--accent) 28%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.dm-chat-input .dm-input::placeholder {
color: rgba(247, 251, 255, 0.46);
color: var(--text-secondary);
text-shadow: none;
}
@@ -750,26 +750,26 @@
text-shadow:
0 0 5px var(--app-topbar-blue-glow),
0 0 12px var(--app-topbar-blue-glow-soft);
filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.42));
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 42%, transparent));
}
.dm-chat-input .dm-send-btn {
border-color: rgba(247, 251, 255, 0.12);
background: rgba(92, 190, 255, 0.08);
border-color: var(--border-subtle);
background: color-mix(in srgb, var(--accent) 8%, transparent);
box-shadow: none;
}
.dm-chat-input .dm-edit-banner {
border-color: rgba(92, 190, 255, 0.18);
background: rgba(92, 190, 255, 0.08);
border-color: color-mix(in srgb, var(--accent) 18%, transparent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
color: var(--app-topbar-gold);
}
.dm-chat-input .emoji-picker-tab.is-active {
background: rgba(92, 190, 255, 0.12);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
@@ -804,7 +804,7 @@
border: 0;
border-radius: 10px;
background: transparent;
color: #f4f8ff;
color: var(--text-primary);
font: inherit;
font-size: 14px;
font-weight: 600;
@@ -815,10 +815,10 @@
.dm-message-action-btn:hover,
.dm-message-action-btn:focus-visible {
outline: none;
background: rgba(39, 141, 255, 0.12);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.dm-message-action-btn--danger {
color: #ffb7c5;
color: var(--text-primary);
background: transparent;
}
@@ -827,12 +827,12 @@
min-width: 196px;
padding: 6px;
gap: 2px;
border: 1px solid rgba(92, 190, 255, 0.22);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: 16px;
background: linear-gradient(155deg, rgba(19, 27, 42, 0.97), rgba(7, 12, 22, 0.98));
background: linear-gradient(155deg, var(--surface), var(--surface));
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48),
0 0 24px rgba(39, 141, 255, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
0 0 24px color-mix(in srgb, var(--accent) 10%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
backdrop-filter: blur(20px) saturate(125%);
-webkit-backdrop-filter: blur(20px) saturate(125%);
width: min(78vw, 240px);
@@ -935,7 +935,7 @@
font-size: 14px;
line-height: 1.15;
font-weight: 650;
color: rgba(255,255,255,0.94);
color: var(--text-primary);
}
@@ -943,7 +943,7 @@
font-size: 11px;
line-height: 1.15;
font-weight: 500;
color: rgba(189,207,232,0.72);
color: var(--text-secondary);
}
@@ -990,9 +990,9 @@
.dm-chat-input :is(.dm-emoji-btn, .dm-send-btn, .dm-edit-banner__close),
.dm-chat-input :is(.dm-emoji-btn, .dm-send-btn, .dm-edit-banner__close):hover,
.dm-chat-input :is(.dm-emoji-btn, .dm-send-btn, .dm-edit-banner__close):focus {
color: #F7FBFF;
text-shadow: 0 0 5px rgba(92, 190, 255, 0.72), 0 0 12px rgba(72, 145, 255, 0.34);
filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46));
color: var(--text-primary);
text-shadow: 0 0 5px color-mix(in srgb, var(--accent) 72%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 34%, transparent);
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 46%, transparent));
}
/* ===== Зашифрованные вложения в личных сообщениях ===== */
@@ -1008,9 +1008,9 @@
border-radius: 14px;
font-size: 21px;
line-height: 1;
background: rgba(13, 28, 54, 0.94);
border: 1px solid rgba(183, 207, 242, 0.28);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,.08);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
@@ -1039,7 +1039,7 @@
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.08);
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
font-size: 19px;
}
@@ -1059,7 +1059,7 @@
.dm-file-card__meta {
font-size: 11px;
color: rgba(205, 219, 242, 0.67);
color: var(--text-secondary);
}
.dm-file-card__download {
@@ -1109,17 +1109,17 @@
.dm-send-icon-btn.is-recording {
transform: scale(1.04);
box-shadow: 0 0 0 5px rgba(255, 104, 126, 0.08), 0 0 24px rgba(255, 104, 126, 0.18);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 8%, transparent), 0 0 24px color-mix(in srgb, var(--danger) 18%, transparent);
}
.dm-send-icon-btn.is-recording:not(.is-locked) {
color: rgba(255, 190, 202, 0.98);
color: var(--text-primary);
}
.dm-send-icon-btn.is-locked {
color: rgba(255, 218, 226, 0.98);
background: rgba(164, 45, 70, 0.28);
border-color: rgba(255, 150, 171, 0.32);
color: var(--text-primary);
background: color-mix(in srgb, var(--danger) 28%, transparent);
border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}
.dm-send-busy-dot {
@@ -1139,9 +1139,9 @@
align-items: center;
gap: 8px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
border: 1px solid var(--border-subtle);
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
overflow: hidden;
}
@@ -1153,8 +1153,8 @@
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 104, 126, 0.96);
box-shadow: 0 0 12px rgba(255, 104, 126, 0.55);
background: color-mix(in srgb, var(--danger) 96%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 55%, transparent);
animation: dmVoicePulse 1s ease-in-out infinite;
}
@@ -1167,7 +1167,7 @@
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 720;
color: rgba(255, 230, 235, 0.96);
color: var(--text-primary);
}
.dm-voice-recording-hint {
@@ -1177,7 +1177,7 @@
white-space: nowrap;
text-align: right;
font-size: 11px;
color: rgba(210, 222, 241, 0.66);
color: var(--text-secondary);
}
.dm-chat-input--recording .dm-actions-col {
@@ -1203,8 +1203,8 @@
place-items: center;
font-size: 15px;
line-height: 1;
background: rgba(92, 190, 255, 0.12);
border: 1px solid rgba(159, 211, 255, 0.22);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.dm-voice-card__play:disabled {
@@ -1237,7 +1237,7 @@
top: 8px;
height: 2px;
border-radius: 999px;
background: rgba(220, 234, 255, 0.20);
background: color-mix(in srgb, var(--text-primary) 20%, transparent);
}
.dm-voice-card__fill {
@@ -1248,7 +1248,7 @@
height: 4px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 8px rgba(92, 190, 255, 0.35);
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
pointer-events: none;
}
@@ -1257,7 +1257,7 @@
justify-content: space-between;
gap: 10px;
font-size: 11px;
color: rgba(205, 219, 242, 0.68);
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
@@ -1282,10 +1282,10 @@
max-height: min(78vh, 680px);
overflow: hidden;
gap: 12px;
border: 1px solid rgba(104, 193, 255, 0.25);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 24px;
background: linear-gradient(155deg, rgba(20, 31, 49, 0.98), rgba(7, 13, 24, 0.98));
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.52), 0 0 34px rgba(56, 165, 255, 0.12);
background: linear-gradient(155deg, var(--surface), var(--surface));
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.52), 0 0 34px color-mix(in srgb, var(--accent) 12%, transparent);
backdrop-filter: blur(24px) saturate(130%);
-webkit-backdrop-filter: blur(24px) saturate(130%);
}
@@ -1307,16 +1307,16 @@
border-radius: 50%;
font-size: 25px;
line-height: 1;
color: rgba(255, 255, 255, 0.78);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.dm-forward-preview {
padding: 11px 13px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--border-subtle);
border-radius: 14px;
color: rgba(242, 247, 255, 0.76);
background: rgba(255, 255, 255, 0.035);
color: var(--text-primary);
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1356,7 +1356,7 @@
.dm-forward-chat-row:hover,
.dm-forward-chat-row:focus-visible {
outline: none;
background: rgba(67, 166, 255, 0.11);
background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.dm-forward-chat-copy {
@@ -1375,7 +1375,7 @@
.dm-forward-chat-arrow {
font-size: 28px;
color: rgba(130, 205, 255, 0.7);
color: var(--accent);
}
.dm-forward-loading {
@@ -1386,9 +1386,68 @@
.dm-forward-confirm-peer {
padding: 12px;
border-radius: 16px;
background: rgba(67, 166, 255, 0.08);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dm-forward-confirm-actions {
margin-top: 2px;
}
.chat-header-peer-btn { border: 0; background: transparent; color: inherit; font: inherit; }
.chat-header-peer-btn:hover { background: var(--surface); }
.chat-header-peer-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.chat-header-peer-name { font-size: var(--text-md); font-weight: var(--weight-bold); }
.chat-header-peer-meta { font-size: var(--text-xs); }
.dm-chat-screen .bubble {
max-width: min(80%, 34rem);
padding: 8px 12px 6px;
border-radius: var(--radius-lg);
color: var(--text-primary);
font-size: var(--text-md);
line-height: var(--leading-md);
box-shadow: none;
}
.dm-chat-screen .bubble.in {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-bottom-left-radius: var(--radius-xs);
border-top-left-radius: var(--radius-lg);
}
.dm-chat-screen .bubble.out {
background: color-mix(in srgb, var(--accent) 24%, var(--surface));
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
border-bottom-right-radius: var(--radius-xs);
border-top-right-radius: var(--radius-lg);
}
.dm-chat-screen .bubble-meta { font-size: .6875rem; line-height: 1rem; color: var(--text-secondary); }
.dm-chat-screen .bubble-status--read { color: var(--accent); }
.dm-day-separator { display: flex; justify-content: center; margin: 8px 0; }
.dm-day-separator span { padding: 3px 10px; border-radius: var(--radius-pill); color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-subtle); font-size: var(--text-xs); line-height: var(--leading-xs); }
.dm-chat-input .dm-input {
min-height: var(--control-height);
border: 1px solid var(--border-control);
border-radius: 22px;
color: var(--text-primary);
background: var(--surface);
text-shadow: none;
caret-color: var(--accent);
font-size: 1rem;
}
.dm-chat-input .dm-input:focus { border-color: var(--accent); box-shadow: none; }
.dm-chat-input .dm-input::placeholder { color: color-mix(in srgb, var(--text-secondary) 62%, var(--surface)); }
.dm-chat-input .dm-emoji-btn,
.dm-chat-input .dm-edit-banner__close { color: var(--text-secondary); text-shadow: none; filter: none; }
.dm-chat-input .dm-send-btn {
color: var(--on-accent);
background: var(--accent);
border: 0;
text-shadow: none;
filter: none;
}
.dm-chat-input .dm-edit-banner { color: var(--text-primary); }
.composer-slot:has(> .dm-chat-input) { padding-inline: var(--page-gutter); }
.dm-chat-input .dm-send-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
shine-UI/styles/features/developer-tools.css
+19 -19
View File
@@ -19,7 +19,7 @@
.key-storage-note--strong {
font-size: 17px;
font-weight: 700;
color: #eef4ff;
color: var(--text-primary);
}
@@ -35,19 +35,19 @@
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(143, 167, 215, 0.18);
background: rgba(14, 24, 45, 0.42);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
background: var(--surface);
}
.pwa-diag-key {
color: #cdd9f2;
color: var(--text-primary);
font-size: 13px;
}
.pwa-diag-value {
color: #edf3ff;
color: var(--text-primary);
font-size: 13px;
text-align: right;
word-break: break-word;
@@ -58,29 +58,29 @@
width: 10px;
height: 10px;
border-radius: 50%;
background: #64708a;
background: var(--surface);
}
.pwa-diag-indicator.is-ok {
background: #66d69a;
box-shadow: 0 0 0 3px rgba(102, 214, 154, 0.18);
background: var(--success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}
.pwa-diag-indicator.is-warn {
background: #f0c56b;
background: var(--warning);
}
.pwa-diag-indicator.is-bad {
background: #e48792;
box-shadow: 0 0 0 3px rgba(228, 135, 146, 0.18);
background: var(--danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.pwa-diag-indicator.is-neutral {
background: #8994ab;
background: var(--text-primary);
}
@@ -104,9 +104,9 @@
padding: 10px;
font-size: 12px;
line-height: 1.35;
color: #dfe9ff;
background: rgba(8, 15, 28, 0.82);
border: 1px solid rgba(134, 157, 205, 0.2);
color: var(--text-primary);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
@@ -121,7 +121,7 @@
.arweave-uploads-toolbar {
align-items: center;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
background: linear-gradient(135deg, var(--surface), var(--surface));
border-bottom: 1px solid transparent;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
box-sizing: border-box;
@@ -155,7 +155,7 @@
.arweave-uploads-title {
align-self: center;
color: #f8fafc;
color: var(--text-primary);
font-size: 0.94rem;
font-weight: 800;
min-width: 0;
@@ -167,7 +167,7 @@
.arweave-uploads-menu {
background: rgba(15, 23, 42, 0.98);
background: var(--surface);
border: 1px solid transparent;
border-radius: 0.85rem;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
@@ -187,7 +187,7 @@
.arweave-uploads-menu .text-btn {
color: #f8fafc;
color: var(--text-primary);
text-align: left;
}
shine-UI/styles/features/devices.css
+65 -57
View File
@@ -8,8 +8,8 @@
.qr-code {
width: min(220px, 100%);
aspect-ratio: 1;
fill: #eff5ff;
background: #111723;
fill: var(--text-primary);
background: var(--surface);
border-radius: 22px;
padding: 18px;
}
@@ -20,7 +20,7 @@
min-height: 380px;
border-radius: var(--radius-lg);
overflow: hidden;
background: #09101a;
background: var(--surface);
}
@@ -36,7 +36,7 @@
.camera-frame {
position: absolute;
inset: 70px 40px 110px;
border: 3px solid rgba(83, 216, 251, 0.85);
border: 3px solid color-mix(in srgb, var(--accent) 85%, transparent);
border-radius: 24px;
box-shadow: 0 0 0 999px rgba(5, 9, 16, 0.38);
}
@@ -50,7 +50,7 @@
text-align: center;
padding: 10px 12px;
border-radius: 12px;
background: rgba(10, 14, 23, 0.78);
background: var(--surface);
}
@@ -61,7 +61,7 @@
.camera-error {
top: 18px;
color: #ffd7df;
color: var(--text-primary);
}
@@ -70,10 +70,10 @@
min-height: 380px;
display: grid;
place-items: center;
color: #c8d6f9;
color: var(--text-primary);
background:
radial-gradient(circle at 20% 10%, rgba(83, 216, 251, 0.16), transparent 48%),
linear-gradient(180deg, #0a1220, #070d17);
radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 48%),
linear-gradient(180deg, var(--surface), var(--surface));
}
@@ -84,17 +84,22 @@
.session-status--online {
color: #3dbb72;
color: var(--success);
}
.session-item {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
padding: 10px;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
.nav-list > .session-item + .session-item { border-top: 1px solid var(--border-subtle); }
.session-item:hover { background: var(--surface-selected); }
.session-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@@ -109,7 +114,7 @@
.session-tab {
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
background: color-mix(in srgb, var(--text-primary) 3%, transparent);
color: var(--text-muted);
min-height: 36px;
padding: 6px 8px;
@@ -119,39 +124,29 @@
.session-tab.is-active {
color: var(--text);
border-color: rgba(83, 216, 251, 0.45);
background: rgba(83, 216, 251, 0.15);
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.session-current-badge {
display: inline-flex;
margin-top: 8px;
padding: 4px 9px;
border-radius: 999px;
font-size: 12px;
color: #d7ffe3;
border: 1px solid rgba(132, 244, 161, 0.36);
background: rgba(132, 244, 161, 0.1);
}
.qr-demo {
width: 64px;
height: 64px;
border-radius: 8px;
border: 2px solid rgba(255, 255, 255, 0.85);
border: 2px solid var(--border-control);
background:
linear-gradient(
90deg,
#f6fbff 0 8px,
#0f1524 8px 16px,
#f6fbff 16px 24px,
#0f1524 24px 32px,
#f6fbff 32px 40px,
#0f1524 40px 48px,
#f6fbff 48px 56px,
#0f1524 56px 64px
var(--text-primary) 0 8px,
var(--surface) 8px 16px,
var(--text-primary) 16px 24px,
var(--surface) 24px 32px,
var(--text-primary) 32px 40px,
var(--surface) 40px 48px,
var(--text-primary) 48px 56px,
var(--surface) 56px 64px
);
}
@@ -160,8 +155,8 @@
width: 64px;
height: 64px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: #fff;
border: 1px solid var(--border-subtle);
background: var(--text-primary);
}
@@ -182,7 +177,7 @@
.pairing-transfer-dialog__backdrop {
position: absolute;
inset: 0;
background: rgba(3, 7, 15, .76);
background: var(--surface);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
@@ -212,9 +207,9 @@
gap: 11px;
min-height: 58px;
padding: 9px 12px;
border: 1px solid rgba(255,255,255,.11);
border: 1px solid var(--border-subtle);
border-radius: 14px;
background: rgba(255,255,255,.035);
background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
@@ -225,7 +220,7 @@
.pairing-transfer-key small {
color: rgba(255,255,255,.48);
color: var(--text-secondary);
}
@@ -248,7 +243,7 @@
}
.screen-content.settings-bordered-actions .pairing-approve-btn {
color: #fff;
color: var(--text-primary);
background: transparent;
background-image: none;
border: 0;
@@ -257,7 +252,7 @@
}
.screen-content.settings-bordered-actions .pairing-approve-btn:hover {
color: #fff;
color: var(--text-primary);
background: transparent;
background-image: none;
border: 0;
@@ -267,35 +262,35 @@
}
.screen-content.settings-bordered-actions .pairing-approve-btn:active {
color: #fff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
background-image: none;
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: none;
filter: brightness(0.9);
}
.screen-content.settings-bordered-actions .pairing-approve-btn:focus,
.screen-content.settings-bordered-actions .pairing-approve-btn:focus-visible {
background: linear-gradient(180deg, rgba(57, 180, 108, 0.92), rgba(22, 116, 69, 0.94));
border: 1px solid rgba(126, 235, 170, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 22px rgba(22, 116, 69, 0.20);
background: linear-gradient(180deg, color-mix(in srgb, var(--success) 92%, transparent), var(--surface));
border: 1px solid color-mix(in srgb, var(--success) 55%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 18%, transparent), 0 8px 22px color-mix(in srgb, var(--success) 20%, transparent);
transform: none;
filter: none;
}
.screen-content.settings-bordered-actions .pairing-reject-btn {
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
}
.screen-content.settings-bordered-actions .pairing-reject-btn:hover {
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -304,22 +299,35 @@
}
.screen-content.settings-bordered-actions .pairing-reject-btn: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);
}
.screen-content.settings-bordered-actions .pairing-reject-btn:focus,
.screen-content.settings-bordered-actions .pairing-reject-btn:focus-visible {
color: #fff1f3;
background: rgba(134, 31, 49, 0.28);
border: 1px solid rgba(255, 105, 128, 0.42);
color: var(--text-primary);
background: color-mix(in srgb, var(--danger) 28%, transparent);
border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
box-shadow: none;
transform: none;
filter: none;
}
.session-item { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 12px 14px; text-align: left; }
.session-item__main { display: grid; gap: 2px; min-width: 0; }
.session-item__title { color: var(--text-primary); font-size: var(--text-md); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.session-item__main .meta-muted { font-size: var(--text-xs); }
.session-item__side { display: grid; justify-items: end; gap: 6px; flex-shrink: 0; font-size: var(--text-xs); }
.session-status--online { color: var(--success); }
.key-card__hint { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; }
.key-card .field-label { font-weight: var(--weight-bold); color: var(--text-primary); }
.key-list > .key-card { padding: 12px 14px; border: 0; border-radius: 0; background: transparent; }
.key-list > .key-card + .key-card { border-top: 1px solid var(--border-subtle); }
.key-list .key-card__hint { font-size: var(--text-sm); }
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; }
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; }
shine-UI/styles/features/notifications.css
+24 -68
View File
@@ -4,7 +4,7 @@
.notifications-screen {
position: relative;
isolation: isolate;
color: rgba(255, 255, 255, 0.9);
color: var(--text-primary);
min-height: 100%;
align-content: start;
}
@@ -17,15 +17,15 @@
z-index: -1;
pointer-events: none;
background:
radial-gradient(320px 320px at 86% 12%, rgba(147, 112, 219, 0.2), transparent 72%),
radial-gradient(280px 280px at 18% 82%, rgba(147, 112, 219, 0.14), transparent 72%),
radial-gradient(260px 260px at 70% 65%, rgba(212, 175, 55, 0.12), transparent 75%),
#05070A;
radial-gradient(320px 320px at 86% 12%, color-mix(in srgb, var(--rel-contact) 20%, transparent), transparent 72%),
radial-gradient(280px 280px at 18% 82%, color-mix(in srgb, var(--rel-contact) 14%, transparent), transparent 72%),
radial-gradient(260px 260px at 70% 65%, color-mix(in srgb, var(--warning) 12%, transparent), transparent 75%),
var(--surface);
}
.notifications-screen .tabs {
background: rgba(20, 25, 35, 0.5);
background: var(--surface);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid transparent;
@@ -34,24 +34,24 @@
.notifications-screen .tab-btn {
color: rgba(255, 255, 255, 0.65);
color: var(--text-secondary);
}
.notifications-screen .tab-btn.active {
background: rgba(255, 180, 0, 0.12);
background: color-mix(in srgb, var(--warning) 12%, transparent);
border: 1px solid transparent;
color: rgba(255, 200, 50, 0.92);
color: var(--warning);
}
.notifications-screen .notifications-list > .card {
background: rgba(20, 25, 35, 0.55);
background: var(--surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--border-subtle);
border-radius: 20px;
box-shadow: 0 0 60px rgba(80, 60, 180, 0.12);
box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 12%, transparent);
}
.notifications-screen::before {
content: none;
@@ -100,7 +100,7 @@
.notification-person-name {
color: rgba(255, 255, 255, 0.96);
color: var(--text-primary);
font-weight: 700;
overflow-wrap: anywhere;
}
@@ -109,7 +109,7 @@
.notification-login,
.notification-time-separator,
.notification-time {
color: rgba(255, 255, 255, 0.5);
color: var(--text-secondary);
font-size: 12px;
}
@@ -121,13 +121,13 @@
.notification-action {
color: rgba(255, 255, 255, 0.66);
color: var(--text-secondary);
font-size: 13px;
}
.notification-content {
color: rgba(255, 255, 255, 0.94);
color: var(--text-primary);
font-size: 15px;
line-height: 1.45;
white-space: pre-wrap;
@@ -141,7 +141,7 @@
gap: 18px;
flex-wrap: wrap;
padding-top: 2px;
color: rgba(255, 255, 255, 0.58);
color: var(--text-secondary);
}
@@ -169,8 +169,8 @@
.notifications-screen .notification-card--clickable:hover,
.notifications-screen .notification-card--clickable:focus-visible {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.055);
border-color: var(--border-subtle);
background: color-mix(in srgb, var(--text-primary) 6%, transparent);
outline: none;
}
@@ -186,55 +186,6 @@
/* Уведомления: переключатели лент занимают место заголовка в закреплённом
* TopBar и повторяют стеклянные чипы экрана «Связи». */
.notifications-topbar {
grid-template-columns: minmax(0, 1fr);
}
.notifications-topbar .topbar__left,
.notifications-topbar .topbar__right {
display: none;
}
.notifications-topbar .topbar__center {
width: 100%;
}
.notifications-topbar .notification-feed-tabs {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 8px;
padding: 0;
margin: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.notifications-topbar .notification-feed-tabs .notification-tab-btn {
flex: 1 1 0;
min-width: 0;
padding-inline: 8px;
text-align: center;
}
/* Высота панели остаётся стандартной: перенос фильтров не увеличивает TopBar. */
.notifications-topbar .notification-feed-tabs.app-top-tabs {
min-height: var(--app-primary-tab-min-height);
padding: 0;
margin: 0;
}
/* Уведомления: информационные блоки без рамок. Hover/focus не возвращает
* обводку — различение сохраняется фоном и лёгкой реакцией на нажатие. */
.notifications-screen .notifications-list > .notification-card,
@@ -245,3 +196,8 @@
border: 0;
outline: 0;
}
.notifications-screen .notifications-list > .notification-empty-state.card, .notifications-screen .notification-empty-state { margin-top: var(--space-5); padding: var(--space-5) var(--space-4); border: 0; background: none; box-shadow: none; text-align: center; justify-items: center; }
.notifications-screen .notification-empty-state strong { font-size: var(--text-md); color: var(--text-primary); }
.notifications-screen .notification-empty-state .meta-muted { max-width: 30ch; font-size: var(--text-sm); }
.notifications-screen .notification-feed-tabs { margin-bottom: var(--space-2); }
shine-UI/styles/features/preauth.css
+130 -70
View File
@@ -21,10 +21,10 @@
padding: 24px;
overflow: hidden;
background:
radial-gradient(circle at 50% 18%, rgba(224, 172, 75, 0.08), transparent 26%),
radial-gradient(circle at 50% 67%, rgba(45, 81, 143, 0.06), transparent 38%),
linear-gradient(180deg, #040816 0%, #020611 54%, #01040c 100%);
font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 26%),
radial-gradient(circle at 50% 67%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 38%),
var(--background);
font-family: var(--font-main);
opacity: 1;
visibility: visible;
transition: opacity 520ms ease, visibility 520ms ease;
@@ -52,7 +52,7 @@
inset: 16%;
z-index: -1;
border-radius: 50%;
background: rgba(214, 155, 56, 0.2);
background: color-mix(in srgb, var(--warning) 20%, transparent);
filter: blur(30px);
animation: shine-halo-breathe 4.8s ease-in-out infinite;
}
@@ -64,19 +64,19 @@
height: 100%;
object-fit: contain;
filter:
drop-shadow(0 0 8px rgba(255, 211, 121, 0.72))
drop-shadow(0 8px 22px rgba(225, 158, 48, 0.38));
drop-shadow(0 0 8px color-mix(in srgb, var(--warning) 72%, transparent))
drop-shadow(0 8px 22px color-mix(in srgb, var(--warning) 38%, transparent));
animation: shine-logo-breathe 4.8s ease-in-out infinite;
}
.initial-splash__brand {
margin-top: -2px;
color: #f4ebdd;
color: var(--text-primary);
font-size: clamp(34px, 7vw, 46px);
font-weight: 500;
line-height: 1;
text-shadow: 0 3px 22px rgba(210, 168, 90, 0.2);
text-shadow: 0 3px 22px color-mix(in srgb, var(--warning) 20%, transparent);
}
@@ -87,7 +87,7 @@
justify-items: center;
gap: clamp(12px, 2.4vh, 20px);
padding-block: 8px;
font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
font-family: var(--font-main);
}
@@ -103,9 +103,9 @@
inset: -14px -14px calc(-24px - env(safe-area-inset-bottom));
z-index: -2;
background:
radial-gradient(circle at 50% 18%, rgba(224, 172, 75, 0.08), transparent 26%),
radial-gradient(circle at 50% 67%, rgba(45, 81, 143, 0.06), transparent 38%),
linear-gradient(180deg, #040816 0%, #020611 54%, #01040c 100%);
radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 26%),
radial-gradient(circle at 50% 67%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 38%),
var(--background);
}
@@ -115,7 +115,7 @@
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.015) 50%, transparent);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 2%, transparent) 50%, transparent);
opacity: 0.7;
}
@@ -132,8 +132,8 @@
height: 100%;
object-fit: contain;
filter:
drop-shadow(0 0 8px rgba(255, 211, 121, 0.72))
drop-shadow(0 8px 22px rgba(225, 158, 48, 0.38));
drop-shadow(0 0 8px color-mix(in srgb, var(--warning) 72%, transparent))
drop-shadow(0 8px 22px color-mix(in srgb, var(--warning) 38%, transparent));
animation: shine-logo-breathe 4.8s ease-in-out infinite;
}
@@ -151,7 +151,7 @@
inset: 16%;
z-index: -1;
border-radius: 50%;
background: rgba(214, 155, 56, 0.2);
background: color-mix(in srgb, var(--warning) 20%, transparent);
filter: blur(30px);
animation: shine-halo-breathe 4.8s ease-in-out infinite;
}
@@ -159,12 +159,12 @@
.auth-brand {
margin: -4px 0 clamp(4px, 1vh, 10px);
color: #f4ebdd;
color: var(--text-primary);
font-size: clamp(42px, 9vw, 56px);
font-weight: 500;
line-height: 1;
letter-spacing: 0;
text-shadow: 0 3px 22px rgba(210, 168, 90, 0.2);
text-shadow: 0 3px 22px color-mix(in srgb, var(--warning) 20%, transparent);
}
@@ -196,7 +196,7 @@
min-height: 48px;
padding: 0 24px;
border-radius: 18px;
font-family: "Manrope", "Inter", "SF Pro Display", system-ui, sans-serif;
font-family: var(--font-main);
font-size: 18px;
font-weight: 500;
line-height: 1.2;
@@ -219,27 +219,27 @@
padding: 5px 12px;
border: 0;
background: transparent;
color: rgba(162, 180, 215, 0.68);
color: var(--accent);
font-size: 12px;
cursor: pointer;
}
.shine-local-demo-btn:hover {
color: rgba(216, 226, 247, 0.9);
color: var(--text-primary);
}
@keyframes shine-logo-breathe {
0%, 100% {
filter:
drop-shadow(0 0 8px rgba(255, 211, 121, 0.62))
drop-shadow(0 8px 22px rgba(225, 158, 48, 0.34));
drop-shadow(0 0 8px color-mix(in srgb, var(--warning) 62%, transparent))
drop-shadow(0 8px 22px color-mix(in srgb, var(--warning) 34%, transparent));
}
50% {
filter:
drop-shadow(0 0 14px rgba(255, 220, 147, 0.88))
drop-shadow(0 10px 28px rgba(225, 158, 48, 0.5));
drop-shadow(0 0 14px color-mix(in srgb, var(--warning) 88%, transparent))
drop-shadow(0 10px 28px color-mix(in srgb, var(--warning) 50%, transparent));
}
}
@@ -306,18 +306,18 @@
/* Shared visual language for every screen before a user enters the app. */
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) {
--preauth-ivory: #f4ebdd;
--preauth-muted: #b7c4de;
--preauth-line: rgba(182, 201, 235, 0.24);
--preauth-card: rgba(9, 18, 37, 0.78);
padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
--preauth-ivory: var(--text-primary);
--preauth-muted: var(--text-secondary);
--preauth-line: var(--border-subtle);
--preauth-card: var(--surface);
padding: env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom));
overflow-x: hidden;
background:
radial-gradient(circle at 50% 18%, rgba(224, 172, 75, 0.08), transparent 26%),
radial-gradient(circle at 50% 67%, rgba(45, 81, 143, 0.06), transparent 38%),
linear-gradient(180deg, #040816 0%, #020611 54%, #01040c 100%);
radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 26%),
radial-gradient(circle at 50% 67%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 38%),
var(--background);
color: var(--preauth-ivory);
font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-family: var(--font-main);
overscroll-behavior: contain;
}
@@ -372,12 +372,12 @@
padding: 0;
border-radius: 12px;
border-color: var(--preauth-line);
background: rgba(12, 23, 46, 0.72);
background: var(--surface);
color: var(--preauth-ivory);
font-size: 22px;
line-height: 1;
text-align: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
}
@@ -408,10 +408,10 @@
border: 1px solid var(--preauth-line);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 24%),
linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 6%, transparent), transparent 24%),
var(--preauth-card);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.075),
inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent),
0 16px 34px rgba(0, 0, 0, 0.24);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
@@ -465,9 +465,9 @@
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .input,
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .select {
min-height: 48px;
border-color: rgba(182, 201, 235, 0.22);
border-color: color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: 12px;
background: rgba(4, 11, 25, 0.64);
background: var(--surface);
color: var(--preauth-ivory);
}
@@ -506,8 +506,8 @@
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .link-card {
border-color: var(--preauth-line);
background: linear-gradient(180deg, rgba(24, 43, 79, 0.84), rgba(8, 17, 35, 0.86));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18);
background: linear-gradient(180deg, var(--surface), var(--surface));
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent), 0 8px 18px rgba(0, 0, 0, 0.18);
}
@@ -524,19 +524,19 @@
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-toggle,
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .session-item {
border-color: var(--preauth-line);
background: rgba(9, 19, 38, 0.58);
background: var(--surface);
color: var(--preauth-ivory);
}
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-progress {
border-color: transparent;
background: rgba(3, 9, 21, 0.62);
background: var(--surface);
}
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-progress-bar {
background: linear-gradient(90deg, #b27c38, #f1cd80);
background: linear-gradient(90deg, var(--warning), var(--warning));
}
@@ -544,8 +544,8 @@
min-height: min(48dvh, 360px);
border-radius: 16px;
border-color: var(--preauth-line);
background: #050b18;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
background: var(--surface);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}
@@ -566,7 +566,7 @@
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .registration-form .field-label {
font-size: 14px;
font-size: var(--text-sm);
}
@@ -577,7 +577,7 @@
.password-length-hint {
margin: 0;
color: rgba(183, 196, 222, 0.76);
color: var(--accent);
font-size: 12px;
line-height: 1.3;
}
@@ -646,13 +646,13 @@
.auth-copy {
line-height: 1.45;
color: #d8e3ff;
color: var(--text-primary);
}
.auth-status-card {
width: min(100%, 320px);
color: #d8e3ff;
color: var(--text-primary);
}
@@ -681,7 +681,7 @@
.registration-finish-tx-link {
color: #9fd8ff;
color: var(--accent);
text-decoration: underline;
overflow-wrap: anywhere;
word-break: break-all;
@@ -690,7 +690,7 @@
.registration-finish-tx-link:hover,
.registration-finish-tx-link:focus-visible {
color: #c9ebff;
color: var(--text-primary);
}
@@ -700,9 +700,9 @@
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(132, 162, 228, 0.22);
background: rgba(20, 31, 52, 0.72);
color: #eef3ff;
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
background: var(--surface);
color: var(--text-primary);
line-height: 1.4;
}
@@ -710,7 +710,7 @@
.registration-toggle input {
width: 18px;
height: 18px;
accent-color: #d4af37;
accent-color: var(--warning);
}
@@ -742,7 +742,7 @@
.registration-word-number {
font-size: 12px;
color: #b2c2e6;
color: var(--accent);
min-width: 18px;
text-align: right;
}
@@ -803,7 +803,7 @@
margin: 0;
font-size: 22px;
line-height: 1.2;
color: #f6deb0;
color: var(--text-primary);
}
@@ -819,7 +819,7 @@
.registration-progress {
width: 100%;
height: 10px;
border: 1px solid rgba(180, 180, 180, 0.5);
border: 1px solid var(--border-control);
border-radius: 6px;
overflow: hidden;
}
@@ -828,7 +828,7 @@
.registration-progress-bar {
height: 100%;
width: 0%;
background: rgba(80, 160, 255, 0.9);
background: color-mix(in srgb, var(--accent) 90%, transparent);
transition: width 180ms linear;
}
@@ -838,9 +838,9 @@
.login-remote-server {
width: 100%;
padding: 14px;
border: 1px solid rgba(182, 201, 235, 0.18);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: 14px;
background: rgba(4, 11, 25, 0.44);
background: var(--surface);
}
@@ -865,7 +865,7 @@
z-index: 12000;
place-items: center;
padding: 24px;
background: rgba(1, 5, 14, 0.72);
background: var(--surface);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
@@ -875,9 +875,9 @@
width: min(100%, 290px);
place-items: center;
padding: 28px 24px;
border: 1px solid rgba(205, 220, 246, 0.18);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: 20px;
background: rgba(7, 15, 31, 0.9);
background: var(--surface);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
text-align: center;
}
@@ -886,7 +886,7 @@
.secret-generation-spinner {
width: 42px;
height: 42px;
border: 3px solid rgba(220, 232, 255, 0.18);
border: 3px solid var(--border-subtle);
border-top-color: transparent;
border-radius: 50%;
animation: secret-generation-spin 0.82s linear infinite;
@@ -894,7 +894,7 @@
.secret-generation-title {
color: var(--preauth-ivory, #f4ebdd);
color: var(--preauth-ivory, var(--text-primary));
font-size: 18px;
font-weight: 650;
}
@@ -902,7 +902,7 @@
.secret-generation-progress {
min-height: 20px;
color: var(--preauth-muted, #a8bcdf);
color: var(--preauth-muted, var(--accent));
font-size: 13px;
}
@@ -969,3 +969,63 @@
.screen-content.preauth-flow .auth-footer-actions .shine-btn {
width: 100%;
}
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar__left .icon-btn,
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar__right .icon-btn {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
border: 0;
background: transparent;
box-shadow: none;
color: var(--text-primary);
}
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar__title { color: var(--text-primary); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .card,
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-panel {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.screen-content.preauth-flow .topbar { background: transparent; }
.auth-screen--welcome .shine-actions { gap: var(--space-3); }
.auth-screen--welcome .start-language-link,
.auth-screen--welcome .start-settings-link {
min-height: var(--control-height);
border: 0;
background: transparent;
box-shadow: none;
color: var(--accent);
font-size: var(--text-md);
font-weight: var(--weight-medium);
}
.auth-screen--welcome .start-settings-link { color: var(--text-secondary); font-size: var(--text-sm); }
.auth-screen--welcome .start-settings-link::after { content: none; }
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen .topbar { margin-bottom: var(--space-4); }
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .login-choice-screen .topbar__title { display: block; }
.screen-content.filled-action-buttons .registration-faq-link {
justify-self: center;
min-height: 36px;
padding: 0 8px;
border: 0;
background: transparent;
box-shadow: none;
color: var(--accent);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-decoration: underline;
text-underline-offset: 3px;
}
.screen-content.preauth-flow:not(:has(> .auth-screen--welcome)) .topbar { min-height: 56px; margin-bottom: var(--space-2); grid-template-columns: 44px minmax(0, 1fr) 44px; }
.auth-screen--welcome .shine-actions { width: min(100%, 420px); justify-self: center; }
.auth-screen--welcome .shine-actions > :is(.shine-btn, .secondary-btn) { width: 100%; min-height: 48px; font-size: var(--text-md); font-weight: var(--weight-bold); }
shine-UI/styles/features/profile-page.css
+111
View File
@@ -0,0 +1,111 @@
/* Карточка профиля (js/components/profile-card.js): свой и чужой профиль в одной системе с «О канале».
* Селекторы привязаны к .user-profile-screen, чтобы перекрыть старую геометрию profile.css. */
.user-profile-screen { gap: 0; min-height: 0; overflow-x: hidden; }
.user-profile-screen::before { content: none; }
.user-profile-screen .user-profile-body { display: grid; gap: var(--space-4); padding: var(--space-2) 0 var(--space-5); }
.user-profile-screen .user-profile-status:empty { display: none; }
.user-profile-screen .pf-hero { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.user-profile-screen .pf-avatar { position: relative; grid-column: auto; grid-row: auto; width: 96px; height: 96px; margin-bottom: var(--space-2); display: grid; place-items: center; justify-self: center; }
.user-profile-screen .pf-avatar .user-profile-hero-avatar.avatar,
.user-profile-screen .pf-avatar .user-profile-hero-avatar.avatar-image { width: 96px; height: 96px; min-width: 96px; min-height: 96px; font-size: 36px; }
.user-profile-screen .pf-avatar .user-profile-hero-avatar.avatar-framed > .avatar-fallback,
.user-profile-screen .pf-avatar .user-profile-hero-avatar.avatar-framed > .avatar-photo { width: 100%; height: 100%; }
.user-profile-screen .pf-avatar .user-profile-hero-avatar.avatar-framed::after,
.user-profile-screen .pf-avatar .user-profile-hero-avatar.avatar-glow::before { content: none; }
.user-profile-screen .pf-hero.is-shining .pf-avatar::after {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
border: 2px solid var(--rel-shining);
box-shadow: 0 0 14px var(--rel-shining-glow);
pointer-events: none;
}
.user-profile-screen .pf-name { margin: 0; color: var(--text-primary); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.user-profile-screen .pf-login { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }
.user-profile-screen .pf-statuses { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.user-profile-screen .pf-status {
min-height: 32px;
padding: 0 12px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
color: var(--text-secondary);
background: var(--surface);
font: inherit;
font-size: var(--text-xs);
cursor: pointer;
}
.user-profile-screen .pf-status b { color: var(--text-primary); font-weight: var(--weight-bold); }
.user-profile-screen .pf-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-control); }
.user-profile-screen .pf-status.is-active { color: var(--text-primary); border-color: var(--border-control); }
.user-profile-screen .pf-status.is-active .pf-status-dot { background: var(--rel-shining); box-shadow: 0 0 6px var(--rel-shining-glow); }
.user-profile-screen .pf-status[data-profile-list='primary_received'].is-active .pf-status-dot { background: var(--rel-family); box-shadow: 0 0 6px var(--rel-family-glow); }
.user-profile-screen .pf-status:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.user-profile-screen .pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.user-profile-screen .pf-stat { min-height: 64px; padding: var(--space-2) var(--space-1); display: grid; align-content: center; justify-items: center; gap: 2px; border: 0; border-left: 1px solid var(--border-subtle); background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; }
.user-profile-screen .pf-stat:first-child { border-left: 0; }
.user-profile-screen .pf-stat:hover { background: var(--surface-selected); }
.user-profile-screen .pf-stat:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.user-profile-screen .pf-stat-value { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-bold); }
.user-profile-screen .pf-stat-value small { color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.user-profile-screen .pf-stat-label { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); }
.user-profile-screen .pf-tiles-wrap { position: relative; width: 100%; margin: 0; }
.user-profile-screen .pf-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); width: 100%; margin: 0; padding: 0; }
.user-profile-screen .pf-tile {
width: auto;
height: auto;
min-height: 64px;
padding: 10px 4px 8px;
display: grid;
justify-items: center;
align-content: center;
gap: 4px;
border: 1px solid var(--border-subtle);
border-radius: 14px;
color: var(--accent);
background: var(--surface);
box-shadow: none;
font: inherit;
font-size: var(--text-xs);
cursor: pointer;
transform: none;
width: 100%;
justify-self: stretch;
}
.user-profile-screen .pf-tile::before,
.user-profile-screen .pf-tile::after { content: none; }
.user-profile-screen .pf-tile svg { width: 22px; height: 22px; }
.user-profile-screen .pf-tile span { color: var(--text-primary); }
.user-profile-screen .pf-tile:hover,
.user-profile-screen .pf-tile:active,
.user-profile-screen .pf-tile.is-active { background: var(--surface-selected); box-shadow: none; transform: none; }
.user-profile-screen .pf-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.user-profile-screen .pf-tile .pf-tile-mandala,
.user-profile-screen .pf-tile img { width: 24px; height: 24px; object-fit: contain; filter: none; }
.user-profile-screen .pf-list { display: grid; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.user-profile-screen .pf-row { display: grid; gap: 2px; padding: 12px 14px; border-top: 1px solid var(--border-subtle); }
.user-profile-screen .pf-row:first-child { border-top: 0; }
.user-profile-screen .pf-row-label { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); }
.user-profile-screen .pf-row-value,
.user-profile-screen .pf-row-text { margin: 0; color: var(--text-primary); font-size: var(--text-md); line-height: var(--leading-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.user-profile-screen .pf-row-text.is-empty { color: var(--text-secondary); }
.profile-edit-card { gap: var(--space-3); }
.profile-edit-statuses { flex-wrap: wrap; overflow: visible; }
.profiles-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: 6px 6px 6px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); }
.profiles-row.is-active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-control)); }
.screen-content .profiles-row .profiles-select { min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.screen-content .profiles-row .profiles-select:disabled { opacity: 1; cursor: default; }
.profiles-login { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-primary); }
.profiles-active-badge { padding: 2px 8px; border-radius: var(--radius-pill); color: var(--accent); background: var(--accent-soft); font-size: .6875rem; font-weight: var(--weight-bold); }
.screen-content .profiles-row .profiles-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; font-size: 22px; cursor: pointer; }
.screen-content .profiles-row .profiles-close:hover { background: var(--surface-selected); color: var(--danger); }
shine-UI/styles/features/profile.css
+152 -152
View File
@@ -17,7 +17,7 @@
.badge.profile-toggle-btn {
color: #fff;
color: var(--text-primary);
background: transparent;
background-image: none;
border: 0;
@@ -33,7 +33,7 @@
}
.badge.profile-toggle-btn:hover {
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -41,18 +41,18 @@
}
.badge.profile-toggle-btn: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);
}
.badge.profile-toggle-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -72,7 +72,7 @@
.profile-help-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 9, 16, 0.72);
background: var(--surface);
backdrop-filter: blur(4px);
}
@@ -90,7 +90,7 @@
.profile-help-text {
color: #d8e3ff;
color: var(--text-primary);
line-height: 1.45;
font-size: 14px;
}
@@ -100,7 +100,7 @@
.profile-data-help p {
margin-top: 6px;
line-height: 1.4;
color: #d8e3ff;
color: var(--text-primary);
}
@@ -117,7 +117,7 @@
.profile-identity-line {
line-height: 1.2;
color: #eef3ff;
color: var(--text-primary);
font-size: 17px;
}
@@ -171,7 +171,7 @@
.profile-param-value {
font-size: 15px;
color: #eef3ff;
color: var(--text-primary);
word-break: break-word;
}
@@ -185,10 +185,10 @@
.profile-relation-select {
min-height: 46px;
border-radius: 12px;
border: 1px solid rgba(157, 185, 238, 0.35);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
background:
linear-gradient(150deg, rgba(23, 43, 79, 0.9), rgba(10, 22, 44, 0.92));
color: #eef4ff;
linear-gradient(150deg, var(--surface), var(--surface));
color: var(--text-primary);
font-weight: 600;
letter-spacing: 0.01em;
}
@@ -196,8 +196,8 @@
.profile-gender-select:focus,
.profile-relation-select:focus {
border-color: rgba(120, 211, 255, 0.9);
box-shadow: 0 0 0 3px rgba(65, 174, 255, 0.2);
border-color: color-mix(in srgb, var(--accent) 90%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
@@ -210,9 +210,9 @@
.profile-relative-search-suggest {
max-height: 180px;
overflow-y: auto;
border: 1px solid rgba(150, 174, 224, 0.3);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: 12px;
background: rgba(9, 18, 35, 0.94);
background: var(--surface);
padding: 6px;
}
@@ -234,7 +234,7 @@
.profile-relative-suggest-item:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -274,16 +274,16 @@
min-height: 38px;
padding: 6px 8px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(8, 14, 24, 0.34);
color: #d8e3ff;
border: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--surface) 34%, transparent);
color: var(--text-primary);
font-size: 14px;
}
.user-rel-text {
min-height: 1em;
color: #dbe8ff;
color: var(--text-primary);
line-height: 1.3;
}
@@ -305,8 +305,8 @@
gap: 8px;
padding: 6px 8px;
border-radius: 10px;
border: 1px dashed rgba(131, 196, 255, 0.45);
background: rgba(9, 18, 31, 0.42);
border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
background: var(--surface);
}
@@ -322,14 +322,14 @@
.user-rel-opinion-item {
color: #d7e6ff;
color: var(--text-primary);
line-height: 1.35;
font-size: 13px;
}
.user-rel-opinions-hint {
color: rgba(173, 199, 236, 0.9);
color: var(--accent);
font-size: 12px;
}
@@ -340,29 +340,29 @@
.user-opinion-modal-btn.is-add {
border-color: rgba(97, 170, 255, 0.7);
color: #9fcbff;
border-color: color-mix(in srgb, var(--accent) 70%, transparent);
color: var(--accent);
}
.user-opinion-modal-btn.is-remove {
border-color: rgba(255, 120, 120, 0.72);
color: #ff9b9b;
border-color: color-mix(in srgb, var(--danger) 72%, transparent);
color: var(--danger);
}
.profile-screen .avatar-xl,
.profile-screen .avatar.large {
position: relative;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(130, 198, 255, 0.62);
border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
background:
radial-gradient(circle at 30% 28%, rgba(161, 204, 255, 0.95), rgba(89, 141, 220, 0.92) 46%, rgba(32, 71, 136, 0.95) 72%, rgba(20, 48, 99, 0.98) 100%);
color: #f3f8ff;
radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--accent) 95%, transparent), color-mix(in srgb, var(--accent) 92%, transparent) 46%, color-mix(in srgb, var(--accent) 95%, transparent) 72%, var(--surface) 100%);
color: var(--text-primary);
box-shadow:
inset 0 1px 0 rgba(240, 248, 255, 0.6),
inset 0 -10px 18px rgba(12, 33, 72, 0.5),
0 0 0 2px rgba(72, 155, 248, 0.28),
0 12px 24px rgba(8, 24, 55, 0.42);
inset 0 1px 0 color-mix(in srgb, var(--text-primary) 60%, transparent),
inset 0 -10px 18px color-mix(in srgb, var(--accent) 50%, transparent),
0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent),
0 12px 24px color-mix(in srgb, var(--accent) 42%, transparent);
}
.profile-screen .avatar-xl::after,
.profile-screen .avatar.large::after {
@@ -373,7 +373,7 @@
width: 42%;
height: 28%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 72%);
background: radial-gradient(circle, color-mix(in srgb, var(--text-primary) 50%, transparent), color-mix(in srgb, var(--text-primary) 0%, transparent) 72%);
pointer-events: none;
}
@@ -382,7 +382,7 @@
.profile-screen {
position: relative;
isolation: isolate;
color: rgba(255, 255, 255, 0.9);
color: var(--text-primary);
min-height: 100%;
gap: 4px;
align-content: start;
@@ -397,18 +397,18 @@
z-index: -1;
pointer-events: none;
background:
radial-gradient(260px 260px at 86% 10%, rgba(147, 112, 219, 0.22), transparent 72%),
radial-gradient(220px 220px at 14% 84%, rgba(147, 112, 219, 0.18), transparent 72%),
radial-gradient(220px 220px at 76% 68%, rgba(212, 175, 55, 0.14), transparent 75%),
radial-gradient(190px 190px at 26% 20%, rgba(212, 175, 55, 0.1), transparent 74%),
#05070A;
radial-gradient(260px 260px at 86% 10%, color-mix(in srgb, var(--rel-contact) 22%, transparent), transparent 72%),
radial-gradient(220px 220px at 14% 84%, color-mix(in srgb, var(--rel-contact) 18%, transparent), transparent 72%),
radial-gradient(220px 220px at 76% 68%, color-mix(in srgb, var(--warning) 14%, transparent), transparent 75%),
radial-gradient(190px 190px at 26% 20%, color-mix(in srgb, var(--warning) 10%, transparent), transparent 74%),
var(--surface);
}
.profile-screen .card,
.profile-screen .profile-param-item,
.profile-screen .profile-relative-search-suggest {
background: rgba(20, 25, 35, 0.4);
background: var(--surface);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid transparent;
@@ -448,19 +448,19 @@
.profile-top-icon-btn.is-active {
border-color: transparent;
background: rgba(212, 175, 55, 0.12);
background: color-mix(in srgb, var(--warning) 12%, transparent);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.profile-top-icon-btn:hover {
border-color: rgba(230, 236, 245, 0.28);
border-color: var(--border-subtle);
}
.profile-info-modal {
padding: 16px;
background: rgba(2, 5, 11, 0.7);
background: var(--surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
@@ -472,11 +472,11 @@
overflow: auto;
padding: 20px;
gap: 18px;
border: 1px solid rgba(142, 180, 242, 0.34);
border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
border-radius: 16px;
background: rgba(13, 23, 42, 0.96);
background: var(--surface);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.52);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif;
font-family: var(--font-main);
}
@@ -490,7 +490,7 @@
.profile-info-modal__eyebrow {
margin: 0 0 5px;
color: rgba(177, 203, 244, 0.7);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
@@ -498,7 +498,7 @@
.profile-info-modal__title {
color: #f4f7ff;
color: var(--text-primary);
font-size: 22px;
font-weight: 700;
line-height: 1.18;
@@ -512,10 +512,10 @@
height: 32px;
padding: 0;
place-items: center;
border: 1px solid rgba(171, 195, 235, 0.25);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 8px;
background: rgba(145, 172, 223, 0.1);
color: rgba(244, 247, 255, 0.94);
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--text-primary);
font-size: 25px;
font-weight: 300;
line-height: 1;
@@ -524,14 +524,14 @@
.profile-info-modal__close:hover {
background: rgba(145, 172, 223, 0.2);
background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.profile-info-modal__content {
display: grid;
gap: 18px;
color: rgba(229, 237, 255, 0.86);
color: var(--text-primary);
font-size: 16px;
line-height: 1.52;
}
@@ -544,13 +544,13 @@
.profile-info-modal__section {
padding-top: 16px;
border-top: 1px solid rgba(174, 200, 242, 0.18);
border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.profile-info-modal__section-title {
margin: 0 0 10px;
color: rgba(244, 247, 255, 0.95);
color: var(--text-primary);
font-size: 15px;
font-weight: 650;
line-height: 1.35;
@@ -706,9 +706,9 @@
inset: 4% 0 14%;
pointer-events: none;
background:
radial-gradient(circle at 50% 27%, rgba(73, 113, 189, 0.16), transparent 29%),
radial-gradient(circle at 25% 58%, rgba(49, 198, 255, 0.08), transparent 24%),
radial-gradient(circle at 76% 56%, rgba(224, 190, 86, 0.07), transparent 25%);
radial-gradient(circle at 50% 27%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 29%),
radial-gradient(circle at 25% 58%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 24%),
radial-gradient(circle at 76% 56%, color-mix(in srgb, var(--warning) 7%, transparent), transparent 25%);
filter: blur(18px);
}
@@ -739,7 +739,7 @@
.user-profile-full-name {
width: min(88%, 340px);
margin: -5px auto clamp(13px, 2vh, 17px);
color: rgba(239, 246, 255, 0.94);
color: var(--text-primary);
font-size: clamp(16px, 4.5vw, 19px);
font-weight: 700;
line-height: 1.2;
@@ -800,13 +800,13 @@
.user-profile-screen .user-profile-hero-avatar.avatar-glow::before {
inset: -7%;
border: 2px solid rgba(145, 239, 255, 0.94);
border: 2px solid color-mix(in srgb, var(--accent) 94%, transparent);
background: transparent;
box-shadow:
0 0 3px rgba(155, 244, 255, 0.96),
0 0 9px rgba(112, 222, 255, 0.74),
0 0 17px rgba(86, 190, 255, 0.38),
inset 0 0 4px rgba(176, 248, 255, 0.72);
0 0 3px color-mix(in srgb, var(--accent) 96%, transparent),
0 0 9px color-mix(in srgb, var(--accent) 74%, transparent),
0 0 17px color-mix(in srgb, var(--accent) 38%, transparent),
inset 0 0 4px color-mix(in srgb, var(--accent) 72%, transparent);
filter: none;
transform: none;
opacity: 1;
@@ -835,7 +835,7 @@
border: 0;
background: transparent;
box-shadow: none;
color: rgba(225, 234, 248, 0.82);
color: var(--text-primary);
font-size: 14px;
line-height: 1.5;
text-align: center;
@@ -855,7 +855,7 @@
flex-direction: column;
align-items: center;
gap: 5px;
color: #fff;
color: var(--text-primary);
cursor: pointer;
transition:
transform 90ms ease,
@@ -869,16 +869,16 @@
}
.user-profile-metric:active {
background: rgba(0, 0, 0, 0.12);
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);
}
.user-profile-metric:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -897,9 +897,9 @@
display: grid;
place-items: center;
border: 0;
background: rgba(14, 25, 43, 0.34);
background: color-mix(in srgb, var(--surface) 34%, transparent);
box-shadow: none;
color: rgba(238, 246, 255, 0.94);
color: var(--text-primary);
font-size: clamp(15px, 4.2vw, 19px);
font-weight: 800;
line-height: 1;
@@ -909,11 +909,11 @@
.user-profile-metric.is-glowing .user-profile-metric-circle {
color: var(--app-topbar-gold);
background: rgba(14, 25, 43, 0.42);
background: var(--surface);
box-shadow:
0 0 8px var(--app-topbar-blue-glow),
0 0 22px var(--app-topbar-blue-glow-soft),
0 0 38px rgba(72, 145, 255, 0.18);
0 0 38px color-mix(in srgb, var(--accent) 18%, transparent);
text-shadow:
0 0 5px var(--app-topbar-blue-glow),
0 0 14px var(--app-topbar-blue-glow-soft);
@@ -923,7 +923,7 @@
.user-profile-metric-label {
width: 100%;
min-height: 24px;
color: rgba(205, 220, 243, 0.78);
color: var(--text-primary);
font-size: clamp(9px, 2.8vw, 11px);
font-weight: 600;
line-height: 1.08;
@@ -993,7 +993,7 @@
border-radius: 50%;
cursor: pointer;
opacity: 0.9;
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -1011,7 +1011,7 @@
.user-profile-action-btn:hover {
opacity: 1;
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -1020,24 +1020,24 @@
.user-profile-action-btn:focus-visible {
opacity: 1;
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
filter: drop-shadow(0 0 10px rgba(95, 196, 255, 0.42));
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 42%, transparent));
}
.user-profile-action-btn: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);
}
.user-profile-action-btn.is-active {
filter: drop-shadow(0 0 9px rgba(83, 211, 255, 0.52));
filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 52%, transparent));
}
@@ -1086,7 +1086,7 @@
padding: 6px 4px;
border: 0;
border-radius: 18px;
background: linear-gradient(180deg, rgba(13, 20, 35, 0.93), rgba(5, 10, 20, 0.88));
background: linear-gradient(180deg, var(--surface), var(--surface));
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
@@ -1119,7 +1119,7 @@
align-items: center;
gap: 8px;
text-align: left;
color: #fff;
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
transition:
@@ -1130,7 +1130,7 @@
}
.user-profile-add-option:hover {
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -1138,27 +1138,27 @@
}
.user-profile-add-option: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);
}
.user-profile-add-option:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
.user-profile-add-option-check {
color: #8deeff;
color: var(--accent);
font-weight: 800;
text-align: center;
text-shadow: 0 0 9px rgba(89, 224, 255, 0.7);
text-shadow: 0 0 9px color-mix(in srgb, var(--accent) 70%, transparent);
}
@@ -1211,7 +1211,7 @@
align-items: flex-end;
justify-content: center;
padding: 0 max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
background: rgba(0, 0, 0, 0.34);
background: color-mix(in srgb, var(--surface) 34%, transparent);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
@@ -1225,8 +1225,8 @@
border: 0;
border-radius: 28px 28px 18px 18px;
background:
radial-gradient(circle at 50% -12%, rgba(73, 145, 211, 0.16), transparent 42%),
linear-gradient(180deg, rgba(13, 20, 34, 0.96), rgba(5, 9, 17, 0.97));
radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
linear-gradient(180deg, var(--surface), var(--surface));
box-shadow: 0 -20px 55px rgba(0, 0, 0, 0.46);
animation: user-profile-sheet-in 180ms ease-out both;
}
@@ -1237,13 +1237,13 @@
height: 4px;
margin: 1px auto 14px;
border-radius: 999px;
background: rgba(211, 226, 246, 0.2);
background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.user-profile-sheet-title {
margin-bottom: 16px;
color: #f2f7ff;
color: var(--text-primary);
font-size: 19px;
font-weight: 800;
text-align: center;
@@ -1259,14 +1259,14 @@
.user-profile-sheet-copy {
white-space: pre-wrap;
overflow-wrap: anywhere;
color: rgba(225, 234, 248, 0.88);
color: var(--text-primary);
font-size: 14px;
line-height: 1.58;
}
.user-profile-sheet-copy.is-muted {
color: rgba(194, 207, 229, 0.56);
color: var(--text-secondary);
text-align: center;
}
@@ -1280,14 +1280,14 @@
.user-profile-contact-row span {
color: rgba(181, 198, 225, 0.56);
color: color-mix(in srgb, var(--accent) 56%, transparent);
font-size: 12px;
}
.user-profile-contact-row b {
overflow-wrap: anywhere;
color: rgba(233, 240, 252, 0.9);
color: var(--text-primary);
font-size: 14px;
font-weight: 600;
text-align: right;
@@ -1440,7 +1440,7 @@
border: 0;
background: transparent;
box-shadow: none;
color: rgba(238, 246, 255, 0.94);
color: var(--text-primary);
font-size: clamp(16px, 4.5vw, 20px);
}
@@ -1453,7 +1453,7 @@
box-shadow:
0 0 7px 1px var(--app-topbar-blue-glow),
0 0 20px 4px var(--app-topbar-blue-glow-soft),
0 0 34px 8px rgba(72, 145, 255, 0.12);
0 0 34px 8px color-mix(in srgb, var(--accent) 12%, transparent);
text-shadow: none;
}
@@ -1543,7 +1543,7 @@
height: 27px;
min-width: 27px;
flex-basis: 27px;
filter: drop-shadow(0 0 6px rgba(101, 183, 255, 0.36));
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 36%, transparent));
}
@@ -1556,9 +1556,9 @@
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(170, 180, 205, 0.34);
background: rgba(116, 126, 148, 0.14);
color: #d7deea;
border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
background: color-mix(in srgb, var(--text-primary) 14%, transparent);
color: var(--text-primary);
font-size: 20px;
line-height: 1;
}
@@ -1585,7 +1585,7 @@
.profile-stat-card b {font-size:22px}
.profile-stat-card span {font-size:12px;opacity:.78}
.profile-list-row {width:100%;align-items:center;justify-content:flex-start;gap:12px;text-align:left;cursor:pointer;background:transparent;border:0;box-shadow:none;color:#fff}
.profile-list-row {width:100%;align-items:center;justify-content:flex-start;gap:12px;text-align:left;cursor:pointer;background:transparent;border:0;box-shadow:none;color:var(--text-primary)}
.profile-list-row-text {display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;overflow:hidden}
.profile-list-row-text b,
@@ -1639,7 +1639,7 @@
min-height: 34px;
align-items: center;
justify-content: center;
color: rgba(229, 239, 253, 0.86);
color: var(--text-primary);
transition: color 150ms ease, filter 150ms ease;
}
@@ -1663,19 +1663,19 @@
.user-profile-detail-links button.is-active .user-profile-detail-tab-label {
color: #f4f9ff;
color: var(--text-primary);
filter: brightness(1.08);
}
.user-profile-detail-links button.is-active .user-profile-detail-tab-label::before {
opacity: 1;
border-color: rgba(144, 218, 255, 0.9);
border-color: color-mix(in srgb, var(--accent) 90%, transparent);
box-shadow:
0 0 5px rgba(139, 220, 255, 0.82),
0 0 13px rgba(72, 145, 255, 0.58),
0 0 26px rgba(72, 145, 255, 0.28),
inset 0 0 9px rgba(139, 220, 255, 0.16);
0 0 5px color-mix(in srgb, var(--accent) 82%, transparent),
0 0 13px color-mix(in srgb, var(--accent) 58%, transparent),
0 0 26px color-mix(in srgb, var(--accent) 28%, transparent),
inset 0 0 9px color-mix(in srgb, var(--accent) 16%, transparent);
}
@@ -1685,7 +1685,7 @@
min-height: clamp(104px, 18vh, 170px);
margin: clamp(7px, 1.5vh, 12px) auto 0;
padding: clamp(10px, 2vh, 16px) 4px 4px;
color: rgba(225, 234, 248, 0.88);
color: var(--text-primary);
overflow-wrap: anywhere;
}
@@ -1698,14 +1698,14 @@
.user-profile-detail-copy {
white-space: pre-wrap;
overflow-wrap: anywhere;
color: rgba(225, 234, 248, 0.88);
color: var(--text-primary);
font-size: 14px;
line-height: 1.58;
}
.user-profile-detail-copy.is-muted {
color: rgba(194, 207, 229, 0.56);
color: var(--text-secondary);
text-align: center;
}
@@ -1734,9 +1734,9 @@
border: 0;
background: radial-gradient(
ellipse at center,
rgba(105, 218, 255, 0.20) 0%,
rgba(72, 160, 255, 0.14) 34%,
rgba(54, 110, 255, 0.07) 56%,
color-mix(in srgb, var(--accent) 20%, transparent) 0%,
color-mix(in srgb, var(--accent) 14%, transparent) 34%,
color-mix(in srgb, var(--accent) 7%, transparent) 56%,
transparent 76%
);
box-shadow: none;
@@ -1747,14 +1747,14 @@
.user-profile-detail-links button.is-active .user-profile-detail-tab-label {
color: #effbff;
color: var(--text-primary);
filter: none;
text-shadow:
0 0 1px rgba(245, 253, 255, 0.98),
0 0 4px rgba(126, 222, 255, 0.98),
0 0 8px rgba(78, 181, 255, 0.92),
0 0 15px rgba(55, 126, 255, 0.72),
0 0 25px rgba(55, 126, 255, 0.42);
0 0 1px var(--text-primary),
0 0 4px var(--accent),
0 0 8px color-mix(in srgb, var(--accent) 92%, transparent),
0 0 15px color-mix(in srgb, var(--accent) 72%, transparent),
0 0 25px color-mix(in srgb, var(--accent) 42%, transparent);
}
@@ -1763,9 +1763,9 @@
border: 0;
background: radial-gradient(
ellipse at center,
rgba(112, 224, 255, 0.22) 0%,
rgba(74, 166, 255, 0.16) 34%,
rgba(51, 107, 255, 0.08) 57%,
color-mix(in srgb, var(--accent) 22%, transparent) 0%,
color-mix(in srgb, var(--accent) 16%, transparent) 34%,
color-mix(in srgb, var(--accent) 8%, transparent) 57%,
transparent 78%
);
box-shadow: none;
@@ -1789,7 +1789,7 @@
padding: 8px 8px 8px 14px;
}
.profiles-row.is-active { border-color: rgba(255, 255, 255, 0.34); }
.profiles-row.is-active { border-color: var(--border-subtle); }
.profiles-select {
min-width: 0;
@@ -1834,7 +1834,7 @@
.user-profile-identity .user-profile-full-name {
width: 100%;
margin: 0;
color: rgba(244, 248, 255, 0.96);
color: var(--text-primary);
font-size: clamp(17px, 4.8vw, 20px);
font-weight: 700;
line-height: 1.2;
@@ -1842,7 +1842,7 @@
.user-profile-login {
margin-top: 4px;
color: rgba(199, 211, 229, 0.62);
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
@@ -1875,7 +1875,7 @@
border-radius: 0;
background: transparent;
box-shadow: none;
color: rgba(240, 246, 255, 0.95);
color: var(--text-primary);
font-size: clamp(17px, 4.7vw, 20px);
font-weight: 800;
line-height: 1.1;
@@ -1887,7 +1887,7 @@
width: 100%;
min-height: 0;
transform: none;
color: rgba(203, 216, 236, 0.72);
color: var(--text-secondary);
font-size: 11px;
line-height: 1.15;
text-align: center;
@@ -1900,7 +1900,7 @@
.user-profile-about-title {
margin: 0 0 7px 3px;
color: rgba(224, 233, 247, 0.82);
color: var(--text-primary);
font-size: 12px;
font-weight: 650;
line-height: 1.2;
@@ -1909,11 +1909,11 @@
.user-profile-about-field {
min-height: 68px;
padding: 13px 14px;
border: 1px solid rgba(210, 220, 234, 0.14);
border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
border-radius: 14px;
background: rgba(162, 172, 186, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
color: rgba(236, 242, 251, 0.9);
background: color-mix(in srgb, var(--text-primary) 16%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
color: var(--text-primary);
font-size: 13px;
line-height: 1.5;
text-align: left;
@@ -1922,7 +1922,7 @@
}
.user-profile-about-field.is-empty {
color: rgba(199, 210, 226, 0.46);
color: var(--text-secondary);
}
.user-profile-detail-links.user-profile-detail-links--below-about {
@@ -1956,9 +1956,9 @@
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3px;
border: 1px solid rgba(205, 221, 244, 0.12);
border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 14px;
background: rgba(14, 25, 43, 0.24);
background: color-mix(in srgb, var(--surface) 24%, transparent);
}
.profile-list-tab {
@@ -1967,7 +1967,7 @@
border: 0;
border-radius: 11px;
background: transparent;
color: rgba(207, 219, 237, 0.72);
color: var(--text-secondary);
font: inherit;
font-size: 12px;
font-weight: 650;
@@ -1975,9 +1975,9 @@
}
.profile-list-tab.is-active {
background: rgba(156, 177, 204, 0.18);
color: rgba(246, 249, 255, 0.97);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--text-primary);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}
@media (max-height: 700px) {
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); }