UI: поднята фиксированная шапка в канале и треде
This commit is contained in:
parent
1e1cdd9e76
commit
83892d5093
@ -0,0 +1,18 @@
|
|||||||
|
# Поднятие верхней фиксированной шапки (канал и тред)
|
||||||
|
|
||||||
|
- Краткое описание:
|
||||||
|
- В `channel-view` и `channel-thread-view` верхняя фиксированная шапка (стрелка назад + центральная кнопка с названием) поднята выше к верхней границе экрана.
|
||||||
|
- Центральная кнопка и стрелка дополнительно подняты внутри шапки для более плотного позиционирования.
|
||||||
|
- Поведение hover/focus сохранено без визуального «прыжка» центральной кнопки.
|
||||||
|
|
||||||
|
- Что проверять:
|
||||||
|
- В канале и в треде верхняя шапка визуально выше, чем до правки.
|
||||||
|
- Кнопка по центру и стрелка назад подняты и находятся на одной линии.
|
||||||
|
- При наведении курсора центральная кнопка не смещается.
|
||||||
|
- Шапка остаётся фиксированной при прокрутке.
|
||||||
|
|
||||||
|
- Ожидаемый результат:
|
||||||
|
- Верхняя навигационная область выглядит компактнее и стабильнее.
|
||||||
|
|
||||||
|
- Статус:
|
||||||
|
- `pending`
|
||||||
@ -1,2 +1,2 @@
|
|||||||
client.version=1.2.69
|
client.version=1.2.70
|
||||||
server.version=1.2.63
|
server.version=1.2.64
|
||||||
|
|||||||
@ -1781,6 +1781,14 @@ textarea.input {
|
|||||||
.channels-screen .page-header {
|
.channels-screen .page-header {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
position: sticky;
|
||||||
|
top: calc(-1 * max(10px, env(safe-area-inset-top)));
|
||||||
|
z-index: 14;
|
||||||
|
padding: calc(max(10px, env(safe-area-inset-top)) + 2px) 0 6px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
background: rgba(8, 12, 20, 0.9);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
-webkit-backdrop-filter: blur(14px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.channels-screen .page-header .icon-btn,
|
.channels-screen .page-header .icon-btn,
|
||||||
@ -2193,15 +2201,15 @@ textarea.input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.channel-message-avatar {
|
.channel-message-avatar {
|
||||||
width: 34px;
|
width: 40px;
|
||||||
height: 34px;
|
height: 40px;
|
||||||
min-width: 34px;
|
min-width: 40px;
|
||||||
min-height: 34px;
|
min-height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #f4f6ff;
|
color: #f4f6ff;
|
||||||
background: radial-gradient(circle at 30% 30%, #8a73ff, #4f4bda 58%, #3b2b89);
|
background: radial-gradient(circle at 30% 30%, #8a73ff, #4f4bda 58%, #3b2b89);
|
||||||
@ -2342,11 +2350,23 @@ textarea.input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.channel-header-route-btn {
|
.channel-header-route-btn {
|
||||||
max-width: 68vw;
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -66%);
|
||||||
|
max-width: 72vw;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
|
min-height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channels-screen .page-header .channel-header-route-btn:hover,
|
||||||
|
.channels-screen .page-header .channel-header-route-btn:focus-visible {
|
||||||
|
transform: translate(-50%, -66%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-node-heading {
|
.thread-node-heading {
|
||||||
@ -2412,6 +2432,12 @@ textarea.input {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thread-history-divider {
|
||||||
|
height: 0;
|
||||||
|
border-top: 2px solid rgba(255, 255, 255, 0.26);
|
||||||
|
margin: 6px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.thread-block--ancestors > .section-title {
|
.thread-block--ancestors > .section-title {
|
||||||
color: #b9cbef;
|
color: #b9cbef;
|
||||||
}
|
}
|
||||||
@ -3187,6 +3213,14 @@ textarea.input {
|
|||||||
background: none;
|
background: none;
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
transform: translateY(-40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.channels-screen--channel .page-header .channel-header-route-btn,
|
||||||
|
.channels-screen--thread .page-header .channel-header-route-btn {
|
||||||
|
border: 1px solid rgba(146, 173, 229, 0.38);
|
||||||
|
background: linear-gradient(180deg, rgba(20, 37, 67, 0.9), rgba(13, 24, 47, 0.94));
|
||||||
|
color: #d9e6ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-head-actions .secondary-btn {
|
.channel-head-actions .secondary-btn {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user