added layout_page modes

This commit is contained in:
srgooglo 2022-05-12 16:51:34 +02:00
parent c4de104b0a
commit d3169737b1

View File

@ -5,29 +5,29 @@
::-webkit-scrollbar {
display: none;
width : 0;
height : 0;
width: 0;
height: 0;
z-index: 0;
}
::-webkit-scrollbar-thumb {
position: absolute;
z-index : 200;
z-index: 200;
height : 6px;
margin : 5px 10px 5px 5px;
height: 6px;
margin: 5px 10px 5px 5px;
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-clip : padding-box;
background-clip: padding-box;
-webkit-border-radius: 7px;
}
::-webkit-scrollbar-button {
width : 0;
height : 0;
width: 0;
height: 0;
display: none;
}
@ -36,33 +36,33 @@
}
html {
overflow : hidden;
height : 100%;
overflow: hidden;
height: 100%;
-webkit-overflow-scrolling: touch;
background-color: var(--background-color-primary) !important;
svg {
margin-right : 10px;
margin-right: 10px;
vertical-align: -0.125em;
}
}
body {
overflow : hidden;
overflow: hidden;
-webkit-overflow-scrolling: touch;
-webkit-app-region : no-drag;
-webkit-app-region: no-drag;
height: 100%;
user-select : none;
user-select: none;
--webkit-user-select: none;
scroll-behavior: smooth;
text-rendering : optimizeLegibility !important;
text-rendering: optimizeLegibility !important;
background-color: var(--background-color-primary) !important;
font-family : var(--fontFamily);
font-family: var(--fontFamily);
}
#root {
@ -71,7 +71,7 @@ body {
position: fixed;
overflow: hidden;
width : 100%;
width: 100%;
height: 100%;
background-color: var(--background-color-primary) !important;
@ -79,11 +79,11 @@ body {
#nprogress {
position: absolute;
top : 0;
width : 100vw;
top: 0;
width: 100vw;
.bar {
height : 2px;
height: 2px;
background: #48acf0;
}
}
@ -91,26 +91,26 @@ body {
.ant-layout,
.content_layout,
.app_layout {
background : var(--background-color-primary) !important;
background: var(--background-color-primary) !important;
background-color: var(--background-color-primary) !important;
position : relative;
position: relative;
-webkit-overflow-scrolling: touch;
width : 100%;
height : 100%;
width: 100%;
height: 100%;
max-height: 100vh;
overflow : hidden;
overflow: hidden;
transition: all 150ms ease-in-out;
::-webkit-scrollbar {
display : block;
display: block;
position: absolute;
width : 14px;
height : 18px;
z-index : 200;
width: 14px;
height: 18px;
z-index: 200;
transition: all 200ms ease-in-out;
}
@ -119,15 +119,15 @@ body {
::-webkit-scrollbar {
display: none !important;
width : 0;
height : 0;
width: 0;
height: 0;
z-index: 0;
}
}
}
.layout_page {
position : relative;
position: relative;
-webkit-overflow-scrolling: touch;
height: 100%;
@ -136,12 +136,18 @@ body {
overflow-x: hidden;
overflow-y: overlay;
transition: all 150ms ease-in-out;
&.noMargin {
margin: 0;
}
}
@media (max-width: 768px) {
.layout_page {
padding: 10px;
margin : 0;
margin: 0;
}
h1,
@ -152,7 +158,7 @@ body {
h6,
span,
p {
user-select : none;
user-select: none;
-webkit-user-select: none;
}
@ -163,17 +169,17 @@ body {
.fade-transverse-active {
transition: all 250ms;
height : fit-content;
width : 100%;
height: fit-content;
width: 100%;
}
.fade-transverse-enter {
opacity : 0;
opacity: 0;
transform: translateX(-30px);
}
.fade-transverse-leave {
opacity : 0;
opacity: 0;
transform: translateX(30px);
}
@ -183,18 +189,18 @@ body {
}
.fade-scale-enter {
opacity : 0;
opacity: 0;
transform: scale(1.2);
}
.fade-scale-leave {
opacity : 0;
opacity: 0;
transform: scale(0.8);
}
.fade-opacity-active {
transition: all 250ms;
opacity : 1;
opacity: 1;
}
.fade-opacity-leave {
@ -206,50 +212,50 @@ body {
}
.app_initialization {
width : 100vw;
height : 100vh;
width: 100vw;
height: 100vh;
padding: 50px;
display : flex;
flex-direction : column;
display: flex;
flex-direction: column;
justify-content: center;
align-items : center;
align-items: center;
>div {
width : 100%;
width: 100%;
height: fit-content;
display : flex;
flex-direction : column;
display: flex;
flex-direction: column;
justify-content: center;
align-items : center;
align-items: center;
margin-bottom: 50px;
}
}
.app_crash_wrapper {
width : 100vw;
height : 100vh;
display : flex;
flex-direction : column;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items : center;
align-items: center;
}
// Fixments
.ant-btn {
display : flex;
align-items : center;
display: flex;
align-items: center;
justify-content: center;
user-select : none;
user-select: none;
--webkit-user-select: none;
}
.ant-result-extra {
display : flex;
align-items : center;
display: flex;
align-items: center;
justify-content: center;
}
@ -268,7 +274,7 @@ body {
}
*:not(input):not(textarea) {
-webkit-user-select : none;
-webkit-user-select: none;
/* disable selection/Copy of UIWebView */
-webkit-touch-callout: none;
/* disable the IOS popup when long-press on a link */
@ -278,35 +284,35 @@ body {
overflow: hidden;
//background-color: rgba(240, 242, 245, 0.8);
backdrop-filter : blur(10px);
backdrop-filter: blur(10px);
--webkit-backdrop-filter: blur(10px);
width : 100%;
height : 100%;
width: 100%;
height: 100%;
z-index: 1000;
display : flex;
display: flex;
flex-direction: column;
align-items : center;
align-items: center;
justify-content: center;
}
.splash_logo {
width : 100%;
width: 100%;
height: 100%;
display : flex;
display: flex;
flex-direction: column;
align-items : center;
align-items: center;
justify-content: center;
img {
width : fit-content;
max-width : 50%;
width: fit-content;
max-width: 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));
}
}