php-gallery/Flyout/flyout.css

60 lines
1.1 KiB
CSS
Raw Normal View History

.flyout-dim {
2022-08-08 18:59:40 +00:00
margin: 0; padding: 0;
width: 100vw; height: 100vh;
display: none;
2022-08-08 18:59:40 +00:00
top: 0; bottom: 0; left: 0; right: 0;
2022-08-08 18:59:40 +00:00
position: fixed; z-index: 999;
2022-08-08 18:59:40 +00:00
background-color: var(--bg);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 1s cubic-bezier(.19,1,.22,1), filter 1s cubic-bezier(.19,1,.22,1);
}
.flyout {
margin: 0; padding: 0.5rem;
max-width: 621px; width: calc(100% - 3.5rem);
max-height: 20rem; height: auto; min-height: 10rem;
2022-08-08 18:59:40 +00:00
position: fixed; z-index: 9999;
left: 50%; bottom: -15rem;
transform: translateX(-50%) scale(0.5);
2022-08-08 18:59:40 +00:00
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);
2022-08-08 18:59:40 +00:00
/*outline: 0.5rem solid var(--bg);*/
}
.flyout-header {
font-size: 20px;
}
.flyout-actionbox {
display: inline;
box-sizing: border-box;
}
2022-08-07 17:28:21 +00:00
/* Worlds shittest workaround to a problem I have no clue how to fix */
2022-08-07 17:28:21 +00:00
.flyout-actionbox *,
.flyout-actionbox * * {
width: 100%;
}
2022-08-07 17:28:21 +00:00
.flyout-actionbox * * * {
width: auto;
}