spacious_glitchsoc.user.css

/* ==UserStyle==
@name           Spacious Mastodon
@namespace      github.com/RiedleroD/userstyles-riedler
@version        1.2.1
@description    Helps you see more
@author         Riedler
@preprocessor   less
@var	checkbox	expandcols  "Expand Columns in Home"	1
@var	checkbox	fieldresize	"Auto-resize Bio Fields"	1
@var	color		accent		"Accent Color"				#6364ff
@var	select		logobranch	"Logo replacements"			{
	"Default":`"main"`,
	"Old":`"0d1215e82f42cd5a7b7bb992e4423d69acb813ed"`
}
@var	number		colspace	"Column Spacing"			[10,1,null,1,'px']
@var	checkbox	colspace_	"Column Spacing?"			1
on/off switch instead of 0 width because stylus likes to replace 0 with the default for some reason >:(
@var	checkbox	compost		"Compact Post?"				1
@var	checkbox	sibar		"Move post buttons to left when appropriate?" 1
==/UserStyle== */

//URL root for images from official github repo
@imgurlroot: "https://raw.githubusercontent.com/mastodon/mastodon/@{logobranch}/app/javascript/images/";

@accent-txt: lighten(@accent,5%);
@accent-h:   lighten(@accent,15%);
@accent-htxt:lighten(@accent,20%);

//default colors by mastodon
@default-bg0:#191b22;
@default-bg1:#1f232b;
@default-bg2:#282c37;
@default-bg3:#313543;
@default-brd2:#393f4f;
@default-brd3:#42485a;
@default-tx1:#d9e1e8;
@default-tx2:#FFF;

//optimized SVG
@retoot_svg: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path fill='%S' d='M5.5 3.35a.48.48 0 00-.75-.01L.8 8.24a.48.48 0 00.4.8H3.6v5.58a.72.72 0 00.72.72h10.6l-2.35-2.9H7.27a.72.72 0 01-.72-.72v-2.7h2.5a.48.48 0 00.4-.77zM7.1 3.6l2.32 2.9h5.28a.72.72 0 01.72.72v2.7h-2.5a.48.48 0 00-.3.8l3.92 4.9a.48.48 0 00.78 0l3.94-4.9a.48.48 0 00-.37-.8H18.4v-5.6a.72.72 0 00-.72-.72z'/><path fill='%S' d='M8.16 19.77a.5.5 0 00-.82.39v2.46h-3a.7.7 0 00-.7.7v10.31a.7.7 0 00.7.7H8.5l-1.3-1.06a.5.5 0 010-.75l1.33-1.1h-1.25a.72.7 0 01-.72-.7v-4.48a.72.72 0 01.72-.72h.06v2.5a.5.5 0 00.82.38l4.9-3.93a.5.5 0 000-.78zm5.31 2.84 1.3 1.07a.5.5 0 010 .73l-1.33 1.1h1.28a.72.72 0 01.72.72v4.47a.72.72 0 01-.72.72h-.1v-2.47a.5.5 0 00-.8-.37l-4.9 3.93a.5.5 0 000 .78l4.9 3.92a.5.5 0 00.8-.38v-2.5h3.03a.72.72 0 00.72-.72V23.3a.72.72 0 00-.72-.72zM10.69 38.77a.5.5 0 00-.78.39v2.47h-5.54a.72.72 0 00-.72.72v10.3a.72.72 0 00.72.72h1.62l-1.34-1.1a.5.5 0 010-.75l1.96-1.6a.5.5 0 01-.04-.2v-4.48a.72.72 0 01.72-.72H9.9v2.5a.5.5 0 00.8.38l4.93-3.93a.5.5 0 000-.78zm5.28 2.82 1.34 1.1a.5.5 0 01.04.73l-1.96 1.6a.5.5 0 01.06.22v4.47a.72.72 0 01-.72.72h-2.66v-2.47a.48.48 0 00-.78-.37l-4.94 3.93a.48.48 0 000 .78l4.94 3.92a.48.48 0 00.78-.38v-2.5H17.66a.72.72 0 00.72-.72v-10.31a.72.72 0 00-.72-.72zM13.44 57.77a.48.48 0 00-.78.39v2.47H4.35a.72.72 0 00-.72.72v7.76l2.93-2.37v-2.5a.72.72 0 01.72-.72h5.38v2.5a.48.48 0 00.78.38l4.94-3.93a.48.48 0 000-.78zm4.92 6.04-2.92 2.4v2.52a.72.72 0 01-.72.72h-5.4v-2.47a.48.48 0 00-.8-.37L3.6 70.52a.48.48 0 000 .78l4.93 3.92a.48.48 0 00.78-.38v-2.5h8.35a.72.72 0 00.72-.72zM19.79 79.24a.48.48 0 00-.82-.27l-.9.9a.72.72 0 00-.55-.25h-13.17a.72.72 0 00-.72.72v3.6l2.93.3v-1a.72.72 0 01.72-.72h7.44a.72.72 0 01.5.2l-1.8 1.8a.48.48 0 00.27.8l6.27.7a.48.48 0 00.53-.53zM2.25 84.91a.48.48 0 00-.53.53l.7 6.25a.48.48 0 00.83.27l.8-.8a.72.72 0 00.48.17h13.11a.72.72 0 00.72-.72v-3.65l-2.93-.3v1.05a.72.72 0 01-.72.72H7.26a.72.72 0 01-.38-.1L8.8 86.4a.48.48 0 00-.27-.84zM4.3 98.6a.72.72 0 00-.72.72v1.58l1.14-1.37a.48.48 0 01.78 0l1.62 2.025a.72.72 0 01.16-.025H14.72a.72.72 0 01.65.5h-2.43a.4.46 0 00-.3.78l3.92 4.95a.48.48 0 00.78 0l3.94-4.94a.48.48 0 00-.37-.77H18.4v-2.73a.72.72 0 00-.72-.72zm1.2 2.66a.48.48 0 00-.75 0l-3.94 4.9a.48.48 0 00.4.78H3.6v2.68a.72.72 0 00.72.72h13.36a.72.72 0 00.72-.72v-1.53l-1.1 1.34a.48.48 0 01-.76 0l-1.62-2.03a.72.72 0 01-.2.04H7.28a.72.72 0 01-.66-.5h2.44a.48.48 0 00.4-.78zM4.3 117.6a.72.72 0 00-.72.72v.84l1.14-1.38a.48.4 0 01.78 0l2.22 2.75h7a.72.72 0 01.72.72v.53h-2.6a.48.48 0 00-.2.78l3.92 4.9A.48.48 0 0017.34 127.46l3.94-4.9a.48.48 0 00-.37-.78H18.4v-3.46a.72.72 0 00-.72-.72zm1.2 1.9a.48.48 0 00-.75 0l-3.95 4.94a.48.48 0 00.4.78H3.6v3.4a.72.72 0 00.72.72h13.36a.72.72 0 00.72-.72v-.81l-1.06 1.33a.48.48 0 01-.78 0l-2.17-2.71H7.28a.72.72 0 01-.72-.72v-.5h2.5a.48.48 0 00.4-.78zM5.94 136.6l2.37 2.93h6.42a.72.72 0 01.72.72v1.25h-2.6a.48.48 0 00-.2.78l3.92 4.9a.48.48 0 00.78 0l3.94-4.9a.48.48 0 00-.37-.78H18.4v-4.18a.72.7 0 00-.72-.72zm-1.72.06a.72.72 0 00-.6.75zm1.28 1.11a.48.48 0 00-.74 0l-3.95 4.9a.48.48 0 00.4.82H3.6v4.12a.72.72 0 00.72.72H16.1l-2.37-2.9H7.28a.72.72 0 01-.72-.72v-1.22h2.5a.48.48 0 00.4-.8zm12.28 10.55a.72.72 0 00.56-.7zm-11.25 7.31 2.38 2.9h5.82a.72.72 0 01.72.72V161.22H12.9a.48.48 0 00-.28.78l3.94 4.9a.48.48 0 00.78 0l3.94-4.9a.48.48 0 00-.37-.78H18.4v-4.91a.72.72 0 00-.72-.72zm-1.03.44a.48.48 0 00-.75-.01l-3.94 4.9a.48.48 0 00.4.8H3.6v4.86a.72.72 0 00.72.72H15.5l-2.36-2.9H7.28a.72.72 0 01-.72-.72v-1.97h2.5a.48.48 0 00.4-.78zM5.48 174.7a.48.48 0 00-.73 0l-3.95 4.9a.48.48 0 00.4.8H3.6v5.22a.72.72 0 00.72.72H15.2l-2.35-2.9h-5.6a.72.72 0 01-.7-.72v-2.3h2.5a.48.48 0 00.4-.83zm1.35-.07 2.35 2.9h5.52a.72.72 0 01.72.72v2.34h-2.6a.48.48 0 00-.2.78l3.92 4.9a.48.48 0 00.78 0l3.94-4.9a.48.48 0 00-.37-.78H18.4v-5.24a.72.72 0 00-.72-.72zM5.49 193.34a.48.48 0 00-.74 0l-3.94 4.9a.48.48 0 00.4.8H3.6v5.58a.72.72 0 00.72.72h10.6l-2.35-2.9h-5.3a.72.72 0 01-.72-.72v-2.7h2.5a.48.48 0 00.4-.77zM7.1 193.62l2.32 2.9h5.28a.72.72 0 01.72.72v2.7h-2.5a.48.48 0 00-.3.8l3.92 4.9a.48.48 0 00.78 0l3.94-4.9a.48.48 0 00-.37-.8H18.4v-5.6a.72.72 0 00-.72-.72z'/></svg>";
@retoot_img: %(@retoot_svg,#606984,@accent);
@retoot_img_h: %(@retoot_svg,#707B97,@accent);

//helper functions
.logoreplace(@name,@size,@position){
	background-image:url("@{imgurlroot}@{name}.svg");
	background-size:@size;
	background-repeat:no-repeat;
	background-position:@position;
	display:inline-block;
	position:relative;
	width:100%;
	&::after{
		content:"";
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color:@accent;
		mask-image:url("@{imgurlroot}@{name}.svg");
		mask-size:@size;
		mask-position:@position;
		mask-repeat:no-repeat;
		mix-blend-mode:color;
	}
}

// targeted domains
@-moz-document { #mastodon {
	/* makes the columns expand to the full width of the screen */
	.drawer,
	.column{
		--compat-flex:if((@expandcols=1),auto,auto 0 0);
		flex:var(--compat-flex);
	}
	/* no border radius for columns >:( */
	.column-header{
		border-radius:0;
	}
	/* converts the bio fields to a grid layout with automatically resizing columns */
	.account__header__bio .account__header__fields when(@fieldresize=1){
		display:grid;
		grid-template-columns:auto auto;
		border-radius:0;
		background-color:#0000;
		border:solid 1px @default-brd3;
		border-left:none;
		border-right:none;
		margin-left:-20px;
		margin-right:-20px;
		dl{display:contents}
		dt,
		dd{
			width:auto;
			text-align:center;
			padding:1em;
			border:none;
			border-top:solid 1px;
			border-top-color:inherit;
		}
		dl:not(.verified){
			dt,dd{
				border-color:@default-brd3;
			}
			dt{
				background-color:@default-bg1;
				color:@default-tx1;
				text-transform:none;
			}
		}
		dl.verified{
			dt,dd{
				background-color:inherit;
				border:solid 1px;
				border-color:inherit;
			}
			dt{
				border-right:none;
			}
			&+dl dt,
			&+dl dd{
				border-top:none;
			}
		}
		dl:first-child{
			dt,dd{
				border-top:none;
			}
		}
	}
	/* accent colors! */
	//buttons
	.button:not(.button-secondary){
		background-color:@accent;
		&:is(:active,:focus,:hover){
			background-color:@accent-h;
		}
	}
	.button.button-tertiary{
		border-color:@accent;
		color:@accent;
		background-color:#0000;
	}
	//transparent buttons
	.block-modal__cancel-button, .confirmation-modal__cancel-button,
	.confirmation-modal__secondary-button,
	.mute-modal__cancel-button{
		background-color:#0000 !important;
	}
	//focused text inputs in poll creation
	.poll__option input[type="text"]:focus{
		border-color:@accent;
	}
	//some active icon buttons made via fontawesome
	.icon-button.active{
		color:@accent-txt;
		&.inverted{
			color:@accent-txt;
		}
	}
	//some icon buttons made via fontawesome
	.text-icon-button.active{
		color:@accent-txt;
	}
	//badges with icons in em
	.icon-with-badge__badge{
		background-color:@accent;
	}
	//another type of link
	.link-button,
	//link to show a filtered post
	.status__wrapper--filtered__button,
	//link in about section I think?
	.prose a,
	//'read more' button
	.status__content__read-more-button,
	//links in user text
	:is(.reply-indicator__content,.status__content) a.unhandled-link,
	//links in certain columns
	.empty-column-indicator a,
	.error-column a,
	.follow_requests-unlocked_explanation a,
	.column-link--transparent.active,
	//'hints'
	.simple_form .hint a,
	.admin-wrapper .content .muted-hint a,
	body .muted-hint a,
	.timeline-hint a,//someone should tell them that they can just color all links via a:link
	//links in widgets
	.notice-widget a,
	.placeholder-widget a{
		color:@accent-txt;
		&:is(:active,:focus,:hover){
			color:@accent-htxt;
		}
	}
	//icon that represents the reason the message is in your notifications
	.notification__message .icon{
		color:@accent;
	}
	//(in mobile view) the selected column tab
	.tabs-bar__link.active{
		border-bottom-color:@accent;
		color:@accent;
	}
	//trend graphs
	.trends__item__sparkline path{
		&:first-child{
			fill:rgba(@accent,.25) !important;
		}
		&:last-child{
			stroke:@accent !important;
		}
	}
	//the icon for the selected category in the emoji popup
	.emoji-mart-anchor-selected{
		&,&:hover{
			color:@accent;
		}
	}
	//the bar below the selected category in the emoji popup
	.emoji-mart-anchor-bar{
		background-color:@accent;
	}
	//post privacy dropdown button
	.privacy-dropdown.active .privacy-dropdown__value.active{
		background-color:@accent;
	}
	//selected/hovered/focused item in generic dropdowns
	.dropdown-menu__item :is(a,button):is(:active,:focus,:hover){
		background-color:@accent;
	}
	//selected post privacy in privacy dropdown
	.privacy-dropdown__option:is(.active,:hover){
		background-color:@accent;
		&.active:hover{
			background-color:@accent-h;
		}
	}
	//selected language in language dropdowns
	.language-dropdown__dropdown__results__item.active{
		background-color:@accent;
		&:hover{
			background-color:@accent-h;
		}
	}
	//back button in headers of columns
	.column-header__back-button,
	.column-back-button,
	.column-header > .column-header__back-button{
		border-radius:0;//no rounded borders, nono
		color:@accent-txt;
		&:hover{
			color:@accent-htxt;
		}
	}
	//loading bar at the top of the screen
	.loading-bar{
		background-color:@accent;
	}
	//links in bio
	.account__header__bio .account__header__fields a,
	.public-layout .public-account-bio .account__header__fields a{
		color:@accent-txt;
	}
	//selected tab in public profile
	.public-layout .public-account-header__tabs__tabs .counter.active::after{
		border-bottom-color:@accent;
	}
	//toggles
	.react-toggle--checked{
		& .react-toggle-track{
			background-color:@accent;
			&:hover{
				background-color:@accent-h;
			}
		}
		&:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track{
			background-color:@accent-h;
		}
		& .react-toggle-thumb{
			border-color:@accent;
		}
	}
	.pillbar-button:not([disabled]).active{
		background-color:@accent;
		&:hover,
		&:focus{
			background-color:@accent-h;
		}
	}
	//report popup
	.report-dialog-modal .status__content a{
		color:@accent;
	}
	//bar on the left side of unread messages
	.notification.unread::before,
	.status__wrapper.unread::before,
	.status.unread::before{
		border-left-color:@accent;
		border-inline-color:@accent;
	}
	//bar in notifications where you choose between all/mentions
	.notification__filter-bar>.active::before{
		background-color:@accent;
	}
	//active column header icon
	.column-header.active .column-header__icon{
		color:@accent;
		text-shadow:0 0 10px rgba(@accent,.4);
	}
	//active column header
	.column-header__wrapper.active{
		box-shadow:0 1px 0 rgba(@accent,.3);
		&::before{
			background-image:radial-gradient(ellipse,rgba(@accent,.23) 0,rgba(@accent,0) 60%);
		}
	}
	//focused column header button
	.column-header__button:focus{
		text-shadow:0 0 4px @accent;
	}
	//selected item in settings navigation sidebar
	.admin-wrapper .sidebar ul .simple-navigation-active-leaf a{
		background-color:@accent;
		&:hover{
			background-color:@accent-h;
		}
	}
	//text inputs
	.simple_form{
		& input[type="email"],
		& input[type="number"],
		& input[type="password"],
		& input[type="text"],
		& input[type="url"],
		& textarea{
			&:active,
			&:focus{
				border-color:@accent;
			}
		}
	}
	//buttons
	.simple_form :is(.block-button,.button,button){
		background-color:@accent;
		&:hover,
		&:active,
		&:focus{
			background-color:@accent-h;
		}
	}
	//checkbox to mark media as sensitive
	.compose-form__sensitive-button .checkbox{
		border-color:@accent-txt;
		&.active{
			border-color:@accent-h;
			background-color:@accent-h;
		}
	}
	//selected filter (e.g. in ./relationships)
	.filters .filter-subset a.selected{
		color:@accent;
		border-bottom-color:@accent;
	}
	//unread marker
	.conversation__unread{
		background-color:@accent;
	}
	//unread announcement marker
	.announcements__item__unread{
		background-color:@accent;
	}
	//retoot button
	button.icon-button i.fa-retweet{
		background-image:url(@retoot_img);
	}
	button.icon-button i.fa-retweet:hover,
	button.icon-button:hover i.fa-retweet{
		background-image:url(@retoot_img_h);
	}
	/* fixes for search bar */
	.drawer__header,
	.search{
		margin-bottom:if(@colspace_=1,@colspace,0px);
	}
	.search__input{
		border-radius:0;
	}
	/* more predictable post layouting */
	.status{
		padding:0.75em 1em
	}
	/* about section */
	.about__section__title{
		color:@accent-txt;
	}
	.rules-list li::before{
		background-color:@accent;
	}
	/* text input used in several places, not just settings */
	.setting-text:is(:active,:focus){
		border-bottom-color:@accent;
	}
	/* column spacing */
	.columns-area when(@colspace_=1){
		grid-gap:@colspace;
		margin:@colspace;
		--compat-colspace:@colspace;
		.column,
		.drawer{
			&,&:first-child,&:last-child{
				padding:0;
				--compat-padding-top:0;
				padding-top:var(--compat-padding-top);
			}
			&:last-child{
				--compat-margin:@colspace !important;
			}
		}
	}
	.columns-area__panels{
		.columns-area when(@colspace_=1){
			margin:0;
			margin-top:@colspace;
		}
	}
	/* compact posts */
	.status__prepend when(@compost=1){
		padding-top:0.75em;
		padding-bottom:0.5em;
		padding-left:0;
		padding-right:1em;
		gap:0;
		line-height:normal;
		&+.status{
			padding-top:0;
		}
	}
	:not(.flavour-glitch)>&	.notification__message when(@compost=1){
		padding-left:0;
		padding-top:0.75em;
		padding-bottom:0.5em;
		gap:0;
		line-height:normal;
		&+div .status,
		&+.account{
			padding-top:0;
		}
	}
	.status__prepend-icon-wrapper,
	:not(.flavour-glitch)>.notification__favourite-icon-wrapper{
		& when(@compost=1){
			width:4.5rem;
			padding-right:0.5rem;
		}
		box-sizing:border-box;
		display:flex;
		justify-content:end;
		align-self:center;
		& .fa{
			display:content;
		}
	}
	.status when(@compost=1){
		display:grid;
		grid-template-areas:
			"sb name t"
			"sb c c"
			"sb m m"
			"sb m m"
			"sb bb bb";
		grid-template-columns:calc(4.5rem - 16px) 1fr min-content;
		grid-template-rows:auto auto 1fr auto auto;
		position:relative;
		.status__avatar{
			width:3rem;
			height:3rem;
			grid-area:sb;
			.account__avatar,
			.account__avatar-overlay{
				width:inherit !important;
				height:inherit !important;
			}
			.account__avatar-overlay-base{
				width:2.25em;
				height:2.25em;
			}
			.account__avatar-overlay-overlay{
				width:1.75em;
				height:1.75em;
			}
		}
		.status__relative-time{
			grid-area:t;
			display:flex;
			height:auto;
			line-height:normal;
			justify-content:end;
			time{
				white-space:nowrap;
			}
			.status__prepend+&,
			.notification &{
				margin-top:-1.5em;
				width:0;
				justify-self:end;
			}
		}
		.status__action-bar{
			grid-area:bb;
			justify-content:start;
			margin-top:0.75em;
			margin-inline-start:0;
			gap:1em;
			.disabled{
				display:none;
			}
			.status__action-bar-button{
				margin-inline-end: 0;
			}
		}
		.status__info{
			display:contents;
			.status__display-name{
				display:contents;
				line-height:normal;
				.display-name{
					grid-area:name;
					& .display-name__account{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
		.display-name:not(.detailed-status__display-name){
			display:flex;
			bdi{
				padding-right:0.25em;
			}
		}
		.media-gallery,
		.video-player{
			grid-area:m;
			align-self:end;
			&~.status__action-bar{
				&:extend(.status .sm__force_sidebar all);
			}
		}
		.attachment-list.compact,
		.audio-player{
			grid-area:m;
		}
		.status__content{
			grid-area:c;
		}
		.sm__force_sidebar when(@sibar=1){
			grid-area:sb;
			height:100%;
			max-height:calc(19em + 3rem);
			justify-self:start;
			align-self:safe end;
			padding-top:calc(3rem + 0.5em);
			margin-top:0;
			margin-left:0.5em;
			margin-bottom:-0.5em;
			box-sizing:border-box;
			gap:0.5em;
			flex-direction:column;
			align-items:start;
			justify-content:space-around;
			.icon-button--with-counter{
				padding-left:0;
			}
		}
	}
	/* video player */
	.video-player__volume__handle{
		background-color:@accent;
	}
	.video-player__volume__current{
		background-color:@accent;
	}
	.video-player__seek__handle{
		background-color:@accent;
	}
	.video-player__seek__progress{
		background-color:@accent;
	}
	/*polls*/
	.poll__chart.leading{
		background-color:@accent;
	}
	.muted .poll__chart.leading{
		background-color:rgba(@accent,0.2);
	}
	/*selected radio button*/
	.radio-button__input.checked{
		background-color:@accent;
		border-color:@accent;
	}
	/*status cards*/
	a.status-card{
		//blame gargron for this godawful mess
		.status-card{
			&__host,&__author{
				color:inherit;
			}
			&__description,&__title{
				color:@default-tx1;
			}
		}
		&:active,&:focus,&:hover{
			.status-card{
				&__host,&__author{
					color:@default-tx1;
				}
				&__description,&__title{
					color:@default-tx2;
				}
			}
		}
	}
/*glitch-soc compat styling*/
.flavour-glitch &{
	.status{
		.status__prepend{
			display:flex;
			margin-inline-start:0;
			.status__prepend-icon-wrapper{
				inset-inline-start: 0;
				position:static;
				margin:0 0.5em;
			}
		}
		&.collapsed{
			.status__action-bar,
			.reactions-bar{
				display:none;
			}
		}
	}
	.status when(@compost=1){
		grid-template-areas:
			"ic pp   pp"
			"sb name t "
			"sb c    c "
			"sb m    m "
			"sb m    m "
			"sb rb   rb"
			"sb bb   bb";
		.status__prepend,
		.notification__message{
			display:contents;
			>.status__prepend-icon-wrapper,
			>.notification__favourite-icon-wrapper{
				grid-area:ic;
				margin:0;
				width:100%;
				margin-bottom:inherit;
			}
			>span{
				grid-area:pp;
				margin-bottom:inherit;
			}
			~.status__info>.status__info__icons{
				position:absolute;
				right:1em;
				top:0.75em;
				height:1em;
				grid-area:none;
			}
		}
		.status__info__account,
		.status__info>span{
			display:contents;
		}
		.media-gallery.full-width{
			margin-left:0;
			margin-right:0;
		}
		.status__info__icons{
			grid-area:t;
		}
		.status__content{
			margin:0;
		}
		.status__relative-time{
			grid-area:none;
		}
		.reactions-bar{
			grid-area:rb;
			margin-top:0.5em;
		}
		&.collapsed{
			grid-template-areas:
				"sb tb t"
				"sb c  c";
			.display-name,
			.notification__message>span{
				grid-area:tb;
				align-self:start;
			}
			.notification__favourite-icon-wrapper{
				grid-area:sb;
				align-self:start;
			}
			.status__prepend ~ .status__info > .status__info__icons,
			.notification__message ~ .status__info > .status__info__icons{
				position:static;
				grid-area:t;
			}
			.status__prepend{
				display:none;
			}
		}
	}
	.status when(@sibar=1){
		.sm__force_sidebar,
		.media-gallery ~ .status__action-bar,
		.video-player ~ .status__action-bar{
			max-height:calc(25em + 3rem);
			.status__action-bar-spacer{
				display:none;
			}
			.status__relative-time{
				min-width:1.65em;
				min-height:1.65em;
				display:flex;
				justify-content:center;
				align-items:start;
			}
			.icon-button__counter{
				position:absolute;
				right:0;
				transform:translate(100%,0);
			}
		}
		&.status--in-thread{
			.sm__force_sidebar,
			.media-gallery ~ .status__action-bar,
			.video-player ~ .status__action-bar{
				margin-left:0;
				width:calc(100% - 0.5em);
				align-items:center;
				.status__action-bar-button,
				.status__action-bar-dropdown,
				.status__relative-time{
					filter:
						drop-shadow( 0.1em  0.1em 0.1em #282c37)
						drop-shadow( 0.1em -0.1em 0.1em #282c37)
						drop-shadow(-0.1em  0.1em 0.1em #282c37)
						drop-shadow(-0.1em -0.1em 0.1em #282c37);
				}
			}
		}
	}
	.notification__filter-bar>.active::before{
		background-color:#0000;
	}
	.notification__favourite-icon-wrapper{
		width:fit-content;
	}
}}

/* stuff that isn't in #mastodon, which sucks */

/* Logo replacements */
.admin-wrapper .sidebar{
	.logo--icon{
		visibility:hidden;
	}
	&>a:first-child{
		.logoreplace(logo,80% 80%,center);
	}
}
.navigation-panel__logo .column-link--logo{
	.logoreplace(logo-symbol-wordmark,auto 65%,0.5em 50%);
	height:1.75em;
	svg{
		display:none;
	}
}

}