VulpesOS/gaia/apps/camera/style/controls.css

/**
 * Controls
 *
 * The main camera control bar.
 *
 * 1. Must be stacked above viewfinder view
 */

.controls {
  display: flex;
  position: absolute;
  bottom: 0; left: 0;
  z-index: 1; /* 1 */
  width: 100%;
  padding-bottom: 1rem;
  overflow: hidden;
  direction: ltr;
}

.controls.hidden {
  visibility: hidden;
}

/**
 * disabled
 */

.controls.disabled {
  pointer-events: none;
}

/** Left and Right
 ---------------------------------------------------------*/

.controls-left,
.controls-right {
  display: flex;
  flex: 1;
  align-items: center;
  transition: opacity 100ms;
}

/** Left
 ---------------------------------------------------------*/

.controls-left {
  justify-content: flex-end;
  opacity: 1;
  transition: opacity 200ms ease-in-out, visibility 0ms;
}

/**
 * recording=true
 */

.controls.recording .controls-left {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-delay: 0ms, 200ms;
}

/** Right
 ---------------------------------------------------------*/

.controls-right {
  justify-content: flex-start;
}

/**
 * Countdown
 */

.controls[data-countdown="active"] {
  pointer-events: none;
}

.controls[data-countdown="active"] .controls-left,
.controls[data-countdown="active"] .controls-right {
  opacity: 0;
  transition-duration: 300ms;
}

/** Controls Button
 ---------------------------------------------------------*/

.controls-button {
  position: relative;
  display: block;
  height: 5.4rem;
  width: 5.4rem;
  font-size: 3rem;
  line-height: 5.4rem;
  text-align: center;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.4);
  background-clip: padding-box;
  border: solid 1.8rem transparent;
  box-sizing: content-box;
  color: #fff;
}

/**
 * :active
 */

.controls-button:active {
  background-color: #00b9df;
}

/** Thumbnail Button
 ---------------------------------------------------------*/

.controls-thumbnail-button {
  display: none;
}

.controls.thumbnail .controls-thumbnail-button {
  display: block;
}

.controls-thumbnail-button > img:active {
  border-color:#008EAB;
  background-color:#008EAB;
}

.controls-thumbnail-button > img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: solid 2px #ffffff;
  border-radius: 50%;
  animation: thumbnail-fade-in 300ms;
}

/** Thumbnail Animation
 ---------------------------------------------------------*/

@keyframes thumbnail-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/** Cancel Pick Button
 ---------------------------------------------------------*/

.controls-cancel-pick-button {
  display: none;
}

/**
 * @cancel
 */

.controls.cancel .controls-cancel-pick-button {
  display: block;
}

/** Mode Switch
 ---------------------------------------------------------*/

.mode-switch {
  position: relative;
  display: block;
  font-size: 2.4rem;
  width: 7.6rem;
  background: rgba(0,0,0,0.4);
  border-radius: 3rem;
  padding: 0.2rem;
  margin-left: 1.8rem;
  box-sizing: content-box;
  overflow: hidden;
}

/**
 * switch-toggle-disabled
 */
.controls.switch-toggle-disabled .mode-switch {
  pointer-events: none;
}

/**
 * switch-disabled,
 * recording
 */

.controls.switch-disabled .mode-switch,
.controls.recording .mode-switch {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

/** Mode Icon
 ---------------------------------------------------------*/

.mode-switch_bg-icon {
  position: absolute;
  top: 0;
  width: 4rem;
  text-align: center;
  color: #C7C7C7;
}

.mode-switch_bg-icon:before {
  font-size: 2.1rem;
  line-height: 4rem;
}

/**
 * first
 */

.mode-switch_bg-icon:nth-of-type(1) {
  left: 0;
}

/**
 * second
 */

.mode-switch_bg-icon:nth-of-type(2) {
  right: 0;
}

/** Mode Switch Handle
 ---------------------------------------------------------*/

.mode-switch_handle {
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: #EEE;
}

/**
 * Expanded touch-area
 */

.mode-switch_handle:after {
  content: '';
  position: absolute;
  top: -10px; bottom: -10px;
  left: -10px; right: -10px;
}

/** Mode Switch Current Icon
 ---------------------------------------------------------*/

.mode-switch_current-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  line-height: 3.6rem;
  text-align: center;
}

.mode-switch_current-icon:before {
  font-size: 2.1rem;
}

/** Mode Switch Current Icon (camera)
 ---------------------------------------------------------*/

.mode-switch_current-icon.camera {
  color: #00CAF2;
}

/** Mode Switch Current Icon (video)
 ---------------------------------------------------------*/

.mode-switch_current-icon.video {
  color: #D92E2E;
}

/** Capture Button
 ---------------------------------------------------------*/

.capture-button {
  position: relative;
  top: calc(50% - 5.1rem);
  width: 10.2rem;
  height: 10.2rem;
}

/* Override [role="button"] styling. */
.capture-button:active {
  background: none;
}

/** Circle
 ---------------------------------------------------------*/

.capture-button .circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/** Outer Circle
 ---------------------------------------------------------*/

.outer-circle {
  background: #C3F5FF;
  opacity: 0.35;
}

/**
 * .mode-video
 */

.controls.mode-video .outer-circle {
  background: #D92E2E;
}

/** Inner Circle
 ---------------------------------------------------------*/

.capture-button .inner-circle {
  background-color: white;
  transform: scale(0.76);
  transition: transform 150ms ease-in;
}

/**
 * :active,
 * recording=true,
 * capture-active=true & mode=picture
 */

.capture-button:active .inner-circle,
.recording .capture-button .inner-circle,
.capture-active .capture-button .inner-circle {
  background-color: #00caf2;
  color: white;
  transform: scale(1.0);
}

/**
 * mode=video
 */

.controls.mode-video .inner-circle {
  position: relative;
}

/**
 * mode=video & :active,
 * mode=video & capture-active=true,
 * mode=vide & recording=true
 */

.controls.mode-video .capture-button:active .inner-circle,
.controls.mode-video.capture-active .capture-button .inner-circle,
.controls.mode-video.recording .capture-button .inner-circle {
  background-color: #D92E2E;
}

/** Icon
 ---------------------------------------------------------*/

.capture-button .center:before {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 4rem;
  line-height: 10.2rem;
  text-align: center;
  color: #81ACB6;
}

/**
 * :active,
 * recording,
 * capture-active && mode-picture
 */

.capture-button:active .center:before,
.recording .capture-button .center:before,
.capture-active .capture-button .center:before {
  color: white;
}

/**
 * mode-video
 *
 * 1. (bug 1008488): Pixel rounding issues sometimes
 *    means that this circle looks 'chopped'. Using a
 *    more precise height fixes this, although
 *    technically this is a platform issue.
 */

.controls.mode-video .capture-button .center:before {
  content: "";
  top: calc(50% - 1rem);
  left: calc(50% - 1rem);
  width: 2.001rem; /* 1 */
  height: 2.001rem; /* 1 */
  border-radius: 50%;
  background-color: #D92E2E;
  color: white;
}

/**
 * mode-video & :active,
 * mode-video & recording,
 * mode-video & capture-active
 */

.controls.mode-video .capture-button:active .center:before,
.controls.mode-video.recording .capture-button .center:before,
.controls.mode-video.capture-active .capture-button .center:before {
  border-radius: 3px;
  background-color: white;
}