fourth and last part of syncing LCARStrek with Firefox 55 browser windows theme changes

[themes.git] / LCARStrek / browser / customizableui / panelUI.css

diff --git a/LCARStrek/browser/customizableui/panelUI.css b/LCARStrek/browser/customizableui/panelUI.css
index fe831a134a4b88a8cb62514b6227108e04f3bff2..b59f84be343f0748123564edae32e8d4d15f1af5 100644 (file)
--- a/LCARStrek/browser/customizableui/panelUI.css
+++ b/LCARStrek/browser/customizableui/panelUI.css
@@ -108,14 +108,27 @@
   display: none;
 }
 
-#PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
-  height: 13px;
+  border-radius: 50%;
+  box-shadow: none;
+  border: 1px solid -moz-dialog;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -9px 0 0 !important;
+  margin-inline-end: -6px !important;
+  min-width: 16px;
+  min-height: 16px;
 }
 
-#PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
-  background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
-  height: 13px;
+.panel-banner-item[notificationid^=update]::after {
+  background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  border-radius: 50%;
+}
+
+.panel-banner-item[notificationid^=update] {
+  list-style-image: url(chrome://branding/content/icon16.png);
 }
 
 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
@@ -175,7 +188,8 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan
   display: none;
 }
 
-.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
+panelview {
+  -moz-box-orient: vertical;
   -moz-box-flex: 1;
 }
 
@@ -185,6 +199,11 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan
   -moz-box-flex: 1;
 }
 
+.panel-view-body-unscrollable {
+  overflow: hidden;
+  -moz-box-flex: 1;
+}
+
 #PanelUI-popup .panel-subview-body {
   margin: -4px;
   padding: 4px 4px;
@@ -203,6 +222,8 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan
   color: #000000;
   font-variant: small-caps;
   border-radius: 4px;
+  /* Workaround for min-height not being accounted for in vertical layout. */
+  height: 41px;
 }
 
 .panel-subview-footer {
@@ -298,7 +319,7 @@ panelview[id^=PanelUI-webext-] {
 }
 
 panelview:not([mainview]) .toolbarbutton-text,
-.cui-widget-panel toolbarbutton > .toolbarbutton-text {
+.cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text {
   text-align: start;
   display: -moz-box;
 }
@@ -447,10 +468,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .panel-banner-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-label,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-icon,
@@ -553,23 +571,17 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   border-bottom-left-radius: 4px;
 }
 
-#main-window[customizing] #PanelUI-fxa-container,
-#main-window[customizing] #PanelUI-footer-fxa {
+#main-window[customizing] #PanelUI-fxa-container {
   display: none;
 }
 
 #PanelUI-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
-#PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
-#PanelUI-fxa-container:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
-#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
-#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
-#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
+#PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon {
   display: none;
 }
 
 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status::after,
-#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after,
-#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
+#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after {
   content: url("chrome://browser/skin/warning.svg");
   width: 47px;
   padding-top: 1px;
@@ -579,30 +591,18 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   top: 25%;
 }
 
-#PanelUI-update-status[update-status]::after,
-#PanelUI-footer-addons > toolbarbutton::after {
+.addon-banner-item::after,
+.panel-banner-item::after {
   content: "";
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   margin-inline-end: 16.5px;
-  border-radius: 2px;
-  background-size: contain;
   display: -moz-box;
 }
 
-#PanelUI-update-status[update-status="succeeded"]::after {
-  background-image: url(chrome://browser/skin/update-badge.svg);
-  background-color: #008484;
-}
-
-#PanelUI-update-status[update-status="failed"]::after {
-  background-image: url(chrome://browser/skin/update-badge-failed.svg);
-  background-color: #FF0000;
-}
-
-#PanelUI-footer-addons > toolbarbutton {
+.addon-banner-item {
   background-color: #A09090;
-  /* Force border to override `#PanelUI-footer-addons > toolbarbutton` selector below */
+  /* Force border to override `.addon-banner-item` selector below */
   /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/
   display: flex;
   flex: 1 1 0%;
@@ -611,20 +611,20 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   border-inline-start-style: none;
 }
 
-#PanelUI-footer-addons > toolbarbutton:hover {
+.addon-banner-item:hover {
   background-color: #FFCF00;
 }
 
-#PanelUI-footer-addons > toolbarbutton:active {
+.addon-banner-item:active {
   background-color: #FF9F00;
 }
 
-#PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
+.addon-banner-item > .toolbarbutton-icon {
   width: 14px;
   height: 14px;
 }
 
-#PanelUI-footer-addons > toolbarbutton::after {
+.addon-banner-item::after {
   background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
 }
 
@@ -635,37 +635,33 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-footer-inner,
-#PanelUI-fxa-container:not([hidden]),
-#PanelUI-footer-fxa:not([hidden]) {
+#PanelUI-fxa-container:not([hidden]) {
   display: flex;
   border-top: 1px solid var(--panel-separator-color);
 }
 
 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
-#PanelUI-multiView[viewtype="subview"] #PanelUI-fxa-container,
-#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
+#PanelUI-multiView[viewtype="subview"] #PanelUI-fxa-container {
   position: relative;
 }
 
 #PanelUI-footer-inner > toolbarseparator,
-#PanelUI-fxa-container > toolbarseparator,
-#PanelUI-footer-fxa > toolbarseparator {
+#PanelUI-fxa-container > toolbarseparator {
   border: 0;
   border-left: 1px solid var(--panel-separator-color);
   margin: 0;
 }
 
 #PanelUI-footer-inner:hover > toolbarseparator,
-#PanelUI-fxa-container:hover > toolbarseparator,
-#PanelUI-footer-fxa:hover > toolbarseparator {
+#PanelUI-fxa-container:hover > toolbarseparator {
 /*  margin: 0;*/
 }
 
-#PanelUI-update-status,
+.addon-banner-item,
+.panel-banner-item,
 #PanelUI-help,
 #PanelUI-fxa-label,
 #PanelUI-fxa-icon,
-#PanelUI-footer-addons > toolbarbutton,
 #PanelUI-customize,
 #PanelUI-quit {
   margin: 0;
@@ -679,16 +675,13 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-box-orient: horizontal;
 }
 
-#PanelUI-update-status {
+.panel-banner-item {
   border-top: 1px solid var(--panel-separator-color);
-}
-
-#PanelUI-update-status {
   border-bottom: 1px solid transparent;
   margin-bottom: -1px;
 }
 
-#PanelUI-update-status > .toolbarbutton-text {
+.panel-banner-item > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
@@ -797,9 +790,9 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   min-width: 44px;
 }
 
-#PanelUI-update-status > .toolbarbutton-text,
+.addon-banner-item > .toolbarbutton-text,
+.panel-banner-item > .toolbarbutton-text,
 #PanelUI-fxa-label > .toolbarbutton-text,
-#PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
 #PanelUI-customize > .toolbarbutton-text {
   margin: 0;
   padding: 0 6px;
@@ -812,7 +805,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   display: none;
 }
 
-#PanelUI-update-status > .toolbarbutton-icon,
+.panel-banner-item > .toolbarbutton-icon,
 #PanelUI-fxa-label > .toolbarbutton-icon,
 #PanelUI-fxa-icon > .toolbarbutton-icon,
 #PanelUI-customize > .toolbarbutton-icon,
@@ -827,30 +820,25 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-fxa-label,
-#PanelUI-footer-addons > toolbarbutton,
+.addon-banner-item,
 #PanelUI-customize {
   flex: 1;
   padding-inline-start: 15px;
   border-inline-start-style: none;
 }
 
-#PanelUI-fxa-container[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
-#PanelUI-fxa-container[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label,
-#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
-#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
+#PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
   padding-inline-start: 0px;
 }
 
-#PanelUI-update-status {
+/* descend from #PanelUI-footer to add specificity, or else the
+   padding-inline-start will be overridden */
+#PanelUI-footer > .panel-banner-item {
   width: calc(var(--panel-ui-menuPanelWidth) + 30px);
   padding-inline-start: 15px;
   border-inline-start-style: none;
 }
 
-#PanelUI-update-status {
-  list-style-image: url(chrome://branding/content/icon16.png);
-}
-
 #PanelUI-fxa-label,
 #PanelUI-fxa-icon {
   list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
@@ -926,9 +914,15 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   margin-left: 28px;
 }
 
+#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
+  margin-left: 32px;
+}
+
 .fxaSyncIllustration {
   width: 180px;
   height: var(--panel-ui-sync-illustration-height);
+  -moz-context-properties: fill;
+  fill: #A09090;
 }
 
 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
@@ -972,7 +966,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   display: none;
 }
 
-#PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
+#PanelUI-fxa-icon[syncstatus="active"] {
   list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
 }
 
@@ -995,7 +989,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 
 #PanelUI-fxa-label,
 #PanelUI-fxa-icon,
-#PanelUI-footer-addons > toolbarbutton,
+.addon-banner-item,
 #PanelUI-customize,
 #PanelUI-help,
 #PanelUI-quit {
@@ -1003,22 +997,10 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
-#PanelUI-fxa-container[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
-#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
-#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
+#PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
   display: none;
 }
 
-#PanelUI-fxa-container[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
-#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
-  display: none;
-}
-
-#PanelUI-fxa-status[disabled],
-#PanelUI-fxa-icon[disabled] {
-  pointer-events: none;
-}
-
 #PanelUI-fxa-avatar {
   width: 32px;
   height: 32px;
@@ -1033,8 +1015,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   margin-inline-end: 0;
 }
 
-#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
-#PanelUI-fxa-container[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
+#PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
   list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
 }
 
@@ -1049,77 +1030,56 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-help[disabled],
-#PanelUI-quit[disabled],
-#PanelUI-fxa-icon[disabled],
-#PanelUI-fxa-avatar[disabled],
-#PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
-#PanelUI-fxa-status::after {
+#PanelUI-quit[disabled] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
-#PanelUI-fxa-status:not([disabled]):hover,
-#PanelUI-fxa-icon:not([disabled]):hover,
+#PanelUI-fxa-status:hover,
+#PanelUI-fxa-icon:hover,
 #PanelUI-help:not([disabled]):hover,
 #PanelUI-customize:hover,
 #PanelUI-quit:not([disabled]):hover {
 }
 
-#PanelUI-fxa-status:not([disabled]):hover:active,
-#PanelUI-fxa-icon:not([disabled]):hover:active,
+#PanelUI-fxa-status:hover:active,
+#PanelUI-fxa-icon:hover:active,
 #PanelUI-help:not([disabled]):hover:active,
 #PanelUI-customize:hover:active,
 #PanelUI-quit:not([disabled]):hover:active {
 }
 
-#PanelUI-fxa-status:not([disabled]):hover,
-#PanelUI-fxa-status:not([disabled]):hover:active,
-#PanelUI-fxa-icon:not([disabled]):hover,
-#PanelUI-fxa-icon:not([disabled]):hover:active {
+#PanelUI-fxa-status:hover,
+#PanelUI-fxa-status:hover:active,
+#PanelUI-fxa-icon:hover,
+#PanelUI-fxa-icon:hover:active {
 }
 
-#PanelUI-fxa-container[fxastatus="error"],
-#PanelUI-footer-fxa[fxastatus="error"] {
+#PanelUI-fxa-container[fxastatus="login-failed"],
+#PanelUI-fxa-container[fxastatus="unverified"] {
   background-color: #FF0000;
   color: #000000;
 }
 
-#PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover,
-#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
+#PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover,
+#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover {
   background-color: #FFCF00;
 }
 
-#PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover:active,
-#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
+#PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover:active,
+#PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover:active {
   background-color: #FF9F00;
 }
 
-#PanelUI-update-status {
-/*  color: black; */
-}
-
-#PanelUI-update-status[update-status="succeeded"] {
+.panel-banner-item {
   background-color: #008484;
   color: #000000;
 }
 
-#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
-  background-color: #FFCF00;
-}
-
-#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
-  background-color: #FF9F00;
-}
-
-#PanelUI-update-status[update-status="failed"] {
-  background-color: #FF0000;
-  color: #000000;
-}
-
-#PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
+.panel-banner-item:not([disabled]):hover {
   background-color: #FFCF00;
 }
 
-#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
+.panel-banner-item:not([disabled]):hover:active {
   background-color: #FF9F00;
 }
 
@@ -1211,13 +1171,13 @@ panelview .toolbarbutton-1,
 /*  font: menu;*/
 }
 
-.PanelUI-subView .subviewbutton[shortcut]::after {
+.subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
   color: #A09090;
 }
 
-.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
+.subviewbutton[shortcut]::after {
   margin-inline-start: 10px;
 }
 
@@ -1328,9 +1288,11 @@ menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 }
 */
 
+#widget-overflow-scroller > toolbarseparator,
 .PanelUI-subView menuseparator,
 .PanelUI-subView toolbarseparator,
-.cui-widget-panelview menuseparator {
+.cui-widget-panelview menuseparator,
+.cui-widget-panel toolbarseparator  {
   -moz-appearance: none;
   min-height: 0;
   border-top: 1px solid var(--panel-separator-color);
@@ -1364,14 +1326,7 @@ menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
 
 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
 #PanelUI-historyItems > toolbarbutton {
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
-  #PanelUI-historyItems > toolbarbutton {
-    list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
-  }
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
@@ -1543,7 +1498,7 @@ toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem]
   margin-bottom: 10px;
 }
 
-#widget-overflow-list {
+.widget-overflow-list {
   width: var(--panel-ui-menuPanelWidth);
   padding-left: 10px;
   padding-right: 10px;
@@ -1570,7 +1525,7 @@ toolbarbutton[overflowedItem=true] {
   padding-inline-start: .5em;
 }
 
-#widget-overflow-list > .toolbaritem-combined-buttons {
+.widget-overflow-list > .toolbaritem-combined-buttons {
   min-height: 28px;
 }