OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. |
3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> | 3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> |
4 * | 4 * |
5 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
6 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
7 * are met: | 7 * are met: |
8 * | 8 * |
9 * 1. Redistributions of source code must retain the above copyright | 9 * 1. Redistributions of source code must retain the above copyright |
10 * notice, this list of conditions and the following disclaimer. | 10 * notice, this list of conditions and the following disclaimer. |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
49 | 49 |
50 #elements-crumbs { | 50 #elements-crumbs { |
51 flex: 0 0 19px; | 51 flex: 0 0 19px; |
52 background-color: white; | 52 background-color: white; |
53 border-top: 1px solid #ccc; | 53 border-top: 1px solid #ccc; |
54 overflow: hidden; | 54 overflow: hidden; |
55 height: 19px; | 55 height: 19px; |
56 width: 100%; | 56 width: 100%; |
57 } | 57 } |
58 | 58 |
59 .styles-section { | |
60 min-height: 18px; | |
61 white-space: nowrap; | |
62 -webkit-user-select: text; | |
63 border-bottom: 1px solid #eee; | |
64 position: relative; | |
65 overflow: hidden; | |
66 } | |
67 | |
68 .styles-section > div { | |
69 padding: 2px 2px 4px 4px; | |
70 } | |
71 | |
72 .styles-section:last-child { | |
73 border-bottom: none; | |
74 } | |
75 | |
76 .styles-pane .sidebar-separator { | |
77 border-top: 0 none; | |
78 } | |
79 | |
80 .style-panes-wrapper { | 59 .style-panes-wrapper { |
81 overflow: auto; | 60 overflow: auto; |
82 } | 61 } |
83 | 62 |
84 .style-panes-wrapper > div:not(:first-child) { | 63 .style-panes-wrapper > div:not(:first-child) { |
85 border-top: 1px solid #ccc; | 64 border-top: 1px solid #ccc; |
86 } | 65 } |
87 | 66 |
88 .styles-section.read-only { | |
89 background-color: #eee; | |
90 } | |
91 | |
92 .styles-filter-engaged, | |
93 .styles-section .simple-selector.filter-match { | |
94 background-color: rgba(255, 255, 0, 0.5); | |
95 } | |
96 | |
97 .-theme-with-dark-background .styles-filter-engaged, | |
98 .-theme-with-dark-background .styles-section .simple-selector.filter-match { | |
99 background-color: hsla(133, 100%, 30%, 0.5); | |
100 } | |
101 | |
102 .sidebar-pane-closing-brace { | |
103 clear: both; | |
104 } | |
105 | |
106 .styles-section-title { | |
107 background-origin: padding; | |
108 background-clip: padding; | |
109 word-wrap: break-word; | |
110 white-space: normal; | |
111 } | |
112 | |
113 .styles-section-title .media-list { | |
114 color: #888; | |
115 } | |
116 | |
117 .styles-section-title .media-list.media-matches .media.editable-media { | |
118 color: #222; | |
119 } | |
120 | |
121 .styles-section-title .media:not(.editing-media), | |
122 .styles-section-title .media:not(.editing-media) .subtitle { | |
123 overflow: hidden; | |
124 } | |
125 | |
126 .styles-section-title .media .subtitle { | |
127 float: right; | |
128 color: rgb(85, 85, 85); | |
129 } | |
130 | |
131 .styles-section-subtitle { | |
132 color: rgb(85, 85, 85); | |
133 float: right; | |
134 margin-left: 5px; | |
135 max-width: 100%; | |
136 text-overflow: ellipsis; | |
137 overflow: hidden; | |
138 white-space: nowrap; | |
139 height: 15px; | |
140 margin-bottom: -1px; | |
141 } | |
142 | |
143 .styles-section .styles-section-subtitle .devtools-link { | |
144 color: inherit; | |
145 } | |
146 | |
147 .styles-section .selector { | |
148 color: #888; | |
149 } | |
150 | |
151 .styles-section .simple-selector.selector-matches, .styles-section.keyframe-key
{ | |
152 color: #222; | |
153 } | |
154 | |
155 .styles-section .devtools-link { | |
156 user-select: none; | |
157 } | |
158 | |
159 .styles-section .style-properties { | |
160 margin: 0; | |
161 padding: 2px 4px 0 0; | |
162 list-style: none; | |
163 clear: both; | |
164 display: flex; | |
165 } | |
166 | |
167 .styles-section.matched-styles .style-properties { | |
168 padding-left: 0; | |
169 } | |
170 | |
171 @keyframes styles-element-state-pane-slidein { | |
172 from { | |
173 margin-top: -60px; | |
174 } | |
175 to { | |
176 margin-top: 0px; | |
177 } | |
178 } | |
179 | |
180 @keyframes styles-element-state-pane-slideout { | |
181 from { | |
182 margin-top: 0px; | |
183 } | |
184 to { | |
185 margin-top: -60px; | |
186 } | |
187 } | |
188 | |
189 .styles-sidebar-toolbar-pane { | |
190 position: relative; | |
191 animation-duration: 0.1s; | |
192 animation-direction: normal; | |
193 } | |
194 | |
195 .styles-sidebar-toolbar-pane-container { | |
196 position: relative; | |
197 overflow: hidden; | |
198 flex-shrink: 0; | |
199 } | |
200 | |
201 .styles-animations-controls-pane > * { | 67 .styles-animations-controls-pane > * { |
202 margin: 6px 4px; | 68 margin: 6px 4px; |
203 } | 69 } |
204 | 70 |
205 .styles-animations-controls-pane { | 71 .styles-animations-controls-pane { |
206 border-bottom: 1px solid rgb(189, 189, 189); | 72 border-bottom: 1px solid rgb(189, 189, 189); |
207 height: 60px; | 73 height: 60px; |
208 overflow: hidden; | 74 overflow: hidden; |
209 background-color: #eee; | 75 background-color: #eee; |
210 } | 76 } |
(...skipping 11 matching lines...) Expand all Loading... |
222 | 88 |
223 .animations-controls > input { | 89 .animations-controls > input { |
224 flex-grow: 1; | 90 flex-grow: 1; |
225 margin-right: 10px; | 91 margin-right: 10px; |
226 } | 92 } |
227 | 93 |
228 .animations-controls > .playback-label { | 94 .animations-controls > .playback-label { |
229 width: 35px; | 95 width: 35px; |
230 } | 96 } |
231 | 97 |
232 .styles-selector { | |
233 cursor: text; | |
234 } | |
235 | |
236 .metrics-and-styles, | 98 .metrics-and-styles, |
237 .metrics-and-computed { | 99 .metrics-and-computed { |
238 display: flex !important; | 100 display: flex !important; |
239 flex-direction: column !important; | 101 flex-direction: column !important; |
240 position: relative; | 102 position: relative; |
241 } | 103 } |
242 | 104 |
243 .styles-sidebar-pane-toolbar-container { | |
244 flex-shrink: 0; | |
245 overflow: hidden; | |
246 } | |
247 | |
248 .styles-sidebar-pane-toolbar { | |
249 border-bottom: 1px solid #eee; | |
250 flex-shrink: 0; | |
251 } | |
252 | |
253 .styles-sidebar-pane-filter-box { | |
254 flex: auto; | |
255 display: flex; | |
256 } | |
257 | |
258 .styles-sidebar-pane-filter-box > input { | |
259 outline: none !important; | |
260 border: none; | |
261 width: 100%; | |
262 background: transparent; | |
263 margin-left: 4px; | |
264 } | |
265 | |
266 .styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover, | |
267 .styles-section.styles-panel-hovered:not(.read-only) .media-text :hover{ | |
268 text-decoration: underline; | |
269 cursor: default; | |
270 } | |
271 | |
272 .sidebar-separator { | |
273 background-color: #ddd; | |
274 padding: 0 5px; | |
275 border-top: 1px solid #ccc; | |
276 border-bottom: 1px solid #ccc; | |
277 color: rgb(50, 50, 50); | |
278 white-space: nowrap; | |
279 text-overflow: ellipsis; | |
280 overflow: hidden; | |
281 line-height: 16px; | |
282 } | |
283 | |
284 .sidebar-separator > span.monospace { | |
285 background: rgb(255, 255, 255); | |
286 padding: 0px 3px; | |
287 border-radius: 2px; | |
288 border: 1px solid #C1C1C1; | |
289 } | |
290 | |
291 .animation-section-body { | 105 .animation-section-body { |
292 display: none; | 106 display: none; |
293 } | 107 } |
294 | 108 |
295 .animation-section-body.expanded { | 109 .animation-section-body.expanded { |
296 display: block; | 110 display: block; |
297 } | 111 } |
298 | 112 |
299 .animation-section-body .section { | 113 .animation-section-body .section { |
300 border-bottom: 1px solid rgb(191, 191, 191); | 114 border-bottom: 1px solid rgb(191, 191, 191); |
(...skipping 26 matching lines...) Expand all Loading... |
327 | 141 |
328 .events-pane .toolbar { | 142 .events-pane .toolbar { |
329 border-bottom: 1px solid #eee; | 143 border-bottom: 1px solid #eee; |
330 } | 144 } |
331 | 145 |
332 .properties-widget-section { | 146 .properties-widget-section { |
333 padding: 2px 0px 2px 5px; | 147 padding: 2px 0px 2px 5px; |
334 flex: none; | 148 flex: none; |
335 } | 149 } |
336 | 150 |
337 .sidebar-pane-section-toolbar { | |
338 position: absolute; | |
339 right: 0; | |
340 bottom: 0; | |
341 visibility: hidden; | |
342 background-color: rgba(255, 255, 255, 0.9); | |
343 } | |
344 | |
345 .styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-onl
y):hover .sidebar-pane-section-toolbar { | |
346 visibility: visible; | |
347 } | |
348 | |
349 .elements-tree-header { | 151 .elements-tree-header { |
350 height: 24px; | 152 height: 24px; |
351 border-top: 1px solid #eee; | 153 border-top: 1px solid #eee; |
352 border-bottom: 1px solid #eee; | 154 border-bottom: 1px solid #eee; |
353 display: flex; | 155 display: flex; |
354 flex-direction: row; | 156 flex-direction: row; |
355 align-items: center; | 157 align-items: center; |
356 } | 158 } |
357 | 159 |
358 .elements-tree-header-frame { | 160 .elements-tree-header-frame { |
359 margin-left: 6px; | 161 margin-left: 6px; |
360 margin-right: 6px; | 162 margin-right: 6px; |
361 flex: none; | 163 flex: none; |
362 } | 164 } |
OLD | NEW |