/*** 


	!!! MAKE SURE TO ADD YOUR INSTANCE DOMAIN IN THE APPLIES TO SECTION BELOW !!!


***/

/* ==UserStyle==
@name           Misskey Tweaks
@version        1.0.8
@description    A collection of tweaks aimed at making Misskey less cluttered!
@updateURL      https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Misskey/mk-tweaks.user.css
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/CSS-Styles
@supportURL     https://codeberg.org/Freeplay/CSS-Styles/issues


@var text warn           "!! REFRESH AFTER CHANGING SETTINGS !!" '"OKAY!!"'
@var checkbox header     "↔ Move header aside" 1
@var checkbox bg         "🔲 Better Wallpaper Support" 1
@var checkbox posts      "💬 Better Posts Layout" 1
@var checkbox profile    "👤 Better Profile Page" 1
@var checkbox sidebar    "📇 Better Sidebar" 1
@var checkbox mentions   "🏓 Readable Mentions" 1
@var checkbox font       "🇦 Superior Local Font (Segoe UI)" 1
@var checkbox fixes      "🔧 Other Minor Fixes" 1
@var checkbox compose    "🖊 Better Compose" 1

==/UserStyle== */

@-moz-document domain("misskey.to"), domain("misskey.ai") {
if font {
	html {
		font-family: "Segoe UI", sans-serif;
	}
}


if sidebar {
	/*** Better Sidebar ***/
	.sidebar {
		display: flex;
		flex-direction: column;
		.nav {
			position: sticky;
			top: 0;
			border-right: .5px solid var(--divider);
			min-height: 100vh !important;
			max-height: 100vh !important;
			overflow: clip auto;

			& > div {
				height: auto !important;
				background: none !important;
				flex: none !important;
				position: relative !important;
				overflow: visible !important;
			}
		}
		button:not(.post):not(.gradate) {
			position: relative !important;
			background: none !important;
			box-shadow: none !important;
			backdrop-filter: none !important;
		}
		& > div:last-child:not(.iconOnly), .nav > div {
			display: flex;
			flex-direction: column;
			min-height: calc(100vh - 20px);
			& > a, & > button:not(.account):not(.post) {
				flex-grow: 1;
				display: flex !important;
				align-items: center !important;
				align-content: center;
				font-size: 100% !important;
				max-height: 55px;
				span {
					font-size: inherit !important;
				}
				&::before {
					content: unset !important;
				}
			}
		}
	}
}

if bg {
	.mk-app.wallpaper {
		background: none !important;
		&::before {
			content: "";
			position: fixed;
			inset: 0px;
			background-color: var(--bg);
			opacity: .85;
			pointer-events: none;
			z-index: -1;
		}
		.sidebar {
			z-index: 3;
			.nav {
				border-right-color: transparent;
			}
		}
		.contents {
			background: none !important;
		}
		main {
			overflow: visible !important;
			position: relative;
			background: none !important;
			border-color: transparent !important;
			--bg: transparent;
			--X17: transparent;
			// --panel: transparent;
			.tl {
				
				overflow: visible;
			}
			.fdidabkb + div > div > div > div {
				overflow: visible;
				position: relative;
				min-height: calc(100vh - 50px);
				backdrop-filter: blur(10px);
				&::before, &::after {
					content: "";
					position: absolute;
					top: -9999px;
					bottom: 0;
					right: 100%;
					left: -100vw;
					background-color: rgba(0,0,0,0.2);
					pointer-events: none !important;
					z-index: -1;
					box-shadow: 0 100vw 0 rgba(0,0,0,0.2);
				}
				&::after {
					right: 0;
					background: none;
					box-shadow: 100vw 100vh 0 rgba(0,0,0,0.2);
				}
			}
			
			.notes, ._block, ._card, ._panel, .elsfgstc, .fcuexfpr, .qtqtichx, .narrow {
				background: none !important;
				border-radius: 0 !important;
			}
		}
		.widgets {
			border: 0 !important;
			background: none !important;
		}

		.post {
			background: none !important;
		}
		.widgets .widget, div.tab, .widget header, .ukygtjoj > header {
			background: none !important;
			&::before, header::before {
				content: "";
				position: absolute;
				inset: 0;
				background: var(--panel);
				opacity: .7 !important;
				z-index: -1;
				pointer-events: none;
			}
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				backdrop-filter: blur(10px);
				z-index: -2;
				pointer-events: none;
			}
			&.tab {
				padding-inline: 6px !important;
			}
			._panel, .elsfgstc, header {
				background: none !important;
			}
			& > header::before {
				opacity: .5;
				backdrop-filter: blur(10px);
			}
		}
		.collapsed {
			border-radius: var(--radius) !important;
		}

	}
}

/*** MOBILE ***/
if mobile {
	.mk-app.isMobile {
		main.main.main {
			--margin: 0px;
			margin-top: 50vh !important;
			&::before, &::after {
				content: unset !important;
			}
			[style="padding: 12px;"] {
				padding: 0 !important;
				margin: 0 !important;
				width: 100% !important;
				._block {
					border-radius: 0 !important;
				}
			}
		}
		.fdidabkb {
			position: fixed;
			top: unset;
			bottom: 65px;
			left: 10px;
			right: 10px;
			width: unset !important;
			border-radius: var(--radius);
			border: 0;
			padding-left: 20px;
			z-index: 1001;
			--height: 50px;
			.titleContainer {
				margin-left: 0;
				.icon {
					margin-left: 0 !important;
				}
				.title {
					margin: 0;
					display: flex;
					align-items: flex-end;
					flex-grow: 1;
					margin-right: 10px;
				}
			}
		}
		& > .buttons {
			padding: 0 !important;
			background: linear-gradient(transparent, var(--bg)) !important;
			height: 120px;
			align-items: flex-end;
			border: 0 !important;
			backdrop-filter: none !important;
			button {
				margin: 0 !important;
				background: none !important;
				height: 70px !important;
				i {
					font-size: 18px !important;
				}
			}
		}
		& > .ccczpooj {
			animation: none !important;
		}
		._popup {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			top: unset !important;
			max-height: 400px;
			overflow-y: scroll;
			scrollbar-width: none;
			border-radius: var(--radius) var(--radius) 0 0 !important;
			animation: none !important;
			button {
				padding: 12px 16px;
			}
		}
	}
}
/*** HEADER ***/
/* MOVE ASIDE */
if header {
	@media only screen and (min-width: 1201px) {
		.columns > .main, main .content > div {
			overflow: visible !important;
			.fdidabkb:not(.slim) {
				display: contents !important;
				& > div {
					height: 50px !important;
				}
				.titleContainer {
					position: sticky;
					top: var(--stickyTop,0);
					z-index: 1000;
					margin-left: calc(100% + 17px) !important;
					margin-bottom: -50px !important;
					width: 300px;
					padding-left: 15px;
					box-sizing: border-box;
					background-color: var(--panelHeaderBg);
					border-radius: 0 0 var(--radius) var(--radius);
					.avatar {
						margin-left: 0 !important;
					}
					.title {
						white-space: nowrap;
					}
				}

				.tabs {
					height: 60px !important;
					margin-left: 0;
					margin-top: 10px !important;
					display: flex;
					justify-content: center;
					font-size: .9em !important;
					button::after {
						content: unset !important;
					}
					&:empty {
						height: 20px !important;
					}
				}
				.right {
					position: sticky;
					top: var(--stickyTop,0);
					margin-left: auto !important;
					margin-right: -312px !important;
					margin-top: -75px !important;
					margin-bottom: 9px !important;
					z-index: 1001;
					width: max-content;
					max-width: 150px;
					background-color: var(--panelHeaderBg);
					&::before {
						content: "";
						position: absolute;
						right: 100%;
						top: 0;
						bottom: 0;
						width: 40px;
						background: linear-gradient(to left, var(-panelHeaderBg), transparent);
					}
				}
			}
		}
		
		.widgets > div[style^="position: sticky"] > div:first-child {
			padding-top: 50px !important;
		}
	}
}

/** TIMELINE **/
/* POST */
if posts {
	.noGap > :not(:last-child) {
		// border: 0 !important;
	}
	.renote[tabindex], .note._block {
		display: flex;
		flex-direction: column;
	}
	.renote > div {
		position: relative !important;
	}
	.renote > .renote {
		margin-left: 50px;
		padding: 10px !important;
		padding-bottom: 0 !important;
		margin-bottom: -.2em;
		position: relative !important;
		color: var(--text) !important;
		font-weight: 600;
		font-size: .8em;
		opacity: .6;
		z-index: 2;
		// width: max-content;
		max-width: 100%;
		.avatar, .info time {
			display: none !important;
		}
		& ~ .article {
			margin-top: calc(-1em - 25px) !important;
			padding-top: calc(1em + 25px) !important;
		}
	}
	.article, .reply, .reply-to, .reply-to-more {
		padding: 12px !important;
		position: relative !important;
		opacity: 1 !important;
		transition: background-color .2s;
		font-size: 1em !important;
		&:hover, &:focus-within, ._isolated &.article {
			background-color: var(--listItemHoverBg);
		}
		.avatar {
			img {
				border-radius: 25% !important;
			}
		}
		.username, .created-at {
			opacity: .6 !important;
		}
		// Make full post clickable, while still allowing clicking link's n' stuff.
		.created-at::before {
			content: "";
			position: absolute;
			inset: 0;
			left: 0px;
		}
		.text {
			z-index: 2 !important;
			span {
				position: relative;
				z-index: 2;
			}
		}
		button:not(.fade), a:not(.created-at):not(.avatar), .files {
			position: relative !important;
			z-index: 3 !important;
		}
		.cover + .text {
			position: absolute !important;
		}
		.fas, .fas::before {
			z-index: 3 !important;
		}
			
		button.fade {
			z-index: 3;
		}
		.avatar {
			z-index: 2 !important;
		}
		.ticker {
			height: 25px !important;
			position: absolute;
			bottom: 10px;
			right: 10px;
			border-radius: 100px;
			z-index: 2;
			overflow: visible;
			img {
				width: 25px !important;
				height: 25px !important;
			}
			span {
				position: absolute;
				right: 100%;
				height: 25px !important;
				white-space: nowrap;
				// font-weight: 500 !important;
				display: inline-flex;
				// margin-right: 4px;
				align-items: center;
				background: inherit;
				font-size: .7em !important;
				padding: 0px 8px;
				border-radius: 4px;
				transform: scale(.9) translateX(5%);
				opacity: 0;
				pointer-events: none;
				transition: transform .1s, opacity .1s;
			}
			&:hover {
				span {
					transform: none;
					opacity: 1;
				}
			}
		}
		
		.text, .body, .content {
			pointer-events: none;
			max-height: 9999px;
			transition: mask .2s, max-height 2s;
			*:not(div):not(blockquotes) {
				pointer-events: all !important;
			}
		}
		.content.collapsed {
			
			.text {
				mask: linear-gradient(black, black, rgba(0,0,0,0.5), transparent);
				max-height: 150px;
			}
			.fade {
				background: none !important;
			}
			
		}
		
		// Reply Button
		a.reply {
			display: none;
		}

		&.article {
			padding-bottom: 5px !important;
			.avatar {
				transform: scale(.9) !important;
			}
			.header {
				margin-bottom: .2em;
			}
			.files {
				margin-top: .7em;
			}
			.footer {
				margin-top: .1em;
			}

		}
		
		&:not(.reply-to), ._isolated & {
			.cw > ._button {
				display: block;
				width: 100% !important;
				background: none;
				color: inherit;
				padding: 10px;
				// border-radius: var(--radius);
				font-size: .9em;
				margin-left: -85px;
				width: calc(100% + 100px) !important;
				transition: background .2s;
				text-align: left;
				padding-left: 85px;
				&:hover {
					background-color: var(--listItemHoverBg);
				}
			}
			.avatar {
				margin-right: 10px !important;
			}
			.poll {
				font-size: .9em !important;
				margin-top: 1em;
				ul > li {
					padding: 8px 12px !important;
					font-weight: 700;
					span {
						display: flex;
						align-items: center;
						.votes {
							margin-left: auto;
							// font-weight: 500;
							opacity: .7;
						}
					}
					.backdrop {
						border-radius: 4px;
					}
				}
			}
		}
		._isolated & {
			&.article {
				padding: 20px !important;
				padding-bottom: 5px !important;
				& > header > .avatar {
					margin-right: -5px !important;
				}
				.text {
					font-size: 1.3em !important;
				}
				.gird-container {
					&::before {
						content: unset;
					}
					& > div {
						position: relative !important;
						max-height: 80vh;
					}
				}
				time {
					position: relative;
				}
			}
			
			&.reply-to, &.reply-to-more {
				padding: 14px 18px !important;
				border-bottom: 1px solid var(--divider);
			}
			&.children, &.article + .reply {
				&.children {
					padding-right: 0 !important;
					padding-bottom: 0 !important;
					background: none !important;
				}

			}
			details {
				display: contents;
				summary {
					display: none;
				}
			}
		}
		:not(._isolated) > &.reply-to  {
			&::before {
				content: "";
				position: absolute;
				right: 100%;
				margin-right: -15px;
				margin-top: 2px;
				border-top-left-radius: 12px;
				top: 50%;
				height: 200%;
				width: 41px;
				border-top:  4px solid currentColor;
				border-left: 4px solid currentColor;
				opacity: .5;
			}
			&, .widgets & {
				display: flex; 
				flex-grow: 1; 
				padding-bottom: 0 !important;
				background: none !important;
				margin-bottom: 5px !important;
				position: relative !important;
				z-index: 2 !important;
				margin-left: 70px !important;
				font-size: .8em !important;
				opacity: .8 !important;
				&:hover {
					opacity: 1 !important;
				}
				& ~ .article {
					margin-top: calc(-1em - 25px) !important;
					padding-top: calc(1em + 25px) !important;
				}
				& ~ .renote, & ~ .info {
					margin-bottom: -.7em !important;
					order: -1 !important;
				}
				& ~ .renote ~ .article {
					margin-top: calc(-3em - 30px) !important;
					padding-top: calc(3em + 30px) !important;
				}
				.main {
					flex-grow: 1;
				}
				.avatar {
					height: 1.2em !important;
					width: 1.2em !important;
				}
				.name {
					max-width: 20%;
					z-index: 4 !important;
				}
				.cw {
					display: flex !important;
				}
				.body, header {
					display: contents;
					.content {
						display: flex;
						flex-grow: 1;
					}
					.username {
						display: none;
					}
					.info {
						margin-left: 1em;
						order: 2;
						z-index: 3;
					}
					.text {
						display: flex;
						width: 0;
						// overflow: hidden;
						white-space: nowrap;
						flex-grow: 1 !important;
					}
					.reply {
						margin: 0 .5em !important;
						padding: 0 !important;
					}
					span, summary {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						height: 1rem !important;
						font-size: 1em !important;
						[href^="/@"] {
							margin: -1em 0 !important;
						}	
						br {
							display: none;
							& + a {
								margin-left: .2em;
							}
						}
						img {
							height: 1rem !important;
							width: 1rem !important;
						}
					}
					summary {
						margin-left: 10px;
					}
				}
			}
		}
		.widget & {
			.avatar {
				width: 1.2rem !important;
				height: 1.2rem !important;
				position: relative !important;
				top: 0 !important;
			}
			& > .main {
				margin-left: -1.8rem;
				.header {
					margin-left: 1.6rem;
				}
			}
			&.reply-to.reply-to {
				margin-left: 3.4rem !important;
				&::before {
					// content: unset;
					margin-top: 4px;
					border-width: 3px;
					margin-right: 1rem !important;
					width: 1rem;
					height: 1.5em;
				}
			}
		}
	}
}

if profile {
	.narrow {
		position: relative;
	}
	.profile {
		margin-bottom: var(--margin);
		.banner {
			background-color: transparent !important;
		}
		.description {
			margin-top: 30px !important;
			padding: 24px !important;
			text-align: left !important;
		}
		.status {
			position: absolute;
			top: 250px;
			left: 144px;
			padding: 0px !important;
			a {
				padding: 12px;
				b {
					margin-right: .5em;
					line-height: 1em !important;
					display: inline !important;
				}
				span {
					opacity: .8;
					font-size: 1em !important;
				}
			}
		}
		.fields {
			display: flex;
			flex-wrap: wrap;
			padding: 0 24px !important;
			border: 0 !important;
			padding-bottom: 24px !important;
			.field {
				background-color: var(--panelHighlight);
				border-radius: 1em;
				margin: 0 .5em .5em 0 !important;
				font-size: .9em;
				& > * {
					padding: 6px 10px;
				}
				.name {
					width: auto !important;
				}
				.value {
					width: auto !important;
					padding-left: 0;
					a[rel*="nofollow"] {
						margin: -6px -10px;
						margin-left: 0;
						padding: 6px 10px;
						display: flex;
						position: relative;
						&::before {
							content: "";
							position: absolute;
							inset: 0;
							background-color: var(--link);
							border-radius: var(--radius);
							opacity: .1;
						}
						.fa-external-link-square-alt {
							display: none;
						}
					}
				}
			}
			&.system {
				margin-top: -24px;
				padding-top: 1em !important;
				padding-bottom: .5em !important;
				.field {
					background: none;
					opacity: .8;
					max-width: 300px !important;
					font-size: 1em;
					padding-right: 10px !important;
					& > * {
						padding: 0;
						&.name {
							min-width: max-content;
							padding-right: .4rem;
							font-weight: 500 !important;
							font-size: 0;
							i {
								font-size: .9rem;
							}
						}
					}
				}
			}
		}
		& ~ .contents {
			position: relative;
		}
		& ~ .contents > div > ._panel {
			& {
				.content.omitted {
					& > div {
						padding-inline: 0;
					}
					.stream {
						display: flex;
						overflow-x: auto;
						// scroll-snap-type: x mandatory;
						scroll-padding: 24px;
						padding-left: 24px;
						scrollbar-color: transparent transparent;
						mask: linear-gradient(to right, black calc(100% - 400px), rgba(0,0,0,0.4), transparent);
						a {
							min-width: max-content;
							scroll-snap-align: start;
							height: 100px;
						}
					}
					button.fade {
						background: linear-gradient(to right, transparent, var(--panel));
						background: none;
						top: 0;
						bottom: 0;
						right: 0;
						left: unset;
						height: unset;
						width: auto;
						padding: 24px;
					}
				}
				.content:not(.omitted) {
					padding: 0 14px !important;
					padding: 0 !important;
					padding-top: 14px !important;
					& > div {
						padding: 0;
					}
					.stream {
						display: flex;
						flex-wrap: wrap;
						a {
							flex-grow: 1;
							height: auto;
							max-height: 60vh;
							border-radius: 0;
						}
					}
					.empty { display: none; }
				}
			}
		}
	}
}

if mentions {
	a[href^="/@"][style^="background:"] {
		color: inherit !important;
		padding: .15em .35em;
		padding-left: .2em;
		margin: -.15em 0;
		img {
			height: 1.3em !important;
			width: 1.3em !important;
		}
		span {
			opacity: 1 !important;
		}
	}
}


if fixes {
	// Block Headers
	header._button {
		padding: 0 15px !important;
	}
	
	// Add rounded corners to sticky headers
	.mk-app:not(.wallpaper) .tab[style*="--stickyTop:"] {
		margin-bottom: 0 !important;
		&::after, &::before {
			content: "";
			position: absolute;
			top: 100%;
			width: calc(var(--radius) * 2);
			height: calc(var(--radius) * 2);;
			border-top-left-radius: var(--radius);
			box-shadow: -4px -4px 0 var(--bg);
		}
		&::after {
			right: 0;
			box-shadow: 4px -4px 0 var(--bg);
			border-top-left-radius: 0;
			border-top-right-radius: var(--radius);
		}
	}
}


	
}