Bug 1352065 - Implement Photon download animations behind a MOZ_PHOTON_ANIMATIONS flag. r=jaws, r=paolo
* Add MOZ_PHOTON_ANIMATIONS to AppConstants
* Refactor some shared download indicator rules into indicator.inc.css
* SVG spritesheet animations for download start and download finish
* Animated progress bar in the toolbar button
MozReview-Commit-ID: Gu98aoeNCtj
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -494,21 +494,38 @@
<label class="tooltip-label"/>
</tooltip>
#include popup-notifications.inc
#include ../../components/customizableui/content/panelUI.inc.xul
#include ../../components/controlcenter/content/panel.inc.xul
+#ifdef MOZ_PHOTON_ANIMATIONS
+ <vbox id="downloads-animation-container" mousethrough="always">
+ <deck>
+ <hbox top="0">
+ <hbox id="downloads-notification-anchor">
+ <hbox id="downloads-indicator-notification"/>
+ </hbox>
+ </hbox>
+ <hbox top="0">
+ <hbox id="downloads-complete-anchor">
+ <hbox id="downloads-library-animation"/>
+ </hbox>
+ </hbox>
+ </deck>
+ </vbox>
+#else
<hbox id="downloads-animation-container" mousethrough="always">
<vbox id="downloads-notification-anchor">
<vbox id="downloads-indicator-notification"/>
</vbox>
</hbox>
+#endif
<hbox id="bookmarked-notification-container" mousethrough="always">
<vbox id="bookmarked-notification-anchor">
<vbox id="bookmarked-notification"/>
</vbox>
<vbox id="bookmarked-notification-dropmarker-anchor">
<image id="bookmarked-notification-dropmarker-icon"/>
</vbox>
--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -22,16 +22,18 @@
* Builds and updates the actual downloads status widget, responding to changes
* in the global status data, or provides a neutral view if the indicator is
* removed from the toolbars and only used as a temporary anchor. In addition,
* handles the user interaction events raised by the widget.
*/
"use strict";
+Components.utils.import("resource://gre/modules/AppConstants.jsm");
+
// DownloadsButton
/**
* Main entry point for the downloads indicator. Depending on how the toolbars
* have been customized, this object determines if we should show a fully
* functional indicator, a placeholder used during customization and in the
* customization palette, or a neutral view as a temporary anchor for the
* downloads panel.
@@ -287,16 +289,73 @@ const DownloadsIndicatorView = {
*/
_isAncestorPanelOpen(aNode) {
while (aNode && aNode.localName != "panel") {
aNode = aNode.parentNode;
}
return aNode && aNode.state == "open";
},
+ get visibleAnchor() {
+ let anchor = DownloadsButton._placeholder;
+ let widgetGroup = CustomizableUI.getWidget("downloads-button");
+ let widget = widgetGroup.forWindow(window);
+
+ if (widget.overflowed || widgetGroup.areaType == CustomizableUI.TYPE_MENU_PANEL) {
+ if (anchor && this._isAncestorPanelOpen(anchor)) {
+ // If the containing panel is open, don't do anything, because the
+ // notification would appear under the open panel. See
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=984023
+ return null;
+ }
+
+ // Otherwise, try to use the anchor of the panel:
+ anchor = widget.anchor;
+ }
+ if (!anchor || !isElementVisible(anchor.parentNode)) {
+ // Our container isn't visible, so can't show the animation:
+ return null;
+ }
+ return anchor;
+ },
+
+ get visibleLibraryAnchor() {
+ // TODO: temporary, will need fixing/replacing when the library button lands
+ const libraryButtonId = "bookmarks-menu-button";
+ let widgetGroup = CustomizableUI.getWidget(libraryButtonId);
+ let widget = widgetGroup && widgetGroup.forWindow(window).node;
+ if (!widget) {
+ return null;
+ }
+ let anchor = document.getAnonymousElementByAttribute(widget,
+ "anonid", "button");
+ if (widget.overflowed ||
+ widgetGroup.areaType == CustomizableUI.TYPE_MENU_PANEL) {
+
+ if (anchor && this._isAncestorPanelOpen(anchor)) {
+ // If the containing panel is open, don't do anything, because the
+ // notification would appear under the open panel. See
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=984023
+ return null;
+ }
+ }
+ if (!anchor || !isElementVisible(anchor.parentNode)) {
+ // Our container isn't visible, so can't show the animation:
+ return null;
+ }
+ return anchor;
+ },
+
+ _getCenteringTransformForRects(rectToPosition, referenceRect) {
+ let centerX = referenceRect.x + referenceRect.width / 2;
+ let centerY = referenceRect.y + referenceRect.y / 2;
+ return [centerX - (rectToPosition.width / 2) + "px",
+ centerY - (rectToPosition.height / 2) + "px"];
+ },
+
/**
* If the status indicator is visible in its assigned position, shows for a
* brief time a visual notification of a relevant event, like a new download.
*
* @param aType
* Set to "start" for new downloads, "finish" for completed downloads.
*/
showEventNotification(aType) {
@@ -308,64 +367,113 @@ const DownloadsIndicatorView = {
return;
}
// No need to show visual notification if the panel is visible.
if (DownloadsPanel.isPanelShowing) {
return;
}
- let anchor = DownloadsButton._placeholder;
- let widgetGroup = CustomizableUI.getWidget("downloads-button");
- let widget = widgetGroup.forWindow(window);
- if (widget.overflowed || widgetGroup.areaType == CustomizableUI.TYPE_MENU_PANEL) {
- if (anchor && this._isAncestorPanelOpen(anchor)) {
- // If the containing panel is open, don't do anything, because the
- // notification would appear under the open panel. See
- // https://bugzilla.mozilla.org/show_bug.cgi?id=984023
- return;
- }
-
- // Otherwise, try to use the anchor of the panel:
- anchor = widget.anchor;
+ let downloadAnchor = this.visibleAnchor;
+ let libraryAnchor = this.visibleLibraryAnchor;
+ let anchor;
+ if (aType === "start") {
+ anchor = downloadAnchor;
+ } else if (aType === "finish") {
+ anchor = libraryAnchor;
}
- if (!anchor || !isElementVisible(anchor.parentNode)) {
- // Our container isn't visible, so can't show the animation:
+ // If we can't see a toolbarbutton anchor, there's nothing to animate to
+ if (!anchor) {
return;
}
+ // any in-flight animation will be cancelled when we set the notification
+ // attribute, so just clear the timeout
if (this._notificationTimeout) {
clearTimeout(this._notificationTimeout);
}
// The notification element is positioned to show in the same location as
// the downloads button. It's not in the downloads button itself in order to
// be able to anchor the notification elsewhere if required, and to ensure
// the notification isn't clipped by overflow properties of the anchor's
// container.
- let notifier = this.notifier;
- if (notifier.style.transform == "") {
+ let deck, notifier, startNotifier, finishNotifier;
+ if (AppConstants.MOZ_PHOTON_ANIMATIONS) {
+ startNotifier = this.notifier;
+ finishNotifier = this.libraryNotifier;
+ deck = this.notifierDeck;
+ if (aType === "start") {
+ notifier = startNotifier;
+ } else if (aType === "finish") {
+ notifier = finishNotifier;
+ }
+ } else {
+ notifier = this.notifier;
+ }
+
+ if (!notifier) {
+ return;
+ }
+ if (notifier.style.transform == "" ||
+ notifier.getAttribute("notification") !== aType) {
+ // Get all the relevant nodes and computed style objects
let anchorRect = anchor.getBoundingClientRect();
let notifierRect = notifier.getBoundingClientRect();
- let topDiff = anchorRect.top - notifierRect.top;
- let leftDiff = anchorRect.left - notifierRect.left;
- let heightDiff = anchorRect.height - notifierRect.height;
- let widthDiff = anchorRect.width - notifierRect.width;
- let translateX = (leftDiff + .5 * widthDiff) + "px";
- let translateY = (topDiff + .5 * heightDiff) + "px";
- notifier.style.transform = "translate(" + translateX + ", " + translateY + ")";
+
+ // Compute, but do not set, transform for animation
+ let translateX, translateY;
+
+ if (AppConstants.MOZ_PHOTON_ANIMATIONS) {
+ [translateX, translateY] =
+ this._getCenteringTransformForRects(notifierRect, anchorRect);
+ } else {
+ let topDiff = anchorRect.top - notifierRect.top;
+ let leftDiff = anchorRect.left - notifierRect.left;
+ let heightDiff = anchorRect.height - notifierRect.height;
+ let widthDiff = anchorRect.width - notifierRect.width;
+ translateX = (leftDiff + .5 * widthDiff) + "px";
+ translateY = (topDiff + .5 * heightDiff) + "px";
+ }
+ let notifierTransform = `translate(${translateX}, ${translateY})`;
+ // Do all layout invalidation in one go:
+ notifier.style.transform = notifierTransform;
+ }
+ if (deck && aType === "start") {
+ deck.selectedIndex = 0;
+ }
+ if (deck && aType === "finish") {
+ deck.selectedIndex = 1;
}
notifier.setAttribute("notification", aType);
anchor.setAttribute("notification", aType);
+
+ // This value is determined by the overall duration of animation in CSS.
+ let timeoutMs = (AppConstants.MOZ_PHOTON_ANIMATIONS) ? 800 : 2000;
this._notificationTimeout = setTimeout(() => {
- anchor.removeAttribute("notification");
- notifier.removeAttribute("notification");
- notifier.style.transform = "";
- // This value is determined by the overall duration of animation in CSS.
- }, 2000);
+ if (AppConstants.MOZ_PHOTON_ANIMATIONS) {
+ downloadAnchor && downloadAnchor.removeAttribute("notification");
+ libraryAnchor && libraryAnchor.removeAttribute("notification");
+ if (startNotifier) {
+ startNotifier.removeAttribute("notification");
+ startNotifier.style.transform = "";
+ }
+ if (finishNotifier) {
+ finishNotifier.removeAttribute("notification");
+ finishNotifier.style.transform = "";
+ }
+ } else {
+ if (anchor) {
+ anchor.removeAttribute("notification");
+ }
+ if (notifier) {
+ notifier.style.transform = "";
+ }
+ }
+ }, timeoutMs);
},
// Callback functions from DownloadsIndicatorData
/**
* Indicates whether the indicator should be shown because there are some
* downloads to be displayed.
*/
@@ -498,16 +606,17 @@ const DownloadsIndicatorView = {
if (handled) {
aEvent.preventDefault();
}
},
_indicator: null,
__progressIcon: null,
+
/**
* Returns a reference to the main indicator element, or null if the element
* is not present in the browser window yet.
*/
get indicator() {
if (this._indicator) {
return this._indicator;
}
@@ -534,16 +643,26 @@ const DownloadsIndicatorView = {
(this.__progressIcon = document.getElementById("downloads-indicator-progress-icon"));
},
get notifier() {
return this._notifier ||
(this._notifier = document.getElementById("downloads-notification-anchor"));
},
+ get libraryNotifier() {
+ return this._libraryNotifier ||
+ (this._libraryNotifier = document.getElementById("downloads-complete-anchor"));
+ },
+
+ get notifierDeck() {
+ return this._notifierDeck ||
+ (this._notifierDeck = document.querySelector("#downloads-animation-container > deck"));
+ },
+
_onCustomizedAway() {
this._indicator = null;
this.__progressIcon = null;
},
afterCustomize() {
// If the cached indicator is not the one currently in the document,
// invalidate our references
--- a/browser/components/downloads/content/indicatorOverlay.xul
+++ b/browser/components/downloads/content/indicatorOverlay.xul
@@ -21,13 +21,17 @@
<toolbarbutton id="downloads-button" indicator="true">
<!-- The panel's anchor area is smaller than the outer button, but must
always be visible and must not move or resize when the indicator
state changes, otherwise the panel could change its position or lose
its arrow unexpectedly. -->
<stack id="downloads-indicator-anchor"
consumeanchor="downloads-button">
<stack id="downloads-indicator-icon">
- <vbox id="downloads-indicator-progress-icon"/>
+ <vbox id="downloads-indicator-progress-icon"
+#ifdef MOZ_PHOTON_ANIMATIONS
+ bottom="0"
+#endif
+ />
</stack>
</stack>
</toolbarbutton>
</overlay>
--- a/browser/components/downloads/jar.mn
+++ b/browser/components/downloads/jar.mn
@@ -3,14 +3,14 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
browser.jar:
* content/browser/downloads/download.xml (content/download.xml)
content/browser/downloads/downloads.css (content/downloads.css)
content/browser/downloads/downloads.js (content/downloads.js)
* content/browser/downloads/downloadsOverlay.xul (content/downloadsOverlay.xul)
content/browser/downloads/indicator.js (content/indicator.js)
- content/browser/downloads/indicatorOverlay.xul (content/indicatorOverlay.xul)
+* content/browser/downloads/indicatorOverlay.xul (content/indicatorOverlay.xul)
* content/browser/downloads/allDownloadsViewOverlay.xul (content/allDownloadsViewOverlay.xul)
content/browser/downloads/allDownloadsViewOverlay.js (content/allDownloadsViewOverlay.js)
* content/browser/downloads/contentAreaDownloadsView.xul (content/contentAreaDownloadsView.xul)
content/browser/downloads/contentAreaDownloadsView.js (content/contentAreaDownloadsView.js)
content/browser/downloads/contentAreaDownloadsView.css (content/contentAreaDownloadsView.css)
--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -1,42 +1,26 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/downloads/indicator.inc.css
-/*** Status and progress indicator ***/
-
-#downloads-animation-container {
- min-height: 1px;
- min-width: 1px;
- height: 1px;
- margin-bottom: -1px;
- /* Makes the outermost animation container element positioned, so that its
- contents are rendered over the main browser window in the Z order.
- This is required by the animated event notification. */
- position: relative;
- /* The selected tab may overlap #downloads-indicator-notification */
- z-index: 5;
-}
-
/*** Main indicator icon ***/
-#downloads-button {
- --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-}
-
#downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon {
background: var(--downloads-indicator-image) center no-repeat;
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill);
width: 16px;
height: 16px;
background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+ overflow: hidden;
+%endif
}
toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
fill: var(--toolbarbutton-icon-fill-inverted);
}
#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
@@ -72,25 +56,29 @@ toolbar[brighttext] #downloads-button[cu
fill: var(--toolbarbutton-icon-fill-attention);
}
#downloads-button[cui-areatype="menu-panel"][attention="success"] {
list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
-moz-image-region: auto;
}
+%ifndef MOZ_PHOTON_ANIMATIONS
+/*** Download notifications ***/
+
#downloads-indicator-notification {
opacity: 0;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
+/*** Progress bar and text ***/
@keyframes downloadsIndicatorNotificationStartRight {
from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
20% { opacity: .85; animation-timing-function: ease-out; }
to { opacity: 0; transform: translate(0) scale(1); }
}
@keyframes downloadsIndicatorNotificationStartLeft {
from { opacity: 0; transform: translate(128px, 128px) scale(8); }
@@ -114,8 +102,9 @@ toolbar[brighttext] #downloads-button[cu
to { opacity: 0; transform: scale(8); }
}
#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
animation-name: downloadsIndicatorNotificationFinish;
animation-duration: 1s;
}
+%endif
--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -1,45 +1,26 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/downloads/indicator.inc.css
-/*** Status and progress indicator ***/
-
-#downloads-indicator-anchor {
- min-width: 16px;
- min-height: 16px;
-}
-
-#downloads-animation-container {
- min-height: 1px;
- min-width: 1px;
- height: 1px;
- margin-bottom: -1px;
- /* Makes the outermost animation container element positioned, so that its
- contents are rendered over the main browser window in the Z order.
- This is required by the animated event notification. */
- position: relative;
- /* The selected tab may overlap #downloads-indicator-notification */
- z-index: 5;
-}
-
/*** Main indicator icon ***/
-#downloads-button {
- --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-}
-
#downloads-indicator-icon {
background: var(--downloads-indicator-image) center no-repeat;
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill);
background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+ width: 16px;
+ height: 16px;
+ overflow: hidden;
+%endif
}
toolbar[brighttext] #downloads-indicator-icon {
fill: var(--toolbarbutton-icon-fill-inverted);
}
#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
@@ -81,29 +62,36 @@ toolbar[brighttext] #downloads-indicator
}
@media (min-resolution: 2dppx) {
#downloads-button[cui-areatype="menu-panel"][attention="success"] {
list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel@2x.png");
}
}
+%ifdef MOZ_PHOTON_ANIMATIONS
+/* Inactive elements are faded out on OSX */
+
+#downloads-notification-anchor[notification="start"]:-moz-window-inactive:not(:hover) > #downloads-indicator-notification,
+#downloads-complete-anchor[notification="finish"]:-moz-window-inactive:not(:hover) > #downloads-library-animation {
+ opacity: 0.5;
+}
+%else
/*** Download notifications ***/
#downloads-indicator-notification {
opacity: 0;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
/*** Progress bar and text ***/
-
@keyframes downloadsIndicatorNotificationStartRight {
from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
20% { opacity: .85; animation-timing-function: ease-out; }
to { opacity: 0; transform: translate(0) scale(1); }
}
@keyframes downloadsIndicatorNotificationStartLeft {
from { opacity: 0; transform: translate(128px, 128px) scale(8); }
@@ -139,8 +127,9 @@ toolbar[brighttext] #downloads-indicator
animation-duration: 1s;
}
@media (min-resolution: 2dppx) {
#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png");
}
}
+%endif
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-arrow-animation.svg
@@ -0,0 +1,405 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="2520" height="128">
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%">
+ <defs>
+ <clipPath id="a">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="70">
+ <defs>
+ <clipPath id="b">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" opacity=".333" clip-path="url(#b)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="13.6197" d="M35 7.068v51.605" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="13.6197" d="M7.332 37.821L35 65.483 62.668 37.82" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="140">
+ <defs>
+ <clipPath id="c">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" opacity=".667" clip-path="url(#c)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="13.19636" d="M35 11.508V61.51" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="13.19636" d="M8.192 41.306L35 68.108l26.808-26.802" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="210">
+ <defs>
+ <clipPath id="d">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#d)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="12.75144" d="M35 16.175V64.49" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="12.75144" d="M9.095 44.968L35 70.866l25.905-25.898" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="280">
+ <defs>
+ <clipPath id="e">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#e)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="12.2951" d="M35 20.962v46.586" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="12.2951" d="M10.022 48.724L35 73.695l24.978-24.971" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="350">
+ <defs>
+ <clipPath id="f">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#f)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="11.83324" d="M35 25.806v44.836" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="11.83324" d="M10.96 52.526L35 76.559l24.04-24.033" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="420">
+ <defs>
+ <clipPath id="g">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#g)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="11.36962" d="M35 30.669v43.08" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="11.36962" d="M11.903 56.342L35 79.433l23.097-23.091" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="490">
+ <defs>
+ <clipPath id="h">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#h)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="10.90698" d="M35 35.522v41.326" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="10.90698" d="M12.842 60.15L35 82.302 57.158 60.15" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="560">
+ <defs>
+ <clipPath id="i">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#i)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="10.44732" d="M35 40.343v39.585" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="10.44732" d="M13.776 63.933L35 85.152l21.224-21.219" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="630">
+ <defs>
+ <clipPath id="j">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#j)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="9.99236" d="M35 45.115v37.861" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="9.99236" d="M14.7 67.678L35 87.972l20.3-20.294" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="700">
+ <defs>
+ <clipPath id="k">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#k)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="9.54348" d="M35 49.823v36.16" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="9.54348" d="M15.612 71.373L35 90.755l19.388-19.382" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="770">
+ <defs>
+ <clipPath id="l">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#l)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="9.10196" d="M35 54.455v34.487" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="9.10196" d="M16.51 75.007L35 93.493l18.49-18.486" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="840">
+ <defs>
+ <clipPath id="m">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#m)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="8.66896" d="M35 58.996v32.847" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="8.66896" d="M17.389 78.57L35 96.178l17.611-17.606" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="910">
+ <defs>
+ <clipPath id="n">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#n)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="8.24562" d="M35 63.437v31.242" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="8.24562" d="M18.249 82.055L35 98.802l16.751-16.747" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="980">
+ <defs>
+ <clipPath id="o">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#o)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="7.83304" d="M35 67.764v29.68" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="7.83304" d="M19.087 85.451L35 101.361l15.913-15.91" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1050">
+ <defs>
+ <clipPath id="p">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#p)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="7.43236" d="M35 71.967v28.161" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="7.43236" d="M19.901 88.75L35 103.843 50.099 88.75" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1120">
+ <defs>
+ <clipPath id="q">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#q)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="7.04474" d="M35 76.033v26.692" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="7.04474" d="M20.689 91.94L35 106.248 49.311 91.94" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1190">
+ <defs>
+ <clipPath id="r">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#r)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="6.67142" d="M35 79.949v25.278" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="6.67142" d="M21.447 95.013L35 108.563l13.553-13.55" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1260">
+ <defs>
+ <clipPath id="s">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#s)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="6.31372" d="M35 83.7v23.923" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="6.31372" d="M22.174 97.957L35 110.78l12.826-12.823" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1330">
+ <defs>
+ <clipPath id="t">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#t)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="5.97308" d="M35 87.273v22.632" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="5.97308" d="M22.866 100.76L35 112.893l12.134-12.131" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1400">
+ <defs>
+ <clipPath id="u">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#u)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="5.65112" d="M35 90.65v21.412" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="5.65112" d="M23.52 103.41L35 114.889l11.48-11.477" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1470">
+ <defs>
+ <clipPath id="v">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#v)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="5.3496" d="M35 93.813v20.27" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="5.3496" d="M24.132 105.892L35 116.757l10.868-10.865" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1540">
+ <defs>
+ <clipPath id="w">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#w)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="5.07054" d="M35 96.74v19.212" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="5.07054" d="M24.7 108.19L35 118.487l10.3-10.299" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1610">
+ <defs>
+ <clipPath id="x">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#x)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4.81624" d="M35 99.407v18.25" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4.81624" d="M25.216 110.283L35 120.064l9.784-9.781" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1680">
+ <defs>
+ <clipPath id="y">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#y)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4.58936" d="M35 101.787v17.39" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4.58936" d="M25.677 112.15L35 121.471l9.323-9.321" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1750">
+ <defs>
+ <clipPath id="z">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#z)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4.393" d="M35 103.847v16.645" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4.393" d="M26.076 113.766L35 122.688l8.924-8.922" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1820">
+ <defs>
+ <clipPath id="A">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#A)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4.2309" d="M35 105.547v16.031" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4.2309" d="M26.405 115.1L35 123.694l8.595-8.592" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1890">
+ <defs>
+ <clipPath id="B">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#B)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4.10748" d="M35 106.842v15.563" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4.10748" d="M26.656 116.116L35 124.46l8.344-8.343" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="1960">
+ <defs>
+ <clipPath id="C">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#C)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4.02824" d="M35 107.673v15.263" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4.02824" d="M26.817 116.769L35 124.95l8.183-8.181" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2030">
+ <defs>
+ <clipPath id="D">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#D)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4" d="M35 107.969v15.156" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M26.874 117.001L35 125.125l8.126-8.124" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2100">
+ <defs>
+ <clipPath id="E">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#E)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4" d="M35 106.884v15.156" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M26.874 115.916L35 124.04l8.126-8.124" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2170">
+ <defs>
+ <clipPath id="F">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#F)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4" d="M35 105.713v15.156" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M26.874 114.745L35 122.869l8.126-8.124" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2240">
+ <defs>
+ <clipPath id="G">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#G)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4" d="M35 104.592v15.156" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M26.874 113.624L35 121.748l8.126-8.124" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2310">
+ <defs>
+ <clipPath id="H">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#H)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4" d="M35 103.577v15.156" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M26.874 112.61L35 120.732l8.126-8.124" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2380">
+ <defs>
+ <clipPath id="I">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#I)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4" d="M35 102.722v15.156" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M26.874 111.754L35 119.878l8.126-8.124" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2450">
+ <defs>
+ <clipPath id="J">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ <g style="-moz-user-select:none" clip-path="url(#J)">
+ <path stroke-linecap="round" stroke="#4C4C4C" stroke-width="4" d="M35 102.1v15.157" fill="none"/>
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M26.874 111.133L35 119.257l8.126-8.124" fill="none"/>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="128" viewBox="0 0 70 128" style="width:100%;height:100%" x="2520">
+ <defs>
+ <clipPath id="K">
+ <path d="M0 0h70v128H0z"/>
+ </clipPath>
+ </defs>
+ </svg>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-bar-animation.svg
@@ -0,0 +1,307 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="1616">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"/>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="16">
+ <path fill="context-fill" d="M3.2 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="32">
+ <path fill="context-fill" d="M3.3 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="48">
+ <path fill="context-fill" d="M3.4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="64">
+ <path fill="context-fill" d="M3.5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="80">
+ <path fill="context-fill" d="M3.6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.59c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="96">
+ <path fill="context-fill" d="M3.7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.69c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="112">
+ <path fill="context-fill" d="M3.8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.79c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="128">
+ <path fill="context-fill" d="M3.9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.89c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="144">
+ <path fill="context-fill" d="M4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h.99c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="160">
+ <path fill="context-fill" d="M4.1 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="176">
+ <path fill="context-fill" d="M4.2 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="192">
+ <path fill="context-fill" d="M4.3 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="208">
+ <path fill="context-fill" d="M4.4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="224">
+ <path fill="context-fill" d="M4.5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="240">
+ <path fill="context-fill" d="M4.6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="256">
+ <path fill="context-fill" d="M4.7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="272">
+ <path fill="context-fill" d="M4.8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="288">
+ <path fill="context-fill" d="M4.9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h1.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="304">
+ <path fill="context-fill" d="M5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="320">
+ <path fill="context-fill" d="M5.1 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="336">
+ <path fill="context-fill" d="M5.2 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="352">
+ <path fill="context-fill" d="M5.3 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="368">
+ <path fill="context-fill" d="M5.4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="384">
+ <path fill="context-fill" d="M5.5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="400">
+ <path fill="context-fill" d="M5.6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="416">
+ <path fill="context-fill" d="M5.7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="432">
+ <path fill="context-fill" d="M5.8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="448">
+ <path fill="context-fill" d="M5.9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h2.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="464">
+ <path fill="context-fill" d="M6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="480">
+ <path fill="context-fill" d="M6.1 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="496">
+ <path fill="context-fill" d="M6.2 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="512">
+ <path fill="context-fill" d="M6.3 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="528">
+ <path fill="context-fill" d="M6.4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="544">
+ <path fill="context-fill" d="M6.5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="560">
+ <path fill="context-fill" d="M6.6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="576">
+ <path fill="context-fill" d="M6.7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="592">
+ <path fill="context-fill" d="M6.8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="608">
+ <path fill="context-fill" d="M6.9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h3.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="624">
+ <path fill="context-fill" d="M7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="640">
+ <path fill="context-fill" d="M7.1 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="656">
+ <path fill="context-fill" d="M7.2 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="672">
+ <path fill="context-fill" d="M7.3 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="688">
+ <path fill="context-fill" d="M7.4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="704">
+ <path fill="context-fill" d="M7.5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="720">
+ <path fill="context-fill" d="M7.6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="736">
+ <path fill="context-fill" d="M7.7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="752">
+ <path fill="context-fill" d="M7.8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="768">
+ <path fill="context-fill" d="M7.9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h4.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="784">
+ <path fill="context-fill" d="M8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="800">
+ <path fill="context-fill" d="M8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="816">
+ <path fill="context-fill" d="M8.1 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="832">
+ <path fill="context-fill" d="M8.2 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="848">
+ <path fill="context-fill" d="M8.3 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="864">
+ <path fill="context-fill" d="M8.4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="880">
+ <path fill="context-fill" d="M8.5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="896">
+ <path fill="context-fill" d="M8.6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="912">
+ <path fill="context-fill" d="M8.7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="928">
+ <path fill="context-fill" d="M8.8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="944">
+ <path fill="context-fill" d="M8.9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h5.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="960">
+ <path fill="context-fill" d="M9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="976">
+ <path fill="context-fill" d="M9.1 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="992">
+ <path fill="context-fill" d="M9.2 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1008">
+ <path fill="context-fill" d="M9.3 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1024">
+ <path fill="context-fill" d="M9.4 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1040">
+ <path fill="context-fill" d="M9.5 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1056">
+ <path fill="context-fill" d="M9.6 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1072">
+ <path fill="context-fill" d="M9.7 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1088">
+ <path fill="context-fill" d="M9.8 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1104">
+ <path fill="context-fill" d="M9.9 14H3c-.6 0-1 .4-1 1s.4 1 1 1h6.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1120">
+ <path fill="context-fill" d="M10 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1136">
+ <path fill="context-fill" d="M10 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1152">
+ <path fill="context-fill" d="M10 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1168">
+ <path fill="context-fill" d="M10 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1184">
+ <path fill="context-fill" d="M10 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1200">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1216">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1232">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1248">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1264">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h7.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1280">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1296">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1312">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1328">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1344">
+ <path fill="context-fill" d="M11 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1360">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1376">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1392">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1408">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1424">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h8.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1440">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1456">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.1c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1472">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.2c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1488">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.3c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1504">
+ <path fill="context-fill" d="M12 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.4c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1520">
+ <path fill="context-fill" d="M13 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.5c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1536">
+ <path fill="context-fill" d="M13 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.6c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1552">
+ <path fill="context-fill" d="M13 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.7c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1568">
+ <path fill="context-fill" d="M13 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.8c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1584">
+ <path fill="context-fill" d="M13 14H3c-.6 0-1 .4-1 1s.4 1 1 1h9.9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" y="1600">
+ <path fill="context-fill" d="M13 14H3c-.6 0-1 .4-1 1s.4 1 1 1h10c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+ </svg>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-library-animation.svg
@@ -0,0 +1,924 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="688" height="40">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%">
+ <defs>
+ <clipPath id="a">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="b">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#a)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="16">
+ <defs>
+ <clipPath id="c">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="d">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#c)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" opacity=".125" mask="url(#d)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 24.932l-.005-20.927M22.59 15.489l-9.468 9.471M3.832 15.342l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="32">
+ <defs>
+ <clipPath id="e">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="f">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#e)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" opacity=".25" mask="url(#f)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 25.11l-.005-20.928M22.59 15.667l-9.468 9.471M3.832 15.52l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="48">
+ <defs>
+ <clipPath id="g">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="h">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#g)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" opacity=".375" mask="url(#h)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 25.305l-.006-20.928M22.59 15.861l-9.468 9.472M3.832 15.715l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="64">
+ <defs>
+ <clipPath id="i">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="j">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#i)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" opacity=".5" mask="url(#j)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 25.517L13.057 4.59M22.59 16.074l-9.468 9.472M3.832 15.927l9.472 9.469" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="80">
+ <defs>
+ <clipPath id="k">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="l">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#k)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" opacity=".625" mask="url(#l)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 25.75l-.005-20.928M22.59 16.306l-9.468 9.472M3.832 16.16l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="96">
+ <defs>
+ <clipPath id="m">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="n">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#m)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" opacity=".75" mask="url(#n)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 26.003l-.005-20.928M22.59 16.56l-9.468 9.471M3.832 16.413l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="112">
+ <defs>
+ <clipPath id="o">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="p">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#o)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" opacity=".875" mask="url(#p)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 26.279L13.057 5.35M22.59 16.836l-9.468 9.471M3.832 16.689l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="128">
+ <defs>
+ <clipPath id="q">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="r">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#q)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#r)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 26.58l-.005-20.928M22.59 17.136c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 16.99l9.472 9.467" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="144">
+ <defs>
+ <clipPath id="s">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="t">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#s)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#t)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 26.907l-.006-20.928M22.59 17.463l-9.468 9.472M3.832 17.317l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="160">
+ <defs>
+ <clipPath id="u">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="v">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#u)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#v)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 27.263l-.006-20.927M22.59 17.82l-9.468 9.471M3.832 17.673l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="176">
+ <defs>
+ <clipPath id="w">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="x">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#w)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#x)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 27.652l-.006-20.928M22.59 18.208l-9.468 9.472M3.832 18.062l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="192">
+ <defs>
+ <clipPath id="y">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="z">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#y)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#z)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 28.076L13.057 7.15M22.59 18.633c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 18.486c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="208">
+ <defs>
+ <clipPath id="A">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="B">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#A)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#B)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 28.54l-.005-20.927M22.59 19.097l-9.468 9.471M3.832 18.95l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="224">
+ <defs>
+ <clipPath id="C">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="D">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#C)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#D)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 29.048l-.006-20.927M22.59 19.605c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 19.458c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="240">
+ <defs>
+ <clipPath id="E">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="F">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#E)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#F)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 29.607l-.005-20.928M22.59 20.163l-9.468 9.472M3.832 20.017l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="256">
+ <defs>
+ <clipPath id="G">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="H">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#G)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#H)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 30.222l-.005-20.927M22.59 20.779c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 20.632c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="272">
+ <defs>
+ <clipPath id="I">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="J">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#I)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#J)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 30.903l-.005-20.927M22.59 21.46l-9.468 9.472M3.832 21.313l9.472 9.469" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="288">
+ <defs>
+ <clipPath id="K">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="L">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#K)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#L)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 31.661l-.005-20.927M22.59 22.218l-9.468 9.472M3.832 22.071l9.472 9.469" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="304">
+ <defs>
+ <clipPath id="M">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="N">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#M)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#N)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 32.51l-.005-20.927M22.59 23.067l-9.468 9.471M3.832 22.92l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="320">
+ <defs>
+ <clipPath id="O">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="P">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#O)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#P)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 33.468l-.005-20.928M22.59 24.025l-9.468 9.471M3.832 23.878l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="336">
+ <defs>
+ <clipPath id="Q">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="R">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#Q)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#R)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 34.56l-.005-20.928M22.59 25.116l-9.468 9.472M3.832 24.97l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="352">
+ <defs>
+ <clipPath id="S">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="T">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#S)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#T)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 35.82l-.005-20.927M22.59 26.377l-9.468 9.472M3.832 26.23l9.472 9.469" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="368">
+ <defs>
+ <clipPath id="U">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="V">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#U)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#V)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 37.301l-.006-20.927M22.59 27.858l-9.468 9.471M3.832 27.711l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="384">
+ <defs>
+ <clipPath id="W">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="X">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#W)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#X)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 39.078l-.006-20.928M22.59 29.635l-9.468 9.471M3.832 29.488l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="400">
+ <defs>
+ <clipPath id="Y">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="Z">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#Y)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#Z)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 41.272l-.006-20.927M22.59 31.829c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 31.682c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="416">
+ <defs>
+ <clipPath id="aa">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="ab">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.465)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.41l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938L15 43.59l7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aa)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#44535E" stroke-width="4" d="M2 43.465v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#ab)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 44.29l-.006-20.928M22.59 34.846c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 34.7l9.472 9.467" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="432">
+ <defs>
+ <clipPath id="ac">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="ad">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 59.032)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-17.843l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#ac)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#3D5970" stroke-width="4" d="M2 44.032v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#ad)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 48.496l-.006-20.927M22.59 39.053c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 38.906c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="448">
+ <defs>
+ <clipPath id="ae">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="af">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 59.832)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-17.043l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#ae)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#356082" stroke-width="4" d="M2 44.832v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#af)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 53.63l-.006-20.927M22.59 44.187c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 44.04c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="464">
+ <defs>
+ <clipPath id="ag">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="ah">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 60.75)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-16.125l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 50.5l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#ag)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#2D6793" stroke-width="4" d="M2 45.75v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#ah)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 58.535l-.006-20.928M22.59 49.092l-9.468 9.471M3.832 48.945l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="480">
+ <defs>
+ <clipPath id="ai">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="aj">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 61.668)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-15.207l-15.5 48.625 21.375 12 5.5-.75 3-.25L5.5 48.84l5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#ai)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#266DA5" stroke-width="4" d="M2 46.668v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#aj)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 62.453l-.006-20.927M22.59 53.01c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 52.863c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="496">
+ <defs>
+ <clipPath id="ak">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="al">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 62.468)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-14.407l-15.5 48.625 21.375 12 5.5-.75 3-.25L5.5 49.64l5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#ak)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#1E74B7" stroke-width="4" d="M2 47.468v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#al)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 65.452l-.006-20.927M22.59 56.01l-9.468 9.47M3.832 55.862l9.472 9.469" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="512">
+ <defs>
+ <clipPath id="am">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="an">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 63.035)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-13.84l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938L15 48.16l7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#am)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#167AC9" stroke-width="4" d="M2 48.035v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#an)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 67.684l-.006-20.928M22.59 58.24l-9.468 9.472M3.832 58.094l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="528">
+ <defs>
+ <clipPath id="ao">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="ap">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 63.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-13.625L-26.625 35-5.25 47l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 53l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#ao)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#0F81DB" stroke-width="4" d="M2 48.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#ap)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 69.204l-.006-20.927M22.59 59.761c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 59.614c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="544">
+ <defs>
+ <clipPath id="aq">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="ar">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 63.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-13.625L-26.625 35-5.25 47l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 53l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aq)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#0788ED" stroke-width="4" d="M2 48.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#ar)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 70.255l-.006-20.927M22.59 60.812c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 60.665c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="560">
+ <defs>
+ <clipPath id="as">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="at">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 63.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-13.625L-26.625 35-5.25 47l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 53l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#as)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 48.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#at)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 71.118l-.005-20.928M22.59 61.675l-9.468 9.471M3.832 61.528l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="576">
+ <defs>
+ <clipPath id="au">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="av">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 63.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-13.625L-26.625 35-5.25 47l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 53l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#au)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 48.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#av)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.062 71.836l-.005-20.928M22.59 62.392l-9.468 9.472M3.832 62.246l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="592">
+ <defs>
+ <clipPath id="aw">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="ax">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 63.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-13.625L-26.625 35-5.25 47l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 53l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aw)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 48.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#ax)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 72.439l-.006-20.928M22.59 62.996l-9.468 9.471M3.832 62.849l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="608">
+ <defs>
+ <clipPath id="ay">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="az">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 62.88)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-13.996l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#ay)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 47.88v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#az)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 72.578l-.006-20.927M22.59 63.135c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 62.988c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="624">
+ <defs>
+ <clipPath id="aA">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="aB">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 61.953)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-14.922l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aA)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 46.953v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#aB)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 72.085l-.006-20.928M22.59 62.642l-9.468 9.471M3.832 62.495l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="640">
+ <defs>
+ <clipPath id="aC">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="aD">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 60.75)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-16.125l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 50.5l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aC)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 45.75v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#aD)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 71.25l-.006-20.928M22.59 61.806c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 61.66l9.472 9.467" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="656">
+ <defs>
+ <clipPath id="aE">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="aF">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 59.547)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-17.328l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aE)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 44.547v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#aF)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 70.358l-.006-20.928M22.59 60.914l-9.468 9.472M3.832 60.768l9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="672">
+ <defs>
+ <clipPath id="aG">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="aH">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.62)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.254l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aG)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#008EFF" stroke-width="4" d="M2 43.62v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ <g style="-moz-user-select:none" mask="url(#aH)">
+ <path stroke-linecap="round" stroke="#008EFF" stroke-width="5" d="M13.063 69.695l-.006-20.927M22.59 60.252c-4.24 4.24-9.468 9.472-9.468 9.472M3.832 60.105c4.241 4.241 9.472 9.468 9.472 9.468" fill="none"/>
+ </g>
+ </g>
+ </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="40" viewBox="0 0 30 75" style="width:100%;height:100%" x="688">
+ <defs>
+ <clipPath id="aI">
+ <path d="M0 0h30v75H0z"/>
+ </clipPath>
+ <mask id="aJ">
+ <g style="-moz-user-select:none">
+ <path fill="#11DBEA" d="M-29.125-76.875l-15.5 48.625 21.375 12 5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25 6.75-2.125 2.75-18.125 6-25.25-.75-22.25-51.625-1z" transform="translate(18 58.25)"/>
+ <path fill-opacity="0" stroke="#871111" stroke-width="0" d="M-11.125-18.625L-26.625 30-5.25 42l5.5-.75 3-.25 2.25 4.422 5.5.016.75-1.938 3.25-.125 7.625.5 3.125 6.25L32.5 48l2.75-18.125 6-25.25-.75-22.25-51.625-1z"/>
+ </g>
+ </mask>
+ </defs>
+ <g clip-path="url(#aI)">
+ <g style="-moz-user-select:none">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke="#4C4C4C" stroke-width="4" d="M2 43.25v24m6-20v20m6-22v22m14 0l-8-22" fill="none"/>
+ </g>
+ </g>
+ </svg>
+</svg>
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,12 +1,55 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+#downloads-indicator-anchor {
+ min-width: 16px;
+ min-height: 16px;
+}
+
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-indicator-progress-icon {
+ width: 16px;
+ height: 1616px;
+ background: url("chrome://browser/skin/downloads/download-bar-animation.svg") bottom no-repeat;
+ transform: translateY(0px);
+ -moz-context-properties: fill;
+ fill: var(--toolbarbutton-icon-fill-attention);
+ /* From javascript side we use animation delay from 0s to -100s to show
+ * corresponding frames needed for progress.
+ * animation-delay is set to a positive value to make nothing shown.
+ */
+ animation-play-state: paused;
+ animation-delay: 1s;
+ animation-duration: 100s;
+ animation-timing-function: steps(100);
+ animation-name: indicatorProgressBar;
+}
+
+toolbar[brighttext] #downloads-indicator-progress-icon {
+ animation-name: indicatorProgressBarDark;
+}
+
+@keyframes indicatorProgressBar {
+ from { transform: translateY(0); }
+ to { transform: translateY(-1600px); }
+}
+@keyframes indicatorProgressBarDark {
+ 0% {
+ transform: transform: translateY(0);
+ filter: brightness(0.7);
+ }
+ 100% {
+ transform: translateY(-1600px);
+ filter: brightness(1);
+ }
+}
+%else
#downloads-indicator-progress-icon {
background: var(--downloads-indicator-image) bottom no-repeat;
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill-attention);
background-size: 16px;
margin-top: 16px;
/* From javascript side we use animation delay from 0s to -100s to show
* corresponding frames needed for progress.
@@ -62,8 +105,103 @@ toolbar[brighttext] #downloads-indicator
50% {
transform: translateY(-3px);
animation-timing-function: ease-in;
}
100% {
transform: translateY(0);
}
}
+%endif
+
+/*** Shared download notification animation */
+
+/*** Status and progress indicator ***/
+#downloads-animation-container {
+ min-height: 1px;
+ min-width: 1px;
+ height: 1px;
+ margin-bottom: -1px;
+ /* Makes the outermost animation container element positioned, so that its
+ contents are rendered over the main browser window in the Z order.
+ This is required by the animated event notification. */
+ position: relative;
+ /* The selected tab may overlap #downloads-indicator-notification */
+ z-index: 5;
+}
+
+%ifdef MOZ_PHOTON_ANIMATIONS
+/* download start animation */
+#downloads-indicator-notification {
+ opacity: 0;
+ width: 2520px;
+ height: 128px;
+ background-image: url("chrome://browser/skin/downloads/download-arrow-animation.svg");
+ transform: translateX(0px);
+ background-repeat: no-repeat;
+}
+
+#downloads-notification-anchor {
+ width: 70px;
+ height: 128px;
+ overflow: hidden;
+ margin-top: -55px;
+}
+
+@keyframes downloadsIndicatorNotificationStart {
+ from { transform: translateX(0); }
+ to { transform: translateX(-2450px); }
+}
+
+#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
+ opacity: 1;
+ animation-name: downloadsIndicatorNotificationStart;
+ animation-duration: 600ms;
+ animation-timing-function: steps(35);
+ will-change: transform;
+}
+
+/* download finish animation */
+#downloads-library-animation {
+ opacity: 0;
+ width: 688px;
+ height: 40px;
+ background-image: url("chrome://browser/skin/downloads/download-library-animation.svg");
+ transform: translateX(0px);
+ background-repeat: no-repeat;
+}
+
+#downloads-complete-anchor {
+ width: 16px;
+ height: 40px;
+ overflow: hidden;
+ margin-top: -10px;
+}
+
+@keyframes downloadsCompleteInLibrary {
+ from { transform: translateX(0); }
+ to { transform: translateX(-672px); }
+}
+
+#downloads-complete-anchor[notification="finish"] > #downloads-library-animation {
+ opacity: 1;
+ animation-name: downloadsCompleteInLibrary;
+ animation-duration: 716.67ms;
+ animation-timing-function: steps(42);
+}
+
+%endif
+
+#downloads-button {
+%ifdef MOZ_PHOTON_ANIMATIONS
+ --downloads-indicator-image: url("chrome://browser/skin/download-arrow.svg");
+%else
+ --downloads-indicator-image: url("chrome://browser/skin/download.svg");
+%endif
+}
+
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-icon,
+#downloads-button[progress][cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+ fill: var(--toolbarbutton-icon-fill-attention);
+}
+%endif
+
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/download-arrow.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M7.3 12.7c.4.4 1 .4 1.4 0l5-5c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L9 9.6V1c0-.6-.4-1-1-1S7 .4 7 1v8.6L3.7 6.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l5 5z"/>
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -53,16 +53,19 @@
skin/classic/browser/sidebar/close.svg (../shared/sidebar/close.svg)
skin/classic/browser/sidebar/history.svg (../shared/sidebar/history.svg)
skin/classic/browser/sidebar/sync.svg (../shared/sidebar/sync.svg)
skin/classic/browser/customizableui/whimsy.png (../shared/customizableui/whimsy.png)
skin/classic/browser/customizableui/whimsy@2x.png (../shared/customizableui/whimsy@2x.png)
skin/classic/browser/downloads/contentAreaDownloadsView.css (../shared/downloads/contentAreaDownloadsView.css)
skin/classic/browser/downloads/download-blocked.svg (../shared/downloads/download-blocked.svg)
skin/classic/browser/downloads/download-summary.svg (../shared/downloads/download-summary.svg)
+ skin/classic/browser/downloads/download-arrow-animation.svg (../shared/downloads/download-arrow-animation.svg)
+ skin/classic/browser/downloads/download-library-animation.svg (../shared/downloads/download-library-animation.svg)
+ skin/classic/browser/downloads/download-bar-animation.svg (../shared/downloads/download-bar-animation.svg)
skin/classic/browser/drm-icon.svg (../shared/drm-icon.svg)
skin/classic/browser/fullscreen/insecure.svg (../shared/fullscreen/insecure.svg)
skin/classic/browser/fullscreen/secure.svg (../shared/fullscreen/secure.svg)
skin/classic/browser/heartbeat-icon.svg (../shared/heartbeat-icon.svg)
skin/classic/browser/heartbeat-star-lit.svg (../shared/heartbeat-star-lit.svg)
skin/classic/browser/heartbeat-star-off.svg (../shared/heartbeat-star-off.svg)
skin/classic/browser/connection-secure.svg (../shared/identity-block/connection-secure.svg)
skin/classic/browser/connection-mixed-passive-loaded.svg (../shared/identity-block/connection-mixed-passive-loaded.svg)
@@ -102,16 +105,17 @@
skin/classic/browser/bookmark.svg (../shared/icons/bookmark.svg)
skin/classic/browser/bookmark-hollow.svg (../shared/icons/bookmark-hollow.svg)
skin/classic/browser/bookmarksMenu.svg (../shared/icons/bookmarksMenu.svg)
skin/classic/browser/characterEncoding.svg (../shared/icons/characterEncoding.svg)
skin/classic/browser/chevron.svg (../shared/icons/chevron.svg)
skin/classic/browser/containers.svg (../shared/icons/containers.svg)
skin/classic/browser/developer.svg (../shared/icons/developer.svg)
skin/classic/browser/download.svg (../shared/icons/download.svg)
+ skin/classic/browser/download-arrow.svg (../shared/icons/download-arrow.svg)
skin/classic/browser/edit-copy.svg (../shared/icons/edit-copy.svg)
skin/classic/browser/edit-cut.svg (../shared/icons/edit-cut.svg)
skin/classic/browser/edit-paste.svg (../shared/icons/edit-paste.svg)
skin/classic/browser/feed.svg (../shared/icons/feed.svg)
skin/classic/browser/find.svg (../shared/icons/find.svg)
skin/classic/browser/forget.svg (../shared/icons/forget.svg)
skin/classic/browser/forward.svg (../shared/icons/forward.svg)
skin/classic/browser/fullscreen.svg (../shared/icons/fullscreen.svg)
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -62,17 +62,21 @@ toolbar:not([brighttext]) #bookmarks-men
list-style-image: url("chrome://browser/skin/bookmarksMenu.svg");
}
#history-panelmenu[cui-areatype="toolbar"] {
list-style-image: url("chrome://browser/skin/history.svg");
}
#downloads-button[cui-areatype="toolbar"] {
+%ifdef MOZ_PHOTON_ANIMATIONS
+ list-style-image: url("chrome://browser/skin/download-arrow.svg");
+%else
list-style-image: url("chrome://browser/skin/download.svg");
+%endif
}
#add-ons-button[cui-areatype="toolbar"] {
list-style-image: url("chrome://browser/skin/addons.svg");
}
#open-file-button[cui-areatype="toolbar"] {
list-style-image: url("chrome://browser/skin/open.svg");
--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -1,42 +1,26 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/downloads/indicator.inc.css
-/*** Status and progress indicator ***/
-
-#downloads-animation-container {
- min-height: 1px;
- min-width: 1px;
- height: 1px;
- margin-bottom: -1px;
- /* Makes the outermost animation container element positioned, so that its
- contents are rendered over the main browser window in the Z order.
- This is required by the animated event notification. */
- position: relative;
- /* The selected tab may overlap #downloads-indicator-notification */
- z-index: 5;
-}
-
/*** Main indicator icon ***/
-#downloads-button {
- --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-}
-
#downloads-indicator-icon {
background: var(--downloads-indicator-image) center no-repeat;
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill);
width: 16px;
height: 16px;
background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+ overflow: hidden;
+%endif
}
toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
fill: var(--toolbarbutton-icon-fill-inverted);
}
#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
@@ -72,16 +56,17 @@ toolbar[brighttext] #downloads-button:no
fill: var(--toolbarbutton-icon-fill-attention);
}
#downloads-button[cui-areatype="menu-panel"][attention="success"] {
list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
-moz-image-region: auto;
}
+%ifndef MOZ_PHOTON_ANIMATIONS
/*** Download notifications ***/
#downloads-indicator-notification {
opacity: 0;
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
@@ -116,8 +101,9 @@ toolbar[brighttext] #downloads-button:no
to { opacity: 0; transform: scale(8); }
}
#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
animation-name: downloadsIndicatorNotificationFinish;
animation-duration: 1s;
}
+%endif
--- a/toolkit/modules/AppConstants.jsm
+++ b/toolkit/modules/AppConstants.jsm
@@ -349,9 +349,17 @@ this.AppConstants = Object.freeze({
#endif
HAVE_SHELL_SERVICE:
#ifdef HAVE_SHELL_SERVICE
true,
#else
false,
#endif
+
+ MOZ_PHOTON_ANIMATIONS:
+#ifdef MOZ_PHOTON_ANIMATIONS
+ true,
+#else
+ false,
+#endif
+
});
