Mastodon Advanced View Plus by freeplay

Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/mastodon/advanced-view-plus.user.css

Mastodon Advanced View Plus screenshot
Homepage Install Get Stylus Write a review

Details

Authorfreeplay

LicenseNo License

Created

Updated

CategoryMastodon

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Description

Adds more options for Mastodon's advanced view!

Source code

/* ==UserStyle==
@name           Mastodon Advanced View Plus
@version        1.0.3
@description    Adds more options for Mastodon's advanced view!
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/mastodon/advanced-view-plus.user.css
@preprocessor   stylus

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

@var text hehe "Also Try Out Mastodon Modern!" '"https://userstyles.world/style/4773"'
@var checkbox drawerCollapse  "Drawer: Collapse" 0
@var checkbox drawerStick     "Drawer: Stick to left" 1
@var range drawerW            "Drawer: Width" [300, 250, 400, 25, 'px']
@var checkbox columnCenter    "Columns: Center to screen" 1
@var range columnMinWidth     "Columns: Minimum Width" [350, 300, 700, 25, "px"]
@var range columnMaxWidth     "Columns: Max Width (700 = full)"     [600, 300, 700, 25, "px"]
@var range columnOpacity      "Columns: Unfocused Opacity" [1, .5, 1, .1]
@var checkbox lastColumnStick "Columns: Stick last column to right" 1
@var text collapsedColumns    "Columns: Collapse numbered columns: (Ex: 1 3 5. Type 'All' for all columns)" "Enter numbers here"
@var range minColumnsAmountShrink "Columns: Cascade Shrink Amount" [250, 50, 300, 10, "px"]
@var text  minColumns         "Set numbered columns to fixed size (Ex: 1 3 5)" "Enter numbers here"
@var range minColumnsWidth    "Set numbered columns to fixed size: size" [250, 250, 800, 50, "px"]
@var checkbox snapColumns     "Scroll Snap Columns" 0
@var text aaaaaaaaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA "Donate!" '"https://www.buymeacoffee.com/Freeplay"'

==/UserStyle== */
	
.layout-multiple-columns > #mastodon {
	softGradientRight = linear-gradient(
		to right,
		hsl(0, 0%, 0%) 0%,
		hsla(0, 0%, 0%, 0.987) 8.1%,
		hsla(0, 0%, 0%, 0.951) 15.5%,
		hsla(0, 0%, 0%, 0.896) 22.5%,
		hsla(0, 0%, 0%, 0.825) 29%,
		hsla(0, 0%, 0%, 0.741) 35.3%,
		hsla(0, 0%, 0%, 0.648) 41.2%,
		hsla(0, 0%, 0%, 0.55) 47.1%,
		hsla(0, 0%, 0%, 0.45) 52.9%,
		hsla(0, 0%, 0%, 0.352) 58.8%,
		hsla(0, 0%, 0%, 0.259) 64.7%,
		hsla(0, 0%, 0%, 0.175) 71%,
		hsla(0, 0%, 0%, 0.104) 77.5%,
		hsla(0, 0%, 0%, 0.049) 84.5%,
		hsla(0, 0%, 0%, 0.013) 91.9%,
		hsla(0, 0%, 0%, 0) 100%
	);
	
	
	// Drawer
	&#mastodon {
		--collapsed-width 80px
		.drawer, .columns-area, > div > .ui, & > [tabindex], & {
			background-color inherit !important
		}
		.drawer.drawer.drawer {
			z-index 101
			width drawerW
		}
		& ~ * {
			z-index 102
		}
		.ui__header {
			display none
		}
		if drawerCollapse {
			.ui__header {
				display unset
				width 80px
				min-width 80px
				max-width 80px !important
				margin-top 0px
				margin-right -80px
				padding-block 30px
				z-index 101
				background inherit
				height 100vh
				if drawerStick {
					left 0
				}
				
				.account__avatar {
					width 45px !important
					height 45px !important
				}
				.ui__header__logo {
					display none
				}
				.ui__header__links {
					flex-direction column-reverse
				}
				.button {
					width 45px
					height 45px
					height 85px
					box-sizing border-box
					// border-radius 40%
					margin-top 10px
					font-size 0
					&::before, &::after {
						font normal normal normal 14px/1 FontAwesome
						content ""
						font-size 24px
						position absolute
						inset 0
						height 45px
						left 4px
						display flex
						align-items center
						justify-content center
						white-space pre
					}
					&::after {
						content ""
						top unset
						right 8px
						left 8px
						transform scale(.7)
						border-top 1px solid
						padding-top 5px
					}
				}
				
			}
			.drawer.drawer.drawer:first-child {
				margin-top 0px
				margin-top 180px !important
				padding-inline 16px !important
				width 80px
				box-sizing border-box
				overflow visible !important
				background none !important
				// padding-inline 12px !important
				// padding-right 6px !important
				// padding-inline 0px !important
				// align-items center
				& + .column {
					padding-left 0
				}
				.drawer__header {
					flex-direction column
					background none
					> a.drawer__tab {
						padding-inline-end 0 !important
						padding-inline-start 0 !important
						padding-block 0
						font-size 20px
						border-radius 100px
						height 50px
						display flex
						align-items center
						justify-content center
					}
				}
				.navigation-bar__profile, a[href^="/@"] {
					display none
				}
				.compose-form > :first-child:not(.reply-indicator), .reply-indicator {
					&, & ~ *:not(.spoiler-input) {
						display none
					}
				}
				.compose-form {
					position static
				}
				// Show Replying Indicator
				^[-1] .ui:not(.is-composing) .reply-indicator ~ .spoiler-input  {
					opacity 1 !important
					.autosuggest-input {
						display none
					}
					&::before {
						content ""
						pointer-events none
						position fixed
						width 20px
						height 20px
						background-color white
						color #5a5afe
						// border 2px solid red
						top 117px
						left 42px
						z-index 9999
						border-radius 100px
						box-shadow 0 0 12px #5a5afe
						font normal normal normal 14px/1 FontAwesome
						font-size .8em
						display flex
						justify-content center
						align-items center
						outline 0px solid
						animation replyIn 1s cubic-bezier(.5,1,0,1.5)
					}
				}
				
				@keyframes replyIn {
					from {
						transform scale(2)
						filter opacity(.5)
						outline 900px solid
						background transparent
						color transparent
						// box-shadow 0 0 0 900px rgba(0, 0, 255, 0)
					}
					50% {
						transform scale(2)
						filter opacity(.5)
					}
				}
				.drawer__pager {
					margin-inline -16px
				}
				.navigation-bar {
					flex-direction column
				}
				.search, .drawer__inner.darker {
					display none
				}
				.drawer__inner:not(.darker), .drawer__inner__mastodon {
					background-color transparent
				}
			}
			.drawer:last-child {
				.drawer__header {
					display none
				}
			}
		}
		// if drawerCollapse == "New" {
		// 	.drawer:first-child {
				
		// 		.compose-form {
		// 			min-width unquote("calc(" + drawerW + " - 48px)")
		// 		}
		// 		.drawer__header {
		// 			.drawer__tab {
		// 				box-sizing border-box
		// 				transition padding .2s, flex-shrink .2s !important
		// 			}
		// 		}
				
		// 		&:not(:hover):not(:focus-within) {
		// 			width var(--collapsed-width)
		// 			.drawer__header {
		// 				.drawer__tab {
		// 					min-width 100%
		// 				}
						
		// 			}
		// 		}
				
		// 	}
		// }
	}
	
	// Cascading Columns
	&#mastodon {
		// if cascade {
		// 	.column-header__wrapper, .column-header {
		// 		z-index unset !important // Weird behavior w/ headers if this is not set
		// 	}
		// }
		.column.column.column {
			transition-timing-function cubic-bezier(0,0,0,1.1) !important
			transition-duration .2s !important
			position relative
			z-index 1
			background inherit !important
			minColumnsAmountShrinkMore = minColumnsAmountShrink / 1.5
			
			for num in collapsedColumns {
				if num == "All" {
					selector = "&"
					box-shadow 0px 0 200px rgba(0,0,0,.4)
					&:not(:last-child) > * > * {
						opacity columnOpacity !important
						if columnOpacity == 1 {
							opacity .6 !important
						}
						transition opacity .2s
					}
				} else {
					selector = "&:nth-child(" + (num + 1) + "), &:last-child"
				}
				{selector} {
					margin-right - minColumnsAmountShrink !important
					overflow clip
					&:last-child {
						transition background 0s .2s !important
						box-shadow none !important
						> * {
							transition transform .2s, opacity .2s !important
							transition-timing-function cubic-bezier(0,0,0,1.1) !important
						}
						&::after {
							content ""
							position absolute
							inset 0
							box-shadow inset -200px 0 200px -200px rgba(0,0,0,.7)
							opacity 0
							z-index 99999
							pointer-events none
							transition .2s opacity
						}
					}
					&:hover {
						z-index 2
						
						& > * > * {
							opacity 1 !important
						}
						& ~ .column {
							// 
							// margin-left - minColumnsAmountShrinkMore !important
							// &:not(:last-child) {
								transform translateX(minColumnsAmountShrinkMore)
								// margin-right - minColumnsAmountShrinkMore
								// margin-left minColumnsAmountShrinkMore
								for row in (1..20) {
									&:nth-child({row}) {
										// transform translateX(minColumnsAmountShrinkMore - (minColumnsAmountShrinkMore / (row / 4)))
										transform translateX(minColumnsAmountShrinkMore / (row / 4))
										&:last-child {
											> * {
												transform translateX(minColumnsAmountShrinkMore / (row / 4))
											}
										}
									}
								}
							// }
							box-shadow 0px 0 200px rgba(0,0,0,.4) !important
							
							&:last-child {
								transform none !important
								// z-index -1
								background none !important
								box-shadow none !important
								transition background 0s !important
								pointer-events none
								&::after {
									opacity 1
								}
								> * {
									pointer-events all
									box-shadow 0px 0 200px rgba(0,0,0,.4) !important
									transform translateX(minColumnsAmountShrinkMore)
								}
								
							}
							
							
							& > * {
								opacity columnOpacity
								// if columnOpacity == 1 {
								// 	opacity .6 !important
								// }
							}
						}
						
					}
					& + .column {
						box-shadow 0px 0 200px rgba(0,0,0,.4)
					}
					.scrollable {
						&::before {
							content unset !important
						}
					}
				}
			}
			
		}
	}
	
	
	
	// Sticking columns to sides
	&#mastodon {
		> div > .ui {
			// Center the columns without squishing the columns to its min-width
			flex-direction row
			// justify-content stretch !important
			// justify-content center !important
			flex-grow 1
			&::before, &::after {
				content ""
				// flex 1 1 0
				width 0 !important
				flex-grow 0
				transition flex-grow .2s
				if columnCenter {
					flex-grow 1
				}
			}
			.columns-area {
				// flex-grow 0
				// overflow-x auto
				// max-width 100%
				// // margin 0 auto !important
				// width unset !important
				display contents
				if drawerStick {
					// mask linear-gradient(to right, black drawerW - 20px, transparent drawerW - 15px, black (drawerW + 40px))
					// &::before, &::after {
					// 	content ""
					// 	position fixed
					// 	top 0
					// 	left 0
					// 	bottom 0
					// 	width drawerW - 5px
					// 	background inherit
					// 	z-index 100
					// 	// opacity .9
					// }
					// &::after {
					// 	// content unset !important
					// 	z-index 1
					// 	left drawerW - 5px
					// 	mask softGradientRight
					// 	background none
					// 	width 20px
					// 	backdrop-filter blur(20px)
					// }
				}
				
				.drawer {
					margin-left 0 !important
					// background none !important
					// box-shadow 0 50px 50px rgba(0,0,0,.4)
				}
				> .column:last-child {
					margin-right 0 !important
				}
				.drawer {
					position sticky !important
					if drawerStick {
						left 0
					}
				}
				.column.column {
					flex-grow 99999 !important
					if lastColumnStick {
						&:last-child {
							position sticky !important
							right 0 !important
							box-shadow 0px 0 24px rgba(25, 27, 34, .2) !important
							padding-left 8px
							> * {
								opacity 1
							}
						}
					}
					& + div {
						transition-timing-function cubic-bezier(0,0,0,1.1) !important
						transition-duration .2s !important
					}
					
				}
				
			}
			
		}
	}

	
	// The rest
	&#mastodon {
		overflow-x auto
		justify-content unset
		
		> div {
			// display contents
			min-width max-content
			
		}
		if snapColumns {
			scroll-snap-type x mandatory
			if drawerCollapse && drawerStick {
				scroll-padding-left 80px
			} else if drawerStick {
				scroll-padding-left drawerW
			}
		}
		.column, .drawer {
			if snapColumns && !drawerStick {
				scroll-snap-align start
			}
			& > * {
				opacity columnOpacity
				transition opacity .2s !important
				filter none !important
				^[-1]:hover ^[-1..-1] {
					opacity 1 !important
				}

			}
			&:hover ~ :last-child {
				& > * {
					opacity columnOpacity !important
				}

			}
		}
		.column {
			transition min-width .2s, max-width .2s, width .2s, transform .4s, margin .2s
			flex-grow 1000 !important
			if columnMaxWidth != 700 {
				max-width columnMaxWidth !important
			}
			min-width columnMinWidth !important
			
			
			
			flex-grow 2 !important
			
			for num in minColumns {
				&:nth-child({minColumns + 1}) {
					min-width minColumnsWidth !important
					max-width minColumnsWidth !important
				}
			}
			
			// if alignColumns {
			// 	// width 1% !important
			// 	// width 30vw !important
			// 	// flex 1 0 30% !important
			// }
			
			if snapColumns {
				scroll-snap-align start
			}
			&:nth-last-child(2) {
				&::after {
					content ""
					scroll-snap-align start
				}
			}
			
		}
		.drawer:not(:first-child) {
			width drawerW !important
			scroll-snap-align end
		}
		
	}
	
	
}










Reviews

No reviews yet.