зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1387077 - Reimplement Pocket animation in the Page Action area. r=adw
MozReview-Commit-ID: 5pJ96un8W5t --HG-- extra : rebase_source : bef396788013f8ed60d72b01bf59e34e01d36209
This commit is contained in:
Родитель
7cdf3d96ac
Коммит
8880224f6b
|
@ -69,6 +69,7 @@ var BrowserPageActions = {
|
||||||
this._appendPanelSeparator(action);
|
this._appendPanelSeparator(action);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
action.onBeforePlacedInWindow(window);
|
||||||
this.placeActionInPanel(action, panelInsertBeforeID);
|
this.placeActionInPanel(action, panelInsertBeforeID);
|
||||||
this.placeActionInUrlbar(action, urlbarInsertBeforeID);
|
this.placeActionInUrlbar(action, urlbarInsertBeforeID);
|
||||||
},
|
},
|
||||||
|
@ -176,7 +177,7 @@ var BrowserPageActions = {
|
||||||
let panelNode = document.getElementById(panelNodeID);
|
let panelNode = document.getElementById(panelNodeID);
|
||||||
if (panelNode) {
|
if (panelNode) {
|
||||||
panelNode.hidePopup();
|
panelNode.hidePopup();
|
||||||
return;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
panelNode = document.createElement("panel");
|
panelNode = document.createElement("panel");
|
||||||
|
@ -205,9 +206,18 @@ var BrowserPageActions = {
|
||||||
let popupSet = document.getElementById("mainPopupSet");
|
let popupSet = document.getElementById("mainPopupSet");
|
||||||
popupSet.appendChild(panelNode);
|
popupSet.appendChild(panelNode);
|
||||||
panelNode.addEventListener("popuphidden", () => {
|
panelNode.addEventListener("popuphidden", () => {
|
||||||
|
if (iframeNode) {
|
||||||
|
action.onIframeHidden(iframeNode, panelNode);
|
||||||
|
}
|
||||||
panelNode.remove();
|
panelNode.remove();
|
||||||
}, { once: true });
|
}, { once: true });
|
||||||
|
|
||||||
|
panelNode.addEventListener("popuphiding", () => {
|
||||||
|
if (iframeNode) {
|
||||||
|
action.onIframeHiding(iframeNode, panelNode);
|
||||||
|
}
|
||||||
|
}, { once: true });
|
||||||
|
|
||||||
if (panelViewNode) {
|
if (panelViewNode) {
|
||||||
action.subview.onPlaced(panelViewNode);
|
action.subview.onPlaced(panelViewNode);
|
||||||
action.subview.onShowing(panelViewNode);
|
action.subview.onShowing(panelViewNode);
|
||||||
|
@ -216,13 +226,22 @@ var BrowserPageActions = {
|
||||||
this.panelNode.hidePopup();
|
this.panelNode.hidePopup();
|
||||||
|
|
||||||
let urlbarNodeID = this._urlbarButtonNodeIDForActionID(action.id);
|
let urlbarNodeID = this._urlbarButtonNodeIDForActionID(action.id);
|
||||||
let anchorNode =
|
let urlbarNode = document.getElementById(urlbarNodeID);
|
||||||
document.getElementById(urlbarNodeID) || this.mainButtonNode;
|
let anchorNode;
|
||||||
|
if (urlbarNode && !urlbarNode.hidden) {
|
||||||
|
anchorNode = action.anchorIDOverride ?
|
||||||
|
document.getElementById(action.anchorIDOverride) :
|
||||||
|
urlbarNode;
|
||||||
|
} else {
|
||||||
|
anchorNode = this.mainButtonNode;
|
||||||
|
}
|
||||||
panelNode.openPopup(anchorNode, "bottomcenter topright");
|
panelNode.openPopup(anchorNode, "bottomcenter topright");
|
||||||
|
|
||||||
if (iframeNode) {
|
if (iframeNode) {
|
||||||
action.onIframeShown(iframeNode, panelNode);
|
action.onIframeShown(iframeNode, panelNode);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return panelNode;
|
||||||
},
|
},
|
||||||
|
|
||||||
get _tempPanelID() {
|
get _tempPanelID() {
|
||||||
|
@ -411,6 +430,14 @@ var BrowserPageActions = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
doCommandForAction(action) {
|
||||||
|
if (action.subview || action.wantsIframe) {
|
||||||
|
this._toggleTempPanelForAction(action);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
action.onCommand();
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the action for a node.
|
* Returns the action for a node.
|
||||||
*
|
*
|
||||||
|
|
|
@ -664,7 +664,7 @@ html|input.urlbar-input[textoverflow]:not([focused]) {
|
||||||
}
|
}
|
||||||
|
|
||||||
#urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon,
|
#urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon,
|
||||||
#urlbar[pageproxystate="invalid"] > #urlbar-icons > #star-button-box > .urlbar-icon,
|
#urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon-wrapper > .urlbar-icon,
|
||||||
.urlbar-go-button[pageproxystate="valid"],
|
.urlbar-go-button[pageproxystate="valid"],
|
||||||
.urlbar-go-button:not([parentfocused="true"]),
|
.urlbar-go-button:not([parentfocused="true"]),
|
||||||
#urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container,
|
#urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container,
|
||||||
|
|
|
@ -899,6 +899,7 @@
|
||||||
onclick="BrowserPageActions.mainButtonClicked(event);"/>
|
onclick="BrowserPageActions.mainButtonClicked(event);"/>
|
||||||
<hbox id="star-button-box"
|
<hbox id="star-button-box"
|
||||||
hidden="true"
|
hidden="true"
|
||||||
|
class="urlbar-icon-wrapper"
|
||||||
context="pageActionPanelContextMenu"
|
context="pageActionPanelContextMenu"
|
||||||
oncontextmenu="BrowserPageActions.onContextMenu(event);"
|
oncontextmenu="BrowserPageActions.onContextMenu(event);"
|
||||||
onclick="BrowserPageActions.bookmark.onUrlbarNodeClicked(event);">
|
onclick="BrowserPageActions.bookmark.onUrlbarNodeClicked(event);">
|
||||||
|
|
|
@ -10,22 +10,24 @@ const {classes: Cc, interfaces: Ci, utils: Cu, manager: Cm} = Components;
|
||||||
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
|
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
|
||||||
Cu.import("resource://services-common/utils.js");
|
Cu.import("resource://services-common/utils.js");
|
||||||
Cu.import("resource://gre/modules/AppConstants.jsm");
|
Cu.import("resource://gre/modules/AppConstants.jsm");
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "Services",
|
XPCOMUtils.defineLazyModuleGetter(this, "AboutPocket",
|
||||||
"resource://gre/modules/Services.jsm");
|
"chrome://pocket/content/AboutPocket.jsm");
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "RecentWindow",
|
XPCOMUtils.defineLazyModuleGetter(this, "AddonManagerPrivate",
|
||||||
"resource:///modules/RecentWindow.jsm");
|
"resource://gre/modules/AddonManager.jsm");
|
||||||
|
XPCOMUtils.defineLazyModuleGetter(this, "BrowserUtils",
|
||||||
|
"resource://gre/modules/BrowserUtils.jsm");
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
|
XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
|
||||||
"resource:///modules/CustomizableUI.jsm");
|
"resource:///modules/CustomizableUI.jsm");
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "PageActions",
|
XPCOMUtils.defineLazyModuleGetter(this, "PageActions",
|
||||||
"resource:///modules/PageActions.jsm");
|
"resource:///modules/PageActions.jsm");
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "AddonManagerPrivate",
|
|
||||||
"resource://gre/modules/AddonManager.jsm");
|
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode",
|
|
||||||
"resource://gre/modules/ReaderMode.jsm");
|
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "Pocket",
|
XPCOMUtils.defineLazyModuleGetter(this, "Pocket",
|
||||||
"chrome://pocket/content/Pocket.jsm");
|
"chrome://pocket/content/Pocket.jsm");
|
||||||
XPCOMUtils.defineLazyModuleGetter(this, "AboutPocket",
|
XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode",
|
||||||
"chrome://pocket/content/AboutPocket.jsm");
|
"resource://gre/modules/ReaderMode.jsm");
|
||||||
|
XPCOMUtils.defineLazyModuleGetter(this, "RecentWindow",
|
||||||
|
"resource:///modules/RecentWindow.jsm");
|
||||||
|
XPCOMUtils.defineLazyModuleGetter(this, "Services",
|
||||||
|
"resource://gre/modules/Services.jsm");
|
||||||
XPCOMUtils.defineLazyGetter(this, "gPocketBundle", function() {
|
XPCOMUtils.defineLazyGetter(this, "gPocketBundle", function() {
|
||||||
return Services.strings.createBundle("chrome://pocket/locale/pocket.properties");
|
return Services.strings.createBundle("chrome://pocket/locale/pocket.properties");
|
||||||
});
|
});
|
||||||
|
@ -158,6 +160,7 @@ function isPocketEnabled() {
|
||||||
|
|
||||||
var PocketPageAction = {
|
var PocketPageAction = {
|
||||||
pageAction: null,
|
pageAction: null,
|
||||||
|
urlbarNode: null,
|
||||||
|
|
||||||
get shouldUse() {
|
get shouldUse() {
|
||||||
return !Services.prefs.getBranch(PREF_BRANCH)
|
return !Services.prefs.getBranch(PREF_BRANCH)
|
||||||
|
@ -180,12 +183,72 @@ var PocketPageAction = {
|
||||||
title: gPocketBundle.GetStringFromName("pocket-button.label"),
|
title: gPocketBundle.GetStringFromName("pocket-button.label"),
|
||||||
shownInUrlbar: true,
|
shownInUrlbar: true,
|
||||||
wantsIframe: true,
|
wantsIframe: true,
|
||||||
|
urlbarIDOverride: "pocket-button-box",
|
||||||
|
anchorIDOverride: "pocket-button",
|
||||||
_insertBeforeActionID: PageActions.ACTION_ID_BOOKMARK_SEPARATOR,
|
_insertBeforeActionID: PageActions.ACTION_ID_BOOKMARK_SEPARATOR,
|
||||||
|
_urlbarNodeInMarkup: true,
|
||||||
|
onBeforePlacedInWindow(window) {
|
||||||
|
let doc = window.document;
|
||||||
|
|
||||||
|
if (doc.getElementById("pocket-button-box")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let wrapper = doc.createElement("hbox");
|
||||||
|
wrapper.id = "pocket-button-box";
|
||||||
|
wrapper.classList.add("urlbar-icon-wrapper");
|
||||||
|
wrapper.setAttribute("context", "pageActionPanelContextMenu");
|
||||||
|
wrapper.addEventListener("contextmenu", event => {
|
||||||
|
window.BrowserPageActions.onContextMenu(event);
|
||||||
|
});
|
||||||
|
let animatableBox = doc.createElement("hbox");
|
||||||
|
animatableBox.id = "pocket-animatable-box";
|
||||||
|
let animatableImage = doc.createElement("image");
|
||||||
|
animatableImage.id = "pocket-animatable-image";
|
||||||
|
let pocketButton = doc.createElement("image");
|
||||||
|
pocketButton.id = "pocket-button";
|
||||||
|
pocketButton.classList.add("urlbar-icon");
|
||||||
|
|
||||||
|
wrapper.appendChild(pocketButton);
|
||||||
|
wrapper.appendChild(animatableBox);
|
||||||
|
animatableBox.appendChild(animatableImage);
|
||||||
|
let iconBox = doc.getElementById("urlbar-icons");
|
||||||
|
iconBox.appendChild(wrapper);
|
||||||
|
wrapper.hidden = true;
|
||||||
|
wrapper.addEventListener("click", event => {
|
||||||
|
PocketPageAction.onUrlbarNodeClicked(event);
|
||||||
|
});
|
||||||
|
},
|
||||||
onPlacedInPanel(panelNode, urlbarNode) {
|
onPlacedInPanel(panelNode, urlbarNode) {
|
||||||
PocketOverlay.onWindowOpened(panelNode.ownerGlobal);
|
PocketOverlay.onWindowOpened(panelNode.ownerGlobal);
|
||||||
},
|
},
|
||||||
onIframeShown(iframe, panel) {
|
onIframeShown(iframe, panel) {
|
||||||
Pocket.onShownInPhotonPageActionPanel(panel, iframe);
|
Pocket.onShownInPhotonPageActionPanel(panel, iframe);
|
||||||
|
|
||||||
|
let doc = panel.ownerDocument;
|
||||||
|
let urlbarNode = doc.getElementById("pocket-button-box");
|
||||||
|
if (!urlbarNode || urlbarNode.hidden) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
PocketPageAction.urlbarNode = urlbarNode;
|
||||||
|
PocketPageAction.urlbarNode.setAttribute("open", "true");
|
||||||
|
if (Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled")) {
|
||||||
|
PocketPageAction.urlbarNode.setAttribute("animate", "true");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onIframeHiding(iframe, panel) {
|
||||||
|
if (iframe.getAttribute("itemAdded") == "true") {
|
||||||
|
PocketPageAction.startLibraryAnimation(iframe.ownerDocument);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onIframeHidden(iframe, panel) {
|
||||||
|
if (!PocketPageAction.urlbarNode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
PocketPageAction.urlbarNode.removeAttribute("animate");
|
||||||
|
PocketPageAction.urlbarNode.removeAttribute("open");
|
||||||
|
PocketPageAction.urlbarNode = null;
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
@ -195,9 +258,56 @@ var PocketPageAction = {
|
||||||
if (!this.pageAction) {
|
if (!this.pageAction) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (let win of browserWindows()) {
|
||||||
|
let doc = win.document;
|
||||||
|
let pocketButtonBox = doc.getElementById("pocket-button-box");
|
||||||
|
if (pocketButtonBox) {
|
||||||
|
pocketButtonBox.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.pageAction.remove();
|
this.pageAction.remove();
|
||||||
this.pageAction = null;
|
this.pageAction = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onUrlbarNodeClicked(event) {
|
||||||
|
if (event.type == "click" && event.button != 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
BrowserUtils.setToolbarButtonHeightProperty(event.target);
|
||||||
|
|
||||||
|
let win = event.target.ownerGlobal;
|
||||||
|
let browserPageActions = win.BrowserPageActions;
|
||||||
|
browserPageActions.doCommandForAction(PocketPageAction.pageAction);
|
||||||
|
},
|
||||||
|
|
||||||
|
startLibraryAnimation(doc) {
|
||||||
|
var libraryButton = doc.getElementById("library-button");
|
||||||
|
if (!Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled") ||
|
||||||
|
!libraryButton ||
|
||||||
|
libraryButton.getAttribute("cui-areatype") == "menu-panel" ||
|
||||||
|
libraryButton.getAttribute("overflowedItem") == "true" ||
|
||||||
|
!libraryButton.closest("#nav-bar")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
libraryButton.removeAttribute("fade");
|
||||||
|
libraryButton.setAttribute("animate", "pocket");
|
||||||
|
libraryButton.addEventListener("animationend", PocketPageAction.onLibraryButtonAnimationEnd);
|
||||||
|
},
|
||||||
|
|
||||||
|
onLibraryButtonAnimationEnd(event) {
|
||||||
|
let doc = event.target.ownerDocument;
|
||||||
|
let libraryButton = doc.getElementById("library-button");
|
||||||
|
if (event.animationName.startsWith("library-pocket-animation")) {
|
||||||
|
libraryButton.setAttribute("fade", "true");
|
||||||
|
} else if (event.animationName == "library-pocket-fade") {
|
||||||
|
libraryButton.removeEventListener("animationend", PocketPageAction.onLibraryButtonAnimationEnd);
|
||||||
|
libraryButton.removeAttribute("animate");
|
||||||
|
libraryButton.removeAttribute("fade");
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// PocketContextMenu
|
// PocketContextMenu
|
||||||
|
|
|
@ -225,6 +225,7 @@ var pktUI = (function() {
|
||||||
onShow() {
|
onShow() {
|
||||||
var saveLinkMessageId = "saveLink";
|
var saveLinkMessageId = "saveLink";
|
||||||
_lastAddSucceeded = false;
|
_lastAddSucceeded = false;
|
||||||
|
getPanelFrame().setAttribute("itemAdded", "false");
|
||||||
|
|
||||||
// Send error message for invalid url
|
// Send error message for invalid url
|
||||||
if (!isValidURL) {
|
if (!isValidURL) {
|
||||||
|
@ -257,6 +258,7 @@ var pktUI = (function() {
|
||||||
};
|
};
|
||||||
pktUIMessaging.sendMessageToPanel(panelId, saveLinkMessageId, successResponse);
|
pktUIMessaging.sendMessageToPanel(panelId, saveLinkMessageId, successResponse);
|
||||||
_lastAddSucceeded = true;
|
_lastAddSucceeded = true;
|
||||||
|
getPanelFrame().setAttribute("itemAdded", "true");
|
||||||
},
|
},
|
||||||
error(error, request) {
|
error(error, request) {
|
||||||
// If user is not authorized show singup page
|
// If user is not authorized show singup page
|
||||||
|
@ -487,6 +489,7 @@ var pktUI = (function() {
|
||||||
var successResponse = {status: "success"};
|
var successResponse = {status: "success"};
|
||||||
pktUIMessaging.sendResponseMessageToPanel(panelId, _deleteItemMessageId, successResponse);
|
pktUIMessaging.sendResponseMessageToPanel(panelId, _deleteItemMessageId, successResponse);
|
||||||
_lastAddSucceeded = false;
|
_lastAddSucceeded = false;
|
||||||
|
getPanelFrame().setAttribute("itemAdded", "false");
|
||||||
},
|
},
|
||||||
error(error, response) {
|
error(error, response) {
|
||||||
pktUIMessaging.sendErrorResponseMessageToPanel(panelId, _deleteItemMessageId, error);
|
pktUIMessaging.sendErrorResponseMessageToPanel(panelId, _deleteItemMessageId, error);
|
||||||
|
|
|
@ -1,157 +1,243 @@
|
||||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
<!-- 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
|
- 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/. -->
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="18" fill="context-fill">
|
<svg xmlns="http://www.w3.org/2000/svg" width="260" height="16" fill="context-fill">
|
||||||
<svg width="20" height="18">
|
<svg>
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="a" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="a">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<g>
|
<g>
|
||||||
<g fill-opacity=".25">
|
<g>
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
<path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
</g>
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
<g filter="url(#a)" transform="translate(1.749 1.092) scale(1.02438)">
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#a)" transform="translate(10.005 9.286) scale(1.02438)"/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="20">
|
<svg x="20">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="b" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="b">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<g>
|
<g>
|
||||||
<g fill-opacity=".25">
|
<g>
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
<path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
</g>
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
<g filter="url(#b)" transform="translate(1.749 1.092) scale(1.02438)">
|
||||||
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/>
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#b)" transform="translate(10.005 9.286) scale(1.02438)"/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="40">
|
<svg x="40">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="c" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="c">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<path d="M10.016 15.97c-4.978 0 -9.014 -4.036 -9.014 -9.014v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.521a2.253 2.253 0 0 1 2.254 2.254v4.507c0 4.978 -4.036 9.014 -9.015 9.014z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#c)" transform="translate(10.005 10.054) scale(1.02438)"/>
|
<g filter="url(#c)" transform="translate(1.749 1.86) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="60">
|
<svg x="60">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="d" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="d">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<path d="M10.016 15.97c-4.978 0 -9.014 -4.036 -9.014 -9.014v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.521a2.253 2.253 0 0 1 2.254 2.254v4.507c0 4.978 -4.036 9.014 -9.015 9.014z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#d)" transform="translate(10.009 10.057) scale(1.02438)"/>
|
<g filter="url(#d)" transform="translate(1.752 1.862) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="80">
|
<svg x="80">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="e" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="e">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<path d="M10.016 15.97c-4.978 0 -9.014 -4.036 -9.014 -9.014v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.521a2.253 2.253 0 0 1 2.254 2.254v4.507c0 4.978 -4.036 9.014 -9.015 9.014z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#e)" transform="translate(10.005 10.054) scale(1.02438)"/>
|
<g filter="url(#e)" transform="translate(1.749 1.86) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="100">
|
<svg x="100">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="f" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="f">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<path d="M10.016 15.94c-4.958 0 -8.979 -4.021 -8.979 -8.98v-4.49a2.244 2.244 0 0 1 2.245 -2.244h13.469a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.958 -4.02 8.979 -8.98 8.979z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#f)" transform="translate(10.005 10.016) scale(1.02438)"/>
|
<g filter="url(#f)" transform="translate(1.749 1.817) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="120">
|
<svg x="120">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="g" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="g">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<path d="M10.016 15.858c-4.907 0 -8.886 -3.979 -8.886 -8.886v-4.443a2.221 2.221 0 0 1 2.222 -2.222h13.33a2.221 2.221 0 0 1 2.22 2.222v4.443c0 4.907 -3.978 8.886 -8.886 8.886z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#g)" transform="translate(10.005 9.925) scale(1.02438)"/>
|
<g filter="url(#g)" transform="translate(1.749 1.705) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="140">
|
<svg x="140">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="h" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="h">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<path d="M10.016 15.743c-4.835 0 -8.755 -3.92 -8.755 -8.755v-4.377a2.188 2.188 0 0 1 2.19 -2.19h13.132c1.21 0 2.189 0.98 2.189 2.19v4.377c0 4.835 -3.92 8.755 -8.756 8.755z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#h)" transform="translate(10.005 9.802) scale(1.02438)"/>
|
<g filter="url(#h)" transform="translate(1.749 1.552) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="160">
|
<svg x="160">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="i" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="i">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
<path d="M10.016 15.612c-4.752 0 -8.604 -3.853 -8.604 -8.605v-4.302a2.15 2.15 0 0 1 2.15 -2.152h12.908a2.15 2.15 0 0 1 2.151 2.152v4.302c0 4.752 -3.853 8.605 -8.605 8.605z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#i)" transform="translate(10.005 9.66) scale(1.02438)"/>
|
<g filter="url(#i)" transform="translate(1.749 1.387) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="180">
|
<svg x="180">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="j" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="j">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/>
|
<path d="M10.016 15.48c-4.668 0 -8.454 -3.785 -8.454 -8.454v-4.227a2.113 2.113 0 0 1 2.114 -2.114h12.681a2.113 2.113 0 0 1 2.114 2.114v4.227c0 4.669 -3.786 8.454 -8.455 8.454z"/>
|
||||||
<path fill="#EE4055" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#j)" transform="translate(10.005 9.512) scale(1.02438)"/>
|
<g filter="url(#j)" transform="translate(1.749 1.238) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="200">
|
<svg x="200">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="k" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="k">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/>
|
<path d="M10.016 15.365c-4.596 0 -8.323 -3.726 -8.323 -8.323v-4.161a2.08 2.08 0 0 1 2.081 -2.081h12.485a2.08 2.08 0 0 1 2.08 2.08v4.162c0 4.597 -3.726 8.323 -8.323 8.323z"/>
|
||||||
<path fill="#EE4055" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#k)" transform="translate(10.005 9.372) scale(1.02438)"/>
|
<g filter="url(#k)" transform="translate(1.749 1.132) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg width="20" height="18" x="220">
|
<svg x="220">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="l" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox">
|
<filter id="l">
|
||||||
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<path fill-opacity=".25" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/>
|
<g>
|
||||||
<path fill-opacity=".25" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/>
|
<path d="M10.016 15.284c-4.545 0 -8.23 -3.685 -8.23 -8.23v-4.115a2.057 2.057 0 0 1 2.058 -2.058h12.345a2.057 2.057 0 0 1 2.058 2.058v4.115c0 4.545 -3.685 8.23 -8.23 8.23z"/>
|
||||||
<path fill="#EE4055" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/>
|
</g>
|
||||||
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#l)" transform="translate(10.005 9.286) scale(1.02438)"/>
|
<g filter="url(#l)" transform="translate(1.749 1.092) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<svg x="240">
|
||||||
|
<defs>
|
||||||
|
<filter id="m">
|
||||||
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
|
||||||
|
</g>
|
||||||
|
<g filter="url(#m)" transform="translate(1.749 1.092) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<svg x="260">
|
||||||
|
<defs>
|
||||||
|
<filter id="n">
|
||||||
|
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
|
||||||
|
</g>
|
||||||
|
<g filter="url(#n)" transform="translate(1.749 1.092) scale(1.02438)">
|
||||||
|
<g>
|
||||||
|
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
До Ширина: | Высота: | Размер: 17 KiB После Ширина: | Высота: | Размер: 12 KiB |
|
@ -1,7 +0,0 @@
|
||||||
<!-- 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="M4 7a4 4 0 0 1-4-4V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4zm1.993-5.016a.5.5 0 0 0-.362.159L3.989 3.785 2.378 2.168A.492.492 0 0 0 2 1.984a.5.5 0 0 0-.357.85l-.008.006 1.647 1.653.353.354a.5.5 0 0 0 .707 0l.358-.354L6.35 2.84a.5.5 0 0 0-.357-.856z"/>
|
|
||||||
<path fill="context-fill" d="M13 1h-3a1 1 0 0 0 0 2h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3z"/>
|
|
||||||
</svg>
|
|
До Ширина: | Высота: | Размер: 764 B |
|
@ -17,16 +17,22 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
|
||||||
list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
|
list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#pocket-button-box[animate="true"] > #pocket-button,
|
||||||
#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
|
#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
|
||||||
fill: transparent;
|
fill: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#pocket-button-box[open="true"] > #pocket-button {
|
||||||
|
fill: rgb(213,32,20);
|
||||||
|
fill-opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes pocket-animation {
|
@keyframes pocket-animation {
|
||||||
from {
|
from {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: translateX(-220px);
|
transform: translateX(-240px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,14 +41,15 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
|
||||||
transform: scaleX(-1) translateX(0);
|
transform: scaleX(-1) translateX(0);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: scaleX(-1) translateX(-220px);
|
transform: scaleX(-1) translateX(-240px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#pocket-button-box > #pocket-animatable-box,
|
||||||
#pocket-button > .toolbarbutton-animatable-box {
|
#pocket-button > .toolbarbutton-animatable-box {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
top: calc(50% - 9px); /* 9px is half the height of the sprite */
|
top: calc(50% - 8px); /* 8px is half the height of the sprite */
|
||||||
/* Since .toolbarbutton-icon uses a different width than the animatable box,
|
/* Since .toolbarbutton-icon uses a different width than the animatable box,
|
||||||
we need to set a padding relative to the difference in widths. */
|
we need to set a padding relative to the difference in widths. */
|
||||||
margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
|
margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
|
||||||
|
@ -52,14 +59,21 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
|
||||||
`inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
|
`inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
max-width: 20px;
|
max-width: 20px;
|
||||||
min-height: 18px;
|
min-height: 16px;
|
||||||
max-height: 18px;
|
max-height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#pocket-button-box > #pocket-animatable-box {
|
||||||
|
/* Match the 6px margin-inline-start of .urlbar-icon plus 1px for internal padding in the animation sprite. */
|
||||||
|
margin-inline-start: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pocket-button-box > #pocket-animatable-box > #pocket-animatable-image,
|
||||||
#pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
#pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
||||||
height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
|
height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#pocket-button-box[animate="true"],
|
||||||
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
|
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -68,20 +82,25 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
|
||||||
a flicker at the start of either animation. The preloading of the library
|
a flicker at the start of either animation. The preloading of the library
|
||||||
animation is triggered off of hovering the pocket button since the pocket
|
animation is triggered off of hovering the pocket button since the pocket
|
||||||
button always animates before the library button. */
|
button always animates before the library button. */
|
||||||
|
#pocket-button-box:not([animate="true"]):hover > #pocket-animatable-box > #pocket-animatable-image,
|
||||||
#pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
#pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
||||||
background-image: url("chrome://pocket-shared/skin/pocket-animation.svg"),
|
background-image: url("chrome://pocket-shared/skin/pocket-animation.svg"),
|
||||||
url("chrome://pocket-shared/skin/library-pocket-animation.svg");
|
url("chrome://pocket-shared/skin/library-pocket-animation.svg");
|
||||||
background-size: 0, 0;
|
background-size: 0, 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
|
||||||
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
||||||
animation-name: pocket-animation;
|
animation-name: pocket-animation;
|
||||||
animation-timing-function: steps(11);
|
animation-timing-function: steps(12);
|
||||||
animation-duration: 184ms;
|
animation-duration: 200ms;
|
||||||
background-image: url("chrome://pocket-shared/skin/pocket-animation.svg");
|
background-image: url("chrome://pocket-shared/skin/pocket-animation.svg");
|
||||||
width: 240px;
|
fill: rgb(213,32,20);
|
||||||
|
-moz-context-properties: fill;
|
||||||
|
width: 260px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#pocket-button-box[animate="true"]:-moz-locale-dir(rtl) > #pocket-animatable-box > #pocket-animatable-image,
|
||||||
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
||||||
animation-name: pocket-animation-rtl;
|
animation-name: pocket-animation-rtl;
|
||||||
}
|
}
|
||||||
|
@ -223,7 +242,7 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
|
||||||
}
|
}
|
||||||
|
|
||||||
#appMenu-library-pocket-button {
|
#appMenu-library-pocket-button {
|
||||||
list-style-image: url("chrome://pocket-shared/skin/pocket-list.svg");
|
list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
#panelMenu_pocket,
|
#panelMenu_pocket,
|
||||||
|
@ -245,6 +264,6 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
|
||||||
}
|
}
|
||||||
|
|
||||||
#pageAction-panel-pocket,
|
#pageAction-panel-pocket,
|
||||||
#pageAction-urlbar-pocket {
|
#pocket-button {
|
||||||
list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
|
list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
<!-- 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
|
- 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/. -->
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
<path fill-opacity="context-fill-opacity" fill="context-fill" d="M9,15.969a8,8,0,0,1-8-8v-4a2,2,0,0,1,2-2H15a2,2,0,0,1,2,2v4A8,8,0,0,1,9,15.969ZM12.985,5.937a0.99,0.99,0,0,0-.725.319L8.978,9.539,5.755,6.305A0.984,0.984,0,0,0,5,5.937a1,1,0,0,0-.714,1.7L4.27,7.648l3.293,3.306h0l0.707,0.707a1,1,0,0,0,1.414,0l0.707-.707h0L13.7,7.648l0,0A1,1,0,0,0,12.985,5.937Z"/>
|
<path fill-opacity="context-fill-opacity" fill="context-fill" d="M8 15a8 8 0 0 1-8-8V3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4a8 8 0 0 1-8 8zm3.985-10.032a.99.99 0 0 0-.725.319L7.978 8.57 4.755 5.336A.984.984 0 0 0 4 4.968a1 1 0 0 0-.714 1.7l-.016.011 3.293 3.306.707.707a1 1 0 0 0 1.414 0l.707-.707L12.7 6.679a1 1 0 0 0-.715-1.711z"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
До Ширина: | Высота: | Размер: 667 B После Ширина: | Высота: | Размер: 634 B |
|
@ -380,6 +380,9 @@ this.PageActions = {
|
||||||
* The action's ID. Treat this like the ID of a DOM node.
|
* The action's ID. Treat this like the ID of a DOM node.
|
||||||
* @param title (string, required)
|
* @param title (string, required)
|
||||||
* The action's title.
|
* The action's title.
|
||||||
|
* @param anchorIDOverride (string, optional)
|
||||||
|
* Pass a string for this property if to override which element
|
||||||
|
* that the temporary panel is anchored to.
|
||||||
* @param iconURL (string, optional)
|
* @param iconURL (string, optional)
|
||||||
* The URL of the action's icon. Usually you want to specify an
|
* The URL of the action's icon. Usually you want to specify an
|
||||||
* icon in CSS, but this option is useful if that would be a pain
|
* icon in CSS, but this option is useful if that would be a pain
|
||||||
|
@ -388,11 +391,27 @@ this.PageActions = {
|
||||||
* @param nodeAttributes (object, optional)
|
* @param nodeAttributes (object, optional)
|
||||||
* An object of name-value pairs. Each pair will be added as
|
* An object of name-value pairs. Each pair will be added as
|
||||||
* an attribute to DOM nodes created for this action.
|
* an attribute to DOM nodes created for this action.
|
||||||
|
* @param onBeforePlacedInWindow (function, optional)
|
||||||
|
* Called before the action is placed in the window. Passed the
|
||||||
|
* following arguments:
|
||||||
|
* * window: The window that the action will be placed in.
|
||||||
* @param onCommand (function, optional)
|
* @param onCommand (function, optional)
|
||||||
* Called when the action is clicked, but only if it has neither
|
* Called when the action is clicked, but only if it has neither
|
||||||
* a subview nor an iframe. Passed the following arguments:
|
* a subview nor an iframe. Passed the following arguments:
|
||||||
* * event: The triggering event.
|
* * event: The triggering event.
|
||||||
* * buttonNode: The button node that was clicked.
|
* * buttonNode: The button node that was clicked.
|
||||||
|
* @param onIframeHiding (function, optional)
|
||||||
|
* Called when the action's iframe is hiding. Passed the
|
||||||
|
* following arguments:
|
||||||
|
* * iframeNode: The iframe.
|
||||||
|
* * parentPanelNode: The panel node in which the iframe is
|
||||||
|
* shown.
|
||||||
|
* @param onIframeHidden (function, optional)
|
||||||
|
* Called when the action's iframe is hidden. Passed the
|
||||||
|
* following arguments:
|
||||||
|
* * iframeNode: The iframe.
|
||||||
|
* * parentPanelNode: The panel node in which the iframe is
|
||||||
|
* shown.
|
||||||
* @param onIframeShown (function, optional)
|
* @param onIframeShown (function, optional)
|
||||||
* Called when the action's iframe is shown to the user. Passed
|
* Called when the action's iframe is shown to the user. Passed
|
||||||
* the following arguments:
|
* the following arguments:
|
||||||
|
@ -432,9 +451,13 @@ function Action(options) {
|
||||||
setProperties(this, options, {
|
setProperties(this, options, {
|
||||||
id: true,
|
id: true,
|
||||||
title: !options._isSeparator,
|
title: !options._isSeparator,
|
||||||
|
anchorIDOverride: false,
|
||||||
iconURL: false,
|
iconURL: false,
|
||||||
nodeAttributes: false,
|
nodeAttributes: false,
|
||||||
|
onBeforePlacedInWindow: false,
|
||||||
onCommand: false,
|
onCommand: false,
|
||||||
|
onIframeHiding: false,
|
||||||
|
onIframeHidden: false,
|
||||||
onIframeShown: false,
|
onIframeShown: false,
|
||||||
onPlacedInPanel: false,
|
onPlacedInPanel: false,
|
||||||
onPlacedInUrlbar: false,
|
onPlacedInUrlbar: false,
|
||||||
|
@ -531,6 +554,13 @@ Action.prototype = {
|
||||||
return this._tooltip;
|
return this._tooltip;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Override for the ID of the action's temporary panel anchor (string, nullable)
|
||||||
|
*/
|
||||||
|
get anchorIDOverride() {
|
||||||
|
return this._anchorIDOverride;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Override for the ID of the action's urlbar node (string, nullable)
|
* Override for the ID of the action's urlbar node (string, nullable)
|
||||||
*/
|
*/
|
||||||
|
@ -552,6 +582,18 @@ Action.prototype = {
|
||||||
return this._subview;
|
return this._subview;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Call this when before placing the action in the window.
|
||||||
|
*
|
||||||
|
* @param window (DOM window, required)
|
||||||
|
* The window the action will be placed in.
|
||||||
|
*/
|
||||||
|
onBeforePlacedInWindow(window) {
|
||||||
|
if (this._onBeforePlacedInWindow) {
|
||||||
|
this._onBeforePlacedInWindow(window);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Call this when the user activates the action.
|
* Call this when the user activates the action.
|
||||||
*
|
*
|
||||||
|
@ -566,6 +608,34 @@ Action.prototype = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Call this when the action's iframe is hiding.
|
||||||
|
*
|
||||||
|
* @param iframeNode (DOM node, required)
|
||||||
|
* The iframe that's hiding.
|
||||||
|
* @param parentPanelNode (DOM node, required)
|
||||||
|
* The panel in which the iframe is hiding.
|
||||||
|
*/
|
||||||
|
onIframeHiding(iframeNode, parentPanelNode) {
|
||||||
|
if (this._onIframeHiding) {
|
||||||
|
this._onIframeHiding(iframeNode, parentPanelNode);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Call this when the action's iframe is hidden.
|
||||||
|
*
|
||||||
|
* @param iframeNode (DOM node, required)
|
||||||
|
* The iframe that's being hidden.
|
||||||
|
* @param parentPanelNode (DOM node, required)
|
||||||
|
* The panel in which the iframe is hidden.
|
||||||
|
*/
|
||||||
|
onIframeHidden(iframeNode, parentPanelNode) {
|
||||||
|
if (this._onIframeHidden) {
|
||||||
|
this._onIframeHidden(iframeNode, parentPanelNode);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Call this when the action's iframe is shown.
|
* Call this when the action's iframe is shown.
|
||||||
*
|
*
|
||||||
|
|
Загрузка…
Ссылка в новой задаче