lbry-desktop/src/ui/scss/component/_modal.scss
2019-07-02 00:04:13 -04:00

86 lines
1.6 KiB
SCSS

.modal-overlay {
top: 0;
left: 0;
bottom: 0;
right: 0;
align-items: center;
background-color: rgba($lbry-black, 0.7);
display: flex;
justify-content: center;
position: fixed;
z-index: 9999;
[data-mode='dark'] & {
background-color: rgba($lbry-black, 0.7);
}
}
.modal {
background-color: $lbry-white;
border: 1px solid $lbry-gray-3;
line-height: 1.55;
max-width: var(--modal-width);
overflow: auto;
padding: var(--spacing-large);
word-break: break-word;
@media (min-width: 501px) {
min-width: 500px;
}
[data-mode='dark'] & {
background-color: $lbry-black;
border-color: $lbry-gray-5;
}
.card__content:not(:last-child) {
margin-bottom: var(--spacing-large);
}
.button.button--alt {
background-color: $lbry-white; // Set modal buttons bg color
[data-mode='dark'] & {
background-color: transparent;
}
}
}
.modal__header {
font-size: 2em;
}
.error-modal__content {
display: flex;
padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
}
.error-modal__warning-symbol {
height: 28px;
margin-top: -5px;
}
.download-started-modal__file-path {
word-break: break-all;
}
.error-modal {
max-width: none;
width: var(--modal-width);
white-space: pre-wrap;
}
.error-modal__error-list {
max-width: var(--modal-width);
max-height: 400px;
margin-top: var(--spacing-small);
padding: var(--spacing-small);
background-color: $lbry-red-1;
border-left: 2px solid $lbry-red-5;
color: $lbry-red-5;
list-style: none;
overflow-y: scroll;
white-space: pre-wrap;
}