mirror of
https://github.com/mue/mue.git
synced 2026-07-20 23:44:07 +02:00
feat: add work in progress 7.0 code
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
@@ -29,3 +29,26 @@
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin themed() {
|
||||
@each $theme, $map in $themes {
|
||||
.#{$theme} & {
|
||||
$theme-map: () !global;
|
||||
@each $key, $submap in $map {
|
||||
$value: map-get(map-get($themes, $theme), '#{$key}');
|
||||
$theme-map: map-merge(
|
||||
$theme-map,
|
||||
(
|
||||
$key: $value,
|
||||
)
|
||||
) !global;
|
||||
}
|
||||
@content;
|
||||
$theme-map: null !global;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function t($key) {
|
||||
@return map-get($theme-map, $key);
|
||||
}
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
$main-text: map-get($theme-colours, 'main');
|
||||
$modal-text: map-get($modal, 'text');
|
||||
$background: map-get($modal, 'background');
|
||||
$sidebar: map-get($modal, 'sidebar');
|
||||
$tab-active: map-get($modal, 'tab-active');
|
||||
$photo-info: map-get($theme-colours, 'photo-info');
|
||||
$modal-link: map-get($modal, 'modal-link');
|
||||
|
||||
$main-text-dark: map-get($theme-colours, 'secondary');
|
||||
$modal-text-dark: map-get($theme-colours, 'main');
|
||||
$background-dark: map-get($modal, 'background-dark');
|
||||
$sidebar-dark: map-get($modal, 'sidebar-dark');
|
||||
$tab-active-dark: map-get($modal, 'tab-active-dark');
|
||||
$photo-info-dark: map-get($theme-colours, 'photo-info-dark');
|
||||
$modal-link-dark: map-get($modal, 'modal-link-dark');
|
||||
|
||||
:root {
|
||||
--main-text: #{$main-text};
|
||||
--modal-text: #{$modal-text};
|
||||
--background: #{$background};
|
||||
--sidebar: #{$sidebar};
|
||||
--tab-active: #{$tab-active};
|
||||
--photo-info: #{$photo-info};
|
||||
--modal-link: #{$modal-link};
|
||||
}
|
||||
|
||||
.dark {
|
||||
--main-text: #{$main-text-dark};
|
||||
--modal-text: #{$modal-text-dark};
|
||||
--background: #{$background-dark};
|
||||
--sidebar: #{$sidebar-dark};
|
||||
--tab-active: #{$tab-active-dark};
|
||||
--photo-info: #{$photo-info-dark};
|
||||
--modal-link: #{$modal-link-dark};
|
||||
}
|
||||
|
||||
@@ -1,4 +1,19 @@
|
||||
@use 'sass:map';
|
||||
@import 'mixins';
|
||||
|
||||
$background: 'background';
|
||||
$boxShadow: 'boxShadow';
|
||||
$borderRadius: 'borderRadius';
|
||||
$color: 'color';
|
||||
$btn-background: 'btn-background';
|
||||
$btn-backgroundHover: 'btn-backgroundHover';
|
||||
$subColor: 'subColor';
|
||||
$modal-background: 'modal-background';
|
||||
$modal-text: 'modal-text';
|
||||
$modal-sidebar: 'modal-sidebar';
|
||||
$modal-sidebarActive: 'modal-sidebarActive';
|
||||
$link: 'link';
|
||||
$weather: 'weather';
|
||||
|
||||
$theme-colours: (
|
||||
'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
|
||||
@@ -6,7 +21,7 @@ $theme-colours: (
|
||||
'secondary': rgba(0, 0, 0, 1),
|
||||
'main-text-color': rgba(242, 243, 244, 1),
|
||||
'photo-info': #2d3436,
|
||||
'photo-info-dark': #ffff
|
||||
'photo-info-dark': #ffff,
|
||||
);
|
||||
|
||||
$modal: (
|
||||
@@ -21,15 +36,228 @@ $modal: (
|
||||
'sidebar-dark': rgb(53, 59, 72),
|
||||
'tab-active-dark': rgba(65, 71, 84, 0.9),
|
||||
'modal-link': #5352ed,
|
||||
'modal-link-dark': #3498db
|
||||
'modal-link-dark': #3498db,
|
||||
);
|
||||
|
||||
$button-colours: (
|
||||
'confirm': rgba(46, 213, 115, 1),
|
||||
'reset': rgba(255, 71, 87, 1),
|
||||
'other': rgba(83, 82, 237, 1)
|
||||
'other': rgba(83, 82, 237, 1),
|
||||
);
|
||||
|
||||
$main-parts: (
|
||||
'shadow': 0 0 1rem 0 rgba(0, 0, 0, 0.2)
|
||||
$ui-elements: (
|
||||
'background': rgba(0, 0, 0, 0.7),
|
||||
'backgroundBlur': 15px,
|
||||
'color': rgb(255, 255, 255),
|
||||
'borderRadius': 12px,
|
||||
'boxShadow': 0 0 0 1px #484848,
|
||||
);
|
||||
|
||||
$themes: (
|
||||
light: (
|
||||
'weather': #333333,
|
||||
'background': rgba(255, 255, 255, 0.7),
|
||||
'backgroundBlur': 15px,
|
||||
'color': rgb(0, 0, 0),
|
||||
'subColor': #333333,
|
||||
'borderRadius': 12px,
|
||||
'boxShadow': 0 0 0 1px #E7E3E9,
|
||||
'btn-background': #fff,
|
||||
'btn-backgroundHover': rgba(247, 250, 252, 0.9),
|
||||
'modal-background': #fff,
|
||||
'modal-sidebar': rgba(240, 240, 240, 1),
|
||||
'modal-sidebarActive': rgba(219, 219, 219, 0.72),
|
||||
'link': rgba(83, 82, 237, 1),
|
||||
),
|
||||
dark: (
|
||||
'weather': #e7e7e7,
|
||||
'background': rgba(0, 0, 0, 0.7),
|
||||
'backgroundBlur': 15px,
|
||||
'color': rgb(255, 255, 255),
|
||||
'subColor': #c2c2c2,
|
||||
'borderRadius': 12px,
|
||||
'boxShadow': 0 0 0 1px #484848,
|
||||
'btn-background': #222,
|
||||
'btn-backgroundHover': #565656,
|
||||
'modal-background': #2f3542,
|
||||
'modal-sidebar': #353b48,
|
||||
'modal-sidebarActive': rgba(65, 71, 84, 0.9),
|
||||
'link': rgba(83, 82, 237, 1),
|
||||
),
|
||||
);
|
||||
|
||||
%basic {
|
||||
@include themed() {
|
||||
background: t($background);
|
||||
border-radius: t($borderRadius);
|
||||
color: t($color);
|
||||
box-shadow: t($boxShadow);
|
||||
}
|
||||
backdrop-filter: blur(map.get($ui-elements, 'backgroundBlur'));
|
||||
.title {
|
||||
font-size: 18px;
|
||||
@include themed() {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
@include themed() {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%tabText {
|
||||
.mainTitle {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
@include themed() {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
@include themed() {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
@include themed() {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
.link {
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
@include themed() {
|
||||
color: t($link);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin modal-button($type) {
|
||||
@include themed() {
|
||||
@if $type == 'standard' {
|
||||
background: t($modal-sidebar);
|
||||
border: 3px solid t($modal-sidebarActive);
|
||||
color: t($color);
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
border-radius: 12px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row-reverse;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
&:active {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
&:focus {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
&:disabled {
|
||||
background: t($modal-sidebarActive);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin basicIconButton($padding, $font-size, $type) {
|
||||
@include themed() {
|
||||
@if $type == 'ui' {
|
||||
background: t($btn-background);
|
||||
color: t($color);
|
||||
box-shadow: t($boxShadow);
|
||||
border-radius: t($borderRadius);
|
||||
&:hover {
|
||||
background: t($btn-backgroundHover);
|
||||
}
|
||||
&:active {
|
||||
background: t($btn-backgroundHover);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
&:focus {
|
||||
background: t($btn-backgroundHover);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
}
|
||||
@if $type == 'modal-text' {
|
||||
color: t($color);
|
||||
background: none;
|
||||
border-radius: t($borderRadius);
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 3px solid t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
@if $type == 'modal' {
|
||||
background: t($modal-sidebar);
|
||||
border: 3px solid t($modal-sidebarActive);
|
||||
color: t($color);
|
||||
border-radius: t($borderRadius);
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
&:active {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
&:focus {
|
||||
background: t($modal-sidebarActive);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
}
|
||||
@if $type == 'legacy' {
|
||||
background: none;
|
||||
color: #fff;
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: 0 0 0 0 !important;
|
||||
&:hover {
|
||||
background-color: rgb(66 66 66 / 23%);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgb(66 66 66 / 23%);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
&:focus {
|
||||
background-color: rgb(66 66 66 / 23%);
|
||||
box-shadow: 0 0 0 1px t($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
padding: $padding;
|
||||
font-size: $font-size;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 0.5s;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@mixin legacyIconButton($padding, $font-size) {
|
||||
@include themed() {
|
||||
color: t($color);
|
||||
}
|
||||
&:hover {
|
||||
@include themed() {
|
||||
background: t($btn-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,95 +1,119 @@
|
||||
@import 'variables';
|
||||
@import 'themes';
|
||||
|
||||
@import 'modules/toast';
|
||||
@import 'modules/buttons';
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Lexend Deca', 'Montserrat', sans-serif !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);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: map-get($theme-colours, 'main');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c2c2c2;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
color: map-get($theme-colours, 'main-text-color');
|
||||
}
|
||||
|
||||
/* accessibility */
|
||||
.textBorder {
|
||||
filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 #111c);
|
||||
}
|
||||
|
||||
.no-animations {
|
||||
.ReactModal__Content,
|
||||
button,
|
||||
svg,
|
||||
input[type=text],
|
||||
.MuiSwitch-switchBase,
|
||||
.tooltipTitle,
|
||||
.quicklinks-container img {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* fonts (imported from fontsource) */
|
||||
@font-face {
|
||||
font-family: 'Lexend Deca';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-400-normal.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lexend Deca';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-ext-400-normal.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url('../../node_modules/@fontsource/montserrat/files/montserrat-cyrillic-400-normal.woff2') format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
@import 'variables';
|
||||
|
||||
@import 'modules/toast';
|
||||
@import 'modules/buttons';
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Lexend Deca', 'Montserrat', sans-serif !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#center {
|
||||
font-size: calc(10px + 2vmin);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0;
|
||||
|
||||
#widgets {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
&.no-textBorder {
|
||||
text-shadow: none !important;
|
||||
|
||||
.quote {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@include themed() {
|
||||
color: t($color);
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #c2c2c2;
|
||||
}
|
||||
|
||||
#root {
|
||||
@include themed() {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
||||
/* accessibility */
|
||||
.textBorder {
|
||||
filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 #111c);
|
||||
}
|
||||
|
||||
.no-animations {
|
||||
.ReactModal__Content,
|
||||
button,
|
||||
svg,
|
||||
input[type='text'],
|
||||
.MuiSwitch-switchBase,
|
||||
.tooltipTitle,
|
||||
.quicklinks-container img {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* fonts (imported from fontsource) */
|
||||
@font-face {
|
||||
font-family: 'Lexend Deca';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-400-normal.woff2')
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
|
||||
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lexend Deca';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-ext-400-normal.woff2')
|
||||
format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
|
||||
U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url('../../node_modules/@fontsource/montserrat/files/montserrat-cyrillic-400-normal.woff2')
|
||||
format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
%settingsButton {
|
||||
/*%settingsButton {
|
||||
transition: ease 0.33s;
|
||||
color: map-get($theme-colours, 'main');
|
||||
cursor: pointer;
|
||||
@@ -110,3 +110,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import '../variables';
|
||||
|
||||
.Toastify__toast-body {
|
||||
color: var(--modal-text) !important;
|
||||
font-size: 16px !important;
|
||||
padding: 15px 20px !important;
|
||||
background: var(--background) !important;
|
||||
}
|
||||
|
||||
.Toastify__toast {
|
||||
@@ -11,13 +11,11 @@
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
padding: 0px !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.Toastify__close-button {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
color: var(--modal-text) !important;
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.Toastify__progress-bar--default {
|
||||
@@ -31,5 +29,5 @@
|
||||
}
|
||||
|
||||
.Toastify__toast--default {
|
||||
background: var(--background) !important;
|
||||
@extend %basic;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user