OLD | NEW |
1 /* | 1 /** |
2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright 2017 The Chromium Authors. All rights reserved. |
3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * | 4 * found in the LICENSE file. |
5 * Redistribution and use in source and binary forms, with or without | |
6 * modification, are permitted provided that the following conditions | |
7 * are met: | |
8 * | |
9 * 1. Redistributions of source code must retain the above copyright | |
10 * notice, this list of conditions and the following disclaimer. | |
11 * 2. Redistributions in binary form must reproduce the above copyright | |
12 * notice, this list of conditions and the following disclaimer in the | |
13 * documentation and/or other materials provided with the distribution. | |
14 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of | |
15 * its contributors may be used to endorse or promote products derived | |
16 * from this software without specific prior written permission. | |
17 * | |
18 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY | |
19 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED | |
20 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | |
21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY | |
22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES | |
23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | |
24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND | |
25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | |
27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
28 */ | 5 */ |
29 | 6 |
30 #elements-content { | |
31 flex: 1 1; | |
32 overflow: auto; | |
33 padding: 2px 0 0 0; | |
34 } | |
35 | |
36 #elements-content:not(.elements-wrap) > div { | |
37 display: inline-block; | |
38 min-width: 100%; | |
39 } | |
40 | |
41 #elements-content.elements-wrap { | |
42 overflow-x: hidden; | |
43 } | |
44 | |
45 .elements-topbar { | |
46 border-bottom: 1px solid hsla(0, 0%, 0%, 0.1); | |
47 flex-shrink: 0; | |
48 } | |
49 | |
50 #elements-crumbs { | |
51 flex: 0 0 19px; | |
52 background-color: white; | |
53 border-top: 1px solid #ccc; | |
54 overflow: hidden; | |
55 height: 19px; | |
56 width: 100%; | |
57 } | |
58 | |
59 .styles-section { | 7 .styles-section { |
60 min-height: 18px; | 8 min-height: 18px; |
61 white-space: nowrap; | 9 white-space: nowrap; |
62 -webkit-user-select: text; | 10 -webkit-user-select: text; |
63 border-bottom: 1px solid #eee; | 11 border-bottom: 1px solid #eee; |
64 position: relative; | 12 position: relative; |
65 overflow: hidden; | 13 overflow: hidden; |
66 } | 14 } |
67 | 15 |
68 .styles-section > div { | 16 .styles-section > div { |
69 padding: 2px 2px 4px 4px; | 17 padding: 2px 2px 4px 4px; |
70 } | 18 } |
71 | 19 |
72 .styles-section:last-child { | 20 .styles-section:last-child { |
73 border-bottom: none; | 21 border-bottom: none; |
74 } | 22 } |
75 | 23 |
76 .styles-pane .sidebar-separator { | 24 .styles-pane .sidebar-separator { |
77 border-top: 0 none; | 25 border-top: 0 none; |
78 } | 26 } |
79 | 27 |
80 .style-panes-wrapper { | |
81 overflow: auto; | |
82 } | |
83 | |
84 .style-panes-wrapper > div:not(:first-child) { | |
85 border-top: 1px solid #ccc; | |
86 } | |
87 | |
88 .styles-section.read-only { | 28 .styles-section.read-only { |
89 background-color: #eee; | 29 background-color: #eee; |
90 } | 30 } |
91 | 31 |
92 .styles-filter-engaged, | 32 .styles-filter-engaged, |
93 .styles-section .simple-selector.filter-match { | 33 .styles-section .simple-selector.filter-match { |
94 background-color: rgba(255, 255, 0, 0.5); | 34 background-color: rgba(255, 255, 0, 0.5); |
95 } | 35 } |
96 | 36 |
97 .-theme-with-dark-background .styles-filter-engaged, | 37 :host-context(.-theme-with-dark-background) .styles-filter-engaged, |
98 .-theme-with-dark-background .styles-section .simple-selector.filter-match { | 38 :host-context(.-theme-with-dark-background) .styles-section .simple-selector.fil
ter-match { |
99 background-color: hsla(133, 100%, 30%, 0.5); | 39 background-color: hsla(133, 100%, 30%, 0.5); |
100 } | 40 } |
101 | 41 |
102 .sidebar-pane-closing-brace { | 42 .sidebar-pane-closing-brace { |
103 clear: both; | 43 clear: both; |
104 } | 44 } |
105 | 45 |
106 .styles-section-title { | 46 .styles-section-title { |
107 background-origin: padding; | 47 background-origin: padding; |
108 background-clip: padding; | 48 background-clip: padding; |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
191 animation-duration: 0.1s; | 131 animation-duration: 0.1s; |
192 animation-direction: normal; | 132 animation-direction: normal; |
193 } | 133 } |
194 | 134 |
195 .styles-sidebar-toolbar-pane-container { | 135 .styles-sidebar-toolbar-pane-container { |
196 position: relative; | 136 position: relative; |
197 overflow: hidden; | 137 overflow: hidden; |
198 flex-shrink: 0; | 138 flex-shrink: 0; |
199 } | 139 } |
200 | 140 |
201 .styles-animations-controls-pane > * { | |
202 margin: 6px 4px; | |
203 } | |
204 | |
205 .styles-animations-controls-pane { | |
206 border-bottom: 1px solid rgb(189, 189, 189); | |
207 height: 60px; | |
208 overflow: hidden; | |
209 background-color: #eee; | |
210 } | |
211 | |
212 .animations-controls { | |
213 width: 100%; | |
214 max-width: 200px; | |
215 display: flex; | |
216 align-items: center; | |
217 } | |
218 | |
219 .animations-controls > .toolbar { | |
220 display: inline-block; | |
221 } | |
222 | |
223 .animations-controls > input { | |
224 flex-grow: 1; | |
225 margin-right: 10px; | |
226 } | |
227 | |
228 .animations-controls > .playback-label { | |
229 width: 35px; | |
230 } | |
231 | |
232 .styles-selector { | 141 .styles-selector { |
233 cursor: text; | 142 cursor: text; |
234 } | 143 } |
235 | 144 |
236 .metrics-and-styles, | |
237 .metrics-and-computed { | |
238 display: flex !important; | |
239 flex-direction: column !important; | |
240 position: relative; | |
241 } | |
242 | |
243 .styles-sidebar-pane-toolbar-container { | 145 .styles-sidebar-pane-toolbar-container { |
244 flex-shrink: 0; | 146 flex-shrink: 0; |
245 overflow: hidden; | 147 overflow: hidden; |
246 } | 148 } |
247 | 149 |
248 .styles-sidebar-pane-toolbar { | 150 .styles-sidebar-pane-toolbar { |
249 border-bottom: 1px solid #eee; | 151 border-bottom: 1px solid #eee; |
250 flex-shrink: 0; | 152 flex-shrink: 0; |
251 } | 153 } |
252 | 154 |
(...skipping 28 matching lines...) Expand all Loading... |
281 line-height: 16px; | 183 line-height: 16px; |
282 } | 184 } |
283 | 185 |
284 .sidebar-separator > span.monospace { | 186 .sidebar-separator > span.monospace { |
285 background: rgb(255, 255, 255); | 187 background: rgb(255, 255, 255); |
286 padding: 0px 3px; | 188 padding: 0px 3px; |
287 border-radius: 2px; | 189 border-radius: 2px; |
288 border: 1px solid #C1C1C1; | 190 border: 1px solid #C1C1C1; |
289 } | 191 } |
290 | 192 |
291 .animation-section-body { | |
292 display: none; | |
293 } | |
294 | |
295 .animation-section-body.expanded { | |
296 display: block; | |
297 } | |
298 | |
299 .animation-section-body .section { | |
300 border-bottom: 1px solid rgb(191, 191, 191); | |
301 } | |
302 | |
303 .animationsHeader { | |
304 padding-top: 23px; | |
305 } | |
306 | |
307 .global-animations-toolbar { | |
308 position: absolute; | |
309 top: 0; | |
310 width: 100%; | |
311 background-color: #eee; | |
312 border-bottom: 1px solid rgb(163, 163, 163); | |
313 padding-left: 10px; | |
314 } | |
315 | |
316 .view > .toolbar { | |
317 border-bottom: 1px solid #eee; | |
318 } | |
319 | |
320 .events-pane .section:not(:first-of-type) { | |
321 border-top: 1px solid rgb(231, 231, 231); | |
322 } | |
323 | |
324 .events-pane .section { | |
325 margin: 0; | |
326 } | |
327 | |
328 .events-pane .toolbar { | |
329 border-bottom: 1px solid #eee; | |
330 } | |
331 | |
332 .properties-widget-section { | |
333 padding: 2px 0px 2px 5px; | |
334 flex: none; | |
335 } | |
336 | |
337 .sidebar-pane-section-toolbar { | 193 .sidebar-pane-section-toolbar { |
338 position: absolute; | 194 position: absolute; |
339 right: 0; | 195 right: 0; |
340 bottom: 0; | 196 bottom: 0; |
341 visibility: hidden; | 197 visibility: hidden; |
342 background-color: rgba(255, 255, 255, 0.9); | 198 background-color: rgba(255, 255, 255, 0.9); |
343 } | 199 } |
344 | 200 |
345 .styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-onl
y):hover .sidebar-pane-section-toolbar { | 201 .styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-onl
y):hover .sidebar-pane-section-toolbar { |
346 visibility: visible; | 202 visibility: visible; |
347 } | 203 } |
348 | |
349 .elements-tree-header { | |
350 height: 24px; | |
351 border-top: 1px solid #eee; | |
352 border-bottom: 1px solid #eee; | |
353 display: flex; | |
354 flex-direction: row; | |
355 align-items: center; | |
356 } | |
357 | |
358 .elements-tree-header-frame { | |
359 margin-left: 6px; | |
360 margin-right: 6px; | |
361 flex: none; | |
362 } | |
OLD | NEW |