| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html><html dir="$i18n{textdirection}" lang="$i18n{language}"><head><!-
- | |
| 2 @license | |
| 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
| 7 Code distributed by Google as part of the polymer project is also | |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
| 9 --><!-- | |
| 10 @license | |
| 11 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | |
| 12 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
| 13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| 14 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
| 15 Code distributed by Google as part of the polymer project is also | |
| 16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
| 17 --><!-- | |
| 18 @license | |
| 19 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
| 20 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
| 21 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| 22 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
| 23 Code distributed by Google as part of the polymer project is also | |
| 24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
| 25 --> | |
| 26 <meta charset="utf-8"> | |
| 27 <title>$i18n{title}</title> | |
| 28 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> | |
| 29 <style> | |
| 30 /* Copyright 2016 The Chromium Authors. All rights reserved. | |
| 31 * Use of this source code is governed by a BSD-style license that can be | |
| 32 * found in the LICENSE file. */ | |
| 33 | |
| 34 :root { | |
| 35 /* This is a custom, Chrome-specific color that does not have a --paper or | |
| 36 * --google equivalent. */ | |
| 37 --md-background-color: #f1f1f1; | |
| 38 --md-loading-message-color: #6e6e6e; | |
| 39 /* This is --google-blue-700, rewritten as a native custom property for speed. | |
| 40 */ | |
| 41 --md-toolbar-color: rgb(51, 103, 214); | |
| 42 } | |
| 43 | |
| 44 </style> | |
| 45 <style> | |
| 46 html { | |
| 47 background: var(--md-background-color); | |
| 48 } | |
| 49 | |
| 50 html, | |
| 51 body { | |
| 52 height: 100%; | |
| 53 } | |
| 54 | |
| 55 body { | |
| 56 display: flex; | |
| 57 margin: 0; | |
| 58 } | |
| 59 | |
| 60 :root { | |
| 61 --downloads-card-margin: 24px; | |
| 62 --downloads-card-width: 640px; | |
| 63 } | |
| 64 </style> | |
| 65 </head> | |
| 66 <body> | |
| 67 <downloads-manager></downloads-manager> | |
| 68 <if expr="is_macosx"> | |
| 69 <command id="clear-all-command" shortcut="Alt|c Alt|ç"></command> | |
| 70 <command id="undo-command" shortcut="Meta|z"></command> | |
| 71 <command id="find-command" shortcut="Meta|f"></command> | |
| 72 </if> | |
| 73 <if expr="not is_macosx"> | |
| 74 <command id="clear-all-command" shortcut="Alt|c"></command> | |
| 75 <command id="undo-command" shortcut="Ctrl|z"></command> | |
| 76 <command id="find-command" shortcut="Ctrl|f"></command> | |
| 77 </if> | |
| 78 <div hidden="" by-vulcanize=""></div><link rel="import" href="chrome://resourc
es/html/polymer.html"> | |
| 79 <div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_time_da
ta.js"></script> | |
| 80 <script src="chrome://downloads/strings.js"></script> | |
| 81 </div><div hidden="" by-vulcanize=""><dom-module id="iron-list" assetpath="chrom
e://resources/polymer/v1_0/iron-list/" css-build="shadow"> | |
| 82 <template> | |
| 83 <style scope="iron-list">:host { | |
| 84 display: block; | |
| 85 position: relative; | |
| 86 } | |
| 87 | |
| 88 @media only screen and (-webkit-max-device-pixel-ratio: 1) { | |
| 89 :host { | |
| 90 will-change: transform; | |
| 91 } | |
| 92 | |
| 93 } | |
| 94 | |
| 95 #items { | |
| 96 ; | |
| 97 position: relative; | |
| 98 } | |
| 99 | |
| 100 :host(:not([grid])) #items > ::content > * { | |
| 101 width: 100%; | |
| 102 } | |
| 103 | |
| 104 #items > ::content > * { | |
| 105 box-sizing: border-box; | |
| 106 margin: 0; | |
| 107 position: absolute; | |
| 108 top: 0; | |
| 109 will-change: transform; | |
| 110 } | |
| 111 | |
| 112 </style> | |
| 113 | |
| 114 <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}"
selected-item="{{selectedItem}}"> | |
| 115 </array-selector> | |
| 116 | |
| 117 <div id="items"> | |
| 118 <content></content> | |
| 119 </div> | |
| 120 | |
| 121 </template> | |
| 122 </dom-module> | |
| 123 | |
| 124 <style> | |
| 125 /* IE 10 support for HTML5 hidden attr */ | |
| 126 [hidden] { | |
| 127 display: none !important; | |
| 128 } | |
| 129 </style><style is="custom-style" css-build="shadow">html { | |
| 130 --layout_-_display: flex;; | |
| 131 | |
| 132 --layout-inline_-_display: inline-flex;; | |
| 133 | |
| 134 --layout-horizontal_-_display: var(--layout_-_display); --layout-horizontal
_-_-ms-flex-direction: row; --layout-horizontal_-_-webkit-flex-direction: row;
--layout-horizontal_-_flex-direction: row;; | |
| 135 | |
| 136 --layout-horizontal-reverse_-_display: var(--layout_-_display); --layout-ho
rizontal-reverse_-_-ms-flex-direction: row-reverse; --layout-horizontal-reverse
_-_-webkit-flex-direction: row-reverse; --layout-horizontal-reverse_-_flex-dire
ction: row-reverse;; | |
| 137 | |
| 138 --layout-vertical_-_display: var(--layout_-_display); --layout-vertical_-_-
ms-flex-direction: column; --layout-vertical_-_-webkit-flex-direction: column;
--layout-vertical_-_flex-direction: column;; | |
| 139 | |
| 140 --layout-vertical-reverse_-_display: var(--layout_-_display); --layout-vert
ical-reverse_-_-ms-flex-direction: column-reverse; --layout-vertical-reverse_-_
-webkit-flex-direction: column-reverse; --layout-vertical-reverse_-_flex-direct
ion: column-reverse;; | |
| 141 | |
| 142 --layout-wrap_-_-ms-flex-wrap: wrap; --layout-wrap_-_-webkit-flex-wrap: wr
ap; --layout-wrap_-_flex-wrap: wrap;; | |
| 143 | |
| 144 --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse; --layout-wrap-reverse_
-_-webkit-flex-wrap: wrap-reverse; --layout-wrap-reverse_-_flex-wrap: wrap-rev
erse;; | |
| 145 | |
| 146 --layout-flex-auto_-_-ms-flex: 1 1 auto; --layout-flex-auto_-_-webkit-flex:
1 1 auto; --layout-flex-auto_-_flex: 1 1 auto;; | |
| 147 | |
| 148 --layout-flex-none_-_-ms-flex: none; --layout-flex-none_-_-webkit-flex: no
ne; --layout-flex-none_-_flex: none;; | |
| 149 | |
| 150 --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;; | |
| 151 | |
| 152 --layout-flex-2_-_-ms-flex: 2; --layout-flex-2_-_-webkit-flex: 2; --layout
-flex-2_-_flex: 2;; | |
| 153 | |
| 154 --layout-flex-3_-_-ms-flex: 3; --layout-flex-3_-_-webkit-flex: 3; --layout
-flex-3_-_flex: 3;; | |
| 155 | |
| 156 --layout-flex-4_-_-ms-flex: 4; --layout-flex-4_-_-webkit-flex: 4; --layout
-flex-4_-_flex: 4;; | |
| 157 | |
| 158 --layout-flex-5_-_-ms-flex: 5; --layout-flex-5_-_-webkit-flex: 5; --layout
-flex-5_-_flex: 5;; | |
| 159 | |
| 160 --layout-flex-6_-_-ms-flex: 6; --layout-flex-6_-_-webkit-flex: 6; --layout
-flex-6_-_flex: 6;; | |
| 161 | |
| 162 --layout-flex-7_-_-ms-flex: 7; --layout-flex-7_-_-webkit-flex: 7; --layout
-flex-7_-_flex: 7;; | |
| 163 | |
| 164 --layout-flex-8_-_-ms-flex: 8; --layout-flex-8_-_-webkit-flex: 8; --layout
-flex-8_-_flex: 8;; | |
| 165 | |
| 166 --layout-flex-9_-_-ms-flex: 9; --layout-flex-9_-_-webkit-flex: 9; --layout
-flex-9_-_flex: 9;; | |
| 167 | |
| 168 --layout-flex-10_-_-ms-flex: 10; --layout-flex-10_-_-webkit-flex: 10; --la
yout-flex-10_-_flex: 10;; | |
| 169 | |
| 170 --layout-flex-11_-_-ms-flex: 11; --layout-flex-11_-_-webkit-flex: 11; --la
yout-flex-11_-_flex: 11;; | |
| 171 | |
| 172 --layout-flex-12_-_-ms-flex: 12; --layout-flex-12_-_-webkit-flex: 12; --la
yout-flex-12_-_flex: 12;; | |
| 173 | |
| 174 | |
| 175 | |
| 176 --layout-start_-_-ms-flex-align: start; --layout-start_-_-webkit-align-item
s: flex-start; --layout-start_-_align-items: flex-start;; | |
| 177 | |
| 178 --layout-center_-_-ms-flex-align: center; --layout-center_-_-webkit-align-i
tems: center; --layout-center_-_align-items: center;; | |
| 179 | |
| 180 --layout-end_-_-ms-flex-align: end; --layout-end_-_-webkit-align-items: fl
ex-end; --layout-end_-_align-items: flex-end;; | |
| 181 | |
| 182 --layout-baseline_-_-ms-flex-align: baseline; --layout-baseline_-_-webkit-a
lign-items: baseline; --layout-baseline_-_align-items: baseline;; | |
| 183 | |
| 184 | |
| 185 | |
| 186 --layout-start-justified_-_-ms-flex-pack: start; --layout-start-justified_-
_-webkit-justify-content: flex-start; --layout-start-justified_-_justify-conten
t: flex-start;; | |
| 187 | |
| 188 --layout-center-justified_-_-ms-flex-pack: center; --layout-center-justifie
d_-_-webkit-justify-content: center; --layout-center-justified_-_justify-conten
t: center;; | |
| 189 | |
| 190 --layout-end-justified_-_-ms-flex-pack: end; --layout-end-justified_-_-webk
it-justify-content: flex-end; --layout-end-justified_-_justify-content: flex-e
nd;; | |
| 191 | |
| 192 --layout-around-justified_-_-ms-flex-pack: distribute; --layout-around-just
ified_-_-webkit-justify-content: space-around; --layout-around-justified_-_just
ify-content: space-around;; | |
| 193 | |
| 194 --layout-justified_-_-ms-flex-pack: justify; --layout-justified_-_-webkit-j
ustify-content: space-between; --layout-justified_-_justify-content: space-bet
ween;; | |
| 195 | |
| 196 --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-ali
gn); --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webki
t-align-items); --layout-center-center_-_align-items: var(--layout-center_-_ali
gn-items); --layout-center-center_-_-ms-flex-pack: var(--layout-center-justifie
d_-_-ms-flex-pack); --layout-center-center_-_-webkit-justify-content: var(--lay
out-center-justified_-_-webkit-justify-content); --layout-center-center_-_justif
y-content: var(--layout-center-justified_-_justify-content);; | |
| 197 | |
| 198 | |
| 199 | |
| 200 --layout-self-start_-_-ms-align-self: flex-start; --layout-self-start_-_-we
bkit-align-self: flex-start; --layout-self-start_-_align-self: flex-start;; | |
| 201 | |
| 202 --layout-self-center_-_-ms-align-self: center; --layout-self-center_-_-webk
it-align-self: center; --layout-self-center_-_align-self: center;; | |
| 203 | |
| 204 --layout-self-end_-_-ms-align-self: flex-end; --layout-self-end_-_-webkit-a
lign-self: flex-end; --layout-self-end_-_align-self: flex-end;; | |
| 205 | |
| 206 --layout-self-stretch_-_-ms-align-self: stretch; --layout-self-stretch_-_-w
ebkit-align-self: stretch; --layout-self-stretch_-_align-self: stretch;; | |
| 207 | |
| 208 --layout-self-baseline_-_-ms-align-self: baseline; --layout-self-baseline_-
_-webkit-align-self: baseline; --layout-self-baseline_-_align-self: baseline;; | |
| 209 | |
| 210 | |
| 211 | |
| 212 --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;; | |
| 213 | |
| 214 --layout-end-aligned_-_-ms-flex-line-pack: end; --layout-end-aligned_-_-ms-
align-content: flex-end; --layout-end-aligned_-_-webkit-align-content: flex-en
d; --layout-end-aligned_-_align-content: flex-end;; | |
| 215 | |
| 216 --layout-center-aligned_-_-ms-flex-line-pack: center; --layout-center-align
ed_-_-ms-align-content: center; --layout-center-aligned_-_-webkit-align-content
: center; --layout-center-aligned_-_align-content: center;; | |
| 217 | |
| 218 --layout-between-aligned_-_-ms-flex-line-pack: justify; --layout-between-al
igned_-_-ms-align-content: space-between; --layout-between-aligned_-_-webkit-al
ign-content: space-between; --layout-between-aligned_-_align-content: space-be
tween;; | |
| 219 | |
| 220 --layout-around-aligned_-_-ms-flex-line-pack: distribute; --layout-around-a
ligned_-_-ms-align-content: space-around; --layout-around-aligned_-_-webkit-ali
gn-content: space-around; --layout-around-aligned_-_align-content: space-aroun
d;; | |
| 221 | |
| 222 | |
| 223 | |
| 224 --layout-block_-_display: block;; | |
| 225 | |
| 226 --layout-invisible_-_visibility: hidden !important;; | |
| 227 | |
| 228 --layout-relative_-_position: relative;; | |
| 229 | |
| 230 --layout-fit_-_position: absolute; --layout-fit_-_top: 0; --layout-fit_-_r
ight: 0; --layout-fit_-_bottom: 0; --layout-fit_-_left: 0;; | |
| 231 | |
| 232 --layout-scroll_-_-webkit-overflow-scrolling: touch; --layout-scroll_-_over
flow: auto;; | |
| 233 | |
| 234 --layout-fullbleed_-_margin: 0; --layout-fullbleed_-_height: 100vh;; | |
| 235 | |
| 236 | |
| 237 | |
| 238 --layout-fixed-top_-_position: fixed; --layout-fixed-top_-_top: 0; --layou
t-fixed-top_-_left: 0; --layout-fixed-top_-_right: 0;; | |
| 239 | |
| 240 --layout-fixed-right_-_position: fixed; --layout-fixed-right_-_top: 0; --l
ayout-fixed-right_-_right: 0; --layout-fixed-right_-_bottom: 0;; | |
| 241 | |
| 242 --layout-fixed-bottom_-_position: fixed; --layout-fixed-bottom_-_right: 0;
--layout-fixed-bottom_-_bottom: 0; --layout-fixed-bottom_-_left: 0;; | |
| 243 | |
| 244 --layout-fixed-left_-_position: fixed; --layout-fixed-left_-_top: 0; --lay
out-fixed-left_-_bottom: 0; --layout-fixed-left_-_left: 0;; | |
| 245 } | |
| 246 | |
| 247 </style><dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/ir
on-icon/" css-build="shadow"> | |
| 248 <template> | |
| 249 <style scope="iron-icon">:host { | |
| 250 display: var(--layout-inline_-_display); | |
| 251 -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-al
ign-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)
; | |
| 252 position: relative; | |
| 253 | |
| 254 vertical-align: middle; | |
| 255 | |
| 256 fill: var(--iron-icon-fill-color, currentcolor); | |
| 257 stroke: var(--iron-icon-stroke-color, none); | |
| 258 | |
| 259 width: var(--iron-icon-width, 24px); | |
| 260 height: var(--iron-icon-height, 24px); | |
| 261 ; | |
| 262 } | |
| 263 | |
| 264 </style> | |
| 265 </template> | |
| 266 | |
| 267 </dom-module> | |
| 268 <dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-r
ipple/" css-build="shadow"> | |
| 269 | |
| 270 <template> | |
| 271 <style scope="paper-ripple">:host { | |
| 272 display: block; | |
| 273 position: absolute; | |
| 274 border-radius: inherit; | |
| 275 overflow: hidden; | |
| 276 top: 0; | |
| 277 left: 0; | |
| 278 right: 0; | |
| 279 bottom: 0; | |
| 280 | |
| 281 | |
| 282 pointer-events: none; | |
| 283 } | |
| 284 | |
| 285 :host([animating]) { | |
| 286 -webkit-transform: translate(0, 0); | |
| 287 transform: translate3d(0, 0, 0); | |
| 288 } | |
| 289 | |
| 290 #background, #waves, .wave-container, .wave { | |
| 291 pointer-events: none; | |
| 292 position: absolute; | |
| 293 top: 0; | |
| 294 left: 0; | |
| 295 width: 100%; | |
| 296 height: 100%; | |
| 297 } | |
| 298 | |
| 299 #background, .wave { | |
| 300 opacity: 0; | |
| 301 } | |
| 302 | |
| 303 #waves, .wave { | |
| 304 overflow: hidden; | |
| 305 } | |
| 306 | |
| 307 .wave-container, .wave { | |
| 308 border-radius: 50%; | |
| 309 } | |
| 310 | |
| 311 :host(.circle) #background, :host(.circle) #waves { | |
| 312 border-radius: 50%; | |
| 313 } | |
| 314 | |
| 315 :host(.circle) .wave-container { | |
| 316 overflow: hidden; | |
| 317 } | |
| 318 | |
| 319 </style> | |
| 320 | |
| 321 <div id="background"></div> | |
| 322 <div id="waves"></div> | |
| 323 </template> | |
| 324 </dom-module> | |
| 325 <style is="custom-style" css-build="shadow">html { | |
| 326 --shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2,
1);; | |
| 327 | |
| 328 --shadow-none_-_box-shadow: none;; | |
| 329 | |
| 330 | |
| 331 | |
| 332 --shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), | |
| 333 0 1px 5px 0 rgba(0, 0, 0, 0.12), | |
| 334 0 3px 1px -2px rgba(0, 0, 0, 0.2);; | |
| 335 | |
| 336 --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), | |
| 337 0 1px 8px 0 rgba(0, 0, 0, 0.12), | |
| 338 0 3px 3px -2px rgba(0, 0, 0, 0.4);; | |
| 339 | |
| 340 --shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), | |
| 341 0 1px 10px 0 rgba(0, 0, 0, 0.12), | |
| 342 0 2px 4px -1px rgba(0, 0, 0, 0.4);; | |
| 343 | |
| 344 --shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), | |
| 345 0 1px 18px 0 rgba(0, 0, 0, 0.12), | |
| 346 0 3px 5px -1px rgba(0, 0, 0, 0.4);; | |
| 347 | |
| 348 --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), | |
| 349 0 3px 14px 2px rgba(0, 0, 0, 0.12), | |
| 350 0 5px 5px -3px rgba(0, 0, 0, 0.4);; | |
| 351 | |
| 352 --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), | |
| 353 0 4px 22px 3px rgba(0, 0, 0, 0.12), | |
| 354 0 6px 7px -4px rgba(0, 0, 0, 0.4);; | |
| 355 | |
| 356 --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), | |
| 357 0 6px 30px 5px rgba(0, 0, 0, 0.12), | |
| 358 0 8px 10px -5px rgba(0, 0, 0, 0.4);; | |
| 359 } | |
| 360 | |
| 361 </style><dom-module id="paper-material-shared-styles" assetpath="chrome://resour
ces/polymer/v1_0/paper-material/" css-build="shadow"> | |
| 362 <template> | |
| 363 <style scope="paper-material-shared-styles">:host { | |
| 364 display: block; | |
| 365 position: relative; | |
| 366 } | |
| 367 | |
| 368 :host([elevation="1"]) { | |
| 369 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); | |
| 370 } | |
| 371 | |
| 372 :host([elevation="2"]) { | |
| 373 box-shadow: var(--shadow-elevation-4dp_-_box-shadow); | |
| 374 } | |
| 375 | |
| 376 :host([elevation="3"]) { | |
| 377 box-shadow: var(--shadow-elevation-6dp_-_box-shadow); | |
| 378 } | |
| 379 | |
| 380 :host([elevation="4"]) { | |
| 381 box-shadow: var(--shadow-elevation-8dp_-_box-shadow); | |
| 382 } | |
| 383 | |
| 384 :host([elevation="5"]) { | |
| 385 box-shadow: var(--shadow-elevation-16dp_-_box-shadow); | |
| 386 } | |
| 387 | |
| 388 </style> | |
| 389 </template> | |
| 390 </dom-module> | |
| 391 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b
utton/" css-build="shadow"> | |
| 392 <template strip-whitespace=""> | |
| 393 <style scope="paper-button">:host { | |
| 394 display: block; | |
| 395 position: relative; | |
| 396 } | |
| 397 | |
| 398 :host([elevation="1"]) { | |
| 399 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); | |
| 400 } | |
| 401 | |
| 402 :host([elevation="2"]) { | |
| 403 box-shadow: var(--shadow-elevation-4dp_-_box-shadow); | |
| 404 } | |
| 405 | |
| 406 :host([elevation="3"]) { | |
| 407 box-shadow: var(--shadow-elevation-6dp_-_box-shadow); | |
| 408 } | |
| 409 | |
| 410 :host([elevation="4"]) { | |
| 411 box-shadow: var(--shadow-elevation-8dp_-_box-shadow); | |
| 412 } | |
| 413 | |
| 414 :host([elevation="5"]) { | |
| 415 box-shadow: var(--shadow-elevation-16dp_-_box-shadow); | |
| 416 } | |
| 417 | |
| 418 :host { | |
| 419 display: var(--layout-inline_-_display); | |
| 420 -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-al
ign-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)
; | |
| 421 position: relative; | |
| 422 box-sizing: border-box; | |
| 423 min-width: 5.14em; | |
| 424 margin: 0 0.29em; | |
| 425 background: transparent; | |
| 426 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| 427 -webkit-tap-highlight-color: transparent; | |
| 428 font: inherit; | |
| 429 text-transform: uppercase; | |
| 430 outline-width: 0; | |
| 431 border-radius: 3px; | |
| 432 -moz-user-select: none; | |
| 433 -ms-user-select: none; | |
| 434 -webkit-user-select: none; | |
| 435 user-select: none; | |
| 436 cursor: pointer; | |
| 437 z-index: 0; | |
| 438 padding: 0.7em 0.57em; | |
| 439 | |
| 440 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s
moothing: var(--paper-font-common-base_-_-webkit-font-smoothing); | |
| 441 ; | |
| 442 } | |
| 443 | |
| 444 :host([hidden]) { | |
| 445 display: none !important; | |
| 446 } | |
| 447 | |
| 448 :host([raised].keyboard-focus) { | |
| 449 font-weight: bold; | |
| 450 ; | |
| 451 } | |
| 452 | |
| 453 :host(:not([raised]).keyboard-focus) { | |
| 454 font-weight: bold; | |
| 455 ; | |
| 456 } | |
| 457 | |
| 458 :host([disabled]) { | |
| 459 background: #eaeaea; | |
| 460 color: #a8a8a8; | |
| 461 cursor: auto; | |
| 462 pointer-events: none; | |
| 463 | |
| 464 ; | |
| 465 } | |
| 466 | |
| 467 :host([animated]) { | |
| 468 transition: var(--shadow-transition_-_transition); | |
| 469 } | |
| 470 | |
| 471 paper-ripple { | |
| 472 color: var(--paper-button-ink-color); | |
| 473 } | |
| 474 | |
| 475 </style> | |
| 476 | |
| 477 <content></content> | |
| 478 </template> | |
| 479 | |
| 480 </dom-module> | |
| 481 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v
1_0/paper-icon-button/" css-build="shadow"> | |
| 482 <template strip-whitespace=""> | |
| 483 <style scope="paper-icon-button-light">:host { | |
| 484 vertical-align: middle; | |
| 485 color: inherit; | |
| 486 outline: none; | |
| 487 width: 24px; | |
| 488 height: 24px; | |
| 489 background: none; | |
| 490 margin: 0; | |
| 491 border: none; | |
| 492 padding: 0; | |
| 493 | |
| 494 position: relative; | |
| 495 cursor: pointer; | |
| 496 | |
| 497 | |
| 498 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| 499 -webkit-tap-highlight-color: transparent; | |
| 500 } | |
| 501 | |
| 502 :host([disabled]) { | |
| 503 color: #9b9b9b; | |
| 504 pointer-events: none; | |
| 505 cursor: auto; | |
| 506 } | |
| 507 | |
| 508 paper-ripple { | |
| 509 opacity: 0.6; | |
| 510 color: currentColor; | |
| 511 } | |
| 512 | |
| 513 </style> | |
| 514 <content></content> | |
| 515 </template> | |
| 516 </dom-module> | |
| 517 <style is="custom-style" css-build="shadow">html { | |
| 518 --google-red-100: #f4c7c3; | |
| 519 --google-red-300: #e67c73; | |
| 520 --google-red-500: #db4437; | |
| 521 --google-red-700: #c53929; | |
| 522 | |
| 523 --google-blue-100: #c6dafc; | |
| 524 --google-blue-300: #7baaf7; | |
| 525 --google-blue-500: #4285f4; | |
| 526 --google-blue-700: #3367d6; | |
| 527 | |
| 528 --google-green-100: #b7e1cd; | |
| 529 --google-green-300: #57bb8a; | |
| 530 --google-green-500: #0f9d58; | |
| 531 --google-green-700: #0b8043; | |
| 532 | |
| 533 --google-yellow-100: #fce8b2; | |
| 534 --google-yellow-300: #f7cb4d; | |
| 535 --google-yellow-500: #f4b400; | |
| 536 --google-yellow-700: #f09300; | |
| 537 | |
| 538 --google-grey-100: #f5f5f5; | |
| 539 --google-grey-300: #e0e0e0; | |
| 540 --google-grey-500: #9e9e9e; | |
| 541 --google-grey-700: #616161; | |
| 542 | |
| 543 | |
| 544 | |
| 545 --paper-red-50: #ffebee; | |
| 546 --paper-red-100: #ffcdd2; | |
| 547 --paper-red-200: #ef9a9a; | |
| 548 --paper-red-300: #e57373; | |
| 549 --paper-red-400: #ef5350; | |
| 550 --paper-red-500: #f44336; | |
| 551 --paper-red-600: #e53935; | |
| 552 --paper-red-700: #d32f2f; | |
| 553 --paper-red-800: #c62828; | |
| 554 --paper-red-900: #b71c1c; | |
| 555 --paper-red-a100: #ff8a80; | |
| 556 --paper-red-a200: #ff5252; | |
| 557 --paper-red-a400: #ff1744; | |
| 558 --paper-red-a700: #d50000; | |
| 559 | |
| 560 --paper-pink-50: #fce4ec; | |
| 561 --paper-pink-100: #f8bbd0; | |
| 562 --paper-pink-200: #f48fb1; | |
| 563 --paper-pink-300: #f06292; | |
| 564 --paper-pink-400: #ec407a; | |
| 565 --paper-pink-500: #e91e63; | |
| 566 --paper-pink-600: #d81b60; | |
| 567 --paper-pink-700: #c2185b; | |
| 568 --paper-pink-800: #ad1457; | |
| 569 --paper-pink-900: #880e4f; | |
| 570 --paper-pink-a100: #ff80ab; | |
| 571 --paper-pink-a200: #ff4081; | |
| 572 --paper-pink-a400: #f50057; | |
| 573 --paper-pink-a700: #c51162; | |
| 574 | |
| 575 --paper-purple-50: #f3e5f5; | |
| 576 --paper-purple-100: #e1bee7; | |
| 577 --paper-purple-200: #ce93d8; | |
| 578 --paper-purple-300: #ba68c8; | |
| 579 --paper-purple-400: #ab47bc; | |
| 580 --paper-purple-500: #9c27b0; | |
| 581 --paper-purple-600: #8e24aa; | |
| 582 --paper-purple-700: #7b1fa2; | |
| 583 --paper-purple-800: #6a1b9a; | |
| 584 --paper-purple-900: #4a148c; | |
| 585 --paper-purple-a100: #ea80fc; | |
| 586 --paper-purple-a200: #e040fb; | |
| 587 --paper-purple-a400: #d500f9; | |
| 588 --paper-purple-a700: #aa00ff; | |
| 589 | |
| 590 --paper-deep-purple-50: #ede7f6; | |
| 591 --paper-deep-purple-100: #d1c4e9; | |
| 592 --paper-deep-purple-200: #b39ddb; | |
| 593 --paper-deep-purple-300: #9575cd; | |
| 594 --paper-deep-purple-400: #7e57c2; | |
| 595 --paper-deep-purple-500: #673ab7; | |
| 596 --paper-deep-purple-600: #5e35b1; | |
| 597 --paper-deep-purple-700: #512da8; | |
| 598 --paper-deep-purple-800: #4527a0; | |
| 599 --paper-deep-purple-900: #311b92; | |
| 600 --paper-deep-purple-a100: #b388ff; | |
| 601 --paper-deep-purple-a200: #7c4dff; | |
| 602 --paper-deep-purple-a400: #651fff; | |
| 603 --paper-deep-purple-a700: #6200ea; | |
| 604 | |
| 605 --paper-indigo-50: #e8eaf6; | |
| 606 --paper-indigo-100: #c5cae9; | |
| 607 --paper-indigo-200: #9fa8da; | |
| 608 --paper-indigo-300: #7986cb; | |
| 609 --paper-indigo-400: #5c6bc0; | |
| 610 --paper-indigo-500: #3f51b5; | |
| 611 --paper-indigo-600: #3949ab; | |
| 612 --paper-indigo-700: #303f9f; | |
| 613 --paper-indigo-800: #283593; | |
| 614 --paper-indigo-900: #1a237e; | |
| 615 --paper-indigo-a100: #8c9eff; | |
| 616 --paper-indigo-a200: #536dfe; | |
| 617 --paper-indigo-a400: #3d5afe; | |
| 618 --paper-indigo-a700: #304ffe; | |
| 619 | |
| 620 --paper-blue-50: #e3f2fd; | |
| 621 --paper-blue-100: #bbdefb; | |
| 622 --paper-blue-200: #90caf9; | |
| 623 --paper-blue-300: #64b5f6; | |
| 624 --paper-blue-400: #42a5f5; | |
| 625 --paper-blue-500: #2196f3; | |
| 626 --paper-blue-600: #1e88e5; | |
| 627 --paper-blue-700: #1976d2; | |
| 628 --paper-blue-800: #1565c0; | |
| 629 --paper-blue-900: #0d47a1; | |
| 630 --paper-blue-a100: #82b1ff; | |
| 631 --paper-blue-a200: #448aff; | |
| 632 --paper-blue-a400: #2979ff; | |
| 633 --paper-blue-a700: #2962ff; | |
| 634 | |
| 635 --paper-light-blue-50: #e1f5fe; | |
| 636 --paper-light-blue-100: #b3e5fc; | |
| 637 --paper-light-blue-200: #81d4fa; | |
| 638 --paper-light-blue-300: #4fc3f7; | |
| 639 --paper-light-blue-400: #29b6f6; | |
| 640 --paper-light-blue-500: #03a9f4; | |
| 641 --paper-light-blue-600: #039be5; | |
| 642 --paper-light-blue-700: #0288d1; | |
| 643 --paper-light-blue-800: #0277bd; | |
| 644 --paper-light-blue-900: #01579b; | |
| 645 --paper-light-blue-a100: #80d8ff; | |
| 646 --paper-light-blue-a200: #40c4ff; | |
| 647 --paper-light-blue-a400: #00b0ff; | |
| 648 --paper-light-blue-a700: #0091ea; | |
| 649 | |
| 650 --paper-cyan-50: #e0f7fa; | |
| 651 --paper-cyan-100: #b2ebf2; | |
| 652 --paper-cyan-200: #80deea; | |
| 653 --paper-cyan-300: #4dd0e1; | |
| 654 --paper-cyan-400: #26c6da; | |
| 655 --paper-cyan-500: #00bcd4; | |
| 656 --paper-cyan-600: #00acc1; | |
| 657 --paper-cyan-700: #0097a7; | |
| 658 --paper-cyan-800: #00838f; | |
| 659 --paper-cyan-900: #006064; | |
| 660 --paper-cyan-a100: #84ffff; | |
| 661 --paper-cyan-a200: #18ffff; | |
| 662 --paper-cyan-a400: #00e5ff; | |
| 663 --paper-cyan-a700: #00b8d4; | |
| 664 | |
| 665 --paper-teal-50: #e0f2f1; | |
| 666 --paper-teal-100: #b2dfdb; | |
| 667 --paper-teal-200: #80cbc4; | |
| 668 --paper-teal-300: #4db6ac; | |
| 669 --paper-teal-400: #26a69a; | |
| 670 --paper-teal-500: #009688; | |
| 671 --paper-teal-600: #00897b; | |
| 672 --paper-teal-700: #00796b; | |
| 673 --paper-teal-800: #00695c; | |
| 674 --paper-teal-900: #004d40; | |
| 675 --paper-teal-a100: #a7ffeb; | |
| 676 --paper-teal-a200: #64ffda; | |
| 677 --paper-teal-a400: #1de9b6; | |
| 678 --paper-teal-a700: #00bfa5; | |
| 679 | |
| 680 --paper-green-50: #e8f5e9; | |
| 681 --paper-green-100: #c8e6c9; | |
| 682 --paper-green-200: #a5d6a7; | |
| 683 --paper-green-300: #81c784; | |
| 684 --paper-green-400: #66bb6a; | |
| 685 --paper-green-500: #4caf50; | |
| 686 --paper-green-600: #43a047; | |
| 687 --paper-green-700: #388e3c; | |
| 688 --paper-green-800: #2e7d32; | |
| 689 --paper-green-900: #1b5e20; | |
| 690 --paper-green-a100: #b9f6ca; | |
| 691 --paper-green-a200: #69f0ae; | |
| 692 --paper-green-a400: #00e676; | |
| 693 --paper-green-a700: #00c853; | |
| 694 | |
| 695 --paper-light-green-50: #f1f8e9; | |
| 696 --paper-light-green-100: #dcedc8; | |
| 697 --paper-light-green-200: #c5e1a5; | |
| 698 --paper-light-green-300: #aed581; | |
| 699 --paper-light-green-400: #9ccc65; | |
| 700 --paper-light-green-500: #8bc34a; | |
| 701 --paper-light-green-600: #7cb342; | |
| 702 --paper-light-green-700: #689f38; | |
| 703 --paper-light-green-800: #558b2f; | |
| 704 --paper-light-green-900: #33691e; | |
| 705 --paper-light-green-a100: #ccff90; | |
| 706 --paper-light-green-a200: #b2ff59; | |
| 707 --paper-light-green-a400: #76ff03; | |
| 708 --paper-light-green-a700: #64dd17; | |
| 709 | |
| 710 --paper-lime-50: #f9fbe7; | |
| 711 --paper-lime-100: #f0f4c3; | |
| 712 --paper-lime-200: #e6ee9c; | |
| 713 --paper-lime-300: #dce775; | |
| 714 --paper-lime-400: #d4e157; | |
| 715 --paper-lime-500: #cddc39; | |
| 716 --paper-lime-600: #c0ca33; | |
| 717 --paper-lime-700: #afb42b; | |
| 718 --paper-lime-800: #9e9d24; | |
| 719 --paper-lime-900: #827717; | |
| 720 --paper-lime-a100: #f4ff81; | |
| 721 --paper-lime-a200: #eeff41; | |
| 722 --paper-lime-a400: #c6ff00; | |
| 723 --paper-lime-a700: #aeea00; | |
| 724 | |
| 725 --paper-yellow-50: #fffde7; | |
| 726 --paper-yellow-100: #fff9c4; | |
| 727 --paper-yellow-200: #fff59d; | |
| 728 --paper-yellow-300: #fff176; | |
| 729 --paper-yellow-400: #ffee58; | |
| 730 --paper-yellow-500: #ffeb3b; | |
| 731 --paper-yellow-600: #fdd835; | |
| 732 --paper-yellow-700: #fbc02d; | |
| 733 --paper-yellow-800: #f9a825; | |
| 734 --paper-yellow-900: #f57f17; | |
| 735 --paper-yellow-a100: #ffff8d; | |
| 736 --paper-yellow-a200: #ffff00; | |
| 737 --paper-yellow-a400: #ffea00; | |
| 738 --paper-yellow-a700: #ffd600; | |
| 739 | |
| 740 --paper-amber-50: #fff8e1; | |
| 741 --paper-amber-100: #ffecb3; | |
| 742 --paper-amber-200: #ffe082; | |
| 743 --paper-amber-300: #ffd54f; | |
| 744 --paper-amber-400: #ffca28; | |
| 745 --paper-amber-500: #ffc107; | |
| 746 --paper-amber-600: #ffb300; | |
| 747 --paper-amber-700: #ffa000; | |
| 748 --paper-amber-800: #ff8f00; | |
| 749 --paper-amber-900: #ff6f00; | |
| 750 --paper-amber-a100: #ffe57f; | |
| 751 --paper-amber-a200: #ffd740; | |
| 752 --paper-amber-a400: #ffc400; | |
| 753 --paper-amber-a700: #ffab00; | |
| 754 | |
| 755 --paper-orange-50: #fff3e0; | |
| 756 --paper-orange-100: #ffe0b2; | |
| 757 --paper-orange-200: #ffcc80; | |
| 758 --paper-orange-300: #ffb74d; | |
| 759 --paper-orange-400: #ffa726; | |
| 760 --paper-orange-500: #ff9800; | |
| 761 --paper-orange-600: #fb8c00; | |
| 762 --paper-orange-700: #f57c00; | |
| 763 --paper-orange-800: #ef6c00; | |
| 764 --paper-orange-900: #e65100; | |
| 765 --paper-orange-a100: #ffd180; | |
| 766 --paper-orange-a200: #ffab40; | |
| 767 --paper-orange-a400: #ff9100; | |
| 768 --paper-orange-a700: #ff6500; | |
| 769 | |
| 770 --paper-deep-orange-50: #fbe9e7; | |
| 771 --paper-deep-orange-100: #ffccbc; | |
| 772 --paper-deep-orange-200: #ffab91; | |
| 773 --paper-deep-orange-300: #ff8a65; | |
| 774 --paper-deep-orange-400: #ff7043; | |
| 775 --paper-deep-orange-500: #ff5722; | |
| 776 --paper-deep-orange-600: #f4511e; | |
| 777 --paper-deep-orange-700: #e64a19; | |
| 778 --paper-deep-orange-800: #d84315; | |
| 779 --paper-deep-orange-900: #bf360c; | |
| 780 --paper-deep-orange-a100: #ff9e80; | |
| 781 --paper-deep-orange-a200: #ff6e40; | |
| 782 --paper-deep-orange-a400: #ff3d00; | |
| 783 --paper-deep-orange-a700: #dd2c00; | |
| 784 | |
| 785 --paper-brown-50: #efebe9; | |
| 786 --paper-brown-100: #d7ccc8; | |
| 787 --paper-brown-200: #bcaaa4; | |
| 788 --paper-brown-300: #a1887f; | |
| 789 --paper-brown-400: #8d6e63; | |
| 790 --paper-brown-500: #795548; | |
| 791 --paper-brown-600: #6d4c41; | |
| 792 --paper-brown-700: #5d4037; | |
| 793 --paper-brown-800: #4e342e; | |
| 794 --paper-brown-900: #3e2723; | |
| 795 | |
| 796 --paper-grey-50: #fafafa; | |
| 797 --paper-grey-100: #f5f5f5; | |
| 798 --paper-grey-200: #eeeeee; | |
| 799 --paper-grey-300: #e0e0e0; | |
| 800 --paper-grey-400: #bdbdbd; | |
| 801 --paper-grey-500: #9e9e9e; | |
| 802 --paper-grey-600: #757575; | |
| 803 --paper-grey-700: #616161; | |
| 804 --paper-grey-800: #424242; | |
| 805 --paper-grey-900: #212121; | |
| 806 | |
| 807 --paper-blue-grey-50: #eceff1; | |
| 808 --paper-blue-grey-100: #cfd8dc; | |
| 809 --paper-blue-grey-200: #b0bec5; | |
| 810 --paper-blue-grey-300: #90a4ae; | |
| 811 --paper-blue-grey-400: #78909c; | |
| 812 --paper-blue-grey-500: #607d8b; | |
| 813 --paper-blue-grey-600: #546e7a; | |
| 814 --paper-blue-grey-700: #455a64; | |
| 815 --paper-blue-grey-800: #37474f; | |
| 816 --paper-blue-grey-900: #263238; | |
| 817 | |
| 818 | |
| 819 --dark-divider-opacity: 0.12; | |
| 820 --dark-disabled-opacity: 0.38; | |
| 821 --dark-secondary-opacity: 0.54; | |
| 822 --dark-primary-opacity: 0.87; | |
| 823 | |
| 824 | |
| 825 --light-divider-opacity: 0.12; | |
| 826 --light-disabled-opacity: 0.3; | |
| 827 --light-secondary-opacity: 0.7; | |
| 828 --light-primary-opacity: 1.0; | |
| 829 } | |
| 830 | |
| 831 </style><dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1
_0/paper-progress/" css-build="shadow"> | |
| 832 <template> | |
| 833 <style scope="paper-progress">:host { | |
| 834 display: block; | |
| 835 width: 200px; | |
| 836 position: relative; | |
| 837 overflow: hidden; | |
| 838 } | |
| 839 | |
| 840 :host([hidden]) { | |
| 841 display: none !important; | |
| 842 } | |
| 843 | |
| 844 #progressContainer { | |
| 845 ; | |
| 846 position: relative; | |
| 847 } | |
| 848 | |
| 849 #progressContainer, .indeterminate::after { | |
| 850 height: var(--paper-progress-height, 4px); | |
| 851 } | |
| 852 | |
| 853 #primaryProgress, #secondaryProgress, .indeterminate::after { | |
| 854 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v
ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout
-fit_-_left); | |
| 855 } | |
| 856 | |
| 857 #progressContainer, .indeterminate::after { | |
| 858 background: var(--paper-progress-container-color,var(--google-grey-300)); | |
| 859 } | |
| 860 | |
| 861 :host(.transiting) #primaryProgress, :host(.transiting) #secondaryProgress { | |
| 862 -webkit-transition-property: -webkit-transform; | |
| 863 transition-property: transform; | |
| 864 | |
| 865 | |
| 866 -webkit-transition-duration: var(--paper-progress-transition-duration, 0
.08s); | |
| 867 transition-duration: var(--paper-progress-transition-duration, 0.08s); | |
| 868 | |
| 869 | |
| 870 -webkit-transition-timing-function: var(--paper-progress-transition-timi
ng-function, ease); | |
| 871 transition-timing-function: var(--paper-progress-transition-timing-funct
ion, ease); | |
| 872 | |
| 873 | |
| 874 -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); | |
| 875 transition-delay: var(--paper-progress-transition-delay, 0s); | |
| 876 } | |
| 877 | |
| 878 #primaryProgress, #secondaryProgress { | |
| 879 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v
ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout
-fit_-_left); | |
| 880 -webkit-transform-origin: left center; | |
| 881 transform-origin: left center; | |
| 882 -webkit-transform: scaleX(0); | |
| 883 transform: scaleX(0); | |
| 884 will-change: transform; | |
| 885 } | |
| 886 | |
| 887 #primaryProgress { | |
| 888 background: var(--paper-progress-active-color,var(--google-green-500)); | |
| 889 } | |
| 890 | |
| 891 #secondaryProgress { | |
| 892 background: var(--paper-progress-secondary-color,var(--google-green-100)); | |
| 893 } | |
| 894 | |
| 895 :host([disabled]) #primaryProgress { | |
| 896 background: var(--paper-progress-disabled-active-color,var(--google-grey-500))
; | |
| 897 } | |
| 898 | |
| 899 :host([disabled]) #secondaryProgress { | |
| 900 background: var(--paper-progress-disabled-secondary-color,var(--google-grey-30
0)); | |
| 901 } | |
| 902 | |
| 903 :host(:not([disabled])) #primaryProgress.indeterminate { | |
| 904 -webkit-transform-origin: right center; | |
| 905 transform-origin: right center; | |
| 906 -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-
cycle-duration, 2s) linear infinite; | |
| 907 animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-du
ration, 2s) linear infinite; | |
| 908 } | |
| 909 | |
| 910 :host(:not([disabled])) #primaryProgress.indeterminate::after { | |
| 911 content: ""; | |
| 912 -webkit-transform-origin: center center; | |
| 913 transform-origin: center center; | |
| 914 | |
| 915 -webkit-animation: indeterminate-splitter var(--paper-progress-indetermi
nate-cycle-duration, 2s) linear infinite; | |
| 916 animation: indeterminate-splitter var(--paper-progress-indeterminate-cyc
le-duration, 2s) linear infinite; | |
| 917 } | |
| 918 | |
| 919 @-webkit-keyframes indeterminate-bar { | |
| 920 0% { | |
| 921 -webkit-transform: scaleX(1) translateX(-100%); | |
| 922 } | |
| 923 | |
| 924 50% { | |
| 925 -webkit-transform: scaleX(1) translateX(0%); | |
| 926 } | |
| 927 | |
| 928 75% { | |
| 929 -webkit-transform: scaleX(1) translateX(0%); | |
| 930 -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91); | |
| 931 } | |
| 932 | |
| 933 100% { | |
| 934 -webkit-transform: scaleX(0) translateX(0%); | |
| 935 } | |
| 936 | |
| 937 } | |
| 938 | |
| 939 @-webkit-keyframes indeterminate-splitter { | |
| 940 0% { | |
| 941 -webkit-transform: scaleX(.75) translateX(-125%); | |
| 942 } | |
| 943 | |
| 944 30% { | |
| 945 -webkit-transform: scaleX(.75) translateX(-125%); | |
| 946 -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8); | |
| 947 } | |
| 948 | |
| 949 90% { | |
| 950 -webkit-transform: scaleX(.75) translateX(125%); | |
| 951 } | |
| 952 | |
| 953 100% { | |
| 954 -webkit-transform: scaleX(.75) translateX(125%); | |
| 955 } | |
| 956 | |
| 957 } | |
| 958 | |
| 959 @keyframes indeterminate-bar { | |
| 960 0% { | |
| 961 transform: scaleX(1) translateX(-100%); | |
| 962 } | |
| 963 | |
| 964 50% { | |
| 965 transform: scaleX(1) translateX(0%); | |
| 966 } | |
| 967 | |
| 968 75% { | |
| 969 transform: scaleX(1) translateX(0%); | |
| 970 animation-timing-function: cubic-bezier(.28,.62,.37,.91); | |
| 971 } | |
| 972 | |
| 973 100% { | |
| 974 transform: scaleX(0) translateX(0%); | |
| 975 } | |
| 976 | |
| 977 } | |
| 978 | |
| 979 @keyframes indeterminate-splitter { | |
| 980 0% { | |
| 981 transform: scaleX(.75) translateX(-125%); | |
| 982 } | |
| 983 | |
| 984 30% { | |
| 985 transform: scaleX(.75) translateX(-125%); | |
| 986 animation-timing-function: cubic-bezier(.42,0,.6,.8); | |
| 987 } | |
| 988 | |
| 989 90% { | |
| 990 transform: scaleX(.75) translateX(125%); | |
| 991 } | |
| 992 | |
| 993 100% { | |
| 994 transform: scaleX(.75) translateX(125%); | |
| 995 } | |
| 996 | |
| 997 } | |
| 998 | |
| 999 </style> | |
| 1000 | |
| 1001 <div id="progressContainer"> | |
| 1002 <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRat
io)]]"></div> | |
| 1003 <div id="primaryProgress"></div> | |
| 1004 </div> | |
| 1005 </template> | |
| 1006 </dom-module> | |
| 1007 | |
| 1008 <iron-iconset-svg name="downloads" size="24"> | |
| 1009 <svg> | |
| 1010 <defs> | |
| 1011 | |
| 1012 <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> | |
| 1013 </defs> | |
| 1014 </svg> | |
| 1015 </iron-iconset-svg> | |
| 1016 <dom-module id="downloads-item" assetpath="chrome://downloads/" css-build="shado
w"> | |
| 1017 <template> | |
| 1018 <style scope="downloads-item">[is='action-link'] { | |
| 1019 cursor: pointer; | |
| 1020 display: inline-block; | |
| 1021 text-decoration: none; | |
| 1022 } | |
| 1023 | |
| 1024 [is='action-link']:hover { | |
| 1025 text-decoration: underline; | |
| 1026 } | |
| 1027 | |
| 1028 [is='action-link']:active { | |
| 1029 color: rgb(5, 37, 119); | |
| 1030 text-decoration: underline; | |
| 1031 } | |
| 1032 | |
| 1033 [is='action-link'][disabled] { | |
| 1034 color: #999; | |
| 1035 cursor: default; | |
| 1036 pointer-events: none; | |
| 1037 text-decoration: none; | |
| 1038 } | |
| 1039 | |
| 1040 [is='action-link'].no-outline { | |
| 1041 outline: none; | |
| 1042 } | |
| 1043 | |
| 1044 :host { | |
| 1045 display: flex; | |
| 1046 flex-direction: column; | |
| 1047 } | |
| 1048 | |
| 1049 [hidden] { | |
| 1050 display: none !important; | |
| 1051 } | |
| 1052 | |
| 1053 paper-button { | |
| 1054 font-weight: 500; | |
| 1055 margin: 0; | |
| 1056 min-width: auto; | |
| 1057 } | |
| 1058 | |
| 1059 #date { | |
| 1060 color: var(--paper-grey-700); | |
| 1061 font-size: 100%; | |
| 1062 font-weight: 500; | |
| 1063 margin: 24px auto 10px; | |
| 1064 width: var(--downloads-card-width); | |
| 1065 } | |
| 1066 | |
| 1067 #date:empty { | |
| 1068 display: none; | |
| 1069 } | |
| 1070 | |
| 1071 #content { | |
| 1072 background: white; | |
| 1073 border-radius: 2px; | |
| 1074 display: flex; | |
| 1075 flex: none; | |
| 1076 margin: 6px auto; | |
| 1077 min-height: 103px; | |
| 1078 position: relative; | |
| 1079 width: var(--downloads-card-width); | |
| 1080 } | |
| 1081 | |
| 1082 #content.is-active { | |
| 1083 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); | |
| 1084 } | |
| 1085 | |
| 1086 #content:not(.is-active) { | |
| 1087 background: rgba(255, 255, 255, .6); | |
| 1088 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .03), | |
| 1089 0 1px 4px 0 rgba(0, 0, 0, .048), | |
| 1090 0 3px 1px -2px rgba(0, 0, 0, .12); | |
| 1091 } | |
| 1092 | |
| 1093 #details { | |
| 1094 -webkit-border-start: 1px #d8d8d8 solid; | |
| 1095 -webkit-padding-end: 16px; | |
| 1096 -webkit-padding-start: var(--downloads-card-margin); | |
| 1097 display: flex; | |
| 1098 flex: 1; | |
| 1099 flex-direction: column; | |
| 1100 min-width: 0; | |
| 1101 padding-bottom: 12px; | |
| 1102 padding-top: 16px; | |
| 1103 } | |
| 1104 | |
| 1105 #content:not(.is-active) #details { | |
| 1106 color: rgba(27, 27, 27, .6); | |
| 1107 } | |
| 1108 | |
| 1109 #content:not(.is-active) #name { | |
| 1110 text-decoration: line-through; | |
| 1111 } | |
| 1112 | |
| 1113 .icon-wrapper { | |
| 1114 align-self: center; | |
| 1115 flex: none; | |
| 1116 justify-content: center; | |
| 1117 margin: 0 24px; | |
| 1118 } | |
| 1119 | |
| 1120 .icon { | |
| 1121 height: 32px; | |
| 1122 width: 32px; | |
| 1123 } | |
| 1124 | |
| 1125 #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper { | |
| 1126 align-self: flex-start; | |
| 1127 padding-top: 16px; | |
| 1128 } | |
| 1129 | |
| 1130 #content:not(.is-active) .icon { | |
| 1131 -webkit-filter: grayscale(100%); | |
| 1132 opacity: .5; | |
| 1133 } | |
| 1134 | |
| 1135 #danger-icon { | |
| 1136 height: 32px; | |
| 1137 width: 32px; | |
| 1138 } | |
| 1139 | |
| 1140 #danger-icon[icon='cr:warning'], .dangerous #description { | |
| 1141 color: var(--google-red-700); | |
| 1142 } | |
| 1143 | |
| 1144 #name, #file-link, #url { | |
| 1145 max-width: 100%; | |
| 1146 } | |
| 1147 | |
| 1148 #name, #file-link { | |
| 1149 font-weight: 500; | |
| 1150 word-break: break-all; | |
| 1151 } | |
| 1152 | |
| 1153 #name { | |
| 1154 -webkit-margin-end: 12px; | |
| 1155 } | |
| 1156 | |
| 1157 #pause-or-resume, .is-active :-webkit-any(#name, #file-link, #show) { | |
| 1158 color: rgb(51, 103, 214); | |
| 1159 } | |
| 1160 | |
| 1161 #tag { | |
| 1162 color: #5a5a5a; | |
| 1163 font-weight: 500; | |
| 1164 } | |
| 1165 | |
| 1166 #url { | |
| 1167 color: inherit; | |
| 1168 margin-top: 6px; | |
| 1169 min-height: 0; | |
| 1170 overflow: hidden; | |
| 1171 text-decoration: none; | |
| 1172 text-overflow: ellipsis; | |
| 1173 white-space: nowrap; | |
| 1174 } | |
| 1175 | |
| 1176 .is-active #url { | |
| 1177 color: var(--paper-grey-600); | |
| 1178 } | |
| 1179 | |
| 1180 #progress, #description:not(:empty), .controls { | |
| 1181 margin-top: 16px; | |
| 1182 } | |
| 1183 | |
| 1184 .is-active #description { | |
| 1185 color: #616161; | |
| 1186 } | |
| 1187 | |
| 1188 #progress { | |
| 1189 --paper-progress-active-color: rgb(54, 126, 237); | |
| 1190 --paper-progress-container-color: rgb(223, 222, 223); | |
| 1191 width: auto; | |
| 1192 } | |
| 1193 | |
| 1194 .controls { | |
| 1195 -webkit-margin-start: -.57em; | |
| 1196 } | |
| 1197 | |
| 1198 #cancel, #retry, .keep, .discard { | |
| 1199 color: #5a5a5a; | |
| 1200 } | |
| 1201 | |
| 1202 #show { | |
| 1203 margin: .7em .57em; | |
| 1204 } | |
| 1205 | |
| 1206 #controlled-by { | |
| 1207 -webkit-margin-start: 8px; | |
| 1208 } | |
| 1209 | |
| 1210 #controlled-by, #controlled-by a { | |
| 1211 color: #5a5a5a; | |
| 1212 } | |
| 1213 | |
| 1214 .is-active #controlled-by { | |
| 1215 color: #333; | |
| 1216 } | |
| 1217 | |
| 1218 .is-active #controlled-by a { | |
| 1219 color: rgb(51, 103, 214); | |
| 1220 } | |
| 1221 | |
| 1222 #remove-wrapper { | |
| 1223 align-self: flex-start; | |
| 1224 margin: 0; | |
| 1225 } | |
| 1226 | |
| 1227 #remove { | |
| 1228 color: var(--paper-grey-700); | |
| 1229 font-size: 16px; | |
| 1230 height: 32px; | |
| 1231 line-height: 17px; | |
| 1232 width: 32px; | |
| 1233 } | |
| 1234 | |
| 1235 #incognito { | |
| 1236 bottom: 20px; | |
| 1237 content: -webkit-image-set( | |
| 1238 url("chrome://downloads/1x/incognito_marker.png") 1x, | |
| 1239 url("chrome://downloads/2x/incognito_marker.png") 2x); | |
| 1240 position: absolute; | |
| 1241 right: 10px; | |
| 1242 } | |
| 1243 | |
| 1244 </style> | |
| 1245 | |
| 1246 <h3 id="date">[[computeDate_(data.hideDate, data.since_string, data.date_str
ing)]]</h3> | |
| 1247 | |
| 1248 <div id="content" on-dragstart="onDragStart_" class$="[[computeClass_(isActi
ve_, isDangerous_, showProgress_)]]"> | |
| 1249 <div id="file-icon-wrapper" class="icon-wrapper"> | |
| 1250 <img class="icon" id="file-icon" alt="" hidden="[[isDangerous_]]"> | |
| 1251 <iron-icon id="danger-icon" icon$="[[computeDangerIcon_(isDangerous_, da
ta.danger_type)]]" hidden="[[!isDangerous_]]"></iron-icon> | |
| 1252 </div> | |
| 1253 | |
| 1254 <div id="details"> | |
| 1255 <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> | |
| 1256 <span id="tag">[[computeTag_(data.state, data.last_reason_text, data.f
ile_externally_removed)]]</span> | |
| 1257 </div> | |
| 1258 | |
| 1259 <a id="url" target="_blank">[[chopUrl_(data.url)]]</a> | |
| 1260 | |
| 1261 <div id="description">[[computeDescription_(data.state, data.danger_type
, data.file_name, data.progress_status_text)]]</div> | |
| 1262 | |
| 1263 <template is="dom-if" if="[[showProgress_]]"> | |
| 1264 <paper-progress id="progress" indeterminate="[[isIndeterminate_(data.p
ercent)]]" value="[[data.percent]]"></paper-progress> | |
| 1265 </template> | |
| 1266 | |
| 1267 <div id="safe" class="controls" hidden="[[isDangerous_]]"> | |
| 1268 <a is="action-link" id="show" on-tap="onShowTap_" hidden="[[!completel
yOnDisk_]]">$i18n{controlShowInFolder}</a> | |
| 1269 <template is="dom-if" if="[[data.retry]]"> | |
| 1270 <paper-button id="retry" on-tap="onRetryTap_"> | |
| 1271 $i18n{controlRetry} | |
| 1272 </paper-button> | |
| 1273 </template> | |
| 1274 <template is="dom-if" if="[[pauseOrResumeText_]]"> | |
| 1275 <paper-button id="pause-or-resume" on-tap="onPauseOrResumeTap_"> | |
| 1276 [[pauseOrResumeText_]] | |
| 1277 </paper-button> | |
| 1278 </template> | |
| 1279 <template is="dom-if" if="[[showCancel_]]"> | |
| 1280 <paper-button id="cancel" on-tap="onCancelTap_"> | |
| 1281 $i18n{controlCancel} | |
| 1282 </paper-button> | |
| 1283 </template> | |
| 1284 <span id="controlled-by"></span> | |
| 1285 </div> | |
| 1286 | |
| 1287 <template is="dom-if" if="[[isDangerous_]]"> | |
| 1288 <div id="dangerous" class="controls"> | |
| 1289 | |
| 1290 <template is="dom-if" if="[[!isMalware_]]"> | |
| 1291 <paper-button id="discard" on-tap="onDiscardDangerousTap_" class="
discard">$i18n{dangerDiscard}</paper-button> | |
| 1292 <paper-button id="save" on-tap="onSaveDangerousTap_" class="keep">
$i18n{dangerSave}</paper-button> | |
| 1293 </template> | |
| 1294 | |
| 1295 | |
| 1296 <template is="dom-if" if="[[isMalware_]]"> | |
| 1297 <paper-button id="danger-remove" on-tap="onDiscardDangerousTap_" c
lass="discard">$i18n{controlRemoveFromList}</paper-button> | |
| 1298 <paper-button id="restore" on-tap="onSaveDangerousTap_" class="kee
p">$i18n{dangerRestore}</paper-button> | |
| 1299 </template> | |
| 1300 </div> | |
| 1301 </template> | |
| 1302 </div> | |
| 1303 | |
| 1304 <div id="remove-wrapper" class="icon-wrapper"> | |
| 1305 <button is="paper-icon-button-light" id="remove" title="$i18n{controlRem
oveFromList}" style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]" on-tap
="onRemoveTap_">✕</button> | |
| 1306 </div> | |
| 1307 | |
| 1308 <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]"> | |
| 1309 </div> | |
| 1310 </div> | |
| 1311 | |
| 1312 </template> | |
| 1313 | |
| 1314 </dom-module> | |
| 1315 | |
| 1316 | |
| 1317 | |
| 1318 | |
| 1319 <style is="custom-style" css-build="shadow">html { | |
| 1320 --primary-text-color: var(--light-theme-text-color); | |
| 1321 --primary-background-color: var(--light-theme-background-color); | |
| 1322 --secondary-text-color: var(--light-theme-secondary-color); | |
| 1323 --disabled-text-color: var(--light-theme-disabled-color); | |
| 1324 --divider-color: var(--light-theme-divider-color); | |
| 1325 --error-color: var(--paper-deep-orange-a700); | |
| 1326 | |
| 1327 | |
| 1328 --primary-color: var(--paper-indigo-500); | |
| 1329 --light-primary-color: var(--paper-indigo-100); | |
| 1330 --dark-primary-color: var(--paper-indigo-700); | |
| 1331 | |
| 1332 --accent-color: var(--paper-pink-a200); | |
| 1333 --light-accent-color: var(--paper-pink-a100); | |
| 1334 --dark-accent-color: var(--paper-pink-a400); | |
| 1335 | |
| 1336 | |
| 1337 | |
| 1338 --light-theme-background-color: #ffffff; | |
| 1339 --light-theme-base-color: #000000; | |
| 1340 --light-theme-text-color: var(--paper-grey-900); | |
| 1341 --light-theme-secondary-color: #737373; | |
| 1342 --light-theme-disabled-color: #9b9b9b; | |
| 1343 --light-theme-divider-color: #dbdbdb; | |
| 1344 | |
| 1345 | |
| 1346 --dark-theme-background-color: var(--paper-grey-900); | |
| 1347 --dark-theme-base-color: #ffffff; | |
| 1348 --dark-theme-text-color: #ffffff; | |
| 1349 --dark-theme-secondary-color: #bcbcbc; | |
| 1350 --dark-theme-disabled-color: #646464; | |
| 1351 --dark-theme-divider-color: #3c3c3c; | |
| 1352 | |
| 1353 | |
| 1354 --text-primary-color: var(--dark-theme-text-color); | |
| 1355 --default-primary-color: var(--primary-color); | |
| 1356 } | |
| 1357 | |
| 1358 </style><style> | |
| 1359 /* Copyright 2015 The Chromium Authors. All rights reserved. | |
| 1360 * Use of this source code is governed by a BSD-style license that can be | |
| 1361 * found in the LICENSE file. */ | |
| 1362 | |
| 1363 <if expr="not chromeos and not is_android"> | |
| 1364 @font-face { | |
| 1365 font-family: 'Roboto'; | |
| 1366 font-style: normal; | |
| 1367 font-weight: 400; | |
| 1368 src: local('Roboto'), local('Roboto-Regular'), | |
| 1369 url("chrome://resources/roboto/roboto-regular.woff2") format('woff2'); | |
| 1370 } | |
| 1371 | |
| 1372 @font-face { | |
| 1373 font-family: 'Roboto'; | |
| 1374 font-style: normal; | |
| 1375 font-weight: 500; | |
| 1376 src: local('Roboto Medium'), local('Roboto-Medium'), | |
| 1377 url("chrome://resources/roboto/roboto-medium.woff2") format('woff2'); | |
| 1378 } | |
| 1379 | |
| 1380 @font-face { | |
| 1381 font-family: 'Roboto'; | |
| 1382 font-style: normal; | |
| 1383 font-weight: 700; | |
| 1384 src: local('Roboto Bold'), local('Roboto-Bold'), | |
| 1385 url("chrome://resources/roboto/roboto-bold.woff2") format('woff2'); | |
| 1386 } | |
| 1387 </if> | |
| 1388 | |
| 1389 </style> | |
| 1390 <style is="custom-style" css-build="shadow">html { | |
| 1391 --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif; --paper
-font-common-base_-_-webkit-font-smoothing: antialiased;; | |
| 1392 | |
| 1393 --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo',
monospace; --paper-font-common-code_-_-webkit-font-smoothing: antialiased;; | |
| 1394 | |
| 1395 --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;
; | |
| 1396 | |
| 1397 --paper-font-common-nowrap_-_white-space: nowrap; --paper-font-common-nowra
p_-_overflow: hidden; --paper-font-common-nowrap_-_text-overflow: ellipsis;; | |
| 1398 | |
| 1399 | |
| 1400 | |
| 1401 --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-fa
mily); --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-
base_-_-webkit-font-smoothing); --paper-font-display4_-_white-space: var(--pape
r-font-common-nowrap_-_white-space); --paper-font-display4_-_overflow: var(--pa
per-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_-_lette
r-spacing: -.044em; --paper-font-display4_-_line-height: 120px;; | |
| 1402 | |
| 1403 --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-fa
mily); --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-
base_-_-webkit-font-smoothing); --paper-font-display3_-_white-space: var(--pape
r-font-common-nowrap_-_white-space); --paper-font-display3_-_overflow: var(--pa
per-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;; | |
| 1404 | |
| 1405 --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-fa
mily); --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-
base_-_-webkit-font-smoothing); --paper-font-display2_-_font-size: 45px; --pape
r-font-display2_-_font-weight: 400; --paper-font-display2_-_letter-spacing: -.
018em; --paper-font-display2_-_line-height: 48px;; | |
| 1406 | |
| 1407 --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-fa
mily); --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-
base_-_-webkit-font-smoothing); --paper-font-display1_-_font-size: 34px; --pape
r-font-display1_-_font-weight: 400; --paper-font-display1_-_letter-spacing: -.
01em; --paper-font-display1_-_line-height: 40px;; | |
| 1408 | |
| 1409 --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-fa
mily); --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-
base_-_-webkit-font-smoothing); --paper-font-headline_-_font-size: 24px; --pape
r-font-headline_-_font-weight: 400; --paper-font-headline_-_letter-spacing: -.
012em; --paper-font-headline_-_line-height: 32px;; | |
| 1410 | |
| 1411 --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-famil
y); --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-
_-webkit-font-smoothing); --paper-font-title_-_white-space: var(--paper-font-co
mmon-nowrap_-_white-space); --paper-font-title_-_overflow: var(--paper-font-com
mon-nowrap_-_overflow); --paper-font-title_-_text-overflow: var(--paper-font-co
mmon-nowrap_-_text-overflow); --paper-font-title_-_font-size: 20px; --paper-fon
t-title_-_font-weight: 500; --paper-font-title_-_line-height: 28px;; | |
| 1412 | |
| 1413 --paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-fam
ily); --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-ba
se_-_-webkit-font-smoothing); --paper-font-subhead_-_font-size: 16px; --paper-f
ont-subhead_-_font-weight: 400; --paper-font-subhead_-_line-height: 24px;; | |
| 1414 | |
| 1415 --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-famil
y); --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_-
_-webkit-font-smoothing); --paper-font-body2_-_font-size: 14px; --paper-font-bo
dy2_-_font-weight: 500; --paper-font-body2_-_line-height: 24px;; | |
| 1416 | |
| 1417 --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-famil
y); --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_-
_-webkit-font-smoothing); --paper-font-body1_-_font-size: 14px; --paper-font-bo
dy1_-_font-weight: 400; --paper-font-body1_-_line-height: 20px;; | |
| 1418 | |
| 1419 --paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-fam
ily); --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-ba
se_-_-webkit-font-smoothing); --paper-font-caption_-_white-space: var(--paper-f
ont-common-nowrap_-_white-space); --paper-font-caption_-_overflow: var(--paper-
font-common-nowrap_-_overflow); --paper-font-caption_-_text-overflow: var(--pap
er-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;; | |
| 1420 | |
| 1421 --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-commo
n-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;; | |
| 1422 | |
| 1423 --paper-font-button_-_font-family: var(--paper-font-common-base_-_font-fami
ly); --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-fo
nt-common-nowrap_-_text-overflow); --paper-font-button_-_font-size: 14px; --pap
er-font-button_-_font-weight: 500; --paper-font-button_-_letter-spacing: 0.018
em; --paper-font-button_-_line-height: 24px; --paper-font-button_-_text-transfo
rm: uppercase;; | |
| 1424 | |
| 1425 --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-famil
y); --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_-
_-webkit-font-smoothing); --paper-font-code2_-_font-size: 14px; --paper-font-co
de2_-_font-weight: 700; --paper-font-code2_-_line-height: 20px;; | |
| 1426 | |
| 1427 --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-famil
y); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_-
_-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-co
de1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;; | |
| 1428 } | |
| 1429 | |
| 1430 </style><dom-module id="paper-item-shared-styles" assetpath="chrome://resources/
polymer/v1_0/paper-item/" css-build="shadow"> | |
| 1431 <template> | |
| 1432 <style scope="paper-item-shared-styles">:host, .paper-item { | |
| 1433 display: block; | |
| 1434 position: relative; | |
| 1435 min-height: var(--paper-item-min-height, 48px); | |
| 1436 padding: 0px 16px; | |
| 1437 } | |
| 1438 | |
| 1439 .paper-item { | |
| 1440 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); | |
| 1441 border:none; | |
| 1442 outline: none; | |
| 1443 background: white; | |
| 1444 width: 100%; | |
| 1445 text-align: left; | |
| 1446 } | |
| 1447 | |
| 1448 :host([hidden]), .paper-item[hidden] { | |
| 1449 display: none !important; | |
| 1450 } | |
| 1451 | |
| 1452 :host(.iron-selected), .paper-item.iron-selected { | |
| 1453 font-weight: var(--paper-item-selected-weight, bold); | |
| 1454 | |
| 1455 ; | |
| 1456 } | |
| 1457 | |
| 1458 :host([disabled]), .paper-item[disabled] { | |
| 1459 color: var(--paper-item-disabled-color,var(--disabled-text-color)); | |
| 1460 | |
| 1461 ; | |
| 1462 } | |
| 1463 | |
| 1464 :host(:focus), .paper-item:focus { | |
| 1465 position: relative; | |
| 1466 outline: 0; | |
| 1467 | |
| 1468 ; | |
| 1469 } | |
| 1470 | |
| 1471 :host(:focus):before, .paper-item:focus:before { | |
| 1472 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v
ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout
-fit_-_left); | |
| 1473 | |
| 1474 background: currentColor; | |
| 1475 content: ''; | |
| 1476 opacity: var(--dark-divider-opacity); | |
| 1477 pointer-events: none; | |
| 1478 | |
| 1479 ; | |
| 1480 } | |
| 1481 | |
| 1482 </style> | |
| 1483 </template> | |
| 1484 </dom-module> | |
| 1485 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite
m/" css-build="shadow"> | |
| 1486 <template> | |
| 1487 | |
| 1488 <style scope="paper-item">:host, .paper-item { | |
| 1489 display: block; | |
| 1490 position: relative; | |
| 1491 min-height: var(--paper-item-min-height, 48px); | |
| 1492 padding: 0px 16px; | |
| 1493 } | |
| 1494 | |
| 1495 .paper-item { | |
| 1496 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); | |
| 1497 border:none; | |
| 1498 outline: none; | |
| 1499 background: white; | |
| 1500 width: 100%; | |
| 1501 text-align: left; | |
| 1502 } | |
| 1503 | |
| 1504 :host([hidden]), .paper-item[hidden] { | |
| 1505 display: none !important; | |
| 1506 } | |
| 1507 | |
| 1508 :host(.iron-selected), .paper-item.iron-selected { | |
| 1509 font-weight: var(--paper-item-selected-weight, bold); | |
| 1510 | |
| 1511 ; | |
| 1512 } | |
| 1513 | |
| 1514 :host([disabled]), .paper-item[disabled] { | |
| 1515 color: var(--paper-item-disabled-color,var(--disabled-text-color)); | |
| 1516 | |
| 1517 ; | |
| 1518 } | |
| 1519 | |
| 1520 :host(:focus), .paper-item:focus { | |
| 1521 position: relative; | |
| 1522 outline: 0; | |
| 1523 | |
| 1524 ; | |
| 1525 } | |
| 1526 | |
| 1527 :host(:focus):before, .paper-item:focus:before { | |
| 1528 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v
ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout
-fit_-_left); | |
| 1529 | |
| 1530 background: currentColor; | |
| 1531 content: ''; | |
| 1532 opacity: var(--dark-divider-opacity); | |
| 1533 pointer-events: none; | |
| 1534 | |
| 1535 ; | |
| 1536 } | |
| 1537 | |
| 1538 :host { | |
| 1539 display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-
horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizonta
l_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-dire
ction); | |
| 1540 -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-ite
ms: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center
_-_align-items); | |
| 1541 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoot
hing: 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); | |
| 1542 | |
| 1543 ; | |
| 1544 } | |
| 1545 | |
| 1546 </style> | |
| 1547 | |
| 1548 <content></content> | |
| 1549 </template> | |
| 1550 | |
| 1551 </dom-module> | |
| 1552 <dom-module id="paper-menu-shared-styles" assetpath="chrome://resources/polymer/
v1_0/paper-menu/" css-build="shadow"> | |
| 1553 <template> | |
| 1554 <style scope="paper-menu-shared-styles">.selectable-content > ::content > .i
ron-selected { | |
| 1555 font-weight: bold; | |
| 1556 | |
| 1557 font-weight: var(--paper-menu-selected-item_-_font-weight, bold); | |
| 1558 } | |
| 1559 | |
| 1560 .selectable-content > ::content > [disabled] { | |
| 1561 color: var(--paper-menu-disabled-color,var(--disabled-text-color)); | |
| 1562 } | |
| 1563 | |
| 1564 .selectable-content > ::content > *:focus { | |
| 1565 position: relative; | |
| 1566 outline: 0; | |
| 1567 | |
| 1568 ; | |
| 1569 } | |
| 1570 | |
| 1571 .selectable-content > ::content > *:focus:after { | |
| 1572 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v
ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout
-fit_-_left); | |
| 1573 background: currentColor; | |
| 1574 opacity: var(--dark-divider-opacity); | |
| 1575 content: ''; | |
| 1576 pointer-events: none; | |
| 1577 | |
| 1578 ; | |
| 1579 } | |
| 1580 | |
| 1581 .selectable-content > ::content > *[colored]:focus:after { | |
| 1582 opacity: 0.26; | |
| 1583 } | |
| 1584 | |
| 1585 </style> | |
| 1586 </template> | |
| 1587 </dom-module> | |
| 1588 <dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-men
u/" css-build="shadow"> | |
| 1589 <template> | |
| 1590 | |
| 1591 <style scope="paper-menu">.selectable-content > ::content > .iron-selected { | |
| 1592 font-weight: bold; | |
| 1593 | |
| 1594 font-weight: var(--paper-menu-selected-item_-_font-weight, bold); | |
| 1595 } | |
| 1596 | |
| 1597 .selectable-content > ::content > [disabled] { | |
| 1598 color: var(--paper-menu-disabled-color,var(--disabled-text-color)); | |
| 1599 } | |
| 1600 | |
| 1601 .selectable-content > ::content > *:focus { | |
| 1602 position: relative; | |
| 1603 outline: 0; | |
| 1604 | |
| 1605 ; | |
| 1606 } | |
| 1607 | |
| 1608 .selectable-content > ::content > *:focus:after { | |
| 1609 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v
ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout
-fit_-_left); | |
| 1610 background: currentColor; | |
| 1611 opacity: var(--dark-divider-opacity); | |
| 1612 content: ''; | |
| 1613 pointer-events: none; | |
| 1614 | |
| 1615 ; | |
| 1616 } | |
| 1617 | |
| 1618 .selectable-content > ::content > *[colored]:focus:after { | |
| 1619 opacity: 0.26; | |
| 1620 } | |
| 1621 | |
| 1622 :host { | |
| 1623 display: block; | |
| 1624 padding: 8px 0; | |
| 1625 | |
| 1626 background: var(--paper-menu-background-color,var(--primary-background-c
olor)); | |
| 1627 color: var(--paper-menu-color,var(--primary-text-color)); | |
| 1628 | |
| 1629 ; | |
| 1630 } | |
| 1631 | |
| 1632 </style> | |
| 1633 | |
| 1634 <div class="selectable-content"> | |
| 1635 <content></content> | |
| 1636 </div> | |
| 1637 </template> | |
| 1638 | |
| 1639 </dom-module> | |
| 1640 <dom-module id="iron-overlay-backdrop" assetpath="" css-build="shadow"> | |
| 1641 | |
| 1642 <template> | |
| 1643 <style scope="iron-overlay-backdrop">:host { | |
| 1644 position: fixed; | |
| 1645 top: 0; | |
| 1646 left: 0; | |
| 1647 width: 100%; | |
| 1648 height: 100%; | |
| 1649 background-color: var(--iron-overlay-backdrop-background-color, #000); | |
| 1650 opacity: 0; | |
| 1651 transition: opacity 0.2s; | |
| 1652 pointer-events: none; | |
| 1653 ; | |
| 1654 } | |
| 1655 | |
| 1656 :host(.opened) { | |
| 1657 opacity: var(--iron-overlay-backdrop-opacity, 0.6); | |
| 1658 pointer-events: auto; | |
| 1659 ; | |
| 1660 } | |
| 1661 | |
| 1662 </style> | |
| 1663 | |
| 1664 <content></content> | |
| 1665 </template> | |
| 1666 | |
| 1667 </dom-module> | |
| 1668 | |
| 1669 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne
xt-lite.min.js"></script> | |
| 1670 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d
ropdown/" css-build="shadow"> | |
| 1671 <template> | |
| 1672 <style scope="iron-dropdown">:host { | |
| 1673 position: fixed; | |
| 1674 } | |
| 1675 | |
| 1676 #contentWrapper ::content > * { | |
| 1677 overflow: auto; | |
| 1678 } | |
| 1679 | |
| 1680 #contentWrapper.animating ::content > * { | |
| 1681 overflow: hidden; | |
| 1682 } | |
| 1683 | |
| 1684 </style> | |
| 1685 | |
| 1686 <div id="contentWrapper"> | |
| 1687 <content id="content" select=".dropdown-content"></content> | |
| 1688 </div> | |
| 1689 </template> | |
| 1690 | |
| 1691 </dom-module> | |
| 1692 <dom-module id="paper-menu-button" assetpath="chrome://resources/polymer/v1_0/pa
per-menu-button/" css-build="shadow"> | |
| 1693 <template> | |
| 1694 <style scope="paper-menu-button">:host { | |
| 1695 display: inline-block; | |
| 1696 position: relative; | |
| 1697 padding: 8px; | |
| 1698 outline: none; | |
| 1699 | |
| 1700 padding: var(--paper-menu-button_-_padding, 8px); | |
| 1701 } | |
| 1702 | |
| 1703 :host([disabled]) { | |
| 1704 cursor: auto; | |
| 1705 color: var(--disabled-text-color); | |
| 1706 | |
| 1707 ; | |
| 1708 } | |
| 1709 | |
| 1710 iron-dropdown { | |
| 1711 ; | |
| 1712 } | |
| 1713 | |
| 1714 .dropdown-content { | |
| 1715 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); | |
| 1716 | |
| 1717 position: relative; | |
| 1718 border-radius: 2px; | |
| 1719 background-color: var(--paper-menu-button-dropdown-background,var(--prim
ary-background-color)); | |
| 1720 | |
| 1721 ; | |
| 1722 } | |
| 1723 | |
| 1724 :host([vertical-align="top"]) .dropdown-content { | |
| 1725 margin-bottom: 20px; | |
| 1726 margin-top: -10px; | |
| 1727 top: 10px; | |
| 1728 } | |
| 1729 | |
| 1730 :host([vertical-align="bottom"]) .dropdown-content { | |
| 1731 bottom: 10px; | |
| 1732 margin-bottom: -10px; | |
| 1733 margin-top: 20px; | |
| 1734 } | |
| 1735 | |
| 1736 #trigger { | |
| 1737 cursor: pointer; | |
| 1738 } | |
| 1739 | |
| 1740 </style> | |
| 1741 | |
| 1742 <div id="trigger" on-tap="toggle"> | |
| 1743 <content select=".dropdown-trigger"></content> | |
| 1744 </div> | |
| 1745 | |
| 1746 <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizon
talAlign]]" vertical-align="[[verticalAlign]]" dynamic-align="[[dynamicAlign]]"
horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" no
-overlap="[[noOverlap]]" open-animation-config="[[openAnimationConfig]]" close-a
nimation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]" focu
s-target="[[_dropdownContent]]" allow-outside-scroll="[[allowOutsideScroll]]" re
store-focus-on-close="[[restoreFocusOnClose]]" on-iron-overlay-canceled="__onIro
nOverlayCanceled"> | |
| 1747 <div class="dropdown-content"> | |
| 1748 <content id="content" select=".dropdown-content"></content> | |
| 1749 </div> | |
| 1750 </iron-dropdown> | |
| 1751 </template> | |
| 1752 | |
| 1753 </dom-module> | |
| 1754 <dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/pa
per-icon-button/" css-build="shadow"> | |
| 1755 <template strip-whitespace=""> | |
| 1756 <style scope="paper-icon-button">:host { | |
| 1757 display: inline-block; | |
| 1758 position: relative; | |
| 1759 padding: 8px; | |
| 1760 outline: none; | |
| 1761 -webkit-user-select: none; | |
| 1762 -moz-user-select: none; | |
| 1763 -ms-user-select: none; | |
| 1764 user-select: none; | |
| 1765 cursor: pointer; | |
| 1766 z-index: 0; | |
| 1767 line-height: 1; | |
| 1768 | |
| 1769 width: 40px; | |
| 1770 height: 40px; | |
| 1771 | |
| 1772 | |
| 1773 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| 1774 -webkit-tap-highlight-color: transparent; | |
| 1775 | |
| 1776 | |
| 1777 box-sizing: border-box !important; | |
| 1778 | |
| 1779 height: var(--paper-icon-button_-_height, 40px); padding: var(--paper-ic
on-button_-_padding, 8px); width: var(--paper-icon-button_-_width, 40px); | |
| 1780 } | |
| 1781 | |
| 1782 :host #ink { | |
| 1783 color: var(--paper-icon-button-ink-color,var(--primary-text-color)); | |
| 1784 opacity: 0.6; | |
| 1785 } | |
| 1786 | |
| 1787 :host([disabled]) { | |
| 1788 color: var(--paper-icon-button-disabled-text,var(--disabled-text-color)); | |
| 1789 pointer-events: none; | |
| 1790 cursor: auto; | |
| 1791 | |
| 1792 ; | |
| 1793 } | |
| 1794 | |
| 1795 :host(:hover) { | |
| 1796 ; | |
| 1797 } | |
| 1798 | |
| 1799 iron-icon { | |
| 1800 --iron-icon-width: 100%; | |
| 1801 --iron-icon-height: 100%; | |
| 1802 } | |
| 1803 | |
| 1804 </style> | |
| 1805 | |
| 1806 <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-ico
n> | |
| 1807 </template> | |
| 1808 | |
| 1809 </dom-module> | |
| 1810 <dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0
/paper-spinner/" css-build="shadow"> | |
| 1811 <template> | |
| 1812 <style scope="paper-spinner-styles">:host { | |
| 1813 display: inline-block; | |
| 1814 position: relative; | |
| 1815 width: 28px; | |
| 1816 height: 28px; | |
| 1817 | |
| 1818 | |
| 1819 --paper-spinner-container-rotation-duration: 1568ms; | |
| 1820 | |
| 1821 | |
| 1822 --paper-spinner-expand-contract-duration: 1333ms; | |
| 1823 | |
| 1824 | |
| 1825 --paper-spinner-full-cycle-duration: 5332ms; | |
| 1826 | |
| 1827 | |
| 1828 --paper-spinner-cooldown-duration: 400ms; | |
| 1829 } | |
| 1830 | |
| 1831 #spinnerContainer { | |
| 1832 width: 100%; | |
| 1833 height: 100%; | |
| 1834 | |
| 1835 | |
| 1836 direction: ltr; | |
| 1837 } | |
| 1838 | |
| 1839 #spinnerContainer.active { | |
| 1840 -webkit-animation: container-rotate var(--paper-spinner-container-rotation-dur
ation) linear infinite; | |
| 1841 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite; | |
| 1842 } | |
| 1843 | |
| 1844 @-webkit-keyframes container-rotate { | |
| 1845 to { | |
| 1846 -webkit-transform: rotate(360deg) | |
| 1847 } | |
| 1848 | |
| 1849 } | |
| 1850 | |
| 1851 @keyframes container-rotate { | |
| 1852 to { | |
| 1853 transform: rotate(360deg) | |
| 1854 } | |
| 1855 | |
| 1856 } | |
| 1857 | |
| 1858 .spinner-layer { | |
| 1859 position: absolute; | |
| 1860 width: 100%; | |
| 1861 height: 100%; | |
| 1862 opacity: 0; | |
| 1863 white-space: nowrap; | |
| 1864 border-color: var(--paper-spinner-color,var(--google-blue-500)); | |
| 1865 } | |
| 1866 | |
| 1867 .layer-1 { | |
| 1868 border-color: var(--paper-spinner-layer-1-color,var(--google-blue-500)); | |
| 1869 } | |
| 1870 | |
| 1871 .layer-2 { | |
| 1872 border-color: var(--paper-spinner-layer-2-color,var(--google-red-500)); | |
| 1873 } | |
| 1874 | |
| 1875 .layer-3 { | |
| 1876 border-color: var(--paper-spinner-layer-3-color,var(--google-yellow-500)); | |
| 1877 } | |
| 1878 | |
| 1879 .layer-4 { | |
| 1880 border-color: var(--paper-spinner-layer-4-color,var(--google-green-500)); | |
| 1881 } | |
| 1882 | |
| 1883 .active .spinner-layer { | |
| 1884 -webkit-animation-name: fill-unfill-rotate; | |
| 1885 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); | |
| 1886 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 1887 -webkit-animation-iteration-count: infinite; | |
| 1888 animation-name: fill-unfill-rotate; | |
| 1889 animation-duration: var(--paper-spinner-full-cycle-duration); | |
| 1890 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 1891 animation-iteration-count: infinite; | |
| 1892 opacity: 1; | |
| 1893 } | |
| 1894 | |
| 1895 .active .spinner-layer.layer-1 { | |
| 1896 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; | |
| 1897 animation-name: fill-unfill-rotate, layer-1-fade-in-out; | |
| 1898 } | |
| 1899 | |
| 1900 .active .spinner-layer.layer-2 { | |
| 1901 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; | |
| 1902 animation-name: fill-unfill-rotate, layer-2-fade-in-out; | |
| 1903 } | |
| 1904 | |
| 1905 .active .spinner-layer.layer-3 { | |
| 1906 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; | |
| 1907 animation-name: fill-unfill-rotate, layer-3-fade-in-out; | |
| 1908 } | |
| 1909 | |
| 1910 .active .spinner-layer.layer-4 { | |
| 1911 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; | |
| 1912 animation-name: fill-unfill-rotate, layer-4-fade-in-out; | |
| 1913 } | |
| 1914 | |
| 1915 @-webkit-keyframes fill-unfill-rotate { | |
| 1916 12.5% { | |
| 1917 -webkit-transform: rotate(135deg) | |
| 1918 } | |
| 1919 | |
| 1920 25% { | |
| 1921 -webkit-transform: rotate(270deg) | |
| 1922 } | |
| 1923 | |
| 1924 37.5% { | |
| 1925 -webkit-transform: rotate(405deg) | |
| 1926 } | |
| 1927 | |
| 1928 50% { | |
| 1929 -webkit-transform: rotate(540deg) | |
| 1930 } | |
| 1931 | |
| 1932 62.5% { | |
| 1933 -webkit-transform: rotate(675deg) | |
| 1934 } | |
| 1935 | |
| 1936 75% { | |
| 1937 -webkit-transform: rotate(810deg) | |
| 1938 } | |
| 1939 | |
| 1940 87.5% { | |
| 1941 -webkit-transform: rotate(945deg) | |
| 1942 } | |
| 1943 | |
| 1944 to { | |
| 1945 -webkit-transform: rotate(1080deg) | |
| 1946 } | |
| 1947 | |
| 1948 } | |
| 1949 | |
| 1950 @keyframes fill-unfill-rotate { | |
| 1951 12.5% { | |
| 1952 transform: rotate(135deg) | |
| 1953 } | |
| 1954 | |
| 1955 25% { | |
| 1956 transform: rotate(270deg) | |
| 1957 } | |
| 1958 | |
| 1959 37.5% { | |
| 1960 transform: rotate(405deg) | |
| 1961 } | |
| 1962 | |
| 1963 50% { | |
| 1964 transform: rotate(540deg) | |
| 1965 } | |
| 1966 | |
| 1967 62.5% { | |
| 1968 transform: rotate(675deg) | |
| 1969 } | |
| 1970 | |
| 1971 75% { | |
| 1972 transform: rotate(810deg) | |
| 1973 } | |
| 1974 | |
| 1975 87.5% { | |
| 1976 transform: rotate(945deg) | |
| 1977 } | |
| 1978 | |
| 1979 to { | |
| 1980 transform: rotate(1080deg) | |
| 1981 } | |
| 1982 | |
| 1983 } | |
| 1984 | |
| 1985 @-webkit-keyframes layer-1-fade-in-out { | |
| 1986 0% { | |
| 1987 opacity: 1 | |
| 1988 } | |
| 1989 | |
| 1990 25% { | |
| 1991 opacity: 1 | |
| 1992 } | |
| 1993 | |
| 1994 26% { | |
| 1995 opacity: 0 | |
| 1996 } | |
| 1997 | |
| 1998 89% { | |
| 1999 opacity: 0 | |
| 2000 } | |
| 2001 | |
| 2002 90% { | |
| 2003 opacity: 1 | |
| 2004 } | |
| 2005 | |
| 2006 to { | |
| 2007 opacity: 1 | |
| 2008 } | |
| 2009 | |
| 2010 } | |
| 2011 | |
| 2012 @keyframes layer-1-fade-in-out { | |
| 2013 0% { | |
| 2014 opacity: 1 | |
| 2015 } | |
| 2016 | |
| 2017 25% { | |
| 2018 opacity: 1 | |
| 2019 } | |
| 2020 | |
| 2021 26% { | |
| 2022 opacity: 0 | |
| 2023 } | |
| 2024 | |
| 2025 89% { | |
| 2026 opacity: 0 | |
| 2027 } | |
| 2028 | |
| 2029 90% { | |
| 2030 opacity: 1 | |
| 2031 } | |
| 2032 | |
| 2033 to { | |
| 2034 opacity: 1 | |
| 2035 } | |
| 2036 | |
| 2037 } | |
| 2038 | |
| 2039 @-webkit-keyframes layer-2-fade-in-out { | |
| 2040 0% { | |
| 2041 opacity: 0 | |
| 2042 } | |
| 2043 | |
| 2044 15% { | |
| 2045 opacity: 0 | |
| 2046 } | |
| 2047 | |
| 2048 25% { | |
| 2049 opacity: 1 | |
| 2050 } | |
| 2051 | |
| 2052 50% { | |
| 2053 opacity: 1 | |
| 2054 } | |
| 2055 | |
| 2056 51% { | |
| 2057 opacity: 0 | |
| 2058 } | |
| 2059 | |
| 2060 to { | |
| 2061 opacity: 0 | |
| 2062 } | |
| 2063 | |
| 2064 } | |
| 2065 | |
| 2066 @keyframes layer-2-fade-in-out { | |
| 2067 0% { | |
| 2068 opacity: 0 | |
| 2069 } | |
| 2070 | |
| 2071 15% { | |
| 2072 opacity: 0 | |
| 2073 } | |
| 2074 | |
| 2075 25% { | |
| 2076 opacity: 1 | |
| 2077 } | |
| 2078 | |
| 2079 50% { | |
| 2080 opacity: 1 | |
| 2081 } | |
| 2082 | |
| 2083 51% { | |
| 2084 opacity: 0 | |
| 2085 } | |
| 2086 | |
| 2087 to { | |
| 2088 opacity: 0 | |
| 2089 } | |
| 2090 | |
| 2091 } | |
| 2092 | |
| 2093 @-webkit-keyframes layer-3-fade-in-out { | |
| 2094 0% { | |
| 2095 opacity: 0 | |
| 2096 } | |
| 2097 | |
| 2098 40% { | |
| 2099 opacity: 0 | |
| 2100 } | |
| 2101 | |
| 2102 50% { | |
| 2103 opacity: 1 | |
| 2104 } | |
| 2105 | |
| 2106 75% { | |
| 2107 opacity: 1 | |
| 2108 } | |
| 2109 | |
| 2110 76% { | |
| 2111 opacity: 0 | |
| 2112 } | |
| 2113 | |
| 2114 to { | |
| 2115 opacity: 0 | |
| 2116 } | |
| 2117 | |
| 2118 } | |
| 2119 | |
| 2120 @keyframes layer-3-fade-in-out { | |
| 2121 0% { | |
| 2122 opacity: 0 | |
| 2123 } | |
| 2124 | |
| 2125 40% { | |
| 2126 opacity: 0 | |
| 2127 } | |
| 2128 | |
| 2129 50% { | |
| 2130 opacity: 1 | |
| 2131 } | |
| 2132 | |
| 2133 75% { | |
| 2134 opacity: 1 | |
| 2135 } | |
| 2136 | |
| 2137 76% { | |
| 2138 opacity: 0 | |
| 2139 } | |
| 2140 | |
| 2141 to { | |
| 2142 opacity: 0 | |
| 2143 } | |
| 2144 | |
| 2145 } | |
| 2146 | |
| 2147 @-webkit-keyframes layer-4-fade-in-out { | |
| 2148 0% { | |
| 2149 opacity: 0 | |
| 2150 } | |
| 2151 | |
| 2152 65% { | |
| 2153 opacity: 0 | |
| 2154 } | |
| 2155 | |
| 2156 75% { | |
| 2157 opacity: 1 | |
| 2158 } | |
| 2159 | |
| 2160 90% { | |
| 2161 opacity: 1 | |
| 2162 } | |
| 2163 | |
| 2164 to { | |
| 2165 opacity: 0 | |
| 2166 } | |
| 2167 | |
| 2168 } | |
| 2169 | |
| 2170 @keyframes layer-4-fade-in-out { | |
| 2171 0% { | |
| 2172 opacity: 0 | |
| 2173 } | |
| 2174 | |
| 2175 65% { | |
| 2176 opacity: 0 | |
| 2177 } | |
| 2178 | |
| 2179 75% { | |
| 2180 opacity: 1 | |
| 2181 } | |
| 2182 | |
| 2183 90% { | |
| 2184 opacity: 1 | |
| 2185 } | |
| 2186 | |
| 2187 to { | |
| 2188 opacity: 0 | |
| 2189 } | |
| 2190 | |
| 2191 } | |
| 2192 | |
| 2193 .circle-clipper { | |
| 2194 display: inline-block; | |
| 2195 position: relative; | |
| 2196 width: 50%; | |
| 2197 height: 100%; | |
| 2198 overflow: hidden; | |
| 2199 border-color: inherit; | |
| 2200 } | |
| 2201 | |
| 2202 .spinner-layer::after { | |
| 2203 left: 45%; | |
| 2204 width: 10%; | |
| 2205 border-top-style: solid; | |
| 2206 } | |
| 2207 | |
| 2208 .spinner-layer::after, .circle-clipper::after { | |
| 2209 content: ''; | |
| 2210 box-sizing: border-box; | |
| 2211 position: absolute; | |
| 2212 top: 0; | |
| 2213 border-width: var(--paper-spinner-stroke-width, 3px); | |
| 2214 border-color: inherit; | |
| 2215 border-radius: 50%; | |
| 2216 } | |
| 2217 | |
| 2218 .circle-clipper::after { | |
| 2219 bottom: 0; | |
| 2220 width: 200%; | |
| 2221 border-style: solid; | |
| 2222 border-bottom-color: transparent !important; | |
| 2223 } | |
| 2224 | |
| 2225 .circle-clipper.left::after { | |
| 2226 left: 0; | |
| 2227 border-right-color: transparent !important; | |
| 2228 -webkit-transform: rotate(129deg); | |
| 2229 transform: rotate(129deg); | |
| 2230 } | |
| 2231 | |
| 2232 .circle-clipper.right::after { | |
| 2233 left: -100%; | |
| 2234 border-left-color: transparent !important; | |
| 2235 -webkit-transform: rotate(-129deg); | |
| 2236 transform: rotate(-129deg); | |
| 2237 } | |
| 2238 | |
| 2239 .active .gap-patch::after, .active .circle-clipper::after { | |
| 2240 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); | |
| 2241 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 2242 -webkit-animation-iteration-count: infinite; | |
| 2243 animation-duration: var(--paper-spinner-expand-contract-duration); | |
| 2244 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 2245 animation-iteration-count: infinite; | |
| 2246 } | |
| 2247 | |
| 2248 .active .circle-clipper.left::after { | |
| 2249 -webkit-animation-name: left-spin; | |
| 2250 animation-name: left-spin; | |
| 2251 } | |
| 2252 | |
| 2253 .active .circle-clipper.right::after { | |
| 2254 -webkit-animation-name: right-spin; | |
| 2255 animation-name: right-spin; | |
| 2256 } | |
| 2257 | |
| 2258 @-webkit-keyframes left-spin { | |
| 2259 0% { | |
| 2260 -webkit-transform: rotate(130deg) | |
| 2261 } | |
| 2262 | |
| 2263 50% { | |
| 2264 -webkit-transform: rotate(-5deg) | |
| 2265 } | |
| 2266 | |
| 2267 to { | |
| 2268 -webkit-transform: rotate(130deg) | |
| 2269 } | |
| 2270 | |
| 2271 } | |
| 2272 | |
| 2273 @keyframes left-spin { | |
| 2274 0% { | |
| 2275 transform: rotate(130deg) | |
| 2276 } | |
| 2277 | |
| 2278 50% { | |
| 2279 transform: rotate(-5deg) | |
| 2280 } | |
| 2281 | |
| 2282 to { | |
| 2283 transform: rotate(130deg) | |
| 2284 } | |
| 2285 | |
| 2286 } | |
| 2287 | |
| 2288 @-webkit-keyframes right-spin { | |
| 2289 0% { | |
| 2290 -webkit-transform: rotate(-130deg) | |
| 2291 } | |
| 2292 | |
| 2293 50% { | |
| 2294 -webkit-transform: rotate(5deg) | |
| 2295 } | |
| 2296 | |
| 2297 to { | |
| 2298 -webkit-transform: rotate(-130deg) | |
| 2299 } | |
| 2300 | |
| 2301 } | |
| 2302 | |
| 2303 @keyframes right-spin { | |
| 2304 0% { | |
| 2305 transform: rotate(-130deg) | |
| 2306 } | |
| 2307 | |
| 2308 50% { | |
| 2309 transform: rotate(5deg) | |
| 2310 } | |
| 2311 | |
| 2312 to { | |
| 2313 transform: rotate(-130deg) | |
| 2314 } | |
| 2315 | |
| 2316 } | |
| 2317 | |
| 2318 #spinnerContainer.cooldown { | |
| 2319 -webkit-animation: container-rotate var(--paper-spinner-container-rotation-dur
ation) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-be
zier(0.4, 0.0, 0.2, 1); | |
| 2320 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi
er(0.4, 0.0, 0.2, 1); | |
| 2321 } | |
| 2322 | |
| 2323 @-webkit-keyframes fade-out { | |
| 2324 0% { | |
| 2325 opacity: 1 | |
| 2326 } | |
| 2327 | |
| 2328 to { | |
| 2329 opacity: 0 | |
| 2330 } | |
| 2331 | |
| 2332 } | |
| 2333 | |
| 2334 @keyframes fade-out { | |
| 2335 0% { | |
| 2336 opacity: 1 | |
| 2337 } | |
| 2338 | |
| 2339 to { | |
| 2340 opacity: 0 | |
| 2341 } | |
| 2342 | |
| 2343 } | |
| 2344 | |
| 2345 </style> | |
| 2346 </template> | |
| 2347 </dom-module> | |
| 2348 <dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/p
aper-spinner/" css-build="shadow"> | |
| 2349 <template strip-whitespace=""> | |
| 2350 <style scope="paper-spinner-lite">:host { | |
| 2351 display: inline-block; | |
| 2352 position: relative; | |
| 2353 width: 28px; | |
| 2354 height: 28px; | |
| 2355 | |
| 2356 | |
| 2357 --paper-spinner-container-rotation-duration: 1568ms; | |
| 2358 | |
| 2359 | |
| 2360 --paper-spinner-expand-contract-duration: 1333ms; | |
| 2361 | |
| 2362 | |
| 2363 --paper-spinner-full-cycle-duration: 5332ms; | |
| 2364 | |
| 2365 | |
| 2366 --paper-spinner-cooldown-duration: 400ms; | |
| 2367 } | |
| 2368 | |
| 2369 #spinnerContainer { | |
| 2370 width: 100%; | |
| 2371 height: 100%; | |
| 2372 | |
| 2373 | |
| 2374 direction: ltr; | |
| 2375 } | |
| 2376 | |
| 2377 #spinnerContainer.active { | |
| 2378 -webkit-animation: container-rotate var(--paper-spinner-container-rotation-dur
ation) linear infinite; | |
| 2379 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite; | |
| 2380 } | |
| 2381 | |
| 2382 @-webkit-keyframes container-rotate { | |
| 2383 to { | |
| 2384 -webkit-transform: rotate(360deg) | |
| 2385 } | |
| 2386 | |
| 2387 } | |
| 2388 | |
| 2389 @keyframes container-rotate { | |
| 2390 to { | |
| 2391 transform: rotate(360deg) | |
| 2392 } | |
| 2393 | |
| 2394 } | |
| 2395 | |
| 2396 .spinner-layer { | |
| 2397 position: absolute; | |
| 2398 width: 100%; | |
| 2399 height: 100%; | |
| 2400 opacity: 0; | |
| 2401 white-space: nowrap; | |
| 2402 border-color: var(--paper-spinner-color,var(--google-blue-500)); | |
| 2403 } | |
| 2404 | |
| 2405 .layer-1 { | |
| 2406 border-color: var(--paper-spinner-layer-1-color,var(--google-blue-500)); | |
| 2407 } | |
| 2408 | |
| 2409 .layer-2 { | |
| 2410 border-color: var(--paper-spinner-layer-2-color,var(--google-red-500)); | |
| 2411 } | |
| 2412 | |
| 2413 .layer-3 { | |
| 2414 border-color: var(--paper-spinner-layer-3-color,var(--google-yellow-500)); | |
| 2415 } | |
| 2416 | |
| 2417 .layer-4 { | |
| 2418 border-color: var(--paper-spinner-layer-4-color,var(--google-green-500)); | |
| 2419 } | |
| 2420 | |
| 2421 .active .spinner-layer { | |
| 2422 -webkit-animation-name: fill-unfill-rotate; | |
| 2423 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); | |
| 2424 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 2425 -webkit-animation-iteration-count: infinite; | |
| 2426 animation-name: fill-unfill-rotate; | |
| 2427 animation-duration: var(--paper-spinner-full-cycle-duration); | |
| 2428 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 2429 animation-iteration-count: infinite; | |
| 2430 opacity: 1; | |
| 2431 } | |
| 2432 | |
| 2433 .active .spinner-layer.layer-1 { | |
| 2434 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; | |
| 2435 animation-name: fill-unfill-rotate, layer-1-fade-in-out; | |
| 2436 } | |
| 2437 | |
| 2438 .active .spinner-layer.layer-2 { | |
| 2439 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; | |
| 2440 animation-name: fill-unfill-rotate, layer-2-fade-in-out; | |
| 2441 } | |
| 2442 | |
| 2443 .active .spinner-layer.layer-3 { | |
| 2444 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; | |
| 2445 animation-name: fill-unfill-rotate, layer-3-fade-in-out; | |
| 2446 } | |
| 2447 | |
| 2448 .active .spinner-layer.layer-4 { | |
| 2449 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; | |
| 2450 animation-name: fill-unfill-rotate, layer-4-fade-in-out; | |
| 2451 } | |
| 2452 | |
| 2453 @-webkit-keyframes fill-unfill-rotate { | |
| 2454 12.5% { | |
| 2455 -webkit-transform: rotate(135deg) | |
| 2456 } | |
| 2457 | |
| 2458 25% { | |
| 2459 -webkit-transform: rotate(270deg) | |
| 2460 } | |
| 2461 | |
| 2462 37.5% { | |
| 2463 -webkit-transform: rotate(405deg) | |
| 2464 } | |
| 2465 | |
| 2466 50% { | |
| 2467 -webkit-transform: rotate(540deg) | |
| 2468 } | |
| 2469 | |
| 2470 62.5% { | |
| 2471 -webkit-transform: rotate(675deg) | |
| 2472 } | |
| 2473 | |
| 2474 75% { | |
| 2475 -webkit-transform: rotate(810deg) | |
| 2476 } | |
| 2477 | |
| 2478 87.5% { | |
| 2479 -webkit-transform: rotate(945deg) | |
| 2480 } | |
| 2481 | |
| 2482 to { | |
| 2483 -webkit-transform: rotate(1080deg) | |
| 2484 } | |
| 2485 | |
| 2486 } | |
| 2487 | |
| 2488 @keyframes fill-unfill-rotate { | |
| 2489 12.5% { | |
| 2490 transform: rotate(135deg) | |
| 2491 } | |
| 2492 | |
| 2493 25% { | |
| 2494 transform: rotate(270deg) | |
| 2495 } | |
| 2496 | |
| 2497 37.5% { | |
| 2498 transform: rotate(405deg) | |
| 2499 } | |
| 2500 | |
| 2501 50% { | |
| 2502 transform: rotate(540deg) | |
| 2503 } | |
| 2504 | |
| 2505 62.5% { | |
| 2506 transform: rotate(675deg) | |
| 2507 } | |
| 2508 | |
| 2509 75% { | |
| 2510 transform: rotate(810deg) | |
| 2511 } | |
| 2512 | |
| 2513 87.5% { | |
| 2514 transform: rotate(945deg) | |
| 2515 } | |
| 2516 | |
| 2517 to { | |
| 2518 transform: rotate(1080deg) | |
| 2519 } | |
| 2520 | |
| 2521 } | |
| 2522 | |
| 2523 @-webkit-keyframes layer-1-fade-in-out { | |
| 2524 0% { | |
| 2525 opacity: 1 | |
| 2526 } | |
| 2527 | |
| 2528 25% { | |
| 2529 opacity: 1 | |
| 2530 } | |
| 2531 | |
| 2532 26% { | |
| 2533 opacity: 0 | |
| 2534 } | |
| 2535 | |
| 2536 89% { | |
| 2537 opacity: 0 | |
| 2538 } | |
| 2539 | |
| 2540 90% { | |
| 2541 opacity: 1 | |
| 2542 } | |
| 2543 | |
| 2544 to { | |
| 2545 opacity: 1 | |
| 2546 } | |
| 2547 | |
| 2548 } | |
| 2549 | |
| 2550 @keyframes layer-1-fade-in-out { | |
| 2551 0% { | |
| 2552 opacity: 1 | |
| 2553 } | |
| 2554 | |
| 2555 25% { | |
| 2556 opacity: 1 | |
| 2557 } | |
| 2558 | |
| 2559 26% { | |
| 2560 opacity: 0 | |
| 2561 } | |
| 2562 | |
| 2563 89% { | |
| 2564 opacity: 0 | |
| 2565 } | |
| 2566 | |
| 2567 90% { | |
| 2568 opacity: 1 | |
| 2569 } | |
| 2570 | |
| 2571 to { | |
| 2572 opacity: 1 | |
| 2573 } | |
| 2574 | |
| 2575 } | |
| 2576 | |
| 2577 @-webkit-keyframes layer-2-fade-in-out { | |
| 2578 0% { | |
| 2579 opacity: 0 | |
| 2580 } | |
| 2581 | |
| 2582 15% { | |
| 2583 opacity: 0 | |
| 2584 } | |
| 2585 | |
| 2586 25% { | |
| 2587 opacity: 1 | |
| 2588 } | |
| 2589 | |
| 2590 50% { | |
| 2591 opacity: 1 | |
| 2592 } | |
| 2593 | |
| 2594 51% { | |
| 2595 opacity: 0 | |
| 2596 } | |
| 2597 | |
| 2598 to { | |
| 2599 opacity: 0 | |
| 2600 } | |
| 2601 | |
| 2602 } | |
| 2603 | |
| 2604 @keyframes layer-2-fade-in-out { | |
| 2605 0% { | |
| 2606 opacity: 0 | |
| 2607 } | |
| 2608 | |
| 2609 15% { | |
| 2610 opacity: 0 | |
| 2611 } | |
| 2612 | |
| 2613 25% { | |
| 2614 opacity: 1 | |
| 2615 } | |
| 2616 | |
| 2617 50% { | |
| 2618 opacity: 1 | |
| 2619 } | |
| 2620 | |
| 2621 51% { | |
| 2622 opacity: 0 | |
| 2623 } | |
| 2624 | |
| 2625 to { | |
| 2626 opacity: 0 | |
| 2627 } | |
| 2628 | |
| 2629 } | |
| 2630 | |
| 2631 @-webkit-keyframes layer-3-fade-in-out { | |
| 2632 0% { | |
| 2633 opacity: 0 | |
| 2634 } | |
| 2635 | |
| 2636 40% { | |
| 2637 opacity: 0 | |
| 2638 } | |
| 2639 | |
| 2640 50% { | |
| 2641 opacity: 1 | |
| 2642 } | |
| 2643 | |
| 2644 75% { | |
| 2645 opacity: 1 | |
| 2646 } | |
| 2647 | |
| 2648 76% { | |
| 2649 opacity: 0 | |
| 2650 } | |
| 2651 | |
| 2652 to { | |
| 2653 opacity: 0 | |
| 2654 } | |
| 2655 | |
| 2656 } | |
| 2657 | |
| 2658 @keyframes layer-3-fade-in-out { | |
| 2659 0% { | |
| 2660 opacity: 0 | |
| 2661 } | |
| 2662 | |
| 2663 40% { | |
| 2664 opacity: 0 | |
| 2665 } | |
| 2666 | |
| 2667 50% { | |
| 2668 opacity: 1 | |
| 2669 } | |
| 2670 | |
| 2671 75% { | |
| 2672 opacity: 1 | |
| 2673 } | |
| 2674 | |
| 2675 76% { | |
| 2676 opacity: 0 | |
| 2677 } | |
| 2678 | |
| 2679 to { | |
| 2680 opacity: 0 | |
| 2681 } | |
| 2682 | |
| 2683 } | |
| 2684 | |
| 2685 @-webkit-keyframes layer-4-fade-in-out { | |
| 2686 0% { | |
| 2687 opacity: 0 | |
| 2688 } | |
| 2689 | |
| 2690 65% { | |
| 2691 opacity: 0 | |
| 2692 } | |
| 2693 | |
| 2694 75% { | |
| 2695 opacity: 1 | |
| 2696 } | |
| 2697 | |
| 2698 90% { | |
| 2699 opacity: 1 | |
| 2700 } | |
| 2701 | |
| 2702 to { | |
| 2703 opacity: 0 | |
| 2704 } | |
| 2705 | |
| 2706 } | |
| 2707 | |
| 2708 @keyframes layer-4-fade-in-out { | |
| 2709 0% { | |
| 2710 opacity: 0 | |
| 2711 } | |
| 2712 | |
| 2713 65% { | |
| 2714 opacity: 0 | |
| 2715 } | |
| 2716 | |
| 2717 75% { | |
| 2718 opacity: 1 | |
| 2719 } | |
| 2720 | |
| 2721 90% { | |
| 2722 opacity: 1 | |
| 2723 } | |
| 2724 | |
| 2725 to { | |
| 2726 opacity: 0 | |
| 2727 } | |
| 2728 | |
| 2729 } | |
| 2730 | |
| 2731 .circle-clipper { | |
| 2732 display: inline-block; | |
| 2733 position: relative; | |
| 2734 width: 50%; | |
| 2735 height: 100%; | |
| 2736 overflow: hidden; | |
| 2737 border-color: inherit; | |
| 2738 } | |
| 2739 | |
| 2740 .spinner-layer::after { | |
| 2741 left: 45%; | |
| 2742 width: 10%; | |
| 2743 border-top-style: solid; | |
| 2744 } | |
| 2745 | |
| 2746 .spinner-layer::after, .circle-clipper::after { | |
| 2747 content: ''; | |
| 2748 box-sizing: border-box; | |
| 2749 position: absolute; | |
| 2750 top: 0; | |
| 2751 border-width: var(--paper-spinner-stroke-width, 3px); | |
| 2752 border-color: inherit; | |
| 2753 border-radius: 50%; | |
| 2754 } | |
| 2755 | |
| 2756 .circle-clipper::after { | |
| 2757 bottom: 0; | |
| 2758 width: 200%; | |
| 2759 border-style: solid; | |
| 2760 border-bottom-color: transparent !important; | |
| 2761 } | |
| 2762 | |
| 2763 .circle-clipper.left::after { | |
| 2764 left: 0; | |
| 2765 border-right-color: transparent !important; | |
| 2766 -webkit-transform: rotate(129deg); | |
| 2767 transform: rotate(129deg); | |
| 2768 } | |
| 2769 | |
| 2770 .circle-clipper.right::after { | |
| 2771 left: -100%; | |
| 2772 border-left-color: transparent !important; | |
| 2773 -webkit-transform: rotate(-129deg); | |
| 2774 transform: rotate(-129deg); | |
| 2775 } | |
| 2776 | |
| 2777 .active .gap-patch::after, .active .circle-clipper::after { | |
| 2778 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); | |
| 2779 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 2780 -webkit-animation-iteration-count: infinite; | |
| 2781 animation-duration: var(--paper-spinner-expand-contract-duration); | |
| 2782 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | |
| 2783 animation-iteration-count: infinite; | |
| 2784 } | |
| 2785 | |
| 2786 .active .circle-clipper.left::after { | |
| 2787 -webkit-animation-name: left-spin; | |
| 2788 animation-name: left-spin; | |
| 2789 } | |
| 2790 | |
| 2791 .active .circle-clipper.right::after { | |
| 2792 -webkit-animation-name: right-spin; | |
| 2793 animation-name: right-spin; | |
| 2794 } | |
| 2795 | |
| 2796 @-webkit-keyframes left-spin { | |
| 2797 0% { | |
| 2798 -webkit-transform: rotate(130deg) | |
| 2799 } | |
| 2800 | |
| 2801 50% { | |
| 2802 -webkit-transform: rotate(-5deg) | |
| 2803 } | |
| 2804 | |
| 2805 to { | |
| 2806 -webkit-transform: rotate(130deg) | |
| 2807 } | |
| 2808 | |
| 2809 } | |
| 2810 | |
| 2811 @keyframes left-spin { | |
| 2812 0% { | |
| 2813 transform: rotate(130deg) | |
| 2814 } | |
| 2815 | |
| 2816 50% { | |
| 2817 transform: rotate(-5deg) | |
| 2818 } | |
| 2819 | |
| 2820 to { | |
| 2821 transform: rotate(130deg) | |
| 2822 } | |
| 2823 | |
| 2824 } | |
| 2825 | |
| 2826 @-webkit-keyframes right-spin { | |
| 2827 0% { | |
| 2828 -webkit-transform: rotate(-130deg) | |
| 2829 } | |
| 2830 | |
| 2831 50% { | |
| 2832 -webkit-transform: rotate(5deg) | |
| 2833 } | |
| 2834 | |
| 2835 to { | |
| 2836 -webkit-transform: rotate(-130deg) | |
| 2837 } | |
| 2838 | |
| 2839 } | |
| 2840 | |
| 2841 @keyframes right-spin { | |
| 2842 0% { | |
| 2843 transform: rotate(-130deg) | |
| 2844 } | |
| 2845 | |
| 2846 50% { | |
| 2847 transform: rotate(5deg) | |
| 2848 } | |
| 2849 | |
| 2850 to { | |
| 2851 transform: rotate(-130deg) | |
| 2852 } | |
| 2853 | |
| 2854 } | |
| 2855 | |
| 2856 #spinnerContainer.cooldown { | |
| 2857 -webkit-animation: container-rotate var(--paper-spinner-container-rotation-dur
ation) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-be
zier(0.4, 0.0, 0.2, 1); | |
| 2858 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi
er(0.4, 0.0, 0.2, 1); | |
| 2859 } | |
| 2860 | |
| 2861 @-webkit-keyframes fade-out { | |
| 2862 0% { | |
| 2863 opacity: 1 | |
| 2864 } | |
| 2865 | |
| 2866 to { | |
| 2867 opacity: 0 | |
| 2868 } | |
| 2869 | |
| 2870 } | |
| 2871 | |
| 2872 @keyframes fade-out { | |
| 2873 0% { | |
| 2874 opacity: 1 | |
| 2875 } | |
| 2876 | |
| 2877 to { | |
| 2878 opacity: 0 | |
| 2879 } | |
| 2880 | |
| 2881 } | |
| 2882 | |
| 2883 </style> | |
| 2884 | |
| 2885 <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, _
_coolingDown)]]"> | |
| 2886 <div class="spinner-layer"> | |
| 2887 <div class="circle-clipper left"></div> | |
| 2888 <div class="circle-clipper right"></div> | |
| 2889 </div> | |
| 2890 </div> | |
| 2891 </template> | |
| 2892 | |
| 2893 </dom-module> | |
| 2894 <iron-iconset-svg name="cr" size="24"> | |
| 2895 <svg> | |
| 2896 <defs> | |
| 2897 | |
| 2898 <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g> | |
| 2899 <g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"></path></g> | |
| 2900 <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g> | |
| 2901 <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> | |
| 2902 <if expr="chromeos"> | |
| 2903 <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z">
</path></g> | |
| 2904 </if> | |
| 2905 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6
-6z"></path></g> | |
| 2906 <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> | |
| 2907 <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> | |
| 2908 <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> | |
| 2909 <g id="domain"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2z
m0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2
zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path>
</g> | |
| 2910 <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14
z"></path></g> | |
| 2911 <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
></path></g> | |
| 2912 <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> | |
| 2913 <g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z">
</path></g> | |
| 2914 <g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16
c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></g> | |
| 2915 <g id="fullscreen"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3
v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></g> | |
| 2916 <g id="group"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0
-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5
8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.2
9 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z">
</path></g> | |
| 2917 <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></pat
h></g> | |
| 2918 <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> | |
| 2919 <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.41V10h2V
3h-7z"></path></g> | |
| 2920 <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> | |
| 2921 <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> | |
| 2922 <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> | |
| 2923 <g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-
.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52
-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l
-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-
.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24
.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24
.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.2
3.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-
1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g> | |
| 2924 <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> | |
| 2925 <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4
z"></path></g> | |
| 2926 </defs> | |
| 2927 </svg> | |
| 2928 </iron-iconset-svg> | |
| 2929 <dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elemen
ts/cr_toolbar/" css-build="shadow"> | |
| 2930 <template> | |
| 2931 <style scope="cr-toolbar-search-field">:host { | |
| 2932 align-items: center; | |
| 2933 display: flex; | |
| 2934 height: 40px; | |
| 2935 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), | |
| 2936 width 150ms cubic-bezier(0.4, 0, 0.2, 1); | |
| 2937 width: 44px; | |
| 2938 } | |
| 2939 | |
| 2940 [hidden] { | |
| 2941 display: none !important; | |
| 2942 } | |
| 2943 | |
| 2944 paper-icon-button { | |
| 2945 height: 32px; | |
| 2946 margin: 6px; | |
| 2947 min-width: 32px; | |
| 2948 padding: 6px; | |
| 2949 width: 32px; | |
| 2950 } | |
| 2951 | |
| 2952 #icon { | |
| 2953 --paper-icon-button-ink-color: white; | |
| 2954 transition: margin 150ms, opacity 200ms; | |
| 2955 } | |
| 2956 | |
| 2957 #prompt { | |
| 2958 opacity: 0; | |
| 2959 } | |
| 2960 | |
| 2961 paper-spinner-lite { | |
| 2962 ; | |
| 2963 --paper-spinner-color: white; | |
| 2964 margin: 0 6px; | |
| 2965 opacity: 0; | |
| 2966 padding: 6px; | |
| 2967 position: absolute; | |
| 2968 } | |
| 2969 | |
| 2970 paper-spinner-lite[active] { | |
| 2971 opacity: 1; | |
| 2972 } | |
| 2973 | |
| 2974 #prompt, paper-spinner-lite { | |
| 2975 transition: opacity 200ms; | |
| 2976 } | |
| 2977 | |
| 2978 #searchTerm { | |
| 2979 -webkit-font-smoothing: antialiased; | |
| 2980 -webkit-margin-start: 2px; | |
| 2981 flex: 1; | |
| 2982 line-height: 185%; | |
| 2983 position: relative; | |
| 2984 } | |
| 2985 | |
| 2986 label { | |
| 2987 bottom: 0; | |
| 2988 cursor: text; | |
| 2989 left: 0; | |
| 2990 overflow: hidden; | |
| 2991 position: absolute; | |
| 2992 right: 0; | |
| 2993 top: 0; | |
| 2994 white-space: nowrap; | |
| 2995 } | |
| 2996 | |
| 2997 :host([has-search-text]) label { | |
| 2998 visibility: hidden; | |
| 2999 } | |
| 3000 | |
| 3001 input { | |
| 3002 -webkit-appearance: none; | |
| 3003 background: transparent; | |
| 3004 border: none; | |
| 3005 color: white; | |
| 3006 font: inherit; | |
| 3007 outline: none; | |
| 3008 padding: 0; | |
| 3009 position: relative; | |
| 3010 width: 100%; | |
| 3011 } | |
| 3012 | |
| 3013 input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-s
earch-cancel-button, input[type='search']::-webkit-search-results-button { | |
| 3014 -webkit-appearance: none; | |
| 3015 } | |
| 3016 | |
| 3017 :host(:not([narrow])) { | |
| 3018 -webkit-padding-end: 0; | |
| 3019 background: rgba(0, 0, 0, 0.22); | |
| 3020 border-radius: 2px; | |
| 3021 cursor: text; | |
| 3022 width: var(--cr-toolbar-field-width); | |
| 3023 } | |
| 3024 | |
| 3025 :host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt
{ | |
| 3026 opacity: 0.7; | |
| 3027 } | |
| 3028 | |
| 3029 :host([narrow]:not([showing-search])) #searchTerm { | |
| 3030 display: none; | |
| 3031 } | |
| 3032 | |
| 3033 :host([showing-search][spinner-active]) #icon { | |
| 3034 opacity: 0; | |
| 3035 } | |
| 3036 | |
| 3037 :host([narrow][showing-search]) { | |
| 3038 width: 100%; | |
| 3039 } | |
| 3040 | |
| 3041 :host([narrow][showing-search]) #icon, :host([narrow][showing-search]) paper-spi
nner-lite { | |
| 3042 -webkit-margin-start: 18px; | |
| 3043 } | |
| 3044 | |
| 3045 </style> | |
| 3046 <template is="dom-if" if="[[isSpinnerShown_]]"> | |
| 3047 <paper-spinner-lite active=""> | |
| 3048 </paper-spinner-lite> | |
| 3049 </template> | |
| 3050 <paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[
[computeIconTabIndex_(narrow)]]"> | |
| 3051 </paper-icon-button> | |
| 3052 <div id="searchTerm"> | |
| 3053 <label id="prompt" for="searchInput">[[label]]</label> | |
| 3054 <input id="searchInput" type="search" on-input="onSearchTermInput" on-sear
ch="onSearchTermSearch" on-keydown="onSearchTermKeydown_" on-focus="onInputFocus
_" on-blur="onInputBlur_" incremental="" autofocus=""> | |
| 3055 | |
| 3056 </div> | |
| 3057 <template is="dom-if" if="[[hasSearchText]]"> | |
| 3058 <paper-icon-button icon="cr:cancel" id="clearSearch" title="[[clearLabel]]
" on-tap="clearSearch_"> | |
| 3059 </paper-icon-button> | |
| 3060 </template> | |
| 3061 </template> | |
| 3062 </dom-module> | |
| 3063 <dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar
/" css-build="shadow"> | |
| 3064 <template> | |
| 3065 <style scope="cr-toolbar">:host { | |
| 3066 --cr-toolbar-field-width: 580px; | |
| 3067 --cr-toolbar-height: 56px; | |
| 3068 align-items: center; | |
| 3069 color: #fff; | |
| 3070 display: flex; | |
| 3071 height: var(--cr-toolbar-height); | |
| 3072 } | |
| 3073 | |
| 3074 h1 { | |
| 3075 -webkit-margin-start: 6px; | |
| 3076 -webkit-padding-end: 12px; | |
| 3077 flex: 1; | |
| 3078 font-size: 123%; | |
| 3079 font-weight: 400; | |
| 3080 text-overflow: ellipsis; | |
| 3081 overflow: hidden; | |
| 3082 white-space: nowrap; | |
| 3083 } | |
| 3084 | |
| 3085 #leftContent { | |
| 3086 -webkit-margin-start: 12px; | |
| 3087 position: relative; | |
| 3088 transition: opacity 100ms; | |
| 3089 } | |
| 3090 | |
| 3091 #leftSpacer { | |
| 3092 -webkit-margin-start: 6px; | |
| 3093 align-items: center; | |
| 3094 display: flex; | |
| 3095 } | |
| 3096 | |
| 3097 #menuButton { | |
| 3098 height: 32px; | |
| 3099 margin-bottom: 6px; | |
| 3100 margin-top: 6px; | |
| 3101 min-width: 32px; | |
| 3102 padding: 6px; | |
| 3103 width: 32px; | |
| 3104 } | |
| 3105 | |
| 3106 #centeredContent { | |
| 3107 display: flex; | |
| 3108 flex: 1 1 0; | |
| 3109 justify-content: center; | |
| 3110 } | |
| 3111 | |
| 3112 #rightContent { | |
| 3113 -webkit-margin-end: 12px; | |
| 3114 } | |
| 3115 | |
| 3116 :host([narrow_]) #centeredContent { | |
| 3117 justify-content: flex-end; | |
| 3118 } | |
| 3119 | |
| 3120 :host([narrow_][showing-search_]) #leftContent { | |
| 3121 position: absolute; | |
| 3122 opacity: 0; | |
| 3123 } | |
| 3124 | |
| 3125 :host(:not([narrow_])) #leftContent { | |
| 3126 flex: 1 1 var(--cr-toolbar-field-margin, 0); | |
| 3127 } | |
| 3128 | |
| 3129 :host(:not([narrow_])) #rightContent { | |
| 3130 flex: 1 1 0; | |
| 3131 text-align: end; | |
| 3132 } | |
| 3133 | |
| 3134 #menuPromo { | |
| 3135 -webkit-padding-end: 12px; | |
| 3136 -webkit-padding-start: 8px; | |
| 3137 align-items: center; | |
| 3138 background: #616161; | |
| 3139 border-radius: 2px; | |
| 3140 color: white; | |
| 3141 display: flex; | |
| 3142 font-size: 92.3%; | |
| 3143 font-weight: 500; | |
| 3144 opacity: 0; | |
| 3145 padding-bottom: 6px; | |
| 3146 padding-top: 6px; | |
| 3147 position: absolute; | |
| 3148 top: var(--cr-toolbar-height); | |
| 3149 white-space: nowrap; | |
| 3150 z-index: 2; | |
| 3151 } | |
| 3152 | |
| 3153 #menuPromo::before { | |
| 3154 background: inherit; | |
| 3155 | |
| 3156 clip-path: polygon(0 105%, 100% 105%, 50% 0); | |
| 3157 content: ''; | |
| 3158 display: block; | |
| 3159 left: 10px; | |
| 3160 height: 6px; | |
| 3161 position: absolute; | |
| 3162 top: -6px; | |
| 3163 width: 12px; | |
| 3164 } | |
| 3165 | |
| 3166 :host-context([dir=rtl]) #menuPromo::before { | |
| 3167 left: auto; | |
| 3168 right: 10px; | |
| 3169 } | |
| 3170 | |
| 3171 #closePromo { | |
| 3172 -webkit-appearance: none; | |
| 3173 -webkit-margin-start: 12px; | |
| 3174 background: none; | |
| 3175 border: none; | |
| 3176 color: inherit; | |
| 3177 font-size: 20px; | |
| 3178 line-height: 20px; | |
| 3179 padding: 0; | |
| 3180 width: 20px; | |
| 3181 } | |
| 3182 | |
| 3183 </style> | |
| 3184 <div id="leftContent"> | |
| 3185 <div id="leftSpacer"> | |
| 3186 | |
| 3187 <template is="dom-if" if="[[showMenu]]" restamp=""> | |
| 3188 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_"
title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" aria-label$="[[me
nuLabel]]"> | |
| 3189 </paper-icon-button> | |
| 3190 <template is="dom-if" if="[[showMenuPromo]]"> | |
| 3191 <div id="menuPromo" role="tooltip"> | |
| 3192 [[menuPromo]] | |
| 3193 <button id="closePromo" on-tap="onClosePromoTap_" aria-label$="[[c
loseMenuPromo]]">✕</button> | |
| 3194 | |
| 3195 </div></template> | |
| 3196 </template> | |
| 3197 <h1>[[pageName]]</h1> | |
| 3198 </div> | |
| 3199 </div> | |
| 3200 | |
| 3201 <div id="centeredContent"> | |
| 3202 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" label="[[searchP
rompt]]" clear-label="[[clearLabel]]" spinner-active="[[spinnerActive]]" showing
-search="{{showingSearch_}}"> | |
| 3203 </cr-toolbar-search-field> | |
| 3204 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> | |
| 3205 </iron-media-query> | |
| 3206 </div> | |
| 3207 | |
| 3208 <div id="rightContent"> | |
| 3209 <content select=".more-actions"></content> | |
| 3210 </div> | |
| 3211 </template> | |
| 3212 </dom-module> | |
| 3213 <dom-module id="downloads-toolbar" assetpath="chrome://downloads/" css-build="sh
adow"> | |
| 3214 <template> | |
| 3215 <style scope="downloads-toolbar">:host { | |
| 3216 align-items: center; | |
| 3217 background: var(--md-toolbar-color); | |
| 3218 color: white; | |
| 3219 display: flex; | |
| 3220 min-height: 56px; | |
| 3221 } | |
| 3222 | |
| 3223 [hidden] { | |
| 3224 display: none !important; | |
| 3225 } | |
| 3226 | |
| 3227 #toolbar { | |
| 3228 --cr-toolbar-field-width: var(--downloads-card-width); | |
| 3229 flex: 1; | |
| 3230 } | |
| 3231 | |
| 3232 paper-icon-button { | |
| 3233 --iron-icon-height: 20px; | |
| 3234 --iron-icon-width: 20px; | |
| 3235 --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px
; --paper-icon-button_-_width: 32px;; | |
| 3236 } | |
| 3237 | |
| 3238 #more { | |
| 3239 --paper-menu-button_-_padding: 6px;; | |
| 3240 } | |
| 3241 | |
| 3242 paper-menu { | |
| 3243 --paper-menu-selected-item_-_font-weight: normal;; | |
| 3244 } | |
| 3245 | |
| 3246 paper-item { | |
| 3247 -webkit-user-select: none; | |
| 3248 cursor: pointer; | |
| 3249 font: inherit; | |
| 3250 min-height: 40px; | |
| 3251 | |
| 3252 white-space: nowrap; | |
| 3253 } | |
| 3254 | |
| 3255 </style> | |
| 3256 <cr-toolbar id="toolbar" page-name="$i18n{title}" search-prompt="$i18n{searc
h}" clear-label="$i18n{clearSearch}" spinner-active="{{spinnerActive}}" on-searc
h-changed="onSearchChanged_"> | |
| 3257 <div class="more-actions"> | |
| 3258 <paper-menu-button id="more" horizontal-align="right" allow-outside-scro
ll=""> | |
| 3259 <paper-icon-button icon="cr:more-vert" title="$i18n{moreActions}" clas
s="dropdown-trigger"></paper-icon-button> | |
| 3260 <paper-menu class="dropdown-content"> | |
| 3261 <paper-item class="clear-all" on-tap="onClearAllTap_" role="menuitem
" on-blur="onItemBlur_"> | |
| 3262 $i18n{clearAll} | |
| 3263 </paper-item> | |
| 3264 <paper-item on-tap="onOpenDownloadsFolderTap_" role="menuitem" on-bl
ur="onItemBlur_"> | |
| 3265 $i18n{openDownloadsFolder} | |
| 3266 </paper-item> | |
| 3267 </paper-menu> | |
| 3268 </paper-menu-button> | |
| 3269 </div> | |
| 3270 </cr-toolbar> | |
| 3271 </template> | |
| 3272 </dom-module> | |
| 3273 <style> | |
| 3274 /* Copyright 2016 The Chromium Authors. All rights reserved. | |
| 3275 * Use of this source code is governed by a BSD-style license that can be | |
| 3276 * found in the LICENSE file. */ | |
| 3277 | |
| 3278 :root { | |
| 3279 /* This is a custom, Chrome-specific color that does not have a --paper or | |
| 3280 * --google equivalent. */ | |
| 3281 --md-background-color: #f1f1f1; | |
| 3282 --md-loading-message-color: #6e6e6e; | |
| 3283 /* This is --google-blue-700, rewritten as a native custom property for speed. | |
| 3284 */ | |
| 3285 --md-toolbar-color: rgb(51, 103, 214); | |
| 3286 } | |
| 3287 | |
| 3288 </style><dom-module id="downloads-manager" assetpath="chrome://downloads/" css-b
uild="shadow"> | |
| 3289 <template> | |
| 3290 <style scope="downloads-manager">:host { | |
| 3291 display: flex; | |
| 3292 flex: 1 0; | |
| 3293 flex-direction: column; | |
| 3294 height: 100%; | |
| 3295 z-index: 0; | |
| 3296 } | |
| 3297 | |
| 3298 [hidden] { | |
| 3299 display: none !important; | |
| 3300 } | |
| 3301 | |
| 3302 @media screen and (max-width: 1024px) { | |
| 3303 :host { | |
| 3304 flex-basis: calc( | |
| 3305 var(--downloads-card-width) + 2 * var(--downloads-card-margin)); | |
| 3306 } | |
| 3307 | |
| 3308 } | |
| 3309 | |
| 3310 #toolbar { | |
| 3311 position: relative; | |
| 3312 z-index: 1; | |
| 3313 } | |
| 3314 | |
| 3315 #toolbar::after { | |
| 3316 box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); | |
| 3317 content: ''; | |
| 3318 display: block; | |
| 3319 height: 6px; | |
| 3320 opacity: 0; | |
| 3321 position: absolute; | |
| 3322 top: 100%; | |
| 3323 transition: opacity 500ms; | |
| 3324 width: 100%; | |
| 3325 } | |
| 3326 | |
| 3327 :host([has-shadow_]) #toolbar::after { | |
| 3328 opacity: 1; | |
| 3329 } | |
| 3330 | |
| 3331 #downloads-list { | |
| 3332 overflow-y: overlay !important; | |
| 3333 } | |
| 3334 | |
| 3335 #no-downloads, #downloads-list { | |
| 3336 flex: 1; | |
| 3337 } | |
| 3338 | |
| 3339 :host([loading]) #no-downloads, :host([loading]) #downloads-list { | |
| 3340 display: none; | |
| 3341 } | |
| 3342 | |
| 3343 #no-downloads { | |
| 3344 align-items: center; | |
| 3345 color: #6e6e6e; | |
| 3346 display: flex; | |
| 3347 font-size: 123.1%; | |
| 3348 font-weight: 500; | |
| 3349 justify-content: center; | |
| 3350 | |
| 3351 min-height: min-content; | |
| 3352 } | |
| 3353 | |
| 3354 #no-downloads .illustration { | |
| 3355 background: -webkit-image-set( | |
| 3356 url("chrome://downloads/1x/no_downloads.png") 1x, | |
| 3357 url("chrome://downloads/2x/no_downloads.png") 2x) | |
| 3358 no-repeat center center; | |
| 3359 height: 144px; | |
| 3360 margin-bottom: 32px; | |
| 3361 } | |
| 3362 | |
| 3363 </style> | |
| 3364 | |
| 3365 <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}"> | |
| 3366 </downloads-toolbar> | |
| 3367 <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]]
"> | |
| 3368 <template> | |
| 3369 <downloads-item data="[[item]]"></downloads-item> | |
| 3370 </template> | |
| 3371 </iron-list> | |
| 3372 <div id="no-downloads" hidden="[[hasDownloads_]]"> | |
| 3373 <div> | |
| 3374 <div class="illustration"></div> | |
| 3375 <span>[[noDownloadsText_(inSearchMode_)]]</span> | |
| 3376 </div> | |
| 3377 </div> | |
| 3378 </template> | |
| 3379 </dom-module> | |
| 3380 </div><script src="crisper.js"></script></body></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2569293002:
WebUI: Vulcanize MD Downloads at compile time using GN. (Closed)
