Fixing up some CSS

This commit is contained in:
Michał Gdula 2022-08-08 19:59:40 +01:00
parent d8b20c9b34
commit bf449271e6
6 changed files with 34 additions and 18 deletions

View file

@ -1,13 +1,16 @@
.flyout-dim {
margin: 0; padding: 0;
width: 100vw; height: 100vh;
display: none;
position: fixed; z-index: 99;
top: 0; bottom: 0; left: 0; right: 0;
object-position: center;
position: fixed; z-index: 999;
background-color: #151515aa;
background-color: var(--bg);
backdrop-filter: blur(8px);
opacity: 0;
@ -20,18 +23,21 @@
max-width: 621px; width: calc(100% - 3.5rem);
max-height: 20rem; height: auto; min-height: 10rem;
position: fixed; z-index: 999999999;
position: fixed; z-index: 9999;
left: 50%; bottom: -15rem;
transform: translateX(-50%) scale(0.5);
background-color: #151515;
overflow-y: auto;
background-color: var(--bg);
backdrop-filter: blur(8px);
color: white;
transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1);
border-radius: var(--rad);
border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg);
/*outline: 0.5rem solid var(--bg);*/
}
.flyout-header {

View file

@ -8,6 +8,8 @@ $(document).ready(function() {
});
function flyoutShow(header, description, actionbox) {
// Hide overflow
document.querySelector("html").style.overflow = "hidden";
// Checking if actionbox is set
if (typeof actionbox === 'undefined') {
flyoutActionbox.style.display = "none";
@ -36,6 +38,8 @@ function flyoutShow(header, description, actionbox) {
};
function flyoutClose() {
// Show overflow
document.querySelector("html").style.overflow = "auto";
// Hide the flyout
flyoutRoot.style.transform = "translateX(-50%) scale(0.5)";
flyoutRoot.style.bottom = "-20rem";