UI - ЛАУНЧЕР: АНИМАЦИЯ FULLSCREEN АДМИНКИ

This commit is contained in:
DCCONSTRUCTIONS 2026-05-08 20:54:14 +03:00
parent a4cb3da325
commit b0878b4d02
1 changed files with 19 additions and 3 deletions

View File

@ -667,6 +667,8 @@ code {
.launcher-main:has(.admin-panel-layer--fullscreen) .service-rail {
opacity: 0;
pointer-events: none;
transform: translateY(calc(var(--launcher-rail-height) + var(--launcher-rail-bottom) + var(--launcher-stage-rail-gap)));
transition-delay: 160ms, 120ms;
}
.service-stage {
@ -1091,6 +1093,10 @@ code {
border-radius: var(--launcher-radius-card);
background: rgba(8, 8, 11, 0.72);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
transform: translateY(0);
transition:
transform 440ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 240ms ease;
}
.service-rail__backdrop-media {
@ -1409,12 +1415,17 @@ code {
left: var(--launcher-page-pad);
display: flex;
gap: var(--admin-panel-gap);
width: calc(var(--admin-nav-width) + var(--admin-panel-gap) + var(--admin-content-width));
pointer-events: none;
transition:
width 500ms cubic-bezier(0.22, 1, 0.36, 1),
bottom 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.admin-panel-layer--fullscreen {
right: var(--launcher-page-pad);
width: calc(100% - (var(--launcher-page-pad) * 2));
bottom: var(--launcher-page-pad);
transition-delay: 0ms, 150ms;
}
.admin-panel-nav,
@ -1433,6 +1444,7 @@ code {
.admin-panel-nav {
position: relative;
display: grid;
flex: 0 0 var(--admin-nav-width);
grid-template-rows: auto auto 1fr auto;
gap: 1.05rem;
width: var(--admin-nav-width);
@ -1444,6 +1456,7 @@ code {
.admin-panel-content {
position: relative;
display: grid;
flex: 0 0 var(--admin-content-width);
grid-template-rows: auto minmax(0, 1fr);
gap: 1rem;
width: var(--admin-content-width);
@ -1452,12 +1465,15 @@ code {
padding: 1rem;
font-size: 0.875rem;
box-shadow: none;
transition:
flex-basis 500ms cubic-bezier(0.22, 1, 0.36, 1),
width 500ms cubic-bezier(0.22, 1, 0.36, 1);
animation: adminPanelSlide 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.admin-panel-layer--fullscreen .admin-panel-content {
width: auto;
flex: 1 1 auto;
width: calc(100% - var(--admin-nav-width) - var(--admin-panel-gap));
flex-basis: calc(100% - var(--admin-nav-width) - var(--admin-panel-gap));
}
.profile-settings-layer {