mirror of
https://github.com/mue/mue.git
synced 2026-07-27 02:31:06 +02:00
style: Unified spacing to 2 and add editor config
This commit is contained in:
Wessel Tip
@@ -1,31 +1,31 @@
|
||||
// credit: https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
|
||||
// source: https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
|
||||
@mixin animation($animate...) {
|
||||
$max: length($animate);
|
||||
$animations: '';
|
||||
$max: length($animate);
|
||||
$animations: '';
|
||||
|
||||
@for $i from 1 through $max {
|
||||
$animations: #{$animations + nth($animate, $i)};
|
||||
@for $i from 1 through $max {
|
||||
$animations: #{$animations + nth($animate, $i)};
|
||||
|
||||
@if $i < $max {
|
||||
$animations: #{$animations + ', '};
|
||||
}
|
||||
@if $i < $max {
|
||||
$animations: #{$animations + ', '};
|
||||
}
|
||||
}
|
||||
|
||||
-webkit-animation: $animations;
|
||||
-moz-animation: $animations;
|
||||
animation: $animations;
|
||||
-webkit-animation: $animations;
|
||||
-moz-animation: $animations;
|
||||
animation: $animations;
|
||||
}
|
||||
|
||||
@mixin keyframes($animationName) {
|
||||
@-webkit-keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
@-webkit-keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,4 +28,4 @@ $button-colours: (
|
||||
|
||||
$main-parts: (
|
||||
'shadow': 0 0 1rem 0 rgba(0, 0, 0, .2),
|
||||
);
|
||||
);
|
||||
|
||||
@@ -13,46 +13,46 @@
|
||||
@import 'modules/modals/welcome';
|
||||
|
||||
body {
|
||||
background: #2f3640;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #2f3640;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Lexend Deca', 'Roboto' !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
outline: none;
|
||||
font-family: 'Lexend Deca', 'Roboto' !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#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);
|
||||
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: map-get($theme-colours, 'main');
|
||||
opacity: 1;
|
||||
color: map-get($theme-colours, 'main');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c2c2c2;
|
||||
background-color: #c2c2c2;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
color: map-get($theme-colours, 'main-text-color');
|
||||
}
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
color: map-get($theme-colours, 'main-text-color');
|
||||
}
|
||||
|
||||
@@ -198,4 +198,4 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
&:hover {
|
||||
color: map-get($button-colours, 'other');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,4 +22,4 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,4 +189,4 @@ p.description {
|
||||
font-size: 35px !important;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,4 +208,4 @@ input[type=color]::-moz-color-swatch {
|
||||
|
||||
.MuiCheckbox-colorPrimary.Mui-checked {
|
||||
color: map-get($button-colours, 'reset') !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
.Toastify__toast-body {
|
||||
color: #000000 !important;
|
||||
font-size: 16px !important;
|
||||
padding: 15px 20px !important;
|
||||
color: #000000 !important;
|
||||
font-size: 16px !important;
|
||||
padding: 15px 20px !important;
|
||||
}
|
||||
|
||||
.Toastify__toast {
|
||||
border-radius: 12px !important;
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
padding: 0px !important;
|
||||
border-radius: 12px !important;
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.Toastify__close-button {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.Toastify__progress-bar--default {
|
||||
height: 3px !important;
|
||||
background: #000000 !important;
|
||||
height: 3px !important;
|
||||
background: #000000 !important;
|
||||
}
|
||||
|
||||
.Toastify__toast-container {
|
||||
width: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.dark {
|
||||
.Toastify__toast {
|
||||
background-color: #2f3542 !important;
|
||||
}
|
||||
.Toastify__toast {
|
||||
background-color: #2f3542 !important;
|
||||
}
|
||||
|
||||
.Toastify__toast-body,
|
||||
.Toastify__progress-bar--default,
|
||||
.Toastify__close-button {
|
||||
color: white !important;
|
||||
}
|
||||
.Toastify__toast-body,
|
||||
.Toastify__progress-bar--default,
|
||||
.Toastify__close-button {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
@@ -1,52 +1,52 @@
|
||||
#feedbackmodal {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
|
||||
h1,
|
||||
.closeModal {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
h1,
|
||||
.closeModal {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 6em;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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=text] {
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type=range] {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label.values {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
label.values {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,362 +1,362 @@
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modalLink {
|
||||
color: #5352ed;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
color: #5352ed;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.closeModal {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
font-size: 4em;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
font-size: 4em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: grey;
|
||||
}
|
||||
&:hover {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #2f3542 !important;
|
||||
color: white !important;
|
||||
background-color: #2f3542 !important;
|
||||
color: white !important;
|
||||
|
||||
.sidebar {
|
||||
background-color: #2a303b !important;
|
||||
}
|
||||
.sidebar {
|
||||
background-color: #2a303b !important;
|
||||
}
|
||||
|
||||
.tab-list-active {
|
||||
background: rgba(161, 159, 159, 0.8);
|
||||
}
|
||||
.tab-list-active {
|
||||
background: rgba(161, 159, 159, 0.8);
|
||||
}
|
||||
|
||||
.tab-list-item {
|
||||
&:hover {
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
.ReactModal__Content {
|
||||
min-height: 500px;
|
||||
max-height: calc(100vh - 30vh);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 700px) {
|
||||
.ReactModal__Content {
|
||||
min-height: 600px;
|
||||
}
|
||||
.ReactModal__Content {
|
||||
min-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: -20px;
|
||||
width: 900px;
|
||||
margin-top: -20px;
|
||||
width: 900px;
|
||||
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.columns {
|
||||
font-size: 15px;
|
||||
|
||||
li {
|
||||
padding-left: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.columns {
|
||||
font-size: 15px;
|
||||
|
||||
li {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ReactModal__Overlay {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 300ms cubic-bezier(.47, 1.64, .41, .8);
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 300ms cubic-bezier(.47, 1.64, .41, .8);
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--after-open {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--before-close {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
ul.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
height: 100%;
|
||||
background: #f0f0f0;
|
||||
left: 0;
|
||||
border-radius: 12px 0 0 12px;
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
height: 100%;
|
||||
background: #f0f0f0;
|
||||
left: 0;
|
||||
border-radius: 12px 0 0 12px;
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg,
|
||||
li {
|
||||
font-size: 30px;
|
||||
}
|
||||
svg,
|
||||
li {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
font-size: 32px;
|
||||
padding: 5px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
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%;
|
||||
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);
|
||||
background: rgba(219, 219, 219, 0.72);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
li.tab-list-item {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
li.tab-list-item {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
ul.sidebar {
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
ul.sidebar {
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-list-item {
|
||||
&:hover {
|
||||
background: rgba(219, 219, 219, 0.8);
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(219, 219, 219, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
ul.sectionSelector {
|
||||
margin: 0;
|
||||
width: 60%;
|
||||
padding-left: 30%;
|
||||
padding-top: 20px;
|
||||
margin: 0;
|
||||
width: 60%;
|
||||
padding-left: 30%;
|
||||
padding-top: 20px;
|
||||
|
||||
.option {
|
||||
display: inline;
|
||||
padding: 15px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.option {
|
||||
display: inline;
|
||||
padding: 15px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
ul.sectionSelector {
|
||||
span {
|
||||
display: none;
|
||||
padding: 5px !important;
|
||||
}
|
||||
ul.sectionSelector {
|
||||
span {
|
||||
display: none;
|
||||
padding: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
width: 60%;
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1300px) {
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
}
|
||||
.tab-content {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.modalNavbar {
|
||||
position: absolute;
|
||||
left: 20rem;
|
||||
top: 1rem;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 20rem;
|
||||
top: 1rem;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
margin-right: 0.5rem;
|
||||
padding: 3px;
|
||||
}
|
||||
svg {
|
||||
margin-right: 0.5rem;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.modalNavbar {
|
||||
left: 6rem;
|
||||
}
|
||||
.modalNavbar {
|
||||
left: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
span,
|
||||
svg {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
span,
|
||||
svg {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
li.navbar-item {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
li.navbar-item {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabIndicator {
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: #000;
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.tabContent {
|
||||
left: 20px;
|
||||
}
|
||||
.tabContent {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
ul.sidebar {
|
||||
width: 310px;
|
||||
align-items: center;
|
||||
}
|
||||
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;
|
||||
|
||||
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: 13px;
|
||||
background: #bdc3c7;
|
||||
border-top-right-radius: map-get($modal, 'border-radius');
|
||||
border-bottom-right-radius: map-get($modal, 'border-radius');
|
||||
width: 13px;
|
||||
background: #bdc3c7;
|
||||
border-top-right-radius: map-get($modal, 'border-radius');
|
||||
border-bottom-right-radius: map-get($modal, 'border-radius');
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #34495e;
|
||||
border-top-right-radius: map-get($modal, 'border-radius');
|
||||
border-bottom-right-radius: map-get($modal, 'border-radius');
|
||||
background: #34495e;
|
||||
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;
|
||||
}
|
||||
width: 96px;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
.updateContent {
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
|
||||
.closeModal {
|
||||
margin-top: 10px;
|
||||
font-size: 45px;
|
||||
}
|
||||
.closeModal {
|
||||
margin-top: 10px;
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,58 +1,60 @@
|
||||
.dark {
|
||||
h2.subtitle, svg {
|
||||
color: white !important;
|
||||
}
|
||||
h2.subtitle, svg {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeModalText {
|
||||
line-height: 2px;
|
||||
line-height: 2px;
|
||||
|
||||
h2.subtitle {
|
||||
font-size: 24px;
|
||||
color: #535353;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2.subtitle {
|
||||
font-size: 24px;
|
||||
color: #535353;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1.welcometitle {
|
||||
font-size: 50px;
|
||||
}
|
||||
h1.welcometitle {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeContent {
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
line-height: 20px !important;
|
||||
color: #5352ED;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
line-height: 20px !important;
|
||||
color: #5352ED;
|
||||
cursor: pointer;
|
||||
|
||||
img.icon, svg {
|
||||
margin-top: -12px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: ease 0.2s;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.7rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
img.icon, svg {
|
||||
margin-top: -12px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: ease 0.2s;
|
||||
|
||||
img, svg {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.7rem;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeLink {
|
||||
color: black !important;
|
||||
}
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
// The following CSS is to work around some assumptions made by the react-color-gradient-picker
|
||||
* {
|
||||
box-sizing: inherit; // Required to work around https://github.com/arthay/react-color-gradient-picker/issues/11
|
||||
box-sizing: inherit; // Required to work around https://github.com/arthay/react-color-gradient-picker/issues/11
|
||||
}
|
||||
|
||||
div.picker-area > div.preview > div.color-hue-alpha > div.alpha,
|
||||
div.color-preview-area > div > div:nth-child(5) {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-color-picker {
|
||||
margin: 8px -12px;
|
||||
margin: 8px -12px;
|
||||
}
|
||||
|
||||
.input-field .label {
|
||||
color: inherit;
|
||||
}
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user