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 .metrics { | |
60 padding: 8px; | |
61 font-size: 10px; | |
62 text-align: center; | |
63 white-space: nowrap; | |
64 } | |
65 | |
66 .metrics .label { | |
67 position: absolute; | |
68 font-size: 10px; | |
69 margin-left: 3px; | |
70 padding-left: 2px; | |
71 padding-right: 2px; | |
72 } | |
73 | |
74 .metrics .position { | |
75 border: 1px rgb(66%, 66%, 66%) dotted; | |
76 background-color: white; | |
77 display: inline-block; | |
78 text-align: center; | |
79 padding: 3px; | |
80 margin: 3px; | |
81 } | |
82 | |
83 .metrics .margin { | |
84 border: 1px dashed; | |
85 background-color: white; | |
86 display: inline-block; | |
87 text-align: center; | |
88 vertical-align: middle; | |
89 padding: 3px; | |
90 margin: 3px; | |
91 } | |
92 | |
93 .metrics .border { | |
94 border: 1px black solid; | |
95 background-color: white; | |
96 display: inline-block; | |
97 text-align: center; | |
98 vertical-align: middle; | |
99 padding: 3px; | |
100 margin: 3px; | |
101 } | |
102 | |
103 .metrics .padding { | |
104 border: 1px grey dashed; | |
105 background-color: white; | |
106 display: inline-block; | |
107 text-align: center; | |
108 vertical-align: middle; | |
109 padding: 3px; | |
110 margin: 3px; | |
111 } | |
112 | |
113 .metrics .content { | |
114 position: static; | |
115 border: 1px gray solid; | |
116 background-color: white; | |
117 display: inline-block; | |
118 text-align: center; | |
119 vertical-align: middle; | |
120 padding: 3px; | |
121 margin: 3px; | |
122 min-width: 80px; | |
123 overflow: visible; | |
124 } | |
125 | |
126 .metrics .content span { | |
127 display: inline-block; | |
128 } | |
129 | |
130 .metrics .editing { | |
131 position: relative; | |
132 z-index: 100; | |
133 cursor: text; | |
134 } | |
135 | |
136 .metrics .left { | |
137 display: inline-block; | |
138 vertical-align: middle; | |
139 } | |
140 | |
141 .metrics .right { | |
142 display: inline-block; | |
143 vertical-align: middle; | |
144 } | |
145 | |
146 .metrics .top { | |
147 display: inline-block; | |
148 } | |
149 | |
150 .metrics .bottom { | |
151 display: inline-block; | |
152 } | |
153 | |
154 .styles-section { | 59 .styles-section { |
155 min-height: 18px; | 60 min-height: 18px; |
156 white-space: nowrap; | 61 white-space: nowrap; |
157 -webkit-user-select: text; | 62 -webkit-user-select: text; |
158 border-bottom: 1px solid #eee; | 63 border-bottom: 1px solid #eee; |
159 position: relative; | 64 position: relative; |
160 overflow: hidden; | 65 overflow: hidden; |
161 } | 66 } |
162 | 67 |
163 .styles-section > div { | 68 .styles-section > div { |
164 padding: 2px 2px 4px 4px; | 69 padding: 2px 2px 4px 4px; |
165 } | 70 } |
166 | 71 |
167 .styles-section:last-child { | 72 .styles-section:last-child { |
168 border-bottom: none; | 73 border-bottom: none; |
169 } | 74 } |
170 | 75 |
171 .styles-pane .sidebar-separator { | 76 .styles-pane .sidebar-separator { |
172 border-top: 0 none; | 77 border-top: 0 none; |
173 } | 78 } |
174 | 79 |
175 .style-panes-wrapper { | 80 .style-panes-wrapper { |
176 overflow: auto; | 81 overflow: auto; |
177 } | 82 } |
178 | 83 |
| 84 .style-panes-wrapper > div:not(:first-child) { |
| 85 border-top: 1px solid #ccc; |
| 86 } |
| 87 |
179 .styles-section.read-only { | 88 .styles-section.read-only { |
180 background-color: #eee; | 89 background-color: #eee; |
181 } | 90 } |
182 | 91 |
183 .styles-filter-engaged, | 92 .styles-filter-engaged, |
184 .styles-section .simple-selector.filter-match { | 93 .styles-section .simple-selector.filter-match { |
185 background-color: rgba(255, 255, 0, 0.5); | 94 background-color: rgba(255, 255, 0, 0.5); |
186 } | 95 } |
187 | 96 |
188 .-theme-with-dark-background .styles-filter-engaged, | 97 .-theme-with-dark-background .styles-filter-engaged, |
(...skipping 186 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
375 } | 284 } |
376 | 285 |
377 .animations-controls > .playback-label { | 286 .animations-controls > .playback-label { |
378 width: 35px; | 287 width: 35px; |
379 } | 288 } |
380 | 289 |
381 .styles-selector { | 290 .styles-selector { |
382 cursor: text; | 291 cursor: text; |
383 } | 292 } |
384 | 293 |
385 .metrics { | |
386 border-bottom: 1px solid #ccc; | |
387 } | |
388 | |
389 .-theme-with-dark-background .metrics { | |
390 color: #222; | |
391 } | |
392 | |
393 .-theme-with-dark-background .metrics > div:hover { | |
394 color: #ccc; | |
395 } | |
396 | |
397 .metrics-and-styles .metrics { | |
398 border-top: 1px solid #ccc; | |
399 border-bottom: none; | |
400 } | |
401 | |
402 .metrics { | |
403 min-height: 190px; | |
404 display: flex; | |
405 flex-direction: column; | |
406 -webkit-align-items: center; | |
407 -webkit-justify-content: center; | |
408 } | |
409 | |
410 .metrics-and-styles, | 294 .metrics-and-styles, |
411 .metrics-and-computed { | 295 .metrics-and-computed { |
412 display: flex !important; | 296 display: flex !important; |
413 flex-direction: column !important; | 297 flex-direction: column !important; |
414 position: relative; | 298 position: relative; |
415 } | 299 } |
416 | 300 |
417 .styles-sidebar-pane-toolbar-container { | 301 .styles-sidebar-pane-toolbar-container { |
418 flex-shrink: 0; | 302 flex-shrink: 0; |
419 overflow: hidden; | 303 overflow: hidden; |
(...skipping 10 matching lines...) Expand all Loading... |
430 } | 314 } |
431 | 315 |
432 .styles-sidebar-pane-filter-box > input { | 316 .styles-sidebar-pane-filter-box > input { |
433 outline: none !important; | 317 outline: none !important; |
434 border: none; | 318 border: none; |
435 width: 100%; | 319 width: 100%; |
436 background: transparent; | 320 background: transparent; |
437 margin-left: 4px; | 321 margin-left: 4px; |
438 } | 322 } |
439 | 323 |
440 .sidebar-pane.composite .metrics-and-styles .metrics { | |
441 border-bottom: none; | |
442 } | |
443 | |
444 .styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover, | 324 .styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover, |
445 .styles-section.styles-panel-hovered:not(.read-only) .media-text :hover{ | 325 .styles-section.styles-panel-hovered:not(.read-only) .media-text :hover{ |
446 text-decoration: underline; | 326 text-decoration: underline; |
447 cursor: default; | 327 cursor: default; |
448 } | 328 } |
449 | 329 |
450 .sidebar-separator { | 330 .sidebar-separator { |
451 background-color: #ddd; | 331 background-color: #ddd; |
452 padding: 0 5px; | 332 padding: 0 5px; |
453 border-top: 1px solid #ccc; | 333 border-top: 1px solid #ccc; |
(...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
531 display: flex; | 411 display: flex; |
532 flex-direction: row; | 412 flex-direction: row; |
533 align-items: center; | 413 align-items: center; |
534 } | 414 } |
535 | 415 |
536 .elements-tree-header-frame { | 416 .elements-tree-header-frame { |
537 margin-left: 6px; | 417 margin-left: 6px; |
538 margin-right: 6px; | 418 margin-right: 6px; |
539 flex: none; | 419 flex: none; |
540 } | 420 } |
OLD | NEW |