nightTab/css/modal.css

82 lines
1.5 KiB
CSS
Executable File

.modal {
position: fixed;
top: 50%;
left: 50%;
font-size: 1em;
width: 45em;
max-width: calc(100% - 6em);
min-width: 10em;
transform: translate(-50%, -50%);
opacity: 0;
perspective: 1000px;
transition: opacity var(--animation-speed-fast) ease-in-out;
z-index: var(--z-index-modal);
}
.modal-large {
width: 65em;
max-width: calc(100% - 2em);
}
.modal-small {
width: 30em;
}
.modal-wrapper {
box-sizing: border-box;
position: relative;
transition: all var(--animation-speed-fast);
}
.modal-wrapper .container {
max-width: 100%;
}
.is-transition-end .modal-wrapper {
transition: all var(--animation-speed-fast) ease-in-out;
}
.modal-body {
background-color: rgb(var(--gray-01));
border-radius: var(--theme-radius) var(--theme-radius) 0 0;
padding: 2em;
max-height: calc(90vh - 3.6666666667em);
overflow-y: auto;
box-sizing: border-box;
z-index: 1;
position: relative;
}
.modal-heading {
overflow-x: hidden;
}
.modal-heading:focus {
outline: none;
}
.modal-controls {
background-color: rgb(var(--gray-01));
position: relative;
z-index: 2;
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
display: flex;
}
.modal-button {
background-color: transparent;
border-radius: 0;
margin: 0;
padding-top: 1.5em;
padding-bottom: 1.5em;
flex-basis: 50%;
}
.modal-controls .modal-button:first-child {
border-radius: 0 0 0 var(--theme-radius);
}
.modal-controls .modal-button:last-child {
border-radius: 0 0 var(--theme-radius) 0
}