Compare commits

...

3 Commits

4 changed files with 213 additions and 191 deletions

View File

@@ -1,4 +1,3 @@
/** /**
* HEY HO * HEY HO
*/ */
@@ -14,15 +13,15 @@
*, *,
::before, ::before,
::after { ::after {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */ border-width: 0; /* 2 */
border-style: solid; /* 2 */ border-style: solid; /* 2 */
border-color: #EEEEEE; /* 2 */ border-color: #eeeeee; /* 2 */
} }
::before, ::before,
::after { ::after {
--tw-content: ''; --tw-content: '';
} }
/* /*
@@ -33,10 +32,12 @@
*/ */
html { html {
line-height: 1.5; /* 1 */ line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
tab-size: 4; /* 3 */ tab-size: 4; /* 3 */
font-family: Inter var, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-family: Inter var, Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */
} }
/* /*
@@ -45,8 +46,8 @@ html {
*/ */
body { body {
margin: 0; /* 1 */ margin: 0; /* 1 */
line-height: inherit; /* 2 */ line-height: inherit; /* 2 */
} }
/* /*
@@ -56,9 +57,9 @@ body {
*/ */
hr { hr {
height: 0; /* 1 */ height: 0; /* 1 */
color: inherit; /* 2 */ color: inherit; /* 2 */
border-top-width: 1px; /* 3 */ border-top-width: 1px; /* 3 */
} }
/* /*
@@ -66,7 +67,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
*/ */
abbr:where([title]) { abbr:where([title]) {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
/* /*
@@ -79,8 +80,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
/* /*
@@ -88,8 +89,8 @@ Reset links to optimize for opt-in styling instead of opt-out.
*/ */
a { a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
} }
/* /*
@@ -98,7 +99,7 @@ Add the correct font weight in Edge and Safari.
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
/* /*
@@ -110,8 +111,9 @@ code,
kbd, kbd,
samp, samp,
pre { pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
font-size: 1em; /* 2 */ 'Courier New', monospace; /* 1 */
font-size: 1em; /* 2 */
} }
/* /*
@@ -119,7 +121,7 @@ Add the correct font size in all browsers.
*/ */
small { small {
font-size: 80%; font-size: 80%;
} }
/* /*
@@ -128,18 +130,18 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
sup { sup {
top: -0.5em; top: -0.5em;
} }
/* /*
@@ -149,9 +151,9 @@ sup {
*/ */
table { table {
text-indent: 0; /* 1 */ text-indent: 0; /* 1 */
border-color: inherit; /* 2 */ border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */ border-collapse: collapse; /* 3 */
} }
/* /*
@@ -165,12 +167,12 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: inherit; /* 1 */ font-family: inherit; /* 1 */
font-size: 100%; /* 1 */ font-size: 100%; /* 1 */
line-height: inherit; /* 1 */ line-height: inherit; /* 1 */
color: inherit; /* 1 */ color: inherit; /* 1 */
margin: 0; /* 2 */ margin: 0; /* 2 */
padding: 0; /* 3 */ padding: 0; /* 3 */
} }
/* /*
@@ -179,7 +181,7 @@ Remove the inheritance of text transform in Edge and Firefox.
button, button,
select { select {
text-transform: none; text-transform: none;
} }
/* /*
@@ -191,9 +193,9 @@ button,
[type='button'], [type='button'],
[type='reset'], [type='reset'],
[type='submit'] { [type='submit'] {
-webkit-appearance: button; /* 1 */ -webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */ background-color: transparent; /* 2 */
background-image: none; /* 2 */ background-image: none; /* 2 */
} }
/* /*
@@ -201,7 +203,7 @@ Use the modern Firefox focus style for all focusable elements.
*/ */
:-moz-focusring { :-moz-focusring {
outline: auto; outline: auto;
} }
/* /*
@@ -209,7 +211,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/
*/ */
:-moz-ui-invalid { :-moz-ui-invalid {
box-shadow: none; box-shadow: none;
} }
/* /*
@@ -217,7 +219,7 @@ Add the correct vertical alignment in Chrome and Firefox.
*/ */
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
/* /*
@@ -226,7 +228,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
::-webkit-inner-spin-button, ::-webkit-inner-spin-button,
::-webkit-outer-spin-button { ::-webkit-outer-spin-button {
height: auto; height: auto;
} }
/* /*
@@ -235,8 +237,8 @@ Correct the cursor style of increment and decrement buttons in Safari.
*/ */
[type='search'] { [type='search'] {
-webkit-appearance: textfield; /* 1 */ -webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */ outline-offset: -2px; /* 2 */
} }
/* /*
@@ -244,7 +246,7 @@ Remove the inner padding in Chrome and Safari on macOS.
*/ */
::-webkit-search-decoration { ::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
/* /*
@@ -253,8 +255,8 @@ Remove the inner padding in Chrome and Safari on macOS.
*/ */
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */ -webkit-appearance: button; /* 1 */
font: inherit; /* 2 */ font: inherit; /* 2 */
} }
/* /*
@@ -262,7 +264,7 @@ Add the correct display in Chrome and Safari.
*/ */
summary { summary {
display: list-item; display: list-item;
} }
/* /*
@@ -282,24 +284,24 @@ hr,
figure, figure,
p, p,
pre { pre {
margin: 0; margin: 0;
} }
fieldset { fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
legend { legend {
padding: 0; padding: 0;
} }
ol, ol,
ul, ul,
menu { menu {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* /*
@@ -307,7 +309,7 @@ Prevent resizing textareas horizontally by default.
*/ */
textarea { textarea {
resize: vertical; resize: vertical;
} }
/* /*
@@ -317,8 +319,8 @@ textarea {
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
opacity: 1; /* 1 */ opacity: 1; /* 1 */
color: #BDBDBD; /* 2 */ color: #bdbdbd; /* 2 */
} }
/* /*
@@ -326,8 +328,8 @@ Set the default cursor for buttons.
*/ */
button, button,
[role="button"] { [role='button'] {
cursor: pointer; cursor: pointer;
} }
/* /*
@@ -335,7 +337,7 @@ Make sure disabled buttons don't get the pointer cursor.
*/ */
:disabled { :disabled {
cursor: default; cursor: default;
} }
/* /*
@@ -352,8 +354,8 @@ audio,
iframe, iframe,
embed, embed,
object { object {
display: block; /* 1 */ display: block; /* 1 */
vertical-align: middle; /* 2 */ vertical-align: middle; /* 2 */
} }
/* /*
@@ -362,8 +364,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
img, img,
video { video {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
/* /*
@@ -371,50 +373,52 @@ Ensure the default browser behavior of the `hidden` attribute.
*/ */
[hidden] { [hidden] {
display: none; display: none;
} }
*, ::before, ::after { *,
--tw-translate-x: 0; ::before,
--tw-translate-y: 0; ::after {
--tw-rotate: 0; --tw-translate-x: 0;
--tw-skew-x: 0; --tw-translate-y: 0;
--tw-skew-y: 0; --tw-rotate: 0;
--tw-scale-x: 1; --tw-skew-x: 0;
--tw-scale-y: 1; --tw-skew-y: 0;
--tw-pan-x: ''; --tw-scale-x: 1;
--tw-pan-y: ''; --tw-scale-y: 1;
--tw-pinch-zoom: ''; --tw-pan-x: '';
--tw-scroll-snap-strictness: proximity; --tw-pan-y: '';
--tw-ordinal: ''; --tw-pinch-zoom: '';
--tw-slashed-zero: ''; --tw-scroll-snap-strictness: proximity;
--tw-numeric-figure: ''; --tw-ordinal: '';
--tw-numeric-spacing: ''; --tw-slashed-zero: '';
--tw-numeric-fraction: ''; --tw-numeric-figure: '';
--tw-ring-inset: ''; --tw-numeric-spacing: '';
--tw-ring-offset-width: 0px; --tw-numeric-fraction: '';
--tw-ring-offset-color: #fff; --tw-ring-inset: '';
--tw-ring-color: rgb(33 150 243 / 0.5); --tw-ring-offset-width: 0px;
--tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-color: #fff;
--tw-ring-shadow: 0 0 #0000; --tw-ring-color: rgb(33 150 243 / 0.5);
--tw-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000; --tw-ring-shadow: 0 0 #0000;
--tw-blur: ''; --tw-shadow: 0 0 #0000;
--tw-brightness: ''; --tw-shadow-colored: 0 0 #0000;
--tw-contrast: ''; --tw-blur: '';
--tw-grayscale: ''; --tw-brightness: '';
--tw-hue-rotate: ''; --tw-contrast: '';
--tw-invert: ''; --tw-grayscale: '';
--tw-saturate: ''; --tw-hue-rotate: '';
--tw-sepia: ''; --tw-invert: '';
--tw-drop-shadow: ''; --tw-saturate: '';
--tw-backdrop-blur: ''; --tw-sepia: '';
--tw-backdrop-brightness: ''; --tw-drop-shadow: '';
--tw-backdrop-contrast: ''; --tw-backdrop-blur: '';
--tw-backdrop-grayscale: ''; --tw-backdrop-brightness: '';
--tw-backdrop-hue-rotate: ''; --tw-backdrop-contrast: '';
--tw-backdrop-invert: ''; --tw-backdrop-grayscale: '';
--tw-backdrop-opacity: ''; --tw-backdrop-hue-rotate: '';
--tw-backdrop-saturate: ''; --tw-backdrop-invert: '';
--tw-backdrop-sepia: ''; --tw-backdrop-opacity: '';
--tw-backdrop-saturate: '';
--tw-backdrop-sepia: '';
} }

View File

@@ -2,12 +2,14 @@ import FuseDialog from '@fuse/core/FuseDialog';
import FuseMessage from '@fuse/core/FuseMessage'; import FuseMessage from '@fuse/core/FuseMessage';
import FuseSuspense from '@fuse/core/FuseSuspense'; import FuseSuspense from '@fuse/core/FuseSuspense';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import Hidden from '@mui/material/Hidden';
import AppContext from 'src/app/contexts/AppContext'; import AppContext from 'src/app/contexts/AppContext';
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice'; import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
import { memo, useContext } from 'react'; import { memo, useContext } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { useRoutes } from 'react-router-dom'; import { useRoutes } from 'react-router-dom';
import NavbarWrapperLayout1 from './components/NavbarWrapperLayout1'; import NavbarWrapperLayout1 from './components/NavbarWrapperLayout1';
import NavbarToggleButton from '../shared-components/NavbarToggleButton';
const Root = styled('div')(({ theme, config }) => ({ const Root = styled('div')(({ theme, config }) => ({
...(config.mode === 'boxed' && { ...(config.mode === 'boxed' && {
@@ -36,6 +38,10 @@ function Layout1(props) {
{config.navbar.display && config.navbar.position === 'left' && <NavbarWrapperLayout1 />} {config.navbar.display && config.navbar.position === 'left' && <NavbarWrapperLayout1 />}
<main id="fuse-main" className="flex flex-col flex-auto min-h-full min-w-0 relative z-10"> <main id="fuse-main" className="flex flex-col flex-auto min-h-full min-w-0 relative z-10">
<Hidden lgUp>
<NavbarToggleButton className="w-40 h-40 p-0 mx-0 sm:mx-8" />
</Hidden>
<div className="flex flex-col flex-auto min-h-0 relative z-10"> <div className="flex flex-col flex-auto min-h-0 relative z-10">
<FuseDialog /> <FuseDialog />

View File

@@ -1,153 +1,162 @@
/** /**
* Custom base styles * Custom base styles
*/ */
* { * {
/* Text rendering */ /* Text rendering */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility;
-webkit-text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
* :focus { * :focus {
outline: none !important; outline: none !important;
} }
html { html {
font-size: 62.5%; font-size: 62.5%;
font-family: 'Inter var', Roboto, Helvetica Neue, Arial, sans-serif; font-family: 'Inter var', Roboto, Helvetica Neue, Arial, sans-serif;
background-color: #121212; background-color: #121212;
} }
body { body {
font-size: 14px; font-size: 14px;
line-height: 1.4; line-height: normal;
overflow-x: hidden; overflow-x: hidden;
font-feature-settings: "salt"; font-feature-settings: 'salt';
} }
html, body { html,
-webkit-font-smoothing: auto; body {
-moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
} }
html, body { html,
display: flex; body {
flex-direction: column; display: flex;
position: relative; flex-direction: column;
margin: 0; position: relative;
min-height: 100%; margin: 0;
width: 100%; min-height: 100%;
flex: 1 1 auto; width: 100%;
flex: 1 1 auto;
} }
#root { #root {
display: flex; display: flex;
flex-direction: column; flex: 1 1 auto;
flex: 1 1 auto; width: 100%;
width: 100%; height: 100%;
height: 100%; }
/* layout 2 workaround */
#root:has(> #fuse-main) {
flex-direction: column;
} }
h1, .h1 { h1,
font-size: 24px; .h1 {
font-size: 24px;
} }
h2, .h2 { h2,
font-size: 20px; .h2 {
font-size: 20px;
} }
h3, .h3 { h3,
font-size: 16px; .h3 {
font-size: 16px;
} }
h4, .h4 { h4,
font-size: 15px; .h4 {
font-size: 15px;
} }
h5, .h5 { h5,
font-size: 13px; .h5 {
font-size: 13px;
} }
h6, .h6 { h6,
font-size: 12px; .h6 {
font-size: 12px;
} }
.ps > .ps__rail-y, .ps > .ps__rail-y,
.ps > .ps__rail-x { .ps > .ps__rail-x {
z-index: 99; z-index: 99;
} }
a[role=button] { a[role='button'] {
text-decoration: none; text-decoration: none;
} }
[role="tooltip"] { [role='tooltip'] {
z-index: 9999; z-index: 9999;
} }
.MuiModal-root { .MuiModal-root {
/*z-index: 9999;*/ /*z-index: 9999;*/
} }
/* Medium Devices, Desktops Only */ /* Medium Devices, Desktops Only */
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
::-webkit-scrollbar:hover { ::-webkit-scrollbar:hover {
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 20px; border-radius: 20px;
} }
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
border-radius: 20px; border-radius: 20px;
} }
} }
form label { form label {
z-index: 99; z-index: 99;
} }
body.no-animate *, body.no-animate *,
body.no-animate *::before, body.no-animate *::before,
body.no-animate *::after { body.no-animate *::after {
transition: none !important; transition: none !important;
animation: none !important; animation: none !important;
} }
button:focus { button:focus {
outline: none; outline: none;
} }
/* Removes webkit's autofill backgorund color */ /* Removes webkit's autofill backgorund color */
input:-webkit-autofill, input:-webkit-autofill,
input:-webkit-autofill:hover, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:focus,
input:-webkit-autofill:active input:-webkit-autofill:active {
{ transitiondelay: 9999s;
transitionDelay: 9999s; transitionproperty: background-color, color;
transitionProperty: background-color, color;
} }
:focus { :focus {
outline-color: transparent; outline-color: transparent;
} }
/*fullcalendar Fix*/ /*fullcalendar Fix*/
.fc-scrollgrid-section-liquid { .fc-scrollgrid-section-liquid {
height: 1px !important; height: 1px !important;
} }

View File

@@ -53,6 +53,7 @@ module.exports = {
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
'home-welcome': 'url(/src/assets/images/welcome-background.webp)',
}, },
backgroundOpacity: ({ theme }) => theme('opacity'), backgroundOpacity: ({ theme }) => theme('opacity'),
backgroundPosition: { backgroundPosition: {
@@ -130,6 +131,7 @@ module.exports = {
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
none: 'none', none: 'none',
light: '1px 1px 5px 0px rgba(0, 0, 0, 0.1)',
active: '2px 2px 5px 0px rgba(0, 0, 0, 0.2)', active: '2px 2px 5px 0px rgba(0, 0, 0, 0.2)',
hover: '2px 2px 5px 0px rgba(0, 0, 0, 0.4)', hover: '2px 2px 5px 0px rgba(0, 0, 0, 0.4)',
0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)', 0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)',
@@ -1258,6 +1260,7 @@ module.exports = {
'5xl': '102.4rem', '5xl': '102.4rem',
'6xl': '115.2rem', '6xl': '115.2rem',
'7xl': '128rem', '7xl': '128rem',
'8xl': '142rem',
px: '1px', px: '1px',
0: '0px', 0: '0px',
0.5: '0.05rem', 0.5: '0.05rem',