app.css

html,
body {
  padding: 0;
  margin: 0;

  font-family: sans-serif;

  width: 100%;
  height: 100%;
  overflow: hidden;

  color: #444;
}

button {
  background: none;
  padding: 0;
  border: 0;
}

.controls {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  min-height: 100px;
}

.capture {
  font-size: 40px;
}

fxos-camera .focus {
  width: 80px;
  height: 80px;
}

fxos-camera .focus:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: solid 1.5px;
  border-radius: 50%;
  color: rgba(255,255,255,0.9);
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  transition: opacity 180ms 200ms;
  opacity: 0;
}

fxos-camera .focus[data-state="focusing"]:before,
fxos-camera .focus[data-state="focused"]:before {
  transition-delay: 0ms;
  opacity: 1;
}

fxos-camera .focus[data-state="focusing"]:before {
  animation: 0.1s ring-animation 1 ease-in forwards;
}

/**
 * [state=focused]
 */

fxos-camera .focus[data-state="focused"]:before {
  color: #afff3d;

  transition: transform 0.1s ease-in;
  animation: 0.15s focuslocked ease-in forwards;
}

fxos-camera .face {
  border: solid 1.5px;
  border-radius: 50%;
  color: rgba(255,255,255,0.8);
  opacity: 0;
  transition: opacity 180ms;
}

fxos-camera .face.active {
  opacity: 1;
}

fxos-camera .face.largest {
  color: #afff3d;
}

@keyframes ring-animation {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(45deg) scale(1); }
}

@keyframes focuslocked {
  0% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(0.8478); }
  100% { transform: rotate(45deg) scale(0.95); }
}