chromeos/components/camera_app_ui/resources/css/main.css

/* Copyright 2019 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

:root {
  /* Standard CrOS styles */
  --blue-300-rgb: 138, 180, 248;
  --blue-300: rgb(var(--blue-300-rgb));
  --blue-600-dark-rgb: 37, 129, 223;
  --blue-600-dark: rgb(var(--blue-600-rgb));
  --grey-100: rgb(241, 243, 244);
  --grey-200: rgb(232, 234, 237);
  --grey-900: rgb(32, 33, 36);

  --fast1-duration: 100ms;
  --fast2-duration: 200ms;
  --moderate1-duration: 250ms;
  --moderate2-duration: 500ms;
  --slow1-duration: 600ms;
  --slow2-duration: 1000ms;

  --standard-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --enter-easing: cubic-bezier(0, 0, 0.2, 1);
  --exit-easing: cubic-bezier(0.4, 0, 1, 1);

  /* App specific settings */
  --focus-color: rgba(var(--blue-600-dark-rgb), 0.7);
}

html {
  height: 100%;  /* Required for printing. */
}

audio {
  display: none;
}

body {
  --default-font-family: 'Google Sans', sans-serif;

  background: black;
  bottom: 0;
  font-family: var(--default-font-family);
  height: 100%;
  left: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  touch-action: none;
  width: 100%;
}

button,
input,
label {
  background-color: transparent;
  border-radius: 4px;
  border-style: none;
  margin: 0;
  outline: none;
  padding: 0;
  pointer-events: auto;
  position: relative;
}

input {
  -webkit-appearance: none;
}

body.tab-navigation button:focus::after,
body.tab-navigation input:focus::after {
  --focus-ring-size: 3px;

  border: 2px solid var(--focus-color);
  border-radius: 4px;
  bottom: calc(-1 * var(--focus-ring-size));
  content: '';
  left: calc(-1 * var(--focus-ring-size));
  position: absolute;
  right: calc(-1 * var(--focus-ring-size));
  top: calc(-1 * var(--focus-ring-size));
}

.cancel-animate {
  animation: none !important;
  transition: none !important;
}

.circle button,
body.tab-navigation .circle button:focus::after,
body.tab-navigation .circle input:focus::after {
  border-radius: 50%;
}

.buttons {
  align-items: center;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.buttons button:active,
.buttons input:active {
  transform: scale(1.07);
}

.buttons button,
.buttons input,
.menu-header .icon,
.menu-item .icon {
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  height: 40px;
  width: 40px;
}

::-webkit-scrollbar {
  height: 0;
  width: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  height: 0;
  width: 0;
}

.top-stripe {
  position: absolute;
  top: 48px;
  transform: translateY(-50%);
}

.bottom-stripe {
  bottom: var(--bottom-line);
  position: absolute;
  transform: translateY(50%);
}

.left-stripe {
  left:  var(--left-line);
  opacity: 1;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity var(--fast2-duration) var(--standard-easing);
  visibility: visible;
}

body.taking.video .left-stripe {
  opacity: 0;
  transition: visibility 0ms 225ms, opacity 225ms var(--standard-easing);
  visibility: hidden;
}

.right-stripe {
  position: absolute;
  right:  var(--right-line);
  transform: translateX(50%);
}

.horizontal-center-stripe {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.vertical-center-stripe {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.top-stripe.right-stripe {
  transform: translate(50%, -50%);
}

.top-stripe.left-stripe {
  transform: translate(-50%, -50%);
}

.top-stripe.horizontal-center-stripe {
  transform: translate(-50%, -50%);
}

.bottom-stripe.right-stripe {
  transform: translate(50%, 50%);
}

.bottom-stripe.left-stripe {
  transform: translate(-50%, 50%);
}

#shutters-group {
  --shutter-size: 60px;

  bottom: var(--shutter-vertical-center);
  display: flex;
  flex-direction: column;
  transform: translate(50%, 50%);
}

body.review-result #shutters-group {
  display: none;
}

body.tablet-landscape .actions-group {
  flex-direction: column-reverse;
}

#mode-selector {
  --fade-padding: 24px;
  --scrollbar-height: 4px;

  left: calc(var(--left-line) * 2);
  right: calc(var(--right-line) * 2);
}

#mode-selector::before,
#mode-selector::after {
  background: linear-gradient(to right, black, transparent);
  content: '';
  display: block;
  height: calc(100% - var(--scrollbar-height));
  pointer-events: none;
  position: absolute;
  top: 0;
  width: var(--fade-padding);
  z-index: 2;
}

#mode-selector::before {
  left: 0;
}

#mode-selector::after {
  right: 0;
  transform: scaleX(-1);
}

#modes-group {
  display: block;
  overflow: auto;
  pointer-events: auto;
  text-align: center;
  white-space: nowrap;
}

body:not(.streaming) #modes-group,
body.taking #modes-group,
body.taking:not(.video) #shutters-group {
  opacity: 0.38;
}

#modes-group::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  height: auto;
  width: auto;
}

#modes-group::-webkit-scrollbar {
  height: var(--scrollbar-height);
  width: auto;
}

body.taking.video #gallery-enter,
body.taking.video #modes-group {
  display: none;
}

body.should-handle-intent-result #modes-group {
  display: none;
}

#play-result-video {
  background-image: url(/images/camera_intent_play_video.svg);
  height: 80px;
  width: 80px;
}

#confirm-result-groups {
  bottom: calc(var(--bottom-line) - 36px);
  display: flex;
  flex-direction: column;
}

#confirm-result-groups>button {
  flex: 0 0 76px;
  height: 72px;
  width: 72px;
}

body.review-result #switch-device,
body.review-result #preview-video,
body:not(.review-result) #confirm-result-groups,
body:not(.review-photo-result) #review-photo-result,
body:not(.review-video-result) #review-video-result,
body:not(.review-video-result) #play-result-video,
body.playing-result-video #play-result-video {
  display: none;
}

#confirm-result {
  background-image: url(/images/camera_intent_result_confirm.svg);
}

#cancel-result {
  background-image: url(/images/camera_intent_result_cancel.svg);
}

#modes-group .mode-item {
  --focus-ring-gap: 7px;
  --focus-ring-border: 2px;

  display: inline-block;
  font-size: 0; /* Remove space between inline-block. */
  margin: calc(var(--focus-ring-gap) + var(--focus-ring-border)) 8px;
  position: relative;
}

#modes-group .mode-item.hide {
  display: none;
}

#modes-group .mode-item.first {
  margin-inline-start: var(--fade-padding);
}

#modes-group .mode-item.last {
  margin-inline-end: var(--fade-padding);
}

div.mode-item>span {
  border-radius: 16px/50%;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  padding: 8px 12px;
  position: relative;
  z-index: 0;
}

.mode-item>input {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

body.tab-navigation .mode-item>input:focus::after {
  display: none;
}

.mode-item>input:checked + span {
  background: white;
  box-shadow: 0 2px 3px rgba(32, 33, 36, 0.3);
  color: black;
  text-shadow: none;
}

body.tab-navigation .mode-item>input:focus + span::after {
  --negative-size: calc(-1 * var(--focus-ring-gap));

  border: var(--focus-ring-border) solid var(--focus-color);
  border-radius: 23px/50%;
  bottom: var(--negative-size);
  content: '';
  left: var(--negative-size);
  position: absolute;
  right: var(--negative-size);
  top: var(--negative-size);
}

button.shutter {
  display: none;
  height: 60px;
  width: 60px;
  z-index: 1;  /* On top of transforming switch-mode buttons. */
}

body.tab-navigation button.shutter:focus::after {
  --focus-ring-size: 9px;
}

body.video #recordvideo,
body:not(.taking):not(.video) #start-takephoto,
body:not(.timer):not(.video) #start-takephoto,
body.taking.timer:not(.video) #stop-takephoto {
  display: inline-block;
}

body:not(.recording) #video-snapshot,
body:not(.recording) #pause-recordvideo,
body.should-handle-intent-result #video-snapshot,
body.should-handle-intent-result #pause-recordvideo {
  display: none;
}

#video-snapshot-holder {
  bottom: calc(var(--shutter-vertical-center) + 84px);
  transform: translate(50%, 50%);
}

#video-snapshot {
  background-size: 44px 44px;
  height: 44px;
  width: 44px;
}

#start-takephoto,
#video-snapshot {
  background-image: url(/images/camera_shutter_photo_start.svg);
}

#start-takephoto:hover,
#video-snapshot:hover {
  background-image: url(/images/camera_shutter_photo_start_hover.svg);
}

#start-takephoto:active,
#video-snapshot:active {
  background-image: url(/images/camera_shutter_photo_start_active.svg);
}

#stop-takephoto {
  background-image: url(/images/camera_shutter_photo_stop.svg);
}

#stop-takephoto:hover {
  background-image: url(/images/camera_shutter_photo_stop_hover.svg);
}

#recordvideo {
  --size: 60px;
}

#pause-recordvideo-holder {
  bottom: calc(var(--shutter-vertical-center) - 84px);
  transform: translate(50%, 50%);
}

#pause-recordvideo {
  --size: 44px;
}

#recordvideo,
#pause-recordvideo {
  --dot-size: 25%;
  --durtaion: 180ms;
  --red: #f44336;
  --square-delay: 45ms;
  --square-size: calc(100% / 3);
  --white: #ffffff;

  background: var(--white);
  border-radius: 50%;
  height: var(--size);
  position: relative;
  transition: var(--durtaion) var(--standard-easing);
  width: var(--size);
}

#recordvideo:hover,
#pause-recordvideo:hover {
  --red: #f44336;
  --white: #e8eaed;
}

body.taking.video #recordvideo:hover {
  --red: #d93025;
}

#recordvideo .red-dot,
#pause-recordvideo .red-dot {
  background: var(--red);
  border-radius: 50%;
  box-sizing: border-box;
  height: var(--dot-size);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: var(--durtaion) var(--standard-easing);
  width: var(--dot-size);
}

body.taking.video #recordvideo .red-dot {
  height: var(--size);
  width: var(--size);
}

body:not(.recording-ui-paused).video #pause-recordvideo .red-dot {
  --dot-size: 0px;
}

#recordvideo .white-square {
  background: var(--white);
  border-radius: 2px;
  height: 0;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transition: var(--durtaion) var(--square-delay) var(--standard-easing);
  width: 0;
}

body.taking.video #recordvideo .white-square {
  height: var(--square-size);
  left: calc(50% - var(--square-size) / 2);
  opacity: 1;
  top: calc(50% - var(--square-size) / 2);
  width: var(--square-size);
}

#pause-recordvideo .two-bars {
  --bar-size: 20px;

  background-image: url(/images/camera_shutter_video_pause.svg);
  height: var(--bar-size);
  left: calc(50% - var(--bar-size) / 2);
  position: absolute;
  top: calc(50% - var(--bar-size) / 2);
  width: var(--bar-size);
}

body.video.recording.recording-ui-paused #recordvideo {
  --size: 44px;
}

body.video.recording-ui-paused #pause-recordvideo {
  --size: 60px;
}

body.video.recording-ui-paused #pause-recordvideo .two-bars {
  --bar-size: 0px;
}

body.video.taking #recordvideo {
  /* Prevent white background shown outside red dot area (crbug.com/1125896) */
  background: transparent;
}

body:not(.video) #toggle-mic,
body:not(.photo) #toggle-barcode,
body:not(.multi-camera) #switch-device {
  visibility: hidden;
}

#camera-mode {
  background-image: url(/images/camera_mode_photo.svg);
  height: 40px;
  visibility: hidden;
  width: 40px;
}

body.video #camera-mode {
  background-image: url(/images/camera_mode_video.svg);
}

body.square #camera-mode {
  background-image: url(/images/camera_mode_square.svg);
}

body.portrait #camera-mode {
  background-image: url(/images/camera_mode_portrait.svg);
}

body.mode-switching:not(.streaming) #camera-mode {
  visibility: visible;
}

#timer-tick-msg {
  color: white;
  font-size: 72px;
  visibility: hidden;
}

#timer-tick-msg.animate {
  opacity: 0.2;
  transform: scale(1.8, 1.8);
  transition: transform var(--moderate1-duration) ease-out,
              opacity var(--moderate1-duration) ease-out;
  visibility: visible;
}

#switch-device {
  background-image: url(/images/camera_button_switch_device.svg);
  height: var(--big-icon);
  width: var(--big-icon);
}

#switch-device.animate {
  animation: switch-device-rotate 350ms ease-out;
}

@keyframes switch-device-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}

body.tab-navigation #switch-device:focus::after {
  --focus-ring-size: 8px;
}

#gallery-enter {
  background-color: rgba(24, 24, 24, 1);
  background-size: cover;
  height: var(--big-icon);
  width: var(--big-icon);
}

body.should-handle-intent-result #gallery-enter {
  display: none;
}

.centered-overlay {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

#options-group {
  --option-item-vpadding: 12px;
  --switch-device-gap: 32px;
  bottom: calc(var(--bottom-line) + (var(--big-icon) / 2) + var(--switch-device-gap) - var(--option-item-vpadding));
  flex-direction: column-reverse;
}

body:not(.multi-camera) #options-group {
  bottom: calc(var(--bottom-line) - var(--option-item-vpadding) - (var(--small-icon) / 2));
}

body.max-wnd #options-group {
  --option-item-vpadding: 18px;
  --switch-device-gap: 48px;
}

#options-group input {
  margin: var(--option-item-vpadding) 0;
}

body.timer-3s #toggle-timer:checked {
  background-image: url(/images/camera_button_timer_on_3s.svg);
}

body.timer-10s #toggle-timer:checked {
  background-image: url(/images/camera_button_timer_on_10s.svg);
}

#toggle-timer {
  background-image: url(/images/camera_button_timer_off.svg);
}

#toggle-grid:checked {
  background-image: url(/images/camera_button_grid_on.svg);
}

#toggle-grid {
  background-image: url(/images/camera_button_grid_off.svg);
}

#toggle-mirror:checked {
  background-image: url(/images/camera_button_mirror_on.svg);
}

#toggle-mirror {
  background-image: url(/images/camera_button_mirror_off.svg);
}

#toggle-mic:checked {
  background-image: url(/images/camera_button_mic_on.svg);
}

#toggle-mic {
  background-image: url(/images/camera_button_mic_off.svg);
}

#toggle-barcode:checked {
  background: url(/images/barcode_toggle_on.svg) center no-repeat,
              rgba(var(--blue-300-rgb), 0.3);
}

#toggle-barcode {
  background-image: url(/images/barcode_toggle_off.svg);
  border-radius: 50%;
}

body:not(.multi-fps) #toggle-fps,
body:not(.video) #toggle-fps {
  display: none;
}

body.fps-30 #toggle-fps {
  background-image: url(/images/camera_button_fps_30.svg);
}

body.fps-60 #toggle-fps {
  background-image: url(/images/camera_button_fps_60.svg);
}

#open-settings {
  background-image: url(/images/camera_button_settings.svg);
}

body.should-handle-intent-result #open-settings {
  display: none;
}

#view-camera,
#view-settings,
#view-grid-settings,
#view-timer-settings,
#view-resolution-settings,
#view-photo-resolution-settings,
#view-video-resolution-settings,
#view-expert-settings,
#view-message-dialog,
#view-warning,
#view-splash {
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
}

body.view-camera #view-camera,
body.view-settings #view-settings,
body.view-grid-settings #view-grid-settings,
body.view-timer-settings #view-timer-settings,
body.view-resolution-settings #view-resolution-settings,
body.view-photo-resolution-settings #view-photo-resolution-settings,
body.view-video-resolution-settings #view-video-resolution-settings,
body.view-expert-settings #view-expert-settings,
body.view-message-dialog #view-message-dialog,
body.view-warning #view-warning,
body.view-splash #view-splash {
  opacity: 1;
  transition: opacity var(--fast1-duration);
  visibility: visible;
}

body.view-grid-settings #view-grid-settings,
body.view-timer-settings #view-timer-settings,
body.view-resolution-settings #view-resolution-settings,
body.view-photo-resolution-settings #view-photo-resolution-settings,
body.view-video-resolution-settings #view-video-resolution-settings,
body.view-expert-settings #view-expert-settings,
body.view-settings #view-settings {
  /* Avoid flicking for transition between settings. */
  transition: opacity 0ms;
}

html[dir=ltr] body.view-settings .left-stripe,
html[dir=rtl] body.view-settings .right-stripe,
body.view-grid-settings #view-settings,
html[dir=ltr] body.view-grid-settings .left-stripe,
html[dir=rtl] body.view-grid-settings .right-stripe,
body.view-timer-settings #view-settings,
html[dir=ltr] body.view-timer-settings .left-stripe,
html[dir=rtl] body.view-timer-settings .right-stripe,
body.view-resolution-settings #view-settings,
html[dir=ltr] body.view-resolution-settings .left-stripe,
html[dir=rtl] body.view-resolution-settings .right-stripe,
body.view-photo-resolution-settings #view-settings,
body.view-photo-resolution-settings #view-resolution-settings,
html[dir=ltr] body.view-photo-resolution-settings .left-stripe,
html[dir=rtl] body.view-photo-resolution-settings .right-stripe,
body.view-video-resolution-settings #view-settings,
body.view-video-resolution-settings #view-resolution-settings,
html[dir=ltr] body.view-video-resolution-settings .left-stripe,
html[dir=rtl] body.view-video-resolution-settings .right-stripe,
body.view-expert-settings #view-settings,
html[dir=ltr] body.view-expert-settings .left-stripe,
html[dir=rtl] body.view-expert-settings .right-stripe {
  opacity: 0;
}

#view-camera {
  --big-icon: 48px;
  --bottom-line: 44px;
  --left-line: 44px;
  --right-line: 50px;
  --small-icon: 40px;
  --shutter-vertical-center: 180px;

  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

#preview-box {
  align-items: center;
  bottom: calc(var(--bottom-line) * 2);
  display: flex;
  justify-content: center;
  left: calc(var(--left-line) * 2);
  pointer-events: none;
  position: absolute;
  right: calc(var(--right-line) * 2);
  top: 0;
}

#preview-viewport {
  height: 0; /* Calculate at runtime. */
  overflow: hidden;
  position: relative;
  width: 0; /* Calculate at runtime. */
}

.preview-content {
  height: 0; /* Calculate at runtime. */
  left: 0; /* Calculate at runtime. */
  position: relative;
  top: 0; /* Calculate at runtime. */
  width: 0; /* Calculate at runtime. */
}

body.streaming .preview-content {
  pointer-events: auto;
}

body.mirror .preview-content ,
body.mirror #preview-focus {
  transform: scaleX(-1);
}

#preview-focus {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#preview-focus-aim {
  position: absolute;
  transform: translate(-50%, -50%);
}

#preview-video {
  transition: opacity var(--fast2-duration) ease-in-out;
}

#preview-video.animate {
  opacity: 0;
}

body:not(.streaming) #preview-video {
  filter: blur(10px);
  /* Scale up to hide blurred edges. */
  transform: scale(1.03, 1.03);
}

body.mirror:not(.streaming) #preview-video {
  transform: scale(-1.03, 1.03);
}

#preview-metadata {
  font-size: 14px;
  left: 60px;
  position: absolute;
  text-align: left;  /* csschecker-disable-line left-right */
  top: 10px;
}

.metadata-row {
  margin-top: 5px;
}

.metadata-category {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  color: grey;
  display: inline;
  font-weight: bold;
  padding: 1px 3px 1px 3px;
}

.mode-on .metadata-category {
  background-color: rgb(0, 128, 0);
  color: white;
}

.metadata-value {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  display: inline;
  padding: 1px 3px 1px 3px;
}

#preview-wb-gain-red {
  color: red;
}

#preview-wb-gain-blue {
  color: blue;
}

#preview-grid {
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
}

body:not(.streaming) #preview-metadata,
body:not(.streaming) #preview-grid,
body:not(.streaming) #preview-focus,
body:not(.streaming) #open-settings,
body:not(.streaming) #toggle-mic,
body:not(.streaming) #options-group {
  visibility: hidden;
}

body:not(.expert) #preview-metadata,
body:not(.expert) #preview-metadata::before,
body:not(.show-metadata) #preview-metadata,
body:not(.show-metadata) #preview-metadata::before {
  visibility: hidden;
}

body:not(.expert) #settings-expert {
  display: none;
}

#preview-grid-horizontal {
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

body.grid.grid-4x4 #preview-grid-horizontal::before {
  border-bottom: 1px solid white;
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

body.grid.grid-3x3 #preview-grid-horizontal,
body.view-grid-settings.grid-3x3 #preview-grid-horizontal {
  height: 33.333%;
}

body.grid.grid-golden #preview-grid-horizontal,
body.view-grid-settings.grid-golden #preview-grid-horizontal {
  height: 23.607%;
}

body.grid.grid-4x4 #preview-grid-horizontal,
body.grid.grid-4x4 #preview-grid-horizontal::before,
body.view-grid-settings.grid-4x4 #preview-grid-horizontal,
body.view-grid-settings.grid-4x4 #preview-grid-horizontal::before {
  height: 50%;
}

#preview-grid-vertical {
  border-inline-end: 1px solid white;
  border-inline-start: 1px solid white;
  bottom: 0;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
}

body.grid-4x4 #preview-grid-vertical::before {
  border-right: 1px solid white;  /* csschecker-disable-line left-right */
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}

body.grid.grid-3x3 #preview-grid-vertical,
body.view-grid-settings.grid-3x3 #preview-grid-vertical {
  width: 33.333%;
}

body.grid.grid-golden #preview-grid-vertical,
body.view-grid-settings.grid-golden #preview-grid-vertical {
  width: 23.607%;
}

body.grid.grid-4x4 #preview-grid-vertical,
body.grid.grid-4x4 #preview-grid-vertical::before,
body.view-grid-settings.grid-4x4 #preview-grid-vertical,
body.view-grid-settings.grid-4x4 #preview-grid-vertical::before {
  width: 50%;
}

#preview-grid-horizontal,
#preview-grid-horizontal::before {
  transition: height 500ms, visibility 500ms;
}

#preview-grid-vertical,
#preview-grid-vertical::before {
  transition: width 500ms, visibility 500ms;
}

body:not(.grid):not(.view-grid-settings) #preview-grid-horizontal,
body:not(.grid):not(.view-grid-settings) #preview-grid-horizontal::before,
body:not(.grid):not(.view-grid-settings) #preview-grid-vertical,
body:not(.grid):not(.view-grid-settings) #preview-grid-vertical::before {
  visibility: hidden;
}

#record-time {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  display: flex;
  height: 32px;
  justify-content: flex-start;
  padding: 0 12px;
  pointer-events: none;
}

body.recording-ui-paused #record-time {
  background-color: black;
}

#record-time[hidden],
.menu-item[hidden] {
  display: none;  /* Required for flexbox hidden. */
}

#record-time .icon {
  background-color: rgb(234, 67, 53);
  border-radius: 50%;
  flex-shrink: 0;
  height: 6px;
  width: 6px;
}

body.recording-ui-paused #record-time .icon,
body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_msg] {
  display: none;
}

#record-time #record-time-msg,
#record-time [i18n-content=record_video_paused_msg] {
  color: white;
  flex-shrink: 0;
  font-size: 13px;
}

#record-time #record-time-msg {
  margin-inline-start: 8px;
}

@media print {
  html {
    height: 100%;  /* Required for printing. */
  }

  body {
    height: auto;
    overflow: visible;
    position: static;
    width: 100%;
  }

  /* Reset background colors. */
  body {
    background: transparent;
  }

  /* Hide the buttons. */
  .buttons {
    display: none;
  }
}

#tooltip {
  background: rgba(241, 243, 244, 0.8);
  border-radius: 2px;
  color: var(--grey-900);
  font-size: 12px;
  left: 0;
  line-height: 22px;
  opacity: 0;
  padding: 0 8px;
  pointer-events: none;
  position: absolute;
  top: 0;
  white-space: nowrap;
  z-index: 100;
}

#tooltip.visible {
  opacity: 1;
  transition: opacity 350ms ease-out 1500ms;
}

#toast {
  background: rgb(30, 30, 35);
  border-radius: 16px;
  color: white;
  font-size: 16px;
  line-height: 32px;
  opacity: 0;
  padding: 0 16px;
  pointer-events: none;
  z-index: 100;
}

#toast.animate.spoken {
  animation: toast-spoken 3000ms ease-out;
}

#toast.animate:not(.spoken) {
  animation: toast-shown 3000ms ease-out;
}

@keyframes toast-spoken {
  0%,
  100% {
    opacity: 0;
  }
}

@keyframes toast-shown {
  0% {
    opacity: 0;
  }
  10%,
  90% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

#banner {
  background: white;
  border-radius: 8px;
  bottom: -130px;
  display: none;
  padding: 26px 29px;
  width: 460px;
}

#banner.animate {
  animation: emerge 6000ms var(--enter-easing);
  display: block;
}

@keyframes emerge {
  0%,
  100% {
    bottom: -130;
  }
  8%,
  92% {
    /* exit-easing. We cannot use variable here (https://crbug.com/1066798) */
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    bottom: 31px;
  }
}

#banner-title {
  color: rgb(26, 115, 232);
  margin-bottom: 10px;
}

#banner-title-icon {
  background-image: url(/images/camera_intro_banner_icon.svg);
  display: inline-block;
  height: 20px;
  margin-inline-end: 10px;
  vertical-align: middle;
  width: 20px;
}

#banner-title-text {
  font: 450 18px var(--default-font-family);
  vertical-align: middle;
}

#banner-msg {
  color: rgb(95, 99, 104);
  font: 375 15px/22px var(--default-font-family);
}

#banner-close {
  background-image: url(/images/camera_intro_banner_close.svg);
  display: block;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  width: 20px;
}

html[dir=rtl] #banner-close {
  left: 15px;
  right: auto;
}

.menu {
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 360px;
  opacity: 0.9;
  overflow-y: scroll;
  position: absolute;
  top: 0;
}

.menu-header,
.menu-item {
  --hover-color: rgba(255, 255, 255, 0.06);
  --toggled-color: rgb(140, 180, 245);

  align-items: center;
  color: var(--grey-100);
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  height: 64px;
  justify-content: flex-start;
  text-align: initial;
}

button.menu-item:hover,
label.menu-item:hover {
  background-color: var(--hover-color);
}

/* Inkdrop effect. */
button.menu-item,
label.menu-item {
  overflow: hidden;
}

body.tab-navigation button.menu-item:focus::after,
body.tab-navigation label.menu-item:focus::after {
  bottom: 0;
  top: 0;
}

button.menu-item::before,
label.menu-item::before {
  background: white;
  border-radius: 50%;
  content: '';
  height: 0;
  left: var(--drop-x);
  position: absolute;
  top: var(--drop-y);
  transform: translate(-50%, -50%);
  width: 0;
}

button.menu-item.animate::before,
label.menu-item.animate::before {
  animation: inkdrop var(--moderate1-duration) ease-out;
}

@keyframes inkdrop {
  0% {
    height: 0;
    opacity: 0.6;
    width: 0;
  }
  100% {
    height: calc(var(--drop-radius) * 2);
    opacity: 0;
    width: calc(var(--drop-radius) * 2);
  }
}

.menu-item {
  padding-inline-start: 32px;
}

.menu-header {
  color: white;
  font-size: 20px;
  height: 72px;
  padding-inline-start: 16px;
}

.menu-item.resol-item {
  padding-inline-start: 64px;
}

.menu-item .icon.end {
  margin-inline-end: 16px;
  margin-inline-start: auto;
}

.menu-item .description {
  color: rgb(189, 193, 198);
  margin-top: 5px;
}

.menu-item .description span {
  display: none;
}

body:not(.has-front-camera) #settings-front-photores,
body:not(.has-front-camera) #settings-front-videores,
body:not(.has-back-camera) #settings-back-photores,
body:not(.has-back-camera) #settings-back-videores,
body:not(.has-front-camera):not(.has-back-camera) #builtin-photo-header,
body:not(.has-front-camera):not(.has-back-camera) #builtin-video-header {
  display: none;
}

body.grid-3x3 .description span[i18n-content=label_grid_3x3],
body.grid-4x4 .description span[i18n-content=label_grid_4x4],
body.grid-golden .description span[i18n-content=label_grid_golden],
body.timer-3s .description span[i18n-content=label_timer_3s],
body.timer-10s .description span[i18n-content=label_timer_10s],
.menu-item.resol-item .description span {
  display: inline;
}

.menu-item input::before {
  bottom: 13px;
  box-shadow: 0 0 0 2px var(--grey-100);
  content: '';
  left: 13px;
  position: absolute;
  right: 13px;
  top: 13px;
}

.menu-item input[type=radio]::before {
  border-radius: 50%;
}

.menu-item input:checked::before {
  background-clip: padding-box;
  background-color: var(--toggled-color);
  border: 4px solid transparent;
  bottom: 12px;
  box-shadow: 0 0 0 1px var(--toggled-color);
  left: 12px;
  right: 12px;
  top: 12px;
  transition: border-width var(--fast1-duration) ease-in;
}

body.tab-navigation button.menu-item:focus::after {
  left: 2px;
  right: 2px;
}

.menu-header .icon {
  background-image: url(/images/settings_button_back.svg);
}

html[dir=rtl] .menu-header .icon {
  transform: scale(-1, 1);
}

.menu-header .icon:hover {
  background-color: var(--hover-color);
}

#settings-gridtype .icon {
  background-image: url(/images/settings_grid_type.svg);
}

#settings-timerdur .icon {
  background-image: url(/images/settings_timer_duration.svg);
}

body.no-resolution-settings #settings-resolution {
  display: none;
}

#settings-resolution .icon {
  background-image: url(/images/settings_resolution.svg);
}

#settings-expert .icon {
  background-image: url(/images/settings_expert.svg);
}

#settings-feedback .icon {
  background-image: url(/images/settings_feedback.svg);
}

#settings-help .icon {
  background-image: url(/images/settings_help.svg);
}

#settings-gridtype .icon.end,
#settings-timerdur .icon.end,
#settings-resolution .icon.end,
#settings-expert .icon.end,
.resol-item.multi-option .icon.end {
  background-image: url(/images/settings_button_expand.svg);
}

html[dir=rtl] .icon.end {
  transform: scale(-1, 1);
}

#view-warning,
.dialog {
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 1;
}

#view-warning {
  background: black;
  color: white;
}

#view-warning #error-msg {
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  white-space: pre-wrap;
}

.dialog {
  background: rgba(0, 0, 0, 0.6);
}

.dialog-popup {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  display: flex;
  flex-direction: column;
  padding: 20px;
  transform: translateY(20px);
  transition: transform var(--fast2-duration);
}

.dialog .dialog-popup {
  transform: translateY(0);
}

.dialog .dialog-msg {
  color: var(--grey-900);
  cursor: text;
  font-size: 14px;
  max-height: 320px;
  max-width: 472px;
  overflow: auto;
  padding: 20px 0;
  user-select: text;  /* Allow copying the message. */
  white-space: pre-wrap;
}

.dialog .dialog-msg::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.dialog .dialog-msg::-webkit-scrollbar-track {
  background: transparent;
}

.dialog .dialog-msg::-webkit-scrollbar-thumb {
  background: gray;
  height: 6px;
  width: 6px;
}

.dialog-buttons {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: 0 -2px;
}

.dialog-buttons button {
  background-color: white;
  border-style: solid;
  color: var(--blue-600-dark);
  font-size: 12px;
  margin: 4px;
  padding: 6px 18px;
}

body.tab-navigation .dialog-buttons button:focus {
  background-color: var(--blue-600-dark);
  border-color: var(--blue-600-dark);
  color: white;
}

body.tab-navigation .dialog-buttons button:focus::after {
  border: none;
}

#spinner {
  background-image: url(/images/spinner.svg);
  height: 32px;
  visibility: hidden;
  width: 32px;
  z-index: 1;
}

#view-splash {
  background: no-repeat center url(/images/camera_mode_photo.svg), black;
  z-index: 2;
}

body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
  visibility: visible;
}

/* The container of scan box for layout and positioning. */
.barcode-scan-box {
  --border-distance: 8px;
  --border-width: 4px;
  --inner-border-radius: 16px;
  opacity: 0;
  /* Use padding-top instead of height to make a responsive square, since the
   * percentage in padding-top is relative to the width of the containing
   * block. */
  padding-top: calc(100% / 2);
  transition: all var(--exit-easing) var(--moderate1-duration);
  visibility: hidden;
  width: calc(100% / 2);
}

body.photo.scan-barcode .barcode-scan-box {
  opacity: 1;
  padding-top: calc(100% / 3);
  transition: all var(--enter-easing) var(--moderate1-duration);
  visibility: visible;
  width: calc(100% / 3);
}

/* The inner scan box with a translucent overlay. */
.barcode-scan-box::before {
  --offset: calc(var(--border-width) + var(--border-distance));
  border-radius: var(--inner-border-radius);
  bottom: var(--offset);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  content: '';
  left: var(--offset);
  position: absolute;
  right: var(--offset);
  top: var(--offset);
  z-index: -1;  /* This need to be lower than the corner borders */
}

/* The corner borders of the scan box. */
.barcode-scan-box::after {
  -webkit-mask: url(/images/barcode_scan_box_border_mask.svg);
  border: var(--border-width) solid white;
  border-radius: calc(var(--inner-border-radius) + var(--border-distance));
  box-sizing: border-box;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* TODO(b/172879638): Tune the position and layout after we finalized the
 * responsive window design. */
.barcode-chip-container {
  --chip-height: 32px;
  --chip-max-width: 420px;
  --min-scanbox-distance: 40px;
  --text-expand-button-height: 40px;
  --text-line-height: 24px;
  --text-padding-vertical: 8px;

  left: 50%;
  max-width: min(80%, var(--chip-max-width));
  opacity: 1;
  pointer-events: auto;
  position: absolute;
  /* Avoid collision with scan-box and preview-box */
  top: max(8px, min(10%, 33.33% - var(--text-line-height) -
      var(--text-expand-button-height) - 2 * var(--text-padding-vertical) -
      var(--min-scanbox-distance)));
  transform: translateX(-50%);
  transition: opacity var(--moderate1-duration) var(--standard-easing);
  z-index: 50;
}

.barcode-chip-container.invisible {
  opacity: 0;
  transition: opacity var(--moderate1-duration) var(--standard-easing),
              visibility 0s var(--moderate1-duration);
}

.barcode-chip-url {
  align-items: center;
  background: var(--grey-900);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  display: flex;
  font: 400 15px Roboto;
  height: var(--chip-height);
  padding: 8px;
}

.barcode-chip-url::before {
  background: url(/images/barcode_url.svg) no-repeat;
  content: '';
  display: inline-block;
  flex-shrink: 0;
  height: 20px;
  margin-inline-end: 6px;
  vertical-align: middle;
  width: 20px;
}

.barcode-chip-url > a {
  color: var(--blue-300);
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barcode-chip-url > a:focus {
  outline: none;
}

.barcode-copy-button:hover {
  /* TODO(b/172879638): Tweak color according to the final UX spec */
  background: url(/images/barcode_copy.svg) center no-repeat, rgb(50, 51, 54);
}

.barcode-copy-button {
  background: url(/images/barcode_copy.svg) center no-repeat, var(--grey-900);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  height: var(--chip-height);
  inset-inline-start: calc(100% + 8px);
  position: absolute;
  top: 0;
  width: var(--chip-height);
  z-index: 50;
}

.barcode-chip-text {
  align-items: center;
  background: var(--grey-900);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font: 400 15px Roboto;
  padding: var(--text-padding-vertical) 20px;
}

#barcode-chip-text-content {
  color: var(--grey-200);
  line-height: var(--text-line-height);
  max-width: 100%;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expanded #barcode-chip-text-content {
  /* TODO(b/172879638): Make this responsive */
  max-height: calc(var(--text-line-height) * 10);
  white-space: normal;
  /* Keep the same width as before to avoid text jumping. */
  width: var(--chip-max-width);
}

#barcode-chip-text-expand {
  background: url(/images/barcode_chevron_down.svg) center no-repeat;
  height: var(--text-expand-button-height);
  width: 100%;
}

.expanded #barcode-chip-text-expand {
  background: url(/images/barcode_chevron_up.svg) center no-repeat;
}

.snackbar {
  align-items: center;
  background: var(--grey-900);
  border-radius: 4px;
  bottom: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  color: var(--grey-200);
  display: flex;
  font-family: Roboto;
  font-size: 13px;
  height: 48px;
  left: 4px;
  opacity: 0;
  padding: 14px 16px;
  position: absolute;
  width: 256px;
  z-index: 50;
}

.snackbar.animate {
  animation: 3s show-snackbar linear;
}

@keyframes show-snackbar {
  0% {
    opacity: 0;
  }
  /* 100ms fade-in */
  3.33% {
    opacity: 1;
  }
  97.33% {
    opacity: 1;
  }
  /* 80ms fade-out */
  100% {
    opacity: 0;
  }
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}