SILVER
/
NODEDC_LAUNCHER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/styles/globals.css
View File

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