client/modal/style.css
/**
* Modal
*/
.Modal {
top: 54px;
border-radius: var(--border-radius);
overflow-x: hidden;
max-width: 320px;
width: 100%;
background-color: var(--modal-background-color);
box-shadow: 0px 0px 4px rgba(43, 55, 66, 0.7);
}
.Modal > div {
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
@media (--narrow-window) {
.Modal {
max-width: 100%;
top: 0;
left: 0;
right: 0;
height: 100%;
transform: none;
border-radius: 0;
}
}
.Modal.hide {
opacity: 0;
}
.Modal .close {
color: var(--font-light-color);
}
.Modal .close:hover,
.Modal .close:active.
.Modal .close:focus {
color: color(var(--font-light-color) shade(20%));
}
.Modal > div > .logo {
height: 44px;
background-color: var(--modal-header-background-color);
border: 7px solid transparent;
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1);
display: block;
}
.Modal .content {
padding: 12px;
}
.Modal .content .title {
margin-top: 0;
}
/**
* Overlay
*/
.Overlay {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
z-index: 200;
}