--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -28,16 +28,19 @@
--toolbarbutton-active-background: rgba(154,154,154,.5) linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.4));
--toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
--toolbarbutton-active-boxshadow: 0 1px 1px rgba(0,0,0,.1) inset, 0 0 1px rgba(0,0,0,.3) inset;
--toolbarbutton-checkedhover-backgroundcolor: rgba(200,200,200,.5);
--panel-separator-color: ThreeDShadow;
+ --arrowpanel-dimmed: hsla(210,4%,10%,.07);
+ --arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
+ --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
--urlbar-separator-color: ThreeDShadow;
}
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
@@ -990,35 +993,35 @@ toolbaritem[cui-areatype="menu-panel"] >
}
#urlbar-zoom-button > .toolbarbutton-icon {
display: none;
}
#urlbar-search-footer {
border-top: 1px solid var(--panel-separator-color);
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#urlbar-search-settings {
-moz-appearance: none;
-moz-user-focus: ignore;
color: GrayText;
margin: 0;
border: 0;
padding: 8px 20px;
background: transparent;
}
#urlbar-search-settings:hover {
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#urlbar-search-settings:hover:active {
- background-color: hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed-further);
}
#urlbar-search-splitter {
-moz-appearance: none;
width: 8px;
margin-inline-start: -4px;
}
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -132,17 +132,17 @@ menuitem[cmd="cmd_clearhistory"][disable
}
.search-panel-tree {
border-top: 1px solid var(--panel-separator-color) !important;
}
.search-panel-header {
font-weight: normal;
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
border: none;
border-top: 1px solid var(--panel-separator-color);
padding: 3px 5px;
color: GrayText;
}
.search-panel-header > label {
margin-top: 2px !important;
@@ -296,17 +296,17 @@ menuitem[cmd="cmd_clearhistory"][disable
.search-setting-button {
-moz-appearance: none;
margin: 0;
min-height: 32px;
}
.search-setting-button[selected] {
- background-color: hsla(210,4%,10%,.15);
+ background-color: var(--arrowpanel-dimmed-further);
}
.search-setting-button-compact {
list-style-image: url("chrome://browser/skin/gear.svg#gear");
}
.search-setting-button-compact[selected] {
list-style-image: url("chrome://browser/skin/gear.svg#gear-inverted");
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -39,16 +39,19 @@
--urlbar-dropmarker-url: url("chrome://browser/skin/urlbar-history-dropmarker.png");
--urlbar-dropmarker-region: rect(0, 11px, 14px, 0);
--urlbar-dropmarker-active-region: rect(0, 22px, 14px, 11px);
--urlbar-dropmarker-2x-url: url("chrome://browser/skin/urlbar-history-dropmarker@2x.png");
--urlbar-dropmarker-2x-region: rect(0, 22px, 28px, 0);
--urlbar-dropmarker-active-2x-region: rect(0, 44px, 28px, 22px);
--panel-separator-color: hsla(210,4%,10%,.14);
+ --arrowpanel-dimmed: hsla(210,4%,10%,.07);
+ --arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
+ --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
--urlbar-separator-color: hsla(0,0%,16%,.2);
}
#urlbar:-moz-lwtheme:not([focused="true"]),
.searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
opacity: .9;
}
@@ -1703,33 +1706,33 @@ toolbar .toolbarbutton-1 > .toolbarbutto
}
#urlbar-zoom-button > .toolbarbutton-icon {
display: none;
}
#urlbar-search-footer {
border-top: 1px solid var(--panel-separator-color);
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#urlbar-search-settings {
-moz-appearance: none;
-moz-user-focus: ignore;
color: GrayText;
margin: 0;
padding: 8px 20px;
}
#urlbar-search-settings:hover {
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#urlbar-search-settings:hover:active {
- background-color: hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed-further);
}
#urlbar-search-splitter {
min-width: 8px;
width: 8px;
background-image: none;
margin: 0 -4px;
position: relative;
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -122,17 +122,17 @@
.search-panel-tree {
border-top: 1px solid var(--panel-separator-color) !important;
}
.search-panel-header {
font-size: 10px;
font-weight: normal;
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
margin: 0;
padding: 3px 6px;
color: GrayText;
}
.search-panel-header > label {
margin-top: 2px !important;
@@ -278,17 +278,17 @@
.search-setting-button {
-moz-appearance: none;
border-radius: 0 0 4px 4px;
min-height: 32px;
}
.search-setting-button[selected] {
- background-color: hsla(210,4%,10%,.15);
+ background-color: var(--arrowpanel-dimmed-further);
}
.search-setting-button-compact {
list-style-image: url("chrome://browser/skin/gear.svg#gear");
}
.search-setting-button-compact[selected] {
list-style-image: url("chrome://browser/skin/gear.svg#gear-inverted");
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -151,21 +151,21 @@
}
.identity-popup-expander:-moz-focusring > .button-box,
.identity-popup-expander[panel-multiview-anchor] > .button-box {
border-style: none;
}
.identity-popup-expander:hover {
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
.identity-popup-expander:hover:active {
- background-color: hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed-further);
box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
/* CONTENT */
.identity-popup-permission-label,
.identity-popup-permission-state-label,
#identity-popup-security-content > description,
@@ -273,36 +273,36 @@
}
#identity-popup-securityView-body {
padding-inline-end: 1em;
}
#identity-popup-securityView-footer {
margin-top: 1em;
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#identity-popup-securityView-footer > button {
-moz-appearance: none;
margin: 0;
border: none;
border-top: 1px solid var(--panel-separator-color);
padding: 8px 20px;
color: inherit;
background-color: transparent;
}
#identity-popup-securityView-footer > button:hover,
#identity-popup-securityView-footer > button:focus {
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#identity-popup-securityView-footer > button:hover:active {
- background-color: hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed-further);
}
#identity-popup-content-verifier ~ description {
margin-top: 1em;
color: Graytext;
}
description#identity-popup-content-verified-by,
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -402,17 +402,17 @@ toolbarpaletteitem:-moz-any([place="pale
width: 16px;
margin-inline-start: -16px;
height: 51px;
margin-bottom: 2.2em;
padding: 0;
}
.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker {
- background-color: hsla(210,4%,10%,.1) !important;
+ background-color: var(--arrowpanel-dimmed) !important;
border-radius: 0 0 0 2px;
}
.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
border-radius: 0 0 2px 0;
}
#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
@@ -429,17 +429,17 @@ toolbaritem[cui-areatype="menu-panel"][s
-moz-box-pack: center;
}
toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
margin: 4px auto;
}
#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
- background-color: hsla(210,4%,10%,.1);
+ background-color: var(--arrowpanel-dimmed);
}
#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,
@@ -530,48 +530,48 @@ toolbarpaletteitem[place="palette"] > to
#zoom-reset-button > .toolbarbutton-icon {
display: none;
}
#PanelUI-footer {
display: flex;
flex-shrink: 0;
flex-direction: column;
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
padding: 0;
margin: 0;
}
#main-window[customizing] #PanelUI-footer-fxa {
display: none;
}
#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 {
display: none;
}
#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
content: url(chrome://browser/skin/warning.svg);
- filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
+ filter: drop-shadow(0 1px 0 hsla(206,50%,10%,.15));
width: 47px;
padding-top: 1px;
display: block;
text-align: center;
position: relative;
top: 25%;
}
#PanelUI-update-status[update-status]::after {
content: "";
width: 14px;
height: 14px;
margin-right: 16.5px;
- box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px rgba(12, 27, 38, 0.2);
+ box-shadow: 0px 1px 0px rgba(255,255,255,.2) inset, 0px -1px 0px rgba(0,0,0,.1) inset, 0px 1px 0px rgba(12,27,38,.2);
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: #74BF43;
@@ -904,77 +904,77 @@ toolbarpaletteitem[place="palette"] > to
opacity: 0.4;
}
#PanelUI-fxa-status:not([disabled]):hover,
#PanelUI-fxa-icon:not([disabled]):hover,
#PanelUI-help:not([disabled]):hover,
#PanelUI-customize:hover,
#PanelUI-quit:not([disabled]):hover {
- outline: 1px solid hsla(210,4%,10%,.07);
- background-color: hsla(210,4%,10%,.07);
+ outline: 1px solid var(--arrowpanel-dimmed);
+ background-color: var(--arrowpanel-dimmed);
}
#PanelUI-fxa-status:not([disabled]):hover:active,
#PanelUI-fxa-icon:not([disabled]):hover:active,
#PanelUI-help:not([disabled]):hover:active,
#PanelUI-customize:hover:active,
#PanelUI-quit:not([disabled]):hover:active {
- outline: 1px solid hsla(210,4%,10%,.12);
- background-color: hsla(210,4%,10%,.12);
+ outline: 1px solid var(--arrowpanel-dimmed-further);
+ background-color: var(--arrowpanel-dimmed-further);
box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
#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 {
outline: none;
}
#PanelUI-footer-fxa[fxastatus="error"] {
- background-color: hsla(42, 94%, 88%, 1.0);
- border-top: 1px solid hsla(42, 94%, 70%, 1.0);
+ background-color: hsl(42,94%,88%);
+ border-top: 1px solid hsl(42,94%,70%);
}
#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
- background-color: hsla(42, 94%, 85%, 1.0);
+ background-color: hsl(42,94%,85%);
}
#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
- background-color: hsla(42, 94%, 82%, 1.0);
+ background-color: hsl(42,94%,82%);
box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
#PanelUI-update-status {
color: black;
}
#PanelUI-update-status[update-status="succeeded"] {
- background-color: hsla(96, 65%, 75%, 0.5);
+ background-color: hsla(96,65%,75%,.5);
}
#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
- background-color: hsla(96, 65%, 75%, 0.8);
+ background-color: hsla(96,65%,75%,.8);
}
#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
- background-color: hsl(96, 65%, 75%);
+ background-color: hsl(96,65%,75%);
}
#PanelUI-update-status[update-status="failed"] {
- background-color: hsla(359, 69%, 84%, 0.5);
+ background-color: hsla(359,69%,84%,.5);
}
#PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
- background-color: hsla(359, 69%, 84%, 0.8);
+ background-color: hsla(359,69%,84%,.8);
}
#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
- background-color: hsl(359, 69%, 84%);
+ background-color: hsl(359,69%,84%);
}
#PanelUI-quit:not([disabled]):hover {
background-color: #d94141;
outline-color: #c23a3a;
}
#PanelUI-quit:not([disabled]):hover:active {
@@ -1006,20 +1006,20 @@ toolbarpaletteitem[place="palette"] > to
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1,
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
.share-provider-button,
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
-moz-appearance: none;
padding: 0 6px;
- background-color: hsla(210,4%,10%,0);
+ background-color: transparent;
border-radius: 2px;
border-style: solid;
- border-color: hsla(210,4%,10%,0);
+ border-color: transparent;
}
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1,
.share-provider-button,
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
border-width: 1px;
@@ -1092,51 +1092,51 @@ panelview .toolbarbutton-1,
panelview .toolbarbutton-1@buttonStateHover@,
toolbarbutton.subviewbutton@buttonStateHover@,
menu.subviewbutton@menuStateHover@,
menuitem.subviewbutton@menuStateHover@,
.share-provider-button@buttonStateHover@:not([checked="true"]),
.widget-overflow-list .toolbarbutton-1@buttonStateHover@,
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
- background-color: hsla(210,4%,10%,.08);
- border-color: hsla(210,4%,10%,.11);
+ background-color: var(--arrowpanel-dimmed);
+ border-color: var(--panel-separator-color);
}
.toolbaritem-combined-buttons@inAnyPanel@@buttonStateHover@ {
- border-color: hsla(210,4%,10%,.11);
+ border-color: var(--panel-separator-color);
}
panelview .toolbarbutton-1:-moz-any(@buttonStateActive@,[checked=true]),
toolbarbutton.subviewbutton@buttonStateActive@,
menu.subviewbutton@menuStateActive@,
menuitem.subviewbutton@menuStateActive@,
.share-provider-button:-moz-any(@buttonStateActive@,[checked=true]),
.widget-overflow-list .toolbarbutton-1@buttonStateActive@,
.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
- background-color: hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed-further);
border-color: var(--panel-separator-color);
box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}
.subviewbutton.panel-subview-footer {
margin: 4px -4px -4px;
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
border-radius: 0;
}
menuitem.panel-subview-footer@menuStateHover@,
.subviewbutton.panel-subview-footer@buttonStateHover@ {
- background-color: hsla(210,4%,10%,.15);
+ background-color: var(--arrowpanel-dimmed-further);
}
menuitem.panel-subview-footer@menuStateActive@,
.subviewbutton.panel-subview-footer@buttonStateActive@ {
- background-color: hsla(210,4%,10%,.19);
+ background-color: var(--arrowpanel-dimmed-even-further);
box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
#BMB_bookmarksPopup .subviewbutton {
font: menu;
font-weight: normal;
}
@@ -1293,21 +1293,21 @@ toolbarpaletteitem[place="palette"] > .t
}
toolbarpaletteitem[place="palette"] > #search-container {
min-width: 7em;
width: 7em;
}
.toolbaritem-combined-buttons@inAnyPanel@ {
- background-color: hsla(210,4%,10%,0);
+ background-color: transparent;
border-radius: 2px;
border: 1px solid;
- border-color: hsla(210,4%,10%,0);
- border-bottom-color: hsla(210,4%,10%,.1);
+ border-color: transparent;
+ border-bottom-color: var(--panel-separator-color);
padding: 0;
transition-property: background-color, border-color;
transition-duration: 150ms;
}
/* Make direct siblings overlap borders: */
.toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {
border-top-color: transparent !important;
@@ -1476,17 +1476,17 @@ menuitem[checked="true"].subviewbutton >
}
#PanelUI-panicView.cui-widget-panelview {
min-width: 280px;
}
#PanelUI-panic-timeframe {
padding: 15px;
- border-bottom: 1px solid rgba(0,0,0,0.1);
+ border-bottom: 1px solid var(--panel-separator-color);
}
#panic-button-success-icon,
#PanelUI-panic-timeframe-icon,
#PanelUI-panic-timeframe-icon-small {
background-color: transparent;
margin-inline-end: 10px;
}
@@ -1535,24 +1535,24 @@ menuitem[checked="true"].subviewbutton >
padding: 1px;
margin: 0 0 2px;
background-color: transparent;
border-radius: 2px;
border: 1px solid transparent;
}
.subviewradio@buttonStateHover@ {
- background-color: hsla(210,4%,10%,.08);
+ background-color: var(--arrowpanel-dimmed);
border-color: var(--panel-separator-color);
}
.subviewradio[selected],
.subviewradio[selected]:hover,
.subviewradio@buttonStateActive@ {
- background-color: hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed-further);
border-color: var(--panel-separator-color);
box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}
.subviewradio > .radio-check {
-moz-appearance: none;
width: 16px;
height: 16px;
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -36,17 +36,17 @@
padding: 16px 25px;
margin: 0;
/* The panel can be wider than this description after the blocked subview is
shown, so center the text. */
text-align: center;
}
.downloadsPanelFooter {
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
}
.downloadsPanelFooter toolbarseparator {
margin: 0;
border: 0;
min-width: 0;
border-left: 1px solid var(--panel-separator-color);
@@ -60,24 +60,24 @@
margin: 0;
padding: 0;
min-width: 0;
min-height: 40px;
border: none;
}
.downloadsPanelFooterButton:hover {
- outline: 1px solid hsla(210,4%,10%,.07);
- background-color: hsla(210,4%,10%,.07);
+ outline: 1px solid var(--arrowpanel-dimmed);
+ background-color: var(--arrowpanel-dimmed);
}
.downloadsPanelFooterButton:hover:active,
.downloadsPanelFooterButton[open="true"] {
- outline: 1px solid hsla(210,4%,10%,.12);
- background-color: hsla(210,4%,10%,.12);
+ outline: 1px solid var(--arrowpanel-dimmed-further);
+ background-color: var(--arrowpanel-dimmed-further);
box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
.downloadsPanelFooterButton[default] {
background-color: #0996f8;
color: white;
}
--- a/browser/themes/shared/plugin-doorhanger.inc.css
+++ b/browser/themes/shared/plugin-doorhanger.inc.css
@@ -21,18 +21,18 @@
background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
background-repeat: no-repeat;
width: 16px;
height: 15px;
margin-inline-start: 6px;
}
.click-to-play-plugins-notification-button-container {
- background-color: hsla(210,4%,10%,.07);
- border-top: 1px solid hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed);
+ border-top: 1px solid var(--panel-separator-color);
padding: 10px;
margin-top: 5px;
}
.click-to-play-popup-button {
width: 50%;
}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -41,16 +41,19 @@
--urlbar-dropmarker-hover-region: rect(0px, 22px, 14px, 11px);
--urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
--urlbar-dropmarker-2x-url: url("chrome://browser/skin/urlbar-history-dropmarker@2x.png");
--urlbar-dropmarker-2x-region: rect(0, 22px, 28px, 0);
--urlbar-dropmarker-hover-2x-region: rect(0, 44px, 28px, 22px);
--urlbar-dropmarker-active-2x-region: rect(0, 66px, 28px, 44px);
--panel-separator-color: ThreeDLightShadow;
+ --arrowpanel-dimmed: hsla(210,4%,10%,.07);
+ --arrowpanel-dimmed-further: hsla(210,4%,10%,.12);
+ --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
--urlbar-separator-color: ThreeDLightShadow;
}
@media (-moz-windows-default-theme) {
:root {
--panel-separator-color: hsla(210,4%,10%,.14);
}
@@ -1439,35 +1442,35 @@ html|*.urlbar-input:-moz-lwtheme::placeh
}
.search-go-container {
padding: 2px 2px;
}
#urlbar-search-footer {
border-top: 1px solid var(--panel-separator-color);
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#urlbar-search-settings {
-moz-appearance: none;
-moz-user-focus: ignore;
color: GrayText;
margin: 0;
border: 0;
padding: 8px 20px;
background: transparent;
}
#urlbar-search-settings:hover {
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
}
#urlbar-search-settings:hover:active {
- background-color: hsla(210,4%,10%,.12);
+ background-color: var(--arrowpanel-dimmed-further);
}
#urlbar-search-splitter {
min-width: 6px;
margin-inline-start: -3px;
border: none;
background: transparent;
}
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -127,17 +127,17 @@
}
.search-panel-tree {
border-top: 1px solid var(--panel-separator-color) !important;
}
.search-panel-header {
font-weight: normal;
- background-color: hsla(210,4%,10%,.07);
+ background-color: var(--arrowpanel-dimmed);
border: none;
border-top: 1px solid var(--panel-separator-color);
margin: 0;
padding: 3px 6px;
color: GrayText;
}
.search-panel-header > label {
@@ -288,17 +288,17 @@
}
.search-setting-button {
-moz-appearance: none;
min-height: 32px;
}
.search-setting-button[selected] {
- background-color: hsla(210,4%,10%,.15);
+ background-color: var(--arrowpanel-dimmed-further);
}
.search-setting-button-compact {
list-style-image: url("chrome://browser/skin/gear.svg#gear");
}
.search-setting-button-compact[selected] {
list-style-image: url("chrome://browser/skin/gear.svg#gear-inverted");