Bug 1859394 - Use global styles for screenshots panel buttons. r=sfoster,desktop-theme-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D191213
This commit is contained in:
Niklas Baumgardner 2023-10-20 21:20:58 +00:00
parent cb44497ce3
commit 47be6b9a07
2 changed files with 11 additions and 17 deletions

View File

@ -2,21 +2,11 @@
* 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/. */
.all-buttons-container button {
background-position: center top;
background-repeat: no-repeat;
background-size: 46px 46px;
min-width: 90px;
padding: 46px 5px 5px;
margin: 2px;
color: var(--panel-color);
}
.all-buttons-container .full-page {
.full-page {
background-image: url("chrome://browser/content/screenshots/menu-fullpage.svg");
}
.all-buttons-container .visible-page {
.visible-page {
background-image: url("chrome://browser/content/screenshots/menu-visible.svg");
}
@ -24,4 +14,10 @@
-moz-context-properties: fill, stroke;
fill: currentColor;
stroke: var(--color-accent-primary);
background-position: center top;
background-repeat: no-repeat;
background-size: 46px 46px;
min-width: 90px;
padding: 46px 5px 5px;
margin: 2px;
}

View File

@ -11,12 +11,10 @@
class ScreenshotsButtons extends MozXULElement {
static get markup() {
return `
<html:link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/>
<html:link rel="stylesheet" href="chrome://global/skin/global.css"/>
<html:link rel="stylesheet" href="chrome://browser/content/screenshots/screenshots-buttons.css"/>
<html:div id="screenshots-buttons" class="all-buttons-container">
<html:button class="visible-page" data-l10n-id="screenshots-save-visible-button"></html:button>
<html:button class="full-page" data-l10n-id="screenshots-save-page-button"></html:button>
</html:div>
<html:button class="visible-page panel-footer-button" data-l10n-id="screenshots-save-visible-button"></html:button>
<html:button class="full-page panel-footer-button" data-l10n-id="screenshots-save-page-button"></html:button>
`;
}