mirror of
https://github.com/mue/mue.git
synced 2026-07-25 17:51:14 +02:00
141 lines
2.1 KiB
SCSS
141 lines
2.1 KiB
SCSS
@import '../../../../scss/variables';
|
|
|
|
@import 'modules/sidebar';
|
|
@import 'modules/navbar';
|
|
@import 'modules/tab-content';
|
|
@import 'modules/links';
|
|
@import 'modules/scrollbars';
|
|
|
|
@import 'settings/main';
|
|
@import 'settings/buttons';
|
|
|
|
@import 'marketplace/main';
|
|
|
|
.Modal {
|
|
color: var(--modal-text);
|
|
background-color: var(--background);
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
|
border: none;
|
|
opacity: 1;
|
|
z-index: -2;
|
|
transition-timing-function: ease-in;
|
|
border-radius: map-get($modal, 'border-radius');
|
|
user-select: none;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #34495e #bdc3c7;
|
|
position: relative;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.closeModal {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 2rem;
|
|
font-size: 4em;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: grey;
|
|
}
|
|
}
|
|
|
|
.ReactModal__Html--open,
|
|
.ReactModal__Body--open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.Overlay {
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ReactModal__Content {
|
|
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
|
|
overflow-y: auto;
|
|
position: relative;
|
|
|
|
transform: scale(0);
|
|
transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
|
|
}
|
|
|
|
/* modal transition */
|
|
.ReactModal__Content--after-open {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.ReactModal__Content--before-close {
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
}
|
|
|
|
@media only screen and (max-height: 700px) {
|
|
.ReactModal__Content {
|
|
min-height: 500px;
|
|
max-height: calc(100vh - 30vh);
|
|
}
|
|
}
|
|
|
|
/* main modal */
|
|
.mainModal {
|
|
padding: 25px;
|
|
}
|
|
|
|
#modal {
|
|
position: absolute;
|
|
margin: auto;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 80%;
|
|
width: 60%;
|
|
}
|
|
|
|
@media (max-width: 1700px) {
|
|
#modal {
|
|
width: 80% !important;
|
|
}
|
|
}
|
|
|
|
/* fixes for font size on extension */
|
|
label,
|
|
p,
|
|
span.modalLink {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.17rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.tab-content {
|
|
hr {
|
|
height: 5px;
|
|
background: rgba(196, 196, 196, 0.74);
|
|
outline: none;
|
|
border: none;
|
|
margin: 50px 0 30px 0;
|
|
}
|
|
} |