comty/packages/app/src/theme/index.less

@import "antd/dist/antd.variable.less";
@import "theme/vars.less";
@import "theme/fonts.css";

::-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;
}

html {
	position: fixed;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	background-color: var(--background-color-primary) !important;

	height: 100vh;
	max-height: 100vh;
	min-height: 100vh;

	&.theme-dark {
		@import "./variations/dark.less";
	}

	svg {
		margin-right: 10px;
		vertical-align: -0.125em;
	}
}

body {
	text-rendering: optimizeLegibility !important;
	-webkit-app-region: no-drag;

	user-select: none;
	background-color: var(--background-color-primary) !important;
	font-family: "Varela Round", sans-serif;

	scroll-behavior: smooth;
	height: 100%;

	overflow: hidden;
}

#root {
	position: fixed;
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
	//position: absolute;
	width: 100%;
	height: 100%;

	height: 100vh;

	overflow-x: hidden;
	overflow-y: hidden;
	background-color: var(--background-color-primary) !important;
}

#nprogress {
	position: absolute;
	top: 0;
	width: 100vw;

	.bar {
		height: 2px;
		background: #48acf0;
	}
}

.ant-layout,
.content_layout,
.app_layout {
	background: var(--background-color-primary) !important;
	background-color: var(--background-color-primary) !important;

	position: relative;
	-webkit-overflow-scrolling: touch;

	width: 100%;
	height: 100%;
	max-height: 100%;

	overflow: hidden;
	transition: all 150ms ease-in-out;

	::-webkit-scrollbar {
		display: block;
		position: absolute;

		width: 14px;
		height: 18px;
		z-index: 200;
		transition: all 200ms ease-in-out;
	}

	&.mobile {
		padding-top: 20px;

		::-webkit-scrollbar {
			display: none !important;
			width: 0;
			height: 0;
			z-index: 0;
		}
	}
}

.layout_page {
	position: relative;

	height: 100%;
	max-height: 100%;

	margin: 10px 10px 30px 16px;

	overflow-x: hidden;
	overflow-y: overlay;
}

@media (max-width: 768px) {
	.layout_page  {
		margin: 10px;
	}
}

.fade-transverse-active {
	transition: all 250ms;
	height: 100%;
	width: 100%;
}

.fade-transverse-enter {
	opacity: 0;
	transform: translateX(-30px);
}
.fade-transverse-leave {
	opacity: 0;
	transform: translateX(30px);
}

.fade-scale-leave-active,
.fade-scale-enter-active {
	transition: all 0.3s;
}
.fade-scale-enter {
	opacity: 0;
	transform: scale(1.2);
}
.fade-scale-leave {
	opacity: 0;
	transform: scale(0.8);
}

.app_crash {
	position: absolute;
	z-index: 9999;

	top: 0;
	right: 0;

	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: center;

	.header {
		display: flex;
		text-align: center;
		flex-direction: column;
		justify-content: center;
		svg {
			width: 100px;
			height: 100px;
		}
	}
}

// Fixments
.ant-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ant-result-extra {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ant-modal-confirm-btns {
	display: flex;
}

.__render_box_test {
	position: absolute;
	z-index: 9999;

	width: 40vw;
	height: 40vw;

	background: red;
	transition: all 50ms ease-out;

	filter: drop-shadow(20px 20px 3px rgba(0, 0, 0, 1));
}