userstyles collection for eldritch.cafe mastodon instance (some of them are experiments)

_Eldritch Café userstyles.md

:blobcat:

These userstyles can be used on any mastodon instance but are configured to works on Eldritch Café. You need to install an usertyle manager on your browser (like https://add0n.com/stylus.html for example).

Userstyles

• Column grow
• Navigation column in first position (don't affect scroll behaviour on navigation, so pretty bad UX with many columns)
• Hide followers count
• Scale emoji on hover

column-grow.user.css

/* ==UserStyle==
@name column-grow
@namespace eldritch.cafe
@version 1.0.0
@license MIT
==/UserStyle== */
@-moz-document domain("eldritch.cafe") {
	.column {
		flex-grow: 1;
	}
}

hide-followers-count.user.css

/* ==UserStyle==
@name hide-followers-count
@namespace eldritch.cafe
@version 1.0.0
@license MIT
==/UserStyle== */
@-moz-document domain("eldritch.cafe") {
	.account__action-bar__tab:nth-child(3) > strong > span,
	.counter:nth-child(3) > a > .counter-number{
		visibility: hidden;

		white-space: nowrap;
	}

	.account__action-bar__tab:nth-child(3) > strong > span::before,
	.counter:nth-child(3) > a > .counter-number::before {
		visibility: visible;

		content: "⛧666⛧";
	}
}

navigation-column-in-first-position.user.css

/* ==UserStyle==
@name navigation-column-in-first-position
@namespace eldritch.cafe
@version 1.0.0
@license MIT
==/UserStyle== */
@-moz-document domain("eldritch.cafe") {
	.columns-area > *:first-child {
		order: 0;
	}

	.columns-area > *:last-child {
		order: 1;
		padding-right: 5px;
	}

	.columns-area > * {
		order: 2;
	}

	.columns-area > *:nth-last-child(2) {
		padding-right: 10px;
	}
}

scale-emoji-on-hover.user.css

/* ==UserStyle==
@name scale-emoji-on-hover
@namespace eldritch.cafe
@version 1.0.0
@license MIT
==/UserStyle== */
@-moz-document domain("eldritch.cafe") {
	.status img.emojione,
	.detailed-status img.emojione,
	.notification img.emojione {
		transition: 0.1s;
	}

	.status img.emojione:hover,
	.detailed-status img.emojione:hover,
	.notification img.emojione:hover {
		transform: scale(4);
		position: absolute;
		z-index: 666;
	}
}