| <!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: #f1f1f1; |
| --md-loading-message-color: #6e6e6e; |
| /* 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; |
| } |
| |
| :root { |
| --downloads-card-margin: 24px; |
| --downloads-card-width: 640px; |
| } |
| </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/" css-build="shadow"> |
| <template> |
| <style scope="iron-list">:host { |
| display: block; |
| position: relative; |
| } |
| |
| @media only screen and (-webkit-max-device-pixel-ratio: 1) { |
| :host { |
| will-change: transform; |
| } |
| |
| } |
| |
| #items { |
| ; |
| 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" css-build="shadow">html { |
| --layout_-_display: flex;; |
| |
| --layout-inline_-_display: inline-flex;; |
| |
| --layout-horizontal_-_display: var(--layout_-_display); --layout-horizontal_-_-ms-flex-direction: row; --layout-horizontal_-_-webkit-flex-direction: row; --layout-horizontal_-_flex-direction: row;; |
| |
| --layout-horizontal-reverse_-_display: var(--layout_-_display); --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse; --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse; --layout-horizontal-reverse_-_flex-direction: row-reverse;; |
| |
| --layout-vertical_-_display: var(--layout_-_display); --layout-vertical_-_-ms-flex-direction: column; --layout-vertical_-_-webkit-flex-direction: column; --layout-vertical_-_flex-direction: column;; |
| |
| --layout-vertical-reverse_-_display: var(--layout_-_display); --layout-vertical-reverse_-_-ms-flex-direction: column-reverse; --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse; --layout-vertical-reverse_-_flex-direction: column-reverse;; |
| |
| --layout-wrap_-_-ms-flex-wrap: wrap; --layout-wrap_-_-webkit-flex-wrap: wrap; --layout-wrap_-_flex-wrap: wrap;; |
| |
| --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse; --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse; --layout-wrap-reverse_-_flex-wrap: wrap-reverse;; |
| |
| --layout-flex-auto_-_-ms-flex: 1 1 auto; --layout-flex-auto_-_-webkit-flex: 1 1 auto; --layout-flex-auto_-_flex: 1 1 auto;; |
| |
| --layout-flex-none_-_-ms-flex: none; --layout-flex-none_-_-webkit-flex: none; --layout-flex-none_-_flex: none;; |
| |
| --layout-flex_-_-ms-flex: 1 1 0.000000001px; --layout-flex_-_-webkit-flex: 1; --layout-flex_-_flex: 1; --layout-flex_-_-webkit-flex-basis: 0.000000001px; --layout-flex_-_flex-basis: 0.000000001px;; |
| |
| --layout-flex-2_-_-ms-flex: 2; --layout-flex-2_-_-webkit-flex: 2; --layout-flex-2_-_flex: 2;; |
| |
| --layout-flex-3_-_-ms-flex: 3; --layout-flex-3_-_-webkit-flex: 3; --layout-flex-3_-_flex: 3;; |
| |
| --layout-flex-4_-_-ms-flex: 4; --layout-flex-4_-_-webkit-flex: 4; --layout-flex-4_-_flex: 4;; |
| |
| --layout-flex-5_-_-ms-flex: 5; --layout-flex-5_-_-webkit-flex: 5; --layout-flex-5_-_flex: 5;; |
| |
| --layout-flex-6_-_-ms-flex: 6; --layout-flex-6_-_-webkit-flex: 6; --layout-flex-6_-_flex: 6;; |
| |
| --layout-flex-7_-_-ms-flex: 7; --layout-flex-7_-_-webkit-flex: 7; --layout-flex-7_-_flex: 7;; |
| |
| --layout-flex-8_-_-ms-flex: 8; --layout-flex-8_-_-webkit-flex: 8; --layout-flex-8_-_flex: 8;; |
| |
| --layout-flex-9_-_-ms-flex: 9; --layout-flex-9_-_-webkit-flex: 9; --layout-flex-9_-_flex: 9;; |
| |
| --layout-flex-10_-_-ms-flex: 10; --layout-flex-10_-_-webkit-flex: 10; --layout-flex-10_-_flex: 10;; |
| |
| --layout-flex-11_-_-ms-flex: 11; --layout-flex-11_-_-webkit-flex: 11; --layout-flex-11_-_flex: 11;; |
| |
| --layout-flex-12_-_-ms-flex: 12; --layout-flex-12_-_-webkit-flex: 12; --layout-flex-12_-_flex: 12;; |
| |
| |
| |
| --layout-start_-_-ms-flex-align: start; --layout-start_-_-webkit-align-items: flex-start; --layout-start_-_align-items: flex-start;; |
| |
| --layout-center_-_-ms-flex-align: center; --layout-center_-_-webkit-align-items: center; --layout-center_-_align-items: center;; |
| |
| --layout-end_-_-ms-flex-align: end; --layout-end_-_-webkit-align-items: flex-end; --layout-end_-_align-items: flex-end;; |
| |
| --layout-baseline_-_-ms-flex-align: baseline; --layout-baseline_-_-webkit-align-items: baseline; --layout-baseline_-_align-items: baseline;; |
| |
| |
| |
| --layout-start-justified_-_-ms-flex-pack: start; --layout-start-justified_-_-webkit-justify-content: flex-start; --layout-start-justified_-_justify-content: flex-start;; |
| |
| --layout-center-justified_-_-ms-flex-pack: center; --layout-center-justified_-_-webkit-justify-content: center; --layout-center-justified_-_justify-content: center;; |
| |
| --layout-end-justified_-_-ms-flex-pack: end; --layout-end-justified_-_-webkit-justify-content: flex-end; --layout-end-justified_-_justify-content: flex-end;; |
| |
| --layout-around-justified_-_-ms-flex-pack: distribute; --layout-around-justified_-_-webkit-justify-content: space-around; --layout-around-justified_-_justify-content: space-around;; |
| |
| --layout-justified_-_-ms-flex-pack: justify; --layout-justified_-_-webkit-justify-content: space-between; --layout-justified_-_justify-content: space-between;; |
| |
| --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align); --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items); --layout-center-center_-_align-items: var(--layout-center_-_align-items); --layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); --layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);; |
| |
| |
| |
| --layout-self-start_-_-ms-align-self: flex-start; --layout-self-start_-_-webkit-align-self: flex-start; --layout-self-start_-_align-self: flex-start;; |
| |
| --layout-self-center_-_-ms-align-self: center; --layout-self-center_-_-webkit-align-self: center; --layout-self-center_-_align-self: center;; |
| |
| --layout-self-end_-_-ms-align-self: flex-end; --layout-self-end_-_-webkit-align-self: flex-end; --layout-self-end_-_align-self: flex-end;; |
| |
| --layout-self-stretch_-_-ms-align-self: stretch; --layout-self-stretch_-_-webkit-align-self: stretch; --layout-self-stretch_-_align-self: stretch;; |
| |
| --layout-self-baseline_-_-ms-align-self: baseline; --layout-self-baseline_-_-webkit-align-self: baseline; --layout-self-baseline_-_align-self: baseline;; |
| |
| |
| |
| --layout-start-aligned_-_-ms-flex-line-pack: start; --layout-start-aligned_-_-ms-align-content: flex-start; --layout-start-aligned_-_-webkit-align-content: flex-start; --layout-start-aligned_-_align-content: flex-start;; |
| |
| --layout-end-aligned_-_-ms-flex-line-pack: end; --layout-end-aligned_-_-ms-align-content: flex-end; --layout-end-aligned_-_-webkit-align-content: flex-end; --layout-end-aligned_-_align-content: flex-end;; |
| |
| --layout-center-aligned_-_-ms-flex-line-pack: center; --layout-center-aligned_-_-ms-align-content: center; --layout-center-aligned_-_-webkit-align-content: center; --layout-center-aligned_-_align-content: center;; |
| |
| --layout-between-aligned_-_-ms-flex-line-pack: justify; --layout-between-aligned_-_-ms-align-content: space-between; --layout-between-aligned_-_-webkit-align-content: space-between; --layout-between-aligned_-_align-content: space-between;; |
| |
| --layout-around-aligned_-_-ms-flex-line-pack: distribute; --layout-around-aligned_-_-ms-align-content: space-around; --layout-around-aligned_-_-webkit-align-content: space-around; --layout-around-aligned_-_align-content: space-around;; |
| |
| |
| |
| --layout-block_-_display: block;; |
| |
| --layout-invisible_-_visibility: hidden !important;; |
| |
| --layout-relative_-_position: relative;; |
| |
| --layout-fit_-_position: absolute; --layout-fit_-_top: 0; --layout-fit_-_right: 0; --layout-fit_-_bottom: 0; --layout-fit_-_left: 0;; |
| |
| --layout-scroll_-_-webkit-overflow-scrolling: touch; --layout-scroll_-_overflow: auto;; |
| |
| --layout-fullbleed_-_margin: 0; --layout-fullbleed_-_height: 100vh;; |
| |
| |
| |
| --layout-fixed-top_-_position: fixed; --layout-fixed-top_-_top: 0; --layout-fixed-top_-_left: 0; --layout-fixed-top_-_right: 0;; |
| |
| --layout-fixed-right_-_position: fixed; --layout-fixed-right_-_top: 0; --layout-fixed-right_-_right: 0; --layout-fixed-right_-_bottom: 0;; |
| |
| --layout-fixed-bottom_-_position: fixed; --layout-fixed-bottom_-_right: 0; --layout-fixed-bottom_-_bottom: 0; --layout-fixed-bottom_-_left: 0;; |
| |
| --layout-fixed-left_-_position: fixed; --layout-fixed-left_-_top: 0; --layout-fixed-left_-_bottom: 0; --layout-fixed-left_-_left: 0;; |
| } |
| |
| </style> |
| |
| |
| <dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/" css-build="shadow"> |
| <template> |
| <style scope="iron-icon">:host { |
| display: var(--layout-inline_-_display); |
| -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); |
| 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> |
| |
| </dom-module> |
| <dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-ripple/" css-build="shadow"> |
| |
| <template> |
| <style scope="paper-ripple">:host { |
| display: block; |
| position: absolute; |
| border-radius: inherit; |
| overflow: hidden; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| |
| |
| pointer-events: none; |
| } |
| |
| :host([animating]) { |
| -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" css-build="shadow">html { |
| --shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);; |
| |
| --shadow-none_-_box-shadow: none;; |
| |
| |
| |
| --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/" css-build="shadow"> |
| <template> |
| <style scope="paper-material-shared-styles">:host { |
| display: block; |
| position: relative; |
| } |
| |
| :host([elevation="1"]) { |
| box-shadow: var(--shadow-elevation-2dp_-_box-shadow); |
| } |
| |
| :host([elevation="2"]) { |
| box-shadow: var(--shadow-elevation-4dp_-_box-shadow); |
| } |
| |
| :host([elevation="3"]) { |
| box-shadow: var(--shadow-elevation-6dp_-_box-shadow); |
| } |
| |
| :host([elevation="4"]) { |
| box-shadow: var(--shadow-elevation-8dp_-_box-shadow); |
| } |
| |
| :host([elevation="5"]) { |
| box-shadow: var(--shadow-elevation-16dp_-_box-shadow); |
| } |
| |
| </style> |
| </template> |
| </dom-module> |
| |
| |
| <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-button/" css-build="shadow"> |
| <template strip-whitespace=""> |
| <style scope="paper-button">:host { |
| display: block; |
| position: relative; |
| } |
| |
| :host([elevation="1"]) { |
| box-shadow: var(--shadow-elevation-2dp_-_box-shadow); |
| } |
| |
| :host([elevation="2"]) { |
| box-shadow: var(--shadow-elevation-4dp_-_box-shadow); |
| } |
| |
| :host([elevation="3"]) { |
| box-shadow: var(--shadow-elevation-6dp_-_box-shadow); |
| } |
| |
| :host([elevation="4"]) { |
| box-shadow: var(--shadow-elevation-8dp_-_box-shadow); |
| } |
| |
| :host([elevation="5"]) { |
| box-shadow: var(--shadow-elevation-16dp_-_box-shadow); |
| } |
| |
| :host { |
| display: var(--layout-inline_-_display); |
| -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); |
| 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; |
| |
| font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); |
| ; |
| } |
| |
| :host([hidden]) { |
| display: none !important; |
| } |
| |
| :host([raised].keyboard-focus) { |
| font-weight: bold; |
| ; |
| } |
| |
| :host(:not([raised]).keyboard-focus) { |
| font-weight: bold; |
| ; |
| } |
| |
| :host([disabled]) { |
| background: #eaeaea; |
| color: #a8a8a8; |
| cursor: auto; |
| pointer-events: none; |
| |
| ; |
| } |
| |
| :host([animated]) { |
| transition: var(--shadow-transition_-_transition); |
| } |
| |
| 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/" css-build="shadow"> |
| <template strip-whitespace=""> |
| <style scope="paper-icon-button-light">:host { |
| vertical-align: middle; |
| color: inherit; |
| outline: none; |
| width: 24px; |
| height: 24px; |
| background: none; |
| margin: 0; |
| border: none; |
| padding: 0; |
| |
| position: relative; |
| cursor: pointer; |
| |
| |
| -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" css-build="shadow">html { |
| --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; |
| |
| |
| |
| --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; |
| |
| |
| --dark-divider-opacity: 0.12; |
| --dark-disabled-opacity: 0.38; |
| --dark-secondary-opacity: 0.54; |
| --dark-primary-opacity: 0.87; |
| |
| |
| --light-divider-opacity: 0.12; |
| --light-disabled-opacity: 0.3; |
| --light-secondary-opacity: 0.7; |
| --light-primary-opacity: 1.0; |
| } |
| |
| </style> |
| |
| |
| <dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper-progress/" css-build="shadow"> |
| <template> |
| <style scope="paper-progress">:host { |
| display: block; |
| width: 200px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| :host([hidden]) { |
| display: none !important; |
| } |
| |
| #progressContainer { |
| ; |
| position: relative; |
| } |
| |
| #progressContainer, .indeterminate::after { |
| height: var(--paper-progress-height, 4px); |
| } |
| |
| #primaryProgress, #secondaryProgress, .indeterminate::after { |
| position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); |
| } |
| |
| #progressContainer, .indeterminate::after { |
| background: var(--paper-progress-container-color,var(--google-grey-300));; |
| } |
| |
| :host(.transiting) #primaryProgress, :host(.transiting) #secondaryProgress { |
| -webkit-transition-property: -webkit-transform; |
| transition-property: transform; |
| |
| |
| -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s); |
| transition-duration: var(--paper-progress-transition-duration, 0.08s); |
| |
| |
| -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
| transition-timing-function: var(--paper-progress-transition-timing-function, ease); |
| |
| |
| -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); |
| transition-delay: var(--paper-progress-transition-delay, 0s); |
| } |
| |
| #primaryProgress, #secondaryProgress { |
| position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); |
| -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,var(--google-green-500));; |
| } |
| |
| #secondaryProgress { |
| background: var(--paper-progress-secondary-color,var(--google-green-100));; |
| } |
| |
| :host([disabled]) #primaryProgress { |
| background: var(--paper-progress-disabled-active-color,var(--google-grey-500));; |
| } |
| |
| :host([disabled]) #secondaryProgress { |
| background: var(--paper-progress-disabled-secondary-color,var(--google-grey-300));; |
| } |
| |
| :host(:not([disabled])) #primaryProgress.indeterminate { |
| -webkit-transform-origin: right center; |
| transform-origin: right center; |
| -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; |
| animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; |
| } |
| |
| :host(:not([disabled])) #primaryProgress.indeterminate::after { |
| content: ""; |
| -webkit-transform-origin: center center; |
| transform-origin: center center; |
| |
| -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; |
| animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 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/" css-build="shadow"> |
| <template> |
| <style scope="downloads-item">[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; |
| } |
| |
| :host { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| paper-button { |
| font-weight: 500; |
| margin: 0; |
| min-width: auto; |
| } |
| |
| #date { |
| color: var(--paper-grey-700); |
| font-size: 100%; |
| font-weight: 500; |
| margin: 24px auto 10px; |
| width: var(--downloads-card-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-card-width); |
| } |
| |
| #content.is-active { |
| box-shadow: var(--shadow-elevation-2dp_-_box-shadow); |
| } |
| |
| #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: var(--downloads-card-margin); |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| min-width: 0; |
| padding-bottom: 12px; |
| padding-top: 16px; |
| } |
| |
| #content:not(.is-active) #details { |
| color: rgba(27, 27, 27, .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 { |
| 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'], .dangerous #description { |
| color: var(--google-red-700); |
| } |
| |
| #name, #file-link, #url { |
| max-width: 100%; |
| } |
| |
| #name, #file-link { |
| font-weight: 500; |
| word-break: break-all; |
| } |
| |
| #name { |
| -webkit-margin-end: 12px; |
| } |
| |
| #pause-or-resume, .is-active :-webkit-any(#name, #file-link, #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: var(--paper-grey-600); |
| } |
| |
| #progress, #description:not(:empty), .controls { |
| margin-top: 16px; |
| } |
| |
| .is-active #description { |
| color: #616161; |
| } |
| |
| #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: var(--paper-grey-700); |
| font-size: 16px; |
| height: 32px; |
| line-height: 17px; |
| 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> |
| |
| <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">[[chopUrl_(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="[[pauseOrResumeText_]]"> |
| <paper-button id="pause-or-resume" on-tap="onPauseOrResumeTap_"> |
| [[pauseOrResumeText_]] |
| </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" css-build="shadow">html { |
| --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-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); |
| |
| |
| |
| --light-theme-background-color: #ffffff; |
| --light-theme-base-color: #000000; |
| --light-theme-text-color: var(--paper-grey-900); |
| --light-theme-secondary-color: #737373; |
| --light-theme-disabled-color: #9b9b9b; |
| --light-theme-divider-color: #dbdbdb; |
| |
| |
| --dark-theme-background-color: var(--paper-grey-900); |
| --dark-theme-base-color: #ffffff; |
| --dark-theme-text-color: #ffffff; |
| --dark-theme-secondary-color: #bcbcbc; |
| --dark-theme-disabled-color: #646464; |
| --dark-theme-divider-color: #3c3c3c; |
| |
| |
| --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. */ |
| |
| <if expr="not chromeos and not is_android"> |
| @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'); |
| } |
| </if> |
| |
| </style> |
| <style is="custom-style" css-build="shadow">html { |
| --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif; --paper-font-common-base_-_-webkit-font-smoothing: antialiased;; |
| |
| --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; --paper-font-common-code_-_-webkit-font-smoothing: antialiased;; |
| |
| --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;; |
| |
| --paper-font-common-nowrap_-_white-space: nowrap; --paper-font-common-nowrap_-_overflow: hidden; --paper-font-common-nowrap_-_text-overflow: ellipsis;; |
| |
| |
| |
| --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display4_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display4_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display4_-_font-size: 112px; --paper-font-display4_-_font-weight: 300; --paper-font-display4_-_letter-spacing: -.044em; --paper-font-display4_-_line-height: 120px;; |
| |
| --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display3_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display3_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display3_-_font-size: 56px; --paper-font-display3_-_font-weight: 400; --paper-font-display3_-_letter-spacing: -.026em; --paper-font-display3_-_line-height: 60px;; |
| |
| --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display2_-_font-size: 45px; --paper-font-display2_-_font-weight: 400; --paper-font-display2_-_letter-spacing: -.018em; --paper-font-display2_-_line-height: 48px;; |
| |
| --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display1_-_font-size: 34px; --paper-font-display1_-_font-weight: 400; --paper-font-display1_-_letter-spacing: -.01em; --paper-font-display1_-_line-height: 40px;; |
| |
| --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-headline_-_font-size: 24px; --paper-font-headline_-_font-weight: 400; --paper-font-headline_-_letter-spacing: -.012em; --paper-font-headline_-_line-height: 32px;; |
| |
| --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-title_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-title_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-title_-_font-size: 20px; --paper-font-title_-_font-weight: 500; --paper-font-title_-_line-height: 28px;; |
| |
| --paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-subhead_-_font-size: 16px; --paper-font-subhead_-_font-weight: 400; --paper-font-subhead_-_line-height: 24px;; |
| |
| --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body2_-_font-size: 14px; --paper-font-body2_-_font-weight: 500; --paper-font-body2_-_line-height: 24px;; |
| |
| --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body1_-_font-size: 14px; --paper-font-body1_-_font-weight: 400; --paper-font-body1_-_line-height: 20px;; |
| |
| --paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-caption_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-caption_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-caption_-_font-size: 12px; --paper-font-caption_-_font-weight: 400; --paper-font-caption_-_letter-spacing: 0.011em; --paper-font-caption_-_line-height: 20px;; |
| |
| --paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-menu_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-menu_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-menu_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-menu_-_font-size: 13px; --paper-font-menu_-_font-weight: 500; --paper-font-menu_-_line-height: 24px;; |
| |
| --paper-font-button_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-button_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-button_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-button_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-button_-_font-size: 14px; --paper-font-button_-_font-weight: 500; --paper-font-button_-_letter-spacing: 0.018em; --paper-font-button_-_line-height: 24px; --paper-font-button_-_text-transform: uppercase;; |
| |
| --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code2_-_font-size: 14px; --paper-font-code2_-_font-weight: 700; --paper-font-code2_-_line-height: 20px;; |
| |
| --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-code1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;; |
| } |
| |
| </style> |
| <dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-item/" css-build="shadow"> |
| <template> |
| <style scope="paper-item-shared-styles">:host, .paper-item { |
| display: block; |
| position: relative; |
| min-height: var(--paper-item-min-height, 48px); |
| padding: 0px 16px; |
| } |
| |
| .paper-item { |
| font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); |
| 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); |
| |
| ; |
| } |
| |
| :host([disabled]), .paper-item[disabled] { |
| color: var(--paper-item-disabled-color,var(--disabled-text-color));; |
| |
| ; |
| } |
| |
| :host(:focus), .paper-item:focus { |
| position: relative; |
| outline: 0; |
| |
| ; |
| } |
| |
| :host(:focus):before, .paper-item:focus:before { |
| position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); |
| |
| background: currentColor; |
| content: ''; |
| opacity: var(--dark-divider-opacity); |
| pointer-events: none; |
| |
| ; |
| } |
| |
| </style> |
| </template> |
| </dom-module> |
| |
| |
| <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/" css-build="shadow"> |
| <template> |
| |
| <style scope="paper-item">:host, .paper-item { |
| display: block; |
| position: relative; |
| min-height: var(--paper-item-min-height, 48px); |
| padding: 0px 16px; |
| } |
| |
| .paper-item { |
| font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); |
| 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); |
| |
| ; |
| } |
| |
| :host([disabled]), .paper-item[disabled] { |
| color: var(--paper-item-disabled-color,var(--disabled-text-color));; |
| |
| ; |
| } |
| |
| :host(:focus), .paper-item:focus { |
| position: relative; |
| outline: 0; |
| |
| ; |
| } |
| |
| :host(:focus):before, .paper-item:focus:before { |
| position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); |
| |
| background: currentColor; |
| content: ''; |
| opacity: var(--dark-divider-opacity); |
| pointer-events: none; |
| |
| ; |
| } |
| |
| :host { |
| display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); |
| -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); |
| font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); |
| |
| ; |
| } |
| |
| </style> |
| |
| <content></content> |
| </template> |
| |
| </dom-module> |
| <dom-module id="paper-menu-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-menu/" css-build="shadow"> |
| <template> |
| <style scope="paper-menu-shared-styles">.selectable-content > ::content > .iron-selected { |
| font-weight: bold; |
| |
| font-weight: var(--paper-menu-selected-item_-_font-weight, bold); |
| } |
| |
| .selectable-content > ::content > [disabled] { |
| color: var(--paper-menu-disabled-color,var(--disabled-text-color));; |
| } |
| |
| .selectable-content > ::content > *:focus { |
| position: relative; |
| outline: 0; |
| |
| ; |
| } |
| |
| .selectable-content > ::content > *:focus:after { |
| position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); |
| background: currentColor; |
| opacity: var(--dark-divider-opacity); |
| content: ''; |
| pointer-events: none; |
| |
| ; |
| } |
| |
| .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/" css-build="shadow"> |
| <template> |
| |
| <style scope="paper-menu">.selectable-content > ::content > .iron-selected { |
| font-weight: bold; |
| |
| font-weight: var(--paper-menu-selected-item_-_font-weight, bold); |
| } |
| |
| .selectable-content > ::content > [disabled] { |
| color: var(--paper-menu-disabled-color,var(--disabled-text-color));; |
| } |
| |
| .selectable-content > ::content > *:focus { |
| position: relative; |
| outline: 0; |
| |
| ; |
| } |
| |
| .selectable-content > ::content > *:focus:after { |
| position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); |
| background: currentColor; |
| opacity: var(--dark-divider-opacity); |
| content: ''; |
| pointer-events: none; |
| |
| ; |
| } |
| |
| .selectable-content > ::content > *[colored]:focus:after { |
| opacity: 0.26; |
| } |
| |
| :host { |
| display: block; |
| padding: 8px 0; |
| |
| background: var(--paper-menu-background-color,var(--primary-background-color));; |
| color: var(--paper-menu-color,var(--primary-text-color));; |
| |
| ; |
| } |
| |
| </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/" css-build="shadow"> |
| |
| <template> |
| <style scope="iron-overlay-backdrop">: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; |
| ; |
| } |
| |
| :host(.opened) { |
| opacity: var(--iron-overlay-backdrop-opacity, 0.6); |
| pointer-events: auto; |
| ; |
| } |
| |
| </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/" css-build="shadow"> |
| <template> |
| <style scope="iron-dropdown">:host { |
| position: fixed; |
| } |
| |
| #contentWrapper ::content > * { |
| overflow: auto; |
| } |
| |
| #contentWrapper.animating ::content > * { |
| overflow: hidden; |
| } |
| |
| </style> |
| |
| <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/" css-build="shadow"> |
| <template> |
| <style scope="paper-menu-button">:host { |
| display: inline-block; |
| position: relative; |
| padding: 8px; |
| outline: none; |
| |
| padding: var(--paper-menu-button_-_padding, 8px); |
| } |
| |
| :host([disabled]) { |
| cursor: auto; |
| color: var(--disabled-text-color); |
| |
| ; |
| } |
| |
| iron-dropdown { |
| ; |
| } |
| |
| .dropdown-content { |
| box-shadow: var(--shadow-elevation-2dp_-_box-shadow); |
| |
| position: relative; |
| border-radius: 2px; |
| background-color: var(--paper-menu-button-dropdown-background,var(--primary-background-color));; |
| |
| ; |
| } |
| |
| :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; |
| } |
| |
| #trigger { |
| cursor: pointer; |
| } |
| |
| </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]]" dynamic-align="[[dynamicAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" no-overlap="[[noOverlap]]" open-animation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]" focus-target="[[_dropdownContent]]" allow-outside-scroll="[[allowOutsideScroll]]" restore-focus-on-close="[[restoreFocusOnClose]]" 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/" css-build="shadow"> |
| <template strip-whitespace=""> |
| <style scope="paper-icon-button">: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; |
| |
| |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| -webkit-tap-highlight-color: transparent; |
| |
| |
| box-sizing: border-box !important; |
| |
| height: var(--paper-icon-button_-_height, 40px); padding: var(--paper-icon-button_-_padding, 8px); width: var(--paper-icon-button_-_width, 40px); |
| } |
| |
| :host #ink { |
| color: var(--paper-icon-button-ink-color,var(--primary-text-color));; |
| opacity: 0.6; |
| } |
| |
| :host([disabled]) { |
| color: var(--paper-icon-button-disabled-text,var(--disabled-text-color));; |
| pointer-events: none; |
| cursor: auto; |
| |
| ; |
| } |
| |
| :host(: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> |
| <dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0/paper-spinner/" css-build="shadow"> |
| <template> |
| <style scope="paper-spinner-styles">:host { |
| display: inline-block; |
| position: relative; |
| width: 28px; |
| height: 28px; |
| |
| |
| --paper-spinner-container-rotation-duration: 1568ms; |
| |
| |
| --paper-spinner-expand-contract-duration: 1333ms; |
| |
| |
| --paper-spinner-full-cycle-duration: 5332ms; |
| |
| |
| --paper-spinner-cooldown-duration: 400ms; |
| } |
| |
| #spinnerContainer { |
| width: 100%; |
| height: 100%; |
| |
| |
| direction: ltr; |
| } |
| |
| #spinnerContainer.active { |
| -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; |
| animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; |
| } |
| |
| @-webkit-keyframes container-rotate { |
| to { |
| -webkit-transform: rotate(360deg) |
| } |
| |
| } |
| |
| @keyframes container-rotate { |
| to { |
| transform: rotate(360deg) |
| } |
| |
| } |
| |
| .spinner-layer { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| white-space: nowrap; |
| border-color: var(--paper-spinner-color,var(--google-blue-500));; |
| } |
| |
| .layer-1 { |
| border-color: var(--paper-spinner-layer-1-color,var(--google-blue-500));; |
| } |
| |
| .layer-2 { |
| border-color: var(--paper-spinner-layer-2-color,var(--google-red-500));; |
| } |
| |
| .layer-3 { |
| border-color: var(--paper-spinner-layer-3-color,var(--google-yellow-500));; |
| } |
| |
| .layer-4 { |
| border-color: var(--paper-spinner-layer-4-color,var(--google-green-500));; |
| } |
| |
| .active .spinner-layer { |
| -webkit-animation-name: fill-unfill-rotate; |
| -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); |
| -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| -webkit-animation-iteration-count: infinite; |
| animation-name: fill-unfill-rotate; |
| animation-duration: var(--paper-spinner-full-cycle-duration); |
| animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation-iteration-count: infinite; |
| opacity: 1; |
| } |
| |
| .active .spinner-layer.layer-1 { |
| -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-2 { |
| -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-3 { |
| -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-4 { |
| -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| } |
| |
| @-webkit-keyframes fill-unfill-rotate { |
| 12.5% { |
| -webkit-transform: rotate(135deg) |
| } |
| |
| 25% { |
| -webkit-transform: rotate(270deg) |
| } |
| |
| 37.5% { |
| -webkit-transform: rotate(405deg) |
| } |
| |
| 50% { |
| -webkit-transform: rotate(540deg) |
| } |
| |
| 62.5% { |
| -webkit-transform: rotate(675deg) |
| } |
| |
| 75% { |
| -webkit-transform: rotate(810deg) |
| } |
| |
| 87.5% { |
| -webkit-transform: rotate(945deg) |
| } |
| |
| to { |
| -webkit-transform: rotate(1080deg) |
| } |
| |
| } |
| |
| @keyframes fill-unfill-rotate { |
| 12.5% { |
| transform: rotate(135deg) |
| } |
| |
| 25% { |
| transform: rotate(270deg) |
| } |
| |
| 37.5% { |
| transform: rotate(405deg) |
| } |
| |
| 50% { |
| transform: rotate(540deg) |
| } |
| |
| 62.5% { |
| transform: rotate(675deg) |
| } |
| |
| 75% { |
| transform: rotate(810deg) |
| } |
| |
| 87.5% { |
| transform: rotate(945deg) |
| } |
| |
| to { |
| transform: rotate(1080deg) |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-1-fade-in-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 26% { |
| opacity: 0 |
| } |
| |
| 89% { |
| opacity: 0 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 1 |
| } |
| |
| } |
| |
| @keyframes layer-1-fade-in-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 26% { |
| opacity: 0 |
| } |
| |
| 89% { |
| opacity: 0 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 1 |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-2-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 15% { |
| opacity: 0 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 51% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes layer-2-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 15% { |
| opacity: 0 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 51% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-3-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 40% { |
| opacity: 0 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 76% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes layer-3-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 40% { |
| opacity: 0 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 76% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-4-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 65% { |
| opacity: 0 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes layer-4-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 65% { |
| opacity: 0 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| .circle-clipper { |
| display: inline-block; |
| position: relative; |
| width: 50%; |
| height: 100%; |
| overflow: hidden; |
| border-color: inherit; |
| } |
| |
| .spinner-layer::after { |
| left: 45%; |
| width: 10%; |
| border-top-style: solid; |
| } |
| |
| .spinner-layer::after, .circle-clipper::after { |
| content: ''; |
| box-sizing: border-box; |
| position: absolute; |
| top: 0; |
| border-width: var(--paper-spinner-stroke-width, 3px); |
| border-color: inherit; |
| border-radius: 50%; |
| } |
| |
| .circle-clipper::after { |
| bottom: 0; |
| width: 200%; |
| border-style: solid; |
| border-bottom-color: transparent !important; |
| } |
| |
| .circle-clipper.left::after { |
| left: 0; |
| border-right-color: transparent !important; |
| -webkit-transform: rotate(129deg); |
| transform: rotate(129deg); |
| } |
| |
| .circle-clipper.right::after { |
| left: -100%; |
| border-left-color: transparent !important; |
| -webkit-transform: rotate(-129deg); |
| transform: rotate(-129deg); |
| } |
| |
| .active .gap-patch::after, .active .circle-clipper::after { |
| -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); |
| -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| -webkit-animation-iteration-count: infinite; |
| animation-duration: var(--paper-spinner-expand-contract-duration); |
| animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation-iteration-count: infinite; |
| } |
| |
| .active .circle-clipper.left::after { |
| -webkit-animation-name: left-spin; |
| animation-name: left-spin; |
| } |
| |
| .active .circle-clipper.right::after { |
| -webkit-animation-name: right-spin; |
| animation-name: right-spin; |
| } |
| |
| @-webkit-keyframes left-spin { |
| 0% { |
| -webkit-transform: rotate(130deg) |
| } |
| |
| 50% { |
| -webkit-transform: rotate(-5deg) |
| } |
| |
| to { |
| -webkit-transform: rotate(130deg) |
| } |
| |
| } |
| |
| @keyframes left-spin { |
| 0% { |
| transform: rotate(130deg) |
| } |
| |
| 50% { |
| transform: rotate(-5deg) |
| } |
| |
| to { |
| transform: rotate(130deg) |
| } |
| |
| } |
| |
| @-webkit-keyframes right-spin { |
| 0% { |
| -webkit-transform: rotate(-130deg) |
| } |
| |
| 50% { |
| -webkit-transform: rotate(5deg) |
| } |
| |
| to { |
| -webkit-transform: rotate(-130deg) |
| } |
| |
| } |
| |
| @keyframes right-spin { |
| 0% { |
| transform: rotate(-130deg) |
| } |
| |
| 50% { |
| transform: rotate(5deg) |
| } |
| |
| to { |
| transform: rotate(-130deg) |
| } |
| |
| } |
| |
| #spinnerContainer.cooldown { |
| -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); |
| } |
| |
| @-webkit-keyframes fade-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes fade-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| </style> |
| </template> |
| </dom-module> |
| |
| |
| <dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/paper-spinner/" css-build="shadow"> |
| <template strip-whitespace=""> |
| <style scope="paper-spinner-lite">:host { |
| display: inline-block; |
| position: relative; |
| width: 28px; |
| height: 28px; |
| |
| |
| --paper-spinner-container-rotation-duration: 1568ms; |
| |
| |
| --paper-spinner-expand-contract-duration: 1333ms; |
| |
| |
| --paper-spinner-full-cycle-duration: 5332ms; |
| |
| |
| --paper-spinner-cooldown-duration: 400ms; |
| } |
| |
| #spinnerContainer { |
| width: 100%; |
| height: 100%; |
| |
| |
| direction: ltr; |
| } |
| |
| #spinnerContainer.active { |
| -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; |
| animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; |
| } |
| |
| @-webkit-keyframes container-rotate { |
| to { |
| -webkit-transform: rotate(360deg) |
| } |
| |
| } |
| |
| @keyframes container-rotate { |
| to { |
| transform: rotate(360deg) |
| } |
| |
| } |
| |
| .spinner-layer { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| white-space: nowrap; |
| border-color: var(--paper-spinner-color,var(--google-blue-500));; |
| } |
| |
| .layer-1 { |
| border-color: var(--paper-spinner-layer-1-color,var(--google-blue-500));; |
| } |
| |
| .layer-2 { |
| border-color: var(--paper-spinner-layer-2-color,var(--google-red-500));; |
| } |
| |
| .layer-3 { |
| border-color: var(--paper-spinner-layer-3-color,var(--google-yellow-500));; |
| } |
| |
| .layer-4 { |
| border-color: var(--paper-spinner-layer-4-color,var(--google-green-500));; |
| } |
| |
| .active .spinner-layer { |
| -webkit-animation-name: fill-unfill-rotate; |
| -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); |
| -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| -webkit-animation-iteration-count: infinite; |
| animation-name: fill-unfill-rotate; |
| animation-duration: var(--paper-spinner-full-cycle-duration); |
| animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation-iteration-count: infinite; |
| opacity: 1; |
| } |
| |
| .active .spinner-layer.layer-1 { |
| -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-2 { |
| -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-3 { |
| -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| } |
| |
| .active .spinner-layer.layer-4 { |
| -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| } |
| |
| @-webkit-keyframes fill-unfill-rotate { |
| 12.5% { |
| -webkit-transform: rotate(135deg) |
| } |
| |
| 25% { |
| -webkit-transform: rotate(270deg) |
| } |
| |
| 37.5% { |
| -webkit-transform: rotate(405deg) |
| } |
| |
| 50% { |
| -webkit-transform: rotate(540deg) |
| } |
| |
| 62.5% { |
| -webkit-transform: rotate(675deg) |
| } |
| |
| 75% { |
| -webkit-transform: rotate(810deg) |
| } |
| |
| 87.5% { |
| -webkit-transform: rotate(945deg) |
| } |
| |
| to { |
| -webkit-transform: rotate(1080deg) |
| } |
| |
| } |
| |
| @keyframes fill-unfill-rotate { |
| 12.5% { |
| transform: rotate(135deg) |
| } |
| |
| 25% { |
| transform: rotate(270deg) |
| } |
| |
| 37.5% { |
| transform: rotate(405deg) |
| } |
| |
| 50% { |
| transform: rotate(540deg) |
| } |
| |
| 62.5% { |
| transform: rotate(675deg) |
| } |
| |
| 75% { |
| transform: rotate(810deg) |
| } |
| |
| 87.5% { |
| transform: rotate(945deg) |
| } |
| |
| to { |
| transform: rotate(1080deg) |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-1-fade-in-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 26% { |
| opacity: 0 |
| } |
| |
| 89% { |
| opacity: 0 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 1 |
| } |
| |
| } |
| |
| @keyframes layer-1-fade-in-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 26% { |
| opacity: 0 |
| } |
| |
| 89% { |
| opacity: 0 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 1 |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-2-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 15% { |
| opacity: 0 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 51% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes layer-2-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 15% { |
| opacity: 0 |
| } |
| |
| 25% { |
| opacity: 1 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 51% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-3-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 40% { |
| opacity: 0 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 76% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes layer-3-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 40% { |
| opacity: 0 |
| } |
| |
| 50% { |
| opacity: 1 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 76% { |
| opacity: 0 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @-webkit-keyframes layer-4-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 65% { |
| opacity: 0 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes layer-4-fade-in-out { |
| 0% { |
| opacity: 0 |
| } |
| |
| 65% { |
| opacity: 0 |
| } |
| |
| 75% { |
| opacity: 1 |
| } |
| |
| 90% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| .circle-clipper { |
| display: inline-block; |
| position: relative; |
| width: 50%; |
| height: 100%; |
| overflow: hidden; |
| border-color: inherit; |
| } |
| |
| .spinner-layer::after { |
| left: 45%; |
| width: 10%; |
| border-top-style: solid; |
| } |
| |
| .spinner-layer::after, .circle-clipper::after { |
| content: ''; |
| box-sizing: border-box; |
| position: absolute; |
| top: 0; |
| border-width: var(--paper-spinner-stroke-width, 3px); |
| border-color: inherit; |
| border-radius: 50%; |
| } |
| |
| .circle-clipper::after { |
| bottom: 0; |
| width: 200%; |
| border-style: solid; |
| border-bottom-color: transparent !important; |
| } |
| |
| .circle-clipper.left::after { |
| left: 0; |
| border-right-color: transparent !important; |
| -webkit-transform: rotate(129deg); |
| transform: rotate(129deg); |
| } |
| |
| .circle-clipper.right::after { |
| left: -100%; |
| border-left-color: transparent !important; |
| -webkit-transform: rotate(-129deg); |
| transform: rotate(-129deg); |
| } |
| |
| .active .gap-patch::after, .active .circle-clipper::after { |
| -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); |
| -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| -webkit-animation-iteration-count: infinite; |
| animation-duration: var(--paper-spinner-expand-contract-duration); |
| animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation-iteration-count: infinite; |
| } |
| |
| .active .circle-clipper.left::after { |
| -webkit-animation-name: left-spin; |
| animation-name: left-spin; |
| } |
| |
| .active .circle-clipper.right::after { |
| -webkit-animation-name: right-spin; |
| animation-name: right-spin; |
| } |
| |
| @-webkit-keyframes left-spin { |
| 0% { |
| -webkit-transform: rotate(130deg) |
| } |
| |
| 50% { |
| -webkit-transform: rotate(-5deg) |
| } |
| |
| to { |
| -webkit-transform: rotate(130deg) |
| } |
| |
| } |
| |
| @keyframes left-spin { |
| 0% { |
| transform: rotate(130deg) |
| } |
| |
| 50% { |
| transform: rotate(-5deg) |
| } |
| |
| to { |
| transform: rotate(130deg) |
| } |
| |
| } |
| |
| @-webkit-keyframes right-spin { |
| 0% { |
| -webkit-transform: rotate(-130deg) |
| } |
| |
| 50% { |
| -webkit-transform: rotate(5deg) |
| } |
| |
| to { |
| -webkit-transform: rotate(-130deg) |
| } |
| |
| } |
| |
| @keyframes right-spin { |
| 0% { |
| transform: rotate(-130deg) |
| } |
| |
| 50% { |
| transform: rotate(5deg) |
| } |
| |
| to { |
| transform: rotate(-130deg) |
| } |
| |
| } |
| |
| #spinnerContainer.cooldown { |
| -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); |
| animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); |
| } |
| |
| @-webkit-keyframes fade-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| @keyframes fade-out { |
| 0% { |
| opacity: 1 |
| } |
| |
| to { |
| opacity: 0 |
| } |
| |
| } |
| |
| </style> |
| |
| <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]"> |
| <div class="spinner-layer"> |
| <div class="circle-clipper left"></div> |
| <div class="circle-clipper right"></div> |
| </div> |
| </div> |
| </template> |
| |
| </dom-module> |
| <iron-iconset-svg name="cr" size="24"> |
| <svg> |
| <defs> |
| |
| <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g> |
| <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="delete"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></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="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></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="open-in-new"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></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> |
| </defs> |
| </svg> |
| </iron-iconset-svg> |
| <dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elements/cr_toolbar/" css-build="shadow"> |
| <template> |
| <style scope="cr-toolbar-search-field">:host { |
| align-items: center; |
| display: flex; |
| height: 40px; |
| transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), |
| width 150ms cubic-bezier(0.4, 0, 0.2, 1); |
| width: 44px; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| paper-icon-button { |
| height: 32px; |
| margin: 6px; |
| min-width: 32px; |
| padding: 6px; |
| width: 32px; |
| } |
| |
| #icon { |
| --paper-icon-button-ink-color: white; |
| transition: margin 150ms, opacity 200ms; |
| } |
| |
| #prompt { |
| opacity: 0; |
| } |
| |
| paper-spinner-lite { |
| ; |
| --paper-spinner-color: white; |
| margin: 0 6px; |
| opacity: 0; |
| padding: 6px; |
| position: absolute; |
| } |
| |
| paper-spinner-lite[active] { |
| opacity: 1; |
| } |
| |
| #prompt, paper-spinner-lite { |
| transition: opacity 200ms; |
| } |
| |
| #searchTerm { |
| -webkit-font-smoothing: antialiased; |
| -webkit-margin-start: 2px; |
| flex: 1; |
| line-height: 185%; |
| position: relative; |
| } |
| |
| label { |
| bottom: 0; |
| cursor: text; |
| left: 0; |
| overflow: hidden; |
| position: absolute; |
| right: 0; |
| top: 0; |
| white-space: nowrap; |
| } |
| |
| :host([has-search-text_]) label { |
| visibility: hidden; |
| } |
| |
| input { |
| -webkit-appearance: none; |
| background: transparent; |
| border: none; |
| color: white; |
| font: inherit; |
| outline: none; |
| padding: 0; |
| position: relative; |
| width: 100%; |
| } |
| |
| input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button { |
| -webkit-appearance: none; |
| } |
| |
| :host(:not([narrow])) { |
| -webkit-padding-end: 0; |
| background: rgba(0, 0, 0, 0.22); |
| border-radius: 2px; |
| cursor: text; |
| width: var(--cr-toolbar-field-width); |
| } |
| |
| :host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt { |
| opacity: 0.7; |
| } |
| |
| :host([narrow]:not([showing-search])) #searchTerm { |
| display: none; |
| } |
| |
| :host([showing-search][spinner-active]) #icon { |
| opacity: 0; |
| } |
| |
| :host([narrow][showing-search]) { |
| width: 100%; |
| } |
| |
| :host([narrow][showing-search]) #icon, :host([narrow][showing-search]) paper-spinner-lite { |
| -webkit-margin-start: 18px; |
| } |
| |
| </style> |
| <template is="dom-if" if="[[isSpinnerShown_]]"> |
| <paper-spinner-lite active=""> |
| </paper-spinner-lite> |
| </template> |
| <paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[[computeIconTabIndex_(narrow)]]"> |
| </paper-icon-button> |
| <div id="searchTerm"> |
| <label id="prompt" for="searchInput">[[label]]</label> |
| <input id="searchInput" type="search" on-input="onSearchInput_" on-search="onSearchTermSearch" on-keydown="onSearchTermKeydown_" on-focus="onInputFocus_" on-blur="onInputBlur_" incremental="" autofocus=""> |
| |
| </div> |
| <template is="dom-if" if="[[hasSearchText_]]"> |
| <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]]" on-tap="clearSearch_"> |
| </paper-icon-button> |
| </template> |
| </template> |
| </dom-module> |
| <dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar/" css-build="shadow"> |
| <template> |
| <style scope="cr-toolbar">:host { |
| --cr-toolbar-field-width: 580px; |
| --cr-toolbar-height: 56px; |
| align-items: center; |
| color: #fff; |
| display: flex; |
| height: var(--cr-toolbar-height); |
| } |
| |
| h1 { |
| -webkit-margin-start: 6px; |
| -webkit-padding-end: 12px; |
| flex: 1; |
| font-size: 123%; |
| font-weight: 400; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| #leftContent { |
| -webkit-margin-start: 12px; |
| transition: opacity 100ms; |
| } |
| |
| #leftSpacer { |
| -webkit-margin-start: 6px; |
| align-items: center; |
| display: flex; |
| } |
| |
| #menuButton { |
| height: 32px; |
| margin-bottom: 6px; |
| margin-top: 6px; |
| min-width: 32px; |
| padding: 6px; |
| width: 32px; |
| } |
| |
| #centeredContent { |
| display: flex; |
| flex: 1 1 0; |
| } |
| |
| #rightContent { |
| -webkit-margin-end: 12px; |
| } |
| |
| :host([narrow_]) #centeredContent { |
| justify-content: flex-end; |
| } |
| |
| :host([narrow_][showing-search_]) #leftContent { |
| position: absolute; |
| opacity: 0; |
| } |
| |
| :host(:not([narrow_])) #leftContent { |
| flex: 1 1 var(--cr-toolbar-field-margin, 0); |
| } |
| |
| :host(:not([narrow_])) #rightContent { |
| flex: 1 1 0; |
| text-align: end; |
| } |
| |
| #menuPromo { |
| -webkit-padding-end: 12px; |
| -webkit-padding-start: 8px; |
| align-items: center; |
| background: #616161; |
| border-radius: 2px; |
| color: white; |
| display: flex; |
| font-size: 92.3%; |
| font-weight: 500; |
| opacity: 0; |
| padding-bottom: 6px; |
| padding-top: 6px; |
| position: absolute; |
| top: var(--cr-toolbar-height); |
| white-space: nowrap; |
| z-index: 2; |
| } |
| |
| #menuPromo::before { |
| background: inherit; |
| |
| clip-path: polygon(0 105%, 100% 105%, 50% 0); |
| content: ''; |
| display: block; |
| left: 10px; |
| height: 6px; |
| position: absolute; |
| top: -6px; |
| width: 12px; |
| } |
| |
| :host-context([dir=rtl]) #menuPromo::before { |
| left: auto; |
| right: 10px; |
| } |
| |
| #closePromo { |
| -webkit-appearance: none; |
| -webkit-margin-start: 12px; |
| background: none; |
| border: none; |
| color: inherit; |
| font-size: 20px; |
| line-height: 20px; |
| padding: 0; |
| width: 20px; |
| } |
| |
| </style> |
| <div id="leftContent"> |
| <div id="leftSpacer"> |
| |
| <template is="dom-if" if="[[showMenu]]" restamp=""> |
| <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[menuLabel]]"> |
| </paper-icon-button> |
| <template is="dom-if" if="[[showMenuPromo]]"> |
| <div id="menuPromo" role="tooltip"> |
| [[menuPromo]] |
| <button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[closeMenuPromo]]">✕</button> |
| |
| </div></template> |
| </template> |
| <h1>[[pageName]]</h1> |
| </div> |
| </div> |
| |
| <div id="centeredContent"> |
| <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchPrompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing-search="{{showingSearch_}}"> |
| </cr-toolbar-search-field> |
| <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> |
| </iron-media-query> |
| </div> |
| |
| <div id="rightContent"> |
| <content select=".more-actions"></content> |
| </div> |
| </template> |
| </dom-module> |
| <dom-module id="downloads-toolbar" assetpath="chrome://downloads/" css-build="shadow"> |
| <template> |
| <style scope="downloads-toolbar">:host { |
| align-items: center; |
| background: var(--md-toolbar-color); |
| color: white; |
| display: flex; |
| min-height: 56px; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| #toolbar { |
| --cr-toolbar-field-width: var(--downloads-card-width); |
| flex: 1; |
| } |
| |
| paper-icon-button { |
| --iron-icon-height: 20px; |
| --iron-icon-width: 20px; |
| --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px; --paper-icon-button_-_width: 32px;; |
| } |
| |
| #more { |
| --paper-menu-button_-_padding: 6px;; |
| } |
| |
| paper-menu { |
| --paper-menu-selected-item_-_font-weight: normal;; |
| } |
| |
| paper-item { |
| -webkit-user-select: none; |
| cursor: pointer; |
| font: inherit; |
| min-height: 40px; |
| |
| white-space: nowrap; |
| } |
| |
| </style> |
| <cr-toolbar id="toolbar" page-name="$i18n{title}" search-prompt="$i18n{search}" clear-label="$i18n{clearSearch}" spinner-active="{{spinnerActive}}" on-search-changed="onSearchChanged_"> |
| <div class="more-actions"> |
| <paper-menu-button id="more" horizontal-align="right" allow-outside-scroll=""> |
| <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_" role="menuitem" on-blur="onItemBlur_"> |
| $i18n{clearAll} |
| </paper-item> |
| <paper-item on-tap="onOpenDownloadsFolderTap_" role="menuitem" on-blur="onItemBlur_"> |
| $i18n{openDownloadsFolder} |
| </paper-item> |
| </paper-menu> |
| </paper-menu-button> |
| </div> |
| </cr-toolbar> |
| </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: #f1f1f1; |
| --md-loading-message-color: #6e6e6e; |
| /* 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/" css-build="shadow"> |
| <template> |
| <style scope="downloads-manager">:host { |
| display: flex; |
| flex: 1 0; |
| flex-direction: column; |
| height: 100%; |
| z-index: 0; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| @media screen and (max-width: 1024px) { |
| :host { |
| flex-basis: calc( |
| var(--downloads-card-width) + 2 * var(--downloads-card-margin)); |
| } |
| |
| } |
| |
| #toolbar { |
| position: relative; |
| z-index: 1; |
| } |
| |
| #toolbar::after { |
| box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); |
| content: ''; |
| display: block; |
| height: 6px; |
| opacity: 0; |
| position: absolute; |
| top: 100%; |
| transition: opacity 500ms; |
| width: 100%; |
| } |
| |
| :host([has-shadow_]) #toolbar::after { |
| opacity: 1; |
| } |
| |
| #downloads-list { |
| overflow-y: overlay !important; |
| } |
| |
| #no-downloads, #downloads-list { |
| flex: 1; |
| } |
| |
| :host([loading]) #no-downloads, :host([loading]) #downloads-list { |
| display: none; |
| } |
| |
| #no-downloads { |
| align-items: center; |
| color: #6e6e6e; |
| display: flex; |
| font-size: 123.1%; |
| font-weight: 500; |
| justify-content: center; |
| |
| 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; |
| margin-bottom: 32px; |
| } |
| |
| </style> |
| |
| <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}"> |
| </downloads-toolbar> |
| <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]]"> |
| <template> |
| <downloads-item data="[[item]]"></downloads-item> |
| </template> |
| </iron-list> |
| <div id="no-downloads" hidden="[[hasDownloads_]]"> |
| <div> |
| <div class="illustration"></div> |
| <span>[[noDownloadsText_(inSearchMode_)]]</span> |
| </div> |
| </div> |
| </template> |
| </dom-module> |
| </div> |
| <downloads-manager></downloads-manager> |
| <if expr="is_macosx"> |
| <command id="clear-all-command" shortcut="Alt|c Alt|ç"></command> |
| <command id="undo-command" shortcut="Meta|z"></command> |
| <command id="find-command" shortcut="Meta|f"></command> |
| </if> |
| <if expr="not is_macosx"> |
| <command id="clear-all-command" shortcut="Alt|c"></command> |
| <command id="undo-command" shortcut="Ctrl|z"></command> |
| <command id="find-command" shortcut="Ctrl|f"></command> |
| </if> |
| <link rel="import" href="chrome://resources/html/polymer.html"> |
| <script src="crisper.js"></script></body></html> |
