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 <include src="../search_header.css">
   6
   7 html,
   8 body {
   9   cursor: default;
  10   height: 100%;
  11   margin: 0;
  12   overflow: hidden;
  13   width: 100%;
  14 }
  15
  16 body {
  17   display: flex;
  18   flex-direction: column;
  19 }
  20
  21 list {
  22   display: block;
  23   overflow-x: hidden;
  24   overflow-y: visible; /* let the container do the scrolling */
  25 }
  26
  27 list > * {
  28   -webkit-padding-end: 20px;
  29   -webkit-padding-start: 3px;
  30   color: hsl(0, 0%, 70%);
  31   display: flex;
  32   line-height: 20px;
  33   margin: 0;
  34   overflow: visible;
  35   padding-bottom: 0;
  36   padding-top: 0;
  37   text-decoration: none;
  38   white-space: nowrap;
  39 }
  40
  41 list > * > * {
  42   -webkit-padding-start: 20px;
  43   background: 0 50% no-repeat;
  44   box-sizing: border-box;
  45   overflow: hidden;
  46   text-overflow: ellipsis;
  47   white-space: pre; /* Don't collapse whitespace */
  48 }
  49
  50 list > * > .label {
  51   -webkit-transition: all 150ms;
  52   color: black;
  53   display: inline-block; /* We need to use inline-block here due to RTL. */
  54 }
  55
  56 list > * > .url {
  57   direction: ltr; /* URLs always read LTR */
  58   display: none;
  59   flex: 1;
  60 }
  61
  62 list > :hover > .url,
  63 list > [selected] > .url {
  64   display: block;
  65 }
  66
  67 /* Handle proper padding for URL field in an RTL context, where field order is
  68  * |div.url||div.label| - so we need padding at the right of URL, not at the
  69  * left. And since url is always LTR, that is padding at the end, not the start.
  70  */
  71 html[dir=rtl] .url {
  72   -webkit-padding-end: 20px;
  73   -webkit-padding-start: 0;
  74 }
  75
  76 html[dir=rtl] list .label {
  77   background-position: 100% 50%;
  78 }
  79
  80 list > .folder > .label {
  81   background-image: -webkit-image-set(
  82       url(../../../../../ui/resources/default_100_percent/common/folder_closed.png) 1x,
  83       url(../../../../../ui/resources/default_200_percent/common/folder_closed.png) 2x);
  84 }
  85
  86 /* We need to ensure that even empty labels take up space */
  87 list > * > .label:empty::after,
  88 list > * > .url:empty::after {
  89   content: ' ';
  90   white-space: pre;
  91 }
  92
  93 list > .folder > .url:empty::after {
  94   content: '';
  95 }
  96
  97 list > * > button {
  98   -webkit-transition: opacity 150ms;
  99   background: #fff
 100       url(../../../../../ui/webui/resources/images/drop_down_arrow_black.svg)
 101       no-repeat center center;
 102   border: 1px solid hsl(214, 91%, 85%);
 103   border-radius: 3px;
 104   bottom: 1px;
 105   display: none;
 106   overflow: hidden;
 107   padding: 0;
 108   position: absolute;
 109   right: 3px;
 110   top: 1px;
 111   width: 15px;
 112 }
 113
 114 list > [selected]:hover > button,
 115 list > * > button[menu-shown] {
 116   border-color: hsl(214, 91%, 65%);
 117 }
 118
 119 list > :hover > button {
 120   display: block;
 121 }
 122
 123 list > * > button:hover,
 124 list > * > button[menu-shown] {
 125   display: block;
 126 }
 127
 128 html[dir=rtl] list > * > button {
 129   left: 3px;
 130   right: auto;
 131 }
 132
 133 /* Edit mode */
 134
 135 list [editing] .label input,
 136 list [editing] .url input {
 137   -webkit-margin-end: 4px;
 138   -webkit-margin-start: -4px;
 139   -webkit-padding-end: 3px;
 140   -webkit-padding-start: 3px;
 141   box-sizing: content-box;
 142   font-family: inherit;
 143   font-size: inherit;
 144   font-weight: inherit;
 145   /* Do not inherit the line-height. */
 146   line-height: normal;
 147   margin-bottom: 0;
 148   margin-top: 0;
 149   min-height: 0;
 150   text-decoration: none;
 151   vertical-align: baseline;
 152 }
 153
 154 .tree-item [editing] input {
 155   line-height: normal;
 156   margin: 0;
 157   min-height: 0;
 158   padding: 1px 0;
 159 }
 160
 161 <if expr="is_macosx">
 162 list .label input,
 163 list .url input {
 164   outline: none;
 165 }
 166 </if>
 167
 168 list > [editing] {
 169   overflow: visible;
 170 }
 171
 172 list [editing] .label,
 173 list [editing] .url,
 174 list [editing] > * {
 175   overflow: visible;
 176 }
 177
 178 list [editing] .url {
 179   -webkit-padding-start: 5px;
 180 }
 181
 182 list [editing] input {
 183   padding: 1px 0;
 184 }
 185
 186 /* end editing */
 187
 188 html[dir=rtl] list > .folder > .label {
 189   background-image: -webkit-image-set(
 190       url(../../../../../ui/resources/default_100_percent/common/folder_closed_rtl.png) 1x,
 191       url(../../../../../ui/resources/default_200_percent/common/folder_closed_rtl.png) 2x);
 192 }
 193
 194 <if expr="is_macosx">
 195 list > .folder > .label,
 196 .tree-label,
 197 .tree-row[may-have-children] > .tree-label,
 198 .tree-item[expanded] > .tree-row > .tree-label {
 199   background-image: -webkit-image-set(
 200       url(../../../../app/theme/default_100_percent/mac/bookmark_bar_folder.png) 1x,
 201       url(../../../../app/theme/default_200_percent/mac/bookmark_bar_folder.png) 2x);
 202 }
 203 </if>
 204
 205 .main {
 206   border-top: 1px solid rgb(156, 194, 239);
 207   display: flex;
 208   flex: 1;
 209 }
 210
 211 .pane,
 212 .splitter {
 213   display: flex;
 214   flex-direction: column;
 215 }
 216
 217 .pane > :first-child,
 218 .splitter > :first-child {
 219   background-color: rgb(235, 239, 249);
 220   flex: none;
 221   padding: 5px 10px;
 222   white-space: nowrap;
 223 }
 224
 225 .splitter > :first-child {
 226   overflow: hidden;
 227   padding-left: 0;
 228   padding-right: 0;
 229   width: 15px;
 230 }
 231
 232 .splitter button {
 233   visibility: hidden;  /* This button is only used for height matching. */
 234 }
 235
 236 #tree-pane {
 237   /* min-width and max-width are used by the split pane. */
 238   max-width: 50%;
 239   min-width: 150px;
 240   width: 200px;
 241 }
 242
 243 #list-pane {
 244   flex: 1;
 245 }
 246
 247 #list-pane > :first-child {
 248   -webkit-padding-start: 0;  /* Accounts for extra splitter resize width. */
 249 }
 250
 251 #tree-container {
 252   overflow: auto;
 253 }
 254
 255 #list,
 256 #tree-container {
 257   flex: 1;
 258 }
 259
 260 #tree,
 261 #list {
 262   -webkit-padding-end: 5px;
 263   box-sizing: border-box;
 264   display: inline-block;
 265   min-width: 100%;
 266   padding-bottom: 5px;
 267   padding-top: 5px;
 268 }
 269
 270 #tree {
 271   /* Only pad the tree as the splitter adds a lot of whitespace for the list. */
 272   -webkit-padding-start: 10px;
 273 }
 274
 275 .tree-item > .tree-row {
 276   line-height: 20px;
 277 }
 278
 279 .tree-row .expand-icon {
 280   top: 2px;
 281 }
 282
 283 .splitter {
 284   border-left: 5px solid rgb(235, 239, 249);
 285   cursor: e-resize;
 286 <if expr="is_macosx">
 287   cursor: col-resize;
 288 </if>
 289   overflow-x: hidden;
 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   font-size: 100%;
 337   margin: 0;
 338 }
 339
 340 #folders-button,
 341 #organize-button,
 342 .splitter button {
 343   -webkit-appearance: none;
 344   -webkit-padding-end: 11px;
 345   -webkit-padding-start: 0;
 346   background: transparent
 347       url(../../../../../ui/webui/resources/images/drop_down_arrow_black.svg)
 348       no-repeat right center;
 349   border: 0;
 350   font: inherit;
 351   font-weight: bold;
 352   padding-bottom: 0;
 353   padding-top: 0;
 354 }
 355
 356 #folders-button {
 357   -webkit-margin-start: 16px;
 358 }
 359
 360 #organize-button {
 361   -webkit-margin-start: 4px;
 362 }
 363
 364 html[dir=rtl] #folders-button,
 365 html[dir=rtl] #organize-button {
 366   background-position: left center;
 367 }
 368
 369 @media (pointer:coarse) {
 370   list > *,
 371   cr-menu > button,
 372   .tree-item > .tree-row {
 373     line-height: 28px;
 374   }
 375
 376   list [editing] input,
 377   .tree-item [editing] input {
 378     padding: 3px 0;
 379   }
 380
 381   .tree-row .expand-icon {
 382     top: 6px;
 383   }
 384 }