1/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5html, 6body { 7 cursor: default; 8 height: 100%; 9 margin: 0; 10 overflow: hidden; 11 width: 100%; 12} 13 14body { 15 -webkit-flex-direction: column; 16 display: -webkit-flex; 17} 18 19list { 20 display: block; 21 overflow-x: hidden; 22 overflow-y: visible; /* let the container do the scrolling */ 23} 24 25list > * { 26 -webkit-padding-end: 20px; 27 -webkit-padding-start: 3px; 28 color: hsl(0, 0%, 70%); 29 display: -webkit-flex; 30 line-height: 20px; 31 margin: 0; 32 overflow: visible; 33 padding-bottom: 0; 34 padding-top: 0; 35 text-decoration: none; 36 white-space: nowrap; 37} 38 39list > * > * { 40 -webkit-padding-start: 20px; 41 background: 0 50% no-repeat; 42 box-sizing: border-box; 43 overflow: hidden; 44 text-overflow: ellipsis; 45 white-space: pre; /* Don't collapse whitespace */ 46} 47 48list > * > .label { 49 -webkit-transition: all 150ms; 50 color: black; 51 display: inline-block; /* We need to use inline-block here due to RTL. */ 52} 53 54list > * > .url { 55 -webkit-flex: 1; 56 direction: ltr; /* URLs always read LTR */ 57 display: none; 58 /* TODO(arv): Remove min-width once bug is fixed: 59 * https://bugs.webkit.org/show_bug.cgi?id=111790 */ 60 min-width: 0; 61} 62 63list > :hover > .url, 64list > [selected] > .url { 65 display: block; 66} 67 68/* Handle proper padding for URL field in an RTL context, where field order is 69 * |div.url||div.label| - so we need padding at the right of URL, not at the 70 * left. And since url is always LTR, that is padding at the end, not the start. 71 */ 72html[dir=rtl] .url { 73 -webkit-padding-end: 20px; 74 -webkit-padding-start: 0; 75} 76 77html[dir=rtl] list .label { 78 background-position: 100% 50%; 79} 80 81list > .folder > .label { 82 background-image: -webkit-image-set( 83 url('../../../../../ui/resources/default_100_percent/common/folder_closed.png') 1x, 84 url('../../../../../ui/resources/default_200_percent/common/folder_closed.png') 2x); 85} 86 87/* We need to ensure that even empty labels take up space */ 88list > * > .label:empty::after, 89list > * > .url:empty::after { 90 content: ' '; 91 white-space: pre; 92} 93 94list > .folder > .url:empty::after { 95 content: ''; 96} 97 98list > * > button { 99 -webkit-transition: opacity 150ms; 100 background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center; 101 border: 1px solid hsl(214, 91%, 85%); 102 border-radius: 3px; 103 bottom: 1px; 104 display: none; 105 overflow: hidden; 106 padding: 0; 107 position: absolute; 108 right: 3px; 109 top: 1px; 110 width: 15px; 111} 112 113list > [selected]:hover > button, 114list > * > button[menu-shown] { 115 border-color: hsl(214, 91%, 65%); 116} 117 118list > :hover > button { 119 display: block; 120} 121 122list > * > button:hover, 123list > * > button[menu-shown] { 124 display: block; 125} 126 127html[dir=rtl] list > * > button { 128 left: 3px; 129 right: auto; 130} 131 132/* Edit mode */ 133 134list [editing] .label input, 135list [editing] .url input { 136 -webkit-margin-end: 4px; 137 -webkit-margin-start: -4px; 138 -webkit-padding-end: 3px; 139 -webkit-padding-start: 3px; 140 box-sizing: content-box; 141 font-family: inherit; 142 font-size: inherit; 143 font-weight: inherit; 144 /* Do not inherit the line-height. */ 145 line-height: normal; 146 margin-bottom: 0; 147 margin-top: 0; 148 min-height: 0; 149 text-decoration: none; 150 vertical-align: baseline; 151} 152 153.tree-item [editing] input { 154 line-height: normal; 155 margin: 0; 156 min-height: 0; 157 padding: 1px 0; 158} 159 160<if expr="is_macosx"> 161list .label input, 162list .url input { 163 outline: none; 164} 165</if> 166 167list > [editing] { 168 overflow: visible; 169} 170 171list [editing] .label, 172list [editing] .url, 173list [editing] > * { 174 overflow: visible; 175} 176 177list [editing] .url { 178 -webkit-padding-start: 5px; 179} 180 181list [editing] input { 182 padding: 1px 0; 183} 184 185/* end editing */ 186 187html[dir=rtl] list > .folder > .label { 188 background-image: -webkit-image-set( 189 url('../../../../../ui/resources/default_100_percent/common/folder_closed_rtl.png') 1x, 190 url('../../../../../ui/resources/default_200_percent/common/folder_closed_rtl.png') 2x); 191} 192 193<if expr="is_macosx"> 194list > .folder > .label, 195.tree-label, 196.tree-row[may-have-children] > .tree-label, 197.tree-item[expanded] > .tree-row > .tree-label { 198 background-image: -webkit-image-set( 199 url('../../../../app/theme/default_100_percent/mac/bookmark_bar_folder.png') 1x, 200 url('../../../../app/theme/default_200_percent/mac/bookmark_bar_folder.png') 2x); 201} 202</if> 203 204.main { 205 -webkit-flex: 1; 206 display: -webkit-flex; 207 /* TODO(arv): Remove min-height once bug is fixed: 208 * https://bugs.webkit.org/show_bug.cgi?id=111790 */ 209 min-height: 0; 210} 211 212#tree-container { 213 -webkit-padding-end: 5px; 214 -webkit-padding-start: 10px; 215 box-sizing: border-box; 216 /* min-width and max-width are used by the split pane. */ 217 max-width: 50%; 218 min-width: 50px; 219 overflow: auto; 220 padding-bottom: 5px; 221 padding-top: 5px; 222 width: 200px; 223} 224 225#tree { 226 display: inline-block; 227 min-width: 100%; 228 overflow: visible; /* let the container do the scrolling */ 229} 230 231.tree-item > .tree-row { 232 line-height: 20px; 233} 234 235.tree-row .expand-icon { 236 top: 2px; 237} 238 239#list { 240 -webkit-flex: 1; 241 -webkit-padding-end: 5px; 242 box-sizing: border-box; 243 /* TODO(arv): Remove min-width once bug is fixed: 244 * https://bugs.webkit.org/show_bug.cgi?id=111790 */ 245 min-width: 0; 246 padding-bottom: 5px; 247 padding-top: 5px; 248} 249 250.splitter { 251 -webkit-border-end: 15px solid white; 252 -webkit-border-start: 0; 253 background-color: rgb(235, 239, 249); 254 cursor: e-resize; 255 width: 5px; 256<if expr="is_macosx"> 257 cursor: col-resize; 258</if> 259} 260 261.logo { 262 -webkit-appearance: none; 263 background: url('../images/bookmarks_section_32.png') no-repeat 50% 50%; 264 border: 0; 265 cursor: pointer; 266 float: left; 267 height: 32px; 268 margin: 10px; 269 width: 32px; 270} 271 272html:not(.focus-outline-visible) .logo:focus { 273 outline: none; 274} 275 276.header form { 277 float: left; 278 margin: 14px 2px 0 2px; 279 width: 171px; 280} 281 282.header { 283 min-width: 400px; 284} 285 286html[dir=rtl] .logo, 287html[dir=rtl] .header > div, 288html[dir=rtl] .header form { 289 float: right; 290} 291 292.tree-row.drag-on, 293.drag-on { 294 background-color: hsla(214, 91%, 85%, .5); 295 border: 1px solid hsl(214, 91%, 85%); 296 border-radius: 3px; 297 box-sizing: border-box; 298} 299 300.drag-above::before, 301.drag-below::after { 302 background-clip: padding-box; 303 background-color: black; 304 border: 3px solid black; 305 border-bottom-color: transparent; 306 border-radius: 0; 307 border-top-color: transparent; 308 box-sizing: border-box; 309 content: ''; 310 display: block; 311 height: 8px; 312 left: 0; 313 position: absolute; 314 right: 0; 315 z-index: 10; 316} 317 318.drag-above::before { 319 top: calc((8px/2 + 1px) * -1) 320} 321 322.drag-below::after { 323 bottom: calc((8px/2 + 1px) * -1) 324} 325 326list.drag-above::before { 327 top: 0 328} 329 330list > .drag-below, 331list > .drag-above { 332 overflow : visible; 333} 334 335.summary { 336 background-color: rgb(235, 239, 249); 337 border-top: 1px solid rgb(156, 194, 239); 338 clear: both; 339 padding: 5px 10px; 340 white-space: nowrap; 341} 342 343.summary > * { 344 display: inline-block; 345 font-size: 100%; 346 margin: 0; 347} 348 349.summary button { 350 -webkit-appearance: none; 351 -webkit-margin-start: 10px; 352 -webkit-padding-end: 11px; 353 -webkit-padding-start: 0; 354 background: transparent -webkit-canvas(drop-down-arrow) 355 no-repeat right center; 356 border: 0; 357 font: inherit; 358 padding-bottom: 0; 359 padding-top: 0; 360} 361 362html[dir=rtl] .summary button { 363 background-position: left center; 364} 365 366@media (pointer:coarse) { 367 list > *, 368 menu > button, 369 .tree-item > .tree-row { 370 line-height: 28px; 371 } 372 373 list [editing] input, 374 .tree-item [editing] input { 375 padding: 3px 0; 376 } 377 378 .tree-row .expand-icon { 379 top: 6px; 380 } 381} 382