diff --git a/packages/app/src/theme/animations.less b/packages/app/src/theme/animations.less index 0902c5ae..67a72852 100755 --- a/packages/app/src/theme/animations.less +++ b/packages/app/src/theme/animations.less @@ -29,17 +29,9 @@ transform: scale(0.8); } -.fade-opacity-active { - transition: all 250ms; - opacity: 1; -} - .fade-opacity-leave { opacity: 0; -} - -.fade-opacity-enter { - opacity: 1; + transition: all 0.3s; } .transverse-enter { diff --git a/packages/app/src/theme/fixments.less b/packages/app/src/theme/fixments.less index 8ac1c74c..e66f3012 100755 --- a/packages/app/src/theme/fixments.less +++ b/packages/app/src/theme/fixments.less @@ -1,4 +1,3 @@ -@inputsBorderRadius: 9px; @buttonsBorderRadius: 9px; :root { @@ -6,17 +5,6 @@ } // Fixments -.ant-btn { - display: flex; - align-items: center; - justify-content: center; - - user-select: none; - --webkit-user-select: none; - - border-radius: @buttonsBorderRadius; -} - .ant-result-extra { display: flex; align-items: center; @@ -65,10 +53,6 @@ } .ant-select { - .ant-select-selector { - border-radius: @inputsBorderRadius !important; - } - .ant-select-arrow { right: 0px; } @@ -89,11 +73,15 @@ } .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { - background-color: var(--background-color-primary2) !important; + background-color: var(--background-color-primary-2) !important; color: var(--text-color) !important; } } +.ant-dropdown-menu { + background-color: var(--background-color-primary) !important; +} + // fix buttons .ant-btn { display: inline-flex; @@ -119,6 +107,12 @@ color: var(--background-color-primary) !important; margin: 0; } + + background-color: var(--colorPrimary); + + &:hover { + background-color: var(--colorPrimary); + } } .ant-btn-primary[disabled] { @@ -134,7 +128,7 @@ .ant-btn-default { &:not(.ant-btn-dangerous) { - border-color: var(--background-color-primary2) !important; + border-color: var(--background-color-primary-2) !important; &:hover { border-color: var(--background-color-primary) !important; @@ -154,17 +148,17 @@ &:hover { color: var(--text-color); - background: var(--background-color-primary2); + background: var(--background-color-primary-2); } &:active { color: var(--text-color); - background: var(--background-color-primary2); + background: var(--background-color-primary-2); } &:focus { color: var(--text-color); - background: var(--background-color-primary2); + background: var(--background-color-primary-2); } } @@ -183,7 +177,7 @@ // fix sliders colors .ant-slider-rail { - background-color: var(--background-color-primary2); + background-color: var(--background-color-primary-2); &:hover { background-color: var(--background-color-primary); @@ -199,6 +193,17 @@ border-right: 0 !important; .ant-menu-item { + display: inline-flex; + flex-direction: row; + + align-items: center; + justify-content: flex-start; + + width: 100%; + + padding: 10px 10px 10px 25px !important; + margin: 3px 0; + color: var(--background-color-contrast); h1, @@ -216,12 +221,16 @@ .ant-menu-item { color: var(--text-color); - border-radius: 8px; + + &:hover { + color: var(--text-color); + background-color: var(--background-color-primary-2); + } } .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { color: var(--text-color); - background-color: var(--background-color-primary) !important; + background-color: var(--background-color-accent) !important; &::after { opacity: 0; @@ -229,14 +238,14 @@ } .ant-menu-item:active { - background-color: var(--background-color-primary2) !important; + background-color: var(--background-color-primary-2) !important; } // fix uploader drag .ant-upload-drag { color: var(--text-color) !important; background: var(--background-color-primary) !important; - border-color: var(--background-color-primary2) !important; + border-color: var(--background-color-primary-2) !important; } .ant-modal-content { @@ -251,8 +260,6 @@ .ant-modal-confirm-content { color: var(--text-color) !important; } - - border-radius: 10px; } .ant-notification-notice { @@ -411,25 +418,17 @@ } } -.ant-tag { - border-radius: 8px; -} - // fix input .ant-input { background-color: var(--background-color-accent); color: var(--text-color); - - border-radius: @inputsBorderRadius; } .ant-input-affix-wrapper { background-color: var(--background-color-accent); color: var(--text-color); - - border-radius: @inputsBorderRadius; } .ant-input-affix-wrapper-status-error { @@ -461,4 +460,13 @@ .ant-typography { color: var(--text-color); +} + +.ant-slider-dot { + background-color: transparent !important; + border-width: 4px !important; +} + +.drawer { + z-index: 1000; } \ No newline at end of file diff --git a/packages/app/src/theme/fonts.css b/packages/app/src/theme/fonts.css index 94ab2f3c..6b8f667a 100755 --- a/packages/app/src/theme/fonts.css +++ b/packages/app/src/theme/fonts.css @@ -1,5 +1,5 @@ /* Default */ -@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); /* PostMessage */ @import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700'); @@ -10,4 +10,5 @@ @import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600&display=swap'); \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); \ No newline at end of file diff --git a/packages/app/src/theme/index.less b/packages/app/src/theme/index.less index ef9368c2..fd5eb66d 100755 --- a/packages/app/src/theme/index.less +++ b/packages/app/src/theme/index.less @@ -1,4 +1,3 @@ -@import "antd/dist/antd.variable.less"; @import "theme/animations.less"; @import "theme/vars.less"; @import "theme/fonts.css"; @@ -12,6 +11,53 @@ html { background-color: var(--background-color-primary) !important; + padding: 0; + margin: 0; + + ::-webkit-scrollbar { + display: none; + + width: 0; + height: 0; + z-index: 0; + } + + ::-webkit-scrollbar-thumb { + position: absolute; + z-index: 200; + + height: 6px; + margin: 5px 10px 5px 5px; + transition: all 200ms ease-in-out; + + border: 4px solid rgba(var(--background-color-contrast), 1); + background-color: rgba(var(--background-color-contrast), 1); + background-clip: padding-box; + + -webkit-border-radius: 7px; + } + + ::-webkit-scrollbar-button { + width: 0; + height: 0; + display: none; + } + + ::-webkit-scrollbar-corner { + background-color: transparent; + } + + -webkit-overflow-scrolling: touch; + + a { + color: var(--colorPrimary); + text-decoration: none; + + &:hover { + color: var(--colorPrimary); + } + } + h1, h2, h3, @@ -21,6 +67,7 @@ html { p, span { color: var(--text-color); + text-rendering: optimizeLegibility !important; } svg { @@ -36,6 +83,9 @@ html { height: 100%; + padding: 0; + margin: 0; + user-select: none; --webkit-user-select: none; @@ -53,42 +103,7 @@ html { /* disable the IOS popup when long-press on a link */ } - ::-webkit-scrollbar { - display: none; - - width: 0; - height: 0; - z-index: 0; - } - - ::-webkit-scrollbar-thumb { - position: absolute; - z-index: 200; - - height: 6px; - margin: 5px 10px 5px 5px; - transition: all 200ms ease-in-out; - - border: 4px solid rgba(0, 0, 0, 0); - background-color: rgba(0, 0, 0, 0.15); - background-clip: padding-box; - - -webkit-border-radius: 7px; - } - - ::-webkit-scrollbar-button { - width: 0; - height: 0; - display: none; - } - - ::-webkit-scrollbar-corner { - background-color: transparent; - } - #root { - -webkit-overflow-scrolling: touch; - position: fixed; overflow: hidden; @@ -98,7 +113,7 @@ html { background-color: var(--layoutBackgroundColor) !important; &.electron { - .layout_page { + .page_layout { padding-top: 35px; } @@ -106,6 +121,20 @@ html { padding-top: 0px; } } + + &.centered_content { + .content_layout { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .page_layout { + width: 60%; + height: 95vh; + } + } + } } #nprogress { @@ -115,7 +144,7 @@ html { .bar { height: 2px; - background: #48acf0; + background: var(--app-color); } } } @@ -165,11 +194,15 @@ html { position: relative; -webkit-overflow-scrolling: touch; + display: flex; + flex-direction: column; + + align-items: center; + height: 100%; width: 100%; - max-height: 100vh; - padding: 10px; + max-height: 100vh; overflow-x: hidden; overflow-y: overlay; @@ -182,16 +215,23 @@ html { background-color: transparent; &.floating-sidebar { - margin-left: @app_sidebar_collapsed_width; + margin-left: @app_sidebar_width; + } + + .page_layout { + width: 100%; } } -.app_background_decorator { +.root_background { + mask-image: var(--backgroundSVG); + -webkit-mask-image: var(--backgroundSVG); + background-image: var(--backgroundImage); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - background-attachment: fixed; + background-size: var(--backgroundSize); + background-position: var(--backgroundPosition); + background-repeat: var(--backgroundRepeat); + background-attachment: var(--backgroundAttachment); position: absolute; top: 0; @@ -200,7 +240,18 @@ html { width: 100vw; height: 100vh; - transition: all 150ms ease-in-out; + transition: background-image, background-size, background-position, background-repeat, background-attachment all 150ms ease-in-out; + + pointer-events: none; + + &.active { + background-color: var(--text-color); + } + + svg { + width: 100%; + height: 100%; + } } .app_render_error { @@ -232,6 +283,9 @@ html { backdrop-filter: blur(10px); --webkit-backdrop-filter: blur(10px); + background-color: #252525; + color: #d7d7d7; + width: 100%; height: 100%; z-index: 1000; @@ -247,12 +301,17 @@ html { } svg { - color: var(--text-color) !important; + color: rgb(215, 215, 215) !important; + } + + &.fade-away { + opacity: 0; + transition: all 300ms ease-in-out; } .splash_logo { - width: 200px; - height: 200px; + width: 100px; + height: 100px; display: flex; flex-direction: column; @@ -291,7 +350,7 @@ html { height: 300px; - img { + #powered_by { height: 40px; margin-bottom: 10px; } @@ -305,7 +364,7 @@ html { } @media (max-width: 768px) { - .layout_page { + .page_layout { padding: 10px; margin: 0; } diff --git a/packages/app/src/theme/vars.less b/packages/app/src/theme/vars.less index de38c100..50657b81 100755 --- a/packages/app/src/theme/vars.less +++ b/packages/app/src/theme/vars.less @@ -5,8 +5,8 @@ @app_bottomBar_height: 60px; @app_bottomBar_iconSize: 45px; -@app_sidebar_collapsed_width: 80px; -@app_sidebar_width: 230px; +@app_sidebar_width: 80px; +@app_sidebar_width_expanded: 230px; // borders & radius @app_sidebar_borderRadius: 18px;