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

improve night mode

Browse Source
This commit is contained in:
srgooglo 2022-03-02 21:40:23 +01:00
parent 5a83e2c11c
commit bbf51f1f7d
4 changed files with 133 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/src/components/PostCreator/index.less
View File

@ -29,6 +29,10 @@
} }
} }
.ant-input {
color: var(--background-color-contrast);
}
.textArea { .textArea {
border-radius: 8px !important; border-radius: 8px !important;
transition : all 150ms ease-in-out !important; transition : all 150ms ease-in-out !important;

67
packages/app/src/components/Settings/index.less
View File

@ -1,17 +1,27 @@
.settings { .settings {
display: flex; display : flex;
flex-direction: column; flex-direction: column;
> div { >div {
margin-bottom: 25px; margin-bottom: 25px;
} }
.group { .group {
display: flex; display : flex;
flex-direction: column; flex-direction: column;
color : var(--background-color-contrast);
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--background-color-contrast);
}
.content { .content {
> div { >div {
margin-bottom: 25px; margin-bottom: 25px;
} }
} }
@ -20,69 +30,80 @@
.settingItem { .settingItem {
padding: 0 20px; padding: 0 20px;
> div { >div {
margin-bottom: 10px; margin-bottom: 10px;
} }
.header { .header {
display: flex; display : flex;
align-items: center; align-items: center;
color : var(--background-color-contrast);
h4{ h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0; margin: 0;
color : var(--background-color-contrast);
} }
p { p {
font-size: 11px; font-size: 11px;
color: var(--background-color-contrast); color : var(--background-color-contrast);
margin: 0; margin : 0;
} }
> div { >div {
margin-right: 10px; margin-right: 10px;
} }
} }
.component { .component {
--ignore-dragger: true; --ignore-dragger: true;
padding: 0 20px; padding : 0 20px;
span {
color: var(--background-color-contrast);
}
} }
} }
.footer { .footer {
position: relative; position: relative;
width: 100%; width : 100%;
padding-top: 20px; padding-top : 20px;
padding-bottom: 20px; padding-bottom: 20px;
display: flex; display : flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
> div { >div {
margin-bottom: 10px; margin-bottom: 10px;
font-family: "Space Mono", monospace; font-family: "Space Mono", monospace;
font-size: 10px; font-size : 10px;
display: flex; display : flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items : center;
justify-content: center; justify-content: center;
.ant-tag { .ant-tag {
height: 18px; height : 18px;
line-height: 18px; line-height: 18px;
font-size: 10px; font-size : 10px;
} }
> div { >div {
padding: 0 7px; padding: 0 7px;
} }
} }
} }
} }

19
packages/app/src/layout/sidebar/index.less
View File

@ -19,6 +19,21 @@
} }
} }
.ant-menu-item {
color: var(--background-color-contrast);
h1,
h2,
h3,
h4,
h5,
h6,
span,
p {
color: var(--background-color-contrast);
}
}
.ant-menu, .ant-menu,
.ant-menu ul { .ant-menu ul {
background : transparent !important; background : transparent !important;
@ -84,7 +99,7 @@
display : flex; display : flex;
align-items : center; align-items : center;
justify-content: center; justify-content: center;
img { img {
user-select : none; user-select : none;
--webkit-user-select: none; --webkit-user-select: none;
@ -92,7 +107,7 @@
width : 80%; width : 80%;
max-height: 80px; max-height: 80px;
} }
&.collapsed { &.collapsed {
img { img {
max-width: 40px; max-width: 40px;

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

@ -5,29 +5,29 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
width: 0; width : 0;
height: 0; height : 0;
z-index: 0; z-index: 0;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
position: absolute; position: absolute;
z-index: 200; z-index : 200;
height: 6px; height : 6px;
margin: 5px 10px 5px 5px; margin : 5px 10px 5px 5px;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
border: 4px solid rgba(0, 0, 0, 0); border : 4px solid rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
background-clip: padding-box; background-clip : padding-box;
-webkit-border-radius: 7px; -webkit-border-radius: 7px;
} }
::-webkit-scrollbar-button { ::-webkit-scrollbar-button {
width: 0; width : 0;
height: 0; height : 0;
display: none; display: none;
} }
@ -36,33 +36,33 @@
} }
html { html {
overflow: hidden; overflow : hidden;
height: 100%; height : 100%;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: var(--background-color-primary) !important; background-color: var(--background-color-primary) !important;
svg { svg {
margin-right: 10px; margin-right : 10px;
vertical-align: -0.125em; vertical-align: -0.125em;
} }
} }
body { body {
overflow: hidden; overflow : hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-webkit-app-region: no-drag; -webkit-app-region : no-drag;
height: 100%; height: 100%;
user-select: none; user-select : none;
--webkit-user-select: none; --webkit-user-select: none;
scroll-behavior: smooth; scroll-behavior: smooth;
text-rendering: optimizeLegibility !important; text-rendering : optimizeLegibility !important;
background-color: var(--background-color-primary) !important; background-color: var(--background-color-primary) !important;
font-family: "Varela Round", sans-serif; font-family : "Varela Round", sans-serif;
} }
#root { #root {
@ -71,7 +71,7 @@ body {
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
width: 100%; width : 100%;
height: 100%; height: 100%;
background-color: var(--background-color-primary) !important; background-color: var(--background-color-primary) !important;
@ -79,11 +79,11 @@ body {
#nprogress { #nprogress {
position: absolute; position: absolute;
top: 0; top : 0;
width: 100vw; width : 100vw;
.bar { .bar {
height: 2px; height : 2px;
background: #48acf0; background: #48acf0;
} }
} }
@ -91,26 +91,26 @@ body {
.ant-layout, .ant-layout,
.content_layout, .content_layout,
.app_layout { .app_layout {
background: var(--background-color-primary) !important; background : var(--background-color-primary) !important;
background-color: var(--background-color-primary) !important; background-color: var(--background-color-primary) !important;
position: relative; position : relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
width: 100%; width : 100%;
height: 100%; height : 100%;
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow : hidden;
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
::-webkit-scrollbar { ::-webkit-scrollbar {
display: block; display : block;
position: absolute; position: absolute;
width: 14px; width : 14px;
height: 18px; height : 18px;
z-index: 200; z-index : 200;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
} }
@ -119,15 +119,15 @@ body {
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none !important; display: none !important;
width: 0; width : 0;
height: 0; height : 0;
z-index: 0; z-index: 0;
} }
} }
} }
.layout_page { .layout_page {
position: relative; position : relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
height: 100%; height: 100%;
@ -141,7 +141,7 @@ body {
@media (max-width: 768px) { @media (max-width: 768px) {
.layout_page { .layout_page {
padding: 10px; padding: 10px;
margin: 0; margin : 0;
} }
h1, h1,
@ -152,23 +152,24 @@ body {
h6, h6,
span, span,
p { p {
user-select: none; user-select : none;
-webkit-user-select: none; -webkit-user-select: none;
} }
} }
.fade-transverse-active { .fade-transverse-active {
transition: all 250ms; transition: all 250ms;
height: 100%; height : 100%;
width: 100%; width : 100%;
} }
.fade-transverse-enter { .fade-transverse-enter {
opacity: 0; opacity : 0;
transform: translateX(-30px); transform: translateX(-30px);
} }
.fade-transverse-leave { .fade-transverse-leave {
opacity: 0; opacity : 0;
transform: translateX(30px); transform: translateX(30px);
} }
@ -176,60 +177,62 @@ body {
.fade-scale-enter-active { .fade-scale-enter-active {
transition: all 0.3s; transition: all 0.3s;
} }
.fade-scale-enter { .fade-scale-enter {
opacity: 0; opacity : 0;
transform: scale(1.2); transform: scale(1.2);
} }
.fade-scale-leave { .fade-scale-leave {
opacity: 0; opacity : 0;
transform: scale(0.8); transform: scale(0.8);
} }
.app_initialization { .app_initialization {
width: 100vw; width : 100vw;
height: 100vh; height : 100vh;
padding: 50px; padding: 50px;
display: flex; display : flex;
flex-direction: column; flex-direction : column;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
> div { >div {
width: 100%; width : 100%;
height: fit-content; height: fit-content;
display: flex; display : flex;
flex-direction: column; flex-direction : column;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
margin-bottom: 50px; margin-bottom: 50px;
} }
} }
.app_crash_wrapper { .app_crash_wrapper {
width: 100vw; width : 100vw;
height: 100vh; height : 100vh;
display: flex; display : flex;
flex-direction: column; flex-direction : column;
justify-content: center; justify-content: center;
align-items: center; align-items : center;
} }
// Fixments // Fixments
.ant-btn { .ant-btn {
display: flex; display : flex;
align-items: center; align-items : center;
justify-content: center; justify-content: center;
user-select: none; user-select : none;
--webkit-user-select: none; --webkit-user-select: none;
} }
.ant-result-extra { .ant-result-extra {
display: flex; display : flex;
align-items: center; align-items : center;
justify-content: center; justify-content: center;
} }
@ -244,6 +247,8 @@ body {
} }
*:not(input):not(textarea) { *:not(input):not(textarea) {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */ -webkit-user-select : none;
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none;
/* disable the IOS popup when long-press on a link */
} }