71 lines
1.5 KiB
CSS
71 lines
1.5 KiB
CSS
dialog.modal-embed::backdrop {
|
|
animation: kf-modal-backdrop 1s linear forwards;
|
|
/* animation-delay: 2s; */
|
|
background-color: rgb(0 0 0 / 50%);
|
|
}
|
|
|
|
@keyframes kf-modal-backdrop {
|
|
0% {
|
|
backdrop-filter: blur(0);
|
|
}
|
|
100% {
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
}
|
|
|
|
dialog.modal-embed {
|
|
box-sizing: border-box;
|
|
border: var(--border-thickness) solid var(--background-primary);
|
|
background-color: var(--background-tertiary);
|
|
width: 1024px;
|
|
}
|
|
|
|
dialog.modal-embed:open {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
dialog.modal-embed > div.wrapper {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
margin-top: 32px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
dialog.modal-embed > div.wrapper > div.preview {
|
|
display: flex;
|
|
position: relative;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 640px;
|
|
height: 640px;
|
|
}
|
|
|
|
dialog.modal-embed > div.wrapper > div.preview > img.background {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
dialog.modal-embed > div.wrapper > div.toggles {
|
|
display: grid;
|
|
flex-basis: 100%;
|
|
align-content: start;
|
|
align-items: start;
|
|
max-width: 300px;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
dialog.modal-embed > div.wrapper > div.toggles > textarea {
|
|
box-sizing: border-box;
|
|
border: var(--border-thickness) solid var(--background-primary);
|
|
background-color: var(--background-tertiary);
|
|
padding: 8px;
|
|
min-height: 120px;
|
|
resize: none;
|
|
}
|