Mastodon Modern by Freeplay

	 //////////////////////////////////////////////////////////////////// 🦊
	//																	//
	//	!!! MAKE SURE TO ADD YOUR SERVER URL USING THE STEPS BELOW !!!	//
	//	1. Install the style											//
	//	2. Click the "Edit" in the left sidebar							//
	//	3. Click the "Settings" button in the left sidebar				//
	//	4. Paste your server's URL in the								//
	//		"Custom included sites" textbox like this:					//
	//  		*//DOMAIN HERE/*  										//
	//	5. Click "Save"													//
	//																	//
	 //////////////////////////////////////////////////////////////////// 

	 
/* Update 1.5.0
- Styled settings pages
- Improved account cards, gallery view
- Sticky account banners w/ blur below them
- More tweaks to notifications
- Left-aligned status buttons
- Used a different approach to moving the header to the side
- Smoother transitions between different widths
- r a i n b o w c o m p o s e b u t t o n
- did table stuff
- General improvements & Mobile Fixes
- FIXES FIXES FIXES FIXES FIXES FIXES FIXES FIXES FIXES FIXES FIXES FIXES FIXES 

- Added some more larger vanilla servers, 
	although please remember you can still do above to add your own home server!!!
	
*//*  Hotfix 1.5.1
- Fixed checkbox positions in settings page
- Only FF users get cool header banner blur effect >:( , unreliable in chromium browsers.
*//*  1.5.2
- Polishing things up
- Restyled 'show more' button
*//* 1.5.4
- Fixed popup player showing behind some elements
*//* 1.5.5
- Fix unclickable x button in reply indicator
*/

/* ==UserStyle==
@name           Mastodon Modern
@version        1.5.5
@description    Drastically improves the look & feel of Mastodon
@homepageURL    https://codeberg.org/Freeplay/Mastodon-Modern
@supportURL     https://codeberg.org/Freeplay/Mastodon-Modern/issues
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
==/UserStyle== */
	 
@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("indieweb.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social") {

/ { // This is mainly so I can easily collapse everything, shouldn't affect compiled code
	responsiveW1 = 1320px
	responsiveW2 = 1175px
	mobileW = 890px

	transBounce1 = .2s cubic-bezier(0,0,0,1.1)

	statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .account-card, .scrollable :not(.focusable) > .account, .timeline-hint"
	media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder"

	:root {
		--tl-width 750px
		--radius 12px
		--radius-round 24px
		--hover-color rgba(170,170,170, 0.07)
		--elevated-color rgba(150,150,200,0.1)
		--border-color rgba(120,120,200, 0.2)
		--border-color-2 rgba(120,120,120, 1)
		--shadow 0 10px 40px -10px rgba(0,0,0,0.15)
		--shadow-low 0 8px 16px -10px rgba(0,0,0,0.4)
		--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
	}
	fa() {
		font: normal normal normal 14px/1 FontAwesome;
	}
	compactStatuses() {
		.scrollable:not(.scrollable--flex) {
			padding 0px !important
			padding-bottom 40vh !important
			&::before {
				content ""
				position absolute
				inset 0
				background-color inherit
				z-index -1
			}
			.account-timeline__header {
				margin 0px !important
			}
		}

		{statuses-list} {
			border-radius 0 !important
		}
		[class*="explore__"] {
			> * {
				border-radius var(--radius) !important
			}
		}
		.detailed-status__wrapper {
			margin 0 !important
		}
		.icon-button {
			// flex-grow 1 !important
			justify-content center
		}
		.status__action-bar {
			margin-bottom 0px
			justify-content space-between
			gap 0
			max-width 350px
		}
		.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer {
			flex-wrap wrap
		}
	}

	.rtl {
		textarea, p {
			text-align right
			direction rtl
		}
	}

	a, button, label {
		user-select none
	}
	.button--block {
		font-weight 700
	}
	.unhandled-link {
		text-decoration underline
		text-underline-offset .2em
	}
	input, .input-copy, select, textarea,
	.compose-form__upload-thumbnail, .button,
	button:not(.column-header__button), video, iframe, .privacy-dropdown__dropdown, .react-toggle-track,
	.reply-indicator, .compose-form__warning {
		border-radius var(--radius) !important
	}
	button, .focusable, a, .media-gallery__item-thumbnail {
		&:focus-visible {
			box-shadow inset 0 0 0 2px #dc7b18
			outline 2px #dc7b18 solid
			outline-offset -2px
		}
	}
	*:not(.radio-button__input):not(input) {
		font-display swap !important
	}
	:not(.radio-button__input):not(input):not(span) {
		border-color var(--border-color) !important
	}
	@media (prefers-reduced-motion: no-preference) {
		.load-more, .setting-toggle, .column-header__back-button, .column-back-button,
		.trends__item, .story, .account__avatar, .button,
		.media-gallery__item, .column-link, select, .status-card, .audio-player, .account {
			transition transform .4s cubic-bezier(0,0,0,3) !important
			&:active, &:focus-visible {
				transform scale(.99)
				transition transform .4s cubic-bezier(0,0,0,1) !important
			}
		}
		.column-header__button, .column-header__buttons > .column-header__back-button,
		.react-toggle-track, .icon-button, .floating-action-button {
			transition transform .4s cubic-bezier(0,0,0,4) !important
			&:active {
				transform scale(.95)
				transition transform .4s cubic-bezier(0,0,0,1) !important
			}
		}
		.status__content__spoiler-link {
			span {
				display inline-block
				transition transform .4s cubic-bezier(0,0,0,4) !important
			}

			&:active span {
				transition transform .4s cubic-bezier(0,0,0,1) !important
				transform translateY(1px)
			}
		}
		
		@keyframes bounceIn {
			0% { transform: scale(1.1); opacity: 0 }
			30% { transform: scale(.99); opacity: 1 }
			60% { transform: scale(1.005); opacity: 1 }
			100% { transform: scale(1); opacity: 1 }
		}

		@keyframes slideUp {
			from { 
				transform translateY(20px) 
			}
		}
		@keyframes slideUpFade {
			from { 
				transform translateY(20px) 
				filter opacity(0)
			}
		}
		@keyframes slideDowFade {
			from {
				transform translateY(-20px)
				filter opacity(0)
			}
		}
		@keyframes slideUpBig {
			from { 
				transform translateY(50vh) 
			}
		}
		@keyframes fadeUp {
			from { 
				transform translateY(10px) 
				opacity 0
			}
		}
		@keyframes scaleIn {
			from {
				transform scale(.98)
				opacity 0
			}
		}
		@keyframes fadeLeft {
			from {
				transform: translateX(20px) opacity(0)
			}
		}
		@keyframes rainbow {
			to {
				filter hue-rotate(360deg)
			}
		}
	}
	.account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img {
		border-radius 30% !important
	}
	.detailed-status__action-bar,
	.column-header__collapsible-inner,
	.audio-player, .search__input {
		border 0 !important
	}



	.dropdown-menu {
		border-radius var(--radius)
	}
	.dropdown-menu__container__list {
		overflow hidden auto
		border-radius var(--radius)
		margin-block -4px
		max-height 70vh
	}
	.dropdown-menu__item {
		overflow hidden
		a {
			padding .7em 1em !important
			transition background-color .2s, color .2s
			min-width 150px
		}
	}
	.dropdown-menu__separator {
		margin 0 !important
	}
	.interaction-modal {
		border-radius var(--radius)
		overflow-y auto
	}
	.interaction-modal__choices {
		gap 10px
		display flex
		flex-wrap wrap
		.interaction-modal__choices__choice {
			max-height 50vh
			overflow-y auto
			// background-color var(--elevated-color)
			border 1px solid var(--border-color)
			flex 1 0 270px 
			border-radius var(--radius)
			transition background .2s
			position relative
		}
	}
	.compare-history-modal {
		margin-block 20px
	}
	.compare-history-modal__container {
		overflow hidden auto
	}

	.columns-area__panels {
		--top 5px
	}
	@media (min-width responsiveW2) {
		.columns-area__panels {
			padding-inline 10px
			padding-top var(--top)
			box-sizing border-box
			transition padding .4s
			--top 20px
		}
		.columns-area__panels__pane {
			height unset !important
			.columns-area__panels__pane__inner {
				height calc(100% + 20px) !important
			}
		}
	}
	@media (min-width responsiveW1) {
		.columns-area__panels {
			--top 30px
		}
	}

	#mastodon {

		// LEFT COLUMN
		.compose-panel {
			margin-top 0
			overflow-y auto
			margin-top calc(0px - var(--top))
			padding-top var(--top)
			padding-bottom 20px
			box-sizing border-box
			// min-height 100vh !important
			max-height unset !important
		}
		.search {
			&, /.search-popout {
				margin-inline 5px
				border-radius var(--radius)
			}
			label {
				// padding-inline 20px
				box-sizing border-box
			}
			input {
				border-radius var(--radius-round) !important
				padding-inline-start 20px !important
				padding-inline-end 40px !important
			}
			.search__icon > i {
				margin-inline 5px
			}
		}
		.compose__action-bar-dropdown {
			.icon-button {
				width auto !important
				height auto !important
				padding 8px
				i {
					// font-size 10px
				}
			}
		}

		.compose-form {
			height 0
			.reply-indicator {
				position relative
				transition min-height .1s
			}
			.reply-indicator__display-name {
				padding 0
			}
			.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { 
				border-radius var(--radius) var(--radius) 0 0 !important
				border-bottom 0
			}
			.compose-form__buttons-wrapper ...