Bug 1282768 - Part 1 - Move filters.svg and menubutton-dropmarker.svg to Toolkit. r=past draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Sun, 20 Nov 2016 18:40:19 +0100
changeset 441673 b5ccef53f8be35d8bd70ff5c7f9fbc74a631e954
parent 441672 e09f6229e47481fbd3040932f82e08a48b85ca70
child 441674 84b7ab2a16141c736dc0f6b84387fb1be4775b59
push id36489
push userpaolo.mozmail@amadzone.org
push dateSun, 20 Nov 2016 17:49:09 +0000
reviewerspast
bugs1282768
milestone53.0a1
Bug 1282768 - Part 1 - Move filters.svg and menubutton-dropmarker.svg to Toolkit. r=past MozReview-Commit-ID: IGe0e94hiM7
browser/components/contextualidentity/content/usercontext.css
browser/extensions/flyweb/bootstrap.js
browser/extensions/presentation/content/PresentationDevicePrompt.jsm
browser/themes/linux/searchbar.css
browser/themes/osx/searchbar.css
browser/themes/shared/contextmenu.inc.css
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/devedition.inc.css
browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/shared/downloads/menubutton-dropmarker.svg
browser/themes/shared/filters.svg
browser/themes/shared/jar.inc.mn
browser/themes/shared/menupanel.inc.css
browser/themes/shared/notification-icons.inc.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/searchbar.css
toolkit/themes/osx/global/filters.svg
toolkit/themes/osx/global/jar.mn
toolkit/themes/shared/filters.svg
toolkit/themes/shared/icons/menubutton-dropmarker-white.svg
toolkit/themes/shared/icons/menubutton-dropmarker.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/shared/popupnotification.inc.css
--- a/browser/components/contextualidentity/content/usercontext.css
+++ b/browser/components/contextualidentity/content/usercontext.css
@@ -78,14 +78,14 @@
   background-repeat: no-repeat;
 }
 
 .userContext-icon,
 .menuitem-iconic[data-usercontextid] > .menu-iconic-left > .menu-iconic-icon,
 .subviewbutton[usercontextid] > .toolbarbutton-icon,
 #userContext-indicator {
   background-image: var(--identity-icon);
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: var(--identity-icon-color);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
 }
--- a/browser/extensions/flyweb/bootstrap.js
+++ b/browser/extensions/flyweb/bootstrap.js
@@ -153,17 +153,17 @@ const FlyWebPermissionPromptIntegration 
           notificationIcon.id = kAnchorID;
           notificationIcon.setAttribute("src",
                                         "chrome://flyweb/skin/icon-64.png");
           notificationIcon.classList.add("notification-anchor-icon");
           notificationIcon.setAttribute("role", "button");
           notificationIcon.setAttribute("aria-label",
                                         "View the publish-server request");
           notificationIcon.style.filter =
-            "url('chrome://browser/skin/filters.svg#fill')";
+            "url('chrome://global/skin/filters.svg#fill')";
           notificationIcon.style.fill = "currentcolor";
           notificationIcon.style.opacity = "0.4";
           notificationPopupBox.appendChild(notificationIcon);
         }
 
         return kAnchorID;
       },
       get message() {
--- a/browser/extensions/presentation/content/PresentationDevicePrompt.jsm
+++ b/browser/extensions/presentation/content/PresentationDevicePrompt.jsm
@@ -122,17 +122,17 @@ PresentationPermissionPrompt.prototype =
       // Icon shown on URL bar
       let notificationIcon = chromeDoc.createElement("image");
       notificationIcon.id = kNotificationAnchorId;
       notificationIcon.setAttribute("src", kNotificationAnchorIcon);
       notificationIcon.classList.add("notification-anchor-icon");
       notificationIcon.setAttribute("role", "button");
       notificationIcon.setAttribute("tooltiptext",
                                     GetString("presentation.urlbar.tooltiptext"));
-      notificationIcon.style.filter = "url('chrome://browser/skin/filters.svg#fill')";
+      notificationIcon.style.filter = "url('chrome://global/skin/filters.svg#fill')";
       notificationIcon.style.fill = "currentcolor";
       notificationIcon.style.opacity = "0.4";
       notificationPopupBox.appendChild(notificationIcon);
     }
 
     return kNotificationAnchorId;
   },
   get message() {
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -339,11 +339,11 @@ menuitem[cmd="cmd_clearhistory"][disable
 }
 
 .search-setting-button[selected] {
   background-color: var(--arrowpanel-dimmed-further);
 }
 
 .search-setting-button-compact > .button-box > .button-icon {
   list-style-image: url("chrome://browser/skin/gear.svg");
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -321,11 +321,11 @@
 }
 
 .search-setting-button[selected] {
   background-color: var(--arrowpanel-dimmed-further);
 }
 
 .search-setting-button-compact > .button-box > .button-icon {
   list-style-image: url("chrome://browser/skin/gear.svg");
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
--- a/browser/themes/shared/contextmenu.inc.css
+++ b/browser/themes/shared/contextmenu.inc.css
@@ -7,17 +7,17 @@
 #context-navigation > .menuitem-iconic > .menu-iconic-left {
   -moz-appearance: none;
 }
 
 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
   width: 16px;
   height: 16px;
   margin: 7px;
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
 #context-back {
   list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
 }
 
 #context-forward {
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -418,17 +418,17 @@ description#identity-popup-content-verif
   -moz-appearance: none;
 }
 
 .identity-popup-permission-remove-button > .button-box > .button-icon {
   margin: 0;
   width: 16px;
   height: 16px;
   list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel);
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: graytext;
 }
 
 .identity-popup-permission-remove-button > .button-box > .button-text {
   display: none;
 }
 
 /* swap foreground / background colors on hover */
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -291,17 +291,17 @@ window:not([chromehidden~="toolbar"]) #u
 
 .tabbrowser-tab[visuallyselected] {
   color: var(--tab-selection-color) !important; /* Override color: inherit */
   background-color: var(--tab-selection-background-color);
 }
 
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted] {
-  filter: url(chrome://browser/skin/filters.svg#fill) !important; /* removes drop-shadow filter */
+  filter: url(chrome://global/skin/filters.svg#fill) !important; /* removes drop-shadow filter */
 }
 
 /* Don't need space for the tab curves (66px - 30px) */
 .tabs-newtab-button {
   width: 36px;
 }
 
 .tabs-newtab-button:hover {
--- a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css
@@ -98,17 +98,17 @@
   border-radius: 50%;
   color: graytext;
 }
 
 .downloadButton > .button-box > .button-icon {
   width: 16px;
   height: 16px;
   margin: 0;
-  filter: url("chrome://browser/skin/filters.svg#fill");
+  filter: url("chrome://global/skin/filters.svg#fill");
   fill: currentColor;
 }
 
 .downloadButton > .button-box > .button-text {
   display: none;
 }
 
 .downloadButton:hover > .button-box {
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -133,18 +133,18 @@ toolbarseparator.downloadsDropmarkerSpli
   display: -moz-box;
   padding: 0;
   margin: 0;
 }
 
 .downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
   width: 16px;
   height: 16px;
-  list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg");
-  filter: url("chrome://browser/skin/filters.svg#fill");
+  list-style-image: url("chrome://global/skin/icons/menubutton-dropmarker.svg");
+  filter: url("chrome://global/skin/filters.svg#fill");
   fill: currentColor;
 }
 
 /* Override default icon size which is too small for this dropdown */
 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
   width: 16px;
   height: 16px;
 }
@@ -262,17 +262,17 @@ richlistitem[type="download"] > .downloa
   padding: 8px;
   color: graytext;
 }
 
 .downloadButton > .button-box > .button-icon {
   width: 16px;
   height: 16px;
   margin: 1px;
-  filter: url("chrome://browser/skin/filters.svg#fill");
+  filter: url("chrome://global/skin/filters.svg#fill");
   fill: currentColor;
 }
 
 .downloadButton > .button-box > .button-text {
   margin: 0 !important;
   padding: 0;
 }
 
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -47,20 +47,18 @@
   skin/classic/browser/customizableui/subView-arrow-back-inverted.png  (../shared/customizableui/subView-arrow-back-inverted.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted@2x.png  (../shared/customizableui/subView-arrow-back-inverted@2x.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl.png  (../shared/customizableui/subView-arrow-back-inverted-rtl.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png  (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png)
   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/menubutton-dropmarker.svg     (../shared/downloads/menubutton-dropmarker.svg)
   skin/classic/browser/downloads/download-summary.svg          (../shared/downloads/download-summary.svg)
   skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
-  skin/classic/browser/filters.svg                             (../shared/filters.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)
 * skin/classic/browser/connection-mixed-active-loaded.svg      (../shared/identity-block/connection-mixed-active-loaded.svg)
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -4,17 +4,17 @@ toolbaritem[sdkstylewidget="true"] > too
 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > :-moz-any(@primaryToolbarButtons@) {
   list-style-image: url(chrome://browser/skin/menuPanel.svg);
 }
 
 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
 #home-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #home-button {
   -moz-image-region: rect(0px, 128px, 32px, 96px);
 }
 
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -48,17 +48,17 @@
    * that the height of the contents is computed correctly in that case. */
   padding: 0;
   overflow: hidden;
   display: block;
 }
 
 .notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme,
 #blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme {
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
 .notification-anchor-icon:not(.plugin-blocked):not(:hover) {
   opacity: .8;
 }
 
 /* INDIVIDUAL NOTIFICATIONS */
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -202,38 +202,38 @@
   height: 16px;
   padding: 0;
 }
 
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted],
 .tab-icon-sound[blocked] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
 .tab-icon-sound[muted] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
 }
 
 .tab-icon-sound[blocked] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
 }
 
 .tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
 .tab-icon-sound:-moz-lwtheme-darktext[muted],
 .tab-icon-sound:-moz-lwtheme-darktext[blocked] {
-  filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px white);
+  filter: url(chrome://global/skin/filters.svg#fill) drop-shadow(1px 1px 1px white);
 }
 
 .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
 .tab-icon-sound:-moz-lwtheme-brighttext[muted],
 .tab-icon-sound:-moz-lwtheme-brighttext[blocked] {
-  filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px black);
+  filter: url(chrome://global/skin/filters.svg#fill) drop-shadow(1px 1px 1px black);
 }
 
 .tab-icon-sound[soundplaying]:not(:hover),
 .tab-icon-sound[muted]:not(:hover),
 .tab-icon-sound[blocked]:not(:hover) {
   opacity: .8;
 }
 
@@ -548,17 +548,17 @@
   /* box-shadow instead of background-color to work around native styling */
   box-shadow: inset -5px 0 ThreeDShadow;
 }
 
 .alltabs-endimage[soundplaying],
 .alltabs-endimage[muted],
 .alltabs-endimage[blocked] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
 .alltabs-endimage[muted] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
 }
 
 .alltabs-endimage[blocked] {
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -331,11 +331,11 @@
 }
 
 .search-setting-button[selected] {
   background-color: var(--arrowpanel-dimmed-further);
 }
 
 .search-setting-button-compact > .button-box > .button-icon {
   list-style-image: url("chrome://browser/skin/gear.svg");
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
deleted file mode 100644
--- a/toolkit/themes/osx/global/filters.svg
+++ /dev/null
@@ -1,14 +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">
-  <filter id="iconPressed" color-interpolation-filters="sRGB">
-    <!-- Multiply all components with 0.55. -->
-    <feComponentTransfer>
-      <feFuncR type="linear" slope=".55"/>
-      <feFuncG type="linear" slope=".55"/>
-      <feFuncB type="linear" slope=".55"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -12,17 +12,16 @@ toolkit.jar:
   skin/classic/global/button.css
   skin/classic/global/checkbox.css
   skin/classic/global/colorpicker.css
   skin/classic/global/commonDialog.css
   skin/classic/global/customizeToolbar.css
   skin/classic/global/dialog.css
   skin/classic/global/dropmarker.css
   skin/classic/global/filefield.css
-  skin/classic/global/filters.svg
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/groupbox.css
   skin/classic/global/linkTree.css
   skin/classic/global/listbox.css
   skin/classic/global/menu.css
   skin/classic/global/menulist.css
 * skin/classic/global/notification.css
rename from browser/themes/shared/filters.svg
rename to toolkit/themes/shared/filters.svg
--- a/browser/themes/shared/filters.svg
+++ b/toolkit/themes/shared/filters.svg
@@ -1,9 +1,17 @@
 <?xml version="1.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">
   <filter id="fill">
     <feComposite in="FillPaint" in2="SourceGraphic" operator="in"/>
   </filter>
+  <filter id="iconPressed" color-interpolation-filters="sRGB">
+    <!-- Multiply all components with 0.55. -->
+    <feComponentTransfer>
+      <feFuncR type="linear" slope=".55"/>
+      <feFuncG type="linear" slope=".55"/>
+      <feFuncB type="linear" slope=".55"/>
+    </feComponentTransfer>
+  </filter>
 </svg>
deleted file mode 100644
--- a/toolkit/themes/shared/icons/menubutton-dropmarker-white.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.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="#fff" d="m 2,6 6,6 6,-6 -1.5,-1.5 -4.5,4.5 -4.5,-4.5 z" />
-</svg>
rename from browser/themes/shared/downloads/menubutton-dropmarker.svg
rename to toolkit/themes/shared/icons/menubutton-dropmarker.svg
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -16,23 +16,24 @@ toolkit.jar:
   skin/classic/global/aboutCacheEntry.css                  (../../shared/aboutCacheEntry.css)
   skin/classic/global/aboutMemory.css                      (../../shared/aboutMemory.css)
   skin/classic/global/aboutReader.css                      (../../shared/aboutReader.css)
   skin/classic/global/aboutReaderContent.css               (../../shared/aboutReaderContent.css)
 * skin/classic/global/aboutReaderControls.css              (../../shared/aboutReaderControls.css)
   skin/classic/global/aboutSupport.css                     (../../shared/aboutSupport.css)
   skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
   skin/classic/global/config.css                           (../../shared/config.css)
+  skin/classic/global/filters.svg                          (../../shared/filters.svg)
   skin/classic/global/timepicker.css                       (../../shared/timepicker.css)
   skin/classic/global/icons/find-arrows.svg                (../../shared/icons/find-arrows.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
-  skin/classic/global/icons/menubutton-dropmarker-white.svg (../../shared/icons/menubutton-dropmarker-white.svg)
+  skin/classic/global/icons/menubutton-dropmarker.svg      (../../shared/icons/menubutton-dropmarker.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/alerts/alert-common.css              (../../shared/alert-common.css)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
   skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
   skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
   skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -100,14 +100,16 @@
   /* This is to override the linux !important */
   -moz-appearance: none !important;
   display: -moz-box;
 }
 
 .popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
   width: 16px;
   height: 16px;
-  list-style-image: url(chrome://global/skin/icons/menubutton-dropmarker-white.svg);
+  list-style-image: url(chrome://global/skin/icons/menubutton-dropmarker.svg);
+  filter: url(chrome://global/skin/filters.svg#fill);
+  fill: white;
 }
 
 .popup-notification-button[disabled] {
   opacity: 0.5;
 }