Lemmy Acrylic by hdyzen

/* ==UserStyle==
@name           			Lemmy Acrylic
@namespace      			lemmy
@version        			1.0.7
@description    			style acrylic in lemmy instances
@author         			hdyzen
@preprocessor				stylus

@var checkbox customBkg		'Custom Background' 1
@var text bkgImage 			'Background Image' '"https://w.wallhaven.cc/full/m9/wallhaven-m9ed9k.jpg"'
@var color bkgColor			'Background Color Overwrite Image' #404040
@var checkbox navFixed		'Navbar Fixed' 1
@var checkbox navSegment 	'Navbar Segment' 1
@var color navBkgColor		'Navbar Background Color' hsla(0, 0%, 0%,  0.6)
@var color postBkgColor		'Posts Background Color' hsla(0, 0%, 0%, 0.6)
@var checkbox postSegment	'Post Segment' 0
@var checkbox separator		'Post Separator' 1
@var checkbox imgAlign		'Center Images' 1
@var checkbox blurThumb		'Blur Thumbnails NSFW' 1
@var select mSidebar		'Sidebar' ['Default', 'Minimize', 'Remove']
@var range navWidth			'Navbar Width' [0, 0, 100, 1, '%']
@var range contWidth		'Section Width' [0, 0, 100, 1, '%']

==/UserStyle== */
@-moz-document url-prefix() {

	/* VARS */
	i=!important;

	cardHeaderBkg=hsla(hue(postBkgColor), saturation(postBkgColor), lightness(postBkgColor) + 10%, alpha(postBkgColor));
	bordes=hsla(hue(postBkgColor), saturation(postBkgColor), lightness(postBkgColor) + 30%, alpha(postBkgColor) + 0.6);

	head:has([name="Description"][content="Lemmy"]) ~ body {
		/* BODY BACKGROUND */
		if customBkg {
			/* BACKGROUND IMAGE */
			& {
				background: url(bkgImage) i;
				background-size: cover i;
				background-position: center i;
				background-repeat: no-repeat i;
				background-attachment: fixed i;
			}
			/* BACKGROUND COLOR */
			if bkgColor!=#404040 {
				& {
					background: bkgColor i;
				}
			}
		}

		/* NAVBAR */
		if navFixed {
			& .shadow-sm {
				position: sticky i;
				top: 0 i;
				width: 100% i;
				background-color: navBkgColor i;
				backdrop-filter: blur(10px) i;
				z-index: 2 i;
			}
			& .mt-4 {
				margin-top: 22.5px i;
			}
			/* NAVBAR BORDER */
			& .shadow-sm {
				border: 1px solid bordes i;
			}
		}

		/* NAVBAR SEGMENT */
		if navSegment {
			& .shadow-sm {
				background: none i;
				backdrop-filter: none i;
				box-shadow: unset i;
				border: unset i;
			}
			& #navbar {
				background-color: navBkgColor i;
				backdrop-filter: blur(10px) i;
				box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) i;
				border-radius: 0 0 5px 5px i;
			}
			/* NAVBAR BORDER */
			& #navbar {
				border: 1px solid bordes i;
			}
		}

		/* NAVBAR WIDTH */
		if navWidth > 0 {
			& #navbar {
				max-width: unset i;
				width: navWidth i;
			}
		}

		/* CONTAINER WIDTH */
		if contWidth > 0 {
			& :is(.community, .home) {
				max-width: unset i;
				width: contWidth i;
			}
		}

		/* POST SEGMENT */
		if postSegment {
			/* POSTS CONTAINER */
			& main.col-12 {
				border: none i;
				background: unset i;
				backdrop-filter: unset i;
				box-shadow: unset i;
			}
			/* POSTS */
			& .post-listing {
				background-color: postBkgColor i;
				padding: 15px i;
				border-radius: 15px i;
				border: 1px solid bordes i;
			}
		}
		else {
			/* POSTS CONTAINER*/
			& main.col-12 {
				background-color: postBkgColor i;
				backdrop-filter: blur(10px) i;
				box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px i;
			}
			/* TRANSPARENT POST LISTING BKG */
			& .post-listing {
				background: none i;
			}
		}

		/* POST COTAINER PADDING */
		main.col-12 {
			padding: calc(var(--bs-gutter-x) * 0.5) i;
		}

		/* POST SEPARATOR  */
		if !separator {
			/* SEPARATOR POST */
			& .post-listings .my-3 {
				display: none i;
			}
		}

		/* CENTER IMAGE IN POSTS */
		if imgAlign {
			& .offset-sm-3.my-2.d-none.d-sm-block {
				/* 			margin: 5px auto i; */
				/* 			width: max-content; */
			}
			& .post-listing > div.my-2:not(.d-block) {
				/* 		 	display: flex i; */
				/* 		  	justify-content: center i; */
				margin-inline: 0 i;
				text-align: center i;
			}
		}

		/* BLUR THUMBNAIL */
		if !blurThumb {
			& :is(.thumbnail, .img-blur) {
				filter: none i;
			}
		}

		/* SIDEBAR OP */
		if mSidebar=='Minimize' {
			/* SIDEBAR */
			& aside.d-none {
				position: absolute i;
				width: 384px i;
				right: -344px i;
				transition: 0.3s ease i;
			}
			/* SIDEBAR HOVER */
			& aside.d-none:hover {
				right: 0 i;
			}
		}
		else if mSidebar=='Remove' {
			& aside.d-none {
				display: none i;
			}
		}

		/* COMMUNITIES CONTAINER BKG */
		& .communities.container-lg {
			background-color: postBkgColor i;
		}

		/* COMMUNITIES HEADER BKG */
		& .communities.container-lg h1 {
			background-color: cardHeaderBkg i;
		}

		/* COMMUNITIES LIST CONTAINER BKG */
		& #community_table {
			background-color: postBkgColor i;
			border-color: cardHeaderBkg i;
		}

		/* COMMUNITIES LIST BKG */
		& .table > :not(caption) > * > * {
			background-color: transparent i;
		}

		/* TRANSPARENT NAVBAR BKG */
		& :is(#navbarDropdown, .login.container-lg h1) {
			background: none i;
		}

		/* TRANSPARENT COMMENTS BKG */
		& :is(div[id^="comment-"], article[id^="comment-"], .my-2, .comments .comment.ml-1 div[id^="comment-"]) {
			background: none i;
		}

		/* POSTS WIDTH */
		& main.col-12 {
			flex-grow: 1 i;
		}

		/* SIDEBAR CARDS */
		& #sidebarContainer section {
			background-color: postBkgColor i;
			backdrop-filter: blur(10px) i;
		}

		/* SIDEBAR CARDS HEADER */
		& .card-header {
			background-color: cardHeaderBkg i;
		}
	}
}