d54e71a2197a09b8dce35bd879b80587dd10066c
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SpreadsheetCSSStyleDeclarationSection.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-css-declaration {
27     margin: 0;
28     padding: 0 0 var(--css-declaration-vertical-padding);
29     font-family: Menlo, monospace;
30     font-size: 11px;
31     color: hsl(0, 0%, 70%);
32     background: white;
33     border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
34     -webkit-user-select: text;
35 }
36
37 .spreadsheet-css-declaration :matches(.header, .header-media) {
38     padding: 0 var(--css-declaration-horizontal-padding);
39 }
40
41 .spreadsheet-css-declaration :matches(.header, .header-media):first-child {
42     padding-top: var(--css-declaration-vertical-padding);
43 }
44
45 .spreadsheet-css-declaration .header.editing-selector .origin {
46     position: absolute;
47     right: var(--css-declaration-horizontal-padding);
48 }
49
50 .spreadsheet-css-declaration .media-label {
51     color: black;
52 }
53
54 .spreadsheet-css-declaration .origin {
55     float: right;
56     max-width: 100%;
57     font: 11px sans-serif;
58     color: hsl(0, 0%, 50%);
59     overflow: hidden;
60     text-overflow: ellipsis;
61     white-space: nowrap;
62 }
63
64 .spreadsheet-css-declaration.locked .origin::after {
65     display: inline-block;
66     position: relative;
67     top: 1px;
68     width: 8px;
69     height: 10px;
70     margin-left: 4px;
71     content: url(../Images/Locked.svg);
72 }
73
74 .spreadsheet-css-declaration .origin .go-to-link {
75     color: hsl(0, 0%, 50%);
76 }
77
78 .spreadsheet-css-declaration .origin .go-to-link:hover {
79     color: hsl(0, 0%, 33%);
80 }
81
82 .spreadsheet-css-declaration .styles-source {
83     float: right;
84 }
85
86 .spreadsheet-css-declaration .selector {
87     position: relative;
88     z-index: 1;
89 }
90
91 .spreadsheet-css-declaration .selector.style-attribute {
92     font: 12px sans-serif;
93     color: hsl(0, 0%, 30%);
94     -webkit-user-modify: read-only;
95 }
96
97 .spreadsheet-css-declaration .selector > span {
98     color: hsl(0, 0%, 50%);
99 }
100
101 .spreadsheet-css-declaration .selector:focus,
102 .spreadsheet-css-declaration .selector > .matched {
103     color: black;
104 }
105
106 .spreadsheet-css-declaration.locked {
107     background-color: hsl(0, 0%, 97%)
108 }
109
110 .spreadsheet-css-declaration .locked-icon {
111     width: 8px;
112     height: 10px;
113     content: url(../Images/Locked.svg);
114 }
115
116 .spreadsheet-css-declaration .selector.spreadsheet-selector-field {
117     outline-offset: -3px;
118 }
119
120 .spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing {
121     display: inline-block;
122     box-shadow: hsla(0, 0%, 0%, 0.5) 0 1px 3px;
123     outline: none !important;
124 }
125
126 .spreadsheet-css-declaration .close-brace {
127     display: inline-block;
128     padding-left: var(--css-declaration-horizontal-padding);
129 }
130
131 @media (prefers-dark-interface) {
132     .spreadsheet-css-declaration {
133         background: var(--background-color-code);
134         color: var(--text-color-tertiary);
135         color: hsl(0, 0%, 30%);
136         border-bottom-color: var(--text-color-quaternary);
137     }
138
139     .spreadsheet-css-declaration.locked {
140         background: var(--background-color);
141     }
142
143     .spreadsheet-css-declaration .selector.style-attribute {
144         color: var(--text-color-secondary);
145     }
146
147     .spreadsheet-css-declaration .selector:focus,
148     .spreadsheet-css-declaration .selector > .matched {
149         color: var(--text-color);
150     }
151
152     .spreadsheet-css-declaration.locked .origin::after {
153         filter: var(--filter-invert);
154     }
155
156     .spreadsheet-css-declaration .origin .go-to-link,
157     .spreadsheet-css-declaration .origin .go-to-link:hover {
158         color: var(--text-color-secondary);
159     }
160
161     .spreadsheet-css-declaration .media-label {
162         color: var(--text-color);
163     }
164 }