mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 02:54:15 +00:00
update theme
This commit is contained in:
parent
a5e457f178
commit
525bc73f9d
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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');
|
||||
@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');
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user