aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Стандартизировали размеры аватаров в UI

Browse Source
This commit is contained in:
AidarKC
2026-08-26 12:33:18 +04:00
parent 83f87ba22c
commit 2a65e6d359
15 changed files with 134 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/styles/components.css
+105 -58
View File
@@ -1430,10 +1430,10 @@
}
.avatar {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
flex: 0 0 auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
@@ -1442,11 +1442,52 @@
place-items: center;
font-weight: 700;
color: #e5ebff;
font-size: 14px;
}
.avatar.large {
width: 82px;
height: 82px;
.avatar.avatar-xs,
.avatar.xs {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
font-size: 9px;
}
.avatar.avatar-sm,
.avatar.small {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 10px;
}
.avatar.avatar-md,
.avatar.medium {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
}
.avatar.avatar-lg,
.avatar.big {
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
font-size: 18px;
}
.avatar.avatar-xl,
.avatar.large,
.avatar.xlarge {
width: 96px;
height: 96px;
min-width: 96px;
min-height: 96px;
font-size: 26px;
}
@@ -4143,10 +4184,10 @@ textarea.input {
}
.channel-row .avatar {
width: 58px;
height: 58px;
min-width: 58px;
min-height: 58px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
background: linear-gradient(138deg, #efd193, #c18c42);
color: #17233f;
@@ -4390,15 +4431,15 @@ textarea.input {
}
.channel-message-avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: 10px;
font-weight: 700;
color: #f4f6ff;
background: radial-gradient(circle at 30% 30%, #8a73ff, #4f4bda 58%, #3b2b89);
@@ -5010,10 +5051,10 @@ textarea.input {
}
.channel-row .avatar {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.channel-row-title {
@@ -5754,10 +5795,10 @@ textarea.input {
}
.channel-row .avatar {
width: 68px;
height: 68px;
min-width: 68px;
min-height: 68px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
overflow: hidden;
color: #ffffff;
@@ -6155,10 +6196,10 @@ textarea.input {
.dm-card--shining { border-color: rgba(104, 216, 255, 0.45); } /* линия связи: cyan (сияющий) */
.dm-screen .list-item .avatar {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.45);
background:
@@ -6255,8 +6296,8 @@ textarea.input {
.dm-name-check svg { width: 16px; height: 16px; }
/* AvatarRing — обод/свечение по тону (адаптация орбов «Связей», без тяжёлой магии) */
.dm-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.dm-av .avatar { width: 50px; height: 50px; min-width: 50px; min-height: 50px; border: none; box-shadow: none; }
.dm-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.dm-av .avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border: none; box-shadow: none; }
/* Цветные обводки вокруг аватаров (violet/gold) убраны по просьбе. Свечение оставляем только у сияющих (ниже). */
.dm-av--default { box-shadow: none; }
.dm-av--family { box-shadow: none; }
@@ -7196,6 +7237,7 @@ html, body { overflow-x: hidden; }
/* ===== Targeted UI touchups (requested) ===== */
.channels-screen--list .channel-row .avatar,
.profile-screen .avatar-xl,
.profile-screen .avatar.large {
position: relative;
border-radius: 50%;
@@ -7212,6 +7254,7 @@ html, body { overflow-x: hidden; }
}
.channels-screen--list .channel-row .avatar::after,
.profile-screen .avatar-xl::after,
.profile-screen .avatar.large::after {
content: "";
position: absolute;
@@ -8156,6 +8199,10 @@ html, body { overflow-x: hidden; }
}
.notification-avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
flex: 0 0 auto;
}
@@ -8481,10 +8528,10 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
}
.chat-header-avatar-slot {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -8492,11 +8539,11 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.chat-header-avatar.avatar,
.chat-header-avatar.avatar-image {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 11px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
border: 0;
box-shadow: none;
}
@@ -8989,10 +9036,10 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
/* «Личные»: вместо жёлтого шестиугольника — текущий аватар пользователя. */
.dm-head-avatar-slot {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -9000,11 +9047,11 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.dm-head-avatar.avatar,
.dm-head-avatar.avatar-image {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
font-size: 12px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
}
/* Список личных чатов: без цветной границы карточки, компактная ава как в шапке
@@ -9036,11 +9083,11 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.dm-list-screen .dm-av .avatar,
.dm-list-screen .list-item .avatar {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 10px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
border: 0;
box-shadow: none;
}
@@ -9242,15 +9289,15 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.dm-head-avatar-slot,
.dm-head-avatar.avatar,
.dm-head-avatar.avatar-image {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.dm-head-avatar.avatar,
.dm-head-avatar.avatar-image {
font-size: 11px;
font-size: 14px;
}
/* Composer должен быть продолжением основного фона: без верхнего разделителя