| <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!-- |
| @license |
| Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --><!-- |
| @license |
| Copyright (c) 2016 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --><!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| <meta charset="utf-8"> |
| <title>$i18n{title}</title> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| <style> |
| /* Copyright 2016 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| :root { |
| /* This is a custom, Chrome-specific color that does not have a --paper or |
| * --google equivalent. */ |
| --md-background-color: rgb(241, 241, 241); |
| /* This is --google-blue-700, rewritten as a native custom property for speed. |
| */ |
| --md-toolbar-color: rgb(51, 103, 214); |
| } |
| |
| </style> |
| <style> |
| html { |
| background: var(--md-background-color); |
| } |
| |
| html, |
| body { |
| height: 100%; |
| } |
| |
| body { |
| display: flex; |
| margin: 0; |
| } |
| </style> |
| </head> |
| <body><div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_time_data.js"></script> |
| <script src="chrome://downloads/strings.js"></script> |
| <dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| position: relative; |
| } |
| |
| @media only screen and (-webkit-max-device-pixel-ratio: 1) { |
| :host { |
| will-change: transform; |
| } |
| } |
| |
| #items { |
| @apply(--iron-list-items-container); |
| position: relative; |
| } |
| |
| :host(:not([grid])) #items > ::content > * { |
| width: 100%; |
| }; |
| |
| #items > ::content > * { |
| box-sizing: border-box; |
| margin: 0; |
| position: absolute; |
| top: 0; |
| will-change: transform; |
| } |
| </style> |
| |
| <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}"> |
| </array-selector> |
| |
| <div id="items"> |
| <content></content> |
| </div> |
| |
| </template> |
| </dom-module> |
| |
| <style> |
| /* IE 10 support for HTML5 hidden attr */ |
| [hidden] { |
| display: none !important; |
| } |
| </style> |
| |
| <style is="custom-style"> |
| :root { |
| |
| --layout: { |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| }; |
| |
| --layout-inline: { |
| display: -ms-inline-flexbox; |
| display: -webkit-inline-flex; |
| display: inline-flex; |
| }; |
| |
| --layout-horizontal: { |
| @apply(--layout); |
| |
| -ms-flex-direction: row; |
| -webkit-flex-direction: row; |
| flex-direction: row; |
| }; |
| |
| --layout-horizontal-reverse: { |
| @apply(--layout); |
| |
| -ms-flex-direction: row-reverse; |
| -webkit-flex-direction: row-reverse; |
| flex-direction: row-reverse; |
| }; |
| |
| --layout-vertical: { |
| @apply(--layout); |
| |
| -ms-flex-direction: column; |
| -webkit-flex-direction: column; |
| flex-direction: column; |
| }; |
| |
| --layout-vertical-reverse: { |
| @apply(--layout); |
| |
| -ms-flex-direction: column-reverse; |
| -webkit-flex-direction: column-reverse; |
| flex-direction: column-reverse; |
| }; |
| |
| --layout-wrap: { |
| -ms-flex-wrap: wrap; |
| -webkit-flex-wrap: wrap; |
| flex-wrap: wrap; |
| }; |
| |
| --layout-wrap-reverse: { |
| -ms-flex-wrap: wrap-reverse; |
| -webkit-flex-wrap: wrap-reverse; |
| flex-wrap: wrap-reverse; |
| }; |
| |
| --layout-flex-auto: { |
| -ms-flex: 1 1 auto; |
| -webkit-flex: 1 1 auto; |
| flex: 1 1 auto; |
| }; |
| |
| --layout-flex-none: { |
| -ms-flex: none; |
| -webkit-flex: none; |
| flex: none; |
| }; |
| |
| --layout-flex: { |
| -ms-flex: 1 1 0.000000001px; |
| -webkit-flex: 1; |
| flex: 1; |
| -webkit-flex-basis: 0.000000001px; |
| flex-basis: 0.000000001px; |
| }; |
| |
| --layout-flex-2: { |
| -ms-flex: 2; |
| -webkit-flex: 2; |
| flex: 2; |
| }; |
| |
| --layout-flex-3: { |
| -ms-flex: 3; |
| -webkit-flex: 3; |
| flex: 3; |
| }; |
| |
| --layout-flex-4: { |
| -ms-flex: 4; |
| -webkit-flex: 4; |
| flex: 4; |
| }; |
| |
| --layout-flex-5: { |
| -ms-flex: 5; |
| -webkit-flex: 5; |
| flex: 5; |
| }; |
| |
| --layout-flex-6: { |
| -ms-flex: 6; |
| -webkit-flex: 6; |
| flex: 6; |
| }; |
| |
| --layout-flex-7: { |
| -ms-flex: 7; |
| -webkit-flex: 7; |
| flex: 7; |
| }; |
| |
| --layout-flex-8: { |
| -ms-flex: 8; |
| -webkit-flex: 8; |
| flex: 8; |
| }; |
| |
| --layout-flex-9: { |
| -ms-flex: 9; |
| -webkit-flex: 9; |
| flex: 9; |
| }; |
| |
| --layout-flex-10: { |
| -ms-flex: 10; |
| -webkit-flex: 10; |
| flex: 10; |
| }; |
| |
| --layout-flex-11: { |
| -ms-flex: 11; |
| -webkit-flex: 11; |
| flex: 11; |
| }; |
| |
| --layout-flex-12: { |
| -ms-flex: 12; |
| -webkit-flex: 12; |
| flex: 12; |
| }; |
| |
| /* alignment in cross axis */ |
| |
| --layout-start: { |
| -ms-flex-align: start; |
| -webkit-align-items: flex-start; |
| align-items: flex-start; |
| }; |
| |
| --layout-center: { |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| align-items: center; |
| }; |
| |
| --layout-end: { |
| -ms-flex-align: end; |
| -webkit-align-items: flex-end; |
| align-items: flex-end; |
| }; |
| |
| --layout-baseline: { |
| -ms-flex-align: baseline; |
| -webkit-align-items: baseline; |
| align-items: baseline; |
| }; |
| |
| /* alignment in main axis */ |
| |
| --layout-start-justified: { |
| -ms-flex-pack: start; |
| -webkit-justify-content: flex-start; |
| justify-content: flex-start; |
| }; |
| |
| --layout-center-justified: { |
| -ms-flex-pack: center; |
| -webkit-justify-content: center; |
| justify-content: center; |
| }; |
| |
| --layout-end-justified: { |
| -ms-flex-pack: end; |
| -webkit-justify-content: flex-end; |
| justify-content: flex-end; |
| }; |
| |
| --layout-around-justified: { |
| -ms-flex-pack: distribute; |
| -webkit-justify-content: space-around; |
| justify-content: space-around; |
| }; |
| |
| --layout-justified: { |
| -ms-flex-pack: justify; |
| -webkit-justify-content: space-between; |
| justify-content: space-between; |
| }; |
| |
| --layout-center-center: { |
| @apply(--layout-center); |
| @apply(--layout-center-justified); |
| }; |
| |
| /* self alignment */ |
| |
| --layout-self-start: { |
| -ms-align-self: flex-start; |
| -webkit-align-self: flex-start; |
| align-self: flex-start; |
| }; |
| |
| --layout-self-center: { |
| -ms-align-self: center; |
| -webkit-align-self: center; |
| align-self: center; |
| }; |
| |
| --layout-self-end: { |
| -ms-align-self: flex-end; |
| -webkit-align-self: flex-end; |
| align-self: flex-end; |
| }; |
| |
| --layout-self-stretch: { |
| -ms-align-self: stretch; |
| -webkit-align-self: stretch; |
| align-self: stretch; |
| }; |
| |
| --layout-self-baseline: { |
| -ms-align-self: baseline; |
| -webkit-align-self: baseline; |
| align-self: baseline; |
| }; |
| |
| /* multi-line alignment in main axis */ |
| |
| --layout-start-aligned: { |
| -ms-flex-line-pack: start; /* IE10 */ |
| -ms-align-content: flex-start; |
| -webkit-align-content: flex-start; |
| align-content: flex-start; |
| }; |
| |
| --layout-end-aligned: { |
| -ms-flex-line-pack: end; /* IE10 */ |
| -ms-align-content: flex-end; |
| -webkit-align-content: flex-end; |
| align-content: flex-end; |
| }; |
| |
| --layout-center-aligned: { |
| -ms-flex-line-pack: center; /* IE10 */ |
| -ms-align-content: center; |
| -webkit-align-content: center; |
| align-content: center; |
| }; |
| |
| --layout-between-aligned: { |
| -ms-flex-line-pack: justify; /* IE10 */ |
| -ms-align-content: space-between; |
| -webkit-align-content: space-between; |
| align-content: space-between; |
| }; |
| |
| --layout-around-aligned: { |
| -ms-flex-line-pack: distribute; /* IE10 */ |
| -ms-align-content: space-around; |
| -webkit-align-content: space-around; |
| align-content: space-around; |
| }; |
| |
| /******************************* |
| Other Layout |
| *******************************/ |
| |
| --layout-block: { |
| display: block; |
| }; |
| |
| --layout-invisible: { |
| visibility: hidden !important; |
| }; |
| |
| --layout-relative: { |
| position: relative; |
| }; |
| |
| --layout-fit: { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| }; |
| |
| --layout-scroll: { |
| -webkit-overflow-scrolling: touch; |
| overflow: auto; |
| }; |
| |
| --layout-fullbleed: { |
| margin: 0; |
| height: 100vh; |
| }; |
| |
| /* fixed position */ |
| |
| --layout-fixed-top: { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| }; |
| |
| --layout-fixed-right: { |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| }; |
| |
| --layout-fixed-bottom: { |
| position: fixed; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| }; |
| |
| --layout-fixed-left: { |
| position: fixed; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| }; |
| |
| } |
| |
| </style> |
| |
| |
| <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/"> |
| |
| <style> |
| :host { |
| @apply(--layout-inline); |
| @apply(--layout-center-center); |
| position: relative; |
| |
| vertical-align: middle; |
| |
| fill: var(--iron-icon-fill-color, currentcolor); |
| stroke: var(--iron-icon-stroke-color, none); |
| |
| width: var(--iron-icon-width, 24px); |
| height: var(--iron-icon-height, 24px); |
| } |
| </style> |
| |
| <template> |
| </template> |
| |
| </dom-module> |
| <dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-ripple/"> |
| |
| <template> |
| <style> |
| :host { |
| display: block; |
| position: absolute; |
| border-radius: inherit; |
| overflow: hidden; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| |
| /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers, |
| * creating a node (with a position:absolute) in the middle of an event |
| * handler "interrupts" that event handler (which happens when the |
| * ripple is created on demand) */ |
| pointer-events: none; |
| } |
| |
| :host([animating]) { |
| /* This resolves a rendering issue in Chrome (as of 40) where the |
| ripple is not properly clipped by its parent (which may have |
| rounded corners). See: http://jsbin.com/temexa/4 |
| |
| Note: We only apply this style conditionally. Otherwise, the browser |
| will create a new compositing layer for every ripple element on the |
| page, and that would be bad. */ |
| -webkit-transform: translate(0, 0); |
| transform: translate3d(0, 0, 0); |
| } |
| |
| #background, |
| #waves, |
| .wave-container, |
| .wave { |
| pointer-events: none; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| #background, |
| .wave { |
| opacity: 0; |
| } |
| |
| #waves, |
| .wave { |
| overflow: hidden; |
| } |
| |
| .wave-container, |
| .wave { |
| border-radius: 50%; |
| } |
| |
| :host(.circle) #background, |
| :host(.circle) #waves { |
| border-radius: 50%; |
| } |
| |
| :host(.circle) .wave-container { |
| overflow: hidden; |
| } |
| </style> |
| |
| <div id="background"></div> |
| <div id="waves"></div> |
| </template> |
| </dom-module> |
| <style is="custom-style"> |
| |
| :root { |
| |
| --shadow-transition: { |
| transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); |
| }; |
| |
| --shadow-none: { |
| box-shadow: none; |
| }; |
| |
| /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */ |
| |
| --shadow-elevation-2dp: { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2); |
| }; |
| |
| --shadow-elevation-3dp: { |
| box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), |
| 0 1px 8px 0 rgba(0, 0, 0, 0.12), |
| 0 3px 3px -2px rgba(0, 0, 0, 0.4); |
| }; |
| |
| --shadow-elevation-4dp: { |
| box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), |
| 0 1px 10px 0 rgba(0, 0, 0, 0.12), |
| 0 2px 4px -1px rgba(0, 0, 0, 0.4); |
| }; |
| |
| --shadow-elevation-6dp: { |
| box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), |
| 0 1px 18px 0 rgba(0, 0, 0, 0.12), |
| 0 3px 5px -1px rgba(0, 0, 0, 0.4); |
| }; |
| |
| --shadow-elevation-8dp: { |
| box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), |
| 0 3px 14px 2px rgba(0, 0, 0, 0.12), |
| 0 5px 5px -3px rgba(0, 0, 0, 0.4); |
| }; |
| |
| --shadow-elevation-12dp: { |
| box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), |
| 0 4px 22px 3px rgba(0, 0, 0, 0.12), |
| 0 6px 7px -4px rgba(0, 0, 0, 0.4); |
| }; |
| |
| --shadow-elevation-16dp: { |
| box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), |
| 0 6px 30px 5px rgba(0, 0, 0, 0.12), |
| 0 8px 10px -5px rgba(0, 0, 0, 0.4); |
| }; |
| |
| } |
| |
| </style> |
| <dom-module id="paper-material-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-material/"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| position: relative; |
| } |
| |
| :host([elevation="1"]) { |
| @apply(--shadow-elevation-2dp); |
| } |
| |
| :host([elevation="2"]) { |
| @apply(--shadow-elevation-4dp); |
| } |
| |
| :host([elevation="3"]) { |
| @apply(--shadow-elevation-6dp); |
| } |
| |
| :host([elevation="4"]) { |
| @apply(--shadow-elevation-8dp); |
| } |
| |
| :host([elevation="5"]) { |
| @apply(--shadow-elevation-16dp); |
| } |
| </style> |
| </template> |
| </dom-module> |
| |
| |
| <dom-module id="paper-material" assetpath="chrome://resources/polymer/v1_0/paper-material/"> |
| <template> |
| <style include="paper-material-shared-styles"></style> |
| <style> |
| :host([animated]) { |
| @apply(--shadow-transition); |
| } |
| </style> |
| |
| <content></content> |
| </template> |
| </dom-module> |
| <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-button/"> |
| <template strip-whitespace=""> |
| <style include="paper-material"> |
| :host { |
| @apply(--layout-inline); |
| @apply(--layout-center-center); |
| position: relative; |
| box-sizing: border-box; |
| min-width: 5.14em; |
| margin: 0 0.29em; |
| background: transparent; |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| -webkit-tap-highlight-color: transparent; |
| font: inherit; |
| text-transform: uppercase; |
| outline-width: 0; |
| border-radius: 3px; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| -webkit-user-select: none; |
| user-select: none; |
| cursor: pointer; |
| z-index: 0; |
| padding: 0.7em 0.57em; |
| |
| @apply(--paper-font-common-base); |
| @apply(--paper-button); |
| } |
| |
| :host([raised].keyboard-focus) { |
| font-weight: bold; |
| @apply(--paper-button-raised-keyboard-focus); |
| } |
| |
| :host(:not([raised]).keyboard-focus) { |
| font-weight: bold; |
| @apply(--paper-button-flat-keyboard-focus); |
| } |
| |
| :host([disabled]) { |
| background: #eaeaea; |
| color: #a8a8a8; |
| cursor: auto; |
| pointer-events: none; |
| |
| @apply(--paper-button-disabled); |
| } |
| |
| paper-ripple { |
| color: var(--paper-button-ink-color); |
| } |
| </style> |
| |
| <content></content> |
| </template> |
| |
| </dom-module> |
| <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/"> |
| <template strip-whitespace=""> |
| <style> |
| :host { |
| vertical-align: middle; |
| color: inherit; |
| outline: none; |
| width: 24px; |
| height: 24px; |
| background: none; |
| margin: 0; |
| border: none; |
| padding: 0; |
| |
| position: relative; |
| cursor: pointer; |
| |
| /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */ |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| -webkit-tap-highlight-color: transparent; |
| } |
| |
| :host([disabled]) { |
| color: #9b9b9b; |
| pointer-events: none; |
| cursor: auto; |
| } |
| |
| paper-ripple { |
| opacity: 0.6; |
| color: currentColor; |
| } |
| </style> |
| <content></content> |
| </template> |
| </dom-module> |
| <style is="custom-style"> |
| |
| :root { |
| |
| /* Material Design color palette for Google products */ |
| |
| --google-red-100: #f4c7c3; |
| --google-red-300: #e67c73; |
| --google-red-500: #db4437; |
| --google-red-700: #c53929; |
| |
| --google-blue-100: #c6dafc; |
| --google-blue-300: #7baaf7; |
| --google-blue-500: #4285f4; |
| --google-blue-700: #3367d6; |
| |
| --google-green-100: #b7e1cd; |
| --google-green-300: #57bb8a; |
| --google-green-500: #0f9d58; |
| --google-green-700: #0b8043; |
| |
| --google-yellow-100: #fce8b2; |
| --google-yellow-300: #f7cb4d; |
| --google-yellow-500: #f4b400; |
| --google-yellow-700: #f09300; |
| |
| --google-grey-100: #f5f5f5; |
| --google-grey-300: #e0e0e0; |
| --google-grey-500: #9e9e9e; |
| --google-grey-700: #616161; |
| |
| /* Material Design color palette from online spec document */ |
| |
| --paper-red-50: #ffebee; |
| --paper-red-100: #ffcdd2; |
| --paper-red-200: #ef9a9a; |
| --paper-red-300: #e57373; |
| --paper-red-400: #ef5350; |
| --paper-red-500: #f44336; |
| --paper-red-600: #e53935; |
| --paper-red-700: #d32f2f; |
| --paper-red-800: #c62828; |
| --paper-red-900: #b71c1c; |
| --paper-red-a100: #ff8a80; |
| --paper-red-a200: #ff5252; |
| --paper-red-a400: #ff1744; |
| --paper-red-a700: #d50000; |
| |
| --paper-pink-50: #fce4ec; |
| --paper-pink-100: #f8bbd0; |
| --paper-pink-200: #f48fb1; |
| --paper-pink-300: #f06292; |
| --paper-pink-400: #ec407a; |
| --paper-pink-500: #e91e63; |
| --paper-pink-600: #d81b60; |
| --paper-pink-700: #c2185b; |
| --paper-pink-800: #ad1457; |
| --paper-pink-900: #880e4f; |
| --paper-pink-a100: #ff80ab; |
| --paper-pink-a200: #ff4081; |
| --paper-pink-a400: #f50057; |
| --paper-pink-a700: #c51162; |
| |
| --paper-purple-50: #f3e5f5; |
| --paper-purple-100: #e1bee7; |
| --paper-purple-200: #ce93d8; |
| --paper-purple-300: #ba68c8; |
| --paper-purple-400: #ab47bc; |
| --paper-purple-500: #9c27b0; |
| --paper-purple-600: #8e24aa; |
| --paper-purple-700: #7b1fa2; |
| --paper-purple-800: #6a1b9a; |
| --paper-purple-900: #4a148c; |
| --paper-purple-a100: #ea80fc; |
| --paper-purple-a200: #e040fb; |
| --paper-purple-a400: #d500f9; |
| --paper-purple-a700: #aa00ff; |
| |
| --paper-deep-purple-50: #ede7f6; |
| --paper-deep-purple-100: #d1c4e9; |
| --paper-deep-purple-200: #b39ddb; |
| --paper-deep-purple-300: #9575cd; |
| --paper-deep-purple-400: #7e57c2; |
| --paper-deep-purple-500: #673ab7; |
| --paper-deep-purple-600: #5e35b1; |
| --paper-deep-purple-700: #512da8; |
| --paper-deep-purple-800: #4527a0; |
| --paper-deep-purple-900: #311b92; |
| --paper-deep-purple-a100: #b388ff; |
| --paper-deep-purple-a200: #7c4dff; |
| --paper-deep-purple-a400: #651fff; |
| --paper-deep-purple-a700: #6200ea; |
| |
| --paper-indigo-50: #e8eaf6; |
| --paper-indigo-100: #c5cae9; |
| --paper-indigo-200: #9fa8da; |
| --paper-indigo-300: #7986cb; |
| --paper-indigo-400: #5c6bc0; |
| --paper-indigo-500: #3f51b5; |
| --paper-indigo-600: #3949ab; |
| --paper-indigo-700: #303f9f; |
| --paper-indigo-800: #283593; |
| --paper-indigo-900: #1a237e; |
| --paper-indigo-a100: #8c9eff; |
| --paper-indigo-a200: #536dfe; |
| --paper-indigo-a400: #3d5afe; |
| --paper-indigo-a700: #304ffe; |
| |
| --paper-blue-50: #e3f2fd; |
| --paper-blue-100: #bbdefb; |
| --paper-blue-200: #90caf9; |
| --paper-blue-300: #64b5f6; |
| --paper-blue-400: #42a5f5; |
| --paper-blue-500: #2196f3; |
| --paper-blue-600: #1e88e5; |
| --paper-blue-700: #1976d2; |
| --paper-blue-800: #1565c0; |
| --paper-blue-900: #0d47a1; |
| --paper-blue-a100: #82b1ff; |
| --paper-blue-a200: #448aff; |
| --paper-blue-a400: #2979ff; |
| --paper-blue-a700: #2962ff; |
| |
| --paper-light-blue-50: #e1f5fe; |
| --paper-light-blue-100: #b3e5fc; |
| --paper-light-blue-200: #81d4fa; |
| --paper-light-blue-300: #4fc3f7; |
| --paper-light-blue-400: #29b6f6; |
| --paper-light-blue-500: #03a9f4; |
| --paper-light-blue-600: #039be5; |
| --paper-light-blue-700: #0288d1; |
| --paper-light-blue-800: #0277bd; |
| --paper-light-blue-900: #01579b; |
| --paper-light-blue-a100: #80d8ff; |
| --paper-light-blue-a200: #40c4ff; |
| --paper-light-blue-a400: #00b0ff; |
| --paper-light-blue-a700: #0091ea; |
| |
| --paper-cyan-50: #e0f7fa; |
| --paper-cyan-100: #b2ebf2; |
| --paper-cyan-200: #80deea; |
| --paper-cyan-300: #4dd0e1; |
| --paper-cyan-400: #26c6da; |
| --paper-cyan-500: #00bcd4; |
| --paper-cyan-600: #00acc1; |
| --paper-cyan-700: #0097a7; |
| --paper-cyan-800: #00838f; |
| --paper-cyan-900: #006064; |
| --paper-cyan-a100: #84ffff; |
| --paper-cyan-a200: #18ffff; |
| --paper-cyan-a400: #00e5ff; |
| --paper-cyan-a700: #00b8d4; |
| |
| --paper-teal-50: #e0f2f1; |
| --paper-teal-100: #b2dfdb; |
| --paper-teal-200: #80cbc4; |
| --paper-teal-300: #4db6ac; |
| --paper-teal-400: #26a69a; |
| --paper-teal-500: #009688; |
| --paper-teal-600: #00897b; |
| --paper-teal-700: #00796b; |
| --paper-teal-800: #00695c; |
| --paper-teal-900: #004d40; |
| --paper-teal-a100: #a7ffeb; |
| --paper-teal-a200: #64ffda; |
| --paper-teal-a400: #1de9b6; |
| --paper-teal-a700: #00bfa5; |
| |
| --paper-green-50: #e8f5e9; |
| --paper-green-100: #c8e6c9; |
| --paper-green-200: #a5d6a7; |
| --paper-green-300: #81c784; |
| --paper-green-400: #66bb6a; |
| --paper-green-500: #4caf50; |
| --paper-green-600: #43a047; |
| --paper-green-700: #388e3c; |
| --paper-green-800: #2e7d32; |
| --paper-green-900: #1b5e20; |
| --paper-green-a100: #b9f6ca; |
| --paper-green-a200: #69f0ae; |
| --paper-green-a400: #00e676; |
| --paper-green-a700: #00c853; |
| |
| --paper-light-green-50: #f1f8e9; |
| --paper-light-green-100: #dcedc8; |
| --paper-light-green-200: #c5e1a5; |
| --paper-light-green-300: #aed581; |
| --paper-light-green-400: #9ccc65; |
| --paper-light-green-500: #8bc34a; |
| --paper-light-green-600: #7cb342; |
| --paper-light-green-700: #689f38; |
| --paper-light-green-800: #558b2f; |
| --paper-light-green-900: #33691e; |
| --paper-light-green-a100: #ccff90; |
| --paper-light-green-a200: #b2ff59; |
| --paper-light-green-a400: #76ff03; |
| --paper-light-green-a700: #64dd17; |
| |
| --paper-lime-50: #f9fbe7; |
| --paper-lime-100: #f0f4c3; |
| --paper-lime-200: #e6ee9c; |
| --paper-lime-300: #dce775; |
| --paper-lime-400: #d4e157; |
| --paper-lime-500: #cddc39; |
| --paper-lime-600: #c0ca33; |
| --paper-lime-700: #afb42b; |
| --paper-lime-800: #9e9d24; |
| --paper-lime-900: #827717; |
| --paper-lime-a100: #f4ff81; |
| --paper-lime-a200: #eeff41; |
| --paper-lime-a400: #c6ff00; |
| --paper-lime-a700: #aeea00; |
| |
| --paper-yellow-50: #fffde7; |
| --paper-yellow-100: #fff9c4; |
| --paper-yellow-200: #fff59d; |
| --paper-yellow-300: #fff176; |
| --paper-yellow-400: #ffee58; |
| --paper-yellow-500: #ffeb3b; |
| --paper-yellow-600: #fdd835; |
| --paper-yellow-700: #fbc02d; |
| --paper-yellow-800: #f9a825; |
| --paper-yellow-900: #f57f17; |
| --paper-yellow-a100: #ffff8d; |
| --paper-yellow-a200: #ffff00; |
| --paper-yellow-a400: #ffea00; |
| --paper-yellow-a700: #ffd600; |
| |
| --paper-amber-50: #fff8e1; |
| --paper-amber-100: #ffecb3; |
| --paper-amber-200: #ffe082; |
| --paper-amber-300: #ffd54f; |
| --paper-amber-400: #ffca28; |
| --paper-amber-500: #ffc107; |
| --paper-amber-600: #ffb300; |
| --paper-amber-700: #ffa000; |
| --paper-amber-800: #ff8f00; |
| --paper-amber-900: #ff6f00; |
| --paper-amber-a100: #ffe57f; |
| --paper-amber-a200: #ffd740; |
| --paper-amber-a400: #ffc400; |
| --paper-amber-a700: #ffab00; |
| |
| --paper-orange-50: #fff3e0; |
| --paper-orange-100: #ffe0b2; |
| --paper-orange-200: #ffcc80; |
| --paper-orange-300: #ffb74d; |
| --paper-orange-400: #ffa726; |
| --paper-orange-500: #ff9800; |
| --paper-orange-600: #fb8c00; |
| --paper-orange-700: #f57c00; |
| --paper-orange-800: #ef6c00; |
| --paper-orange-900: #e65100; |
| --paper-orange-a100: #ffd180; |
| --paper-orange-a200: #ffab40; |
| --paper-orange-a400: #ff9100; |
| --paper-orange-a700: #ff6500; |
| |
| --paper-deep-orange-50: #fbe9e7; |
| --paper-deep-orange-100: #ffccbc; |
| --paper-deep-orange-200: #ffab91; |
| --paper-deep-orange-300: #ff8a65; |
| --paper-deep-orange-400: #ff7043; |
| --paper-deep-orange-500: #ff5722; |
| --paper-deep-orange-600: #f4511e; |
| --paper-deep-orange-700: #e64a19; |
| --paper-deep-orange-800: #d84315; |
| --paper-deep-orange-900: #bf360c; |
| --paper-deep-orange-a100: #ff9e80; |
| --paper-deep-orange-a200: #ff6e40; |
| --paper-deep-orange-a400: #ff3d00; |
| --paper-deep-orange-a700: #dd2c00; |
| |
| --paper-brown-50: #efebe9; |
| --paper-brown-100: #d7ccc8; |
| --paper-brown-200: #bcaaa4; |
| --paper-brown-300: #a1887f; |
| --paper-brown-400: #8d6e63; |
| --paper-brown-500: #795548; |
| --paper-brown-600: #6d4c41; |
| --paper-brown-700: #5d4037; |
| --paper-brown-800: #4e342e; |
| --paper-brown-900: #3e2723; |
| |
| --paper-grey-50: #fafafa; |
| --paper-grey-100: #f5f5f5; |
| --paper-grey-200: #eeeeee; |
| --paper-grey-300: #e0e0e0; |
| --paper-grey-400: #bdbdbd; |
| --paper-grey-500: #9e9e9e; |
| --paper-grey-600: #757575; |
| --paper-grey-700: #616161; |
| --paper-grey-800: #424242; |
| --paper-grey-900: #212121; |
| |
| --paper-blue-grey-50: #eceff1; |
| --paper-blue-grey-100: #cfd8dc; |
| --paper-blue-grey-200: #b0bec5; |
| --paper-blue-grey-300: #90a4ae; |
| --paper-blue-grey-400: #78909c; |
| --paper-blue-grey-500: #607d8b; |
| --paper-blue-grey-600: #546e7a; |
| --paper-blue-grey-700: #455a64; |
| --paper-blue-grey-800: #37474f; |
| --paper-blue-grey-900: #263238; |
| |
| /* opacity for dark text on a light background */ |
| --dark-divider-opacity: 0.12; |
| --dark-disabled-opacity: 0.38; /* or hint text or icon */ |
| --dark-secondary-opacity: 0.54; |
| --dark-primary-opacity: 0.87; |
| |
| /* opacity for light text on a dark background */ |
| --light-divider-opacity: 0.12; |
| --light-disabled-opacity: 0.3; /* or hint text or icon */ |
| --light-secondary-opacity: 0.7; |
| --light-primary-opacity: 1.0; |
| |
| } |
| |
| </style> |
| |
| |
| <dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper-progress/"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| width: 200px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| #progressContainer { |
| position: relative; |
| } |
| |
| #progressContainer, |
| /* the stripe for the indeterminate animation*/ |
| .indeterminate::after { |
| height: var(--paper-progress-height, 4px); |
| } |
| |
| #primaryProgress, |
| #secondaryProgress, |
| .indeterminate::after { |
| @apply(--layout-fit); |
| } |
| |
| #progressContainer, |
| .indeterminate::after { |
| background: var(--paper-progress-container-color, --google-grey-300); |
| } |
| |
| :host(.transiting) #primaryProgress, |
| :host(.transiting) #secondaryProgress { |
| -webkit-transition-property: -webkit-transform; |
| transition-property: transform; |
| |
| /* Duration */ |
| -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s); |
| transition-duration: var(--paper-progress-transition-duration, 0.08s); |
| |
| /* Timing function */ |
| -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
| transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
| |
| /* Delay */ |
| -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); |
| transition-delay: var(--paper-progress-transition-delay, 0s); |
| } |
| |
| #primaryProgress, |
| #secondaryProgress { |
| @apply(--layout-fit); |
| -webkit-transform-origin: left center; |
| transform-origin: left center; |
| -webkit-transform: scaleX(0); |
| transform: scaleX(0); |
| will-change: transform; |
| } |
| |
| #primaryProgress { |
| background: var(--paper-progress-active-color, --google-green-500); |
| } |
| |
| #secondaryProgress { |
| background: var(--paper-progress-secondary-color, --google-green-100); |
| } |
| |
| :host([disabled]) #primaryProgress { |
| background: var(--paper-progress-disabled-active-color, --google-grey-500); |
| } |
| |
| :host([disabled]) #secondaryProgress { |
| background: var(--paper-progress-disabled-secondary-color, --google-grey-300); |
| } |
| |
| :host(:not([disabled])) #primaryProgress.indeterminate { |
| -webkit-transform-origin: right center; |
| transform-origin: right center; |
| -webkit-animation: indeterminate-bar 2s linear infinite; |
| animation: indeterminate-bar 2s linear infinite; |
| } |
| |
| :host(:not([disabled])) #primaryProgress.indeterminate::after { |
| content: ""; |
| -webkit-transform-origin: center center; |
| transform-origin: center center; |
| |
| -webkit-animation: indeterminate-splitter 2s linear infinite; |
| animation: indeterminate-splitter 2s linear infinite; |
| } |
| |
| @-webkit-keyframes indeterminate-bar { |
| 0% { |
| -webkit-transform: scaleX(1) translateX(-100%); |
| } |
| 50% { |
| -webkit-transform: scaleX(1) translateX(0%); |
| } |
| 75% { |
| -webkit-transform: scaleX(1) translateX(0%); |
| -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91); |
| } |
| 100% { |
| -webkit-transform: scaleX(0) translateX(0%); |
| } |
| } |
| |
| @-webkit-keyframes indeterminate-splitter { |
| 0% { |
| -webkit-transform: scaleX(.75) translateX(-125%); |
| } |
| 30% { |
| -webkit-transform: scaleX(.75) translateX(-125%); |
| -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8); |
| } |
| 90% { |
| -webkit-transform: scaleX(.75) translateX(125%); |
| } |
| 100% { |
| -webkit-transform: scaleX(.75) translateX(125%); |
| } |
| } |
| |
| @keyframes indeterminate-bar { |
| 0% { |
| transform: scaleX(1) translateX(-100%); |
| } |
| 50% { |
| transform: scaleX(1) translateX(0%); |
| } |
| 75% { |
| transform: scaleX(1) translateX(0%); |
| animation-timing-function: cubic-bezier(.28,.62,.37,.91); |
| } |
| 100% { |
| transform: scaleX(0) translateX(0%); |
| } |
| } |
| |
| @keyframes indeterminate-splitter { |
| 0% { |
| transform: scaleX(.75) translateX(-125%); |
| } |
| 30% { |
| transform: scaleX(.75) translateX(-125%); |
| animation-timing-function: cubic-bezier(.42,0,.6,.8); |
| } |
| 90% { |
| transform: scaleX(.75) translateX(125%); |
| } |
| 100% { |
| transform: scaleX(.75) translateX(125%); |
| } |
| } |
| </style> |
| |
| <div id="progressContainer"> |
| <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div> |
| <div id="primaryProgress"></div> |
| </div> |
| </template> |
| </dom-module> |
| |
| <iron-iconset-svg name="downloads" size="24"> |
| <svg> |
| <defs> |
| |
| <g id="remove-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"></path></g> |
| </defs> |
| </svg> |
| </iron-iconset-svg> |
| <dom-module id="downloads-item" assetpath="chrome://downloads/"> |
| <template><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| :host { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| #date { |
| color: rgb(104, 113, 116); |
| font-size: 100%; |
| font-weight: 500; |
| margin: 24px auto 10px; |
| width: var(--downloads-item-width); |
| } |
| |
| #date:empty { |
| display: none; |
| } |
| |
| #content { |
| background: white; |
| border-radius: 2px; |
| display: flex; |
| flex: none; |
| margin: 6px auto; |
| min-height: 103px; |
| position: relative; |
| width: var(--downloads-item-width); |
| } |
| |
| #content.is-active { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08), |
| 0 3px 1px -2px rgba(0, 0, 0, .2); |
| } |
| |
| #content:not(.is-active) { |
| background: rgba(255, 255, 255, .6); |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .03), 0 1px 4px 0 rgba(0, 0, 0, .048), |
| 0 3px 1px -2px rgba(0, 0, 0, .12); |
| } |
| |
| #details { |
| -webkit-border-start: 1px #d8d8d8 solid; |
| -webkit-padding-end: 16px; |
| -webkit-padding-start: 24px; |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| min-width: 0; /* This allows #url to ellide correctly. */ |
| padding-bottom: 12px; |
| padding-top: 16px; |
| } |
| |
| #content:not(.is-active) #details { |
| color: rgba(186, 186, 186, .6); |
| } |
| |
| #content:not(.is-active) #name { |
| text-decoration: line-through; |
| } |
| |
| .icon-wrapper { |
| align-self: center; |
| flex: none; |
| justify-content: center; |
| margin: 0 24px; |
| } |
| |
| .icon { |
| height: 32px; |
| width: 32px; |
| } |
| |
| #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper { |
| /* TODO(dbeam): animate from top-aligned to centered when items finish? */ |
| align-self: flex-start; |
| padding-top: 16px; |
| } |
| |
| #content:not(.is-active) .icon { |
| -webkit-filter: grayscale(100%); |
| opacity: .5; |
| } |
| |
| #danger-icon { |
| height: 32px; |
| width: 32px; |
| } |
| |
| #danger-icon[icon='cr:warning'] { |
| color: rgb(255, 193, 7); |
| } |
| |
| #danger-icon[icon='downloads:remove-circle'] { |
| color: rgb(244, 67, 54); |
| } |
| |
| #name, |
| #file-link, |
| #url { |
| max-width: 100%; |
| } |
| |
| #name, |
| #file-link { |
| font-weight: 500; |
| word-break: break-all; |
| } |
| |
| #name { |
| -webkit-margin-end: 12px; /* Only really affects #tag. */ |
| } |
| |
| #resume, |
| .is-active :-webkit-any(#name, #file-link, #pause, #show) { |
| color: rgb(51, 103, 214); |
| } |
| |
| #tag { |
| color: #5a5a5a; |
| font-weight: 500; |
| } |
| |
| #url { |
| color: inherit; |
| margin-top: 6px; |
| min-height: 0; |
| overflow: hidden; |
| text-decoration: none; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .is-active #url { |
| color: #969696; |
| } |
| |
| #progress, |
| #description:not(:empty), |
| .controls { |
| margin-top: 16px; |
| } |
| |
| .is-active #description { |
| color: #616161; |
| } |
| |
| .dangerous #description { |
| color: rgb(239, 108, 0); |
| } |
| |
| #progress { |
| --paper-progress-active-color: rgb(54, 126, 237); |
| --paper-progress-container-color: rgb(223, 222, 223); |
| width: auto; |
| } |
| |
| .controls { |
| -webkit-margin-start: -.57em; |
| } |
| |
| #cancel, |
| #retry, |
| .keep, |
| .discard { |
| color: #5a5a5a; |
| } |
| |
| #show { |
| margin: .7em .57em; |
| } |
| |
| #controlled-by { |
| -webkit-margin-start: 8px; |
| } |
| |
| #controlled-by, |
| #controlled-by a { |
| color: #5a5a5a; |
| } |
| |
| .is-active #controlled-by { |
| color: #333; |
| } |
| |
| .is-active #controlled-by a { |
| color: rgb(51, 103, 214); |
| } |
| |
| #remove-wrapper { |
| align-self: flex-start; |
| margin: 0; |
| } |
| |
| #remove { |
| color: #969696; |
| font-size: 16px; |
| height: 32px; |
| line-height: 17px; /* TODO(dbeam): why is this necesssary? */ |
| width: 32px; |
| } |
| |
| #incognito { |
| bottom: 20px; |
| content: -webkit-image-set( |
| url("chrome://downloads/1x/incognito_marker.png") 1x, |
| url("chrome://downloads/2x/incognito_marker.png") 2x); |
| position: absolute; |
| right: 10px; |
| } |
| |
| </style><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| * { |
| --downloads-item-width: 622px; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| paper-button { |
| font-weight: 500; |
| margin: 0; |
| min-width: auto; |
| } |
| |
| </style><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| [is='action-link'] { |
| cursor: pointer; |
| display: inline-block; |
| text-decoration: none; |
| } |
| |
| [is='action-link']:hover { |
| text-decoration: underline; |
| } |
| |
| [is='action-link']:active { |
| color: rgb(5, 37, 119); |
| text-decoration: underline; |
| } |
| |
| [is='action-link'][disabled] { |
| color: #999; |
| cursor: default; |
| pointer-events: none; |
| text-decoration: none; |
| } |
| |
| [is='action-link'].no-outline { |
| outline: none; |
| } |
| |
| </style> |
| <h3 id="date">[[computeDate_(data.hideDate, data.since_string, data.date_string)]]</h3> |
| |
| <div id="content" on-dragstart="onDragStart_" class$="[[computeClass_(isActive_, isDangerous_, showProgress_)]]"> |
| <div id="file-icon-wrapper" class="icon-wrapper"> |
| <img class="icon" id="file-icon" alt="" hidden="[[isDangerous_]]"> |
| <iron-icon id="danger-icon" icon$="[[computeDangerIcon_(isDangerous_, data.danger_type)]]" hidden="[[!isDangerous_]]"></iron-icon> |
| </div> |
| |
| <div id="details"> |
| <div id="title-area"><a is="action-link" id="file-link" href="[[data.url]]" on-tap="onFileLinkTap_" hidden="[[!completelyOnDisk_]]">[[data.file_name]]</a><span id="name" hidden="[[completelyOnDisk_]]">[[data.file_name]]</span> |
| <span id="tag">[[computeTag_(data.state, data.last_reason_text, data.file_externally_removed)]]</span> |
| </div> |
| |
| <a id="url" target="_blank">[[data.url]]</a> |
| |
| <div id="description">[[computeDescription_(data.state, data.danger_type, data.file_name, data.progress_status_text)]]</div> |
| |
| <template is="dom-if" if="[[showProgress_]]"> |
| <paper-progress id="progress" indeterminate="[[isIndeterminate_(data.percent)]]" value="[[data.percent]]"></paper-progress> |
| </template> |
| |
| <div id="safe" class="controls" hidden="[[isDangerous_]]"> |
| <a is="action-link" id="show" on-tap="onShowTap_" hidden="[[!completelyOnDisk_]]">$i18n{controlShowInFolder}</a> |
| <template is="dom-if" if="[[data.retry]]"> |
| <paper-button id="retry" on-tap="onRetryTap_"> |
| $i18n{controlRetry} |
| </paper-button> |
| </template> |
| <template is="dom-if" if="[[isInProgress_]]"> |
| <paper-button id="pause" on-tap="onPauseTap_"> |
| $i18n{controlPause} |
| </paper-button> |
| </template> |
| <template is="dom-if" if="[[data.resume]]"> |
| <paper-button id="resume" on-tap="onResumeTap_"> |
| $i18n{controlResume} |
| </paper-button> |
| </template> |
| <template is="dom-if" if="[[showCancel_]]"> |
| <paper-button id="cancel" on-tap="onCancelTap_"> |
| $i18n{controlCancel} |
| </paper-button> |
| </template> |
| <span id="controlled-by"></span> |
| </div> |
| |
| <template is="dom-if" if="[[isDangerous_]]"> |
| <div id="dangerous" class="controls"> |
| |
| <template is="dom-if" if="[[!isMalware_]]"> |
| <paper-button id="discard" on-tap="onDiscardDangerousTap_" class="discard">$i18n{dangerDiscard}</paper-button> |
| <paper-button id="save" on-tap="onSaveDangerousTap_" class="keep">$i18n{dangerSave}</paper-button> |
| </template> |
| |
| |
| <template is="dom-if" if="[[isMalware_]]"> |
| <paper-button id="danger-remove" on-tap="onDiscardDangerousTap_" class="discard">$i18n{controlRemoveFromList}</paper-button> |
| <paper-button id="restore" on-tap="onSaveDangerousTap_" class="keep">$i18n{dangerRestore}</paper-button> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div id="remove-wrapper" class="icon-wrapper"> |
| <button is="paper-icon-button-light" id="remove" title="$i18n{controlRemoveFromList}" style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]" on-tap="onRemoveTap_">✕</button> |
| </div> |
| |
| <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]"> |
| </div> |
| </div> |
| |
| </template> |
| |
| |
| |
| </dom-module> |
| |
| |
| <style is="custom-style"> |
| |
| :root { |
| /* |
| * You can use these generic variables in your elements for easy theming. |
| * For example, if all your elements use `--primary-text-color` as its main |
| * color, then switching from a light to a dark theme is just a matter of |
| * changing the value of `--primary-text-color` in your application. |
| */ |
| --primary-text-color: var(--light-theme-text-color); |
| --primary-background-color: var(--light-theme-background-color); |
| --secondary-text-color: var(--light-theme-secondary-color); |
| --disabled-text-color: var(--light-theme-disabled-color); |
| --divider-color: var(--light-theme-divider-color); |
| --error-color: var(--paper-deep-orange-a700); |
| |
| /* |
| * Primary and accent colors. Also see color.html for more colors. |
| */ |
| --primary-color: var(--paper-indigo-500); |
| --light-primary-color: var(--paper-indigo-100); |
| --dark-primary-color: var(--paper-indigo-700); |
| |
| --accent-color: var(--paper-pink-a200); |
| --light-accent-color: var(--paper-pink-a100); |
| --dark-accent-color: var(--paper-pink-a400); |
| |
| |
| /* |
| * Material Design Light background theme |
| */ |
| --light-theme-background-color: #ffffff; |
| --light-theme-base-color: #000000; |
| --light-theme-text-color: var(--paper-grey-900); |
| --light-theme-secondary-color: #737373; /* for secondary text and icons */ |
| --light-theme-disabled-color: #9b9b9b; /* disabled/hint text */ |
| --light-theme-divider-color: #dbdbdb; |
| |
| /* |
| * Material Design Dark background theme |
| */ |
| --dark-theme-background-color: var(--paper-grey-900); |
| --dark-theme-base-color: #ffffff; |
| --dark-theme-text-color: #ffffff; |
| --dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */ |
| --dark-theme-disabled-color: #646464; /* disabled/hint text */ |
| --dark-theme-divider-color: #3c3c3c; |
| |
| /* |
| * Deprecated values because of their confusing names. |
| */ |
| --text-primary-color: var(--dark-theme-text-color); |
| --default-primary-color: var(--primary-color); |
| |
| } |
| |
| </style> |
| <style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| @font-face { |
| font-family: 'Roboto'; |
| font-style: normal; |
| font-weight: 400; |
| src: local('Roboto'), local('Roboto-Regular'), |
| url("chrome://resources/roboto/roboto-regular.woff2") format('woff2'); |
| } |
| |
| @font-face { |
| font-family: 'Roboto'; |
| font-style: normal; |
| font-weight: 500; |
| src: local('Roboto Medium'), local('Roboto-Medium'), |
| url("chrome://resources/roboto/roboto-medium.woff2") format('woff2'); |
| } |
| |
| @font-face { |
| font-family: 'Roboto'; |
| font-style: normal; |
| font-weight: 700; |
| src: local('Roboto Bold'), local('Roboto-Bold'), |
| url("chrome://resources/roboto/roboto-bold.woff2") format('woff2'); |
| } |
| |
| </style> |
| <style is="custom-style"> |
| |
| :root { |
| |
| /* Shared Styles */ |
| --paper-font-common-base: { |
| font-family: 'Roboto', 'Noto', sans-serif; |
| -webkit-font-smoothing: antialiased; |
| }; |
| |
| --paper-font-common-code: { |
| font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; |
| -webkit-font-smoothing: antialiased; |
| }; |
| |
| --paper-font-common-expensive-kerning: { |
| text-rendering: optimizeLegibility; |
| }; |
| |
| --paper-font-common-nowrap: { |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| }; |
| |
| /* Material Font Styles */ |
| |
| --paper-font-display4: { |
| @apply(--paper-font-common-base); |
| @apply(--paper-font-common-nowrap); |
| |
| font-size: 112px; |
| font-weight: 300; |
| letter-spacing: -.044em; |
| line-height: 120px; |
| }; |
| |
| --paper-font-display3: { |
| @apply(--paper-font-common-base); |
| @apply(--paper-font-common-nowrap); |
| |
| font-size: 56px; |
| font-weight: 400; |
| letter-spacing: -.026em; |
| line-height: 60px; |
| }; |
| |
| --paper-font-display2: { |
| @apply(--paper-font-common-base); |
| |
| font-size: 45px; |
| font-weight: 400; |
| letter-spacing: -.018em; |
| line-height: 48px; |
| }; |
| |
| --paper-font-display1: { |
| @apply(--paper-font-common-base); |
| |
| font-size: 34px; |
| font-weight: 400; |
| letter-spacing: -.01em; |
| line-height: 40px; |
| }; |
| |
| --paper-font-headline: { |
| @apply(--paper-font-common-base); |
| |
| font-size: 24px; |
| font-weight: 400; |
| letter-spacing: -.012em; |
| line-height: 32px; |
| }; |
| |
| --paper-font-title: { |
| @apply(--paper-font-common-base); |
| @apply(--paper-font-common-nowrap); |
| |
| font-size: 20px; |
| font-weight: 500; |
| line-height: 28px; |
| }; |
| |
| --paper-font-subhead: { |
| @apply(--paper-font-common-base); |
| |
| font-size: 16px; |
| font-weight: 400; |
| line-height: 24px; |
| }; |
| |
| --paper-font-body2: { |
| @apply(--paper-font-common-base); |
| |
| font-size: 14px; |
| font-weight: 500; |
| line-height: 24px; |
| }; |
| |
| --paper-font-body1: { |
| @apply(--paper-font-common-base); |
| |
| font-size: 14px; |
| font-weight: 400; |
| line-height: 20px; |
| }; |
| |
| --paper-font-caption: { |
| @apply(--paper-font-common-base); |
| @apply(--paper-font-common-nowrap); |
| |
| font-size: 12px; |
| font-weight: 400; |
| letter-spacing: 0.011em; |
| line-height: 20px; |
| }; |
| |
| --paper-font-menu: { |
| @apply(--paper-font-common-base); |
| @apply(--paper-font-common-nowrap); |
| |
| font-size: 13px; |
| font-weight: 500; |
| line-height: 24px; |
| }; |
| |
| --paper-font-button: { |
| @apply(--paper-font-common-base); |
| @apply(--paper-font-common-nowrap); |
| |
| font-size: 14px; |
| font-weight: 500; |
| letter-spacing: 0.018em; |
| line-height: 24px; |
| text-transform: uppercase; |
| }; |
| |
| --paper-font-code2: { |
| @apply(--paper-font-common-code); |
| |
| font-size: 14px; |
| font-weight: 700; |
| line-height: 20px; |
| }; |
| |
| --paper-font-code1: { |
| @apply(--paper-font-common-code); |
| |
| font-size: 14px; |
| font-weight: 500; |
| line-height: 20px; |
| }; |
| |
| } |
| |
| </style> |
| <dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-item/"> |
| <template> |
| <style> |
| :host, .paper-item { |
| display: block; |
| position: relative; |
| min-height: var(--paper-item-min-height, 48px); |
| padding: 0px 16px; |
| } |
| |
| .paper-item { |
| @apply(--paper-font-subhead); |
| border:none; |
| outline: none; |
| background: white; |
| width: 100%; |
| text-align: left; |
| } |
| |
| :host([hidden]), .paper-item[hidden] { |
| display: none !important; |
| } |
| |
| :host(.iron-selected), .paper-item.iron-selected { |
| font-weight: var(--paper-item-selected-weight, bold); |
| |
| @apply(--paper-item-selected); |
| } |
| |
| :host([disabled]), .paper-item[disabled] { |
| color: var(--paper-item-disabled-color, --disabled-text-color); |
| |
| @apply(--paper-item-disabled); |
| } |
| |
| :host(:focus), .paper-item:focus { |
| position: relative; |
| outline: 0; |
| |
| @apply(--paper-item-focused); |
| } |
| |
| :host(:focus):before, .paper-item:focus:before { |
| @apply(--layout-fit); |
| |
| background: currentColor; |
| content: ''; |
| opacity: var(--dark-divider-opacity); |
| pointer-events: none; |
| |
| @apply(--paper-item-focused-before); |
| } |
| </style> |
| </template> |
| </dom-module> |
| |
| |
| <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/"> |
| <template> |
| <style include="paper-item-shared-styles"></style> |
| <style> |
| :host { |
| @apply(--layout-horizontal); |
| @apply(--layout-center); |
| @apply(--paper-font-subhead); |
| |
| @apply(--paper-item); |
| } |
| </style> |
| |
| <content></content> |
| </template> |
| |
| </dom-module> |
| <dom-module id="paper-menu-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-menu/"> |
| <template> |
| <style> |
| /* need a wrapper element to make this higher specificity than the :host rule in paper-item */ |
| .selectable-content > ::content > .iron-selected { |
| font-weight: bold; |
| |
| @apply(--paper-menu-selected-item); |
| } |
| |
| .selectable-content > ::content > [disabled] { |
| color: var(--paper-menu-disabled-color, --disabled-text-color); |
| } |
| |
| .selectable-content > ::content > *:focus { |
| position: relative; |
| outline: 0; |
| |
| @apply(--paper-menu-focused-item); |
| } |
| |
| .selectable-content > ::content > *:focus:after { |
| @apply(--layout-fit); |
| background: currentColor; |
| opacity: var(--dark-divider-opacity); |
| content: ''; |
| pointer-events: none; |
| |
| @apply(--paper-menu-focused-item-after); |
| } |
| |
| .selectable-content > ::content > *[colored]:focus:after { |
| opacity: 0.26; |
| } |
| </style> |
| </template> |
| </dom-module> |
| |
| |
| <dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-menu/"> |
| <template> |
| <style include="paper-menu-shared-styles"></style> |
| <style> |
| :host { |
| display: block; |
| padding: 8px 0; |
| |
| background: var(--paper-menu-background-color, --primary-background-color); |
| color: var(--paper-menu-color, --primary-text-color); |
| |
| @apply(--paper-menu); |
| } |
| </style> |
| |
| <div class="selectable-content"> |
| <content></content> |
| </div> |
| </template> |
| |
| </dom-module> |
| <dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_0/iron-overlay-behavior/"> |
| |
| <template> |
| <style> |
| :host { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: var(--iron-overlay-backdrop-background-color, #000); |
| opacity: 0; |
| transition: opacity 0.2s; |
| pointer-events: none; |
| @apply(--iron-overlay-backdrop); |
| } |
| |
| :host(.opened) { |
| opacity: var(--iron-overlay-backdrop-opacity, 0.6); |
| pointer-events: auto; |
| @apply(--iron-overlay-backdrop-opened); |
| } |
| </style> |
| |
| <content></content> |
| </template> |
| |
| </dom-module> |
| |
| <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script> |
| |
| |
| <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-dropdown/"> |
| <style> |
| :host { |
| position: fixed; |
| } |
| |
| #contentWrapper ::content > * { |
| overflow: auto; |
| } |
| |
| #contentWrapper.animating ::content > * { |
| overflow: hidden; |
| } |
| </style> |
| <template> |
| <div id="contentWrapper"> |
| <content id="content" select=".dropdown-content"></content> |
| </div> |
| </template> |
| |
| </dom-module> |
| <dom-module id="paper-menu-button" assetpath="chrome://resources/polymer/v1_0/paper-menu-button/"> |
| <template> |
| <style> |
| :host { |
| display: inline-block; |
| position: relative; |
| padding: 8px; |
| outline: none; |
| |
| @apply(--paper-menu-button); |
| } |
| |
| :host([disabled]) { |
| cursor: auto; |
| color: var(--disabled-text-color); |
| |
| @apply(--paper-menu-button-disabled); |
| } |
| |
| iron-dropdown { |
| @apply(--paper-menu-button-dropdown); |
| } |
| |
| .dropdown-content { |
| @apply(--shadow-elevation-2dp); |
| |
| position: relative; |
| border-radius: 2px; |
| background-color: var(--paper-menu-button-dropdown-background, --primary-background-color); |
| |
| @apply(--paper-menu-button-content); |
| } |
| |
| :host([vertical-align="top"]) .dropdown-content { |
| margin-bottom: 20px; |
| margin-top: -10px; |
| top: 10px; |
| } |
| |
| :host([vertical-align="bottom"]) .dropdown-content { |
| bottom: 10px; |
| margin-bottom: -10px; |
| margin-top: 20px; |
| } |
| </style> |
| |
| <div id="trigger" on-tap="toggle"> |
| <content select=".dropdown-trigger"></content> |
| </div> |
| |
| <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizontalAlign]]" vertical-align="[[verticalAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" open-animation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]" focus-target="[[_dropdownContent]]" restore-focus-on-close="" on-iron-overlay-canceled="__onIronOverlayCanceled"> |
| <div class="dropdown-content"> |
| <content id="content" select=".dropdown-content"></content> |
| </div> |
| </iron-dropdown> |
| </template> |
| |
| </dom-module> |
| <dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/"> |
| <template strip-whitespace=""> |
| <style> |
| :host { |
| display: inline-block; |
| position: relative; |
| padding: 8px; |
| outline: none; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| cursor: pointer; |
| z-index: 0; |
| line-height: 1; |
| |
| width: 40px; |
| height: 40px; |
| |
| /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */ |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| -webkit-tap-highlight-color: transparent; |
| |
| /* Because of polymer/2558, this style has lower specificity than * */ |
| box-sizing: border-box !important; |
| |
| @apply(--paper-icon-button); |
| } |
| |
| :host #ink { |
| color: var(--paper-icon-button-ink-color, --primary-text-color); |
| opacity: 0.6; |
| } |
| |
| :host([disabled]) { |
| color: var(--paper-icon-button-disabled-text, --disabled-text-color); |
| pointer-events: none; |
| cursor: auto; |
| |
| @apply(--paper-icon-button-disabled); |
| } |
| |
| :host(:hover) { |
| @apply(--paper-icon-button-hover); |
| } |
| |
| iron-icon { |
| --iron-icon-width: 100%; |
| --iron-icon-height: 100%; |
| } |
| </style> |
| |
| <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon> |
| </template> |
| |
| </dom-module> |
| <iron-iconset-svg name="cr" size="24"> |
| <svg> |
| <defs> |
| |
| <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g> |
| <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> |
| <if expr="chromeos"> |
| <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></g> |
| </if> |
| <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g> |
| <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> |
| <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> |
| <g id="domain"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></g> |
| <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path></g> |
| <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></g> |
| <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> |
| <g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></g> |
| <g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g> |
| <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-.29 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> |
| <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> |
| <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> |
| <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> |
| <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> |
| <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.23.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> |
| <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> |
| <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g> |
| <if expr="chromeos"> |
| <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> |
| </if> |
| </defs> |
| </svg> |
| </iron-iconset-svg> |
| |
| |
| <dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/iron-a11y-announcer/"> |
| <style> |
| :host { |
| display: inline-block; |
| position: fixed; |
| clip: rect(0px,0px,0px,0px); |
| } |
| </style> |
| |
| <template> |
| <div aria-live$="[[mode]]">[[_text]]</div> |
| </template> |
| |
| </dom-module> |
| <dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_0/paper-input/"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| padding: 8px 0; |
| |
| @apply(--paper-input-container); |
| } |
| |
| :host[inline] { |
| display: inline-block; |
| } |
| |
| :host([disabled]) { |
| pointer-events: none; |
| opacity: 0.33; |
| |
| @apply(--paper-input-container-disabled); |
| } |
| |
| :host([hidden]) { |
| display: none !important; |
| } |
| |
| .floated-label-placeholder { |
| @apply(--paper-font-caption); |
| } |
| |
| .underline { |
| position: relative; |
| } |
| |
| .focused-line { |
| @apply(--layout-fit); |
| |
| background: var(--paper-input-container-focus-color, --primary-color); |
| height: 2px; |
| |
| -webkit-transform-origin: center center; |
| transform-origin: center center; |
| -webkit-transform: scale3d(0,1,1); |
| transform: scale3d(0,1,1); |
| |
| @apply(--paper-input-container-underline-focus); |
| } |
| |
| .underline.is-highlighted .focused-line { |
| -webkit-transform: none; |
| transform: none; |
| -webkit-transition: -webkit-transform 0.25s; |
| transition: transform 0.25s; |
| |
| @apply(--paper-transition-easing); |
| } |
| |
| .underline.is-invalid .focused-line { |
| background: var(--paper-input-container-invalid-color, --error-color); |
| -webkit-transform: none; |
| transform: none; |
| -webkit-transition: -webkit-transform 0.25s; |
| transition: transform 0.25s; |
| |
| @apply(--paper-transition-easing); |
| } |
| |
| .unfocused-line { |
| @apply(--layout-fit); |
| |
| background: var(--paper-input-container-color, --secondary-text-color); |
| height: 1px; |
| |
| @apply(--paper-input-container-underline); |
| } |
| |
| :host([disabled]) .unfocused-line { |
| border-bottom: 1px dashed; |
| border-color: var(--paper-input-container-color, --secondary-text-color); |
| background: transparent; |
| |
| @apply(--paper-input-container-underline-disabled); |
| } |
| |
| .label-and-input-container { |
| @apply(--layout-flex-auto); |
| @apply(--layout-relative); |
| |
| width: 100%; |
| max-width: 100%; |
| } |
| |
| .input-content { |
| @apply(--layout-horizontal); |
| @apply(--layout-center); |
| |
| position: relative; |
| } |
| |
| .input-content ::content label, |
| .input-content ::content .paper-input-label { |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: 0; |
| width: 100%; |
| font: inherit; |
| color: var(--paper-input-container-color, --secondary-text-color); |
| -webkit-transition: -webkit-transform 0.25s, width 0.25s; |
| transition: transform 0.25s, width 0.25s; |
| -webkit-transform-origin: left top; |
| transform-origin: left top; |
| |
| @apply(--paper-font-common-nowrap); |
| @apply(--paper-font-subhead); |
| @apply(--paper-input-container-label); |
| @apply(--paper-transition-easing); |
| } |
| |
| .input-content.label-is-floating ::content label, |
| .input-content.label-is-floating ::content .paper-input-label { |
| -webkit-transform: translateY(-75%) scale(0.75); |
| transform: translateY(-75%) scale(0.75); |
| |
| /* Since we scale to 75/100 of the size, we actually have 100/75 of the |
| original space now available */ |
| width: 133%; |
| |
| @apply(--paper-input-container-label-floating); |
| } |
| |
| :host-context([dir="rtl"]) .input-content.label-is-floating ::content label, |
| :host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label { |
| /* TODO(noms): Figure out why leaving the width at 133% before the animation |
| * actually makes |
| * it wider on the right side, not left side, as you would expect in RTL */ |
| width: 100%; |
| -webkit-transform-origin: right top; |
| transform-origin: right top; |
| } |
| |
| .input-content.label-is-highlighted ::content label, |
| .input-content.label-is-highlighted ::content .paper-input-label { |
| color: var(--paper-input-container-focus-color, --primary-color); |
| |
| @apply(--paper-input-container-label-focus); |
| } |
| |
| .input-content.is-invalid ::content label, |
| .input-content.is-invalid ::content .paper-input-label { |
| color: var(--paper-input-container-invalid-color, --error-color); |
| } |
| |
| .input-content.label-is-hidden ::content label, |
| .input-content.label-is-hidden ::content .paper-input-label { |
| visibility: hidden; |
| } |
| |
| .input-content ::content input, |
| .input-content ::content textarea, |
| .input-content ::content iron-autogrow-textarea, |
| .input-content ::content .paper-input-input { |
| position: relative; /* to make a stacking context */ |
| outline: none; |
| box-shadow: none; |
| padding: 0; |
| width: 100%; |
| max-width: 100%; |
| background: transparent; |
| border: none; |
| color: var(--paper-input-container-input-color, --primary-text-color); |
| -webkit-appearance: none; |
| text-align: inherit; |
| |
| @apply(--paper-font-subhead); |
| @apply(--paper-input-container-input); |
| } |
| |
| ::content [prefix] { |
| @apply(--paper-font-subhead); |
| |
| @apply(--paper-input-prefix); |
| @apply(--layout-flex-none); |
| } |
| |
| ::content [suffix] { |
| @apply(--paper-font-subhead); |
| |
| @apply(--paper-input-suffix); |
| @apply(--layout-flex-none); |
| } |
| |
| /* Firefox sets a min-width on the input, which can cause layout issues */ |
| .input-content ::content input { |
| min-width: 0; |
| } |
| |
| .input-content ::content textarea { |
| resize: none; |
| } |
| |
| .add-on-content { |
| position: relative; |
| } |
| |
| .add-on-content.is-invalid ::content * { |
| color: var(--paper-input-container-invalid-color, --error-color); |
| } |
| |
| .add-on-content.is-highlighted ::content * { |
| color: var(--paper-input-container-focus-color, --primary-color); |
| } |
| </style> |
| |
| <template is="dom-if" if="[[!noLabelFloat]]"> |
| <div class="floated-label-placeholder" aria-hidden="true"> </div> |
| </template> |
| |
| <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]"> |
| <content select="[prefix]" id="prefix"></content> |
| |
| <div class="label-and-input-container" id="labelAndInputContainer"> |
| <content select=":not([add-on]):not([prefix]):not([suffix])"></content> |
| </div> |
| |
| <content select="[suffix]"></content> |
| </div> |
| |
| <div class$="[[_computeUnderlineClass(focused,invalid)]]"> |
| <div class="unfocused-line"></div> |
| <div class="focused-line"></div> |
| </div> |
| |
| <div class$="[[_computeAddOnContentClass(focused,invalid)]]"> |
| <content id="addOnContent" select="[add-on]"></content> |
| </div> |
| </template> |
| </dom-module> |
| |
| <dom-module id="cr-search-field" assetpath="chrome://resources/cr_elements/cr_search_field/"> |
| <template><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| :host { |
| -webkit-padding-end: 10px; |
| box-sizing: border-box; |
| display: flex; |
| justify-content: flex-end; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| paper-input-container { |
| margin-top: 2px; |
| max-width: 200px; |
| padding: 2px 0; |
| width: 100%; |
| } |
| |
| #searchTerm { |
| --paper-input-container-color: rgb(192, 199, 205); |
| --paper-input-container-focus-color: rgb(192, 199, 205); |
| --paper-input-container-input: { |
| color: inherit; |
| font-family: inherit; |
| font-size: inherit; |
| }; |
| --paper-input-container-input-color: rgb(192, 199, 205); |
| color: rgb(192, 199, 205); |
| z-index: 0; |
| } |
| |
| #searchTerm input[type='search']::-webkit-search-decoration, |
| #searchTerm input[type='search']::-webkit-search-cancel-button, |
| #searchTerm input[type='search']::-webkit-search-results-button { |
| -webkit-appearance: none; |
| } |
| |
| #searchTerm input[type='search']::-webkit-search-cancel-button { |
| display: block; |
| width: 20px; |
| } |
| |
| paper-icon-button { |
| --iron-icon-height: 20px; |
| --iron-icon-width: 20px; |
| --paper-icon-button: { |
| height: 32px; |
| padding: 6px; |
| width: 32px; |
| }; |
| } |
| |
| #searchTerm paper-icon-button { |
| --iron-icon-height: 16px; |
| --iron-icon-width: 16px; |
| --paper-icon-button: { |
| -webkit-margin-end: -8px; |
| height: 32px; |
| padding: 8px; |
| width: 32px; |
| }; |
| position: absolute; |
| right: 0; |
| top: -4px; |
| z-index: 1; |
| } |
| |
| :host-context([dir='rtl']) #searchTerm paper-icon-button { |
| left: 0; |
| right: auto; |
| } |
| |
| </style> |
| <paper-icon-button icon="cr:search" id="searchButton" disabled$="[[showingSearch]]" title="[[label]]" on-click="toggleShowingSearch_"></paper-icon-button> |
| <paper-input-container id="searchTerm" on-search="onSearchTermSearch" on-keydown="onSearchTermKeydown" hidden$="[[!showingSearch]]" no-label-float=""> |
| <input is="iron-input" id="searchInput" type="search" placeholder="[[label]]" incremental=""> |
| <paper-icon-button icon="cr:cancel" id="clearSearch" on-click="toggleShowingSearch_" title="[[clearLabel]]" hidden$="[[!showingSearch]]"></paper-icon-button> |
| </paper-input-container> |
| </template> |
| |
| </dom-module> |
| <dom-module id="downloads-toolbar" assetpath="chrome://downloads/"> |
| <template><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| :host { |
| align-items: center; |
| background: var(--md-toolbar-color); |
| color: white; |
| content-sizing: padding-box; |
| display: flex; |
| min-height: 56px; |
| } |
| |
| #title h1 { |
| -webkit-margin-end: 0; |
| -webkit-margin-start: 24px; |
| font-size: 123.1%; |
| font-weight: normal; |
| margin-bottom: 0; |
| margin-top: 0; |
| } |
| |
| #actions { |
| color: rgba(255, 255, 255, 0.9); |
| display: flex; |
| flex: none; |
| width: var(--downloads-item-width); |
| } |
| |
| :host-context([loading]) #actions { |
| visibility: hidden; |
| } |
| |
| :host(:not([downloads-showing])) #actions { |
| justify-content: center; |
| } |
| |
| #actions paper-button { |
| --paper-button-flat-keyboard-focus: { |
| color: rgba(255, 255, 255, 1); |
| }; |
| } |
| |
| #actions paper-button:first-of-type { |
| -webkit-margin-start: -0.57em; /* Matches paper-button padding. */ |
| } |
| |
| #actions paper-button:not(:last-of-type) { |
| -webkit-margin-end: 8px; /* Margin between items. */ |
| } |
| |
| #actions paper-button:last-of-type { |
| -webkit-margin-end: -0.57em; /* Matches paper-button padding. */ |
| } |
| |
| #search { |
| -webkit-padding-end: 10px; |
| box-sizing: border-box; |
| display: flex; |
| justify-content: flex-end; |
| } |
| |
| #title, |
| #search { |
| /* (1024 total width - 622 item width) / 2 = 201 room to play. */ |
| flex: 1 0 201px; |
| } |
| |
| paper-icon-button { |
| --iron-icon-height: 20px; |
| --iron-icon-width: 20px; |
| --paper-icon-button: { |
| height: 32px; |
| padding: 6px; |
| width: 32px; |
| }; |
| } |
| |
| #more { |
| --paper-menu-button: { |
| padding: 0; |
| }; |
| -webkit-margin-start: 16px; |
| } |
| |
| paper-item { |
| -webkit-user-select: none; |
| cursor: pointer; |
| font: inherit; |
| min-height: 40px; |
| } |
| |
| paper-item:hover { |
| background: #eaeaea; /* TODO(dbeam): real color? */ |
| } |
| |
| @media not all and (max-width: 1024px) { |
| /* Hide vertical dot menu when there's enough room for #actions. */ |
| paper-menu-button { |
| display: none; |
| } |
| } |
| |
| @media all and (max-width: 1024px) { |
| /* Hide #actions for narrow windows; they're shown in a vertical dot menu. */ |
| #actions { |
| display: none; |
| } |
| } |
| |
| </style><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| * { |
| --downloads-item-width: 622px; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| paper-button { |
| font-weight: 500; |
| margin: 0; |
| min-width: auto; |
| } |
| |
| </style> |
| <div id="title"> |
| <h1>$i18n{title}</h1> |
| </div> |
| <div id="actions"> |
| <paper-button class="clear-all" on-tap="onClearAllTap_"> |
| $i18n{clearAll} |
| </paper-button> |
| <paper-button on-tap="onOpenDownloadsFolderTap_"> |
| $i18n{openDownloadsFolder} |
| </paper-button> |
| </div> |
| <div id="search"> |
| <cr-search-field id="search-input" label="$i18n{search}" clear-label="$i18n{clearSearch}" on-search-changed="onSearchChanged_"></cr-search-field> |
| <paper-menu-button id="more" horizontal-align="[[overflowAlign_]]"> |
| <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" class="dropdown-trigger"></paper-icon-button> |
| <paper-menu class="dropdown-content"> |
| <paper-item class="clear-all" on-tap="onClearAllTap_"> |
| $i18n{clearAll} |
| </paper-item> |
| <paper-item on-tap="onOpenDownloadsFolderTap_"> |
| $i18n{openDownloadsFolder} |
| </paper-item> |
| </paper-menu> |
| </paper-menu-button> |
| </div> |
| </template> |
| |
| |
| </dom-module> |
| <style> |
| /* Copyright 2016 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| :root { |
| /* This is a custom, Chrome-specific color that does not have a --paper or |
| * --google equivalent. */ |
| --md-background-color: rgb(241, 241, 241); |
| /* This is --google-blue-700, rewritten as a native custom property for speed. |
| */ |
| --md-toolbar-color: rgb(51, 103, 214); |
| } |
| |
| </style> |
| |
| <dom-module id="downloads-manager" assetpath="chrome://downloads/"> |
| <template><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| :host { |
| display: flex; |
| flex: 1 0; |
| flex-direction: column; |
| height: 100%; |
| overflow-y: overlay; |
| } |
| |
| @media screen and (max-width: 1024px) { |
| :host { |
| flex-basis: 670px; /* 622 card width + 24 left margin + 24 right margin. */ |
| } |
| } |
| |
| #no-downloads, |
| #downloads-list { |
| flex: 1; |
| } |
| |
| :host([loading]) #no-downloads, |
| :host([loading]) #downloads-list { |
| display: none; |
| } |
| |
| #no-downloads { |
| align-items: center; |
| color: #b4b4b4; |
| display: flex; |
| font-size: 123.1%; |
| font-weight: 500; |
| justify-content: center; |
| /* To avoid overlapping with the header, we need this min-height |
| * until bug 596743 is fixed. */ |
| min-height: min-content; |
| } |
| |
| #no-downloads .illustration { |
| background: -webkit-image-set( |
| url("chrome://downloads/1x/no_downloads.png") 1x, |
| url("chrome://downloads/2x/no_downloads.png") 2x) no-repeat center center; |
| height: 144px; /* Matches natural image height. */ |
| margin-bottom: 32px; |
| } |
| |
| </style><style> |
| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| * { |
| --downloads-item-width: 622px; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| paper-button { |
| font-weight: 500; |
| margin: 0; |
| min-width: auto; |
| } |
| |
| </style> |
| <style no-process=""> |
| #toolbar { |
| background: var(--md-toolbar-color); |
| } |
| </style> |
| <downloads-toolbar id="toolbar"></downloads-toolbar> |
| <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]]"> |
| <template> |
| <downloads-item data="[[item]]" hide-date="[[item.hideDate]]"> |
| </downloads-item> |
| </template> |
| </iron-list> |
| <div id="no-downloads" hidden="[[hasDownloads_]]"> |
| <div> |
| <div class="illustration"></div> |
| <span></span> |
| </div> |
| </div> |
| </template> |
| |
| |
| </dom-module> |
| </div> |
| <downloads-manager></downloads-manager> |
| <command id="clear-all-command" shortcut="Alt-U+0043"></command> |
| <if expr="is_macosx"> |
| <command id="undo-command" shortcut="Meta-U+005A"></command> |
| <command id="find-command" shortcut="Meta-U+0046"></command> |
| </if> |
| <if expr="not is_macosx"> |
| <command id="undo-command" shortcut="Ctrl-U+005A"></command> |
| <command id="find-command" shortcut="Ctrl-U+0046"></command> |
| </if> |
| <link rel="import" href="chrome://resources/html/polymer.html"> |
| <script src="crisper.js"></script></body></html> |
