Adding recognizable look for private and public messages in mastodon timeline

mastodon_private_styling.css

/* 
  You can list more than one comma separated domain selector here
  `url` or even use `regexp` arve valid selectors as well

  I've used https://github.com/openstyles/stylus to apply styles on Firefox
  If you are using chrome, or if you want to inject styles soehow differently - 
  use just the class selectors (.status__wrapper-direct and .status__wrapper-public)
*/
@-moz-document domain("mastodon.radio") {
    .status__wrapper-direct::before {
        /* 
          Fallback for browsers not understanding slash notation for alt-text
          e.g. Firfox
          specs: https://drafts.csswg.org/css-content/#alt
        */
        content: "✉"; 
        content: "✉" / "Private message";
        position: absolute;
        bottom: 20px;
        right: 10px;
        font-size: 31px;
        color: #404e59;
    }
    .status__wrapper-public::before {
        /* 
          This symbol looked like a globe to me, so I've used it here 
          Modern globe emoji is drwaen differently than a font, so you cannot colorize it
          The idea was not to use any external resources, so SVG was not an option too
        */
        content: "◍"; 
        content: "◍" / "Public message"; 
        position: absolute;
        bottom: 20px;
        right: 10px;
        font-size: 31px;
        color: #404e59;
    }
}