| /* Copyright 2018 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. */ |
| |
| body { |
| overflow: hidden; |
| } |
| |
| .mouse-navigation { |
| outline: none; |
| } |
| |
| #edit-link-dialog { |
| background-color: #fff; |
| border: none; |
| border-radius: 8px; |
| bottom: 0; |
| box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), 0.3), |
| 0 4px 8px 3px rgba(var(--GG800-rgb), 0.15); |
| font-family: 'Roboto', arial, sans-serif; |
| margin: auto; |
| min-width: 320px; |
| padding: 16px; |
| top: 0; |
| z-index: 10000; |
| } |
| |
| #edit-link-dialog::backdrop { |
| background: transparent; |
| } |
| |
| #edit-link-dialog > div { |
| width: 100%; |
| } |
| |
| #dialog-title { |
| color: rgb(var(--GG900-rgb)); |
| font-family: 'Roboto', arial, sans-serif; |
| font-size: 15px; |
| line-height: 24px; |
| margin-bottom: 16px; |
| } |
| |
| .field-container { |
| margin-bottom: 16px; |
| } |
| |
| .field-title { |
| color: rgb(var(--GG700-rgb)); |
| font-size: 10px; |
| font-weight: 500; |
| margin-bottom: 4px; |
| } |
| |
| .input-container { |
| position: relative; |
| } |
| |
| input { |
| background-color: rgb(var(--GG100-rgb)); |
| border: none; |
| border-radius: 4px; |
| caret-color: rgb(var(--GB600-rgb)); |
| color: rgb(var(--GG900-rgb)); |
| font-family: 'Roboto', arial, sans-serif; |
| font-size: 13px; |
| height: 32px; |
| line-height: 24px; |
| outline: none; |
| padding-inline-end: 8px; |
| padding-inline-start: 8px; |
| width: calc(100% - 16px); |
| } |
| |
| html[dir=rtl] input { |
| text-align: right; /* csschecker-disable-line left-right */ |
| } |
| |
| input::placeholder { |
| color: rgba(var(--GG900-rgb), 0.38); |
| } |
| |
| .underline { |
| border-bottom: 2px solid rgb(var(--GB600-rgb)); |
| bottom: 0; |
| box-sizing: border-box; |
| left: 0; |
| margin: auto; |
| opacity: 0; |
| position: absolute; |
| right: 0; |
| transition: opacity 120ms ease-out, width 0ms linear 180ms; |
| width: 0; |
| } |
| |
| input:focus + .underline { |
| opacity: 1; |
| transition: width 180ms ease-out, opacity 120ms ease-in; |
| width: 100%; |
| } |
| |
| .field-title.focused { |
| color: rgb(var(--GB600-rgb)); |
| } |
| |
| .error-msg { |
| color: rgb(var(--GR600-rgb)); |
| display: none; |
| font-size: 10px; |
| font-weight: 400; |
| margin-top: 6px; |
| } |
| |
| .invalid label { |
| color: rgb(var(--GR600-rgb)); |
| } |
| |
| .invalid .error-msg { |
| display: block; |
| } |
| |
| .invalid .underline { |
| border-color: rgb(var(--GR600-rgb)); |
| opacity: 1; |
| transition: width 180ms ease-out, opacity 120ms ease-in; |
| width: 100%; |
| } |
| |
| .buttons-container { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 24px; |
| } |
| |
| .buttons-container span + span { |
| margin-inline-start: 16px; |
| } |
| |
| button { |
| border: none; |
| border-radius: 4px; |
| font-family: 'Roboto', arial, sans-serif; |
| font-size: 12px; |
| font-weight: 500; |
| height: 32px; |
| padding: 0 16px; |
| position: relative; |
| transition-duration: 200ms; |
| transition-property: background-color, color, box-shadow, border; |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| button:disabled { |
| transition: none; |
| } |
| |
| button.primary { |
| background-color: rgb(var(--GB600-rgb)); |
| color: white; |
| } |
| |
| button.primary:disabled { |
| background-color: rgb(var(--GG100-rgb)); |
| color: rgb(var(--GG600-rgb)); |
| } |
| |
| button.primary:hover:not(:disabled) { |
| background-color: rgb(41, 123, 231); |
| box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3), |
| 0 1px 3px 1px rgba(var(--GB500-rgb), 0.15); |
| } |
| |
| button.primary:active:not(:disabled) { |
| box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3), |
| 0 3px 6px 2px rgba(var(--GB500-rgb), 0.15); |
| } |
| |
| button.secondary { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| color: rgb(var(--GB600-rgb)); |
| } |
| |
| button.secondary:disabled { |
| border-color: rgb(var(--GG100-rgb)); |
| color: rgb(var(--GG600-rgb)); |
| } |
| |
| button.secondary:hover:not(:disabled) { |
| background-color: rgba(var(--GB500-rgb), 0.04); |
| border-color: rgb(var(--GB100-rgb)); |
| } |
| |
| button.secondary:active:not(:disabled) { |
| background-color: white; |
| border-color: white; |
| box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), 0.3), |
| 0 3px 6px 2px rgba(var(--GG800-rgb), 0.15); |
| } |
| |
| #cancel { |
| margin-inline-end: 8px; |
| } |