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

@import "theme/animations.less";
@import "theme/vars.less";
@import "theme/fonts.css";
@import "theme/fixments.less";
@import "theme/mobile.less";

*,
*:before,
*:after {
	box-sizing: inherit;
	//font-size: calc(1rem * var(--fontScale));
}

html {
	box-sizing: border-box;

	overflow: hidden;
	height: 100%;
	-webkit-overflow-scrolling: touch;

	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,
	h4,
	h5,
	h6,
	p,
	span {
		color: var(--text-color);
		text-rendering: optimizeLegibility !important;

		margin-top: 0;
	}

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

	body {
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
		-webkit-app-region: no-drag;

		height: 100%;

		padding: 0;
		margin: 0;

		user-select: none;
		--webkit-user-select: none;

		scroll-behavior: smooth;
		text-rendering: optimizeLegibility !important;

		background-color: var(--background-color-primary) !important;
		font-family: var(--fontFamily);
	}

	*:not(input):not(textarea):not(a) {
		-webkit-user-select: none;
		/* disable selection/Copy of UIWebView */
		-webkit-touch-callout: none;
		/* disable the IOS popup when long-press on a link */
	}

	#root {
		position: fixed;
		overflow: hidden;

		overflow-y: auto;

		width: 100%;
		height: 100%;

		background-color: var(--layoutBackgroundColor) !important;

		font-size: calc(16px * var(--fontScale));

		&.electron {
			.ant-layout-sider {
				padding-top: 0px;
			}
		}

		&.centered-content {
			.app_layout {
				.content_layout {
					width: 45%;

					min-width: 400px;
					max-width: 45%;

					margin: auto;

					padding-left: 0;
					padding-right: 10px;

					@media screen and (max-width: 1920px) {
						width: 50%;
						max-width: 60%;
					}

					@media screen and (max-width: 1440px) {
						width: 80%;
						max-width: 80%;
					}
				}
			}
		}
	}

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

		.bar {
			height: 2px;
			background: var(--app-color);
		}
	}
}

.app_layout {
	position: relative;

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

	overflow: hidden;

	display: flex;
	flex-direction: row;

	background-color: rgba(var(--layoutBackgroundColor), var(--backgroundColorTransparency)) !important;
	backdrop-filter: blur(var(--backgroundBlur));

	transition: all 150ms ease-in-out;

	-webkit-overflow-scrolling: touch;

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

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

.content_layout {
	position: relative;
	-webkit-overflow-scrolling: touch;

	box-sizing: border-box;

	display: flex;
	flex-direction: column;

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

	height: 100%;
	width: 100%;

	max-height: 100dvh;

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

	transition: all 150ms ease-in-out;

	margin: var(--layoutMargin);
	padding: var(--layoutPadding);

	background-color: transparent;
}

.root_background {
	mask-image: var(--backgroundSVG);
	-webkit-mask-image: var(--backgroundSVG);

	background-image: var(--backgroundImage);
	background-size: var(--backgroundSize);
	background-position: var(--backgroundPosition);
	background-repeat: var(--backgroundRepeat);
	background-attachment: var(--backgroundAttachment);

	position: absolute;
	top: 0;
	left: 0;

	width: 100vw;
	height: 100dvh;

	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 {
	position: relative;

	display: flex;
	flex-direction: column;

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

	width: 100vw;
	height: 100dvh;

	.ant-result {
		background-color: var(--background-color-primary);
		border-radius: 8px;
	}
}

.app_splash_wrapper {
	position: absolute;

	top: 0;
	left: 0;

	overflow: hidden;

	backdrop-filter: blur(10px);
	--webkit-backdrop-filter: blur(10px);

	background-color: #252525;
	color: #d7d7d7;

	width: 100%;
	height: 100%;
	z-index: 1000;

	display: flex;
	flex-direction: column;

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

	>div {
		margin-bottom: 40px;
	}

	svg {
		color: rgb(215, 215, 215) !important;
	}

	&.fade-away {
		opacity: 0;
		transition: all 300ms ease-in-out;
	}

	.splash_logo {
		width: 100px;
		height: 100px;

		display: flex;
		flex-direction: column;

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

		img {
			width: 100%;
		}
	}

	.splash_label {
		font-size: 2rem;

		svg {
			margin: 0 !important;
		}
	}

	.splash_footer {
		display: flex;
		flex-direction: column;

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

		position: absolute;

		bottom: 0;
		left: 0;
		right: 0;

		margin: auto;
		width: fit-content;

		height: 300px;

		#powered_by {
			height: 40px;
			margin-bottom: 10px;

			filter: grayscale(1) brightness(0.8);
		}

		h4 {
			font-family: "Space Grotesk", sans-serif;
			font-size: 0.8rem;
			font-weight: 400;
		}
	}
}

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

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	span,
	p {
		user-select: none;
		-webkit-user-select: none;
	}

	.postCard {
		min-width: 30px;
	}
}

#fullImageViewer {
	.__react_modal_image__modal_container {
		background-color: rgba(0, 0, 0, 0.3) !important;
		backdrop-filter: blur(10px);
	}

	.__react_modal_image__header {
		background-color: transparent !important;
	}
}