1/* 2 * Copyright (C) 2013 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.details-section { 27 font-size: 10px; 28 background-color: rgb(242, 242, 242); 29 border-bottom: 1px solid rgb(179, 179, 179); 30} 31 32body.mac-platform.legacy .details-section { 33 margin-top: -1px; 34 margin-bottom: -1px; 35 36 border-bottom: none; 37 background-color: transparent; 38} 39 40.details-section .details-section { 41 background-color: rgb(255, 255, 255); 42} 43 44body.mac-platform.legacy .details-section .details-section { 45 background-color: transparent; 46} 47 48.details-section .details-section:last-child { 49 border-bottom: none; 50} 51 52.details-section .details-section:first-child { 53 border-top: 1px solid rgb(179, 179, 179); 54} 55 56.details-section > .header { 57 position: -webkit-sticky; 58 top: -1px; 59 height: 23px; 60 61 background-color: rgb(242, 242, 242); 62 color: rgb(57, 57, 57); 63 64 white-space: nowrap; 65 overflow: hidden; 66 text-overflow: ellipsis; 67 68 font-size: 11px; 69 font-weight: bold; 70 71 padding: 4px 5px 4px 0; 72 73 /* Ensure the headers are displayed above scrollbars. */ 74 z-index: 200; 75} 76 77body.mac-platform.legacy .details-section > .header { 78 border-bottom: 1px solid rgb(179, 179, 179); 79 box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0; 80 background-color: transparent; 81 background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230)); 82 83 border-top: 1px solid rgb(179, 179, 179); 84 85 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 86} 87 88.details-section .details-section > .header { 89 top: 21px; 90 background-color: rgb(255, 255, 255); 91 92 /* Ensure these headers are displayed below the parent header but above scrollbars. */ 93 z-index: 100; 94} 95 96.details-section .details-section:not(.collapsed) > .header { 97 border-bottom: 1px solid rgb(222, 222, 222); 98} 99 100body.mac-platform.legacy .details-section .details-section > .header { 101 background-color: transparent; 102 background-image: linear-gradient(to bottom, rgb(250, 250, 250), rgb(240, 240, 240)); 103 box-shadow: none; 104} 105 106body.mac-platform.legacy .details-section .details-section.collapsed > .header { 107 box-shadow: none; 108} 109 110body.mac-platform.legacy .details-section:not(.collapsed) .data-grid.inline { 111 border-top: none; 112} 113 114.details-section.computed-style-properties:not(.collapsed) > .header { 115 background-color: rgb(255, 255, 255); 116} 117 118body.mac-platform.legacy .details-section.computed-style-properties:not(.collapsed) > .header { 119 background-color: transparent; 120} 121 122.details-section > .header::before { 123 display: block; 124 float: left; 125 126 width: 21px; 127 height: 100%; 128 129 background-image: -webkit-canvas(details-section-disclosure-triangle-open-normal); 130 background-repeat: no-repeat; 131 background-position: center; 132 background-size: 13px 13px; 133 134 content: ""; 135} 136 137.details-section > .header:not(.mouse-over-options-element):active::before { 138 background-image: -webkit-canvas(details-section-disclosure-triangle-open-active); 139} 140 141.details-section.collapsed > .header::before { 142 background-image: -webkit-canvas(details-section-disclosure-triangle-closed-normal); 143} 144 145.details-section.collapsed > .header:not(.mouse-over-options-element):active::before { 146 background-image: -webkit-canvas(details-section-disclosure-triangle-closed-active); 147} 148 149.details-section > .header > label { 150 float: right; 151 font-size: 10px; 152 color: rgba(0, 0, 0, 0.6); 153 text-align: right; 154} 155 156.details-section.collapsed > .header > label { 157 display: none; 158} 159 160.details-section > .header > label > input[type="checkbox"] { 161 margin: 0 0 0 5px; 162 vertical-align: 1px; 163 font-size: 10px; 164} 165 166.details-section > .header > .node-link, 167.details-section > .header > .go-to-arrow { 168 float: right; 169} 170 171.details-section > .header .go-to-arrow { 172 width: 10px; 173 height: 12px; 174 margin-left: 3px; 175} 176 177.details-section > .content { 178 display: table; 179 width: 100%; 180 border-spacing: 0; 181 border-collapse: collapse; 182} 183 184.details-section.collapsed > .content { 185 display: none; 186} 187 188.details-section > .content > .group { 189 display: table-row-group; 190 border-bottom: 1px solid rgb(179, 179, 179); 191} 192 193body.mac-platform.legacy .details-section > .content > .group { 194 border-bottom: none; 195} 196 197.details-section > .content > .group:last-child { 198 border-bottom: none; 199} 200 201.details-section > .content > .group:nth-child(even) { 202 background-color: rgb(233, 233, 233); 203} 204 205body.mac-platform.legacy .details-section > .content > .group:nth-child(even) { 206 background-color: rgb(222, 222, 222); 207} 208 209.details-section > .content > .group:nth-child(even) > .row:not(.simple):first-child, 210.details-section > .content > .group:nth-child(even) > .row.simple:first-child > * { 211 border-top: 1px solid rgb(179, 179, 179); 212} 213 214body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child, 215body.mac-platform.legacy .details-section > .content > .group:last-child > .row:not(.simple):last-child, 216body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row.simple:last-child > *, 217body.mac-platform.legacy .details-section > .content > .group:last-child > .row.simple:last-child > * { 218 border-bottom: 1px solid rgb(179, 179, 179); 219} 220 221.details-section > .content > .group > .row.simple { 222 display: table-row; 223} 224 225.details-section > .content > .group > .row.simple:last-child > * { 226 padding-bottom: 5px !important; 227} 228 229.details-section > .content > .group > .row.simple.empty { 230 display: none; 231} 232 233.details-section > .content > .group > .row.empty.syntax-highlighted { 234 font-size: 10px; 235} 236 237.details-section > .content > .group > .row.simple.empty:last-child { 238 display: table-row; 239} 240 241.details-section > .content > .group > .row.simple.empty:last-child > * { 242 display: table-cell; 243 height: 1px; 244 font-size: 0; 245 color: transparent; 246 padding-top: 0; 247 padding-bottom: 3px !important; 248} 249 250.details-section > .content > .group > .row.simple.empty:last-child > * > * { 251 display: none; 252} 253 254.details-section > .content > .group > .row.simple > * { 255 display: table-cell; 256 vertical-align: top; 257 padding: 5px 4px 2px; 258} 259 260.details-section > .content > .group > .row.simple > .label { 261 color: rgb(51, 51, 51); 262 263 text-align: right; 264 265 padding-left: 6px; 266 267 width: 85px; 268} 269 270.details-section > .content > .group > .row.simple > .value { 271 word-wrap: break-word; 272 273 padding-right: 6px; 274 275 -webkit-user-select: text; 276 cursor: text; 277} 278 279.details-section > .content > .group > .row.simple > .value .go-to-arrow { 280 width: 10px; 281 height: 12px; 282 margin-left: 5px; 283} 284 285.details-section > .content > .group > .row.simple.data > .value { 286 word-break: break-all; 287} 288 289.details-section > .content > .group > .row.empty { 290 padding: 6px; 291 text-align: center; 292 color: gray; 293} 294 295.details-section > .content > .group > .row.properties:not(.empty) { 296 padding: 4px 6px; 297} 298 299.details-section > .content .data-grid { 300 border-left: none; 301 border-right: none; 302 border-bottom: none; 303} 304 305.details-section > .content .data-grid table.data { 306 background-image: none; 307} 308 309.details-section > .content .data-grid tr:nth-child(even) { 310 background-color: white; 311} 312 313.details-section > .content .data-grid tr:nth-child(odd) { 314 background-color: rgb(243, 246, 250); 315} 316 317.details-section > .content .data-grid td.value-column { 318 height: auto; 319 line-height: initial; 320 white-space: normal; 321} 322 323.details-section > .content .data-grid td.value-column > div { 324 white-space: normal; 325 word-break: break-all; 326} 327