Web Inspector: [PARITY] Styles Redesign: clicking on the go-to arrow in Computed...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SpreadsheetCSSStyleDeclarationEditor.css
1 /*
2  * Copyright (C) 2017 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 .spreadsheet-style-declaration-editor {
27     position: relative;
28     clear: both;
29 }
30
31 .spreadsheet-style-declaration-editor .property {
32     padding-left: 17px;
33 }
34
35 .spreadsheet-style-declaration-editor .name {
36     color: var(--syntax-highlight-boolean-color);
37 }
38
39 .spreadsheet-style-declaration-editor .value {
40     color: black;
41 }
42
43 .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
44     outline: 1px solid white !important;
45     box-shadow: 0 1px 2px 1px hsla(0, 0%, 0%, 0.6);
46     margin-bottom: 0 !important;
47     padding-bottom: 0 !important;
48 }
49
50 .spreadsheet-style-declaration-editor .value.editing {
51     display: inline-block;
52     margin-right: 3px;
53 }
54
55 .spreadsheet-style-declaration-editor.no-properties {
56     display: none;
57 }
58
59 .spreadsheet-style-declaration-editor .property-toggle {
60     visibility: hidden;
61     position: absolute;
62     left: 1px;
63     width: 10px;
64     height: 10px;
65     margin: 0;
66 }
67
68 .spreadsheet-css-declaration:matches(:hover, :focus) .property-toggle,
69 .spreadsheet-style-declaration-editor .property.disabled .property-toggle {
70     visibility: visible;
71 }
72
73 .spreadsheet-style-declaration-editor .property.disabled,
74 .spreadsheet-style-declaration-editor .property.disabled > * {
75     color: var(--syntax-highlight-comment-color) !important;
76 }
77
78 .spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .overridden):not(.disabled) {
79     text-decoration: line-through;
80     -webkit-text-decoration-color: hsla(0, 0%, 0%, 0.6);
81 }
82
83 .spreadsheet-style-declaration-editor .property.invalid:not(.disabled) {
84     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.6);
85 }
86
87 .spreadsheet-style-declaration-editor .property.not-inherited {
88     opacity: 0.5;
89 }
90
91 .spreadsheet-style-declaration-editor .completion-hint {
92     color: hsl(0, 0%, 50%) !important;
93 }
94
95 .spreadsheet-style-declaration-editor .property.highlighted {
96     animation: style-property-highlight 2s;
97 }
98
99 @keyframes style-property-highlight {
100     from { background-color: yellow; }
101 }