e552ae9fb9ec3f86d43a3e2f8292c0ad9563b280
[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-name, .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-name:not(.disabled) {
84     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
85 }
86
87 .spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value {
88     text-decoration: line-through;
89     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
90 }
91
92 .spreadsheet-style-declaration-editor .property.not-inherited {
93     opacity: 0.5;
94 }
95
96 .spreadsheet-style-declaration-editor .completion-hint {
97     color: hsl(0, 0%, 50%) !important;
98 }
99
100 .spreadsheet-style-declaration-editor .property.highlighted {
101     animation: style-property-highlight 2s;
102 }
103
104 @keyframes style-property-highlight {
105     from { background-color: yellow; }
106 }
107
108 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-link {
109     color: var(--syntax-highlight-link-color);
110 }
111
112 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-string {
113     color: var(--syntax-highlight-string-color);
114 }
115
116 .meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
117     color: blue !important;
118     text-decoration: underline !important;
119     cursor: pointer !important;
120     -webkit-text-stroke-width: 0 !important;
121 }
122
123 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment {
124     color: var(--syntax-highlight-comment-color);
125 }