Web Inspector: Dim selected items when docked Inspector window is inactive
[WebKit-https.git] / 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 }