| /* Copyright 2021 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. */ |
| |
| @property --ripple-start-width { |
| syntax: '<length>'; |
| inherits: false; |
| initial-value: 0; |
| } |
| |
| @property --ripple-start-height { |
| syntax: '<length>'; |
| inherits: false; |
| initial-value: 0; |
| } |
| |
| @property --toast-ref-x { |
| syntax: 'left | right'; |
| inherits: false; |
| initial-value: left; |
| } |
| |
| @property --toast-ref-y { |
| syntax: 'bottom | top'; |
| inherits: false; |
| initial-value: bottom; |
| } |
| |
| @property --toast-element-ref-x { |
| syntax: 'left | right'; |
| inherits: false; |
| initial-value: right; |
| } |
| |
| @property --toast-element-ref-y { |
| syntax: 'bottom | top'; |
| inherits: false; |
| initial-value: top; |
| } |
| |
| @property --toast-offset-x { |
| syntax: '<length>'; |
| inherits: false; |
| initial-value: 0; |
| } |
| |
| @property --toast-offset-y { |
| syntax: '<length>'; |
| inherits: false; |
| initial-value: 0; |
| } |
| |
| #new-feature-toast { |
| align-items: center; |
| background-color: var(--blue-300); |
| border-radius: 20px; |
| display: flex; |
| padding: 12px; |
| position: absolute; |
| white-space: nowrap; |
| } |
| |
| .new-feature-toast-text { |
| color: var(--grey-900); |
| font: normal 400 12px/18px Roboto; |
| } |
| |
| #new-feature-toast::before { |
| content: url(/images/new_feature_toast_icon.svg); |
| display: inline-block; |
| margin-inline: 0 8px; |
| } |
| |
| body.keyboard-navigation #new-feature-toast:focus::after { |
| --focus-ring-size: 5px; |
| |
| border: 2px solid var(--focus-color); |
| border-radius: 24px; |
| 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)); |
| } |
| |
| @keyframes ripple-scale { |
| 0% { |
| transform: scale(0); |
| } |
| 100% { |
| transform: scale(3); |
| } |
| } |
| |
| @keyframes ripple-opacity { |
| 0% { |
| opacity: 1; |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| |
| .ripple { |
| --duration: 2s; |
| |
| background: white; |
| border-radius: var(--border-radius-rounded-with-short-side); |
| opacity: 0; |
| pointer-events: none; |
| position: absolute; |
| transform-origin: center; |
| } |
| |
| .ripple.animate { |
| animation: ripple-scale var(--duration) cubic-bezier(0.4, 0, 0, 1), ripple-opacity var(--duration) cubic-bezier(0, 0, 0.4, 1); |
| } |
| |
| #open-ptz-panel { |
| --ripple-start-height: 17px; |
| --ripple-start-width: 17px; |
| |
| --toast-ref-x: left; |
| --toast-element-ref-x: right; |
| --toast-offset-x: 19px; |
| |
| --toast-ref-y: top; |
| --toast-element-ref-y: top; |
| --toast-offset-y: 0; |
| } |
| |
| #modes-group .mode-item { |
| --ripple-start-height: 20px; |
| --ripple-start-width: 54px; |
| |
| --toast-ref-x: right; |
| --toast-element-ref-x: right; |
| --toast-offset-x: 0; |
| |
| --toast-ref-y: bottom; |
| --toast-element-ref-y: top; |
| --toast-offset-y: -23px; |
| } |