Web Inspector: Dark Mode: use the same CSS variables for dark and light modes
[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: hsl(0, 0%, 70%);
32     -webkit-user-select: text;
33 }
34
35 .spreadsheet-style-declaration-editor .property {
36     padding-right: var(--css-declaration-horizontal-padding);
37     padding-left: calc(var(--css-declaration-horizontal-padding) + 17px);
38 }
39
40 .spreadsheet-style-declaration-editor .property:not(.disabled) .name {
41     color: var(--syntax-highlight-boolean-color);
42 }
43
44 .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
45     color: var(--text-color);
46 }
47
48 .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
49     outline: 1px solid white !important;
50     box-shadow: 0 1px 2px 1px hsla(0, 0%, 0%, 0.6);
51     margin-bottom: 0 !important;
52     padding-bottom: 0 !important;
53 }
54
55 .spreadsheet-style-declaration-editor .value.editing {
56     display: inline-block;
57     position: relative;
58     z-index: 1;
59     max-width: 100%;
60 }
61
62 .spreadsheet-style-declaration-editor.no-properties {
63     display: none;
64 }
65
66 .spreadsheet-style-declaration-editor .property-toggle {
67     visibility: hidden;
68     position: absolute;
69     left: calc(var(--css-declaration-horizontal-padding) + 1px);
70     width: 10px;
71     height: 10px;
72     margin: 0;
73 }
74
75 .spreadsheet-css-declaration:matches(:hover, :focus) .property:not(:matches(.invalid-name, .invalid-value)) .property-toggle,
76 .spreadsheet-style-declaration-editor .property.disabled .property-toggle {
77     visibility: visible;
78 }
79
80 .spreadsheet-style-declaration-editor .property.disabled {
81     color: var(--syntax-highlight-comment-color) !important;
82 }
83
84 .spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
85     text-decoration: line-through;
86     -webkit-text-decoration-color: hsla(0, 0%, var(--foreground-lightness), 0.6);
87 }
88
89 .spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) .content > * {
90     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
91 }
92
93 .spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .content .value {
94     text-decoration: line-through;
95     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
96 }
97
98 .spreadsheet-style-declaration-editor .property.has-warning {
99     background-color: hsl(51, 87%, 93%);
100 }
101
102 .spreadsheet-style-declaration-editor .property .warning {
103     display: none;
104 }
105
106 .spreadsheet-style-declaration-editor .property.has-warning .warning {
107     position: absolute;
108     right: 0;
109     display: inline-block;
110     width: calc(20px + var(--css-declaration-horizontal-padding));
111     height: 13px;
112
113     background-image: url(../Images/Warning.svg);
114     background-color: hsl(43, 97%, 84%);
115     background-repeat: no-repeat;
116     background-size: 9px;
117     background-position-y: center;
118     background-position-x: 7px;
119
120     -webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
121 }
122
123 .spreadsheet-style-declaration-editor .property:matches(.implicit, .not-inherited) .content > * {
124     opacity: 0.5;
125 }
126
127 .spreadsheet-style-declaration-editor .completion-hint {
128     color: hsl(0, 0%, 50%) !important;
129 }
130
131 .spreadsheet-style-declaration-editor .property.highlighted {
132     animation: style-property-highlight 2s;
133 }
134
135 @keyframes style-property-highlight {
136     from { background-color: yellow; }
137 }
138
139 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-link {
140     color: var(--syntax-highlight-link-color);
141 }
142
143 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-string {
144     color: var(--syntax-highlight-string-color);
145 }
146
147 .meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
148     color: blue !important;
149     text-decoration: underline !important;
150     cursor: pointer !important;
151     -webkit-text-stroke-width: 0 !important;
152 }
153
154 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment {
155     color: var(--syntax-highlight-comment-color);
156 }
157
158 @media (prefers-dark-interface) {
159     .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
160         outline-color: var(--background-color-secondary) !important;
161     }
162
163     .spreadsheet-style-declaration-editor .property.has-warning {
164         background-color: hsl(2, 50%, 25%);
165     }
166
167     .spreadsheet-style-declaration-editor .property.has-warning .warning {
168         filter: invert(100%) hue-rotate(150deg);
169     }
170 }