fade in and out terminal on focus
Build and Push Container / build-and-push (push) Successful in 28s
Build and Push Container / build-and-push (push) Successful in 28s
This commit is contained in:
@@ -529,11 +529,13 @@ function createServerRack() {
|
||||
terminal.style.boxShadow = '0 0 8px rgba(234, 179, 8, 0.3), inset 0 0 20px rgba(34, 197, 94, 0.1)';
|
||||
terminal.style.borderColor = '#eab308';
|
||||
terminal.classList.add('grown');
|
||||
terminal.classList.add('opaque');
|
||||
const face = terminal.closest('.server-face');
|
||||
const unit = face?.closest('.rack-unit');
|
||||
face?.classList.add('grown');
|
||||
unit?.classList.add('grown');
|
||||
document.getElementById('hero').classList.add('shifted');
|
||||
document.querySelector('.rack-container')?.classList.add('opaque');
|
||||
});
|
||||
|
||||
terminal.addEventListener('blur', () => {
|
||||
@@ -541,11 +543,13 @@ function createServerRack() {
|
||||
terminal.style.boxShadow = '';
|
||||
terminal.style.borderColor = '#2a2a2e';
|
||||
terminal.classList.remove('grown');
|
||||
terminal.classList.remove('opaque');
|
||||
const face = terminal.closest('.server-face');
|
||||
const unit = face?.closest('.rack-unit');
|
||||
face?.classList.remove('grown');
|
||||
unit?.classList.remove('grown');
|
||||
document.getElementById('hero').classList.remove('shifted');
|
||||
document.querySelector('.rack-container')?.classList.remove('opaque');
|
||||
});
|
||||
|
||||
mobileInput.addEventListener('keydown', (e) => {
|
||||
@@ -559,11 +563,13 @@ function createServerRack() {
|
||||
terminal.style.boxShadow = '';
|
||||
terminal.style.borderColor = '#2a2a2e';
|
||||
terminal.classList.remove('grown');
|
||||
terminal.classList.remove('opaque');
|
||||
const face = terminal.closest('.server-face');
|
||||
const unit = face?.closest('.rack-unit');
|
||||
face?.classList.remove('grown');
|
||||
unit?.classList.remove('grown');
|
||||
document.getElementById('hero').classList.remove('shifted');
|
||||
document.querySelector('.rack-container')?.classList.remove('opaque');
|
||||
});
|
||||
|
||||
let lastInputValue = '';
|
||||
@@ -777,20 +783,24 @@ heroEl.addEventListener('click', (e) => {
|
||||
if (activeTerminal && activeTerminal._mobileInput) {
|
||||
if (activeTerminal.classList.contains('grown')) {
|
||||
activeTerminal.classList.remove('grown');
|
||||
activeTerminal.classList.remove('opaque');
|
||||
const face = activeTerminal.closest('.server-face');
|
||||
const unit = face?.closest('.rack-unit');
|
||||
face?.classList.remove('grown');
|
||||
unit?.classList.remove('grown');
|
||||
heroEl.classList.remove('shifted');
|
||||
activeTerminal._mobileInput.blur();
|
||||
document.querySelector('.rack-container')?.classList.remove('opaque');
|
||||
} else {
|
||||
activeTerminal._mobileInput.focus();
|
||||
activeTerminal.classList.add('grown');
|
||||
activeTerminal.classList.add('opaque');
|
||||
const face = activeTerminal.closest('.server-face');
|
||||
const unit = face?.closest('.rack-unit');
|
||||
face?.classList.add('grown');
|
||||
unit?.classList.add('grown');
|
||||
heroEl.classList.add('shifted');
|
||||
document.querySelector('.rack-container')?.classList.add('opaque');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user