mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-28 02:16:17 +00:00
76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
.flyout-dim {
|
|
margin: 0; padding: 0;
|
|
|
|
width: 100vw; height: 100vh;
|
|
|
|
display: none;
|
|
|
|
top: 0; bottom: 0; left: 0; right: 0;
|
|
|
|
position: fixed; z-index: 999;
|
|
|
|
background-color: var(--bg);
|
|
backdrop-filter: blur(15px);
|
|
|
|
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);
|
|
height: auto; min-height: 10rem;
|
|
|
|
position: fixed; z-index: 9999;
|
|
left: 50%; bottom: -15rem;
|
|
transform: translateX(-50%) scale(0.5);
|
|
|
|
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);*/
|
|
}
|
|
|
|
.flyout-header {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 20px;
|
|
font-family: "Lexend Deca", sans-serif;
|
|
}
|
|
.flyout-description {
|
|
margin: 0 0 0.5rem 0;
|
|
max-height: 8rem;
|
|
overflow-y: auto;
|
|
|
|
font-family: 'Secular One',
|
|
sans-serif;
|
|
}
|
|
|
|
.flyout-actionbox {
|
|
display: inline;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Worlds shittest workaround to a problem I have no clue how to fix */
|
|
.flyout-actionbox *,
|
|
.flyout-actionbox * * {
|
|
width: 100%;
|
|
}
|
|
.flyout-actionbox * * * {
|
|
width: auto;
|
|
}
|
|
.flyout-actionbox > button {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.flyout-actionbox > button > * {
|
|
width: auto;
|
|
}
|