| /* Copyright 2017 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 { |
| --bubble-background: white; |
| --bubble-border-color: gray; |
| --arrow-size: 8px; |
| } |
| |
| #container { |
| box-sizing: border-box; |
| display: inline-block; |
| font-family: system-ui; |
| max-width: 50%; |
| opacity: 0; |
| position: absolute; |
| will-change: opacity, transform; |
| word-break: break-word; |
| } |
| |
| #container.shown-initially { |
| /* If scaleY is smaller than 0.2, an assertion failure occurs in Skia. */ |
| transform: scale(0.96, 1); |
| } |
| |
| #container.shown-fully { |
| opacity: 1.0; |
| transform: scale(1, 1); |
| transition: opacity 466.67ms cubic-bezier(0.4, 0, 0.2, 1), transform 1166.67ms cubic-bezier(0.2, 0, 0, 1); |
| } |
| |
| #container.hiding { |
| opacity: 0; |
| /* See ValidationMessageClientImpl::HideValidationMessage too */ |
| transition: opacity 133.33ms cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| #container.shown-initially -webkit-any(#icon, #main-message, #sub-message) { |
| opacity: 0; |
| } |
| |
| #container.shown-fully -webkit-any(#icon, #main-message, #sub-message) { |
| opacity: 1; |
| transition: opacity 700ms cubic-bezier(0.3, 0, 0.1, 1); |
| } |
| |
| #container.hiding -webkit-any(#icon, #main-message, #sub-message) { |
| opacity: 0; |
| transition: opacity 116.67ms cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| #bubble-body { |
| background: var(--bubble-background); |
| border-radius: 4px; |
| border: 1px solid var(--bubble-border-color); |
| box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); |
| display: grid; |
| padding: 8px; |
| } |
| |
| #spacer-top { |
| display: block; |
| height: var(--arrow-size); |
| } |
| |
| #outer-arrow-top { |
| border-color: transparent transparent var(--bubble-border-color) transparent; |
| border-style: solid; |
| border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size); |
| display: block; |
| left: 10px; |
| margin-top: 0px; |
| position: absolute; |
| width: 0px; |
| } |
| |
| #inner-arrow-top { |
| border-color: transparent transparent var(--bubble-background) transparent; |
| border-style: solid; |
| border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size); |
| display: block; |
| left: 10px; |
| margin-top: 1px; |
| position: absolute; |
| width: 0px; |
| } |
| |
| .bottom-arrow #outer-arrow-top, .bottom-arrow #inner-arrow-top, .bottom-arrow #spacer-top { |
| display: none; |
| } |
| |
| #outer-arrow-bottom, #inner-arrow-bottom, #spacer-bottom { |
| display: none; |
| } |
| |
| .bottom-arrow #spacer-bottom { |
| display: block; |
| height: var(--arrow-size); |
| } |
| |
| .bottom-arrow #outer-arrow-bottom { |
| border-color: var(--bubble-border-color) transparent transparent transparent; |
| border-style: solid; |
| border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); |
| display: block; |
| left: 10px; |
| margin-top: 0px; |
| position: absolute; |
| width: 0px; |
| } |
| |
| .bottom-arrow #inner-arrow-bottom { |
| border-color: var(--bubble-background) transparent transparent transparent; |
| border-style: solid; |
| border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); |
| display: block; |
| left: 10px; |
| margin-top: -1px; |
| position: absolute; |
| width: 0px; |
| } |
| |
| #icon { |
| grid-row: 1 / 3; |
| grid-column: 1; |
| margin-inline-end: 8px; |
| } |
| |
| #main-message { |
| font-size: 14px; |
| grid-row: 1; |
| grid-column: 2; |
| margin-top: 3px; |
| margin-bottom: 4px; |
| white-space: pre-line; |
| } |
| |
| #sub-message { |
| color: #444; |
| font-size: 13px; |
| grid-row: 2; |
| grid-column: 2; |
| } |
| |
| body { |
| margin: 0; |
| overflow: hidden; |
| } |