Muffcast-Client/popup/popup.css

@font-face {
  font-family: 'FontAwesome';
  src: url('" + browser.extension.getURL("fonts/fontawesome.eot") + "?v=4.7.0');
  src: url('" + browser.extension.getURL("fonts/fontawesome.eot") + "?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome.svg?v=4.7.0#fontawesomeregular') format('svg');
  font - weight: normal;
  font - style: normal;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'OpenSans', 'Roboto', 'sans-serif', 'sans';
  max-width: 400px;
  padding: 0;
  margin: 0;
}

.visible {
  display: inline-block !important;
}

.text-center {
  text-align: center;
}

a {
  text-decoration: none;
  color: #d13d29;
}

a:hover {
  color: #9e2e1f;
}

#muffcast {
  width: 400px;
  background-color: #fefefe;
  color: #444;
  display: none;
}

#idle, #error {
  width: 100%;
  display: none;
  color: #d13d29;
  padding: 15px;
}

#title {
  display: block;
  color: #333;
}

#title:hover {}

#host {
  display: block;
  font-size: 0.9em;
  color: #888;
}

.icon {
  color: #468ac3;
}

.info {
  display: block;
  padding: 15px;
}

.audio {
  display: -moz-flex;
  display: flex;
}

#mute {
  cursor: pointer;
}

#volume {
  flex-grow: 1;
  height: 20px;
}

#volume::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: #468ac3;
  border-radius: 2px;
  cursor: pointer;
}

#volume::-moz-range-thumb {
  box-shadow: 0px 0px 0px #d13d29;
  border: 0px solid #d13d29;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #d13d29;
  cursor: pointer;
}

#volume::-moz-range-thumb:hover {
  color: #9e2e1f;
  height: 16px;
  width: 16px;
}

.bottom-menu {
  display: block;
  background-color: #efefef;
  padding: 15px;
}

#play {
  float: left;
  cursor: pointer;
}

#stop {
  float: right;
  cursor: pointer;
}