diff --git a/css/.master.css.swp b/css/.master.css.swp index 2a44fe8..2275154 100644 Binary files a/css/.master.css.swp and b/css/.master.css.swp differ diff --git a/css/master.css b/css/master.css index 399e51f..b8e5911 100644 --- a/css/master.css +++ b/css/master.css @@ -194,6 +194,7 @@ body { -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ .image-container { + padding: 0.5rem; width: calc(100vw - var(--space-medium)); max-height: 69vh; height: auto; @@ -345,10 +346,11 @@ body { outline: 0.5rem solid var(--bg); - transition: transform 0.15s cubic-bezier(.19,1,.22,1); + transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1); } .alert:hover { transform: scale(1.05); + cursor: pointer; } .alert-high { @@ -399,6 +401,22 @@ a.btn { text-align: center; } +.btn:where(input[type="file"])::file-selector-button { + margin: -0.5rem 0.5rem -0.5rem -0.5rem; + padding: 0.5rem; + + display: inline-block; + + font-size: 16px; + + text-decoration: none; + + background-color: var(--white); + + border: none; + border-radius: var(--rad); +} + /* -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ @@ -440,6 +458,8 @@ a.btn { background: #15151588; backdrop-filter: blur(5px); + + transition: opacity 2s cubic-bezier(.19,1,.22,1); } /* diff --git a/scripts/alert.js b/scripts/alert.js index c801f24..e63b189 100644 --- a/scripts/alert.js +++ b/scripts/alert.js @@ -1,5 +1,10 @@ let alertClose = document.querySelectorAll(".alert"); -function closeAlert(aaaa) { - aaaa.closest(".alert").style.display="none"; +function closeAlert(gone) { + gone.closest(".alert").style.transform="translateY(-10rem) scale(0.8)"; + gone.closest(".alert").style.opacity="0"; + + setTimeout(function(){ + gone.closest(".alert").style.display="none"; + }, 200); }; diff --git a/scripts/flyout.js b/scripts/flyout.js index 12a99cb..50c01dc 100644 --- a/scripts/flyout.js +++ b/scripts/flyout.js @@ -14,6 +14,11 @@ $(document).ready(function() { hide.addEventListener("click", function(){ document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)"; document.querySelector(".flyout").style.bottom= "-20rem"; - document.querySelector(".flyout-dim").style.display= "none"; + + document.querySelector(".flyout-dim").style.opacity= "0"; + + setTimeout(function(){ + document.querySelector(".flyout-dim").style.display= "none"; + }, 600); }); });