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/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) {