diff --git a/src/styles/globals.css b/src/styles/globals.css index 0c688f5..7be8582 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -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 {