src/chrome/browser/resources/bookmark_manager/css/bmm.css

   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
   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 }