| /* |
| * Copyright (c) 2015 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 { |
| width: 270px; |
| height: 350px; |
| user-select: none; |
| padding: 16px; |
| overflow: hidden; |
| } |
| |
| .bezier-preset-selected > svg { |
| background-color: var(--selection-bg-color); |
| } |
| |
| .bezier-preset { |
| width: 50px; |
| height: 50px; |
| padding: 5px; |
| margin: auto; |
| background-color: #f5f5f5; |
| border-radius: 3px; |
| } |
| |
| .bezier-preset line.bezier-control-line { |
| stroke: #666; |
| stroke-width: 1; |
| stroke-linecap: round; |
| fill: none; |
| } |
| |
| .bezier-preset circle.bezier-control-circle { |
| fill: #666; |
| } |
| |
| .bezier-preset path.bezier-path { |
| stroke: black; |
| stroke-width: 2; |
| stroke-linecap: round; |
| fill: none; |
| } |
| |
| .bezier-preset-selected path.bezier-path, .bezier-preset-selected line.bezier-control-line { |
| stroke: white; |
| } |
| |
| .bezier-preset-selected circle.bezier-control-circle { |
| fill: white; |
| } |
| |
| .bezier-curve line.linear-line { |
| stroke: rgb(238, 238, 238); |
| stroke-width: 2; |
| stroke-linecap: round; |
| fill: none; |
| } |
| |
| :host-context(.-theme-with-dark-background) .bezier-curve line.linear-line { |
| stroke: rgb(138, 138, 138); |
| } |
| |
| .bezier-curve line.bezier-control-line { |
| stroke: #9C27B0; |
| stroke-width: 2; |
| stroke-linecap: round; |
| fill: none; |
| opacity: 0.6; |
| } |
| |
| .bezier-curve circle.bezier-control-circle { |
| fill: #9C27B0; |
| cursor: pointer; |
| } |
| |
| .bezier-curve path.bezier-path { |
| stroke: black; |
| stroke-width: 3; |
| stroke-linecap: round; |
| fill: none; |
| } |
| |
| .bezier-preview-container { |
| position: relative; |
| background-color: white; |
| overflow: hidden; |
| border-radius: 20px; |
| width: 200%; |
| height: 20px; |
| z-index: 2; |
| flex-shrink: 0; |
| opacity: 0; |
| } |
| |
| .bezier-preview-animation { |
| background-color: #9C27B0; |
| width: 20px; |
| height: 20px; |
| border-radius: 20px; |
| position: absolute; |
| } |
| |
| .bezier-preview-onion { |
| margin-top: -20px; |
| position: relative; |
| z-index: 1; |
| } |
| |
| .bezier-preview-onion > .bezier-preview-animation { |
| opacity: 0.1; |
| } |
| |
| svg.bezier-preset-modify { |
| background-color: #f5f5f5; |
| border-radius: 35px; |
| display: inline-block; |
| visibility: hidden; |
| transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); |
| cursor: pointer; |
| position: absolute; |
| } |
| |
| svg.bezier-preset-modify:hover, .bezier-preset:hover { |
| background-color: #999; |
| } |
| |
| .bezier-preset-selected .bezier-preset:hover { |
| background-color: var(--selection-bg-color); |
| } |
| |
| .bezier-preset-modify path { |
| stroke-width: 2; |
| stroke: black; |
| fill: none; |
| } |
| |
| .bezier-preset-selected .bezier-preset-modify { |
| opacity: 1; |
| } |
| |
| .bezier-preset-category { |
| width: 50px; |
| margin: 20px 0; |
| cursor: pointer; |
| transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| span.bezier-display-value { |
| width: 100%; |
| user-select: text; |
| display: block; |
| text-align: center; |
| line-height: 20px; |
| height: 20px; |
| cursor: text; |
| white-space: nowrap !important; |
| } |
| |
| .bezier-container { |
| display: flex; |
| margin-top: 38px; |
| } |
| |
| svg.bezier-curve { |
| margin-left: 32px; |
| margin-top: -8px; |
| } |
| |
| svg.bezier-preset-modify.bezier-preset-plus { |
| right: 0; |
| } |
| |
| .bezier-header { |
| margin-top: 16px; |
| } |
| |
| svg.bezier-preset-modify:active { |
| transform: scale(1.1); |
| background-color: var(--selection-bg-color); |
| } |
| |
| .bezier-preset-category:active { |
| transform: scale(1.05); |
| } |
| |
| .bezier-header-active > svg.bezier-preset-modify { |
| visibility: visible; |
| } |
| |
| .bezier-preset-modify:active path { |
| stroke: white; |
| } |