X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fbrowser.css;h=007e383152a429a8d4b204c36654a0da7a48b6a4;hp=376fa833168c8aed199d3ad2392f3116aa7077b4;hb=d8502c35cba9a5fb5819046b73193d4954e04cad;hpb=1b1f3d099d79ff3f7e081b2702a1076c6cd627c4

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index 376fa833..007e3831 100644
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -106,9 +106,9 @@ menubar {
 /* Page action button */
 #urlbar-page-action-button {
   list-style-image: url("chrome://browser/skin/page-action.svg");
+  -moz-context-properties: fill;
 /*  margin: 0;
   padding: 0 6px;*/
-  -moz-context-properties: fill;
   fill: currentColor;
 }
 
@@ -621,8 +621,8 @@ menuitem.bookmark-item {
 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
-#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
+#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon,
+#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon {
 }
 
 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
@@ -1873,12 +1873,26 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
 
 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] {
   border-bottom: 1px solid var(--panel-separator-color);
-  background-color: #000000;
+  padding-inline-start: 0;
+  padding-inline-end: 6px;
+  min-height: 3em;
+}
+
+/* Limit the size of the hidden description, since a deck takes the size of the biggest child */
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="0"] #search-suggestions-hint,
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="1"] #search-suggestions-question {
+  max-height: 5em;
+}
+
+/* Opt-in notification */
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
   padding: 6px 0;
   padding-inline-start: 44px;
-  padding-inline-end: 6px;
+  background-color: #000000;
   background-image: url("chrome://browser/skin/info.svg");
   background-clip: padding-box;
   background-position: 20px center;
@@ -1886,20 +1900,20 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
   background-size: 16px 16px;
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
   background-position: right 20px center;
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description {
   margin: 0;
   padding: 0;
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
   margin-inline-start: 0;
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
   -moz-appearance: none;
   min-width: 80px;
   border-radius: 3px;
@@ -1908,16 +1922,137 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
   margin-inline-start: 10px;
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
+}
+
+/* Opt-out hint */
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
+/*  font: message-box;*/
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] {
+  flex-basis: 100%;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
+  margin: auto;
+  padding: 4px 8px;
+  background-color: #000000;
+  border: 1px solid #FFCF00;
+  border-radius: 4px;
+  color: #A09090;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
+  unicode-bidi: embed;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
+  font-weight: bold;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
+  transform: scale(0);
+  animation-name: search-suggestions-hint-grow;
+  animation-duration: 500ms;
+  animation-delay: 500ms;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  min-width: 16px;
+}
+
+@keyframes search-suggestions-hint-grow {
+  0%   { transform: scale(0); }
+  40%  { transform: scale(1.5); }
+  60%  { transform: scale(1); }
+  80%  { transform: scale(1.25); }
+  100% { transform: scale(1); }
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
+  text-overflow: clip;
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
+  overflow: hidden;
+  max-width: 12ch;
+  width: 0;
+  animation-name: search-suggestions-hint-typing;
+  animation-duration: 500ms;
+  animation-delay: 750ms;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@media all and (max-width: 800px) {
+  /* Hide the typing animation block */
+  #PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-typing"] {
+    display: none;
+  }
 }
 
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
+@keyframes search-suggestions-hint-typing {
+  from { width: 0; }
+  to   { width: 12ch; }
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
+  opacity: 0;
+  animation-duration: 250ms;
+  animation-delay: 1500ms;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+/* Margin-inline-start can't be animated yet */
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
+  margin-left: 160px;
+  animation-name: search-suggestions-hint-buildin-ltr;
+}
+
+@keyframes search-suggestions-hint-buildin-ltr {
+  from  { margin-left: 160px; opacity: 0; }
+  to    { margin-left: 0; opacity: 1; }
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
+  /* Should be margin-inline-start but that can't be animated yet */
+  margin-right: 160px;
+  animation-name: search-suggestions-hint-buildin-rtl;
+}
+
+@keyframes search-suggestions-hint-buildin-rtl {
+  from  { margin-right: 160px; opacity: 0; }
+  to    { margin-right: 0; opacity: 1; }
+}
+
+#search-suggestions-change-settings {
+  opacity: 0;
+  animation-name: search-suggestions-hint-fadein;
+  animation-duration: 500ms;
+  animation-delay: 1800ms;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes search-suggestions-hint-fadein {
+  from  { opacity: 0 }
+  to    { opacity: 1 }
 }
 
 /* === END urlbarSearchSuggestionsNotification.inc.css === */
@@ -1974,62 +2109,6 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
 /* page proxy icon */
 /* === BEGIN identity-block.inc.css === */
 
-/* === BEGIN identity-block/icons.inc.css === */
-
-#identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
-}
-
-#identity-box:hover > #identity-icon:not(.no-hover),
-#identity-box[open=true] > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
-}
-
-#identity-box.grantedPermissions > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
-}
-
-#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
-#identity-box.grantedPermissions[open=true] > #identity-icon {
-  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
-  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
-}
-
-#tracking-protection-icon {
-  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
-}
-
-#tracking-protection-icon[state="loaded-tracking-content"] {
-  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
-}
-
-
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
-  list-style-image: url(chrome://browser/skin/connection-secure.svg);
-  visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
-  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
-  visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
-  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
-  visibility: visible;
-}
-
-/* === END identity-block/icons.inc.css === */
-
 #identity-box {
   font-size: .9em;
   border-radius: 2px;
@@ -2098,11 +2177,53 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
   padding-inline-start: 2.01px;
 }
 
+#identity-icon,
+#tracking-protection-icon,
+#connection-icon,
+.notification-anchor-icon,
+#blocked-permissions-container > .blocked-permission-icon,
+#extension-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+  -moz-context-properties: fill;
+  fill: #A09090;
+}
+
+#identity-icon:-moz-lwtheme,
+#tracking-protection-icon:-moz-lwtheme,
+#connection-icon:-moz-lwtheme,
+.notification-anchor-icon:-moz-lwtheme,
+#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme,
+#extension-icon:-moz-lwtheme {
+/*  fill: rgba(0,0,0,.6);*/
+}
+
 /* MAIN IDENTITY ICON */
 
 #identity-icon {
+  margin-inline-start: 0;
   width: 16px;
   height: 16px;
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
+}
+
+#identity-box:hover > #identity-icon:not(.no-hover),
+#identity-box[open=true] > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
+}
+
+#identity-box.grantedPermissions > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
+}
+
+#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
+#identity-box.grantedPermissions[open=true] > #identity-icon {
+  list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
+  list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
@@ -2110,20 +2231,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
 }
 
 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
-  -moz-image-region: inherit;
   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
-  context-properties: fill;
-  fill: #FFCF00;
-  width: 16px;
-  width: 16px;
-  height: 16px;
 }
 
 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
-  -moz-image-region: inherit;
   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
-  width: 16px;
-  height: 16px;
 }
 
 /* SHARING ICON */
@@ -2133,6 +2245,8 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
   height: 16px;
   margin-inline-start: -16px;
   position: relative;
+  -moz-context-properties: fill;
+  fill: #FF0000;
   display: none;
 }
 
@@ -2172,12 +2286,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
 /* TRACKING PROTECTION ICON */
 
 #tracking-protection-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 2px;
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
   margin-inline-end: 0;
 }
 
+#tracking-protection-icon[state="loaded-tracking-content"] {
+  list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
+}
+
 #tracking-protection-icon[animate] {
   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
 }
@@ -2190,23 +2306,50 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
   transition: none;
 }
 
+#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
   visibility: collapse;
 }
 
-/* CONNECTION ICON */
+/* CONNECTION ICON, EXTENSION ICON */
 
-#connection-icon {
+#connection-icon,
+#extension-icon {
   width: 16px;
   height: 16px;
-  margin-inline-start: 2px;
   visibility: collapse;
 }
 
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-secure.svg);
+  visibility: visible;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
+  visibility: visible;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+  visibility: visible;
+}
+
+#identity-box.extensionPage > #extension-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
+  visibility: visible;
+}
+
 /* REMOTE CONTROL ICON */
 
 #main-window[remotecontrol] #remote-control-icon {
-  list-style-image: url(chrome://browser/content/robot.ico);
+  list-style-image: url(chrome://browser/content/static-robot.png);
   visibility: visible;
   width: 16px;
   height: 16px;
@@ -2305,10 +2448,12 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
   display: initial;
   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+  -moz-context-properties: fill;
+  fill: #A09090;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
-  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+  fill: #FFCF00;
 }
 
 /* Insecure field warning */
@@ -2933,11 +3078,10 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 
 #sidebar-switcher-tabs > .toolbarbutton-icon,
 #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
-/*  list-style-image: url(chrome://browser/skin/synced-tabs.svg);
+  list-style-image: url(chrome://browser/skin/synced-tabs.svg);
   -moz-context-properties: fill;
   fill: currentColor;
-  opacity: 0.8;*/
-  list-style-image: url(chrome://browser/skin/urlbar-tab.svg#tab);
+/*  opacity: 0.8;*/
 }
 
 /* === END sidebar.inc.css === */
@@ -3067,6 +3211,8 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
   margin-inline-start: -22px;
   position: relative;
+  -moz-context-properties: fill;
+  fill: #FF0000;
 }
 
 .tab-sharing-icon-overlay[sharing="camera"] {
@@ -3174,17 +3320,17 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 .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://global/skin/filters.svg#fill);
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
+  -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .tab-icon-sound[muted] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
 }
 
 .tab-icon-sound[blocked] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
 }
 
 .tab-close-button {
@@ -3321,6 +3467,16 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   width: 28px;
   /* width: calc(36px + var(--tab-curve-width)); */
 }
+
+.tabs-newtab-button > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
+.tabs-newtab-button > .toolbarbutton-icon {
+  /* override drop marker image padding */
+  margin-inline-end: 0;
+}
+
 @media (min-resolution: 1.1dppx) {
   /* image preloading hack from like lowdpi styles */
   #tabbrowser-tabs::before {
@@ -3351,17 +3507,17 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 .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://global/skin/filters.svg#fill);
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
+  -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .alltabs-endimage[muted] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
 }
 
 .alltabs-endimage[blocked] {
-  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
+  list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
 }
 
 /* === END tabs.inc.css === */
@@ -3576,6 +3732,12 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* === BEGIN notification-icons.inc.css === */
 
+.popup-notification-icon,
+.identity-popup-permission-icon {
+  -moz-context-properties: fill;
+  fill: #A09090;
+}
+
 #notification-popup-box {
   border-radius: 3px 0 0 3px;
   padding: 5px 0px;
@@ -3584,13 +3746,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   padding-inline-end: 5px;
 }
 
-.notification-anchor-icon,
-#blocked-permissions-container > .blocked-permission-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 2px;
-}
-
 /* This class can be used alone or in combination with the class defining the
    type of icon displayed. This rule must be defined before the others in order
    for its list-style-image to be overridden. */
@@ -3608,12 +3763,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   }
 }
 
-.notification-anchor-icon:not(.plugin-blocked),
-#blocked-permissions-container > .blocked-permission-icon {
-  filter: url(chrome://global/skin/filters.svg#fill);
-  fill: currentColor;
-}
-
 /* INDIVIDUAL NOTIFICATIONS */
 
 .focus-tab-by-prompt-icon {
@@ -3815,8 +3964,36 @@ html|*#webRTC-previewVideo {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
 }
 
+#plugin-icon-badge {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-badge);
+  opacity: 0;
+  transition: opacity 1.5s;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > .plugin-icon {
+  fill: #8050B0;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
+  opacity: 1;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
+  animation: blink-badge 1000ms ease 0s 5 alternate both;
+}
+
+@keyframes blink-badge {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .plugin-icon.plugin-blocked {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
+  fill: #FF0000 !important;
 }
 
 #notification-popup-box[hidden] {
@@ -3890,9 +4067,25 @@ html|*.addon-webext-perm-list {
   margin-inline-start: 0;
 }
 
-.popup-notification-description[popupid="addon-webext-permissions"] {
-  margin: 0;
-  padding: 0;
+.popup-notification-description[popupid="addon-webext-permissions"],
+.popup-notification-description[popupid="addon-installed"] {
+  display: none;
+}
+
+.addon-webext-perm-notification-content,
+.addon-installed-notification-content {
+  margin-top: 0;
+}
+
+#addon-webext-perm-header {
+  /* Align the text more closely with the icon by clearing some top line height. */
+  margin-top: -1px;
+  margin-inline-start: 0;
+}
+
+#addon-installed-notification-header {
+  /* Align the text more closely with the icon by clearing some top line height. */
+  margin-top: -1px;
 }
 
 .addon-webext-name {
@@ -3901,16 +4094,20 @@ html|*.addon-webext-perm-list {
   margin: 0;
 }
 
-.addon-addon-icon {
+.addon-addon-icon,
+.addon-toolbar-icon {
   width: 14px;
   height: 14px;
+  vertical-align: bottom;
+  margin-bottom: 1px;
+}
+
+.addon-addon-icon {
   list-style-image: url("chrome://browser/skin/menuPanel.svg");
   -moz-image-region: rect(0px, 288px, 32px, 256px);
 }
 
 .addon-toolbar-icon {
-  width: 14px;
-  height: 14px;
   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
   -moz-image-region: rect(0, 486px, 18px, 468px);
 }
@@ -4393,22 +4590,39 @@ notification.pluginVulnerable .messageImage {
   margin: 5px;
 }
 
-.customizationmode-button:hover {
+.customizationmode-checkbox {
+}
+
+#customization-reset-button,
+#customization-undo-reset-button,
+#customization-done-button {
+}
+
+#customization-done-button {
 }
 
 .customizationmode-button > .box-inherit {
 }
 
-.customizationmode-button > .button-icon {
+/* We use a smaller padding to ensure images don't have padding.
+ * We can't detect whether a button has an image. This button doesn't
+ * so it needs more padding, so we unfortunately hardcode the extra
+ * padding in here:
+ */
+#customization-toolbar-visibility-button {
 }
 
-.customizationmode-button:not([type=menu]) > .button-text {
+.customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text {
 }
 
-.customizationmode-button > .button-menu-dropmarker {
+.customizationmode-button > .button-icon {
 }
 
+.customizationmode-button:not([type=menu]) > .button-text {
+}
 
+.customizationmode-button > .box-inherit > .button-menu-dropmarker {
+}
 
 .customizationmode-button[checked] {
   background-color: #008484;
@@ -4430,7 +4644,7 @@ notification.pluginVulnerable .messageImage {
 
 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
 .customizationmode-button > .button-box > .button-icon {
-/*  height: 24px;*/
+/*  height: 16px;*/
 }
 
 #customization-titlebar-visibility-button {
@@ -4459,8 +4673,8 @@ notification.pluginVulnerable .messageImage {
 }
 
 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   border-radius: 2px;
   background-image: url("chrome://browser/content/default-theme-icon.svg");
   background-size: contain;
@@ -5061,123 +5275,6 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
   color: #000000;
 }
 
-/* Notification overrides for Heartbeat UI */
-
-notification.heartbeat {
-  background-color: #A09090;
-/*  height: 40px;*/
-}
-
-@keyframes pulse-onshow {
- 0% {
-   opacity: 0;
-   transform: scale(1.0);
- }
- 25% {
-   opacity: 1;
-   transform: scale(1.1);
- }
- 50% {
-   transform: scale(1.0);
- }
- 75% {
-   transform: scale(1.1);
- }
- 100% {
-   transform: scale(1.0);
- }
-}
-
-@keyframes pulse-twice {
- 0% {
-   transform: scale(1.1);
- }
- 50% {
-   transform: scale(0.8);
- }
- 100% {
-   transform: scale(1);
- }
-}
-
-.messageText.heartbeat {
-  color: #000000;
-/*  text-shadow: none; */
-  margin-inline-start: 0px;
-}
-
-.messageImage.heartbeat {
-  width: 24px;
-  height: 24px;
-  margin-inline-start: 8px;
-  margin-inline-end: 8px;
-}
-
-.messageImage.heartbeat.pulse-onshow {
-  animation-name: pulse-onshow;
-  animation-duration: 1.5s;
-  animation-iteration-count: 1;
-  animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
-}
-
-.messageImage.heartbeat.pulse-twice {
-  animation-name: pulse-twice;
-  animation-duration: 1s;
-  animation-iteration-count: 2;
-  animation-timing-function: linear;
-}
-
-/* Learn More link styles */
-.heartbeat > .text-link {
-  color: #3333FF;
-  margin-inline-start: 0px;
-}
-
-.heartbeat > .text-link:hover {
-  color: #9C9CFF;
-  text-decoration: none;
-}
-
-.heartbeat > .text-link:hover:active {
-  color: #FF9F00;
-}
-
-/* Heartbeat UI Rating Star Classes */
-.heartbeat > #star-rating-container {
-  display: -moz-box;
-/*  margin-bottom: 4px;*/
-}
-
-.heartbeat > #star-rating-container > #star5 {
-  -moz-box-ordinal-group: 5;
-}
-
-.heartbeat > #star-rating-container > #star4 {
-  -moz-box-ordinal-group: 4;
-}
-
-.heartbeat > #star-rating-container > #star3 {
-  -moz-box-ordinal-group: 3;
-}
-
-.heartbeat > #star-rating-container > #star2 {
-  -moz-box-ordinal-group: 2;
-}
-
-.heartbeat > #star-rating-container > .star-x  {
-  background: url("chrome://browser/skin/heartbeat-star-off.svg");
-  cursor: pointer;
-  /* Overrides the margin-inline-end for all platforms defined in the .plain class */
-  margin-inline-end: 4px !important;
-  width: 16px;
-  height: 16px;
-}
-
-.heartbeat > #star-rating-container > .star-x:hover,
-.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
-  background: url("chrome://browser/skin/heartbeat-star-lit.svg");
-}
-
 /* === END UITour.inc.css === */
 
 #UITourTooltipButtons {