| /* |
| * Copyright 2016 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. |
| */ |
| |
| :host { |
| user-select: none; |
| padding: 4px 12px 12px; |
| border: 1px solid transparent; |
| } |
| |
| .shadow-editor-field { |
| height: 24px; |
| margin-top: 8px; |
| font-size: 12px; |
| flex-shrink: 0; |
| } |
| |
| .shadow-editor-field:last-of-type { |
| margin-bottom: 8px; |
| } |
| |
| .shadow-editor-flex-field { |
| display: flex; |
| align-items: center; |
| flex-direction: row; |
| } |
| |
| .shadow-editor-field.shadow-editor-blur-field { |
| margin-top: 40px; |
| } |
| |
| .shadow-editor-2D-slider { |
| position: absolute; |
| height: 88px; |
| width: 88px; |
| border: 1px solid var(--divider-line); |
| border-radius: 2px; |
| } |
| |
| .shadow-editor-label { |
| display: inline-block; |
| width: 52px; |
| height: 24px; |
| line-height: 24px; |
| margin-right: 8px; |
| text-align: right; |
| } |
| |
| .shadow-editor-button-left, |
| .shadow-editor-button-right { |
| width: 74px; |
| height: 24px; |
| padding: 3px 7px; |
| line-height: 16px; |
| border: 1px solid var(--divider-line); |
| color: var(--color-text-primary); |
| background-color: var(--color-background); |
| text-align: center; |
| font-weight: 500; |
| } |
| |
| .shadow-editor-button-left { |
| border-radius: 2px 0 0 2px; |
| } |
| |
| .shadow-editor-button-right { |
| border-radius: 0 2px 2px 0; |
| border-left-width: 0; |
| } |
| |
| .shadow-editor-button-left:hover, |
| .shadow-editor-button-right:hover { |
| box-shadow: 0 1px 1px var(--color-background-elevation-1); |
| } |
| |
| .shadow-editor-button-left:focus, |
| .shadow-editor-button-right:focus { |
| background-color: var(--color-background-elevation-1); |
| } |
| |
| .shadow-editor-button-left.enabled, |
| .shadow-editor-button-right.enabled { |
| --override-button-text-color: #fff; |
| |
| background-color: var(--color-primary); |
| color: var(--override-button-text-color); |
| } |
| |
| .shadow-editor-button-left.enabled:focus, |
| .shadow-editor-button-right.enabled:focus { |
| background-color: var(--color-primary-variant); |
| } |
| |
| .shadow-editor-text-input { |
| width: 52px; |
| margin-right: 8px; |
| text-align: right; |
| box-shadow: var(--legacy-focus-ring-inactive-shadow); |
| } |
| |
| @media (forced-colors: active) { |
| .shadow-editor-button-left:hover, |
| .shadow-editor-button-left.enabled:focus, |
| .shadow-editor-button-right:hover .shadow-editor-button-left.enabled, |
| .shadow-editor-button-right.enabled, |
| .shadow-editor-button-right.enabled:focus { |
| forced-color-adjust: none; |
| background-color: Highlight; |
| color: HighlightText; |
| } |
| } |