From 556168c63954a6591f612a4c89352efa6e6af98a Mon Sep 17 00:00:00 2001
From: Free <freeplay@duck.com>
Date: Fri, 26 Nov 2021 17:07:45 +0100
Subject: [PATCH] Add 'misskey/mk-tweaks.user.css'

---
 misskey/mk-tweaks.user.css | 937 +++++++++++++++++++++++++++++++++++++
 1 file changed, 937 insertions(+)
 create mode 100644 misskey/mk-tweaks.user.css

diff --git a/misskey/mk-tweaks.user.css b/misskey/mk-tweaks.user.css
new file mode 100644
index 0000000..3fb671a
--- /dev/null
+++ b/misskey/mk-tweaks.user.css
@@ -0,0 +1,937 @@
+/*** 
+
+
+	!!! 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);
+		}
+	}
+}
+
+
+	
+}
\ No newline at end of file