Creates a floating pill of the Sandbox name or else the environment. To be used with Stylish

sandbox-pill.css

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("salesforce.com") {
  
  /* 
   * this is where SFDC keeps the "Sandbox: xxx" message.
   * the .messages element is empty if it's not a sandbox
   */ 
  #phHeader .messages .pageMsg.textOnly.normalImportance, 
  #phHeader .messages:empty::after {
    background: #faebd7 none repeat scroll 0 0;
    border: 2px outset #000000;
    border-radius: 4em;
    color: blueviolet;
    display: inline-block;
    font-size: large;
    font-weight: normal;
    opacity: 0.2;
    padding: 4px 6px;
    position: fixed;
    right: 5em;
    top: 3em;
    z-index: 10000;
    transition: opacity ease 1s;
  }
  
  #phHeader .messages .pageMsg.textOnly.normalImportance:hover, 
  #phHeader .messages:empty:hover::after {
    opacity: 1;
  }
  
  #phHeader .messages:empty::after {
    content: "Live";
    font-variant: small-caps;
    color: magenta;
  }
  
}

@-moz-document domain("{production url}") {
  #phHeader .messages:empty::after {
    content: "Production: {production url}";
  }

}

For example: