ptz_panel.css | Explore in Territory

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

#ptz-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: absolute;
}

#ptz-panel button:enabled:hover {
  /* Use linear-gradient to apply multiple background colors. */
  background: linear-gradient(
    0deg,
    var(--cros-sys-hover_on_subtle),
    var(--cros-sys-hover_on_subtle)
  ), var(--cros-sys-base_elevated);
}

#reset-all-container {
  border-radius: var(--border-radius-rounded-with-short-side);
  height: 32px;
  margin-bottom: 8px;
  overflow: unset;
}

#reset-all-container>button {
  border-radius: var(--border-radius-rounded-with-short-side);
}

#ptz-reset-all {
  align-items: center;
  display: flex;
  height: 100%;
  padding: 8px 16px;
}

#ptz-reset-all:focus::after {
  border-radius: var(--border-radius-rounded-with-short-side);
}

#ptz-reset-all>.icon {
  height: 20px;
  margin-inline-end: 8px;
  width: 20px;
}

#ptz-reset-all>.text {
  color: var(--cros-sys-on_surface);
  font: var(--cros-button-2-font);
}

#ptz-panel-container {
  --divider-color: var(--cros-sys-separator);
  --divider-width: 1px;

  border-radius: 20px;
}

#ptz-panel-container button {
  --svg-width: 20px;
  --svg-height: 20px;

  height: 48px;
  position: absolute;
  width: 48px;
}

#ptz-panel-container button:disabled svg-wrapper {
  opacity: 0.38;
}

#ptz-panel-container>button:focus {
  outline: none;
}

#ptz-panel-container>button:focus-visible svg-wrapper {
  border-radius: 50%;
  outline: 2px solid var(--cros-sys-focus_ring);
  outline-offset: 3px;
}

body:not(.has-pan-support) :is(#pan-left, #pan-right),
body:not(.has-tilt-support) :is(#tilt-up, #tilt-down),
body:not(.has-zoom-support) :is(#zoom-in, #zoom-out) {
  display: none;
}

/* Icons. */
#ptz-panel-container svg-wrapper {
  height: var(--svg-height);
  left: calc(50% - var(--svg-width) / 2);
  position: absolute;
  top: calc(50% - var(--svg-height) / 2);
  width: var(--svg-width);
}


/* Only P, Only Z */

body.has-pan-support:not(.has-tilt-support):not(.has-zoom-support) #ptz-panel-container,
body.has-zoom-support:not(.has-pan-support):not(.has-tilt-support) #ptz-panel-container {
  height: 48px;
  width: 96px;
}

body.has-pan-support:not(.has-tilt-support):not(.has-zoom-support) #pan-left,
body.has-zoom-support:not(.has-pan-support):not(.has-tilt-support) #zoom-out {
  left: 0;
}

body.has-pan-support:not(.has-tilt-support):not(.has-zoom-support) #pan-right,
body.has-zoom-support:not(.has-pan-support):not(.has-tilt-support) #zoom-in {
  right: 0;
}

/* Only T */

body:not(.has-pan-support).has-tilt-support:not(.has-zoom-support) #ptz-panel-container {
  height: 96px;
  width: 48px;
}

body:not(.has-pan-support).has-tilt-support:not(.has-zoom-support) #tilt-up {
  top: 0;
}

body:not(.has-pan-support).has-tilt-support:not(.has-zoom-support) #tilt-down {
  bottom: 0;
}

/* P, T */

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #ptz-panel-container {
  height: 144px;
  width: 144px;
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #pan-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #pan-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #tilt-up {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #tilt-down {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* P, Z */

body.has-pan-support:not(.has-tilt-support).has-zoom-support #ptz-panel-container {
  height: 48px;
  width: 192px;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #pan-left {
  left: 0;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #pan-right {
  left: 75%;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #zoom-in {
  left: 50%;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #zoom-out {
  left: 25%;
}

/* T, Z */

body:not(.has-pan-support).has-tilt-support.has-zoom-support #ptz-panel-container {
  height: 144px;
  width: 96px;
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #tilt-up {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #tilt-down {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #zoom-out {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #zoom-in {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* P, T, Z */

body.has-pan-support.has-tilt-support.has-zoom-support #ptz-panel-container {
  border-radius: 20px;
  height: 192px;
  width: 192px;
}

/* TODO(b/172881094): Polish active visual look of clipped button. */

body.has-pan-support.has-tilt-support.has-zoom-support :is(#tilt-down, #tilt-up, #pan-left, #pan-right) {
  height: 100%;
  width: 100%;
}

body.has-pan-support.has-tilt-support.has-zoom-support :is(#tilt-down, #tilt-up, #pan-left, #pan-right) svg-wrapper {
  left: var(--x);
  top: var(--y);
}

body.has-pan-support.has-tilt-support.has-zoom-support #tilt-down {
  --x: calc(calc(192px - var(--svg-width)) / 2);
  --y: calc(192px - 20px - var(--svg-height));

  clip-path: path('M 0 192 L 192 192 L 123 123 A 38 38 0 0 1 69 123 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support #tilt-up {
  --x: calc(calc(192px - var(--svg-width)) / 2);
  --y: 20px;

  clip-path: path('M 0 0 L 192 0 L 123 69 A 38 38 0 0 0 69 69 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support #pan-left {
  --x: 20px;
  --y: calc(calc(192px - var(--svg-height)) / 2);

  clip-path: path('M 0 0 L 0 192 L 69 123 A 38 38 0 0 1 69 69 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support #pan-right {
  --x: calc(192px - 20px - var(--svg-width));
  --y: calc(calc(192px - var(--svg-height)) / 2);

  clip-path: path('M 192 0 L 192 192 L 123 123 A 38 38 0 0 0 123 69 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support :is(#zoom-in, #zoom-out) {
  --radius: 38px;

  height: calc(var(--radius) * 2);
  width: var(--radius);
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-in {
  border-radius: 0 var(--radius) var(--radius) 0;
  left: 50%;
  top: calc(50% - var(--radius));
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-out {
  border-radius: var(--radius) 0 0 var(--radius);
  left: calc(50% - var(--radius));
  top: calc(50% - var(--radius));
}

/* Divider lines. */

/* TODO(b/184712316): Fix split line other P, T, Z cases. */
body:is(:not(.has-pan-support), :not(.has-tilt-support), :not(.has-zoom-support)) .ptz-divider {
  display: none;
}

.ptz-divider {
  background: var(--divider-color);
  position: absolute;
  width: var(--divider-width);
}

#ptz-divider1 {
  left: 0;
  top: 0;
  transform: rotate(-45deg);
  transform-origin: left top;
}

#ptz-divider2 {
  right: 0;
  top: 0;
  transform: rotate(45deg);
  transform-origin: right top;
}

#ptz-divider3 {
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
  transform-origin: left bottom;
}

#ptz-divider4 {
  bottom: 0;
  right: 0;
  transform: rotate(-45deg);
  transform-origin: right bottom;
}

#ptz-zoom-divider {
  height: 16px;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
}

body.has-pan-support.has-tilt-support.has-zoom-support .ptz-divider {
  height: 98px;
}

body.has-pan-support.has-tilt-support.has-zoom-support :is(#zoom-in, #zoom-out) {
  border: var(--divider-width) solid var(--divider-color);
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-in {
  border-left-width: 0;  /* csschecker-disable-line left-right */
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-out {
  border-right-width: 0;  /* csschecker-disable-line left-right */
}
chromium/ash/webui/camera_app_ui/resources/css/ptz_panel.css
