Bug 1442296 - Adapt input and button styling inside popups to look better with themes. r?ntim, jaws, mconley draft
authorDylan Stokes <stokesdy@msu.edu>
Thu, 29 Mar 2018 22:13:44 -0400
changeset 775107 86461e44e0025b81dc4382588c59cbf03140e695
parent 775051 dcd10220d55aea46db212314c46d25a96a7be243
push id104607
push userbmo:stokesdy@msu.edu
push dateFri, 30 Mar 2018 02:26:45 +0000
reviewersntim, jaws, mconley
bugs1442296
milestone61.0a1
Bug 1442296 - Adapt input and button styling inside popups to look better with themes. r?ntim, jaws, mconley MozReview-Commit-ID: 5gVCkhQ91Q3
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -22,16 +22,21 @@
 %define panelPaletteIconSize 16px
 
 %define appmenuWarningBackgroundColor #FFEFBF
 %define appmenuWarningBackgroundColorHover #FFE8A2
 %define appmenuWarningBackgroundColorActive #FFE38F
 %define appmenuWarningColor black
 %define appmenuWarningBorderColor hsl(45,100%,77%)
 
+:root {
+  --arrowpanel-background: #444;
+  --arrowpanel-color: white;
+}
+
 :root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
   border-inline-start: 1px solid;
   border-image: linear-gradient(
     transparent 4px,
     var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.1)) 4px,
     var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.1)) calc(100% - 4px),
     transparent calc(100% - 4px)
@@ -43,16 +48,41 @@
   border-image-source: linear-gradient(
     transparent 4px,
     var(--lwt-toolbar-vertical-separator, rgba(255,255,255,.2)) 4px,
     var(--lwt-toolbar-vertical-separator, rgba(255,255,255,.2)) calc(100% - 4px),
     transparent calc(100% - 4px)
   );
 }
 
+#editBookmarkPanel button,
+panel[type=arrow] textbox,
+panel[type=arrow] menulist {
+  -moz-appearance: none;
+  border: 1px solid var(--arrowpanel-dimmed-further);
+  color: inherit;
+  background: var(--arrowpanel-dimmed);
+}
+
+panel[type=arrow] textbox {
+  background: transparent;
+}
+
+#editBookmarkPanel button:hover,
+panel[type=arrow] menulist:hover {
+  background: var(--arrowpanel-dimmed-further);
+}
+
+#editBookmarkPanel button:hover:active,
+panel[type=arrow] menulist:hover:active,
+panel[type=arrow] menulist[open]
+{
+  background: var(--arrowpanel-dimmed-even-further);
+}
+
 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 10px;
   width: 10px;
   background-size: contain;
   border: none;
 }