RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added layout_page modes

Browse Source
This commit is contained in:
srgooglo 2022-05-12 16:51:34 +02:00
parent c4de104b0a
commit d3169737b1
1 changed files with 79 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
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 : var(--fontFamily); font-family: var(--fontFamily);
} }
#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%;
@ -136,12 +136,18 @@ body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
transition: all 150ms ease-in-out;
&.noMargin {
margin: 0;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.layout_page { .layout_page {
padding: 10px; padding: 10px;
margin : 0; margin: 0;
} }
h1, h1,
@ -152,7 +158,7 @@ body {
h6, h6,
span, span,
p { p {
user-select : none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
@ -163,17 +169,17 @@ body {
.fade-transverse-active { .fade-transverse-active {
transition: all 250ms; transition: all 250ms;
height : fit-content; height: fit-content;
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);
} }
@ -183,18 +189,18 @@ body {
} }
.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);
} }
.fade-opacity-active { .fade-opacity-active {
transition: all 250ms; transition: all 250ms;
opacity : 1; opacity: 1;
} }
.fade-opacity-leave { .fade-opacity-leave {
@ -206,50 +212,50 @@ body {
} }
.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;
} }
@ -268,7 +274,7 @@ body {
} }
*:not(input):not(textarea) { *:not(input):not(textarea) {
-webkit-user-select : none; -webkit-user-select: none;
/* disable selection/Copy of UIWebView */ /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; -webkit-touch-callout: none;
/* disable the IOS popup when long-press on a link */ /* disable the IOS popup when long-press on a link */
@ -278,35 +284,35 @@ body {
overflow: hidden; overflow: hidden;
//background-color: rgba(240, 242, 245, 0.8); //background-color: rgba(240, 242, 245, 0.8);
backdrop-filter : blur(10px); backdrop-filter: blur(10px);
--webkit-backdrop-filter: blur(10px); --webkit-backdrop-filter: blur(10px);
width : 100%; width: 100%;
height : 100%; height: 100%;
z-index: 1000; z-index: 1000;
display : flex; display: flex;
flex-direction: column; flex-direction: column;
align-items : center; align-items: center;
justify-content: center; justify-content: center;
} }
.splash_logo { .splash_logo {
width : 100%; width: 100%;
height: 100%; height: 100%;
display : flex; display: flex;
flex-direction: column; flex-direction: column;
align-items : center; align-items: center;
justify-content: center; justify-content: center;
img { img {
width : fit-content; width: fit-content;
max-width : 50%; max-width: 50%;
max-height: 50%; max-height: 50%;
filter : drop-shadow(14px 10px 10px rgba(128, 128, 128, 0.5)); filter: drop-shadow(14px 10px 10px rgba(128, 128, 128, 0.5));
} }
} }