Firefox CSS to style Speed Dials; Developer Edition. Use with Stylish or userChrome.css

speed-dial_dev.css

/*
speed-dial_dev.css
use with Speed Dial plugin: https://addons.mozilla.org/en-US/firefox/addon/speed-dial
modified from: https://userstyles.org/users/254374
*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://speeddial/content/speeddial.xul"){

.sd-tab {
 background: none;
border: 1px solid #fff !important;
border-radius: 15px !important;
color: #fff;
font-weight: normal !important;
height: 30px !important;
padding-left: 12px !important;
padding-right: 12px !important;
padding-top: 3px !important;
margin: 10px !important;
padding-bottom: 3px !important;
text-align: center !important;
transition: all 0.5s;
}
.sd-tab:not([selected="true"]) {
opacity: 0.5;
}
.sd-tab[selected="true"] {
  
border: 1px solid #fff !important;
  }

color: #333333 !important;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.sd-tabs {
background: transparent !important;
padding: 20px !important;
margin-bottom: -90px !important;
z-index: 1000 !important;
opacity: 1 !important;
position: absolute !important;
}
.sd-tabs-left,
.sd-tabs-right {
border: 0px !important;
}
.sd-tabpanel {
background: #1c2126 !important;
padding: 100px !important;
}
.thumbnail{
opacity: 1 !important;
margin: 2px !important;
}
.speeddial-container[assigned="f"] {
opacity: 0.05 !important;
/*display: none !important;*/
}
.speeddial-container[assigned="f"]:hover {
opacity: 1 !important;
}
.speeddial-container {
border: none !important;
border-radius: 6px !important;
transition: all 0.5s;
  opacity: 0.1;
  filter: grayscale(100%);
}

.speeddial-container:hover {
  filter: grayscale(0);
  opacity: 1;
}

.thumbnail-title,
.speeddial-top-middle,
.speeddial-bottom-middle,
.speeddial-top-middle,
.speeddial-middle-left,
.speeddial-middle-right,
.speeddial-bottom-middle,
.speeddial-top-left,
.speeddial-top-right,
.speeddial-bottom-left,
.speeddial-bottom-right{
display: none;
}
}