style.css

/**
 * Button state:
 *    1. normal
 *        In this state, we don't add any class.
 *    2. focused (class name: focused)
 *        The focused state may be triggered by keyboard or touch/mouse.
 *    3. pressed (class name: pressed)
 *        This state is triggered by user pressed confirm button, mousedown,
 *        and touchdown.
 *    4. released (class name: released)
 *        This state is only for changing duration of transition. We enter this
 *        state when user release the button. After transitionend, we goes back
 *        to focused state.
**/
fxos-tv-button {
  font-family: "Fira Sans";
  display: inline-block;
  width: 8rem;
  height: 8rem;
  /* we need to set border to none to remove the button border */
  border: none;
  /* the radius is still make button as round even if we don't have border */
  border-radius: 50%;
  /* 50% is not a real circle because of rounding, we have to use a value larger
     than 50% */
  -moz-outline-radius: 60%;
  outline: transparent 0 solid;
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  background-size: 5.4rem auto;
  background-position: center center;
  font-style: italic;

  transition-property: all;
  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
  transition-duration: 0.42s;
}

fxos-tv-button.focused {
  outline: 0;
  background-color: #ffffff;
  transform: scale(1.2);
  transition-duration: 0.42s;
}

fxos-tv-button.released {
  transition-duration: 0.16s;
}

fxos-tv-button.toggled {
  background-color: #00caf2;
}

fxos-tv-button.pressed {
  background-color: #00caf2;
  transform: scale(0.8);
  transition-duration: 0.06s;
}

fxos-tv-button.disabled {
  background-color: rgba(0, 0, 0, 0.5);
}

fxos-tv-button[data-icon]:before {
  width: 5.4rem;
  left: 1.3rem;
  font-size: 5.4rem;
  line-height: 8rem;
  text-align: center;
  color: #ffffff;
  white-space: normal;
  top: 0;
  position: absolute;
}

fxos-tv-button[data-icon].focused:before {
  color: #2d2d2d;
}

fxos-tv-button[data-icon].toggled:before {
  color: #00caf2;
}

fxos-tv-button[data-icon].pressed:before {
  color: #ffffff;
}

fxos-tv-button[data-icon].disabled:before {
  color: #ffffff;
  opacity: 0.3;
}

/**
 * Simple Text Button
**/
fxos-tv-button[type="simple-text"] {
  color: #dddddd;
  background: none;
  border: none;
  border-radius: 0;

  width: auto;
  height: 8rem;

  line-height: 8rem;
  font-size: 2.4rem;
  -moz-user-select: none;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
}

fxos-tv-button[type="simple-text"].focused {
  color: #ffffff;
  background: none;
}

fxos-tv-button[type="simple-text"].toggled {
  color: #00caf2;
}

fxos-tv-button[type="simple-text"].pressed {
  color: #00caf2;
  background: none;
}

/**
 * End of Simple Text Button
**/



/**
 * underlined text button
 */
fxos-tv-button[type="underlined-text"] {
  position: relative;
  color: white;
  font-size: 2.4rem;
  padding-left: 3.8rem;
  padding-right: 3.8rem;
  border-radius: 4rem;
  width: auto;
  line-height: 8rem;
  margin-right: 1.4rem;
  overflow: hidden;
}

fxos-tv-button[type="underlined-text"]:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  content: ' ';
  border-bottom: 0.6rem #61acd7 solid;
  box-sizing: border-box;
}

fxos-tv-button[type="underlined-text"].focused {
  transform: scale(1.2);
  color: #2d2d2d;
}

fxos-tv-button[type="underlined-text"].pressed {
  transform: scale(1);
  color: white;
  background-color: #00caf2;
}

/**
 * End of underlined text button
 */

/**
 * App Icons
**/
fxos-tv-button[type="app-button"] {
  /* To use 33.4rem instead of to use 33.6rem is to work around the anti-alias
     pixel. So, the circle is filled by the background almost totally. */
  width: 33.4rem;
  height: 33.4rem;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

fxos-tv-button[type="app-button"].focused {
  transform: scale(1.4);
  /* To use outline will not change the size of button and make the whole button
     thrilling. */
  outline: 0.8rem solid #ffffff;
}

fxos-tv-button[type="app-button"].pressed {
  /* While scaling, we may have a gap between outline and icon which may be
     anti-alias pixel. So, we use scale(1.22) to prevent such kind of case */
  transform: scale(1.22);
  /* To use outline will not change the size of button and make the whole button
     thrilling. */
  outline: 1.0rem solid #ffffff;
}

fxos-tv-button[type="app-button"].fullsized {
  background-size: 33.6rem auto;
}

fxos-tv-button[type="app-button"].fitted {
  background-size: 22rem auto;
}

/** we use :after as label */
fxos-tv-button[type="app-button"]:after {
  content: attr(label);

  position: absolute;
  bottom: 0;
  left: auto;
  right: auto;

  width: 33.6rem;
  height: 8rem;

  padding-top: 1rem;

  line-height: 3rem;
  text-align: center;

  font-size: 2.8rem;
  font-style: italic;
  color: #ffffff;
}

/**
 * text backgorund color
**/
fxos-tv-button[type="app-button"][app-type="deck"]:after {
  background-color: transparent;
}

fxos-tv-button[type="app-button"][app-type="tv"]:after {
  background-color: #d90c83;
}

fxos-tv-button[type="app-button"][app-type="app"]:after,
fxos-tv-button[type="app-button"][app-type="bookmark"]:after {
  background-color: rgba(0, 0, 0, 0.4);
}

fxos-tv-button[type="app-button"][app-type="device"]:after {
  background-color: #4a82ea;
}

fxos-tv-button[type="app-button"][app-type="folder"] {
  background-color: #595959;
}

fxos-tv-button[type="app-button"]:before {
  left: 0;
  line-height: 30rem;
  font-size: 16rem;
  width: 100%;
}

fxos-tv-button[type="app-button"][app-type="folder"]:before {
  color: #CCCCCC;
}

/**
 * End of App Icons
**/

/**
 * text and icon button
 */
fxos-tv-button[type="text-and-icon"] {
  position: relative;
  color: white;
  font-size: 2.4rem;
  padding-left: 4.6rem;
  padding-right: 4.6rem;
  border-radius: 4rem;
  width: auto;
  line-height: 8rem;
  margin-right: 1.4rem;
  overflow: hidden;
}

fxos-tv-button[type="text-and-icon"][data-icon] {
  padding-left: 9.6rem;
}

fxos-tv-button[type="text-and-icon"][data-icon]:before {
  left: 3.8rem;
}

fxos-tv-button[type="text-and-icon"].focused {
  transform: scale(1.2);
  color: #2d2d2d;
}

fxos-tv-button[type="text-and-icon"].pressed {
  transform: scale(1);
  color: white;
  background-color: #00caf2;
}

/**
 * End of text and icon button
 */

/**
 * banner button
**/
fxos-tv-button[type="banner-button"] {
  position: relative;

  color: #ffffff;
  font-size: 2rem;

  width: 36rem;
  height: 20rem;
  overflow: hidden;

  border-radius: 0;
  border: 0 solid #ffffff;

  background-color: #5f5f5f;
  background-repeat: no-repeat;
  background-size: 120%;

  box-sizing: border-box;

  transition-property: all;
  transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1.0);
  transition-duration: 0.1s;
}

fxos-tv-button[type="banner-button"][label]:before {
  content: attr(label);

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  height: 5rem;

  line-height: 5rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
}

fxos-tv-button[type="banner-button"]:after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
  transition-duration: 0.06s;
  background-color: rgba(255, 255, 255, 0);
}

fxos-tv-button[type="banner-button"].focused {
  transform: none;
  border-width: 1.2rem;
  background-size: 100%;
  transition-duration: 0.24s;
}

fxos-tv-button[type="banner-button"].pressed {
  transform: scale(0.945, 0.9);
}

fxos-tv-button[type="banner-button"].pressed:after {
  background-color: rgba(255, 255, 255, 0.5);
}

/**
 * banner button
**/

/**
 * circle text button
 */
fxos-tv-button[type="circle-text"] {
  width: 21rem;
  height: 21rem;
  color: white;
  background-color: #5f6368;
  line-height: 21rem;
  padding: 2.5rem 2rem 1.5rem 2rem;
  text-align: center;
  font-size: 3.2rem;
  font-weight: bolder;
  overflow: hidden;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].focused {
  transform: scale(1.2);
  color: #2d2d2d;
  background-color: white;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].pressed {
  transform: scale(1);
  color: white;
  background-color: #00caf2;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].primary {
  background-color: #00caf2;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].primary.focused {
  color: #ffffff;
  background-color: #00caf2;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].primary.pressed {
  background-color: #0097b5;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].danger {
  background-color: #e63d2f;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].danger.focused {
  color: #ffffff;
  background-color: #e63d2f;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].danger.pressed {
  background-color: #ac2e23;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].disabled.focused {
  color: white;
  background-color: #5f6368;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="circle-text"].disabled.pressed {
  transform: scale(1.2);
  color: white;
  background-color: #5f6368;
  transition-property: transform, color, background-color;
}

/**
 * End of circle text button
 */

/**
 * rounded-corner text button
 */
fxos-tv-button[type="rounded-corner-text"] {
  -moz-user-select: none;
  width: auto;
  height: 8rem;
  border-radius: 4rem;
  background-color: #5f6368;
  padding: 0 3.8rem;
  line-height: 8rem;
  color: white;
  text-align: center;
  font-size: 2.4rem;
  overflow: hidden;
  transition-property: transform, color, background-color;
}

fxos-tv-button[type="rounded-corner-text"].focused,
fxos-tv-button[type="rounded-corner-text"]:hover {
  transform: scale(1.2);
  color: #2d2d2d;
  background-color: white;
}

fxos-tv-button[type="rounded-corner-text"].pressed {
  transform: scale(1);
  /*color: white;*/
  background-color: #00caf2;
}

fxos-tv-button[type="rounded-corner-text"].primary {
  background-color: #00caf2;
}

fxos-tv-button[type="rounded-corner-text"].primary:hover,
fxos-tv-button[type="rounded-corner-text"].primary.focused {
  color: #ffffff;
  background-color: #00caf2;
}

fxos-tv-button[type="rounded-corner-text"].primary.pressed {
  background-color: #0097b5;
}

/**
 * End of rounded-corner text button
 */