Spacious Mastodon by riedler

Imported and mirrored from https://github.com/RiedleroD/userstyles-riedler/raw/spacious-mastodon/spacious_mastodon.user.css

Spacious Mastodon screenshot
Install Get Stylus Write a review

Details

Authorriedler

LicenseNo License

Created

Updated

Categorymastodon

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Description

Helps you see more and restores some of the old styling

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name           Spacious Mastodon
@namespace      github.com/RiedleroD/userstyles-riedler
@version        1.1.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
==/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;

//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;
	}
}

@-moz-document domain("mas.to"), domain("mastodon.social"), domain("mastodon.coffee"), domain("mstdn.social"), domain("mastodon.art"), domain("mastodon.online"), domain("mastodon.lol") {
	/* makes the columns expand to the full width of the screen */
	.drawer,
	.column{
		flex:if((@expandcols=1),auto,auto 0 0);
	}
	/* 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;
			&:not(.verified){
				border:inherit;
				border-color:@default-brd3;
			}
		}
		dt{
			background-color:@default-bg1;
			color:@default-tx1;
			text-transform: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;
	}
	//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 .fa{
		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;
		}
	}
	//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{
		border-left-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%);
		}
	}
	//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;
		}
	}
	//selected filter (e.g. in ./relationships)
	.filters .filter-subset a.selected{
		color:@accent;
		border-bottom-color:@accent;
	}
	//unread marker
	.conversation__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;
	}
	/* 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;
	}
	/* 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;
		}
	}
	/* column spacing */
	.columns-area when(@colspace_=1){
		grid-gap:@colspace;
		margin:@colspace;
		.column,
		.drawer{
			&,&:first-child,&:last-child{
				padding:0;
			}
		}
	}
	.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;
		gap:0;
		line-height:normal;
		&+.status{
			padding-top:0;
			.status__avatar{
				top:0;
			}
		}
		
	}
	.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__avatar{
				top:0;
			}
		}
	}
	.status__prepend-icon-wrapper,
	.notification__favourite-icon-wrapper{
		width:4.5rem;
		box-sizing:border-box;
		display:flex;
		padding-right:0.5rem;
		justify-content:end;
		align-items:center;
		& .fa{
			display:content;
		}
	}
	.status when(@compost=1){
		padding-left:4.5rem;
		position:relative;
		.status__avatar{
			width:3rem;
			height:3rem;
			position:absolute;
			left:1rem;
			top:1rem;
			.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{
			height:auto;
			line-height:normal;
		}
		.status__action-bar{
			justify-content:flex-start;
			margin-top:0.75em;
		}
		.status__info{
			margin-bottom:0;
			.status__display-name{
				line-height:normal;
			}
		}
		.display-name:not(.detailed-status__display-name){
			display:flex;
			bdi{
				padding-right:0.25em;
			}
		}
	}
	/* 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;
	}
}

Reviews

No reviews yet.