sync both themes with toolkit windows theme changes in Mozilla 55 cycle
[themes.git] / LCARStrek / browser / browser.css
index 6a07f64b55ba8e8477c3f1884ab750eb4206ed13..61ea7c6fc224f4f945fe04a38faacf52938778ac 100644 (file)
@@ -36,6 +36,124 @@ menubar {
   -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
 }
 
+/* === BEGIN browser.inc.css === */
+
+/* Go button */
+.urlbar-go-button {
+  padding: 0 3px;
+  list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
+}
+
+.urlbar-go-button {
+  -moz-image-region: rect(0, 42px, 14px, 28px);
+}
+
+.urlbar-go-button:hover {
+  -moz-image-region: rect(14px, 42px, 28px, 28px);
+}
+
+.urlbar-go-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .urlbar-go-button {
+    list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
+    -moz-image-region: rect(0, 84px, 28px, 56px);
+    width: 14px;
+  }
+
+  .urlbar-go-button:hover {
+    -moz-image-region: rect(28px, 84px, 56px, 56px);
+  }
+
+  .urlbar-go-button:hover:active {
+    -moz-image-region: rect(56px, 84px, 84px, 56px);
+  }
+}
+
+/* Zoom button */
+#urlbar-zoom-button {
+  margin: 0 3px;
+  font-size: .8em;
+  padding: 0 8px;
+  border-radius: 1em;
+/*  background-color: hsla(0,0%,0%,.05);
+  border: 1px solid ThreeDLightShadow;*/
+}
+
+#urlbar-zoom-button[animate="true"] {
+  animation-name: urlbar-zoom-reset-pulse;
+  animation-duration: 250ms;
+}
+
+#urlbar-zoom-button:hover {
+/*  background-color: hsla(0,0%,0%,.1);*/
+}
+
+#urlbar-zoom-button:hover:active {
+/*  background-color: hsla(0,0%,0%,.15);*/
+}
+
+#urlbar-zoom-button > .toolbarbutton-text {
+  display: -moz-box;
+}
+
+#urlbar-zoom-button > .toolbarbutton-icon {
+  display: none;
+}
+
+/* Page action button */
+#urlbar-page-action-button {
+  list-style-image: url("chrome://browser/skin/page-action.svg");
+/*  margin: 0;
+  padding: 0 6px;*/
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#urlbar-page-action-button > .toolbarbutton-icon {
+  width: 16px;
+}
+
+#page-action-copy-url-button {
+  list-style-image: url("chrome://browser/skin/copy-url.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#page-action-email-link-button {
+  list-style-image: url("chrome://browser/skin/email-link.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#page-action-send-to-device-button {
+  list-style-image: url("chrome://browser/skin/device-mobile.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.page-action-sendToDevice-device[clientType=mobile] {
+  list-style-image: url("chrome://browser/skin/device-mobile.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.page-action-sendToDevice-device[clientType=desktop] {
+  list-style-image: url("chrome://browser/skin/device-desktop.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#page-action-sendToDevice-fxa-button {
+  list-style-image: url("chrome://browser/skin/sync.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* === END browser.inc.css === */
+
 :root {
   /*--backbutton-urlbar-overlap: 5px;*/
 
@@ -51,7 +169,7 @@ menubar {
   --arrowpanel-active: #FF9F00;
   --arrowpanel-dimmed: #402000;
   --arrowpanel-dimmed-further: #794900;
-  --arrowpanel-dimmed-even-further: 603000;
+  --arrowpanel-dimmed-even-further: #603000;
 
   --urlbar-separator-color: #9C9CFF;
 }
@@ -106,13 +224,6 @@ menubar {
   display: none;
 }
 
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
-#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
-  outline-color: #A09090;
-}
-
 #navigator-toolbox {
 }
 
@@ -446,7 +557,7 @@ menuitem.bookmark-item {
 /* ::::: bookmark items ::::: */
 
 .bookmark-item  {
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-image-region: auto;
 }
 
@@ -867,6 +978,10 @@ menuitem.bookmark-item {
   transform: scaleX(-1);
 }
 
+#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  display: none;
+}
+
 #tabview-button {
   -moz-image-region: rect(0, 648px, 18px, 630px);
 }
@@ -916,6 +1031,10 @@ menuitem.bookmark-item {
   -moz-image-region: rect(18px, 738px, 36px, 720px);
 }
 
+#pocket-button {
+  fill: currentColor !important;
+}
+
 /* === END toolbarbuttons.inc.css === */
 
 /* === BEGIN menupanel.inc.css === */
@@ -968,7 +1087,7 @@ toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #
           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[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;
 }
 
@@ -1124,7 +1243,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
@@ -1277,14 +1396,14 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
 
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
 /*  padding-inline-end: 17px;*/
 }
 
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
   /* horizontal padding + border + icon width */
 /*  max-width: 43px;*/
 }
@@ -1450,6 +1569,12 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
+
+#forward-button > .toolbarbutton-menu-dropmarker,
+#back-button > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
 /*
 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
@@ -1699,34 +1824,7 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
 
 #urlbar-zoom-button {
 /*  -moz-appearance: none;*/
-  margin: 0 3px;
-  font-size: .8em;
-  padding: 0 8px;
-  border-radius: 1em;
-/*  background-color: hsla(0,0%,0%,.05);
-  color: inherit;
-  border: 1px solid ThreeDLightShadow;*/
-}
-
-#urlbar-zoom-button[animate="true"] {
-  animation-name: urlbar-zoom-reset-pulse;
-  animation-duration: 250ms;
-}
-
-#urlbar-zoom-button:hover {
-/*  background-color: hsla(0,0%,0%,.1);*/
-}
-
-#urlbar-zoom-button:hover:active {
-/*  background-color: hsla(0,0%,0%,.15);*/
-}
-
-#urlbar-zoom-button > .toolbarbutton-text {
-  display: -moz-box;
-}
-
-#urlbar-zoom-button > .toolbarbutton-icon {
-  display: none;
+/*  color: inherit;*/
 }
 
 .search-go-container {
@@ -1751,17 +1849,15 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
 }
 
 #urlbar-search-splitter {
-  min-width: 6px;
-  margin-inline-start: -3px;
+  /* The splitter width should equal the location and search bars' combined
+     neighboring margin and border width. */
+  min-width: 8px;
+  margin: 0 -4px;
+  position: relative;
   border: none;
   background: transparent;
 }
 
-#urlbar-search-splitter + #urlbar-container > #urlbar,
-#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
-  margin-inline-start: 0;
-}
-
 .urlbar-display {
   border-inline-end: 1px solid #9C9CFF;
   margin-inline-end: 3px;
@@ -1914,6 +2010,9 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
   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;
@@ -1925,13 +2024,6 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
   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 {
-  list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
-  visibility: visible;
-}
-
 /* === END identity-block/icons.inc.css === */
 
 #identity-box {
@@ -2020,6 +2112,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
   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 */
 
 #sharing-icon {
@@ -2050,10 +2149,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
 
 #identity-box[sharing] > #identity-icon,
 #sharing-icon {
-  animation: 3s linear pulse infinite;
+  animation: 3s linear identity-box-sharing-icon-pulse infinite;
 }
 
-@keyframes pulse {
+@keyframes identity-box-sharing-icon-pulse {
+/* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
   0%, 16.66%, 83.33%, 100% {
     opacity: 0;
   }
@@ -2170,15 +2270,56 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box
   padding: 0px 1px 0px 1px;
 }
 
+#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+  margin-inline-start: 4px;
+  margin-inline-end: 0;
+}
+
 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
   font: icon;
-  margin-inline-start: 6px;
+  margin-inline-start: 4px;
 }
 
 #PopupAutoComplete > richlistbox {
   padding: 0;
 }
 
+/* Login form autocompletion */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
+  display: initial;
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+}
+
+/* Insecure field warning */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
+  background-color: var(--arrowpanel-dimmed);
+  border-bottom: 1px solid var(--panel-separator-color);
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
+  background-color: var(--arrowpanel-dimmed-further);
+  color: #FFCF00;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
+  color: #A09090;
+  font-size: 1em;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
+  color: inherit;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+}
+
 /* === END autocomplete.inc.css === */
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
@@ -2201,14 +2342,9 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box
   border-radius: 2px;
   border: 1px solid transparent;
 }
-
-.autocomplete-richlistitem[selected=true] {
-  background-color: hsl(210, 80%, 52%);
-}
 */
 .ac-title {
   font-size: 14px;
-/*  color: hsl(0, 0%, 0%);*/
 }
 
 .ac-tags {
@@ -2216,8 +2352,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box
 }
 /*
 html|span.ac-tag {
-  background-color: hsl(216, 0%, 88%);
-  color: hsl(0, 0%, 0%);
   border-radius: 2px;
   border: 1px solid transparent;
   padding: 0 1px;
@@ -2230,30 +2364,6 @@ html|span.ac-tag {
   font-size: 12px;
 }
 
-.ac-separator {
-/*  color: hsl(0, 0%, 50%);*/
-}
-
-.ac-url {
-  color: #9C9CFF;
-}
-
-.ac-action {
-  color: #9C9CFF;
-}
-
-.ac-title[selected=true],
-.ac-separator[selected],
-.ac-url[selected=true],
-.ac-action[selected=true] {
-  color: #000000;
-}
-
-.ac-tags-text[selected] > html|span.ac-tag {
-  background-color: #A09090;
-  color: #000000;
-}
-
 html|span.ac-emphasize-text-title,
 html|span.ac-emphasize-text-tag,
 html|span.ac-emphasize-text-url {
@@ -2268,33 +2378,28 @@ html|span.ac-emphasize-text-url {
 /*  list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
 }
 
-.ac-result-type-bookmark,
-.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
+.ac-result-type-bookmark {
   list-style-image: url("chrome://browser/skin/places/bookmark.png");
   -moz-image-region: rect(0px 16px 16px 0px);
   width: 16px;
   height: 16px;
 }
 
-richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
-.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
+richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
 }
 
 .ac-type-icon[type=keyword],
-.ac-site-icon[type=searchengine],
-.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
+.ac-site-icon[type=searchengine] {
   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
 }
 
 .ac-type-icon[type=keyword][selected],
-.ac-site-icon[type=searchengine][selected],
-.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
+.ac-site-icon[type=searchengine][selected] {
   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
 }
 
-.ac-result-type-tag,
-.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
+.ac-result-type-tag {
   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
   width: 16px;
   height: 16px;
@@ -2338,6 +2443,12 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   border-image-slice: 1;
 }
 
+/* XXX: temporary for Photon preview changes */
+#reload-button,
+#stop-button {
+  list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
+}
+
 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -2354,18 +2465,22 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   padding-inline-start: 3px;
 }
 
+#reload-button,
 #urlbar-reload-button {
   -moz-image-region: rect(0px, 14px, 14px, 0px);
 }
 
+#reload-button[disabled=true],
 #urlbar-reload-button[disabled=true] {
   -moz-image-region: rect(28px, 14px, 42px, 0px);
 }
 
+#reload-button:not([disabled=true]):hover,
 #urlbar-reload-button:not([disabled=true]):hover {
   -moz-image-region: rect(14px, 14px, 28px, 0px);
 }
 
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
@@ -2382,21 +2497,27 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   transform: scaleX(-1);
 }
 
+#stop-button,
 #urlbar-stop-button {
   -moz-image-region: rect(0px, 28px, 14px, 14px);
 }
 
+#stop-button:hover,
 #urlbar-stop-button:hover {
   -moz-image-region: rect(14px, 28px, 28px, 14px);
 }
 
 @media (min-resolution: 1.1dppx) {
+  #reload-button,
+  #stop-button,
   #urlbar-go-button,
   #urlbar-reload-button,
   #urlbar-stop-button {
     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
   }
 
+  #reload-button > .toolbarbutton-icon,
+  #stop-button > .toolbarbutton-icon,
   #urlbar-go-button > .toolbarbutton-icon,
   #urlbar-reload-button > .toolbarbutton-icon,
   #urlbar-stop-button > .toolbarbutton-icon {
@@ -2415,26 +2536,32 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
     -moz-image-region: rect(56px, 84px, 84px, 56px);
   }
 
+  #reload-button,
   #urlbar-reload-button {
     -moz-image-region: rect(0, 28px, 28px, 0);
   }
 
+  #reload-button:not([disabled]):hover,
   #urlbar-reload-button:not([disabled]):hover {
     -moz-image-region: rect(28px, 28px, 56px, 0);
   }
 
+  #reload-button:not([disabled]):hover:active,
   #urlbar-reload-button:not([disabled]):hover:active {
     -moz-image-region: rect(56px, 28px, 84px, 0);
   }
 
+  #stop-button,
   #urlbar-stop-button {
     -moz-image-region: rect(0, 56px, 28px, 28px);
   }
 
+  #stop-button:not([disabled]):hover,
   #urlbar-stop-button:not([disabled]):hover {
     -moz-image-region: rect(28px, 56px, 56px, 28px);
   }
 
+  #stop-button:hover:active,
   #urlbar-stop-button:hover:active {
     -moz-image-region: rect(56px, 56px, 84px, 28px);
   }
@@ -2762,15 +2889,16 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 }
 
 .tab-icon-image {
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
 .tab-icon-image[sharing]:not([selected]),
 .tab-sharing-icon-overlay {
-  animation: 3s linear pulse infinite;
+  animation: 3s linear tab-sharing-icon-pulse infinite;
 }
 
-@keyframes pulse {
+@keyframes tab-sharing-icon-pulse {
+/* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
   0%, 16.66%, 83.33%, 100% {
     opacity: 0;
   }
@@ -2895,7 +3023,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 .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;
 }
 
@@ -2912,8 +3040,8 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   padding: 0;
 }
 
-.tab-icon-sound[soundplaying-scheduledremoval]:not(:hover),
-.tab-icon-overlay[soundplaying-scheduledremoval]:not(:hover) {
+.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
+.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
   transition: opacity .3s linear var(--soundplaying-removal-delay);
   opacity: 0;
 }
@@ -3060,10 +3188,6 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
   .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
   }
-
-  .tab-icon-image {
-    list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
-  }
 }
 
 /* All tabs menupopup */
@@ -3076,7 +3200,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 .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;
 }
 
@@ -3150,7 +3274,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   transition: 1s background-color ease-out;
 }
 
-.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
+.tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
   background-color: #008484;
 }
 
@@ -3190,6 +3314,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 
 #TabsToolbar > #new-tab-button {
   width: 26px;
+  -moz-box-orient: horizontal;
 }
 
 #alltabs-button {
@@ -3216,7 +3341,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
 
 /* All tabs menupopup */
 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-image-region: auto;
 }
 
@@ -3318,7 +3443,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
    type of icon displayed. This rule must be defined before the others in order
    for its list-style-image to be overridden. */
 .notification-anchor-icon {
-  list-style-image: url("chrome://global/skin/icons/information-16.png");
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
 }
 
 .notification-anchor-icon:-moz-focusring {
@@ -3327,25 +3452,16 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 @media (min-resolution: 1.1dppx) {
   .notification-anchor-icon {
-    list-style-image: url(chrome://global/skin/icons/information-32.png);
+    list-style-image: url(chrome://global/skin/icons/info.svg);
   }
 }
 
-.popup-notification-icon {
-  width: 64px;
-  height: 64px;
-  margin-inline-end: 10px;
-}
-
 .notification-anchor-icon:not(.plugin-blocked),
 #blocked-permissions-container > .blocked-permission-icon {
   filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
-.notification-anchor-icon:not(.plugin-blocked):not(:hover) {
-}
-
 /* INDIVIDUAL NOTIFICATIONS */
 
 .popup-notification-icon[popupid="web-notifications"],
@@ -3484,7 +3600,7 @@ html|*#webRTC-previewVideo {
 /* INSTALL ADDONS */
 
 .install-icon {
-  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
+  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
 }
 
 .popup-notification-icon[popupid="xpinstall-disabled"],
@@ -3587,6 +3703,40 @@ html|*#webRTC-previewVideo {
   max-width: 28em;
 }
 
+.addon-install-confirmation-name {
+  font-weight: bold;
+}
+
+.addon-webext-perm-header {
+  font-size: 1.3em;
+}
+
+.addon-webext-name {
+  display: inline;
+  font-weight: bold;
+  margin: 0;
+}
+
+.addon-addon-icon {
+  width: 14px;
+  height: 14px;
+  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);
+}
+
+/* Notification icon box */
+
+.notification-anchor-icon:-moz-focusring {
+/*  outline: 1px dotted -moz-DialogText;*/
+}
+
 /* Translation infobar */
 
 /* === BEGIN infobar.inc.css === */
@@ -3755,7 +3905,6 @@ html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
   content: url("chrome://browser/skin/fullscreen/insecure.svg");
 }
-
 html|*.pointerlockfswarning-domain-text,
 html|*.pointerlockfswarning-generic-text {
   font-size: 21px;
@@ -3769,13 +3918,9 @@ html|*.pointerlockfswarning-domain {
   margin: 0;
 }
 
+html|*#fullscreen-exit-button,
 html|*.pointerlockfswarning-exit-button {
-  padding: 5px 30px;
-  font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
-  font-size: 14px;
-  font-weight: lighter;
   margin: 0;
-  box-sizing: content-box;
 
   border-radius: 300px;
   border: none;
@@ -4488,6 +4633,22 @@ notification.pluginVulnerable .messageImage {
   --drag-drop-transition-duration: .3s;
 }
 
+#main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-attachment: fixed;
+  background-color: transparent;
+  background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
+                      var(--toolbox-rect-height), 0),
+                    linear-gradient(to bottom,
+                      var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
+                      rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
+                      rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
+                      rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
+                      rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
+                      transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
+}
+
 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
   margin-bottom: 1em;
 }
@@ -4677,7 +4838,7 @@ notification.pluginVulnerable .messageImage {
   width: 20px;
   height: 20px;
   border-radius: 2px;
-  background-image: url("chrome://browser/skin/theme-switcher-icon.png");
+  background-image: url("chrome://browser/content/default-theme-icon.svg");
   background-size: contain;
 }
 
@@ -4879,7 +5040,7 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
 }
 
 .customization-lwtheme-menu-theme[defaulttheme] {
-  list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
+  list-style-image: url(chrome://browser/content/default-theme-icon.svg);
 }
 
 .customization-lwtheme-menu-theme[active="true"] {
@@ -5036,15 +5197,6 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
   background-attachment: fixed;
 }
 
-#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
-  background-repeat: no-repeat;
-  background-position: right top;
-  background-attachment: fixed;
-  /* The image will get set from CustomizeMode.jsm */
-  background-image: none;
-  background-color: transparent;
-}
-
 #main-window[customization-lwtheme]:-moz-lwtheme {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
   background-repeat: repeat;
@@ -5430,7 +5582,7 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
   width: 16px;
   height: 16px;
   margin: 7px;
-  filter: url(chrome://browser/skin/filters.svg#fill);
+  filter: url(chrome://global/skin/filters.svg#fill);
   fill: currentColor;
 }
 
@@ -5511,19 +5663,17 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
 
 #ContentSelectDropdown > menupopup > menucaption,
 #ContentSelectDropdown > menupopup > menuitem {
-  padding: 4px 6px;
+  padding: 0 6px;
+  border-width: 0;
+/*  font: -moz-list;*/
 }
 
 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
-  font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
-  font-size: 11px;
-  /**
-   * Remove the extra vertical padding set by menu.css since
-   * the menuitem itself will include enough padding.
-   */
-  padding-top: 0px;
-  padding-bottom: 0px;
+  /* Padding should follow the 4/12 ratio, where 12px is the default font-size
+     with 4px being the preferred padding size. */
+  padding-top: .3333em;
+  padding-bottom: .3333em;
 }
 
 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
@@ -5543,8 +5693,10 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
   color: #A09090;
 }
 
-#ContentSelectDropdown > .isOpenedViaTouch > menucaption,
-#ContentSelectDropdown > .isOpenedViaTouch > menuitem {
-  padding-top: 11px;
-  padding-bottom: 11px;
+#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
+#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
+  /* Touch padding should follow the 11/12 ratio, where 12px is the default
+     font-size with 11px being the preferred padding size. */
+  padding-top: .9167em;
+  padding-bottom: .9167em;
 }