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