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.sidebar > .panel.navigation > .content { 27 position: absolute; 28 top: 0; 29 left: 0; 30 right: 0; 31 bottom: 28px; 32 33 overflow-x: hidden; 34 overflow-y: auto; 35} 36 37body.mac-platform.legacy .sidebar > .panel.navigation > .content { 38 bottom: 22px; 39} 40 41.sidebar > .panel.navigation > .filter-bar { 42 position: absolute; 43 bottom: 0; 44 left: 0; 45 right: 0; 46} 47 48.sidebar > .panel.navigation > .overflow-shadow { 49 position: absolute; 50 bottom: 28px; 51 left: 0; 52 right: 0; 53 height: 1px; 54 55 pointer-events: none; 56 57 opacity: 0; 58 59 border-bottom: 1px solid rgb(179, 179, 179); 60} 61 62body.mac-platform.legacy .sidebar > .panel.navigation > .overflow-shadow { 63 border-bottom: none; 64 65 background-image: -webkit-radial-gradient(center, ellipse closest-side, rgba(0, 0, 0, 0.2) 25%, transparent), 66 linear-gradient(to right, rgba(0, 0, 0, 0.0125), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.0125)); 67 background-size: 125% 15px, 100% 1px; 68 background-position: top center, bottom center; 69 background-repeat: no-repeat; 70 71 height: 5px; 72 bottom: 22px; 73} 74 75.sidebar > .panel.navigation > .overflow-shadow.top { 76 top: 28px; 77 bottom: initial; 78} 79 80body.mac-platform.legacy .sidebar > .panel.navigation > .overflow-shadow.top { 81 top: 21px; 82 background-position: bottom center, top center; 83} 84 85.sidebar > .panel.navigation > .empty-content-placeholder { 86 position: absolute; 87 top: 0; 88 left: 0; 89 right: 0; 90 bottom: 28px; 91 92 display: -webkit-flex; 93 94 -webkit-justify-content: center; 95 -webkit-align-items: center; 96} 97 98body.mac-platform.legacy .sidebar > .panel.navigation > .empty-content-placeholder { 99 bottom: 21px; 100} 101 102.sidebar > .panel.navigation > .empty-content-placeholder > .message { 103 display: inline-block; 104 white-space: nowrap; 105 106 font-size: 13px; 107 108 color: white; 109 background-color: rgba(0, 0, 0, 0.15); 110 text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; 111 box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 0, rgba(255, 255, 255, 0.4) 0 1px 0; 112 113 border-radius: 6px; 114 padding: 5px 15px 6px; 115} 116 117.navigation-sidebar-panel-content-tree-outline, 118.navigation-sidebar-panel-content-tree-outline .children { 119 padding: 0; 120 margin: 0; 121 122 outline: none; 123 124 list-style: none; 125} 126 127.navigation-sidebar-panel-content-tree-outline .children { 128 display: none; 129} 130 131.navigation-sidebar-panel-content-tree-outline .children.expanded { 132 display: block; 133} 134 135.navigation-sidebar-panel-content-tree-outline .item { 136 height: 36px; 137 line-height: 34px; 138 139 /* The item depth padding style rules are generated by NavigationSidebarPanel.js. 140 Any changes to this padding needs to be changed there too. */ 141 142 padding: 0 5px; 143 144 border-top: 1px solid transparent; 145 146 white-space: nowrap; 147} 148 149.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons > .children { 150 display: none; 151} 152 153.navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .children { 154 display: none; 155} 156 157.navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon { 158 margin-left: 16px; 159} 160 161.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item.small { 162 padding-left: 8px; 163} 164 165.navigation-sidebar-panel-content-tree-outline .item .disclosure-button { 166 display: none; 167 168 float: left; 169 170 width: 16px; 171 height: 100%; 172 173 border: 0; 174 175 background-color: transparent; 176 background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-normal); 177 background-repeat: no-repeat; 178 background-position: center; 179 background-size: 13px 13px; 180 181 -webkit-appearance: none; 182} 183 184.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button { 185 display: none; 186} 187 188.navigation-sidebar-panel-content-tree-outline .item.parent .disclosure-button { 189 display: block; 190} 191 192.navigation-sidebar-panel-content-tree-outline:focus .item.selected .disclosure-button { 193 background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-selected) !important; 194} 195 196.navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button { 197 background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-normal); 198} 199 200.navigation-sidebar-panel-content-tree-outline:focus .item.selected.expanded .disclosure-button { 201 background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-selected) !important; 202} 203 204.navigation-sidebar-panel-content-tree-outline .item .icon { 205 float: left; 206 position: relative; 207 208 width: 32px; 209 height: 32px; 210 211 margin-top: 1px; 212 margin-right: 3px; 213} 214 215.navigation-sidebar-panel-content-tree-outline .item .status { 216 float: right; 217 218 height: 16px; 219 220 margin-top: 9px; 221 margin-left: 4px; 222 223 line-height: 1em; 224} 225 226.navigation-sidebar-panel-content-tree-outline .item .status:empty { 227 display: none; 228} 229 230.navigation-sidebar-panel-content-tree-outline .item.selected { 231 background-color: rgb(212, 212, 212); 232} 233 234body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline .item.selected { 235 border-top: 1px solid rgb(162, 177, 201); 236 237 background-color: transparent; 238 background-image: linear-gradient(to bottom, rgb(175, 190, 213), rgb(130, 151, 182)); 239 background-origin: padding; 240 background-clip: padding; 241} 242 243.navigation-sidebar-panel-content-tree-outline:focus .item.selected { 244 color: white; 245 background-color: rgb(0, 128, 252); 246} 247 248body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline:focus .item.selected { 249 background-color: transparent; 250 border-top: 1px solid rgb(148, 174, 193); 251 background-image: linear-gradient(to bottom, rgb(154, 180, 203), rgb(112, 139, 176)); 252} 253 254body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected { 255 background-color: rgb(212, 212, 212); 256} 257 258body.mac-platform.legacy.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected { 259 background-color: transparent; 260 border-top: 1px solid rgb(168, 168, 168); 261 background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(158, 158, 158)); 262} 263 264.navigation-sidebar-panel-content-tree-outline .item .titles { 265 position: relative; 266 top: 5px; 267 268 line-height: 11px; 269 270 padding-bottom: 1px; 271 272 text-overflow: ellipsis; 273 overflow: hidden; 274 white-space: nowrap; 275} 276 277.navigation-sidebar-panel-content-tree-outline .item .highlighted { 278 background-color: rgba(235, 215, 38, 0.2); 279 border-bottom: 1px solid rgb(237, 202, 71); 280} 281 282.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle { 283 top: 10px; 284} 285 286.navigation-sidebar-panel-content-tree-outline .item .title::after { 287 content: "\A"; /* Newline */ 288 white-space: pre; 289} 290 291.navigation-sidebar-panel-content-tree-outline .item .subtitle { 292 font-size: 9px; 293 color: rgba(0, 0, 0, 0.7); 294} 295 296.navigation-sidebar-panel-content-tree-outline:focus .item.selected .subtitle { 297 color: rgba(255, 255, 255, 0.9); 298} 299 300.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle .subtitle, 301.navigation-sidebar-panel-content-tree-outline .item .subtitle:empty { 302 display: none; 303} 304 305.navigation-sidebar-panel-content-tree-outline.small .item, 306.navigation-sidebar-panel-content-tree-outline .children.small .item, 307.navigation-sidebar-panel-content-tree-outline .item.small { 308 height: 20px; 309} 310 311.navigation-sidebar-panel-content-tree-outline.small.two-line .item, 312.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item, 313.navigation-sidebar-panel-content-tree-outline .item.small.two-line { 314 height: 26px; 315} 316 317.navigation-sidebar-panel-content-tree-outline.small .item .icon, 318.navigation-sidebar-panel-content-tree-outline .children.small .item .icon, 319.navigation-sidebar-panel-content-tree-outline .item.small .icon { 320 width: 16px; 321 height: 16px; 322} 323 324.navigation-sidebar-panel-content-tree-outline.small .item .status, 325.navigation-sidebar-panel-content-tree-outline .children.small .item .status, 326.navigation-sidebar-panel-content-tree-outline .item.small .status { 327 margin-top: 1px; 328} 329 330.navigation-sidebar-panel-content-tree-outline.small .item .status .indeterminate-progress-spinner, 331.navigation-sidebar-panel-content-tree-outline .children.small .item .status .indeterminate-progress-spinner, 332.navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner { 333 margin-top: 1px; 334 width: 14px; 335 height: 14px; 336} 337 338.navigation-sidebar-panel-content-tree-outline.small .item .titles, 339.navigation-sidebar-panel-content-tree-outline .children.small .item .titles, 340.navigation-sidebar-panel-content-tree-outline .item.small .titles { 341 top: 2px; 342 line-height: normal; 343} 344 345.navigation-sidebar-panel-content-tree-outline.small.two-line .item .status, 346.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .status, 347.navigation-sidebar-panel-content-tree-outline .item.small.two-line .status { 348 margin-top: 4px; 349} 350 351.navigation-sidebar-panel-content-tree-outline.small.two-line .item .titles, 352.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .titles, 353.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles { 354 top: 0; 355 line-height: 11px; 356} 357 358.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle { 359 top: 6px; 360} 361 362.navigation-sidebar-panel-content-tree-outline.small .item .subtitle, 363.navigation-sidebar-panel-content-tree-outline .children.small .item .subtitle, 364.navigation-sidebar-panel-content-tree-outline .item.small .subtitle { 365 font-size: inherit; 366} 367 368.navigation-sidebar-panel-content-tree-outline.small.two-line .item .icon, 369.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .icon, 370.navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon { 371 margin-top: 4px; 372} 373 374.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .title::after, 375.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .title::after, 376.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after { 377 content: ""; 378} 379 380.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .subtitle::before, 381.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .subtitle::before, 382.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before { 383 content: " — "; 384} 385