0e3454ccc2ef4eb4eed0e135b5ba4bfa8690e4d9
[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     font-family: Menlo, monospace;
30     font-size: 11px;
31     color: var(--text-color-tertiary);
32     -webkit-user-select: text;
33
34     --background-color-selected: var(--selected-text-background-color);
35     --border-color-selected: var(--selected-background-color);
36 }
37
38 .spreadsheet-style-declaration-editor .property {
39     padding-right: var(--css-declaration-horizontal-padding);
40     padding-left: calc(var(--css-declaration-horizontal-padding) + 17px);
41     border-right: 2px solid transparent;
42     border-left: 1px solid transparent;
43     outline: none;
44 }
45
46 .spreadsheet-style-declaration-editor .property:not(.disabled) .name {
47     color: var(--syntax-highlight-boolean-color);
48 }
49
50 .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
51     color: var(--text-color);
52 }
53
54 .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing) {
55     outline: none;
56 }
57
58 .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
59     outline: 1px solid white !important;
60     box-shadow: 0 1px 2px 1px hsla(0, 0%, 0%, 0.6);
61     margin-bottom: 0 !important;
62     padding-bottom: 0 !important;
63 }
64
65 .spreadsheet-style-declaration-editor .value.editing {
66     display: inline-block;
67     position: relative;
68     z-index: 1;
69     max-width: 100%;
70 }
71
72 .spreadsheet-style-declaration-editor.no-properties {
73     display: none;
74 }
75
76 .spreadsheet-style-declaration-editor .property-toggle {
77     visibility: hidden;
78     position: absolute;
79     left: calc(var(--css-declaration-horizontal-padding) + 1px);
80     width: 10px;
81     height: 10px;
82     margin: 0;
83 }
84
85 .spreadsheet-css-declaration:matches(:hover, :focus) .property:not(:matches(.invalid-name, .invalid-value)) .property-toggle,
86 .spreadsheet-style-declaration-editor .property.disabled .property-toggle {
87     visibility: visible;
88 }
89
90 .spreadsheet-style-declaration-editor .property.disabled {
91     color: var(--syntax-highlight-comment-color) !important;
92 }
93
94 .spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
95     text-decoration: line-through;
96     -webkit-text-decoration-color: hsla(0, 0%, var(--foreground-lightness), 0.6);
97 }
98
99 .spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) .content > * {
100     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
101 }
102
103 .spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .content .value {
104     text-decoration: line-through;
105     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
106 }
107
108 .spreadsheet-style-declaration-editor .property.has-warning {
109     background-color: var(--warning-background-color-secondary);
110 }
111
112 .spreadsheet-style-declaration-editor .property .warning {
113     display: none;
114 }
115
116 .spreadsheet-style-declaration-editor .property.has-warning .warning {
117     position: absolute;
118     right: 0;
119     display: inline-block;
120     width: calc(20px + var(--css-declaration-horizontal-padding));
121     height: 13px;
122
123     background-image: url(../Images/Warning.svg);
124     background-color: var(--warning-background-color);
125     background-repeat: no-repeat;
126     background-size: 9px;
127     background-position-y: center;
128     background-position-x: 7px;
129
130     -webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
131 }
132
133 .spreadsheet-style-declaration-editor .property.modified {
134     border-right-color: hsl(120, 100%, 40%);
135 }
136
137 .spreadsheet-style-declaration-editor .property.modified:not(.selected) {
138     background-color: hsl(90, 100%, 93%);
139 }
140
141 .spreadsheet-style-declaration-editor .property.selected {
142     background-color: var(--background-color-selected);
143 }
144
145 body:matches(.window-docked-inactive, .window-inactive) .spreadsheet-style-declaration-editor .property.selected {
146     background-color: var(--selected-background-color-unfocused);
147 }
148
149 .spreadsheet-style-declaration-editor .property.selected:focus {
150     border-left-color: var(--border-color-selected);
151 }
152
153 .spreadsheet-style-declaration-editor .property:matches(.implicit, .not-inherited) .content > * {
154     opacity: 0.5;
155 }
156
157 .spreadsheet-style-declaration-editor .completion-hint {
158     color: hsl(0, 0%, 50%) !important;
159 }
160
161 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-link {
162     color: var(--syntax-highlight-link-color);
163 }
164
165 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-string {
166     color: var(--syntax-highlight-string-color);
167 }
168
169 .spreadsheet-style-declaration-editor .property .select-effective-property {
170     display: none;
171     height: 10px;
172     line-height: 10px;
173     vertical-align: middle;
174     color: var(--text-color-secondary);
175     cursor: pointer;
176 }
177
178 .spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property,
179 .spreadsheet-style-declaration-editor .property.overridden:focus-within .select-effective-property {
180     display: inline-block;
181 }
182
183 .spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property::after,
184 .spreadsheet-style-declaration-editor .property.overridden:focus-within .select-effective-property::after {
185     content: attr(data-value);
186     display: inline-block;
187     position: relative;
188     left: 16px;
189     white-space: nowrap;
190 }
191
192 .meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
193     color: var(--syntax-highlight-link-color) !important;
194     text-decoration: underline !important;
195     cursor: pointer !important;
196     -webkit-text-stroke-width: 0 !important;
197 }
198
199 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment {
200     color: var(--syntax-highlight-comment-color);
201 }
202
203 .spreadsheet-style-declaration-editor.debug-style-locked::after {
204     content: "";
205     position: absolute;
206     top: 0;
207     bottom: 0;
208     right: 0;
209     width: 2px;
210     background-color: red;
211     pointer-events: none;
212 }
213
214 @media (prefers-color-scheme: dark) {
215     .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
216         outline-color: var(--background-color-secondary) !important;
217     }
218
219     .spreadsheet-style-declaration-editor .property.modified:not(.selected) {
220         background-color: hsl(106, 13%, 25%);
221     }
222
223     .spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property::after,
224     .spreadsheet-style-declaration-editor .property.overridden:focus-within .select-effective-property::after {
225         /* .select-effective-property has inverted colors. Invert the pseudo-element again to restore the original text color. */
226         filter: invert();
227     }
228 }