RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

update theme

Browse Source
This commit is contained in:
SrGooglo 2023-02-24 14:41:55 +00:00
parent a5e457f178
commit 525bc73f9d
5 changed files with 161 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/theme/animations.less
View File

@ -29,17 +29,9 @@
transform: scale(0.8); transform: scale(0.8);
} }
.fade-opacity-active {
transition: all 250ms;
opacity: 1;
}
.fade-opacity-leave { .fade-opacity-leave {
opacity: 0; opacity: 0;
} transition: all 0.3s;
.fade-opacity-enter {
opacity: 1;
} }
.transverse-enter { .transverse-enter {

80
packages/app/src/theme/fixments.less
View File

@ -1,4 +1,3 @@
@inputsBorderRadius: 9px;
@buttonsBorderRadius: 9px; @buttonsBorderRadius: 9px;
:root { :root {
@ -6,17 +5,6 @@
} }
// Fixments // Fixments
.ant-btn {
display: flex;
align-items: center;
justify-content: center;
user-select: none;
--webkit-user-select: none;
border-radius: @buttonsBorderRadius;
}
.ant-result-extra { .ant-result-extra {
display: flex; display: flex;
align-items: center; align-items: center;
@ -65,10 +53,6 @@
} }
.ant-select { .ant-select {
.ant-select-selector {
border-radius: @inputsBorderRadius !important;
}
.ant-select-arrow { .ant-select-arrow {
right: 0px; right: 0px;
} }
@ -89,11 +73,15 @@
} }
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) { .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; color: var(--text-color) !important;
} }
} }
.ant-dropdown-menu {
background-color: var(--background-color-primary) !important;
}
// fix buttons // fix buttons
.ant-btn { .ant-btn {
display: inline-flex; display: inline-flex;
@ -119,6 +107,12 @@
color: var(--background-color-primary) !important; color: var(--background-color-primary) !important;
margin: 0; margin: 0;
} }
background-color: var(--colorPrimary);
&:hover {
background-color: var(--colorPrimary);
}
} }
.ant-btn-primary[disabled] { .ant-btn-primary[disabled] {
@ -134,7 +128,7 @@
.ant-btn-default { .ant-btn-default {
&:not(.ant-btn-dangerous) { &:not(.ant-btn-dangerous) {
border-color: var(--background-color-primary2) !important; border-color: var(--background-color-primary-2) !important;
&:hover { &:hover {
border-color: var(--background-color-primary) !important; border-color: var(--background-color-primary) !important;
@ -154,17 +148,17 @@
&:hover { &:hover {
color: var(--text-color); color: var(--text-color);
background: var(--background-color-primary2); background: var(--background-color-primary-2);
} }
&:active { &:active {
color: var(--text-color); color: var(--text-color);
background: var(--background-color-primary2); background: var(--background-color-primary-2);
} }
&:focus { &:focus {
color: var(--text-color); color: var(--text-color);
background: var(--background-color-primary2); background: var(--background-color-primary-2);
} }
} }
@ -183,7 +177,7 @@
// fix sliders colors // fix sliders colors
.ant-slider-rail { .ant-slider-rail {
background-color: var(--background-color-primary2); background-color: var(--background-color-primary-2);
&:hover { &:hover {
background-color: var(--background-color-primary); background-color: var(--background-color-primary);
@ -199,6 +193,17 @@
border-right: 0 !important; border-right: 0 !important;
.ant-menu-item { .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); color: var(--background-color-contrast);
h1, h1,
@ -216,12 +221,16 @@
.ant-menu-item { .ant-menu-item {
color: var(--text-color); 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 { .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
color: var(--text-color); color: var(--text-color);
background-color: var(--background-color-primary) !important; background-color: var(--background-color-accent) !important;
&::after { &::after {
opacity: 0; opacity: 0;
@ -229,14 +238,14 @@
} }
.ant-menu-item:active { .ant-menu-item:active {
background-color: var(--background-color-primary2) !important; background-color: var(--background-color-primary-2) !important;
} }
// fix uploader drag // fix uploader drag
.ant-upload-drag { .ant-upload-drag {
color: var(--text-color) !important; color: var(--text-color) !important;
background: var(--background-color-primary) !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 { .ant-modal-content {
@ -251,8 +260,6 @@
.ant-modal-confirm-content { .ant-modal-confirm-content {
color: var(--text-color) !important; color: var(--text-color) !important;
} }
border-radius: 10px;
} }
.ant-notification-notice { .ant-notification-notice {
@ -411,25 +418,17 @@
} }
} }
.ant-tag {
border-radius: 8px;
}
// fix input // fix input
.ant-input { .ant-input {
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
color: var(--text-color); color: var(--text-color);
border-radius: @inputsBorderRadius;
} }
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
color: var(--text-color); color: var(--text-color);
border-radius: @inputsBorderRadius;
} }
.ant-input-affix-wrapper-status-error { .ant-input-affix-wrapper-status-error {
@ -461,4 +460,13 @@
.ant-typography { .ant-typography {
color: var(--text-color); color: var(--text-color);
}
.ant-slider-dot {
background-color: transparent !important;
border-width: 4px !important;
}
.drawer {
z-index: 1000;
} }

5
packages/app/src/theme/fonts.css
View File

@ -1,5 +1,5 @@
/* Default */ /* 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 */ /* PostMessage */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700'); @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=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=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'); @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');

163
packages/app/src/theme/index.less
View File

@ -1,4 +1,3 @@
@import "antd/dist/antd.variable.less";
@import "theme/animations.less"; @import "theme/animations.less";
@import "theme/vars.less"; @import "theme/vars.less";
@import "theme/fonts.css"; @import "theme/fonts.css";
@ -12,6 +11,53 @@ html {
background-color: var(--background-color-primary) !important; 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, h1,
h2, h2,
h3, h3,
@ -21,6 +67,7 @@ html {
p, p,
span { span {
color: var(--text-color); color: var(--text-color);
text-rendering: optimizeLegibility !important;
} }
svg { svg {
@ -36,6 +83,9 @@ html {
height: 100%; height: 100%;
padding: 0;
margin: 0;
user-select: none; user-select: none;
--webkit-user-select: none; --webkit-user-select: none;
@ -53,42 +103,7 @@ html {
/* disable the IOS popup when long-press on a link */ /* 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 { #root {
-webkit-overflow-scrolling: touch;
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
@ -98,7 +113,7 @@ html {
background-color: var(--layoutBackgroundColor) !important; background-color: var(--layoutBackgroundColor) !important;
&.electron { &.electron {
.layout_page { .page_layout {
padding-top: 35px; padding-top: 35px;
} }
@ -106,6 +121,20 @@ html {
padding-top: 0px; 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 { #nprogress {
@ -115,7 +144,7 @@ html {
.bar { .bar {
height: 2px; height: 2px;
background: #48acf0; background: var(--app-color);
} }
} }
} }
@ -165,11 +194,15 @@ html {
position: relative; position: relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
align-items: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
max-height: 100vh;
padding: 10px; max-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
@ -182,16 +215,23 @@ html {
background-color: transparent; background-color: transparent;
&.floating-sidebar { &.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-image: var(--backgroundImage);
background-size: cover; background-size: var(--backgroundSize);
background-position: center; background-position: var(--backgroundPosition);
background-repeat: no-repeat; background-repeat: var(--backgroundRepeat);
background-attachment: fixed; background-attachment: var(--backgroundAttachment);
position: absolute; position: absolute;
top: 0; top: 0;
@ -200,7 +240,18 @@ html {
width: 100vw; width: 100vw;
height: 100vh; 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 { .app_render_error {
@ -232,6 +283,9 @@ html {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
--webkit-backdrop-filter: blur(10px); --webkit-backdrop-filter: blur(10px);
background-color: #252525;
color: #d7d7d7;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
@ -247,12 +301,17 @@ html {
} }
svg { svg {
color: var(--text-color) !important; color: rgb(215, 215, 215) !important;
}
&.fade-away {
opacity: 0;
transition: all 300ms ease-in-out;
} }
.splash_logo { .splash_logo {
width: 200px; width: 100px;
height: 200px; height: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -291,7 +350,7 @@ html {
height: 300px; height: 300px;
img { #powered_by {
height: 40px; height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -305,7 +364,7 @@ html {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.layout_page { .page_layout {
padding: 10px; padding: 10px;
margin: 0; margin: 0;
} }

4
packages/app/src/theme/vars.less
View File

@ -5,8 +5,8 @@
@app_bottomBar_height: 60px; @app_bottomBar_height: 60px;
@app_bottomBar_iconSize: 45px; @app_bottomBar_iconSize: 45px;
@app_sidebar_collapsed_width: 80px; @app_sidebar_width: 80px;
@app_sidebar_width: 230px; @app_sidebar_width_expanded: 230px;
// borders & radius // borders & radius
@app_sidebar_borderRadius: 18px; @app_sidebar_borderRadius: 18px;