🐘💨 by dieseltravis

/* ==UserStyle==
@name         🐘💨
@version      20241008.04.17
@namespace    userstyles.world/user/dieseltravis
@description  Replace "Publish" buttons with "🐘💨" on some mastodon servers (add your domain for support)
@author       dieseltravis
@license      No License
==/UserStyle== */

@-moz-document domain("social.lol"), domain("mastodon.social"), domain("jorts.horse"), domain("allpro.social"), domain("hachyderm.io"), domain("yellowmustard.club"), domain("vulpine.club"), domain("xoxo.zone"), domain("clownpenis.fart"), domain("front-end.social"), domain("toot.cafe"), domain("macaw.social"), domain("glitterkitten.co.uk"), domain("brands.town"), domain("mastodon.art"), domain("tilde.zone"), domain("burts.bees") {
/*
https://userstyles.world/style/7330/default-slug
https://gist.github.com/dieseltravis/77c99bef0312486639d5aad46139eb22
*/

a.button[href='/publish'],
.compose-form__publish-button-wrapper button.button.button--block,
.compose-form__actions .compose-form__submit button{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	font-size: 0;
}

a.button[href='/publish']::after,
.compose-form__publish-button-wrapper button::after,
.compose-form__actions .compose-form__submit button::after {
	content: '🐘💨';
	font-size: 1.333rem;
}

/* add a lil tootin animation when hover/active/focus */
a.button[href='/publish']:hover::after,
a.button[href='/publish']:active::after,
a.button[href='/publish']:focus::after,
.compose-form__publish-button-wrapper button:hover::after,
.compose-form__publish-button-wrapper button:active::after,
.compose-form__publish-button-wrapper button:focus::after,
.compose-form__actions .compose-form__submit button:hover::after,
.compose-form__actions .compose-form__submit button:active::after,
.compose-form__actions .compose-form__submit button:focus::after {
	animation: 444ms infinite alternate tootin ease-out;
}

@keyframes tootin {
	to {
		letter-spacing: 0.25rem;
		/*font-stretch: 125%;*/
		transform: translateX(0.125rem);
	}
}
}