mastodon userstyle

instructions

• use a browser plugin such as stylus
• open your mastodon web interface and create a new userstyle
• paste the code below, replacing "mastodon.ie" with the correct address for your instance

userstyle

@-moz-document url-prefix("https://mastodon.ie/deck") {
  .drawer {
    width: 32px;
    transition-property: width;
    transition-duration: 250ms;
    transition-delay: 0ms;
  }

  .drawer:hover,
  .drawer:has(*:focus),
  .drawer:has(textarea:not(:placeholder-shown)),
  .drawer:has(.search__input:not(:placeholder-shown)) {
    width: 350px;
  }


  .drawer > * {
    min-width: 320px;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-delay: 100ms;
    opacity: 0;
  }

  .drawer:hover > *,
  .drawer:has(*:focus) > *,
  .drawer:has(textarea:not(:placeholder-shown)) > *,
  .drawer:has(.search__input:not(:placeholder-shown)) > * {
    opacity: 1;
  }
}