Source/WebInspectorUI/UserInterface/Views/BezierEditor.css

   1 /*
   2  * Copyright (C) 2015 Apple Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  * 1. Redistributions of source code must retain the above copyright
   8  *    notice, this list of conditions and the following disclaimer.
   9  * 2. Redistributions in binary form must reproduce the above copyright
  10  *    notice, this list of conditions and the following disclaimer in the
  11  *    documentation and/or other materials provided with the distribution.
  12  *
  13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  23  * THE POSSIBILITY OF SUCH DAMAGE.
  24  */
  25
  26 .bezier-editor {
  27     width: 200px;
  28     height: 225px;
  29 }
  30
  31 .bezier-editor > .bezier-preview {
  32     width: calc(100% - 10px);
  33     height: 25px;
  34     margin: 5px 5px 0;
  35     border-bottom: 1px solid lightgrey;
  36 }
  37
  38 .bezier-editor > .bezier-preview > div {
  39     width: 20px;
  40     height: 20px;
  41     background-color: var(--selected-background-color);
  42     border-radius: 50%;
  43 }
  44
  45 .bezier-editor > .bezier-preview-timing {
  46     position: absolute;
  47     top: 34px;
  48     margin-left: 11px;
  49     border-left: 4px solid transparent;
  50     border-right: 4px solid transparent;
  51     border-top: 4px solid black;
  52 }
  53
  54 .bezier-editor > .bezier-preview-timing.animate {
  55     animation: bezierPreview 2s linear 250ms forwards;
  56 }
  57
  58 @keyframes bezierPreview {
  59     from { transform: translate(0, 0); }
  60     to { transform: translate(170px, 0); }
  61 }
  62
  63 .bezier-editor > .bezier-container {
  64     margin: 0 8px;
  65 }
  66
  67 .bezier-editor > .bezier-container .linear-curve {
  68     fill: none;
  69     stroke:lightgrey;
  70     stroke-width: 2;
  71     stroke-linecap: round;
  72 }
  73
  74 .bezier-editor > .bezier-container .bezier-curve {
  75     fill: none;
  76     stroke: black;
  77     stroke-width: 2;
  78     stroke-linecap: round;
  79 }
  80
  81 .bezier-editor > .bezier-container .control-line {
  82     fill: none;
  83     stroke: hsl(210, 100%, 49%);
  84     stroke-width: 2;
  85     stroke-linecap: round;
  86 }
  87
  88 .bezier-editor > .bezier-container .control-handle {
  89     r: 5px;
  90     fill: hsl(210, 100%, 49%);
  91 }
  92
  93 .bezier-editor > .bezier-container .control-handle.selected {
  94     r: 7px;
  95 }