mirror of
https://github.com/mue/mue.git
synced 2026-07-22 08:17:28 +02:00
David Ralph
@@ -8,14 +8,58 @@
|
||||
@import 'modules/modal';
|
||||
@import 'modules/settings';
|
||||
@import 'modules/toast';
|
||||
@import 'modules/miscellaneous';
|
||||
|
||||
body {
|
||||
background: #2f3640;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#center {
|
||||
margin-left: 2vw;
|
||||
margin-right: 2vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#backgroundImage {
|
||||
height:100vh;
|
||||
height: 100vh;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
z-index: 0;
|
||||
border: none;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lexend Deca';
|
||||
src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
body {
|
||||
background: #2f3640;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: 'Lexend Deca';
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#center {
|
||||
margin-left: 2vw;
|
||||
margin-right: 2vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#root {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lexend Deca';
|
||||
src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
|
||||
}
|
||||
@@ -1,14 +1,21 @@
|
||||
.Modal {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
|
||||
border: none;
|
||||
opacity: 1;
|
||||
z-index: -2;
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
cursor: hand;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a.modalLink {
|
||||
color: #5352ed;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Overlay {
|
||||
@@ -19,83 +26,44 @@
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked+.slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:focus+.slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
|
||||
.Modal:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.closeModal {
|
||||
float: right;
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.closeModal:hover {
|
||||
color: grey;
|
||||
&:hover {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #2f3542 !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ReactModal__Html--open,
|
||||
.ReactModal__Body--open {
|
||||
overflow: hidden; /* prevents background page from scrolling when the modal is open */
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.ReactModal__Content {
|
||||
width: 500px;
|
||||
max-width: 600px;
|
||||
max-height: calc(100vh - 10vh);
|
||||
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -3,8 +3,6 @@
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.quote {
|
||||
margin-left: 30%;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
input[type=text] {
|
||||
font-size: calc(5px + 1.2vmin);
|
||||
background: none;
|
||||
background: transparent;
|
||||
border: 2px solid #ffff;
|
||||
padding: 10px;
|
||||
color: #ffff;
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
.Modal {
|
||||
width: auto;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
|
||||
z-index: 4;
|
||||
}
|
||||
$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
@@ -13,12 +6,12 @@
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
@@ -32,36 +25,57 @@
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 34px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
input {
|
||||
&[type=text] {
|
||||
width: 200px;
|
||||
padding: 0.5rem 1rem;
|
||||
box-sizing: border-box;
|
||||
border-image-slice: 1;
|
||||
border-image-source: $gradient;
|
||||
outline: none;
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:checked + .slider {
|
||||
background: $gradient;
|
||||
|
||||
&:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus + .slider {
|
||||
box-shadow: 0 0 1px #e67e22;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
background: #555;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #e67e22;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
|
||||
h4, .switch, .expandIcons {
|
||||
display: inline;
|
||||
font-size: 1.4em;
|
||||
@@ -76,14 +90,12 @@ h4, #engines {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.apply {
|
||||
%settingsButton {
|
||||
height: 45px;
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
transition: 0.25s;
|
||||
background-color: #dd3b67;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
@@ -97,7 +109,6 @@ h4, #engines {
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
top: 0;
|
||||
@@ -117,6 +128,23 @@ h4, #engines {
|
||||
}
|
||||
}
|
||||
|
||||
.apply {
|
||||
@extend %settingsButton;
|
||||
background-color: #dd3b67;
|
||||
&:before {
|
||||
background: $gradient;
|
||||
}
|
||||
}
|
||||
|
||||
.reset {
|
||||
@extend %settingsButton;
|
||||
background-color: #ffb032;
|
||||
margin-left: 20px;
|
||||
&:before {
|
||||
background: linear-gradient(90deg, #dd3b67 0%, #ffb032 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.expandIcons {
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
@@ -126,14 +154,17 @@ h4, #engines {
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
|
||||
|
||||
.extraSettings {
|
||||
display: none;
|
||||
border-left: 10px solid;
|
||||
border-image-slice: 1;
|
||||
border-width: 5px;
|
||||
border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%);
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -145,11 +176,6 @@ li {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.extraSettings > p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.range {
|
||||
-webkit-appearance: none;
|
||||
width: 200px;
|
||||
@@ -160,32 +186,22 @@ li {
|
||||
background: #ecf0f1;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range::-moz-range-thumb {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 200px;
|
||||
padding: 0.5rem 1rem;
|
||||
box-sizing: border-box;
|
||||
border-image-slice: 1;
|
||||
border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
|
||||
outline: none;
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 12px;
|
||||
background: $gradient;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 12px;
|
||||
background: $gradient;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,23 @@
|
||||
width: auto;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
> img {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
> hr {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.copyButton, hr {
|
||||
@@ -30,11 +47,6 @@ hr {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#toast.show {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
from {
|
||||
@@ -82,15 +94,4 @@ hr {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#toast>img {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#toast>hr {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user