2022-04-08 13:48:36 +00:00
|
|
|
@import 'scss/variables';
|
2021-03-20 12:55:20 +00:00
|
|
|
|
2021-09-05 13:19:19 +00:00
|
|
|
@import 'modules/sidebar';
|
|
|
|
@import 'modules/navbar';
|
|
|
|
@import 'modules/tab-content';
|
|
|
|
@import 'modules/links';
|
|
|
|
@import 'modules/scrollbars';
|
|
|
|
|
2021-03-20 12:55:20 +00:00
|
|
|
@import 'settings/main';
|
|
|
|
|
2021-04-14 14:49:07 +00:00
|
|
|
@import 'marketplace/main';
|
2021-03-21 22:21:37 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
.Overlay {
|
|
|
|
position: fixed;
|
|
|
|
z-index: 100;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
width: 100vw;
|
|
|
|
height: 100vh;
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
}
|
|
|
|
|
2021-02-27 13:46:41 +00:00
|
|
|
.Modal {
|
2022-04-08 13:48:36 +00:00
|
|
|
@include themed() {
|
|
|
|
color: t($color);
|
|
|
|
}
|
2021-03-17 13:01:53 +00:00
|
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
|
|
|
opacity: 1;
|
|
|
|
z-index: -2;
|
|
|
|
transition-timing-function: ease-in;
|
|
|
|
border-radius: map-get($modal, 'border-radius');
|
|
|
|
user-select: none;
|
2022-04-08 13:48:36 +00:00
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
transform: scale(0);
|
|
|
|
transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
|
2021-03-17 13:01:53 +00:00
|
|
|
|
|
|
|
&:focus {
|
|
|
|
outline: 0;
|
|
|
|
}
|
2021-02-27 13:46:41 +00:00
|
|
|
}
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
.closePositioning {
|
2021-03-17 13:01:53 +00:00
|
|
|
position: absolute;
|
2022-04-08 13:48:36 +00:00
|
|
|
top: 3rem;
|
|
|
|
right: 3rem;
|
|
|
|
}
|
2021-02-27 13:46:41 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
.closeModal {
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
padding: 0.5em;
|
|
|
|
border-radius: 12px;
|
|
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
|
|
font-size: 2em;
|
|
|
|
}
|
2021-03-17 13:01:53 +00:00
|
|
|
&:hover {
|
2022-04-08 13:48:36 +00:00
|
|
|
background: rgba(121, 121, 121, 0.226);
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|
2021-02-27 13:46:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.ReactModal__Html--open,
|
|
|
|
.ReactModal__Body--open {
|
2021-03-17 13:01:53 +00:00
|
|
|
overflow: hidden;
|
2021-02-27 13:46:41 +00:00
|
|
|
}
|
|
|
|
|
2021-09-05 13:19:19 +00:00
|
|
|
/* modal transition */
|
2021-04-15 16:15:57 +00:00
|
|
|
.ReactModal__Content--after-open {
|
2021-03-17 13:01:53 +00:00
|
|
|
opacity: 1;
|
|
|
|
transform: scale(1);
|
2021-02-27 13:46:41 +00:00
|
|
|
}
|
|
|
|
|
2021-04-15 16:15:57 +00:00
|
|
|
.ReactModal__Content--before-close {
|
2021-03-17 13:01:53 +00:00
|
|
|
opacity: 0;
|
|
|
|
transform: scale(0);
|
2021-02-27 13:46:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#modal {
|
2022-04-08 13:48:36 +00:00
|
|
|
height: 80vh;
|
|
|
|
width: clamp(60vw, 1200px, 90vw);
|
2022-08-07 17:36:56 +00:00
|
|
|
@include themed() {
|
|
|
|
background-color: t($modal-background);
|
|
|
|
}
|
2021-04-13 17:25:55 +00:00
|
|
|
}
|
|
|
|
|
2021-09-05 13:19:19 +00:00
|
|
|
/* fixes for font size on extension */
|
2021-05-20 11:27:52 +00:00
|
|
|
label,
|
|
|
|
p,
|
|
|
|
span.modalLink {
|
2021-04-17 19:01:24 +00:00
|
|
|
font-size: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
2021-09-26 17:03:32 +00:00
|
|
|
font-size: 2rem;
|
|
|
|
margin-bottom: 0;
|
2021-04-17 19:01:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
font-size: 1.17rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
h5 {
|
|
|
|
font-size: 0.8rem;
|
|
|
|
}
|
2021-10-12 21:18:47 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
.loaderHolder {
|
|
|
|
display: flex;
|
|
|
|
gap: 15px;
|
|
|
|
flex-flow: column;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
#loader {
|
|
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
|
|
height: 50px;
|
|
|
|
@include themed() {
|
|
|
|
border: 3px solid t($modal-sidebar);
|
|
|
|
border-radius: 50%;
|
|
|
|
border-top-color: t($modal-sidebarActive);
|
2021-10-12 21:18:47 +00:00
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
animation: spin 1s ease-in-out infinite;
|
|
|
|
-webkit-animation: spin 1s ease-in-out infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
to {
|
|
|
|
-webkit-transform: rotate(360deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
|
|
to {
|
|
|
|
-webkit-transform: rotate(360deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.headerExtras {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
gap: -1px;
|
2022-10-21 21:33:30 +00:00
|
|
|
padding: 10px 0;
|
|
|
|
div:nth-child(1) {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
gap: 10px;
|
|
|
|
}
|
|
|
|
form {
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
.link {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
gap: 15px;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-08-01 17:28:02 +00:00
|
|
|
.marketplaceCondition {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row !important;
|
|
|
|
gap: -1px;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
.languageSettings {
|
|
|
|
margin-bottom: 15px;
|
|
|
|
.MuiFormGroup-root {
|
|
|
|
gap: 5px;
|
|
|
|
}
|
|
|
|
.MuiFormControl-root {
|
|
|
|
width: 100% !important;
|
|
|
|
gap: 15px;
|
|
|
|
.MuiFormControlLabel-root {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 5px 5px 5px 20px;
|
|
|
|
@include themed() {
|
|
|
|
background: t($modal-sidebar);
|
|
|
|
border-radius: t($borderRadius);
|
|
|
|
&:hover {
|
|
|
|
background: t($modal-sidebarActive);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.sliderTitle {
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 15px 0 15px 0;
|
2022-04-09 22:09:27 +00:00
|
|
|
.link {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
gap: 15px;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
}
|
2022-04-30 21:10:15 +00:00
|
|
|
|
|
|
|
.moreSettings {
|
|
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 25px;
|
|
|
|
margin-top: 20px;
|
2023-01-21 12:10:40 +00:00
|
|
|
transition: 0.5s;
|
2022-04-30 21:10:15 +00:00
|
|
|
@include themed() {
|
|
|
|
background: t($modal-sidebar);
|
|
|
|
border-radius: t($borderRadius);
|
|
|
|
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
|
|
|
&:hover {
|
|
|
|
background: t($modal-sidebarActive);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
svg {
|
|
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
.left {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
align-items: center;
|
|
|
|
gap: 25px;
|
|
|
|
}
|
|
|
|
.content {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
}
|
|
|
|
.action {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
gap: 20px;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2022-05-11 15:09:26 +00:00
|
|
|
}
|
2022-08-16 11:09:57 +00:00
|
|
|
|
|
|
|
.reminder-info {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
padding: 15px;
|
|
|
|
gap: 15px;
|
|
|
|
@include themed() {
|
2023-01-21 12:10:40 +00:00
|
|
|
background-color: t($modal-secondaryColour);
|
2022-08-16 11:09:57 +00:00
|
|
|
border-radius: t($borderRadius);
|
2023-01-21 12:10:40 +00:00
|
|
|
border: 1px solid t($modal-sidebarActive);
|
2022-08-16 11:09:57 +00:00
|
|
|
}
|
|
|
|
button {
|
|
|
|
@include basicIconButton(5px, 5px, modal);
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
gap: 15px;
|
|
|
|
svg {
|
|
|
|
margin: 0 !important;
|
|
|
|
}
|
|
|
|
}
|
2023-01-21 12:10:40 +00:00
|
|
|
svg {
|
|
|
|
margin: 0 !important;
|
|
|
|
}
|
2022-08-16 11:09:57 +00:00
|
|
|
@extend %tabText;
|
|
|
|
}
|
|
|
|
|
|
|
|
.quoteSkeleton {
|
|
|
|
margin-top: 5px;
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
gap: 5px;
|
|
|
|
align-items: center;
|
|
|
|
div {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
}
|
|
|
|
.text {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
.skeletonAuthor {
|
|
|
|
font-size: smaller;
|
|
|
|
padding: 5px;
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
align-items: center;
|
|
|
|
gap: 25px;
|
|
|
|
padding: 0 20px 0 5px;
|
|
|
|
svg {
|
|
|
|
@include themed() {
|
|
|
|
background-color: t($modal-sidebar);
|
|
|
|
padding: 10px;
|
|
|
|
border-radius: t($borderRadius);
|
|
|
|
place-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include themed() {
|
|
|
|
background-color: t($modal-sidebarActive);
|
|
|
|
border-radius: t($borderRadius);
|
|
|
|
}
|
|
|
|
.title {
|
|
|
|
font-size: medium !important;
|
|
|
|
}
|
|
|
|
.subtitle {
|
|
|
|
font-size: smaller !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.quickLinksSkeleton {
|
|
|
|
.circles {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: row;
|
|
|
|
gap: 5px;
|
|
|
|
div {
|
|
|
|
margin-top: 10px;
|
|
|
|
padding: 3px;
|
|
|
|
height: 20px;
|
|
|
|
width: 20px;
|
|
|
|
border-radius: 100%;
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
@include themed() {
|
|
|
|
background-color: t($modal-sidebarActive);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.clockSkeleton {
|
|
|
|
font-size: 30px !important;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|