diff --git a/app/app.ejs b/app/app.ejs index c9f95f9..2804847 100644 --- a/app/app.ejs +++ b/app/app.ejs @@ -13,6 +13,9 @@ #main { height: calc(100% - 22px); background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); + width: 100%; + position: absolute; + z-index: 10; } #main[overlay] { filter: blur(3px) contrast(0.9) brightness(1.0); diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index dda286b..68139e2 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -51,6 +51,8 @@ p { /* Frame Bar */ #frameBar { + position: relative; + z-index: 100; display: flex; flex-direction: column; background: rgba(1, 2, 1, 0.5); @@ -890,10 +892,14 @@ p { /* Main content container. */ #landingContainer { height: 100%; + position: relative; } /* Upper content container. */ #landingContainer > #upper { + position: relative; + transition: 2s ease; + top: 0px; height: 77%; display: flex; } @@ -921,6 +927,9 @@ p { background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } #landingContainer > #lower > #left { + position: relative; + transition: 2s ease; + top: 0px; height: 100%; width: 33%; display: inline-flex; @@ -934,16 +943,23 @@ p { left: 50px; } #landingContainer > #lower > #center { + position: relative; + transition: 2s ease; + top: 0px; height: 100%; width: 34%; display: inline-flex; justify-content: center; } #landingContainer > #lower > #center #content { + transition: 2s ease; position: relative; top: 10px; } #landingContainer > #lower > #right { + position: relative; + transition: 2s ease; + top: 0px; height: 100%; width: 33%; display: inline-flex; @@ -1267,6 +1283,7 @@ p { justify-content: center; } +/* Button which opens the server selection view. */ #server_selection_button { background: none; border: none; diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index fe3f60e..4c879fb 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -101,6 +101,29 @@ server_selection_button.addEventListener('click', (e) => { toggleOverlay(true, 'serverSelectContent') }) +// Test menu transform. +function slide_(up){ + const lCUpper = document.querySelector('#landingContainer > #upper') + const lCLLeft = document.querySelector('#landingContainer > #lower > #left') + const lCLCenter = document.querySelector('#landingContainer > #lower > #center') + const lCLRight = document.querySelector('#landingContainer > #lower > #right') + const menuBtn = document.querySelector('#landingContainer > #lower > #center #content') + + if(up){ + lCUpper.style.top = '-200vh' + lCLLeft.style.top = '-200vh' + lCLCenter.style.top = '-200vh' + lCLRight.style.top = '-200vh' + menuBtn.style.top = '130vh' + } else { + lCUpper.style.top = '0px' + lCLLeft.style.top = '0px' + lCLCenter.style.top = '0px' + lCLRight.style.top = '0px' + menuBtn.style.top = '10px' + } +} + // Update Mojang Status Color const refreshMojangStatuses = async function(){ console.log('Refreshing Mojang Statuses..')