| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!-
- |
| 2 @license |
| 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><!-- |
| 10 @license |
| 11 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. |
| 12 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 14 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 15 Code distributed by Google as part of the polymer project is also |
| 16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 17 --><!-- |
| 18 @license |
| 19 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 20 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 21 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 22 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 23 Code distributed by Google as part of the polymer project is also |
| 24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 25 --> |
| 26 <meta charset="utf8"> |
| 27 <title>$i18n{title}</title> |
| 28 |
| 29 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| 30 <style> |
| 31 /* Copyright 2016 The Chromium Authors. All rights reserved. |
| 32 * Use of this source code is governed by a BSD-style license that can be |
| 33 * found in the LICENSE file. */ |
| 34 |
| 35 :root { |
| 36 /* This is a custom, Chrome-specific color that does not have a --paper or |
| 37 * --google equivalent. */ |
| 38 --md-background-color: rgb(241, 241, 241); |
| 39 /* This is --google-blue-700, rewritten as a native custom property for speed. |
| 40 */ |
| 41 --md-toolbar-color: rgb(51, 103, 214); |
| 42 } |
| 43 |
| 44 </style> |
| 45 |
| 46 <style> |
| 47 html, |
| 48 body { |
| 49 height: 100%; |
| 50 margin: 0; |
| 51 } |
| 52 |
| 53 body { |
| 54 background: var(--md-background-color); |
| 55 } |
| 56 |
| 57 /* Minimal styling required to display app shim. */ |
| 58 .loading history-app { |
| 59 visibility: hidden; |
| 60 } |
| 61 |
| 62 #app-shim { |
| 63 display: none; |
| 64 } |
| 65 |
| 66 .loading #app-shim { |
| 67 bottom: 0; |
| 68 display: flex; |
| 69 flex-direction: column; |
| 70 font-size: 123%; |
| 71 height: 100%; |
| 72 left: 0; |
| 73 position: absolute; |
| 74 right: 0; |
| 75 top: 0; |
| 76 } |
| 77 |
| 78 #app-shim span { |
| 79 display: flex; |
| 80 } |
| 81 |
| 82 #loading-toolbar { |
| 83 -webkit-padding-start: 24px; |
| 84 align-items: center; |
| 85 background: var(--md-toolbar-color); |
| 86 color: #fff; |
| 87 height: 56px; |
| 88 } |
| 89 |
| 90 #loading-message { |
| 91 align-items: center; |
| 92 color: #b4b4b4; |
| 93 flex: 1; |
| 94 font-weight: 500; |
| 95 justify-content: center; |
| 96 } |
| 97 </style> |
| 98 </head> |
| 99 |
| 100 <body class="loading"><div hidden="" by-vulcanize=""><script src="chrome://resou
rces/js/load_time_data.js"></script> |
| 101 <style> |
| 102 /* IE 10 support for HTML5 hidden attr */ |
| 103 [hidden] { |
| 104 display: none !important; |
| 105 } |
| 106 </style> |
| 107 |
| 108 <style is="custom-style"> |
| 109 :root { |
| 110 |
| 111 --layout: { |
| 112 display: -ms-flexbox; |
| 113 display: -webkit-flex; |
| 114 display: flex; |
| 115 }; |
| 116 |
| 117 --layout-inline: { |
| 118 display: -ms-inline-flexbox; |
| 119 display: -webkit-inline-flex; |
| 120 display: inline-flex; |
| 121 }; |
| 122 |
| 123 --layout-horizontal: { |
| 124 @apply(--layout); |
| 125 |
| 126 -ms-flex-direction: row; |
| 127 -webkit-flex-direction: row; |
| 128 flex-direction: row; |
| 129 }; |
| 130 |
| 131 --layout-horizontal-reverse: { |
| 132 @apply(--layout); |
| 133 |
| 134 -ms-flex-direction: row-reverse; |
| 135 -webkit-flex-direction: row-reverse; |
| 136 flex-direction: row-reverse; |
| 137 }; |
| 138 |
| 139 --layout-vertical: { |
| 140 @apply(--layout); |
| 141 |
| 142 -ms-flex-direction: column; |
| 143 -webkit-flex-direction: column; |
| 144 flex-direction: column; |
| 145 }; |
| 146 |
| 147 --layout-vertical-reverse: { |
| 148 @apply(--layout); |
| 149 |
| 150 -ms-flex-direction: column-reverse; |
| 151 -webkit-flex-direction: column-reverse; |
| 152 flex-direction: column-reverse; |
| 153 }; |
| 154 |
| 155 --layout-wrap: { |
| 156 -ms-flex-wrap: wrap; |
| 157 -webkit-flex-wrap: wrap; |
| 158 flex-wrap: wrap; |
| 159 }; |
| 160 |
| 161 --layout-wrap-reverse: { |
| 162 -ms-flex-wrap: wrap-reverse; |
| 163 -webkit-flex-wrap: wrap-reverse; |
| 164 flex-wrap: wrap-reverse; |
| 165 }; |
| 166 |
| 167 --layout-flex-auto: { |
| 168 -ms-flex: 1 1 auto; |
| 169 -webkit-flex: 1 1 auto; |
| 170 flex: 1 1 auto; |
| 171 }; |
| 172 |
| 173 --layout-flex-none: { |
| 174 -ms-flex: none; |
| 175 -webkit-flex: none; |
| 176 flex: none; |
| 177 }; |
| 178 |
| 179 --layout-flex: { |
| 180 -ms-flex: 1 1 0.000000001px; |
| 181 -webkit-flex: 1; |
| 182 flex: 1; |
| 183 -webkit-flex-basis: 0.000000001px; |
| 184 flex-basis: 0.000000001px; |
| 185 }; |
| 186 |
| 187 --layout-flex-2: { |
| 188 -ms-flex: 2; |
| 189 -webkit-flex: 2; |
| 190 flex: 2; |
| 191 }; |
| 192 |
| 193 --layout-flex-3: { |
| 194 -ms-flex: 3; |
| 195 -webkit-flex: 3; |
| 196 flex: 3; |
| 197 }; |
| 198 |
| 199 --layout-flex-4: { |
| 200 -ms-flex: 4; |
| 201 -webkit-flex: 4; |
| 202 flex: 4; |
| 203 }; |
| 204 |
| 205 --layout-flex-5: { |
| 206 -ms-flex: 5; |
| 207 -webkit-flex: 5; |
| 208 flex: 5; |
| 209 }; |
| 210 |
| 211 --layout-flex-6: { |
| 212 -ms-flex: 6; |
| 213 -webkit-flex: 6; |
| 214 flex: 6; |
| 215 }; |
| 216 |
| 217 --layout-flex-7: { |
| 218 -ms-flex: 7; |
| 219 -webkit-flex: 7; |
| 220 flex: 7; |
| 221 }; |
| 222 |
| 223 --layout-flex-8: { |
| 224 -ms-flex: 8; |
| 225 -webkit-flex: 8; |
| 226 flex: 8; |
| 227 }; |
| 228 |
| 229 --layout-flex-9: { |
| 230 -ms-flex: 9; |
| 231 -webkit-flex: 9; |
| 232 flex: 9; |
| 233 }; |
| 234 |
| 235 --layout-flex-10: { |
| 236 -ms-flex: 10; |
| 237 -webkit-flex: 10; |
| 238 flex: 10; |
| 239 }; |
| 240 |
| 241 --layout-flex-11: { |
| 242 -ms-flex: 11; |
| 243 -webkit-flex: 11; |
| 244 flex: 11; |
| 245 }; |
| 246 |
| 247 --layout-flex-12: { |
| 248 -ms-flex: 12; |
| 249 -webkit-flex: 12; |
| 250 flex: 12; |
| 251 }; |
| 252 |
| 253 /* alignment in cross axis */ |
| 254 |
| 255 --layout-start: { |
| 256 -ms-flex-align: start; |
| 257 -webkit-align-items: flex-start; |
| 258 align-items: flex-start; |
| 259 }; |
| 260 |
| 261 --layout-center: { |
| 262 -ms-flex-align: center; |
| 263 -webkit-align-items: center; |
| 264 align-items: center; |
| 265 }; |
| 266 |
| 267 --layout-end: { |
| 268 -ms-flex-align: end; |
| 269 -webkit-align-items: flex-end; |
| 270 align-items: flex-end; |
| 271 }; |
| 272 |
| 273 --layout-baseline: { |
| 274 -ms-flex-align: baseline; |
| 275 -webkit-align-items: baseline; |
| 276 align-items: baseline; |
| 277 }; |
| 278 |
| 279 /* alignment in main axis */ |
| 280 |
| 281 --layout-start-justified: { |
| 282 -ms-flex-pack: start; |
| 283 -webkit-justify-content: flex-start; |
| 284 justify-content: flex-start; |
| 285 }; |
| 286 |
| 287 --layout-center-justified: { |
| 288 -ms-flex-pack: center; |
| 289 -webkit-justify-content: center; |
| 290 justify-content: center; |
| 291 }; |
| 292 |
| 293 --layout-end-justified: { |
| 294 -ms-flex-pack: end; |
| 295 -webkit-justify-content: flex-end; |
| 296 justify-content: flex-end; |
| 297 }; |
| 298 |
| 299 --layout-around-justified: { |
| 300 -ms-flex-pack: distribute; |
| 301 -webkit-justify-content: space-around; |
| 302 justify-content: space-around; |
| 303 }; |
| 304 |
| 305 --layout-justified: { |
| 306 -ms-flex-pack: justify; |
| 307 -webkit-justify-content: space-between; |
| 308 justify-content: space-between; |
| 309 }; |
| 310 |
| 311 --layout-center-center: { |
| 312 @apply(--layout-center); |
| 313 @apply(--layout-center-justified); |
| 314 }; |
| 315 |
| 316 /* self alignment */ |
| 317 |
| 318 --layout-self-start: { |
| 319 -ms-align-self: flex-start; |
| 320 -webkit-align-self: flex-start; |
| 321 align-self: flex-start; |
| 322 }; |
| 323 |
| 324 --layout-self-center: { |
| 325 -ms-align-self: center; |
| 326 -webkit-align-self: center; |
| 327 align-self: center; |
| 328 }; |
| 329 |
| 330 --layout-self-end: { |
| 331 -ms-align-self: flex-end; |
| 332 -webkit-align-self: flex-end; |
| 333 align-self: flex-end; |
| 334 }; |
| 335 |
| 336 --layout-self-stretch: { |
| 337 -ms-align-self: stretch; |
| 338 -webkit-align-self: stretch; |
| 339 align-self: stretch; |
| 340 }; |
| 341 |
| 342 --layout-self-baseline: { |
| 343 -ms-align-self: baseline; |
| 344 -webkit-align-self: baseline; |
| 345 align-self: baseline; |
| 346 }; |
| 347 |
| 348 /* multi-line alignment in main axis */ |
| 349 |
| 350 --layout-start-aligned: { |
| 351 -ms-flex-line-pack: start; /* IE10 */ |
| 352 -ms-align-content: flex-start; |
| 353 -webkit-align-content: flex-start; |
| 354 align-content: flex-start; |
| 355 }; |
| 356 |
| 357 --layout-end-aligned: { |
| 358 -ms-flex-line-pack: end; /* IE10 */ |
| 359 -ms-align-content: flex-end; |
| 360 -webkit-align-content: flex-end; |
| 361 align-content: flex-end; |
| 362 }; |
| 363 |
| 364 --layout-center-aligned: { |
| 365 -ms-flex-line-pack: center; /* IE10 */ |
| 366 -ms-align-content: center; |
| 367 -webkit-align-content: center; |
| 368 align-content: center; |
| 369 }; |
| 370 |
| 371 --layout-between-aligned: { |
| 372 -ms-flex-line-pack: justify; /* IE10 */ |
| 373 -ms-align-content: space-between; |
| 374 -webkit-align-content: space-between; |
| 375 align-content: space-between; |
| 376 }; |
| 377 |
| 378 --layout-around-aligned: { |
| 379 -ms-flex-line-pack: distribute; /* IE10 */ |
| 380 -ms-align-content: space-around; |
| 381 -webkit-align-content: space-around; |
| 382 align-content: space-around; |
| 383 }; |
| 384 |
| 385 /******************************* |
| 386 Other Layout |
| 387 *******************************/ |
| 388 |
| 389 --layout-block: { |
| 390 display: block; |
| 391 }; |
| 392 |
| 393 --layout-invisible: { |
| 394 visibility: hidden !important; |
| 395 }; |
| 396 |
| 397 --layout-relative: { |
| 398 position: relative; |
| 399 }; |
| 400 |
| 401 --layout-fit: { |
| 402 position: absolute; |
| 403 top: 0; |
| 404 right: 0; |
| 405 bottom: 0; |
| 406 left: 0; |
| 407 }; |
| 408 |
| 409 --layout-scroll: { |
| 410 -webkit-overflow-scrolling: touch; |
| 411 overflow: auto; |
| 412 }; |
| 413 |
| 414 --layout-fullbleed: { |
| 415 margin: 0; |
| 416 height: 100vh; |
| 417 }; |
| 418 |
| 419 /* fixed position */ |
| 420 |
| 421 --layout-fixed-top: { |
| 422 position: fixed; |
| 423 top: 0; |
| 424 left: 0; |
| 425 right: 0; |
| 426 }; |
| 427 |
| 428 --layout-fixed-right: { |
| 429 position: fixed; |
| 430 top: 0; |
| 431 right: 0; |
| 432 bottom: 0; |
| 433 }; |
| 434 |
| 435 --layout-fixed-bottom: { |
| 436 position: fixed; |
| 437 right: 0; |
| 438 bottom: 0; |
| 439 left: 0; |
| 440 }; |
| 441 |
| 442 --layout-fixed-left: { |
| 443 position: fixed; |
| 444 top: 0; |
| 445 bottom: 0; |
| 446 left: 0; |
| 447 }; |
| 448 |
| 449 } |
| 450 |
| 451 </style> |
| 452 |
| 453 |
| 454 <dom-module id="app-drawer" assetpath="chrome://resources/polymer/v1_0/app-layou
t/app-drawer/"> |
| 455 <template> |
| 456 <style> |
| 457 :host { |
| 458 position: fixed; |
| 459 top: -120px; |
| 460 right: 0; |
| 461 bottom: -120px; |
| 462 left: 0; |
| 463 |
| 464 visibility: hidden; |
| 465 |
| 466 transition: visibility 0.2s ease; |
| 467 } |
| 468 |
| 469 :host([opened]) { |
| 470 visibility: visible; |
| 471 } |
| 472 |
| 473 :host([persistent]) { |
| 474 width: var(--app-drawer-width, 256px); |
| 475 } |
| 476 |
| 477 :host([persistent][position=left]) { |
| 478 right: auto; |
| 479 } |
| 480 |
| 481 :host([persistent][position=right]) { |
| 482 left: auto; |
| 483 } |
| 484 |
| 485 #contentContainer { |
| 486 position: absolute; |
| 487 top: 0; |
| 488 bottom: 0; |
| 489 left: 0; |
| 490 |
| 491 width: var(--app-drawer-width, 256px); |
| 492 padding: 120px 0; |
| 493 |
| 494 transition: 0.2s ease; |
| 495 transition-property: -webkit-transform; |
| 496 transition-property: transform; |
| 497 -webkit-transform: translate3d(-100%, 0, 0); |
| 498 transform: translate3d(-100%, 0, 0); |
| 499 |
| 500 background-color: #FFF; |
| 501 |
| 502 @apply(--app-drawer-content-container); |
| 503 } |
| 504 |
| 505 :host([position=right]) > #contentContainer { |
| 506 right: 0; |
| 507 left: auto; |
| 508 |
| 509 -webkit-transform: translate3d(100%, 0, 0); |
| 510 transform: translate3d(100%, 0, 0); |
| 511 } |
| 512 |
| 513 :host([swipe-open]) > #contentContainer::after { |
| 514 position: fixed; |
| 515 top: 0; |
| 516 bottom: 0; |
| 517 left: 100%; |
| 518 |
| 519 visibility: visible; |
| 520 |
| 521 width: 20px; |
| 522 |
| 523 content: ''; |
| 524 } |
| 525 |
| 526 :host([swipe-open][position=right]) > #contentContainer::after { |
| 527 right: 100%; |
| 528 left: auto; |
| 529 } |
| 530 |
| 531 :host([opened]) > #contentContainer { |
| 532 -webkit-transform: translate3d(0, 0, 0); |
| 533 transform: translate3d(0, 0, 0); |
| 534 } |
| 535 |
| 536 #scrim { |
| 537 position: absolute; |
| 538 top: 0; |
| 539 right: 0; |
| 540 bottom: 0; |
| 541 left: 0; |
| 542 |
| 543 transition: opacity 0.2s ease; |
| 544 -webkit-transform: translateZ(0); |
| 545 transform: translateZ(0); |
| 546 |
| 547 opacity: 0; |
| 548 background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5)); |
| 549 } |
| 550 |
| 551 :host([opened]) > #scrim { |
| 552 opacity: 1; |
| 553 } |
| 554 |
| 555 :host([opened][persistent]) > #scrim { |
| 556 visibility: hidden; |
| 557 /** |
| 558 * NOTE(keanulee): Keep both opacity: 0 and visibility: hidden to preven
t the |
| 559 * scrim from showing when toggling between closed and opened/persistent
. |
| 560 */ |
| 561 |
| 562 opacity: 0; |
| 563 } |
| 564 </style> |
| 565 |
| 566 <div id="scrim" on-tap="close"></div> |
| 567 |
| 568 <div id="contentContainer"> |
| 569 <content></content> |
| 570 </div> |
| 571 </template> |
| 572 |
| 573 </dom-module> |
| 574 <dom-module id="app-location" assetpath="chrome://resources/polymer/v1_0/app-rou
te/"> |
| 575 <template> |
| 576 <iron-location path="{{__path}}" query="{{__query}}" hash="{{__hash}}" url-s
pace-regex="{{urlSpaceRegex}}"> |
| 577 </iron-location> |
| 578 <iron-query-params params-string="{{__query}}" params-object="{{queryParams}
}"> |
| 579 </iron-query-params> |
| 580 </template> |
| 581 </dom-module> |
| 582 <dom-module id="iron-pages" assetpath="chrome://resources/polymer/v1_0/iron-page
s/"> |
| 583 |
| 584 <template> |
| 585 <style> |
| 586 :host { |
| 587 display: block; |
| 588 } |
| 589 |
| 590 :host > ::content > :not(.iron-selected) { |
| 591 display: none !important; |
| 592 } |
| 593 </style> |
| 594 |
| 595 <content></content> |
| 596 </template> |
| 597 |
| 598 </dom-module> |
| 599 <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/
"> |
| 600 <template> |
| 601 <style> |
| 602 :host { |
| 603 @apply(--layout-inline); |
| 604 @apply(--layout-center-center); |
| 605 position: relative; |
| 606 |
| 607 vertical-align: middle; |
| 608 |
| 609 fill: var(--iron-icon-fill-color, currentcolor); |
| 610 stroke: var(--iron-icon-stroke-color, none); |
| 611 |
| 612 width: var(--iron-icon-width, 24px); |
| 613 height: var(--iron-icon-height, 24px); |
| 614 } |
| 615 </style> |
| 616 </template> |
| 617 |
| 618 </dom-module> |
| 619 <iron-iconset-svg name="hardware" size="24"> |
| 620 <svg><defs> |
| 621 <g id="cast"><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V
5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3
.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z"></path></g> |
| 622 <g id="cast-connected"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24
5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2
c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7
v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></g> |
| 623 <g id="computer"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1
0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"></path></g> |
| 624 <g id="desktop-mac"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8
v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z"></path></g> |
| 625 <g id="desktop-windows"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v
2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"></path></g> |
| 626 <g id="developer-board"><path d="M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v1
4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H4V5h14v14zM6
13h5v4H6zm6-6h4v3h-4zM6 7h5v5H6zm6 4h4v6h-4z"></path></g> |
| 627 <g id="device-hub"><path d="M17 16l-4-4V8.82C14.16 8.4 15 7.3 15 6c0-1.66-1.34-3
-3-3S9 4.34 9 6c0 1.3.84 2.4 2 2.82V12l-4 4H3v5h5v-3.05l4-4.2 4 4.2V21h5v-5h-4z"
></path></g> |
| 628 <g id="devices-other"><path d="M3 6h18V4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2
H3V6zm10 6H9v1.78c-.61.55-1 1.33-1 2.22s.39 1.67 1 2.22V20h4v-1.78c.61-.55 1-1.3
4 1-2.22s-.39-1.67-1-2.22V12zm-2 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.
67 1.5 1.5-.67 1.5-1.5 1.5zM22 8h-6c-.5 0-1 .5-1 1v10c0 .5.5 1 1 1h6c.5 0 1-.5 1
-1V9c0-.5-.5-1-1-1zm-1 10h-4v-8h4v8z"></path></g> |
| 629 <g id="dock"><path d="M8 23h8v-2H8v2zm8-21.99L8 1c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2
2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM16 15H8V5h8v10z"></path></g> |
| 630 <g id="gamepad"><path d="M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V
22h6v-5.5l-3-3-3 3zM16.5 9l-3 3 3 3H22V9h-5.5z"></path></g> |
| 631 <g id="headset"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c
0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"><
/path></g> |
| 632 <g id="headset-mic"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5
v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h4v1h-7v2h6c1.66 0 3-1.34 3-3V10c0-4.97-4
.03-9-9-9z"></path></g> |
| 633 <g id="keyboard"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1
0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2
H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3
3h-2v-2h2v2zm0-3h-2V8h2v2z"></path></g> |
| 634 <g id="keyboard-arrow-down"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-
6-6z"></path></g> |
| 635 <g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6
6 6 6z"></path></g> |
| 636 <g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6
6-6 6z"></path></g> |
| 637 <g id="keyboard-arrow-up"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6
z"></path></g> |
| 638 <g id="keyboard-backspace"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41
L6.83 13H21z"></path></g> |
| 639 <g id="keyboard-capslock"><path d="M12 8.41L16.59 13 18 11.59l-6-6-6 6L7.41 13 1
2 8.41zM6 18h12v-2H6v2z"></path></g> |
| 640 <g id="keyboard-hide"><path d="M20 3H4c-1.1 0-1.99.9-1.99 2L2 15c0 1.1.9 2 2 2h1
6c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 3h2v2h-2V6zm0 3h2v2h-2V9zM8 6h2v2H8V6zm0 3
h2v2H8V9zm-1 2H5V9h2v2zm0-3H5V6h2v2zm9 7H8v-2h8v2zm0-4h-2V9h2v2zm0-3h-2V6h2v2zm3
3h-2V9h2v2zm0-3h-2V6h2v2zm-7 15l4-4H8l4 4z"></path></g> |
| 641 <g id="keyboard-return"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5
.83 13H21V7z"></path></g> |
| 642 <g id="keyboard-tab"><path d="M11.59 7.41L15.17 11H1v2h14.17l-3.59 3.59L13 18l6-
6-6-6-1.41 1.41zM20 6v12h2V6h-2z"></path></g> |
| 643 <g id="keyboard-voice"><path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-
3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5
c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"></path></g> |
| 644 <g id="laptop"><path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2
v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"></path></g> |
| 645 <g id="laptop-chromebook"><path d="M22 18V3H2v15H0v2h24v-2h-2zm-8 0h-4v-1h4v1zm6
-3H4V5h16v10z"></path></g> |
| 646 <g id="laptop-mac"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1
.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4
V5zm8 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></g> |
| 647 <g id="laptop-windows"><path d="M20 18v-1c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2
-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2v1H0v2h24v-2h-4zM4 5h16v10H4V5z"></path></g
> |
| 648 <g id="memory"><path d="M15 9H9v6h6V9zm-2 4h-2v-2h2v2zm8-2V9h-2V7c0-1.1-.9-2-2-2
h-2V3h-2v2h-2V3H9v2H7c-1.1 0-2 .9-2 2v2H3v2h2v2H3v2h2v2c0 1.1.9 2 2 2h2v2h2v-2h2
v2h2v-2h2c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2zm-4 6H7V7h10v10z"></path></g> |
| 649 <g id="mouse"><path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8
8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z"></path></g> |
| 650 <g id="phone-android"><path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c
1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z">
</path></g> |
| 651 <g id="phone-iphone"><path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23
7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.6
7-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"></pat
h></g> |
| 652 <g id="phonelink"><path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6
c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4
v-7h4v7z"></path></g> |
| 653 <g id="phonelink-off"><path d="M22 6V4H6.82l2 2H22zM1.92 1.65L.65 2.92l1.82 1.82
C2.18 5.08 2 5.52 2 6v11H0v3h17.73l2.35 2.35 1.27-1.27L3.89 3.62 1.92 1.65zM4 6.
27L14.73 17H4V6.27zM23 8h-6c-.55 0-1 .45-1 1v4.18l2 2V10h4v7h-2.18l3 3H23c.55 0
1-.45 1-1V9c0-.55-.45-1-1-1z"></path></g> |
| 654 <g id="power-input"><path d="M2 9v2h19V9H2zm0 6h5v-2H2v2zm7 0h5v-2H9v2zm7 0h5v-2
h-5v2z"></path></g> |
| 655 <g id="router"><path d="M20.2 5.9l.8-.8C19.6 3.7 17.8 3 16 3s-3.6.7-5 2.1l.8.8C1
3 4.8 14.5 4.2 16 4.2s3 .6 4.2 1.7zm-.9.8c-.9-.9-2.1-1.4-3.3-1.4s-2.4.5-3.3 1.4l
.8.8c.7-.7 1.6-1 2.5-1 .9 0 1.8.3 2.5 1l.8-.8zM19 13h-2V9h-2v4H5c-1.1 0-2 .9-2 2
v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM8 18H6v-2h2v2zm3.5 0h-2v-2
h2v2zm3.5 0h-2v-2h2v2z"></path></g> |
| 656 <g id="scanner"><path d="M19.8 10.7L4.2 5l-.7 1.9L17.6 12H5c-1.1 0-2 .9-2 2v4c0
1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5.5c0-.8-.5-1.6-1.2-1.8zM7 17H5v-2h2v2zm12 0H9v-2
h10v2z"></path></g> |
| 657 <g id="security"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-
12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path></g
> |
| 658 <g id="sim-card"><path d="M19.99 4c0-1.1-.89-2-1.99-2h-8L4 8v12c0 1.1.9 2 2 2h12
.01c1.1 0 1.99-.9 1.99-2l-.01-16zM9 19H7v-2h2v2zm8 0h-2v-2h2v2zm-8-4H7v-4h2v4zm4
4h-2v-4h2v4zm0-6h-2v-2h2v2zm4 2h-2v-4h2v4z"></path></g> |
| 659 <g id="smartphone"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1
0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"></path></g> |
| 660 <g id="speaker"><path d="M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 1.99 2 1.99L17 22c1.
1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 2c1.1 0 2 .9 2 2s-.9 2-2 2c-1.11 0-2-.9-2-2s.8
9-2 2-2zm0 16c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3
1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></g> |
| 661 <g id="speaker-group"><path d="M18.2 1H9.8C8.81 1 8 1.81 8 2.8v14.4c0 .99.81 1.7
9 1.8 1.79l8.4.01c.99 0 1.8-.81 1.8-1.8V2.8c0-.99-.81-1.8-1.8-1.8zM14 3c1.1 0 2
.89 2 2s-.9 2-2 2-2-.89-2-2 .9-2 2-2zm0 13.5c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.7
9 4 4-1.79 4-4 4z"></path><circle cx="14" cy="12.5" r="2.5"></circle><path d="M6
5H4v16c0 1.1.89 2 2 2h10v-2H6V5z"></path></g> |
| 662 <g id="tablet"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.
9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z"></path></g> |
| 663 <g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h1
2c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z
"></path></g> |
| 664 <g id="tablet-mac"><path d="M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4
.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.6
7-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z"></pa
th></g> |
| 665 <g id="toys"><path d="M12 12c0-3 2.5-5.5 5.5-5.5S23 9 23 12H12zm0 0c0 3-2.5 5.5-
5.5 5.5S1 15 1 12h11zm0 0c-3 0-5.5-2.5-5.5-5.5S9 1 12 1v11zm0 0c3 0 5.5 2.5 5.5
5.5S15 23 12 23V12z"></path></g> |
| 666 <g id="tv"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.
99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"></path></g> |
| 667 <g id="videogame-asset"><path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1
0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.
67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.
5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></g> |
| 668 <g id="watch"><path d="M20 12c0-2.54-1.19-4.81-3.04-6.27L16 0H8l-.95 5.73C5.19 7
.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54 20 12zM
6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z"></path></g> |
| 669 </defs></svg> |
| 670 </iron-iconset-svg> |
| 671 <dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-r
ipple/"> |
| 672 |
| 673 <template> |
| 674 <style> |
| 675 :host { |
| 676 display: block; |
| 677 position: absolute; |
| 678 border-radius: inherit; |
| 679 overflow: hidden; |
| 680 top: 0; |
| 681 left: 0; |
| 682 right: 0; |
| 683 bottom: 0; |
| 684 |
| 685 /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers
, |
| 686 * creating a node (with a position:absolute) in the middle of an event |
| 687 * handler "interrupts" that event handler (which happens when the |
| 688 * ripple is created on demand) */ |
| 689 pointer-events: none; |
| 690 } |
| 691 |
| 692 :host([animating]) { |
| 693 /* This resolves a rendering issue in Chrome (as of 40) where the |
| 694 ripple is not properly clipped by its parent (which may have |
| 695 rounded corners). See: http://jsbin.com/temexa/4 |
| 696 |
| 697 Note: We only apply this style conditionally. Otherwise, the browser |
| 698 will create a new compositing layer for every ripple element on the |
| 699 page, and that would be bad. */ |
| 700 -webkit-transform: translate(0, 0); |
| 701 transform: translate3d(0, 0, 0); |
| 702 } |
| 703 |
| 704 #background, |
| 705 #waves, |
| 706 .wave-container, |
| 707 .wave { |
| 708 pointer-events: none; |
| 709 position: absolute; |
| 710 top: 0; |
| 711 left: 0; |
| 712 width: 100%; |
| 713 height: 100%; |
| 714 } |
| 715 |
| 716 #background, |
| 717 .wave { |
| 718 opacity: 0; |
| 719 } |
| 720 |
| 721 #waves, |
| 722 .wave { |
| 723 overflow: hidden; |
| 724 } |
| 725 |
| 726 .wave-container, |
| 727 .wave { |
| 728 border-radius: 50%; |
| 729 } |
| 730 |
| 731 :host(.circle) #background, |
| 732 :host(.circle) #waves { |
| 733 border-radius: 50%; |
| 734 } |
| 735 |
| 736 :host(.circle) .wave-container { |
| 737 overflow: hidden; |
| 738 } |
| 739 </style> |
| 740 |
| 741 <div id="background"></div> |
| 742 <div id="waves"></div> |
| 743 </template> |
| 744 </dom-module> |
| 745 <style is="custom-style"> |
| 746 |
| 747 :root { |
| 748 |
| 749 --shadow-transition: { |
| 750 transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); |
| 751 }; |
| 752 |
| 753 --shadow-none: { |
| 754 box-shadow: none; |
| 755 }; |
| 756 |
| 757 /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */ |
| 758 |
| 759 --shadow-elevation-2dp: { |
| 760 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 761 0 1px 5px 0 rgba(0, 0, 0, 0.12), |
| 762 0 3px 1px -2px rgba(0, 0, 0, 0.2); |
| 763 }; |
| 764 |
| 765 --shadow-elevation-3dp: { |
| 766 box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), |
| 767 0 1px 8px 0 rgba(0, 0, 0, 0.12), |
| 768 0 3px 3px -2px rgba(0, 0, 0, 0.4); |
| 769 }; |
| 770 |
| 771 --shadow-elevation-4dp: { |
| 772 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), |
| 773 0 1px 10px 0 rgba(0, 0, 0, 0.12), |
| 774 0 2px 4px -1px rgba(0, 0, 0, 0.4); |
| 775 }; |
| 776 |
| 777 --shadow-elevation-6dp: { |
| 778 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), |
| 779 0 1px 18px 0 rgba(0, 0, 0, 0.12), |
| 780 0 3px 5px -1px rgba(0, 0, 0, 0.4); |
| 781 }; |
| 782 |
| 783 --shadow-elevation-8dp: { |
| 784 box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), |
| 785 0 3px 14px 2px rgba(0, 0, 0, 0.12), |
| 786 0 5px 5px -3px rgba(0, 0, 0, 0.4); |
| 787 }; |
| 788 |
| 789 --shadow-elevation-12dp: { |
| 790 box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), |
| 791 0 4px 22px 3px rgba(0, 0, 0, 0.12), |
| 792 0 6px 7px -4px rgba(0, 0, 0, 0.4); |
| 793 }; |
| 794 |
| 795 --shadow-elevation-16dp: { |
| 796 box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), |
| 797 0 6px 30px 5px rgba(0, 0, 0, 0.12), |
| 798 0 8px 10px -5px rgba(0, 0, 0, 0.4); |
| 799 }; |
| 800 |
| 801 } |
| 802 |
| 803 </style> |
| 804 <dom-module id="paper-material-shared-styles" assetpath="chrome://resources/poly
mer/v1_0/paper-material/"> |
| 805 <template> |
| 806 <style> |
| 807 :host { |
| 808 display: block; |
| 809 position: relative; |
| 810 } |
| 811 |
| 812 :host([elevation="1"]) { |
| 813 @apply(--shadow-elevation-2dp); |
| 814 } |
| 815 |
| 816 :host([elevation="2"]) { |
| 817 @apply(--shadow-elevation-4dp); |
| 818 } |
| 819 |
| 820 :host([elevation="3"]) { |
| 821 @apply(--shadow-elevation-6dp); |
| 822 } |
| 823 |
| 824 :host([elevation="4"]) { |
| 825 @apply(--shadow-elevation-8dp); |
| 826 } |
| 827 |
| 828 :host([elevation="5"]) { |
| 829 @apply(--shadow-elevation-16dp); |
| 830 } |
| 831 </style> |
| 832 </template> |
| 833 </dom-module> |
| 834 |
| 835 |
| 836 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b
utton/"> |
| 837 <template strip-whitespace=""> |
| 838 <style include="paper-material-shared-styles"> |
| 839 :host { |
| 840 @apply(--layout-inline); |
| 841 @apply(--layout-center-center); |
| 842 position: relative; |
| 843 box-sizing: border-box; |
| 844 min-width: 5.14em; |
| 845 margin: 0 0.29em; |
| 846 background: transparent; |
| 847 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 848 -webkit-tap-highlight-color: transparent; |
| 849 font: inherit; |
| 850 text-transform: uppercase; |
| 851 outline-width: 0; |
| 852 border-radius: 3px; |
| 853 -moz-user-select: none; |
| 854 -ms-user-select: none; |
| 855 -webkit-user-select: none; |
| 856 user-select: none; |
| 857 cursor: pointer; |
| 858 z-index: 0; |
| 859 padding: 0.7em 0.57em; |
| 860 |
| 861 @apply(--paper-font-common-base); |
| 862 @apply(--paper-button); |
| 863 } |
| 864 |
| 865 :host([hidden]) { |
| 866 display: none !important; |
| 867 } |
| 868 |
| 869 :host([raised].keyboard-focus) { |
| 870 font-weight: bold; |
| 871 @apply(--paper-button-raised-keyboard-focus); |
| 872 } |
| 873 |
| 874 :host(:not([raised]).keyboard-focus) { |
| 875 font-weight: bold; |
| 876 @apply(--paper-button-flat-keyboard-focus); |
| 877 } |
| 878 |
| 879 :host([disabled]) { |
| 880 background: #eaeaea; |
| 881 color: #a8a8a8; |
| 882 cursor: auto; |
| 883 pointer-events: none; |
| 884 |
| 885 @apply(--paper-button-disabled); |
| 886 } |
| 887 |
| 888 :host([animated]) { |
| 889 @apply(--shadow-transition); |
| 890 } |
| 891 |
| 892 paper-ripple { |
| 893 color: var(--paper-button-ink-color); |
| 894 } |
| 895 </style> |
| 896 |
| 897 <content></content> |
| 898 </template> |
| 899 |
| 900 </dom-module> |
| 901 <style is="custom-style"> |
| 902 |
| 903 :root { |
| 904 |
| 905 /* Material Design color palette for Google products */ |
| 906 |
| 907 --google-red-100: #f4c7c3; |
| 908 --google-red-300: #e67c73; |
| 909 --google-red-500: #db4437; |
| 910 --google-red-700: #c53929; |
| 911 |
| 912 --google-blue-100: #c6dafc; |
| 913 --google-blue-300: #7baaf7; |
| 914 --google-blue-500: #4285f4; |
| 915 --google-blue-700: #3367d6; |
| 916 |
| 917 --google-green-100: #b7e1cd; |
| 918 --google-green-300: #57bb8a; |
| 919 --google-green-500: #0f9d58; |
| 920 --google-green-700: #0b8043; |
| 921 |
| 922 --google-yellow-100: #fce8b2; |
| 923 --google-yellow-300: #f7cb4d; |
| 924 --google-yellow-500: #f4b400; |
| 925 --google-yellow-700: #f09300; |
| 926 |
| 927 --google-grey-100: #f5f5f5; |
| 928 --google-grey-300: #e0e0e0; |
| 929 --google-grey-500: #9e9e9e; |
| 930 --google-grey-700: #616161; |
| 931 |
| 932 /* Material Design color palette from online spec document */ |
| 933 |
| 934 --paper-red-50: #ffebee; |
| 935 --paper-red-100: #ffcdd2; |
| 936 --paper-red-200: #ef9a9a; |
| 937 --paper-red-300: #e57373; |
| 938 --paper-red-400: #ef5350; |
| 939 --paper-red-500: #f44336; |
| 940 --paper-red-600: #e53935; |
| 941 --paper-red-700: #d32f2f; |
| 942 --paper-red-800: #c62828; |
| 943 --paper-red-900: #b71c1c; |
| 944 --paper-red-a100: #ff8a80; |
| 945 --paper-red-a200: #ff5252; |
| 946 --paper-red-a400: #ff1744; |
| 947 --paper-red-a700: #d50000; |
| 948 |
| 949 --paper-pink-50: #fce4ec; |
| 950 --paper-pink-100: #f8bbd0; |
| 951 --paper-pink-200: #f48fb1; |
| 952 --paper-pink-300: #f06292; |
| 953 --paper-pink-400: #ec407a; |
| 954 --paper-pink-500: #e91e63; |
| 955 --paper-pink-600: #d81b60; |
| 956 --paper-pink-700: #c2185b; |
| 957 --paper-pink-800: #ad1457; |
| 958 --paper-pink-900: #880e4f; |
| 959 --paper-pink-a100: #ff80ab; |
| 960 --paper-pink-a200: #ff4081; |
| 961 --paper-pink-a400: #f50057; |
| 962 --paper-pink-a700: #c51162; |
| 963 |
| 964 --paper-purple-50: #f3e5f5; |
| 965 --paper-purple-100: #e1bee7; |
| 966 --paper-purple-200: #ce93d8; |
| 967 --paper-purple-300: #ba68c8; |
| 968 --paper-purple-400: #ab47bc; |
| 969 --paper-purple-500: #9c27b0; |
| 970 --paper-purple-600: #8e24aa; |
| 971 --paper-purple-700: #7b1fa2; |
| 972 --paper-purple-800: #6a1b9a; |
| 973 --paper-purple-900: #4a148c; |
| 974 --paper-purple-a100: #ea80fc; |
| 975 --paper-purple-a200: #e040fb; |
| 976 --paper-purple-a400: #d500f9; |
| 977 --paper-purple-a700: #aa00ff; |
| 978 |
| 979 --paper-deep-purple-50: #ede7f6; |
| 980 --paper-deep-purple-100: #d1c4e9; |
| 981 --paper-deep-purple-200: #b39ddb; |
| 982 --paper-deep-purple-300: #9575cd; |
| 983 --paper-deep-purple-400: #7e57c2; |
| 984 --paper-deep-purple-500: #673ab7; |
| 985 --paper-deep-purple-600: #5e35b1; |
| 986 --paper-deep-purple-700: #512da8; |
| 987 --paper-deep-purple-800: #4527a0; |
| 988 --paper-deep-purple-900: #311b92; |
| 989 --paper-deep-purple-a100: #b388ff; |
| 990 --paper-deep-purple-a200: #7c4dff; |
| 991 --paper-deep-purple-a400: #651fff; |
| 992 --paper-deep-purple-a700: #6200ea; |
| 993 |
| 994 --paper-indigo-50: #e8eaf6; |
| 995 --paper-indigo-100: #c5cae9; |
| 996 --paper-indigo-200: #9fa8da; |
| 997 --paper-indigo-300: #7986cb; |
| 998 --paper-indigo-400: #5c6bc0; |
| 999 --paper-indigo-500: #3f51b5; |
| 1000 --paper-indigo-600: #3949ab; |
| 1001 --paper-indigo-700: #303f9f; |
| 1002 --paper-indigo-800: #283593; |
| 1003 --paper-indigo-900: #1a237e; |
| 1004 --paper-indigo-a100: #8c9eff; |
| 1005 --paper-indigo-a200: #536dfe; |
| 1006 --paper-indigo-a400: #3d5afe; |
| 1007 --paper-indigo-a700: #304ffe; |
| 1008 |
| 1009 --paper-blue-50: #e3f2fd; |
| 1010 --paper-blue-100: #bbdefb; |
| 1011 --paper-blue-200: #90caf9; |
| 1012 --paper-blue-300: #64b5f6; |
| 1013 --paper-blue-400: #42a5f5; |
| 1014 --paper-blue-500: #2196f3; |
| 1015 --paper-blue-600: #1e88e5; |
| 1016 --paper-blue-700: #1976d2; |
| 1017 --paper-blue-800: #1565c0; |
| 1018 --paper-blue-900: #0d47a1; |
| 1019 --paper-blue-a100: #82b1ff; |
| 1020 --paper-blue-a200: #448aff; |
| 1021 --paper-blue-a400: #2979ff; |
| 1022 --paper-blue-a700: #2962ff; |
| 1023 |
| 1024 --paper-light-blue-50: #e1f5fe; |
| 1025 --paper-light-blue-100: #b3e5fc; |
| 1026 --paper-light-blue-200: #81d4fa; |
| 1027 --paper-light-blue-300: #4fc3f7; |
| 1028 --paper-light-blue-400: #29b6f6; |
| 1029 --paper-light-blue-500: #03a9f4; |
| 1030 --paper-light-blue-600: #039be5; |
| 1031 --paper-light-blue-700: #0288d1; |
| 1032 --paper-light-blue-800: #0277bd; |
| 1033 --paper-light-blue-900: #01579b; |
| 1034 --paper-light-blue-a100: #80d8ff; |
| 1035 --paper-light-blue-a200: #40c4ff; |
| 1036 --paper-light-blue-a400: #00b0ff; |
| 1037 --paper-light-blue-a700: #0091ea; |
| 1038 |
| 1039 --paper-cyan-50: #e0f7fa; |
| 1040 --paper-cyan-100: #b2ebf2; |
| 1041 --paper-cyan-200: #80deea; |
| 1042 --paper-cyan-300: #4dd0e1; |
| 1043 --paper-cyan-400: #26c6da; |
| 1044 --paper-cyan-500: #00bcd4; |
| 1045 --paper-cyan-600: #00acc1; |
| 1046 --paper-cyan-700: #0097a7; |
| 1047 --paper-cyan-800: #00838f; |
| 1048 --paper-cyan-900: #006064; |
| 1049 --paper-cyan-a100: #84ffff; |
| 1050 --paper-cyan-a200: #18ffff; |
| 1051 --paper-cyan-a400: #00e5ff; |
| 1052 --paper-cyan-a700: #00b8d4; |
| 1053 |
| 1054 --paper-teal-50: #e0f2f1; |
| 1055 --paper-teal-100: #b2dfdb; |
| 1056 --paper-teal-200: #80cbc4; |
| 1057 --paper-teal-300: #4db6ac; |
| 1058 --paper-teal-400: #26a69a; |
| 1059 --paper-teal-500: #009688; |
| 1060 --paper-teal-600: #00897b; |
| 1061 --paper-teal-700: #00796b; |
| 1062 --paper-teal-800: #00695c; |
| 1063 --paper-teal-900: #004d40; |
| 1064 --paper-teal-a100: #a7ffeb; |
| 1065 --paper-teal-a200: #64ffda; |
| 1066 --paper-teal-a400: #1de9b6; |
| 1067 --paper-teal-a700: #00bfa5; |
| 1068 |
| 1069 --paper-green-50: #e8f5e9; |
| 1070 --paper-green-100: #c8e6c9; |
| 1071 --paper-green-200: #a5d6a7; |
| 1072 --paper-green-300: #81c784; |
| 1073 --paper-green-400: #66bb6a; |
| 1074 --paper-green-500: #4caf50; |
| 1075 --paper-green-600: #43a047; |
| 1076 --paper-green-700: #388e3c; |
| 1077 --paper-green-800: #2e7d32; |
| 1078 --paper-green-900: #1b5e20; |
| 1079 --paper-green-a100: #b9f6ca; |
| 1080 --paper-green-a200: #69f0ae; |
| 1081 --paper-green-a400: #00e676; |
| 1082 --paper-green-a700: #00c853; |
| 1083 |
| 1084 --paper-light-green-50: #f1f8e9; |
| 1085 --paper-light-green-100: #dcedc8; |
| 1086 --paper-light-green-200: #c5e1a5; |
| 1087 --paper-light-green-300: #aed581; |
| 1088 --paper-light-green-400: #9ccc65; |
| 1089 --paper-light-green-500: #8bc34a; |
| 1090 --paper-light-green-600: #7cb342; |
| 1091 --paper-light-green-700: #689f38; |
| 1092 --paper-light-green-800: #558b2f; |
| 1093 --paper-light-green-900: #33691e; |
| 1094 --paper-light-green-a100: #ccff90; |
| 1095 --paper-light-green-a200: #b2ff59; |
| 1096 --paper-light-green-a400: #76ff03; |
| 1097 --paper-light-green-a700: #64dd17; |
| 1098 |
| 1099 --paper-lime-50: #f9fbe7; |
| 1100 --paper-lime-100: #f0f4c3; |
| 1101 --paper-lime-200: #e6ee9c; |
| 1102 --paper-lime-300: #dce775; |
| 1103 --paper-lime-400: #d4e157; |
| 1104 --paper-lime-500: #cddc39; |
| 1105 --paper-lime-600: #c0ca33; |
| 1106 --paper-lime-700: #afb42b; |
| 1107 --paper-lime-800: #9e9d24; |
| 1108 --paper-lime-900: #827717; |
| 1109 --paper-lime-a100: #f4ff81; |
| 1110 --paper-lime-a200: #eeff41; |
| 1111 --paper-lime-a400: #c6ff00; |
| 1112 --paper-lime-a700: #aeea00; |
| 1113 |
| 1114 --paper-yellow-50: #fffde7; |
| 1115 --paper-yellow-100: #fff9c4; |
| 1116 --paper-yellow-200: #fff59d; |
| 1117 --paper-yellow-300: #fff176; |
| 1118 --paper-yellow-400: #ffee58; |
| 1119 --paper-yellow-500: #ffeb3b; |
| 1120 --paper-yellow-600: #fdd835; |
| 1121 --paper-yellow-700: #fbc02d; |
| 1122 --paper-yellow-800: #f9a825; |
| 1123 --paper-yellow-900: #f57f17; |
| 1124 --paper-yellow-a100: #ffff8d; |
| 1125 --paper-yellow-a200: #ffff00; |
| 1126 --paper-yellow-a400: #ffea00; |
| 1127 --paper-yellow-a700: #ffd600; |
| 1128 |
| 1129 --paper-amber-50: #fff8e1; |
| 1130 --paper-amber-100: #ffecb3; |
| 1131 --paper-amber-200: #ffe082; |
| 1132 --paper-amber-300: #ffd54f; |
| 1133 --paper-amber-400: #ffca28; |
| 1134 --paper-amber-500: #ffc107; |
| 1135 --paper-amber-600: #ffb300; |
| 1136 --paper-amber-700: #ffa000; |
| 1137 --paper-amber-800: #ff8f00; |
| 1138 --paper-amber-900: #ff6f00; |
| 1139 --paper-amber-a100: #ffe57f; |
| 1140 --paper-amber-a200: #ffd740; |
| 1141 --paper-amber-a400: #ffc400; |
| 1142 --paper-amber-a700: #ffab00; |
| 1143 |
| 1144 --paper-orange-50: #fff3e0; |
| 1145 --paper-orange-100: #ffe0b2; |
| 1146 --paper-orange-200: #ffcc80; |
| 1147 --paper-orange-300: #ffb74d; |
| 1148 --paper-orange-400: #ffa726; |
| 1149 --paper-orange-500: #ff9800; |
| 1150 --paper-orange-600: #fb8c00; |
| 1151 --paper-orange-700: #f57c00; |
| 1152 --paper-orange-800: #ef6c00; |
| 1153 --paper-orange-900: #e65100; |
| 1154 --paper-orange-a100: #ffd180; |
| 1155 --paper-orange-a200: #ffab40; |
| 1156 --paper-orange-a400: #ff9100; |
| 1157 --paper-orange-a700: #ff6500; |
| 1158 |
| 1159 --paper-deep-orange-50: #fbe9e7; |
| 1160 --paper-deep-orange-100: #ffccbc; |
| 1161 --paper-deep-orange-200: #ffab91; |
| 1162 --paper-deep-orange-300: #ff8a65; |
| 1163 --paper-deep-orange-400: #ff7043; |
| 1164 --paper-deep-orange-500: #ff5722; |
| 1165 --paper-deep-orange-600: #f4511e; |
| 1166 --paper-deep-orange-700: #e64a19; |
| 1167 --paper-deep-orange-800: #d84315; |
| 1168 --paper-deep-orange-900: #bf360c; |
| 1169 --paper-deep-orange-a100: #ff9e80; |
| 1170 --paper-deep-orange-a200: #ff6e40; |
| 1171 --paper-deep-orange-a400: #ff3d00; |
| 1172 --paper-deep-orange-a700: #dd2c00; |
| 1173 |
| 1174 --paper-brown-50: #efebe9; |
| 1175 --paper-brown-100: #d7ccc8; |
| 1176 --paper-brown-200: #bcaaa4; |
| 1177 --paper-brown-300: #a1887f; |
| 1178 --paper-brown-400: #8d6e63; |
| 1179 --paper-brown-500: #795548; |
| 1180 --paper-brown-600: #6d4c41; |
| 1181 --paper-brown-700: #5d4037; |
| 1182 --paper-brown-800: #4e342e; |
| 1183 --paper-brown-900: #3e2723; |
| 1184 |
| 1185 --paper-grey-50: #fafafa; |
| 1186 --paper-grey-100: #f5f5f5; |
| 1187 --paper-grey-200: #eeeeee; |
| 1188 --paper-grey-300: #e0e0e0; |
| 1189 --paper-grey-400: #bdbdbd; |
| 1190 --paper-grey-500: #9e9e9e; |
| 1191 --paper-grey-600: #757575; |
| 1192 --paper-grey-700: #616161; |
| 1193 --paper-grey-800: #424242; |
| 1194 --paper-grey-900: #212121; |
| 1195 |
| 1196 --paper-blue-grey-50: #eceff1; |
| 1197 --paper-blue-grey-100: #cfd8dc; |
| 1198 --paper-blue-grey-200: #b0bec5; |
| 1199 --paper-blue-grey-300: #90a4ae; |
| 1200 --paper-blue-grey-400: #78909c; |
| 1201 --paper-blue-grey-500: #607d8b; |
| 1202 --paper-blue-grey-600: #546e7a; |
| 1203 --paper-blue-grey-700: #455a64; |
| 1204 --paper-blue-grey-800: #37474f; |
| 1205 --paper-blue-grey-900: #263238; |
| 1206 |
| 1207 /* opacity for dark text on a light background */ |
| 1208 --dark-divider-opacity: 0.12; |
| 1209 --dark-disabled-opacity: 0.38; /* or hint text or icon */ |
| 1210 --dark-secondary-opacity: 0.54; |
| 1211 --dark-primary-opacity: 0.87; |
| 1212 |
| 1213 /* opacity for light text on a dark background */ |
| 1214 --light-divider-opacity: 0.12; |
| 1215 --light-disabled-opacity: 0.3; /* or hint text or icon */ |
| 1216 --light-secondary-opacity: 0.7; |
| 1217 --light-primary-opacity: 1.0; |
| 1218 |
| 1219 } |
| 1220 |
| 1221 </style> |
| 1222 |
| 1223 |
| 1224 <style is="custom-style"> |
| 1225 |
| 1226 :root { |
| 1227 /* |
| 1228 * You can use these generic variables in your elements for easy theming. |
| 1229 * For example, if all your elements use `--primary-text-color` as its main |
| 1230 * color, then switching from a light to a dark theme is just a matter of |
| 1231 * changing the value of `--primary-text-color` in your application. |
| 1232 */ |
| 1233 --primary-text-color: var(--light-theme-text-color); |
| 1234 --primary-background-color: var(--light-theme-background-color); |
| 1235 --secondary-text-color: var(--light-theme-secondary-color); |
| 1236 --disabled-text-color: var(--light-theme-disabled-color); |
| 1237 --divider-color: var(--light-theme-divider-color); |
| 1238 --error-color: var(--paper-deep-orange-a700); |
| 1239 |
| 1240 /* |
| 1241 * Primary and accent colors. Also see color.html for more colors. |
| 1242 */ |
| 1243 --primary-color: var(--paper-indigo-500); |
| 1244 --light-primary-color: var(--paper-indigo-100); |
| 1245 --dark-primary-color: var(--paper-indigo-700); |
| 1246 |
| 1247 --accent-color: var(--paper-pink-a200); |
| 1248 --light-accent-color: var(--paper-pink-a100); |
| 1249 --dark-accent-color: var(--paper-pink-a400); |
| 1250 |
| 1251 |
| 1252 /* |
| 1253 * Material Design Light background theme |
| 1254 */ |
| 1255 --light-theme-background-color: #ffffff; |
| 1256 --light-theme-base-color: #000000; |
| 1257 --light-theme-text-color: var(--paper-grey-900); |
| 1258 --light-theme-secondary-color: #737373; /* for secondary text and icons */ |
| 1259 --light-theme-disabled-color: #9b9b9b; /* disabled/hint text */ |
| 1260 --light-theme-divider-color: #dbdbdb; |
| 1261 |
| 1262 /* |
| 1263 * Material Design Dark background theme |
| 1264 */ |
| 1265 --dark-theme-background-color: var(--paper-grey-900); |
| 1266 --dark-theme-base-color: #ffffff; |
| 1267 --dark-theme-text-color: #ffffff; |
| 1268 --dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */ |
| 1269 --dark-theme-disabled-color: #646464; /* disabled/hint text */ |
| 1270 --dark-theme-divider-color: #3c3c3c; |
| 1271 |
| 1272 /* |
| 1273 * Deprecated values because of their confusing names. |
| 1274 */ |
| 1275 --text-primary-color: var(--dark-theme-text-color); |
| 1276 --default-primary-color: var(--primary-color); |
| 1277 |
| 1278 } |
| 1279 |
| 1280 </style> |
| 1281 |
| 1282 |
| 1283 <dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/pa
per-icon-button/"> |
| 1284 <template strip-whitespace=""> |
| 1285 <style> |
| 1286 :host { |
| 1287 display: inline-block; |
| 1288 position: relative; |
| 1289 padding: 8px; |
| 1290 outline: none; |
| 1291 -webkit-user-select: none; |
| 1292 -moz-user-select: none; |
| 1293 -ms-user-select: none; |
| 1294 user-select: none; |
| 1295 cursor: pointer; |
| 1296 z-index: 0; |
| 1297 line-height: 1; |
| 1298 |
| 1299 width: 40px; |
| 1300 height: 40px; |
| 1301 |
| 1302 /* NOTE: Both values are needed, since some phones require the value to
be `transparent`. */ |
| 1303 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 1304 -webkit-tap-highlight-color: transparent; |
| 1305 |
| 1306 /* Because of polymer/2558, this style has lower specificity than * */ |
| 1307 box-sizing: border-box !important; |
| 1308 |
| 1309 @apply(--paper-icon-button); |
| 1310 } |
| 1311 |
| 1312 :host #ink { |
| 1313 color: var(--paper-icon-button-ink-color, --primary-text-color); |
| 1314 opacity: 0.6; |
| 1315 } |
| 1316 |
| 1317 :host([disabled]) { |
| 1318 color: var(--paper-icon-button-disabled-text, --disabled-text-color); |
| 1319 pointer-events: none; |
| 1320 cursor: auto; |
| 1321 |
| 1322 @apply(--paper-icon-button-disabled); |
| 1323 } |
| 1324 |
| 1325 :host(:hover) { |
| 1326 @apply(--paper-icon-button-hover); |
| 1327 } |
| 1328 |
| 1329 iron-icon { |
| 1330 --iron-icon-width: 100%; |
| 1331 --iron-icon-height: 100%; |
| 1332 } |
| 1333 </style> |
| 1334 |
| 1335 <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-ico
n> |
| 1336 </template> |
| 1337 |
| 1338 </dom-module> |
| 1339 <dom-module id="paper-tab" assetpath="chrome://resources/polymer/v1_0/paper-tabs
/"> |
| 1340 <template> |
| 1341 <style> |
| 1342 :host { |
| 1343 @apply(--layout-inline); |
| 1344 @apply(--layout-center); |
| 1345 @apply(--layout-center-justified); |
| 1346 @apply(--layout-flex-auto); |
| 1347 |
| 1348 position: relative; |
| 1349 padding: 0 12px; |
| 1350 overflow: hidden; |
| 1351 cursor: pointer; |
| 1352 vertical-align: middle; |
| 1353 |
| 1354 @apply(--paper-font-common-base); |
| 1355 @apply(--paper-tab); |
| 1356 } |
| 1357 |
| 1358 :host(:focus) { |
| 1359 outline: none; |
| 1360 } |
| 1361 |
| 1362 :host([link]) { |
| 1363 padding: 0; |
| 1364 } |
| 1365 |
| 1366 .tab-content { |
| 1367 height: 100%; |
| 1368 transform: translateZ(0); |
| 1369 -webkit-transform: translateZ(0); |
| 1370 transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); |
| 1371 @apply(--layout-horizontal); |
| 1372 @apply(--layout-center-center); |
| 1373 @apply(--layout-flex-auto); |
| 1374 @apply(--paper-tab-content); |
| 1375 } |
| 1376 |
| 1377 :host(:not(.iron-selected)) > .tab-content { |
| 1378 opacity: 0.8; |
| 1379 |
| 1380 @apply(--paper-tab-content-unselected); |
| 1381 } |
| 1382 |
| 1383 :host(:focus) .tab-content { |
| 1384 opacity: 1; |
| 1385 font-weight: 700; |
| 1386 } |
| 1387 |
| 1388 paper-ripple { |
| 1389 color: var(--paper-tab-ink, --paper-yellow-a100); |
| 1390 } |
| 1391 |
| 1392 .tab-content > ::content > a { |
| 1393 @apply(--layout-flex-auto); |
| 1394 |
| 1395 height: 100%; |
| 1396 } |
| 1397 </style> |
| 1398 |
| 1399 <div class="tab-content"> |
| 1400 <content></content> |
| 1401 </div> |
| 1402 </template> |
| 1403 |
| 1404 </dom-module> |
| 1405 <iron-iconset-svg name="paper-tabs" size="24"> |
| 1406 <svg><defs> |
| 1407 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></p
ath></g> |
| 1408 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"><
/path></g> |
| 1409 </defs></svg> |
| 1410 </iron-iconset-svg> |
| 1411 |
| 1412 |
| 1413 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab
s/"> |
| 1414 <template> |
| 1415 <style> |
| 1416 :host { |
| 1417 @apply(--layout); |
| 1418 @apply(--layout-center); |
| 1419 |
| 1420 height: 48px; |
| 1421 font-size: 14px; |
| 1422 font-weight: 500; |
| 1423 overflow: hidden; |
| 1424 -moz-user-select: none; |
| 1425 -ms-user-select: none; |
| 1426 -webkit-user-select: none; |
| 1427 user-select: none; |
| 1428 |
| 1429 /* NOTE: Both values are needed, since some phones require the value to
be `transparent`. */ |
| 1430 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 1431 -webkit-tap-highlight-color: transparent; |
| 1432 |
| 1433 @apply(--paper-tabs); |
| 1434 } |
| 1435 |
| 1436 :host-context([dir=rtl]) { |
| 1437 @apply(--layout-horizontal-reverse); |
| 1438 } |
| 1439 |
| 1440 #tabsContainer { |
| 1441 position: relative; |
| 1442 height: 100%; |
| 1443 white-space: nowrap; |
| 1444 overflow: hidden; |
| 1445 @apply(--layout-flex-auto); |
| 1446 } |
| 1447 |
| 1448 #tabsContent { |
| 1449 height: 100%; |
| 1450 -moz-flex-basis: auto; |
| 1451 -ms-flex-basis: auto; |
| 1452 flex-basis: auto; |
| 1453 } |
| 1454 |
| 1455 #tabsContent.scrollable { |
| 1456 position: absolute; |
| 1457 white-space: nowrap; |
| 1458 } |
| 1459 |
| 1460 #tabsContent:not(.scrollable), |
| 1461 #tabsContent.scrollable.fit-container { |
| 1462 @apply(--layout-horizontal); |
| 1463 } |
| 1464 |
| 1465 #tabsContent.scrollable.fit-container { |
| 1466 min-width: 100%; |
| 1467 } |
| 1468 |
| 1469 #tabsContent.scrollable.fit-container > ::content > * { |
| 1470 /* IE - prevent tabs from compressing when they should scroll. */ |
| 1471 -ms-flex: 1 0 auto; |
| 1472 -webkit-flex: 1 0 auto; |
| 1473 flex: 1 0 auto; |
| 1474 } |
| 1475 |
| 1476 .hidden { |
| 1477 display: none; |
| 1478 } |
| 1479 |
| 1480 .not-visible { |
| 1481 opacity: 0; |
| 1482 cursor: default; |
| 1483 } |
| 1484 |
| 1485 paper-icon-button { |
| 1486 width: 48px; |
| 1487 height: 48px; |
| 1488 padding: 12px; |
| 1489 margin: 0 4px; |
| 1490 } |
| 1491 |
| 1492 #selectionBar { |
| 1493 position: absolute; |
| 1494 height: 2px; |
| 1495 bottom: 0; |
| 1496 left: 0; |
| 1497 right: 0; |
| 1498 background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a
100); |
| 1499 -webkit-transform: scale(0); |
| 1500 transform: scale(0); |
| 1501 -webkit-transform-origin: left center; |
| 1502 transform-origin: left center; |
| 1503 transition: -webkit-transform; |
| 1504 transition: transform; |
| 1505 |
| 1506 @apply(--paper-tabs-selection-bar); |
| 1507 } |
| 1508 |
| 1509 #selectionBar.align-bottom { |
| 1510 top: 0; |
| 1511 bottom: auto; |
| 1512 } |
| 1513 |
| 1514 #selectionBar.expand { |
| 1515 transition-duration: 0.15s; |
| 1516 transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); |
| 1517 } |
| 1518 |
| 1519 #selectionBar.contract { |
| 1520 transition-duration: 0.18s; |
| 1521 transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); |
| 1522 } |
| 1523 |
| 1524 #tabsContent > ::content > *:not(#selectionBar) { |
| 1525 height: 100%; |
| 1526 } |
| 1527 </style> |
| 1528 |
| 1529 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollBu
ttonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonU
p" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> |
| 1530 |
| 1531 <div id="tabsContainer" on-track="_scroll" on-down="_down"> |
| 1532 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitCo
ntainer)]]"> |
| 1533 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB
ottom)]]" on-transitionend="_onBarTransitionEnd"></div> |
| 1534 <content select="*"></content> |
| 1535 </div> |
| 1536 </div> |
| 1537 |
| 1538 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB
uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto
nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> |
| 1539 |
| 1540 </template> |
| 1541 |
| 1542 </dom-module> |
| 1543 <iron-iconset-svg name="cr" size="24"> |
| 1544 <svg> |
| 1545 <defs> |
| 1546 |
| 1547 <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g> |
| 1548 <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g> |
| 1549 <g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-
10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41
7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></g> |
| 1550 <if expr="chromeos"> |
| 1551 <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z">
</path></g> |
| 1552 </if> |
| 1553 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6
-6z"></path></g> |
| 1554 <g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5
17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g> |
| 1555 <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5
17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g> |
| 1556 <g id="domain"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2z
m0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2
zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path>
</g> |
| 1557 <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14
z"></path></g> |
| 1558 <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></g> |
| 1559 <g id="extension"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.
88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.
7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2
.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.
5 11z"></path></g> |
| 1560 <g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z">
</path></g> |
| 1561 <g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3
v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g> |
| 1562 <g id="group"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0
-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5
8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.2
9 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z">
</path></g> |
| 1563 <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></pat
h></g> |
| 1564 <g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2
2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2
2-.9 2-2-.9-2-2-2z"></path></g> |
| 1565 <g id="person"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.
79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></g> |
| 1566 <g id="print"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-
1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm
-1-9H6v4h12V3z"></path></g> |
| 1567 <g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5
16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27
.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01
14 9.5 11.99 14 9.5 14z"></path></g> |
| 1568 <g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-
.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52
-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l
-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-
.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24
.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24
.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.2
3.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-
1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g> |
| 1569 <g id="star"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2
9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></g> |
| 1570 <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4
z"></path></g> |
| 1571 <if expr="chromeos"> |
| 1572 <g id="star-border"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46
4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.
32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"></path></g> |
| 1573 </if> |
| 1574 </defs> |
| 1575 </svg> |
| 1576 </iron-iconset-svg> |
| 1577 |
| 1578 |
| 1579 <dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/
iron-a11y-announcer/"> |
| 1580 <template> |
| 1581 <style> |
| 1582 :host { |
| 1583 display: inline-block; |
| 1584 position: fixed; |
| 1585 clip: rect(0px,0px,0px,0px); |
| 1586 } |
| 1587 </style> |
| 1588 <div aria-live$="[[mode]]">[[_text]]</div> |
| 1589 </template> |
| 1590 |
| 1591 </dom-module> |
| 1592 <style> |
| 1593 /* Copyright 2015 The Chromium Authors. All rights reserved. |
| 1594 * Use of this source code is governed by a BSD-style license that can be |
| 1595 * found in the LICENSE file. */ |
| 1596 |
| 1597 <if expr="not chromeos"> |
| 1598 @font-face { |
| 1599 font-family: 'Roboto'; |
| 1600 font-style: normal; |
| 1601 font-weight: 400; |
| 1602 src: local('Roboto'), local('Roboto-Regular'), |
| 1603 url("chrome://resources/roboto/roboto-regular.woff2") format('woff2'); |
| 1604 } |
| 1605 |
| 1606 @font-face { |
| 1607 font-family: 'Roboto'; |
| 1608 font-style: normal; |
| 1609 font-weight: 500; |
| 1610 src: local('Roboto Medium'), local('Roboto-Medium'), |
| 1611 url("chrome://resources/roboto/roboto-medium.woff2") format('woff2'); |
| 1612 } |
| 1613 |
| 1614 @font-face { |
| 1615 font-family: 'Roboto'; |
| 1616 font-style: normal; |
| 1617 font-weight: 700; |
| 1618 src: local('Roboto Bold'), local('Roboto-Bold'), |
| 1619 url("chrome://resources/roboto/roboto-bold.woff2") format('woff2'); |
| 1620 } |
| 1621 </if> |
| 1622 |
| 1623 </style> |
| 1624 <style is="custom-style"> |
| 1625 |
| 1626 :root { |
| 1627 |
| 1628 /* Shared Styles */ |
| 1629 --paper-font-common-base: { |
| 1630 font-family: 'Roboto', 'Noto', sans-serif; |
| 1631 -webkit-font-smoothing: antialiased; |
| 1632 }; |
| 1633 |
| 1634 --paper-font-common-code: { |
| 1635 font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; |
| 1636 -webkit-font-smoothing: antialiased; |
| 1637 }; |
| 1638 |
| 1639 --paper-font-common-expensive-kerning: { |
| 1640 text-rendering: optimizeLegibility; |
| 1641 }; |
| 1642 |
| 1643 --paper-font-common-nowrap: { |
| 1644 white-space: nowrap; |
| 1645 overflow: hidden; |
| 1646 text-overflow: ellipsis; |
| 1647 }; |
| 1648 |
| 1649 /* Material Font Styles */ |
| 1650 |
| 1651 --paper-font-display4: { |
| 1652 @apply(--paper-font-common-base); |
| 1653 @apply(--paper-font-common-nowrap); |
| 1654 |
| 1655 font-size: 112px; |
| 1656 font-weight: 300; |
| 1657 letter-spacing: -.044em; |
| 1658 line-height: 120px; |
| 1659 }; |
| 1660 |
| 1661 --paper-font-display3: { |
| 1662 @apply(--paper-font-common-base); |
| 1663 @apply(--paper-font-common-nowrap); |
| 1664 |
| 1665 font-size: 56px; |
| 1666 font-weight: 400; |
| 1667 letter-spacing: -.026em; |
| 1668 line-height: 60px; |
| 1669 }; |
| 1670 |
| 1671 --paper-font-display2: { |
| 1672 @apply(--paper-font-common-base); |
| 1673 |
| 1674 font-size: 45px; |
| 1675 font-weight: 400; |
| 1676 letter-spacing: -.018em; |
| 1677 line-height: 48px; |
| 1678 }; |
| 1679 |
| 1680 --paper-font-display1: { |
| 1681 @apply(--paper-font-common-base); |
| 1682 |
| 1683 font-size: 34px; |
| 1684 font-weight: 400; |
| 1685 letter-spacing: -.01em; |
| 1686 line-height: 40px; |
| 1687 }; |
| 1688 |
| 1689 --paper-font-headline: { |
| 1690 @apply(--paper-font-common-base); |
| 1691 |
| 1692 font-size: 24px; |
| 1693 font-weight: 400; |
| 1694 letter-spacing: -.012em; |
| 1695 line-height: 32px; |
| 1696 }; |
| 1697 |
| 1698 --paper-font-title: { |
| 1699 @apply(--paper-font-common-base); |
| 1700 @apply(--paper-font-common-nowrap); |
| 1701 |
| 1702 font-size: 20px; |
| 1703 font-weight: 500; |
| 1704 line-height: 28px; |
| 1705 }; |
| 1706 |
| 1707 --paper-font-subhead: { |
| 1708 @apply(--paper-font-common-base); |
| 1709 |
| 1710 font-size: 16px; |
| 1711 font-weight: 400; |
| 1712 line-height: 24px; |
| 1713 }; |
| 1714 |
| 1715 --paper-font-body2: { |
| 1716 @apply(--paper-font-common-base); |
| 1717 |
| 1718 font-size: 14px; |
| 1719 font-weight: 500; |
| 1720 line-height: 24px; |
| 1721 }; |
| 1722 |
| 1723 --paper-font-body1: { |
| 1724 @apply(--paper-font-common-base); |
| 1725 |
| 1726 font-size: 14px; |
| 1727 font-weight: 400; |
| 1728 line-height: 20px; |
| 1729 }; |
| 1730 |
| 1731 --paper-font-caption: { |
| 1732 @apply(--paper-font-common-base); |
| 1733 @apply(--paper-font-common-nowrap); |
| 1734 |
| 1735 font-size: 12px; |
| 1736 font-weight: 400; |
| 1737 letter-spacing: 0.011em; |
| 1738 line-height: 20px; |
| 1739 }; |
| 1740 |
| 1741 --paper-font-menu: { |
| 1742 @apply(--paper-font-common-base); |
| 1743 @apply(--paper-font-common-nowrap); |
| 1744 |
| 1745 font-size: 13px; |
| 1746 font-weight: 500; |
| 1747 line-height: 24px; |
| 1748 }; |
| 1749 |
| 1750 --paper-font-button: { |
| 1751 @apply(--paper-font-common-base); |
| 1752 @apply(--paper-font-common-nowrap); |
| 1753 |
| 1754 font-size: 14px; |
| 1755 font-weight: 500; |
| 1756 letter-spacing: 0.018em; |
| 1757 line-height: 24px; |
| 1758 text-transform: uppercase; |
| 1759 }; |
| 1760 |
| 1761 --paper-font-code2: { |
| 1762 @apply(--paper-font-common-code); |
| 1763 |
| 1764 font-size: 14px; |
| 1765 font-weight: 700; |
| 1766 line-height: 20px; |
| 1767 }; |
| 1768 |
| 1769 --paper-font-code1: { |
| 1770 @apply(--paper-font-common-code); |
| 1771 |
| 1772 font-size: 14px; |
| 1773 font-weight: 500; |
| 1774 line-height: 20px; |
| 1775 }; |
| 1776 |
| 1777 } |
| 1778 |
| 1779 </style> |
| 1780 |
| 1781 |
| 1782 <dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_
0/paper-input/"> |
| 1783 <template> |
| 1784 <style> |
| 1785 :host { |
| 1786 display: block; |
| 1787 padding: 8px 0; |
| 1788 |
| 1789 @apply(--paper-input-container); |
| 1790 } |
| 1791 |
| 1792 :host([inline]) { |
| 1793 display: inline-block; |
| 1794 } |
| 1795 |
| 1796 :host([disabled]) { |
| 1797 pointer-events: none; |
| 1798 opacity: 0.33; |
| 1799 |
| 1800 @apply(--paper-input-container-disabled); |
| 1801 } |
| 1802 |
| 1803 :host([hidden]) { |
| 1804 display: none !important; |
| 1805 } |
| 1806 |
| 1807 .floated-label-placeholder { |
| 1808 @apply(--paper-font-caption); |
| 1809 } |
| 1810 |
| 1811 .underline { |
| 1812 position: relative; |
| 1813 } |
| 1814 |
| 1815 .focused-line { |
| 1816 @apply(--layout-fit); |
| 1817 |
| 1818 background: var(--paper-input-container-focus-color, --primary-color); |
| 1819 height: 2px; |
| 1820 |
| 1821 -webkit-transform-origin: center center; |
| 1822 transform-origin: center center; |
| 1823 -webkit-transform: scale3d(0,1,1); |
| 1824 transform: scale3d(0,1,1); |
| 1825 |
| 1826 @apply(--paper-input-container-underline-focus); |
| 1827 } |
| 1828 |
| 1829 .underline.is-highlighted .focused-line { |
| 1830 -webkit-transform: none; |
| 1831 transform: none; |
| 1832 -webkit-transition: -webkit-transform 0.25s; |
| 1833 transition: transform 0.25s; |
| 1834 |
| 1835 @apply(--paper-transition-easing); |
| 1836 } |
| 1837 |
| 1838 .underline.is-invalid .focused-line { |
| 1839 background: var(--paper-input-container-invalid-color, --error-color); |
| 1840 -webkit-transform: none; |
| 1841 transform: none; |
| 1842 -webkit-transition: -webkit-transform 0.25s; |
| 1843 transition: transform 0.25s; |
| 1844 |
| 1845 @apply(--paper-transition-easing); |
| 1846 } |
| 1847 |
| 1848 .unfocused-line { |
| 1849 @apply(--layout-fit); |
| 1850 |
| 1851 background: var(--paper-input-container-color, --secondary-text-color); |
| 1852 height: 1px; |
| 1853 |
| 1854 @apply(--paper-input-container-underline); |
| 1855 } |
| 1856 |
| 1857 :host([disabled]) .unfocused-line { |
| 1858 border-bottom: 1px dashed; |
| 1859 border-color: var(--paper-input-container-color, --secondary-text-color)
; |
| 1860 background: transparent; |
| 1861 |
| 1862 @apply(--paper-input-container-underline-disabled); |
| 1863 } |
| 1864 |
| 1865 .label-and-input-container { |
| 1866 @apply(--layout-flex-auto); |
| 1867 @apply(--layout-relative); |
| 1868 |
| 1869 width: 100%; |
| 1870 max-width: 100%; |
| 1871 } |
| 1872 |
| 1873 .input-content { |
| 1874 @apply(--layout-horizontal); |
| 1875 @apply(--layout-center); |
| 1876 |
| 1877 position: relative; |
| 1878 } |
| 1879 |
| 1880 .input-content ::content label, |
| 1881 .input-content ::content .paper-input-label { |
| 1882 position: absolute; |
| 1883 top: 0; |
| 1884 right: 0; |
| 1885 left: 0; |
| 1886 width: 100%; |
| 1887 font: inherit; |
| 1888 color: var(--paper-input-container-color, --secondary-text-color); |
| 1889 -webkit-transition: -webkit-transform 0.25s, width 0.25s; |
| 1890 transition: transform 0.25s, width 0.25s; |
| 1891 -webkit-transform-origin: left top; |
| 1892 transform-origin: left top; |
| 1893 |
| 1894 @apply(--paper-font-common-nowrap); |
| 1895 @apply(--paper-font-subhead); |
| 1896 @apply(--paper-input-container-label); |
| 1897 @apply(--paper-transition-easing); |
| 1898 } |
| 1899 |
| 1900 .input-content.label-is-floating ::content label, |
| 1901 .input-content.label-is-floating ::content .paper-input-label { |
| 1902 -webkit-transform: translateY(-75%) scale(0.75); |
| 1903 transform: translateY(-75%) scale(0.75); |
| 1904 |
| 1905 /* Since we scale to 75/100 of the size, we actually have 100/75 of the |
| 1906 original space now available */ |
| 1907 width: 133%; |
| 1908 |
| 1909 @apply(--paper-input-container-label-floating); |
| 1910 } |
| 1911 |
| 1912 :host-context([dir="rtl"]) .input-content.label-is-floating ::content labe
l, |
| 1913 :host-context([dir="rtl"]) .input-content.label-is-floating ::content .pap
er-input-label { |
| 1914 /* TODO(noms): Figure out why leaving the width at 133% before the anima
tion |
| 1915 * actually makes |
| 1916 * it wider on the right side, not left side, as you would expect in RTL
*/ |
| 1917 width: 100%; |
| 1918 -webkit-transform-origin: right top; |
| 1919 transform-origin: right top; |
| 1920 } |
| 1921 |
| 1922 .input-content.label-is-highlighted ::content label, |
| 1923 .input-content.label-is-highlighted ::content .paper-input-label { |
| 1924 color: var(--paper-input-container-focus-color, --primary-color); |
| 1925 |
| 1926 @apply(--paper-input-container-label-focus); |
| 1927 } |
| 1928 |
| 1929 .input-content.is-invalid ::content label, |
| 1930 .input-content.is-invalid ::content .paper-input-label { |
| 1931 color: var(--paper-input-container-invalid-color, --error-color); |
| 1932 } |
| 1933 |
| 1934 .input-content.label-is-hidden ::content label, |
| 1935 .input-content.label-is-hidden ::content .paper-input-label { |
| 1936 visibility: hidden; |
| 1937 } |
| 1938 |
| 1939 .input-content ::content input, |
| 1940 .input-content ::content textarea, |
| 1941 .input-content ::content iron-autogrow-textarea, |
| 1942 .input-content ::content .paper-input-input { |
| 1943 position: relative; /* to make a stacking context */ |
| 1944 outline: none; |
| 1945 box-shadow: none; |
| 1946 padding: 0; |
| 1947 width: 100%; |
| 1948 max-width: 100%; |
| 1949 background: transparent; |
| 1950 border: none; |
| 1951 color: var(--paper-input-container-input-color, --primary-text-color); |
| 1952 -webkit-appearance: none; |
| 1953 text-align: inherit; |
| 1954 |
| 1955 @apply(--paper-font-subhead); |
| 1956 @apply(--paper-input-container-input); |
| 1957 } |
| 1958 |
| 1959 ::content [prefix] { |
| 1960 @apply(--paper-font-subhead); |
| 1961 |
| 1962 @apply(--paper-input-prefix); |
| 1963 @apply(--layout-flex-none); |
| 1964 } |
| 1965 |
| 1966 ::content [suffix] { |
| 1967 @apply(--paper-font-subhead); |
| 1968 |
| 1969 @apply(--paper-input-suffix); |
| 1970 @apply(--layout-flex-none); |
| 1971 } |
| 1972 |
| 1973 /* Firefox sets a min-width on the input, which can cause layout issues */ |
| 1974 .input-content ::content input { |
| 1975 min-width: 0; |
| 1976 } |
| 1977 |
| 1978 .input-content ::content textarea { |
| 1979 resize: none; |
| 1980 } |
| 1981 |
| 1982 .add-on-content { |
| 1983 position: relative; |
| 1984 } |
| 1985 |
| 1986 .add-on-content.is-invalid ::content * { |
| 1987 color: var(--paper-input-container-invalid-color, --error-color); |
| 1988 } |
| 1989 |
| 1990 .add-on-content.is-highlighted ::content * { |
| 1991 color: var(--paper-input-container-focus-color, --primary-color); |
| 1992 } |
| 1993 </style> |
| 1994 |
| 1995 <template is="dom-if" if="[[!noLabelFloat]]"> |
| 1996 <div class="floated-label-placeholder" aria-hidden="true"> </div> |
| 1997 </template> |
| 1998 |
| 1999 <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focus
ed,invalid,_inputHasContent)]]"> |
| 2000 <content select="[prefix]" id="prefix"></content> |
| 2001 |
| 2002 <div class="label-and-input-container" id="labelAndInputContainer"> |
| 2003 <content select=":not([add-on]):not([prefix]):not([suffix])"></content> |
| 2004 </div> |
| 2005 |
| 2006 <content select="[suffix]"></content> |
| 2007 </div> |
| 2008 |
| 2009 <div class$="[[_computeUnderlineClass(focused,invalid)]]"> |
| 2010 <div class="unfocused-line"></div> |
| 2011 <div class="focused-line"></div> |
| 2012 </div> |
| 2013 |
| 2014 <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> |
| 2015 <content id="addOnContent" select="[add-on]"></content> |
| 2016 </div> |
| 2017 </template> |
| 2018 </dom-module> |
| 2019 |
| 2020 <dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0
/paper-spinner/"> |
| 2021 <template> |
| 2022 <style> |
| 2023 /* |
| 2024 /**************************/ |
| 2025 /* STYLES FOR THE SPINNER */ |
| 2026 /**************************/ |
| 2027 |
| 2028 /* |
| 2029 * Constants: |
| 2030 * ARCSIZE = 270 degrees (amount of circle the arc takes up) |
| 2031 * ARCTIME = 1333ms (time it takes to expand and contract arc) |
| 2032 * ARCSTARTROT = 216 degrees (how much the start location of the arc |
| 2033 * should rotate each time, 216 gives us a |
| 2034 * 5 pointed star shape (it's 360/5 * 3). |
| 2035 * For a 7 pointed star, we might do |
| 2036 * 360/7 * 3 = 154.286) |
| 2037 * SHRINK_TIME = 400ms |
| 2038 */ |
| 2039 |
| 2040 :host { |
| 2041 display: inline-block; |
| 2042 position: relative; |
| 2043 width: 28px; |
| 2044 height: 28px; |
| 2045 |
| 2046 /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ |
| 2047 --paper-spinner-container-rotation-duration: 1568ms; |
| 2048 |
| 2049 /* ARCTIME */ |
| 2050 --paper-spinner-expand-contract-duration: 1333ms; |
| 2051 |
| 2052 /* 4 * ARCTIME */ |
| 2053 --paper-spinner-full-cycle-duration: 5332ms; |
| 2054 |
| 2055 /* SHRINK_TIME */ |
| 2056 --paper-spinner-cooldown-duration: 400ms; |
| 2057 } |
| 2058 |
| 2059 #spinnerContainer { |
| 2060 width: 100%; |
| 2061 height: 100%; |
| 2062 |
| 2063 /* The spinner does not have any contents that would have to be |
| 2064 * flipped if the direction changes. Always use ltr so that the |
| 2065 * style works out correctly in both cases. */ |
| 2066 direction: ltr; |
| 2067 } |
| 2068 |
| 2069 #spinnerContainer.active { |
| 2070 -webkit-animation: container-rotate var(--paper-spinner-container-rotati
on-duration) linear infinite; |
| 2071 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite; |
| 2072 } |
| 2073 |
| 2074 @-webkit-keyframes container-rotate { |
| 2075 to { -webkit-transform: rotate(360deg) } |
| 2076 } |
| 2077 |
| 2078 @keyframes container-rotate { |
| 2079 to { transform: rotate(360deg) } |
| 2080 } |
| 2081 |
| 2082 .spinner-layer { |
| 2083 position: absolute; |
| 2084 width: 100%; |
| 2085 height: 100%; |
| 2086 opacity: 0; |
| 2087 white-space: nowrap; |
| 2088 border-color: var(--paper-spinner-color, --google-blue-500); |
| 2089 } |
| 2090 |
| 2091 .layer-1 { |
| 2092 border-color: var(--paper-spinner-layer-1-color, --google-blue-500); |
| 2093 } |
| 2094 |
| 2095 .layer-2 { |
| 2096 border-color: var(--paper-spinner-layer-2-color, --google-red-500); |
| 2097 } |
| 2098 |
| 2099 .layer-3 { |
| 2100 border-color: var(--paper-spinner-layer-3-color, --google-yellow-500); |
| 2101 } |
| 2102 |
| 2103 .layer-4 { |
| 2104 border-color: var(--paper-spinner-layer-4-color, --google-green-500); |
| 2105 } |
| 2106 |
| 2107 /** |
| 2108 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): |
| 2109 * |
| 2110 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel
l - it doesn't |
| 2111 * guarantee that the animation will start _exactly_ after that value. So
we avoid using |
| 2112 * animation-delay and instead set custom keyframes for each color (as lay
er-2undant as it |
| 2113 * seems). |
| 2114 */ |
| 2115 .active .spinner-layer { |
| 2116 -webkit-animation-name: fill-unfill-rotate; |
| 2117 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); |
| 2118 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2119 -webkit-animation-iteration-count: infinite; |
| 2120 animation-name: fill-unfill-rotate; |
| 2121 animation-duration: var(--paper-spinner-full-cycle-duration); |
| 2122 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2123 animation-iteration-count: infinite; |
| 2124 opacity: 1; |
| 2125 } |
| 2126 |
| 2127 .active .spinner-layer.layer-1 { |
| 2128 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| 2129 animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| 2130 } |
| 2131 |
| 2132 .active .spinner-layer.layer-2 { |
| 2133 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| 2134 animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| 2135 } |
| 2136 |
| 2137 .active .spinner-layer.layer-3 { |
| 2138 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| 2139 animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| 2140 } |
| 2141 |
| 2142 .active .spinner-layer.layer-4 { |
| 2143 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| 2144 animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| 2145 } |
| 2146 |
| 2147 @-webkit-keyframes fill-unfill-rotate { |
| 2148 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
| 2149 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */ |
| 2150 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
| 2151 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */ |
| 2152 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
| 2153 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */ |
| 2154 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
| 2155 to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
| 2156 } |
| 2157 |
| 2158 @keyframes fill-unfill-rotate { |
| 2159 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
| 2160 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ |
| 2161 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
| 2162 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ |
| 2163 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
| 2164 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ |
| 2165 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
| 2166 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
| 2167 } |
| 2168 |
| 2169 @-webkit-keyframes layer-1-fade-in-out { |
| 2170 0% { opacity: 1 } |
| 2171 25% { opacity: 1 } |
| 2172 26% { opacity: 0 } |
| 2173 89% { opacity: 0 } |
| 2174 90% { opacity: 1 } |
| 2175 to { opacity: 1 } |
| 2176 } |
| 2177 |
| 2178 @keyframes layer-1-fade-in-out { |
| 2179 0% { opacity: 1 } |
| 2180 25% { opacity: 1 } |
| 2181 26% { opacity: 0 } |
| 2182 89% { opacity: 0 } |
| 2183 90% { opacity: 1 } |
| 2184 to { opacity: 1 } |
| 2185 } |
| 2186 |
| 2187 @-webkit-keyframes layer-2-fade-in-out { |
| 2188 0% { opacity: 0 } |
| 2189 15% { opacity: 0 } |
| 2190 25% { opacity: 1 } |
| 2191 50% { opacity: 1 } |
| 2192 51% { opacity: 0 } |
| 2193 to { opacity: 0 } |
| 2194 } |
| 2195 |
| 2196 @keyframes layer-2-fade-in-out { |
| 2197 0% { opacity: 0 } |
| 2198 15% { opacity: 0 } |
| 2199 25% { opacity: 1 } |
| 2200 50% { opacity: 1 } |
| 2201 51% { opacity: 0 } |
| 2202 to { opacity: 0 } |
| 2203 } |
| 2204 |
| 2205 @-webkit-keyframes layer-3-fade-in-out { |
| 2206 0% { opacity: 0 } |
| 2207 40% { opacity: 0 } |
| 2208 50% { opacity: 1 } |
| 2209 75% { opacity: 1 } |
| 2210 76% { opacity: 0 } |
| 2211 to { opacity: 0 } |
| 2212 } |
| 2213 |
| 2214 @keyframes layer-3-fade-in-out { |
| 2215 0% { opacity: 0 } |
| 2216 40% { opacity: 0 } |
| 2217 50% { opacity: 1 } |
| 2218 75% { opacity: 1 } |
| 2219 76% { opacity: 0 } |
| 2220 to { opacity: 0 } |
| 2221 } |
| 2222 |
| 2223 @-webkit-keyframes layer-4-fade-in-out { |
| 2224 0% { opacity: 0 } |
| 2225 65% { opacity: 0 } |
| 2226 75% { opacity: 1 } |
| 2227 90% { opacity: 1 } |
| 2228 to { opacity: 0 } |
| 2229 } |
| 2230 |
| 2231 @keyframes layer-4-fade-in-out { |
| 2232 0% { opacity: 0 } |
| 2233 65% { opacity: 0 } |
| 2234 75% { opacity: 1 } |
| 2235 90% { opacity: 1 } |
| 2236 to { opacity: 0 } |
| 2237 } |
| 2238 |
| 2239 .circle-clipper { |
| 2240 display: inline-block; |
| 2241 position: relative; |
| 2242 width: 50%; |
| 2243 height: 100%; |
| 2244 overflow: hidden; |
| 2245 border-color: inherit; |
| 2246 } |
| 2247 |
| 2248 /** |
| 2249 * Patch the gap that appear between the two adjacent div.circle-clipper w
hile the |
| 2250 * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge). |
| 2251 */ |
| 2252 .spinner-layer::after { |
| 2253 left: 45%; |
| 2254 width: 10%; |
| 2255 border-top-style: solid; |
| 2256 } |
| 2257 |
| 2258 .spinner-layer::after, |
| 2259 .circle-clipper::after { |
| 2260 content: ''; |
| 2261 box-sizing: border-box; |
| 2262 position: absolute; |
| 2263 top: 0; |
| 2264 border-width: var(--paper-spinner-stroke-width, 3px); |
| 2265 border-color: inherit; |
| 2266 border-radius: 50%; |
| 2267 } |
| 2268 |
| 2269 .circle-clipper::after { |
| 2270 bottom: 0; |
| 2271 width: 200%; |
| 2272 border-style: solid; |
| 2273 border-bottom-color: transparent !important; |
| 2274 } |
| 2275 |
| 2276 .circle-clipper.left::after { |
| 2277 left: 0; |
| 2278 border-right-color: transparent !important; |
| 2279 -webkit-transform: rotate(129deg); |
| 2280 transform: rotate(129deg); |
| 2281 } |
| 2282 |
| 2283 .circle-clipper.right::after { |
| 2284 left: -100%; |
| 2285 border-left-color: transparent !important; |
| 2286 -webkit-transform: rotate(-129deg); |
| 2287 transform: rotate(-129deg); |
| 2288 } |
| 2289 |
| 2290 .active .gap-patch::after, |
| 2291 .active .circle-clipper::after { |
| 2292 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration
); |
| 2293 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2294 -webkit-animation-iteration-count: infinite; |
| 2295 animation-duration: var(--paper-spinner-expand-contract-duration); |
| 2296 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 2297 animation-iteration-count: infinite; |
| 2298 } |
| 2299 |
| 2300 .active .circle-clipper.left::after { |
| 2301 -webkit-animation-name: left-spin; |
| 2302 animation-name: left-spin; |
| 2303 } |
| 2304 |
| 2305 .active .circle-clipper.right::after { |
| 2306 -webkit-animation-name: right-spin; |
| 2307 animation-name: right-spin; |
| 2308 } |
| 2309 |
| 2310 @-webkit-keyframes left-spin { |
| 2311 0% { -webkit-transform: rotate(130deg) } |
| 2312 50% { -webkit-transform: rotate(-5deg) } |
| 2313 to { -webkit-transform: rotate(130deg) } |
| 2314 } |
| 2315 |
| 2316 @keyframes left-spin { |
| 2317 0% { transform: rotate(130deg) } |
| 2318 50% { transform: rotate(-5deg) } |
| 2319 to { transform: rotate(130deg) } |
| 2320 } |
| 2321 |
| 2322 @-webkit-keyframes right-spin { |
| 2323 0% { -webkit-transform: rotate(-130deg) } |
| 2324 50% { -webkit-transform: rotate(5deg) } |
| 2325 to { -webkit-transform: rotate(-130deg) } |
| 2326 } |
| 2327 |
| 2328 @keyframes right-spin { |
| 2329 0% { transform: rotate(-130deg) } |
| 2330 50% { transform: rotate(5deg) } |
| 2331 to { transform: rotate(-130deg) } |
| 2332 } |
| 2333 |
| 2334 #spinnerContainer.cooldown { |
| 2335 -webkit-animation: container-rotate var(--paper-spinner-container-rotati
on-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cu
bic-bezier(0.4, 0.0, 0.2, 1); |
| 2336 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi
er(0.4, 0.0, 0.2, 1); |
| 2337 } |
| 2338 |
| 2339 @-webkit-keyframes fade-out { |
| 2340 0% { opacity: 1 } |
| 2341 to { opacity: 0 } |
| 2342 } |
| 2343 |
| 2344 @keyframes fade-out { |
| 2345 0% { opacity: 1 } |
| 2346 to { opacity: 0 } |
| 2347 } |
| 2348 </style> |
| 2349 </template> |
| 2350 </dom-module> |
| 2351 |
| 2352 |
| 2353 <dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/p
aper-spinner/"> |
| 2354 <template strip-whitespace=""> |
| 2355 <style include="paper-spinner-styles"></style> |
| 2356 |
| 2357 <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, _
_coolingDown)]]"> |
| 2358 <div class="spinner-layer"> |
| 2359 <div class="circle-clipper left"></div> |
| 2360 <div class="circle-clipper right"></div> |
| 2361 </div> |
| 2362 </div> |
| 2363 </template> |
| 2364 |
| 2365 </dom-module> |
| 2366 <dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elemen
ts/cr_toolbar/"> |
| 2367 <template> |
| 2368 <style> |
| 2369 :host { |
| 2370 align-items: center; |
| 2371 display: flex; |
| 2372 height: 40px; |
| 2373 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), |
| 2374 width 150ms cubic-bezier(0.4, 0, 0.2, 1); |
| 2375 width: 44px; |
| 2376 } |
| 2377 |
| 2378 [hidden] { |
| 2379 display: none !important; |
| 2380 } |
| 2381 |
| 2382 paper-icon-button { |
| 2383 height: 32px; |
| 2384 margin: 6px; |
| 2385 min-width: 32px; |
| 2386 padding: 6px; |
| 2387 width: 32px; |
| 2388 } |
| 2389 |
| 2390 #icon { |
| 2391 --paper-icon-button-ink-color: white; |
| 2392 transition: margin 150ms, opacity 200ms; |
| 2393 } |
| 2394 |
| 2395 #prompt { |
| 2396 opacity: 0; |
| 2397 } |
| 2398 |
| 2399 paper-spinner-lite { |
| 2400 --paper-spinner-color: white; |
| 2401 height: 20px; |
| 2402 margin: 0 6px; |
| 2403 opacity: 0; |
| 2404 padding: 6px; |
| 2405 position: absolute; |
| 2406 width: 20px; |
| 2407 } |
| 2408 |
| 2409 paper-spinner-lite[active] { |
| 2410 opacity: 1; |
| 2411 } |
| 2412 |
| 2413 #prompt, |
| 2414 paper-spinner-lite { |
| 2415 transition: opacity 200ms; |
| 2416 } |
| 2417 |
| 2418 paper-input-container { |
| 2419 --paper-input-container-input-color: white; |
| 2420 --paper-input-container-underline: { |
| 2421 display: none; |
| 2422 }; |
| 2423 --paper-input-container-underline-focus: { |
| 2424 display: none; |
| 2425 }; |
| 2426 --paper-input-container-label: { |
| 2427 color: inherit; |
| 2428 font-size: inherit; |
| 2429 }; |
| 2430 -webkit-padding-start: 2px; |
| 2431 flex: 1; |
| 2432 } |
| 2433 |
| 2434 input[type='search']::-webkit-search-decoration, |
| 2435 input[type='search']::-webkit-search-cancel-button, |
| 2436 input[type='search']::-webkit-search-results-button { |
| 2437 -webkit-appearance: none; |
| 2438 } |
| 2439 |
| 2440 /** Wide layout. */ |
| 2441 :host(:not([narrow])) { |
| 2442 -webkit-padding-end: 0; |
| 2443 background: rgba(0, 0, 0, 0.22); |
| 2444 border-radius: 2px; |
| 2445 cursor: text; |
| 2446 width: var(--cr-toolbar-field-width); |
| 2447 } |
| 2448 |
| 2449 :host(:not([narrow]):not([showing-search])) #icon, |
| 2450 :host(:not([narrow]):not([showing-search])) #prompt { |
| 2451 opacity: 0.6; |
| 2452 } |
| 2453 |
| 2454 :host([narrow]:not([showing-search])) paper-input-container { |
| 2455 display: none; |
| 2456 } |
| 2457 |
| 2458 /* Search open. */ |
| 2459 :host([showing-search][spinner-active]) #icon { |
| 2460 opacity: 0; |
| 2461 } |
| 2462 |
| 2463 :host([narrow][showing-search]) { |
| 2464 width: 100%; |
| 2465 } |
| 2466 |
| 2467 /* |
| 2468 * Margin needs to be animated to prevent jumping around during |
| 2469 * opening/closing. -webkit-margin-start is not animatable, so we have to |
| 2470 * use regular margin-left/right instead. |
| 2471 */ |
| 2472 :host-context([dir=ltr]):host([narrow][showing-search]) #icon { |
| 2473 margin-left: 18px; |
| 2474 } |
| 2475 |
| 2476 :host-context([dir=rtl]):host([narrow][showing-search]) #icon { |
| 2477 margin-right: 18px; |
| 2478 } |
| 2479 </style> |
| 2480 <paper-spinner-lite active="[[isSpinnerShown_(spinnerActive, showingSearch)]
]"> |
| 2481 </paper-spinner-lite> |
| 2482 <paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[
[computeIconTabIndex_(narrow)]]"> |
| 2483 </paper-icon-button> |
| 2484 <paper-input-container id="searchTerm" on-search="onSearchTermSearch" on-key
down="onSearchTermKeydown" no-label-float=""> |
| 2485 <label id="prompt" for="searchInput">[[label]]</label> |
| 2486 <input is="iron-input" id="searchInput" type="search" on-blur="onInputBlur
_" incremental=""> |
| 2487 </paper-input-container> |
| 2488 <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]]"
hidden$="[[!hasSearchText_]]" on-tap="hideSearch_"> |
| 2489 </paper-icon-button> |
| 2490 </template> |
| 2491 </dom-module> |
| 2492 <dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar
/"> |
| 2493 <template> |
| 2494 <style> |
| 2495 :host { |
| 2496 --cr-toolbar-field-width: 580px; |
| 2497 color: #fff; |
| 2498 display: flex; |
| 2499 height: 56px; |
| 2500 } |
| 2501 |
| 2502 h1 { |
| 2503 @apply(--layout-flex); |
| 2504 -webkit-margin-start: 6px; |
| 2505 font-size: 123%; |
| 2506 font-weight: 400; |
| 2507 text-overflow: ellipsis; |
| 2508 overflow: hidden; |
| 2509 white-space: nowrap; |
| 2510 } |
| 2511 |
| 2512 #leftContent { |
| 2513 -webkit-margin-start: 18px; |
| 2514 align-items: center; |
| 2515 display: flex; |
| 2516 position: absolute; |
| 2517 transition: opacity 100ms; |
| 2518 } |
| 2519 |
| 2520 #menuButton { |
| 2521 height: 32px; |
| 2522 margin-bottom: 6px; |
| 2523 margin-top: 6px; |
| 2524 min-width: 32px; |
| 2525 padding: 6px; |
| 2526 width: 32px; |
| 2527 } |
| 2528 |
| 2529 :host(:not([show-menu])) #menuButton { |
| 2530 display: none; |
| 2531 } |
| 2532 |
| 2533 #centeredContent { |
| 2534 -webkit-margin-start: var(--cr-toolbar-field-margin, 0); |
| 2535 -webkit-padding-end: 12px; |
| 2536 display: flex; |
| 2537 flex: 1 1 0; |
| 2538 justify-content: center; |
| 2539 } |
| 2540 |
| 2541 :host(:not([narrow_])) #leftContent { |
| 2542 max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2); |
| 2543 } |
| 2544 |
| 2545 :host([narrow_]) #centeredContent { |
| 2546 justify-content: flex-end; |
| 2547 } |
| 2548 |
| 2549 :host([narrow_][showing-search_]) #leftContent { |
| 2550 opacity: 0; |
| 2551 } |
| 2552 </style> |
| 2553 <div id="leftContent"> |
| 2554 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_"> |
| 2555 </paper-icon-button> |
| 2556 <h1>[[pageName]]</h1> |
| 2557 </div> |
| 2558 |
| 2559 <div id="centeredContent"> |
| 2560 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP
rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing
-search="{{showingSearch_}}"> |
| 2561 </cr-toolbar-search-field> |
| 2562 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> |
| 2563 </iron-media-query> |
| 2564 </div> |
| 2565 </template> |
| 2566 </dom-module> |
| 2567 <iron-iconset-svg size="24" name="history"> |
| 2568 <svg> |
| 2569 <defs> |
| 2570 |
| 2571 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12
z"></path></g> |
| 2572 <g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 1
9c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z
"></path></g> |
| 2573 </defs> |
| 2574 </svg> |
| 2575 </iron-iconset-svg> |
| 2576 <dom-module id="shared-style" assetpath="chrome://history/"> |
| 2577 <template> |
| 2578 <style> |
| 2579 :root { |
| 2580 --card-border-color: rgba(0, 0, 0, 0.14); |
| 2581 --card-first-last-item-padding: 8px; |
| 2582 --card-max-width: 960px; |
| 2583 --card-min-width: 550px; |
| 2584 --card-padding-between: 20px; |
| 2585 --card-padding-side: 24px; |
| 2586 --card-sizing: { |
| 2587 margin: 0 auto; |
| 2588 max-width: var(--card-max-width); |
| 2589 min-width: var(--card-min-width); |
| 2590 padding: 0 var(--card-padding-side); |
| 2591 width: calc(100% - 2 * var(--card-padding-side)); |
| 2592 }; |
| 2593 --first-card-padding-top: 24px; |
| 2594 --item-height: 44px; |
| 2595 --primary-text-color: #333; |
| 2596 --secondary-text-color: #757575; |
| 2597 --side-bar-width: 256px; |
| 2598 --toolbar-grouped-height: 101px; |
| 2599 --toolbar-height: 56px; |
| 2600 } |
| 2601 |
| 2602 [hidden] { |
| 2603 display: none !important; |
| 2604 } |
| 2605 |
| 2606 .card-title { |
| 2607 @apply(--layout-center); |
| 2608 @apply(--layout-horizontal); |
| 2609 -webkit-padding-start: 20px; |
| 2610 border-bottom: 1px solid var(--card-border-color); |
| 2611 border-radius: 2px 2px 0 0; |
| 2612 color: var(--primary-text-color); |
| 2613 font-size: 14px; |
| 2614 font-weight: 500; |
| 2615 height: 48px; |
| 2616 } |
| 2617 |
| 2618 .centered-message { |
| 2619 align-items: center; |
| 2620 color: #b4b4b4; |
| 2621 display: flex; |
| 2622 flex: 1; |
| 2623 font-size: 14px; |
| 2624 font-weight: 500; |
| 2625 height: 100%; |
| 2626 justify-content: center; |
| 2627 } |
| 2628 |
| 2629 .menu-item { |
| 2630 -webkit-user-select: none; |
| 2631 cursor: pointer; |
| 2632 font: inherit; |
| 2633 white-space: nowrap; |
| 2634 } |
| 2635 |
| 2636 .website-icon { |
| 2637 -webkit-margin-end: 16px; |
| 2638 background-repeat: no-repeat; |
| 2639 background-size: 16px; |
| 2640 height: 16px; |
| 2641 width: 16px; |
| 2642 } |
| 2643 |
| 2644 .website-title { |
| 2645 color: var(--primary-text-color); |
| 2646 overflow: hidden; |
| 2647 text-decoration: none; |
| 2648 text-overflow: ellipsis; |
| 2649 white-space: nowrap; |
| 2650 } |
| 2651 |
| 2652 button.icon-button { |
| 2653 height: 36px; |
| 2654 width: 36px; |
| 2655 } |
| 2656 |
| 2657 button.icon-button iron-icon { |
| 2658 color: var(--secondary-text-color); |
| 2659 height: 20px; |
| 2660 width: 20px; |
| 2661 } |
| 2662 </style> |
| 2663 </template> |
| 2664 </dom-module> |
| 2665 <dom-module id="history-toolbar" assetpath="chrome://history/"> |
| 2666 <template> |
| 2667 <style include="shared-style"> |
| 2668 :host { |
| 2669 color: #fff; |
| 2670 display: block; |
| 2671 transition: background-color 150ms; |
| 2672 width: 100%; |
| 2673 } |
| 2674 |
| 2675 cr-toolbar, |
| 2676 #overlay-buttons, |
| 2677 #overlay-wrapper, |
| 2678 #toolbar-container { |
| 2679 @apply(--layout-center); |
| 2680 @apply(--layout-horizontal); |
| 2681 width: 100%; |
| 2682 } |
| 2683 |
| 2684 :host([items-selected_]) { |
| 2685 background: rgb(68, 136, 255); |
| 2686 } |
| 2687 |
| 2688 #toolbar-container { |
| 2689 height: var(--toolbar-height); |
| 2690 } |
| 2691 |
| 2692 cr-toolbar { |
| 2693 --cr-toolbar-field-margin: var(--side-bar-width); |
| 2694 } |
| 2695 |
| 2696 cr-toolbar[show-menu] { |
| 2697 --cr-toolbar-field-margin: 0; |
| 2698 } |
| 2699 |
| 2700 :host(:not([has-drawer])) #overlay-wrapper { |
| 2701 -webkit-margin-start: var(--side-bar-width); |
| 2702 } |
| 2703 |
| 2704 #overlay-buttons { |
| 2705 margin: 0 auto; |
| 2706 max-width: var(--card-max-width); |
| 2707 padding: 0 var(--card-padding-side); |
| 2708 } |
| 2709 |
| 2710 paper-button { |
| 2711 font-weight: 500; |
| 2712 } |
| 2713 |
| 2714 #number-selected { |
| 2715 @apply(--layout-flex); |
| 2716 } |
| 2717 |
| 2718 #cancel-icon-button { |
| 2719 -webkit-margin-end: 24px; |
| 2720 -webkit-margin-start: 2px; |
| 2721 height: 36px; |
| 2722 min-width: 36px; |
| 2723 width: 36px; |
| 2724 } |
| 2725 |
| 2726 #grouped-nav-container paper-icon-button { |
| 2727 --paper-icon-button-ink-color: rgba(255, 255, 255, 0.4); |
| 2728 -webkit-margin-start: 24px; |
| 2729 flex: 0 0 auto; |
| 2730 } |
| 2731 |
| 2732 paper-tab { |
| 2733 --paper-tab-ink: rgba(255, 255, 255, 0.4); |
| 2734 font-size: 13px; |
| 2735 text-transform: uppercase; |
| 2736 } |
| 2737 |
| 2738 paper-tabs { |
| 2739 --paper-tabs-selection-bar-color: var(--google-blue-500); |
| 2740 height: calc(var(--toolbar-grouped-height) - var(--toolbar-height)); |
| 2741 min-width: 300px; |
| 2742 } |
| 2743 |
| 2744 #grouped-buttons-container { |
| 2745 @apply(--layout-center); |
| 2746 @apply(--layout-horizontal); |
| 2747 } |
| 2748 |
| 2749 #grouped-range-buttons { |
| 2750 -webkit-margin-start: 32px; |
| 2751 } |
| 2752 |
| 2753 #grouped-nav-container { |
| 2754 @apply(--layout-center); |
| 2755 @apply(--layout-end-justified); |
| 2756 @apply(--layout-flex); |
| 2757 @apply(--layout-horizontal); |
| 2758 -webkit-margin-end: 24px; |
| 2759 overflow: hidden; |
| 2760 transition: opacity 150ms; |
| 2761 } |
| 2762 |
| 2763 :host([grouped-range='0']) #grouped-nav-container { |
| 2764 opacity: 0; |
| 2765 pointer-events: none; |
| 2766 } |
| 2767 |
| 2768 #grouped-date { |
| 2769 flex: 0 1 auto; |
| 2770 opacity: 0.7; |
| 2771 overflow: hidden; |
| 2772 text-align: right; |
| 2773 text-overflow: ellipsis; |
| 2774 white-space: nowrap; |
| 2775 } |
| 2776 |
| 2777 :host-context([dir=rtl]) .rtl-reversible { |
| 2778 transform: rotate(180deg); |
| 2779 } |
| 2780 </style> |
| 2781 <div id="toolbar-container"> |
| 2782 <cr-toolbar id="main-toolbar" page-name="$i18n{title}" clear-label="$i18n{
clearSearch}" search-prompt="$i18n{searchPrompt}" hidden$="[[itemsSelected_]]" s
pinner-active="[[spinnerActive]]" show-menu="[[hasDrawer]]" on-search-changed="o
nSearchChanged_"> |
| 2783 </cr-toolbar> |
| 2784 <div id="overlay-wrapper" hidden$="[[!itemsSelected_]]"> |
| 2785 <div id="overlay-buttons"> |
| 2786 <paper-icon-button icon="cr:clear" id="cancel-icon-button" on-tap="onC
learSelectionTap_"></paper-icon-button> |
| 2787 <div id="number-selected">[[numberOfItemsSelected_(count)]]</div> |
| 2788 <paper-button id="cancel-button" on-tap="onClearSelectionTap_"> |
| 2789 $i18n{cancel} |
| 2790 </paper-button> |
| 2791 <paper-button id="delete-button" on-tap="onDeleteTap_"> |
| 2792 $i18n{delete} |
| 2793 </paper-button> |
| 2794 </div> |
| 2795 </div> |
| 2796 </div> |
| 2797 <template is="dom-if" if="[[isGroupedMode]]"> |
| 2798 <div id="grouped-buttons-container"> |
| 2799 <paper-tabs attr-for-selected="value" selected="{{groupedRange}}" id="gr
ouped-range-buttons"> |
| 2800 <paper-tab value="0">$i18n{rangeAllTime}</paper-tab> |
| 2801 <paper-tab value="1">$i18n{rangeWeek}</paper-tab> |
| 2802 <paper-tab value="2">$i18n{rangeMonth}</paper-tab> |
| 2803 </paper-tabs> |
| 2804 <div id="grouped-nav-container"> |
| 2805 <span id="grouped-date"> |
| 2806 {{getHistoryInterval_(queryStartTime, queryEndTime)}} |
| 2807 </span> |
| 2808 <paper-icon-button icon="history:today" alt="$i18n{rangeToday}" title=
"$i18n{rangeToday}"></paper-icon-button> |
| 2809 <paper-icon-button icon="history:chevron-left" alt="$i18n{rangePreviou
s}" title="$i18n{rangePrevious}" class="rtl-reversible"></paper-icon-button> |
| 2810 <paper-icon-button icon="cr:chevron-right" alt="$i18n{rangeNext}" titl
e="$i18n{rangeNext}" class="rtl-reversible"></paper-icon-button> |
| 2811 </div> |
| 2812 </div> |
| 2813 </template> |
| 2814 </template> |
| 2815 </dom-module> |
| 2816 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/"
> |
| 2817 <template> |
| 2818 <style> |
| 2819 :host { |
| 2820 border: 0; |
| 2821 border-radius: 2px; |
| 2822 bottom: 0; |
| 2823 color: inherit; |
| 2824 padding: 0; |
| 2825 top: 0; |
| 2826 } |
| 2827 |
| 2828 :host::backdrop { |
| 2829 background-color: rgba(0, 0, 0, 0.6); |
| 2830 bottom: 0; |
| 2831 left: 0; |
| 2832 position: fixed; |
| 2833 right: 0; |
| 2834 top: 0; |
| 2835 } |
| 2836 |
| 2837 .title-container { |
| 2838 align-items: center; |
| 2839 /* TODO(dbeam): should this be a --settings-separator-line? */ |
| 2840 border-bottom: 1px solid rgba(0, 0, 0, 0.14); |
| 2841 display: flex; |
| 2842 min-height: 52px; |
| 2843 } |
| 2844 |
| 2845 :host ::content .title { |
| 2846 font-size: 123.07%; /* (16px / 13px) * 100 */ |
| 2847 } |
| 2848 |
| 2849 #close { |
| 2850 --paper-icon-button: { |
| 2851 height: 40px; |
| 2852 width: 40px; |
| 2853 }; |
| 2854 -webkit-margin-end: 6px; |
| 2855 /* <paper-icon-button> overrides --iron-icon-{height,width}, so this |
| 2856 * padding essentially reduces 40x40 to 20x20. */ |
| 2857 padding: 10px; |
| 2858 } |
| 2859 |
| 2860 .body-container { |
| 2861 display: flex; |
| 2862 flex-direction: column; |
| 2863 max-width: 800px; |
| 2864 min-width: 512px; |
| 2865 /* TODO(dbeam): use <paper-dialog-scrollable> to get dividers? */ |
| 2866 overflow: auto; |
| 2867 } |
| 2868 |
| 2869 :host ::content .body { |
| 2870 margin: 12px 0; |
| 2871 } |
| 2872 |
| 2873 :host ::content .body, |
| 2874 :host ::content .title { |
| 2875 -webkit-padding-end: 24px; |
| 2876 -webkit-padding-start: 24px; |
| 2877 flex: 1; |
| 2878 } |
| 2879 |
| 2880 :host ::content .button-container { |
| 2881 -webkit-padding-end: 16px; |
| 2882 -webkit-padding-start: 16px; |
| 2883 display: flex; |
| 2884 justify-content: flex-end; |
| 2885 margin-bottom: 12px; |
| 2886 margin-top: 12px; |
| 2887 } |
| 2888 |
| 2889 :host ::content .button-container .cancel-button { |
| 2890 -webkit-margin-end: 8px; |
| 2891 color: var(--paper-grey-600); |
| 2892 } |
| 2893 |
| 2894 :host ::content .footer { |
| 2895 background-color: var(--paper-grey-200); |
| 2896 border-bottom-left-radius: inherit; |
| 2897 border-bottom-right-radius: inherit; |
| 2898 margin: 0; |
| 2899 padding: 12px 20px; |
| 2900 } |
| 2901 </style> |
| 2902 <div class="title-container"> |
| 2903 <content select=".title"></content> |
| 2904 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close"> |
| 2905 </paper-icon-button> |
| 2906 </div> |
| 2907 <div class="body-container"> |
| 2908 <content select=".body"></content> |
| 2909 </div> |
| 2910 <content select=".button-container"></content> |
| 2911 <content select=".footer"></content> |
| 2912 </template> |
| 2913 </dom-module> |
| 2914 <dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_
0/iron-overlay-behavior/"> |
| 2915 |
| 2916 <template> |
| 2917 <style> |
| 2918 :host { |
| 2919 position: fixed; |
| 2920 top: 0; |
| 2921 left: 0; |
| 2922 width: 100%; |
| 2923 height: 100%; |
| 2924 background-color: var(--iron-overlay-backdrop-background-color, #000); |
| 2925 opacity: 0; |
| 2926 transition: opacity 0.2s; |
| 2927 pointer-events: none; |
| 2928 @apply(--iron-overlay-backdrop); |
| 2929 } |
| 2930 |
| 2931 :host(.opened) { |
| 2932 opacity: var(--iron-overlay-backdrop-opacity, 0.6); |
| 2933 pointer-events: auto; |
| 2934 @apply(--iron-overlay-backdrop-opened); |
| 2935 } |
| 2936 </style> |
| 2937 |
| 2938 <content></content> |
| 2939 </template> |
| 2940 |
| 2941 </dom-module> |
| 2942 |
| 2943 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne
xt-lite.min.js"></script> |
| 2944 |
| 2945 |
| 2946 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d
ropdown/"> |
| 2947 <template> |
| 2948 <style> |
| 2949 :host { |
| 2950 position: fixed; |
| 2951 } |
| 2952 |
| 2953 #contentWrapper ::content > * { |
| 2954 overflow: auto; |
| 2955 } |
| 2956 |
| 2957 #contentWrapper.animating ::content > * { |
| 2958 overflow: hidden; |
| 2959 } |
| 2960 </style> |
| 2961 |
| 2962 <div id="contentWrapper"> |
| 2963 <content id="content" select=".dropdown-content"></content> |
| 2964 </div> |
| 2965 </template> |
| 2966 |
| 2967 </dom-module> |
| 2968 <dom-module id="cr-shared-menu" assetpath="chrome://resources/cr_elements/cr_sha
red_menu/"> |
| 2969 <template> |
| 2970 <style> |
| 2971 #menu { |
| 2972 @apply(--shadow-elevation-2dp); |
| 2973 background-color: white; |
| 2974 overflow: hidden; |
| 2975 padding: 8px 0; |
| 2976 position: relative; |
| 2977 } |
| 2978 </style> |
| 2979 <iron-dropdown id="dropdown" allow-outside-scroll="" restore-focus-on-close=
"" vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}" open-ani
mation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimation
Config]]"> |
| 2980 <div id="menu" class="dropdown-content" role="menu"> |
| 2981 <content></content> |
| 2982 </div> |
| 2983 </iron-dropdown> |
| 2984 </template> |
| 2985 </dom-module> |
| 2986 |
| 2987 <style is="custom-style"> |
| 2988 :root { |
| 2989 --cr-actionable: { |
| 2990 cursor: pointer; |
| 2991 }; |
| 2992 --cr-focused-item-color: var(--google-grey-300); |
| 2993 --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06); |
| 2994 } |
| 2995 </style> |
| 2996 |
| 2997 <dom-module id="cr-shared-style" assetpath="chrome://resources/cr_elements/"> |
| 2998 <template> |
| 2999 <style> |
| 3000 .action-button { |
| 3001 background: var(--google-blue-500); |
| 3002 color: white; |
| 3003 --paper-button-flat-keyboard-focus: { |
| 3004 background: rgb(58, 117, 215); /* 88% of --google-blue-500 */ |
| 3005 }; |
| 3006 } |
| 3007 |
| 3008 .action-button[disabled] { |
| 3009 opacity: .25; /* TODO(dbeam): check this value with bettes. */ |
| 3010 } |
| 3011 |
| 3012 .cancel-button { |
| 3013 --paper-button-flat-keyboard-focus: { |
| 3014 background: rgba(0, 0, 0, .12); |
| 3015 }; |
| 3016 } |
| 3017 |
| 3018 .action-button, |
| 3019 .cancel-button { |
| 3020 font-weight: 500; |
| 3021 } |
| 3022 |
| 3023 [actionable] { |
| 3024 @apply(--cr-actionable); |
| 3025 } |
| 3026 </style> |
| 3027 </template> |
| 3028 </dom-module> |
| 3029 |
| 3030 |
| 3031 <dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/
v1_0/paper-item/"> |
| 3032 <template> |
| 3033 <style> |
| 3034 :host, .paper-item { |
| 3035 display: block; |
| 3036 position: relative; |
| 3037 min-height: var(--paper-item-min-height, 48px); |
| 3038 padding: 0px 16px; |
| 3039 } |
| 3040 |
| 3041 .paper-item { |
| 3042 @apply(--paper-font-subhead); |
| 3043 border:none; |
| 3044 outline: none; |
| 3045 background: white; |
| 3046 width: 100%; |
| 3047 text-align: left; |
| 3048 } |
| 3049 |
| 3050 :host([hidden]), .paper-item[hidden] { |
| 3051 display: none !important; |
| 3052 } |
| 3053 |
| 3054 :host(.iron-selected), .paper-item.iron-selected { |
| 3055 font-weight: var(--paper-item-selected-weight, bold); |
| 3056 |
| 3057 @apply(--paper-item-selected); |
| 3058 } |
| 3059 |
| 3060 :host([disabled]), .paper-item[disabled] { |
| 3061 color: var(--paper-item-disabled-color, --disabled-text-color); |
| 3062 |
| 3063 @apply(--paper-item-disabled); |
| 3064 } |
| 3065 |
| 3066 :host(:focus), .paper-item:focus { |
| 3067 position: relative; |
| 3068 outline: 0; |
| 3069 |
| 3070 @apply(--paper-item-focused); |
| 3071 } |
| 3072 |
| 3073 :host(:focus):before, .paper-item:focus:before { |
| 3074 @apply(--layout-fit); |
| 3075 |
| 3076 background: currentColor; |
| 3077 content: ''; |
| 3078 opacity: var(--dark-divider-opacity); |
| 3079 pointer-events: none; |
| 3080 |
| 3081 @apply(--paper-item-focused-before); |
| 3082 } |
| 3083 </style> |
| 3084 </template> |
| 3085 </dom-module> |
| 3086 |
| 3087 |
| 3088 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite
m/"> |
| 3089 <template> |
| 3090 <style include="paper-item-shared-styles"></style> |
| 3091 <style> |
| 3092 :host { |
| 3093 @apply(--layout-horizontal); |
| 3094 @apply(--layout-center); |
| 3095 @apply(--paper-font-subhead); |
| 3096 |
| 3097 @apply(--paper-item); |
| 3098 } |
| 3099 </style> |
| 3100 |
| 3101 <content></content> |
| 3102 </template> |
| 3103 |
| 3104 </dom-module> |
| 3105 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c
ollapse/"> |
| 3106 |
| 3107 <template> |
| 3108 |
| 3109 <style> |
| 3110 :host { |
| 3111 display: block; |
| 3112 transition-duration: var(--iron-collapse-transition-duration, 300ms); |
| 3113 overflow: visible; |
| 3114 } |
| 3115 |
| 3116 :host(.iron-collapse-closed) { |
| 3117 display: none; |
| 3118 } |
| 3119 |
| 3120 :host(:not(.iron-collapse-opened)) { |
| 3121 overflow: hidden; |
| 3122 } |
| 3123 </style> |
| 3124 |
| 3125 <content></content> |
| 3126 |
| 3127 </template> |
| 3128 |
| 3129 </dom-module> |
| 3130 |
| 3131 <dom-module id="paper-checkbox" assetpath="chrome://resources/polymer/v1_0/paper
-checkbox/"> |
| 3132 <template strip-whitespace=""> |
| 3133 <style> |
| 3134 :host { |
| 3135 display: inline-block; |
| 3136 white-space: nowrap; |
| 3137 cursor: pointer; |
| 3138 --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); |
| 3139 @apply(--paper-font-common-base); |
| 3140 line-height: 0; |
| 3141 -webkit-tap-highlight-color: transparent; |
| 3142 } |
| 3143 |
| 3144 :host([hidden]) { |
| 3145 display: none !important; |
| 3146 } |
| 3147 |
| 3148 :host(:focus) { |
| 3149 outline: none; |
| 3150 } |
| 3151 |
| 3152 .hidden { |
| 3153 display: none; |
| 3154 } |
| 3155 |
| 3156 #checkboxContainer { |
| 3157 display: inline-block; |
| 3158 position: relative; |
| 3159 width: var(--calculated-paper-checkbox-size); |
| 3160 height: var(--calculated-paper-checkbox-size); |
| 3161 min-width: var(--calculated-paper-checkbox-size); |
| 3162 margin: var(--paper-checkbox-margin, initial); |
| 3163 vertical-align: var(--paper-checkbox-vertical-align, middle); |
| 3164 background-color: var(--paper-checkbox-unchecked-background-color, trans
parent); |
| 3165 } |
| 3166 |
| 3167 #ink { |
| 3168 position: absolute; |
| 3169 |
| 3170 /* Center the ripple in the checkbox by negative offsetting it by |
| 3171 * (inkWidth - rippleWidth) / 2 */ |
| 3172 top: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--ca
lculated-paper-checkbox-size)) / 2); |
| 3173 left: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--c
alculated-paper-checkbox-size)) / 2); |
| 3174 width: calc(2.66 * var(--calculated-paper-checkbox-size)); |
| 3175 height: calc(2.66 * var(--calculated-paper-checkbox-size)); |
| 3176 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color); |
| 3177 opacity: 0.6; |
| 3178 pointer-events: none; |
| 3179 } |
| 3180 |
| 3181 :host-context([dir="rtl"]) #ink { |
| 3182 right: calc(0px - (2.66 * var(--calculated-paper-checkbox-size) - var(--
calculated-paper-checkbox-size)) / 2); |
| 3183 left: auto; |
| 3184 } |
| 3185 |
| 3186 #ink[checked] { |
| 3187 color: var(--paper-checkbox-checked-ink-color, --primary-color); |
| 3188 } |
| 3189 |
| 3190 #checkbox { |
| 3191 position: relative; |
| 3192 box-sizing: border-box; |
| 3193 height: 100%; |
| 3194 border: solid 2px; |
| 3195 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color
); |
| 3196 border-radius: 2px; |
| 3197 pointer-events: none; |
| 3198 -webkit-transition: background-color 140ms, border-color 140ms; |
| 3199 transition: background-color 140ms, border-color 140ms; |
| 3200 } |
| 3201 |
| 3202 /* checkbox checked animations */ |
| 3203 #checkbox.checked #checkmark { |
| 3204 -webkit-animation: checkmark-expand 140ms ease-out forwards; |
| 3205 animation: checkmark-expand 140ms ease-out forwards; |
| 3206 } |
| 3207 |
| 3208 @-webkit-keyframes checkmark-expand { |
| 3209 0% { |
| 3210 -webkit-transform: scale(0, 0) rotate(45deg); |
| 3211 } |
| 3212 100% { |
| 3213 -webkit-transform: scale(1, 1) rotate(45deg); |
| 3214 } |
| 3215 } |
| 3216 |
| 3217 @keyframes checkmark-expand { |
| 3218 0% { |
| 3219 transform: scale(0, 0) rotate(45deg); |
| 3220 } |
| 3221 100% { |
| 3222 transform: scale(1, 1) rotate(45deg); |
| 3223 } |
| 3224 } |
| 3225 |
| 3226 #checkbox.checked { |
| 3227 background-color: var(--paper-checkbox-checked-color, --primary-color); |
| 3228 border-color: var(--paper-checkbox-checked-color, --primary-color); |
| 3229 } |
| 3230 |
| 3231 #checkmark { |
| 3232 position: absolute; |
| 3233 width: 36%; |
| 3234 height: 70%; |
| 3235 border-style: solid; |
| 3236 border-top: none; |
| 3237 border-left: none; |
| 3238 border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size)); |
| 3239 border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size)); |
| 3240 border-color: var(--paper-checkbox-checkmark-color, white); |
| 3241 -webkit-transform-origin: 97% 86%; |
| 3242 transform-origin: 97% 86%; |
| 3243 box-sizing: content-box; /* protect against page-level box-sizing */ |
| 3244 } |
| 3245 |
| 3246 :host-context([dir="rtl"]) #checkmark { |
| 3247 -webkit-transform-origin: 50% 14%; |
| 3248 transform-origin: 50% 14%; |
| 3249 } |
| 3250 |
| 3251 /* label */ |
| 3252 #checkboxLabel { |
| 3253 position: relative; |
| 3254 display: inline-block; |
| 3255 vertical-align: middle; |
| 3256 padding-left: var(--paper-checkbox-label-spacing, 8px); |
| 3257 white-space: normal; |
| 3258 line-height: normal; |
| 3259 color: var(--paper-checkbox-label-color, --primary-text-color); |
| 3260 @apply(--paper-checkbox-label); |
| 3261 } |
| 3262 |
| 3263 :host([checked]) #checkboxLabel { |
| 3264 color: var(--paper-checkbox-label-checked-color, --paper-checkbox-label-
color); |
| 3265 @apply(--paper-checkbox-label-checked); |
| 3266 } |
| 3267 |
| 3268 :host-context([dir="rtl"]) #checkboxLabel { |
| 3269 padding-right: var(--paper-checkbox-label-spacing, 8px); |
| 3270 padding-left: 0; |
| 3271 } |
| 3272 |
| 3273 #checkboxLabel[hidden] { |
| 3274 display: none; |
| 3275 } |
| 3276 |
| 3277 /* disabled state */ |
| 3278 |
| 3279 :host([disabled]) #checkbox { |
| 3280 opacity: 0.5; |
| 3281 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color
); |
| 3282 } |
| 3283 |
| 3284 :host([disabled][checked]) #checkbox { |
| 3285 background-color: var(--paper-checkbox-unchecked-color, --primary-text-c
olor); |
| 3286 opacity: 0.5; |
| 3287 } |
| 3288 |
| 3289 :host([disabled]) #checkboxLabel { |
| 3290 opacity: 0.65; |
| 3291 } |
| 3292 |
| 3293 /* invalid state */ |
| 3294 #checkbox.invalid:not(.checked) { |
| 3295 border-color: var(--paper-checkbox-error-color, --error-color); |
| 3296 } |
| 3297 </style> |
| 3298 |
| 3299 <div id="checkboxContainer"> |
| 3300 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]"> |
| 3301 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> |
| 3302 </div> |
| 3303 </div> |
| 3304 |
| 3305 <div id="checkboxLabel"><content></content></div> |
| 3306 </template> |
| 3307 |
| 3308 </dom-module> |
| 3309 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v
1_0/paper-icon-button/"> |
| 3310 <template strip-whitespace=""> |
| 3311 <style> |
| 3312 :host { |
| 3313 vertical-align: middle; |
| 3314 color: inherit; |
| 3315 outline: none; |
| 3316 width: 24px; |
| 3317 height: 24px; |
| 3318 background: none; |
| 3319 margin: 0; |
| 3320 border: none; |
| 3321 padding: 0; |
| 3322 |
| 3323 position: relative; |
| 3324 cursor: pointer; |
| 3325 |
| 3326 /* NOTE: Both values are needed, since some phones require the value to
be `transparent`. */ |
| 3327 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| 3328 -webkit-tap-highlight-color: transparent; |
| 3329 } |
| 3330 |
| 3331 :host([disabled]) { |
| 3332 color: #9b9b9b; |
| 3333 pointer-events: none; |
| 3334 cursor: auto; |
| 3335 } |
| 3336 |
| 3337 paper-ripple { |
| 3338 opacity: 0.6; |
| 3339 color: currentColor; |
| 3340 } |
| 3341 </style> |
| 3342 <content></content> |
| 3343 </template> |
| 3344 </dom-module> |
| 3345 <dom-module id="history-searched-label" assetpath="chrome://history/"> |
| 3346 <template> |
| 3347 <span id="container"></span> |
| 3348 </template> |
| 3349 </dom-module> |
| 3350 <dom-module id="history-item" assetpath="chrome://history/"> |
| 3351 <template> |
| 3352 <style include="shared-style"> |
| 3353 :host { |
| 3354 display: block; |
| 3355 } |
| 3356 |
| 3357 :host(:not([embedded])) #main-container { |
| 3358 background: #fff; |
| 3359 border-color: var(--card-border-color); |
| 3360 border-style: solid; |
| 3361 border-width: 0 1px; |
| 3362 } |
| 3363 |
| 3364 :host(:not([embedded])) #sizing-container { |
| 3365 @apply(--card-sizing); |
| 3366 } |
| 3367 |
| 3368 :host([is-first-item]) #main-container { |
| 3369 margin-top: var(--first-card-padding-top); |
| 3370 } |
| 3371 |
| 3372 :host([is-card-start]) #main-container { |
| 3373 border-radius: 2px 2px 0 0; |
| 3374 border-top-width: 1px; |
| 3375 } |
| 3376 |
| 3377 :host([is-card-end]) #main-container { |
| 3378 border-bottom-width: 2px; |
| 3379 border-radius: 0 0 2px 2px; |
| 3380 margin-bottom: var(--card-padding-between); |
| 3381 } |
| 3382 |
| 3383 :host([is-card-start][is-card-end]) #main-container { |
| 3384 border-radius: 2px; |
| 3385 } |
| 3386 |
| 3387 #date-accessed { |
| 3388 display: none; |
| 3389 } |
| 3390 |
| 3391 :host([is-card-start]) #date-accessed { |
| 3392 display: flex; |
| 3393 } |
| 3394 |
| 3395 #item-container { |
| 3396 @apply(--layout-center); |
| 3397 @apply(--layout-horizontal); |
| 3398 min-height: var(--item-height); |
| 3399 } |
| 3400 |
| 3401 :host([is-card-start]) #item-container { |
| 3402 padding-top: var(--card-first-last-item-padding); |
| 3403 } |
| 3404 |
| 3405 :host([is-card-end]) #item-container { |
| 3406 padding-bottom: var(--card-first-last-item-padding); |
| 3407 } |
| 3408 |
| 3409 #title-and-domain { |
| 3410 @apply(--layout-center); |
| 3411 @apply(--layout-flex); |
| 3412 @apply(--layout-horizontal); |
| 3413 height: var(--item-height); |
| 3414 overflow: hidden; |
| 3415 } |
| 3416 |
| 3417 paper-checkbox { |
| 3418 --paper-checkbox-checked-color: rgb(68, 136, 255); |
| 3419 --paper-checkbox-size: 16px; |
| 3420 --paper-checkbox-unchecked-color: var(--secondary-text-color); |
| 3421 height: 16px; |
| 3422 margin: 0 16px 0 20px; |
| 3423 padding: 2px; |
| 3424 width: 16px; |
| 3425 } |
| 3426 |
| 3427 #time-accessed { |
| 3428 color: #646464; |
| 3429 min-width: 96px; |
| 3430 } |
| 3431 |
| 3432 #domain { |
| 3433 -webkit-margin-start: 16px; |
| 3434 color: var(--secondary-text-color); |
| 3435 flex-shrink: 0; |
| 3436 } |
| 3437 |
| 3438 #menu-button { |
| 3439 -webkit-margin-end: 12px; |
| 3440 } |
| 3441 |
| 3442 #star-container { |
| 3443 -webkit-margin-end: 4px; |
| 3444 -webkit-margin-start: 12px; |
| 3445 width: 32px; |
| 3446 } |
| 3447 |
| 3448 #bookmark-star { |
| 3449 color: rgb(68, 136, 255); |
| 3450 height: 32px; |
| 3451 width: 32px; |
| 3452 } |
| 3453 |
| 3454 #bookmark-star iron-icon { |
| 3455 height: 16px; |
| 3456 width: 16px; |
| 3457 } |
| 3458 |
| 3459 #time-gap-separator { |
| 3460 -webkit-border-start: 1px solid #888; |
| 3461 -webkit-margin-start: 77px; |
| 3462 height: 15px; |
| 3463 } |
| 3464 </style> |
| 3465 |
| 3466 <div id="sizing-container"> |
| 3467 <div id="main-container"> |
| 3468 <div id="date-accessed" class="card-title"> |
| 3469 [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]] |
| 3470 </div> |
| 3471 <div id="item-container"> |
| 3472 <paper-checkbox id="checkbox" on-tap="onCheckboxSelected_" checked="{{
selected}}" disabled="[[selectionNotAllowed_()]]"> |
| 3473 </paper-checkbox> |
| 3474 <span id="time-accessed">[[item.readableTimestamp]]</span> |
| 3475 <div class="website-icon" id="icon"></div> |
| 3476 <div id="title-and-domain"> |
| 3477 <a href="[[item.url]]" id="title" class="website-title"> |
| 3478 <history-searched-label title="[[cropItemTitle_(item.title)]]" sea
rch-term="[[searchTerm]]"></history-searched-label> |
| 3479 </a> |
| 3480 <span id="domain">[[item.domain]]</span> |
| 3481 </div> |
| 3482 <div id="star-container"> |
| 3483 <template is="dom-if" if="[[item.starred]]"> |
| 3484 <button is="paper-icon-button-light" id="bookmark-star" title="$i1
8n{removeBookmark}" on-tap="onRemoveBookmarkTap_"> |
| 3485 <iron-icon icon="cr:star"></iron-icon> |
| 3486 </button> |
| 3487 </template> |
| 3488 </div> |
| 3489 <button is="paper-icon-button-light" id="menu-button" class="icon-butt
on" title="$i18n{moreActionsButton}" on-tap="onMenuButtonTap_"> |
| 3490 <iron-icon icon="cr:more-vert"></iron-icon> |
| 3491 </button> |
| 3492 </div> |
| 3493 <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div> |
| 3494 </div> |
| 3495 </div> |
| 3496 </template> |
| 3497 </dom-module> |
| 3498 <dom-module id="history-grouped-list" assetpath="chrome://history/"> |
| 3499 <template> |
| 3500 <style include="shared-style"> |
| 3501 :host { |
| 3502 display: block; |
| 3503 overflow: auto; |
| 3504 position: relative; |
| 3505 } |
| 3506 |
| 3507 #main-container { |
| 3508 @apply(--card-sizing); |
| 3509 align-items: center; |
| 3510 display: flex; |
| 3511 flex-direction: column; |
| 3512 padding-top: var(--first-card-padding-top); |
| 3513 } |
| 3514 |
| 3515 .domain-heading { |
| 3516 align-items: center; |
| 3517 display: flex; |
| 3518 height: var(--item-height); |
| 3519 padding: 0 20px; |
| 3520 } |
| 3521 |
| 3522 .domain-count { |
| 3523 color: rgb(151, 156, 160); |
| 3524 padding-left: 10px; |
| 3525 } |
| 3526 |
| 3527 .domain-heading-text { |
| 3528 display: flex; |
| 3529 } |
| 3530 |
| 3531 .group-container { |
| 3532 background: #fff; |
| 3533 border: 1px solid var(--card-border-color); |
| 3534 border-bottom-width: 2px; |
| 3535 border-radius: 2px; |
| 3536 margin-bottom: var(--card-padding-between); |
| 3537 max-width: var(--card-max-width); |
| 3538 min-width: var(--card-min-width); |
| 3539 width: 100%; |
| 3540 } |
| 3541 |
| 3542 .card-title { |
| 3543 margin-bottom: var(--card-first-last-item-padding); |
| 3544 } |
| 3545 |
| 3546 .domain-heading-text { |
| 3547 flex: 1 1 0; |
| 3548 } |
| 3549 |
| 3550 .dropdown-indicator { |
| 3551 max-width: 16px; |
| 3552 } |
| 3553 |
| 3554 history-item { |
| 3555 padding-left: 20px; |
| 3556 } |
| 3557 </style> |
| 3558 <div id="no-results" class="centered-message" hidden$="[[hasResults_(grouped
HistoryData_.length)]]"> |
| 3559 [[noResultsMessage_(searchedTerm, querying)]] |
| 3560 </div> |
| 3561 <div id="main-container" hidden$="[[!hasResults_(groupedHistoryData_.length)
]]"> |
| 3562 <template is="dom-repeat" items="[[groupedHistoryData_]]" as="group" initi
al-count="1" index-as="groupIndex"> |
| 3563 <div class="group-container"> |
| 3564 <div class="card-title"> |
| 3565 [[group.title]] |
| 3566 </div> |
| 3567 |
| 3568 <template is="dom-repeat" items="[[group.domains]]" as="domain" initia
l-count="10" index-as="domainIndex"> |
| 3569 <div> |
| 3570 <div class="domain-heading" on-tap="toggleDomainExpanded_"> |
| 3571 <div class="domain-heading-text"> |
| 3572 <div class="website-icon" style="[[getWebsiteIconStyle_(domain
)]]"></div> |
| 3573 <span>[[domain.domain]]</span> |
| 3574 <span class="domain-count">[[domain.visits.length]]</span> |
| 3575 </div> |
| 3576 <iron-icon icon="[[getDropdownIcon_(domain.expanded)]]" class="d
ropdown-indicator"></iron-icon> |
| 3577 </div> |
| 3578 <iron-collapse opened="{{domain.expanded}}" id="collapse"> |
| 3579 <template is="dom-if" if="[[domain.rendered]]"> |
| 3580 <template is="dom-repeat" items="[[domain.visits]]" as="item"
initial-count="5" index-as="itemIndex"> |
| 3581 <history-item item="[[item]]" selected="{{item.selected}}" h
as-time-gap="[[needsTimeGap_( |
| 3582 groupIndex, domainIndex, itemIndex)]]" search-term="
[[searchedTerm]]" number-of-items="[[historyData.length]]" embedded=""> |
| 3583 </history-item> |
| 3584 </template> |
| 3585 </template> |
| 3586 </iron-collapse> |
| 3587 </div> |
| 3588 </template> |
| 3589 </div> |
| 3590 </template> |
| 3591 </div> |
| 3592 </template> |
| 3593 </dom-module> |
| 3594 <dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/
"> |
| 3595 <template> |
| 3596 <style> |
| 3597 :host { |
| 3598 display: block; |
| 3599 position: relative; |
| 3600 } |
| 3601 |
| 3602 @media only screen and (-webkit-max-device-pixel-ratio: 1) { |
| 3603 :host { |
| 3604 will-change: transform; |
| 3605 } |
| 3606 } |
| 3607 |
| 3608 #items { |
| 3609 @apply(--iron-list-items-container); |
| 3610 position: relative; |
| 3611 } |
| 3612 |
| 3613 :host(:not([grid])) #items > ::content > * { |
| 3614 width: 100%; |
| 3615 }; |
| 3616 |
| 3617 #items > ::content > * { |
| 3618 box-sizing: border-box; |
| 3619 margin: 0; |
| 3620 position: absolute; |
| 3621 top: 0; |
| 3622 will-change: transform; |
| 3623 } |
| 3624 </style> |
| 3625 |
| 3626 <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}"
selected-item="{{selectedItem}}"> |
| 3627 </array-selector> |
| 3628 |
| 3629 <div id="items"> |
| 3630 <content></content> |
| 3631 </div> |
| 3632 |
| 3633 </template> |
| 3634 </dom-module> |
| 3635 |
| 3636 <dom-module id="iron-scroll-threshold" assetpath="chrome://resources/polymer/v1_
0/iron-scroll-threshold/"> |
| 3637 <template> |
| 3638 <style> |
| 3639 :host { |
| 3640 display: block; |
| 3641 } |
| 3642 </style> |
| 3643 |
| 3644 <content></content> |
| 3645 |
| 3646 </template> |
| 3647 </dom-module> |
| 3648 |
| 3649 <dom-module id="history-list" assetpath="chrome://history/"> |
| 3650 <template> |
| 3651 <style include="shared-style"> |
| 3652 :host { |
| 3653 display: block; |
| 3654 } |
| 3655 |
| 3656 #infinite-list { |
| 3657 height: 100%; |
| 3658 } |
| 3659 |
| 3660 history-item { |
| 3661 --history-item-padding-side: var(--card-padding-side); |
| 3662 } |
| 3663 </style> |
| 3664 <div id="no-results" class="centered-message" hidden$="[[hasResults(historyD
ata_.length)]]"> |
| 3665 {{noResultsMessage_(searchedTerm, querying)}} |
| 3666 </div> |
| 3667 <iron-list items="{{historyData_}}" as="item" id="infinite-list" hidden$="[[
!hasResults(historyData_.length)]]"> |
| 3668 <template> |
| 3669 <history-item item="[[item]]" selected="{{item.selected}}" is-first-item
="[[isFirstItem_(index)]]" is-card-start="[[isCardStart_(item, index, historyDat
a_.length)]]" is-card-end="[[isCardEnd_(item, index, historyData_.length)]]" has
-time-gap="[[needsTimeGap_(item, index, historyData_.length)]]" search-term="[[s
earchedTerm]]" number-of-items="[[historyData_.length]]"> |
| 3670 </history-item> |
| 3671 </template> |
| 3672 </iron-list> |
| 3673 <iron-scroll-threshold id="scroll-threshold" scroll-target="infinite-list" l
ower-threshold="500" on-lower-threshold="loadMoreData_"> |
| 3674 </iron-scroll-threshold> |
| 3675 </template> |
| 3676 </dom-module> |
| 3677 <dom-module id="history-list-container" assetpath="chrome://history/"> |
| 3678 <template> |
| 3679 <style include="shared-style cr-shared-style"> |
| 3680 :host { |
| 3681 display: block; |
| 3682 height: 100%; |
| 3683 overflow: hidden; |
| 3684 } |
| 3685 |
| 3686 #content, |
| 3687 #content > * { |
| 3688 height: 100%; |
| 3689 } |
| 3690 |
| 3691 #dialog .body { |
| 3692 white-space: pre-wrap; |
| 3693 } |
| 3694 </style> |
| 3695 <iron-pages id="content" attr-for-selected="id" selected="[[selectedPage_]]"
> |
| 3696 <history-list id="infinite-list" querying="[[queryState.querying]]" search
ed-term="[[queryResult.info.term]]"></history-list> |
| 3697 <template is="dom-if" if="[[grouped]]"> |
| 3698 <history-grouped-list id="grouped-list" range="[[queryState.range]]" que
ry-start-time="[[queryResult.info.queryStartTime]]" query-end-time="[[queryResul
t.info.queryEndTime]]" searched-term="[[queryResult.info.term]]"> |
| 3699 </history-grouped-list> |
| 3700 </template> |
| 3701 </iron-pages> |
| 3702 |
| 3703 <dialog is="cr-dialog" id="dialog"> |
| 3704 <div class="title">$i18n{removeSelected}</div> |
| 3705 <div class="body">$i18n{deleteWarning}</div> |
| 3706 <div class="button-container"> |
| 3707 <paper-button class="cancel-button" on-tap="onDialogCancelTap_"> |
| 3708 $i18n{cancel} |
| 3709 </paper-button> |
| 3710 <paper-button class="action-button" on-tap="onDialogConfirmTap_" autofoc
us=""> |
| 3711 $i18n{deleteConfirm} |
| 3712 </paper-button> |
| 3713 </div> |
| 3714 </dialog> |
| 3715 |
| 3716 <cr-shared-menu id="sharedMenu"> |
| 3717 <paper-item id="menuMoreButton" class="menu-item" on-tap="onMoreFromSiteTa
p_"> |
| 3718 $i18n{moreFromSite} |
| 3719 </paper-item> |
| 3720 <paper-item id="menuRemoveButton" class="menu-item" on-tap="onRemoveFromHi
storyTap_"> |
| 3721 $i18n{removeFromHistory} |
| 3722 </paper-item> |
| 3723 </cr-shared-menu> |
| 3724 </template> |
| 3725 </dom-module> |
| 3726 <dom-module id="history-synced-device-card" assetpath="chrome://history/"> |
| 3727 <template> |
| 3728 <style include="shared-style"> |
| 3729 :host { |
| 3730 @apply(--card-sizing); |
| 3731 display: block; |
| 3732 padding-bottom: var(--card-padding-between); |
| 3733 } |
| 3734 |
| 3735 #card-heading { |
| 3736 @apply(--layout-justified); |
| 3737 cursor: pointer; |
| 3738 } |
| 3739 |
| 3740 #icon { |
| 3741 -webkit-margin-start: 20px; |
| 3742 } |
| 3743 |
| 3744 #tab-item-list { |
| 3745 padding: 8px 0; |
| 3746 } |
| 3747 |
| 3748 #last-update-time { |
| 3749 color: var(--secondary-text-color); |
| 3750 } |
| 3751 |
| 3752 #right-buttons { |
| 3753 -webkit-margin-end: 4px; |
| 3754 } |
| 3755 |
| 3756 #menu-button { |
| 3757 -webkit-margin-end: 8px; |
| 3758 } |
| 3759 |
| 3760 #collapse { |
| 3761 border-bottom: 1px solid var(--card-border-color); |
| 3762 overflow: hidden; |
| 3763 } |
| 3764 |
| 3765 #history-item-container { |
| 3766 background: #fff; |
| 3767 border: 1px solid var(--card-border-color); |
| 3768 border-radius: 2px; |
| 3769 } |
| 3770 |
| 3771 #item-container { |
| 3772 @apply(--layout-center); |
| 3773 @apply(--layout-horizontal); |
| 3774 min-height: var(--item-height); |
| 3775 } |
| 3776 |
| 3777 #window-separator { |
| 3778 background-color: var(--card-border-color); |
| 3779 height: 1px; |
| 3780 margin: 5px auto; |
| 3781 width: 80%; |
| 3782 } |
| 3783 </style> |
| 3784 <div id="history-item-container"> |
| 3785 <div class="card-title" id="card-heading" aria-expanded$="[[cardOpen_]]" a
ria-controls="collapse" on-tap="toggleTabCard"> |
| 3786 <div> |
| 3787 [[device]] |
| 3788 <span id="last-update-time">[[lastUpdateTime]]</span> |
| 3789 </div> |
| 3790 <div id="right-buttons"> |
| 3791 <button is="paper-icon-button-light" id="menu-button" class="icon-butt
on" on-tap="onMenuButtonTap_"> |
| 3792 <iron-icon icon="cr:more-vert"></iron-icon> |
| 3793 </button> |
| 3794 <button is="paper-icon-button-light" class="icon-button" title$="[[get
CollapseTitle_(cardOpen_)]]"> |
| 3795 <iron-icon icon="cr:expand-less" id="dropdown-indicator"> |
| 3796 </iron-icon> |
| 3797 </button> |
| 3798 </div> |
| 3799 </div> |
| 3800 |
| 3801 <iron-collapse opened="{{cardOpen_}}" id="collapse"> |
| 3802 <div id="tab-item-list"> |
| 3803 <template is="dom-repeat" items="[[tabs]]" as="tab" id="tab-list"> |
| 3804 <div id="item-container"> |
| 3805 <div id="icon" class="website-icon"></div> |
| 3806 <a href="[[tab.url]]" class="website-title" title="[[tab.title]]"
on-click="openTab_"> |
| 3807 <history-searched-label title="[[tab.title]]" search-term="[[sea
rchTerm]]"></history-searched-label> |
| 3808 </a> |
| 3809 </div> |
| 3810 <div id="window-separator" hidden$="[[!isWindowSeparatorIndex_(index
, separatorIndexes)]]"> |
| 3811 </div> |
| 3812 </template> |
| 3813 </div> |
| 3814 </iron-collapse> |
| 3815 </div> |
| 3816 </template> |
| 3817 </dom-module> |
| 3818 <dom-module id="history-synced-device-manager" assetpath="chrome://history/"> |
| 3819 <template> |
| 3820 <style include="shared-style"> |
| 3821 :host { |
| 3822 display: block; |
| 3823 overflow: auto; |
| 3824 } |
| 3825 |
| 3826 #illustration { |
| 3827 background: -webkit-image-set( |
| 3828 url("chrome://history/images/100/sign_in_promo.png") 1x, |
| 3829 url("chrome://history/images/200/sign_in_promo.png") 2x) |
| 3830 no-repeat center center; |
| 3831 height: 222px; |
| 3832 margin-top: 100px; |
| 3833 width: 594px; |
| 3834 } |
| 3835 |
| 3836 #no-synced-tabs { |
| 3837 height: 100%; |
| 3838 } |
| 3839 |
| 3840 #sign-in-guide { |
| 3841 align-items: center; |
| 3842 display: flex; |
| 3843 flex-direction: column; |
| 3844 justify-content: center; |
| 3845 overflow-x: hidden; |
| 3846 text-align: center; |
| 3847 } |
| 3848 |
| 3849 #sign-in-promo { |
| 3850 color: var(--primary-text-color); |
| 3851 font-size: 28px; |
| 3852 margin-top: 40px; |
| 3853 } |
| 3854 |
| 3855 #sign-in-promo-desc { |
| 3856 color: #848484; |
| 3857 font-size: 16px; |
| 3858 margin-top: 10px; |
| 3859 } |
| 3860 |
| 3861 #sign-in-button { |
| 3862 background-color: var(--google-blue-500); |
| 3863 color: white; |
| 3864 font-size: 14px; |
| 3865 margin-top: 24px; |
| 3866 } |
| 3867 |
| 3868 #synced-device-list { |
| 3869 padding-top: var(--first-card-padding-top); |
| 3870 } |
| 3871 </style> |
| 3872 <div id="synced-device-list" hidden="[[!syncedDevices_.length]]"> |
| 3873 <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice"> |
| 3874 <history-synced-device-card device="[[syncedDevice.device]]" last-update
-time="[[syncedDevice.lastUpdateTime]]" tabs="[[syncedDevice.tabs]]" separator-i
ndexes="[[syncedDevice.separatorIndexes]]" search-term="[[searchTerm]]" session-
tag="[[syncedDevice.tag]]"> |
| 3875 </history-synced-device-card> |
| 3876 </template> |
| 3877 </div> |
| 3878 <div id="no-synced-tabs" class="centered-message" hidden="[[!showNoSyncedMes
sage(signInState_, syncedDevices_.length, |
| 3879 guestSession_)]]"> |
| 3880 [[noSyncedTabsMessage(fetchingSyncedTabs_)]] |
| 3881 </div> |
| 3882 <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState_, guestSessio
n_)]]"> |
| 3883 <div id="illustration"></div> |
| 3884 <div id="sign-in-promo">$i18n{signInPromo}</div> |
| 3885 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div> |
| 3886 <paper-button id="sign-in-button" on-tap="onSignInTap_"> |
| 3887 $i18n{signInButton} |
| 3888 </paper-button> |
| 3889 </div> |
| 3890 |
| 3891 <cr-shared-menu id="menu"> |
| 3892 <paper-item class="menu-item" on-tap="onOpenAllTap_"> |
| 3893 $i18n{openAll} |
| 3894 </paper-item> |
| 3895 <paper-item class="menu-item" on-tap="onDeleteSessionTap_"> |
| 3896 $i18n{deleteSession} |
| 3897 </paper-item> |
| 3898 </cr-shared-menu> |
| 3899 </template> |
| 3900 </dom-module> |
| 3901 <dom-module id="history-side-bar" assetpath="chrome://history/"> |
| 3902 <template> |
| 3903 <style include="shared-style"> |
| 3904 :host { |
| 3905 display: block; |
| 3906 height: 100%; |
| 3907 padding-top: 5px; |
| 3908 width: var(--side-bar-width); |
| 3909 } |
| 3910 |
| 3911 div.separator { |
| 3912 background-color: rgba(0, 0, 0, 0.08); |
| 3913 height: 1px; |
| 3914 margin: 8px 0; |
| 3915 } |
| 3916 |
| 3917 #clear-browsing-data { |
| 3918 text-transform: uppercase; |
| 3919 } |
| 3920 |
| 3921 iron-selector { |
| 3922 -webkit-user-select: none; |
| 3923 background-color: transparent; |
| 3924 color: #5a5a5a; |
| 3925 } |
| 3926 |
| 3927 iron-selector > a { |
| 3928 @apply(--paper-font-subhead); |
| 3929 -webkit-padding-start: 24px; |
| 3930 align-items: center; |
| 3931 box-sizing: border-box; |
| 3932 color: inherit; |
| 3933 cursor: pointer; |
| 3934 display: flex; |
| 3935 font-size: 14px; |
| 3936 font-weight: 500; |
| 3937 min-height: 48px; |
| 3938 position: relative; |
| 3939 text-decoration: none; |
| 3940 } |
| 3941 |
| 3942 iron-selector > a.iron-selected { |
| 3943 color: var(--google-blue-500); |
| 3944 font-weight: 500; |
| 3945 } |
| 3946 |
| 3947 #footer { |
| 3948 bottom: 0; |
| 3949 color: var(--paper-grey-600); |
| 3950 position: absolute; |
| 3951 width: var(--side-bar-width); |
| 3952 } |
| 3953 |
| 3954 :host([drawer]) #footer { |
| 3955 /* This compensates the 120px by which app-drawer protrudes under |
| 3956 * the viewport. */ |
| 3957 bottom: 120px; |
| 3958 } |
| 3959 |
| 3960 #footer-text { |
| 3961 -webkit-padding-end: 16px; |
| 3962 -webkit-padding-start: 24px; |
| 3963 line-height: 20px; |
| 3964 margin: 24px 0; |
| 3965 } |
| 3966 |
| 3967 #footer a { |
| 3968 color: var(--google-blue-700); |
| 3969 text-decoration: none; |
| 3970 } |
| 3971 </style> |
| 3972 |
| 3973 <iron-selector id="menu" selected="{{selectedPage}}" selectable=".page-item"
attr-for-selected="path" fallback-selection="history" on-iron-activate="onSelec
torActivate_"> |
| 3974 <a href="/[[getQueryString_(route)]]" class="page-item" path="history"> |
| 3975 $i18n{historyMenuItem} |
| 3976 <paper-ripple></paper-ripple> |
| 3977 </a> |
| 3978 <a href="/syncedTabs[[getQueryString_(route)]]" class="page-item" path="sy
ncedTabs"> |
| 3979 $i18n{openTabsMenuItem} |
| 3980 <paper-ripple></paper-ripple> |
| 3981 </a> |
| 3982 <div class="separator"></div> |
| 3983 <a href="chrome://settings/clearBrowserData" on-tap="onClearBrowsingDataTa
p_" id="clear-browsing-data"> |
| 3984 $i18n{clearBrowsingData} |
| 3985 <paper-ripple></paper-ripple> |
| 3986 </a> |
| 3987 <div id="footer" hidden="[[!showFooter]]"> |
| 3988 <div class="separator"></div> |
| 3989 <div id="footer-text">$i18nRaw{sidebarFooter}</div> |
| 3990 </div> |
| 3991 </iron-selector> |
| 3992 </template> |
| 3993 </dom-module> |
| 3994 <link rel="import" href="chrome://resources/html/polymer.html"> |
| 3995 <style> |
| 3996 /* Copyright 2016 The Chromium Authors. All rights reserved. |
| 3997 * Use of this source code is governed by a BSD-style license that can be |
| 3998 * found in the LICENSE file. */ |
| 3999 |
| 4000 :root { |
| 4001 /* This is a custom, Chrome-specific color that does not have a --paper or |
| 4002 * --google equivalent. */ |
| 4003 --md-background-color: rgb(241, 241, 241); |
| 4004 /* This is --google-blue-700, rewritten as a native custom property for speed. |
| 4005 */ |
| 4006 --md-toolbar-color: rgb(51, 103, 214); |
| 4007 } |
| 4008 |
| 4009 </style> |
| 4010 |
| 4011 <dom-module id="history-app" assetpath="chrome://history/"> |
| 4012 <template> |
| 4013 <style no-process=""> |
| 4014 history-toolbar { |
| 4015 background: var(--md-toolbar-color); |
| 4016 } |
| 4017 </style> |
| 4018 <style include="shared-style"> |
| 4019 :host { |
| 4020 display: block; |
| 4021 height: 100%; |
| 4022 overflow: hidden; |
| 4023 } |
| 4024 |
| 4025 /* Sizing this with flex causes slow load performance, see |
| 4026 crbug.com/618153. */ |
| 4027 #main-container { |
| 4028 height: calc(100% - var(--toolbar-height)); |
| 4029 } |
| 4030 |
| 4031 :host([grouped_]) #main-container { |
| 4032 height: calc(100% - var(--toolbar-grouped-height)); |
| 4033 } |
| 4034 |
| 4035 #content-side-bar { |
| 4036 float: left; |
| 4037 } |
| 4038 |
| 4039 #content, |
| 4040 #content > * { |
| 4041 height: 100%; |
| 4042 } |
| 4043 |
| 4044 #drawer-header { |
| 4045 align-items: center; |
| 4046 border-bottom: 1px solid rgba(0, 0, 0, 0.08); |
| 4047 display: flex; |
| 4048 height: var(--toolbar-height); |
| 4049 margin-bottom: 5px; |
| 4050 } |
| 4051 |
| 4052 h1 { |
| 4053 -webkit-padding-start: 24px; |
| 4054 color: rgb(66, 66, 66); |
| 4055 font-size: 123%; |
| 4056 font-weight: 400; |
| 4057 } |
| 4058 </style> |
| 4059 <app-location route="{{route_}}"></app-location> |
| 4060 <app-route route="{{route_}}" pattern="/:page" data="{{routeData_}}" query-p
arams="{{queryParams_}}"> |
| 4061 </app-route> |
| 4062 <history-toolbar id="toolbar" spinner-active="[[shouldShowSpinner_(queryStat
e_.querying, |
| 4063 queryState_.incremental, |
| 4064 queryState_.searchTerm)]]" is-group
ed-mode="{{grouped_}}" grouped-range="{{queryState_.range}}" search-term="{{quer
yState_.searchTerm}}" query-start-time="[[queryResult_.info.queryStartTime]]" qu
ery-end-time="[[queryResult_.info.queryEndTime]]" has-drawer="[[hasDrawer_]]"> |
| 4065 </history-toolbar> |
| 4066 |
| 4067 <div id="main-container"> |
| 4068 <history-side-bar id="content-side-bar" selected-page="[[selectedPage_]]"
route="[[route_]]" show-footer="[[showSidebarFooter]]" hidden$="[[hasDrawer_]]"> |
| 4069 </history-side-bar> |
| 4070 <iron-pages id="content" attr-for-selected="path" fallback-selection="hist
ory" selected="[[getSelectedPage_(selectedPage_, items)]]" items="{{items}}"> |
| 4071 <history-list-container id="history" query-state="{{queryState_}}" query
-result="[[queryResult_]]" grouped="[[grouped_]]" path="history"> |
| 4072 </history-list-container> |
| 4073 <template is="dom-if" if="[[syncedTabsSelected_(selectedPage_)]]"> |
| 4074 <history-synced-device-manager id="synced-devices" session-list="[[que
ryResult_.sessionList]]" search-term="[[queryState_.searchTerm]]" path="syncedTa
bs"> |
| 4075 </history-synced-device-manager> |
| 4076 </template> |
| 4077 </iron-pages> |
| 4078 </div> |
| 4079 |
| 4080 <template is="dom-if" if="[[hasDrawer_]]"> |
| 4081 <app-drawer id="drawer" swipe-open="" align="start" tabindex="0"> |
| 4082 <div id="drawer-header"> |
| 4083 <h1>$i18n{title}</h1> |
| 4084 </div> |
| 4085 <history-side-bar id="drawer-side-bar" selected-page="[[selectedPage_]]"
route="[[route_]]" show-footer="[[showSidebarFooter]]" drawer=""> |
| 4086 </history-side-bar> |
| 4087 </app-drawer> |
| 4088 </template> |
| 4089 |
| 4090 <iron-media-query query="(max-width: 1023px)" query-matches="{{hasDrawer_}}"
> |
| 4091 </iron-media-query> |
| 4092 </template> |
| 4093 </dom-module> |
| 4094 </div> |
| 4095 <history-app></history-app> |
| 4096 |
| 4097 <div id="app-shim"> |
| 4098 <span id="loading-toolbar">$i18n{title}</span> |
| 4099 <span id="loading-message">$i18n{loading}</span> |
| 4100 </div> |
| 4101 |
| 4102 <if expr="is_macosx"> |
| 4103 <command id="find-command" shortcut="Meta|f"></command> |
| 4104 </if> |
| 4105 <if expr="not is_macosx"> |
| 4106 <command id="find-command" shortcut="Ctrl|f"></command> |
| 4107 </if> |
| 4108 <command id="delete-command" shortcut="Delete Backspace"></command> |
| 4109 <command id="slash-command" shortcut="/"></command> |
| 4110 |
| 4111 <script src="chrome://history/strings.js"></script> |
| 4112 <script src="crisper.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2235593002:
Vulcanize MD History (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master