| OLD | NEW |
| (Empty) |
| 1 /* Copyright 2013 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 | |
| 5 html, | |
| 6 body { | |
| 7 cursor: default; | |
| 8 height: 100%; | |
| 9 margin: 0; | |
| 10 overflow: hidden; | |
| 11 width: 100%; | |
| 12 } | |
| 13 | |
| 14 body { | |
| 15 -webkit-flex-direction: column; | |
| 16 display: -webkit-flex; | |
| 17 } | |
| 18 | |
| 19 list { | |
| 20 display: block; | |
| 21 overflow-x: hidden; | |
| 22 overflow-y: visible; /* let the container do the scrolling */ | |
| 23 } | |
| 24 | |
| 25 list > * { | |
| 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 | |
| 39 list > * > * { | |
| 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 | |
| 48 list > * > .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 | |
| 54 list > * > .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 | |
| 63 list > :hover > .url, | |
| 64 list > [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 */ | |
| 72 html[dir=rtl] .url { | |
| 73 -webkit-padding-end: 20px; | |
| 74 -webkit-padding-start: 0; | |
| 75 } | |
| 76 | |
| 77 html[dir=rtl] list .label { | |
| 78 background-position: 100% 50%; | |
| 79 } | |
| 80 | |
| 81 list > .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 */ | |
| 88 list > * > .label:empty::after, | |
| 89 list > * > .url:empty::after { | |
| 90 content: ' '; | |
| 91 white-space: pre; | |
| 92 } | |
| 93 | |
| 94 list > .folder > .url:empty::after { | |
| 95 content: ''; | |
| 96 } | |
| 97 | |
| 98 list > * > 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 | |
| 113 list > [selected]:hover > button, | |
| 114 list > * > button[menu-shown] { | |
| 115 border-color: hsl(214, 91%, 65%); | |
| 116 } | |
| 117 | |
| 118 list > :hover > button { | |
| 119 display: block; | |
| 120 } | |
| 121 | |
| 122 list > * > button:hover, | |
| 123 list > * > button[menu-shown] { | |
| 124 display: block; | |
| 125 } | |
| 126 | |
| 127 html[dir=rtl] list > * > button { | |
| 128 left: 3px; | |
| 129 right: auto; | |
| 130 } | |
| 131 | |
| 132 /* Edit mode */ | |
| 133 | |
| 134 list [editing] .label input, | |
| 135 list [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"> | |
| 161 list .label input, | |
| 162 list .url input { | |
| 163 outline: none; | |
| 164 } | |
| 165 </if> | |
| 166 | |
| 167 list > [editing] { | |
| 168 overflow: visible; | |
| 169 } | |
| 170 | |
| 171 list [editing] .label, | |
| 172 list [editing] .url, | |
| 173 list [editing] > * { | |
| 174 overflow: visible; | |
| 175 } | |
| 176 | |
| 177 list [editing] .url { | |
| 178 -webkit-padding-start: 5px; | |
| 179 } | |
| 180 | |
| 181 list [editing] input { | |
| 182 padding: 1px 0; | |
| 183 } | |
| 184 | |
| 185 /* end editing */ | |
| 186 | |
| 187 html[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"> | |
| 194 list > .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 | |
| 272 html: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 | |
| 286 html[dir=rtl] .logo, | |
| 287 html[dir=rtl] .header > div, | |
| 288 html[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 | |
| 326 list.drag-above::before { | |
| 327 top: 0 | |
| 328 } | |
| 329 | |
| 330 list > .drag-below, | |
| 331 list > .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 | |
| 362 html[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 } | |
| OLD | NEW |