mrleo1nid
1a693848f2
ci / api / api (push) Successful in 19m12s
ci / ts / ts (packages + web) (push) Successful in 2m44s
ci / module boundaries / boundaries (push) Successful in 18m23s
ci / contract / contract (сгенерированный код совпадает с openapi.yaml) (push) Successful in 59s
ci / db / db (push) Failing after 18s
ci / mobile / mobile (Metro-бандл Android) (push) Successful in 1m18s
364 lines
7.6 KiB
CSS
364 lines
7.6 KiB
CSS
.shell {
|
|
--side-w: 240px;
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: var(--side-w) minmax(0, 1fr);
|
|
grid-template-rows: 60px minmax(0, 1fr) 88px;
|
|
grid-template-areas:
|
|
'top top'
|
|
'side content'
|
|
'player player';
|
|
height: 100%;
|
|
height: 100dvh;
|
|
}
|
|
|
|
.shell > :where(:not([aria-hidden])) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Плеер-остров: плавает над контентом, контенту — запас снизу (docs/design.md#4). */
|
|
.island {
|
|
grid-template-rows: 60px minmax(0, 1fr);
|
|
grid-template-areas:
|
|
'top top'
|
|
'side content';
|
|
}
|
|
|
|
.island .content {
|
|
padding-bottom: 132px;
|
|
}
|
|
|
|
/* Над контентом: выпадающие подсказки поиска и меню профиля перекрывают страницу, а не уходят под неё. */
|
|
.top {
|
|
grid-area: top;
|
|
z-index: 30;
|
|
/* Три зоны: логотип, середина, профиль; поиск — в одной из них (настройка «Расположение поиска»). */
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--bar-a);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.logoLink {
|
|
width: 196px;
|
|
flex: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.logoLink {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.topLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topCenter {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.topRight {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
|
|
.profileButton {
|
|
border-radius: 50%;
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.profileButton[aria-expanded='true'] {
|
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
|
}
|
|
|
|
.profileHead {
|
|
display: grid;
|
|
grid-template-columns: auto max-content;
|
|
gap: 4px 12px;
|
|
align-items: center;
|
|
padding: 10px 10px 12px;
|
|
margin-bottom: 6px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.profileHead > :last-child {
|
|
grid-column: 1 / -1;
|
|
margin-top: 10px;
|
|
justify-self: start;
|
|
}
|
|
|
|
.profileName {
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.profileMeta {
|
|
font-size: 12px;
|
|
color: var(--text3);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.side {
|
|
grid-area: side;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 16px 12px;
|
|
border-right: 1px solid var(--line);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.navSection {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 12px 0 2px;
|
|
padding: 6px 12px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: none;
|
|
font: inherit;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text3);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navSection:hover {
|
|
color: var(--text2);
|
|
}
|
|
|
|
.navSection:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.navSectionTitle {
|
|
flex: 1;
|
|
}
|
|
|
|
.navChevron {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.navChevronOpen {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Обёртка не мешает раскладке: пункты остаются детьми .side (на телефоне это нижняя панель). */
|
|
.navGroup {
|
|
display: contents;
|
|
}
|
|
|
|
.navGroupFolded {
|
|
display: none;
|
|
}
|
|
|
|
.navItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
border-radius: 10px;
|
|
color: var(--text2);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navItem:hover {
|
|
background: var(--hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.navItem[data-status='active'] {
|
|
background: var(--accent-soft);
|
|
color: var(--text);
|
|
}
|
|
|
|
.navIcon {
|
|
color: var(--text3);
|
|
}
|
|
|
|
.navLabel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navCount {
|
|
font-size: 12px;
|
|
color: var(--text3);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.navBadge {
|
|
min-width: 20px;
|
|
height: 20px;
|
|
padding: 0 6px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--accent-fill);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.navItem[data-status='active'] .navIcon {
|
|
color: var(--accent2);
|
|
}
|
|
|
|
.skip {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 8px;
|
|
z-index: 50;
|
|
padding: 8px 14px;
|
|
border-radius: 10px;
|
|
background: var(--elev);
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transform: translateY(-120%);
|
|
}
|
|
|
|
.skip:focus {
|
|
transform: none;
|
|
}
|
|
|
|
.content {
|
|
grid-area: content;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 32px 36px;
|
|
}
|
|
|
|
.routeIn {
|
|
animation: pipuIn 0.2s ease-out;
|
|
}
|
|
|
|
/* Communication owns its scroll areas so its composer stays above either player. */
|
|
.socialContent { display: flex; flex-direction: column; overflow: hidden; }
|
|
.socialContent > :not(.routeIn) { flex-shrink: 0; }
|
|
.socialContent .routeIn { display: flex; flex: 1; min-height: 0; }
|
|
|
|
@media (max-width: 1023px) {
|
|
.shell {
|
|
--side-w: 72px;
|
|
}
|
|
|
|
.navItem {
|
|
justify-content: center;
|
|
padding: 0;
|
|
font-size: 0;
|
|
}
|
|
|
|
.navLabel,
|
|
.navCount,
|
|
.navBadge {
|
|
display: none;
|
|
}
|
|
|
|
.navSection {
|
|
margin: 14px 0 6px;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
border-top: 1px solid var(--line);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.navSection > * {
|
|
display: none;
|
|
}
|
|
|
|
/* Без подписей свернуть раздел нельзя — пункты видны всегда. */
|
|
.navGroupFolded {
|
|
display: contents;
|
|
}
|
|
}
|
|
|
|
.mobileBottom { display: none; }
|
|
|
|
@media (max-width: 767px) {
|
|
.shell, .shell.island {
|
|
--side-w: 0px;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: auto minmax(0, 1fr) auto calc(64px + env(safe-area-inset-bottom, 0px));
|
|
grid-template-areas: 'top' 'content' 'player' 'mobile';
|
|
}
|
|
|
|
.top {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px 12px;
|
|
padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 10px;
|
|
}
|
|
.topLeft, .topCenter, .topRight { display: contents; }
|
|
.logoLink { grid-area: 1 / 1; justify-self: start; }
|
|
.topRight > :last-child { grid-area: 1 / 2; justify-self: end; }
|
|
.topLeft > :not(.logoLink), .topCenter > *, .topRight > :not(:last-child) {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
min-width: 0;
|
|
}
|
|
.profileButton { min-width: 44px; min-height: 44px; }
|
|
.profileHead { grid-template-columns: auto minmax(0, 1fr); }
|
|
.profileName, .profileMeta { white-space: normal; overflow-wrap: anywhere; }
|
|
.side { display: none; }
|
|
.mobileBottom {
|
|
grid-area: mobile;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 4px;
|
|
padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
|
|
border-top: 1px solid var(--line);
|
|
background: var(--bar-a);
|
|
}
|
|
.mobileBottom .navItem {
|
|
position: relative;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
height: 56px;
|
|
padding: 6px 2px;
|
|
font-size: 11px;
|
|
}
|
|
.mobileBottom .navLabel { display: block; flex: none; max-width: 100%; }
|
|
.mobileDot {
|
|
position: absolute; top: 6px; right: 24%;
|
|
width: 8px; height: 8px; border-radius: 50%; background: var(--accent2);
|
|
}
|
|
.mobileMenu { display: flex; flex-direction: column; gap: 4px; }
|
|
.mobileMenu .navItem {
|
|
justify-content: flex-start; height: auto; min-height: 48px; padding: 8px 12px; font-size: 14px;
|
|
}
|
|
.mobileMenu .navLabel, .mobileMenu .navCount, .mobileMenu .navBadge { display: block; }
|
|
.mobileMenu .navLabel { white-space: normal; }
|
|
.mobileMenu .navGroup, .mobileMenu .navGroupFolded { display: contents; }
|
|
.mobileMenu .navSection {
|
|
display: flex; margin: 12px 0 0; padding: 10px 12px 4px;
|
|
border: 0; pointer-events: none;
|
|
}
|
|
.mobileMenu .navSectionTitle { display: block; }
|
|
.mobileMenu .navChevron { display: none; }
|
|
.content, .island .content { padding: 20px 16px 24px; }
|
|
}
|