diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index dc71776..e970cff 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -1138,7 +1138,6 @@ p { align-items: center; justify-content: center; box-sizing: border-box; - height: 75px; position: relative; } @@ -1341,12 +1340,36 @@ p { background: none; border: none; cursor: pointer; + outline: none; +} +#menu_button:hover #menu_text, +#menu_button:focus #menu_text { + text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff; +} +#menu_button:active { + color: #c7c7c7; + text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7; +} + +#menu_button:hover #menu_img, +#menu_button:focus #menu_img { + -webkit-filter: drop-shadow(0px 0px 2px #fff); +} +#menu_button:active #menu_img .arrowLine { + stroke: #c7c7c7; +} +#menu_button:active #menu_img { + -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7); +} +#menu_button:disabled #menu_img .arrowLine { + stroke: rgba(255, 255, 255, 0.75); } /* Arrow image which floats above the menu button. */ #menu_img { height: 11px; margin-left: -2px; + transition: 0.25s ease; } /* Span which contains the menu button text. */ @@ -1358,6 +1381,7 @@ p { font-size: 11px; line-height: 30px; display: flex; + transition: 0.25s ease; } /* * * diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index 0efdb61..4bc40b2 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -127,6 +127,7 @@ server_selection_button.addEventListener('click', (e) => { toggleServerSelection(true) }) +let menuActive = false // Test menu transform. function slide_(up){ const lCUpper = document.querySelector('#landingContainer > #upper') @@ -141,13 +142,13 @@ function slide_(up){ lCLCenter.style.top = '-200vh' lCLRight.style.top = '-200vh' menuBtn.style.top = '130vh' - setTimeout(() => { + /*setTimeout(() => { lCLCenter.style.transition = 'none' menuBtn.style.transition = 'none' - }, 2000) + }, 2000)*/ } else { - lCLCenter.style.transition = null - menuBtn.style.transition = null + //lCLCenter.style.transition = null + //menuBtn.style.transition = null lCUpper.style.top = '0px' lCLLeft.style.top = '0px' lCLCenter.style.top = '0px' @@ -156,6 +157,11 @@ function slide_(up){ } } +document.getElementById('menu_button').onclick = () => { + slide_(!menuActive) + menuActive = !menuActive +} + // Update Mojang Status Color const refreshMojangStatuses = async function(){ console.log('Refreshing Mojang Statuses..') diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js index 195ab7f..afab7fa 100644 --- a/app/assets/js/scripts/overlay.js +++ b/app/assets/js/scripts/overlay.js @@ -20,6 +20,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte } if(toggleState){ document.getElementById('main').setAttribute('overlay', true) + // Make things tabbable. + $("#main *").attr('tabindex', '-1') $('#' + content).parent().children().hide() $('#' + content).show() if(dismissable){ @@ -30,6 +32,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte $('#overlayContainer').fadeIn(250) } else { document.getElementById('main').removeAttribute('overlay') + // Make things tabbable. + $("#main *").removeAttr('tabindex') $('#overlayContainer').fadeOut(250, () => { $('#' + content).parent().children().hide() $('#' + content).show() diff --git a/app/landing.ejs b/app/landing.ejs index a1f4619..bed7781 100644 --- a/app/landing.ejs +++ b/app/landing.ejs @@ -118,7 +118,13 @@