mirror of
https://github.com/mue/mue.git
synced 2026-07-27 10:41:08 +02:00
refactor: make modals like widgets
This commit is contained in:
David Ralph
@@ -1,16 +1,9 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'modules/settings';
|
||||
@import 'modules/toast';
|
||||
@import 'modules/marketplace';
|
||||
@import 'modules/buttons';
|
||||
@import 'modules/dropdown';
|
||||
|
||||
@import 'modules/modals/main';
|
||||
@import 'modules/modals/feedback';
|
||||
@import 'modules/modals/update';
|
||||
@import 'modules/modals/welcome';
|
||||
|
||||
body {
|
||||
background: #2f3640;
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
.dropdown {
|
||||
select {
|
||||
margin-left: 10px;
|
||||
width: 120px;
|
||||
color: map-get($modal, 'text');
|
||||
background: #f0f0f0;
|
||||
border:none;
|
||||
padding: 10px 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
select#language {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// firefox dropdown
|
||||
@supports (-moz-appearance:none) {
|
||||
select {
|
||||
-moz-appearance: none !important;
|
||||
background: url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat, linear-gradient(180deg, #ffb032 0%, #dd3b67 100%) !important;
|
||||
background-position: calc(100% - 5px) center !important;
|
||||
}
|
||||
}
|
||||
|
||||
.react-date-picker__wrapper {
|
||||
padding: 0.5rem 1rem !important;
|
||||
box-sizing: border-box !important;
|
||||
border-image-slice: 1 !important;
|
||||
border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%) !important;
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.react-date-picker__clear-button, .react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -1,190 +0,0 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type=text] {
|
||||
width: 200px;
|
||||
padding: 0.5rem 1rem;
|
||||
box-sizing: border-box;
|
||||
border-image-slice: 1;
|
||||
border-image-source: map-get($theme-colours, 'gradient');
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:checked+.slider {
|
||||
background: map-get($theme-colours, 'gradient');
|
||||
|
||||
&:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus+.slider {
|
||||
box-shadow: 0 0 1px #e67e22;
|
||||
}
|
||||
}
|
||||
|
||||
h4,
|
||||
.switch {
|
||||
display: inline;
|
||||
font-size: 1.4em;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
h4,
|
||||
#engines {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 5px;
|
||||
margin: 0;
|
||||
|
||||
>label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.range {
|
||||
-webkit-appearance: none;
|
||||
width: 200px;
|
||||
height: 15px;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
background: #ecf0f1;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 12px;
|
||||
background: map-get($theme-colours, 'gradient');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
background: map-get($theme-colours, 'gradient');
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=color] {
|
||||
border-radius: 100%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
box-shadow: map-get($main-parts, 'shadow');
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
vertical-align: middle;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=color]::-moz-color-swatch {
|
||||
border-radius: 100%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
box-shadow: map-get($main-parts, 'shadow');
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
vertical-align: middle;
|
||||
|
||||
&::-moz-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.customBackgroundHex {
|
||||
font-size: 1.2em;
|
||||
padding-left: 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Dark Theme
|
||||
.dark {
|
||||
#blurRange, #brightnessRange {
|
||||
background-color: #535c68;
|
||||
}
|
||||
|
||||
#customBackground, #backgroundAPI, #searchEngine, #language, #greetingName, #customSearchEngine {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.choices {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.modalLink {
|
||||
color: #3498db;
|
||||
}
|
||||
}
|
||||
|
||||
.nodropdown {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.newFeature {
|
||||
color: #ff4757;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#customcss, #customjs {
|
||||
font-family: Consolas !important;
|
||||
border: solid 1px black !important;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.MuiCheckbox-colorPrimary.Mui-checked {
|
||||
color: map-get($button-colours, 'reset') !important;
|
||||
}
|
||||
|
||||
.reminder-info {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 20px;
|
||||
color: #000;
|
||||
background: #f0f0f0;
|
||||
max-width: 300px;
|
||||
border-radius: 0.7em;
|
||||
display: none;
|
||||
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
#feedbackmodal {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
|
||||
h1,
|
||||
.closeModal {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
border-radius: 48px;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 15px 20px;
|
||||
font-size: 1.5em;
|
||||
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label.values {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
@@ -1,333 +0,0 @@
|
||||
.Modal {
|
||||
color: map-get($modal, 'text');
|
||||
background-color: map-get($modal, 'background');
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
border: none;
|
||||
opacity: 1;
|
||||
z-index: -2;
|
||||
padding: 25px;
|
||||
transition: 0.6s;
|
||||
transition-timing-function: ease-in;
|
||||
border-radius: map-get($modal, 'border-radius');
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #34495e #bdc3c7;
|
||||
position: relative;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modalLink {
|
||||
color: #5352ed;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.closeModal {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
font-size: 4em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #2f3542 !important;
|
||||
color: white !important;
|
||||
|
||||
.sidebar {
|
||||
background-color: #2a303b !important;
|
||||
}
|
||||
|
||||
.tab-list-active {
|
||||
background: rgba(161, 159, 159, 0.8);
|
||||
}
|
||||
|
||||
.tab-list-item {
|
||||
&:hover {
|
||||
background: rgba(161, 159, 159, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
min-height: calc(100vh - 30vh);
|
||||
max-height: calc(100vh - 10vh);
|
||||
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 700px) {
|
||||
.ReactModal__Content {
|
||||
min-height: 500px;
|
||||
max-height: calc(100vh - 30vh);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 700px) {
|
||||
.ReactModal__Content {
|
||||
min-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 300ms cubic-bezier(.47, 1.64, .41, .8);
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--after-open {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--before-close {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
ul.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
height: 100vh;
|
||||
background: #f0f0f0;
|
||||
left: 0;
|
||||
border-radius: 12px 0 0 12px;
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg,
|
||||
li {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
font-size: 32px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 3px;
|
||||
background: rgba(196, 196, 196, 0.74);
|
||||
width: 75%;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 24px;
|
||||
padding: 5px 30px 5px 30px;
|
||||
cursor: pointer;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#modal {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.tab-list-active {
|
||||
background: rgba(219, 219, 219, 0.72);
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 898px) {
|
||||
ul.sidebar {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
li.tab-list-item {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
ul.sidebar {
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-list-item {
|
||||
&:hover {
|
||||
background: rgba(219, 219, 219, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1920px) {
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 7%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.modalNavbar {
|
||||
position: absolute;
|
||||
left: 20rem;
|
||||
top: 1rem;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
margin-right: 0.5rem;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.modalNavbar {
|
||||
left: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
span,
|
||||
svg {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
li.navbar-item {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.tabContent {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
ul.sidebar {
|
||||
width: 310px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item-active {
|
||||
background: map-get($theme-colours, 'gradient');
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
svg {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
background: map-get($theme-colours, 'gradient');
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
border-top-right-radius: map-get($modal, 'border-radius');
|
||||
border-bottom-right-radius: map-get($modal, 'border-radius');
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #636e72;
|
||||
border-top-right-radius: map-get($modal, 'border-radius');
|
||||
border-bottom-right-radius: map-get($modal, 'border-radius');
|
||||
}
|
||||
|
||||
.abouticon {
|
||||
width: 96px;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
.updateContent {
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
|
||||
.closeModal {
|
||||
margin-top: 10px;
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
.dark {
|
||||
h2.subtitle, svg {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeModalText {
|
||||
line-height: 2px;
|
||||
|
||||
h2.subtitle {
|
||||
font-size: 24px;
|
||||
color: #535353;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1.welcometitle {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeContent {
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
line-height: 20px !important;
|
||||
color: #5352ED;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
img.icon, svg {
|
||||
margin-top: -12px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: ease 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.7rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeLink {
|
||||
color: black !important;
|
||||
}
|
||||
Reference in New Issue
Block a user