Bug 1346280 - Use --focus-ring-box-shadow in place of @focusRingShadow@/@yosemiteRingFocusShadow@ in osx theme. r?Gijs
* replace use of @focusRingShadow@ with the CSS variable in toolkit osx theme and browser theme files
* remove redundant @media blocks as --focus-ring-box-shadow is already mac-theme specific
MozReview-Commit-ID: Dw1meSEbmcV
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@@ -46,10 +46,8 @@
}
#tracking-action-block:-moz-focusring,
#tracking-action-unblock:-moz-focusring,
#tracking-action-unblock-private:-moz-focusring,
#identity-popup-securityView-body > button:-moz-focusring {
box-shadow: var(--focus-ring-box-shadow);
}
-
-
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -100,17 +100,17 @@ label.findbar-find-fast:-moz-lwtheme,
.findbar-highlight {
margin-inline-start: 8px;
}
.findbar-container > toolbarbutton:-moz-focusring,
.findbar-find-next:-moz-focusring,
.findbar-find-previous:-moz-focusring {
position: relative;
- box-shadow: @focusRingShadow@, @roundButtonShadow@;
+ box-shadow: var(--focus-ring-box-shadow), @roundButtonShadow@;
}
.findbar-container > toolbarbutton[disabled] {
color: GrayText !important;
}
.findbar-find-next:not([disabled]):hover:active,
.findbar-find-previous:not([disabled]):hover:active,
@@ -124,30 +124,17 @@ label.findbar-find-fast:-moz-lwtheme,
background: @roundButtonPressedBackground@;
box-shadow: @roundButtonPressedShadow@;
}
.findbar-find-next:hover:active:-moz-focusring,
.findbar-find-previous:hover:active:-moz-focusring {
text-shadow: @loweredShadow@;
background: @roundButtonPressedBackground@;
- box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
-}
-
-@media (-moz-mac-yosemite-theme) {
- .findbar-container > toolbarbutton:-moz-focusring,
- .findbar-find-next:-moz-focusring,
- .findbar-find-previous:-moz-focusring {
- box-shadow: @yosemiteFocusRingShadow@, @roundButtonShadow@;
- }
-
- .findbar-find-next:hover:active:-moz-focusring,
- .findbar-find-previous:hover:active:-moz-focusring {
- box-shadow: @yosemiteFocusRingShadow@, @roundButtonPressedShadow@;
- }
+ box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
}
/* Search field */
.findbar-textbox {
position: relative;
-moz-appearance: none;
border: @roundButtonBorder@;
@@ -175,23 +162,17 @@ label.findbar-find-fast:-moz-lwtheme,
}
}
.findbar-textbox:not([focused="true"]):-moz-lwtheme {
opacity: 0.9;
}
.findbar-textbox[focused="true"] {
- box-shadow: @focusRingShadow@;
-}
-
-@media (-moz-mac-yosemite-theme) {
- .findbar-textbox[focused="true"] {
- box-shadow: @yosemiteFocusRingShadow@;
- }
+ box-shadow: var(--focus-ring-box-shadow);
}
.findbar-textbox[flash="true"] {
background-color: #F7E379;
}
.findbar-textbox[status="notfound"] {
background-color: #FD919B;
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -31,17 +31,17 @@ menulist > menupopup {
}
/* ::::: root elements ::::: */
window,
page,
dialog,
wizard,
-prefwindow {
+prefwindow {
-moz-appearance: dialog;
background-color: #FFFFFF;
color: -moz-DialogText;
font: message-box;
}
prefwindow[type="child"] {
padding-top: 18px;
@@ -113,17 +113,17 @@ statusbar {
statusbarpanel {
-moz-box-align: center;
-moz-box-pack: center;
padding: 0 4px;
}
.statusbarpanel-iconic {
padding: 0px;
-}
+}
/* ::::: miscellaneous formatting ::::: */
:root:-moz-lwtheme {
-moz-appearance: none;
}
:root:-moz-lwtheme-darktext {
@@ -142,50 +142,50 @@ statusbar:-moz-lwtheme {
}
.inset {
border: 1px solid ThreeDShadow;
border-right-color: ThreeDHighlight;
border-bottom-color: ThreeDHighlight;
margin: 0 5px 5px;
}
-
+
.outset {
border: 1px solid ThreeDShadow;
border-left-color: ThreeDHighlight;
border-top-color: ThreeDHighlight;
}
separator:not([orient="vertical"]) {
height: 1.5em;
}
separator[orient="vertical"] {
width: 1.5em;
}
separator.thin:not([orient="vertical"]) {
height: 0.5em;
-}
+}
separator.thin[orient="vertical"] {
width: 0.5em;
}
separator.groove:not([orient="vertical"]) {
border-top: 1px solid #A3A3A3;
height: 0;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
separator.groove[orient="vertical"] {
border-left: 1px solid #A3A3A3;
width: 0;
margin-left: 0.4em;
margin-right: 0.4em;
}
-
+
.plain {
-moz-appearance: none;
margin: 0 !important;
border: none;
padding: 0;
}
description,
@@ -236,17 +236,17 @@ label[disabled="true"] {
.text-link {
color: -moz-nativehyperlinktext;
cursor: pointer;
}
.text-link:hover {
text-decoration: underline;
}
-
+
.text-link:-moz-focusring {
box-shadow: var(--focus-ring-box-shadow);
}
.toolbar-focustarget {
-moz-user-focus: ignore !important;
}
@@ -266,21 +266,21 @@ notification > button {
notification > button:active:hover {
color: @roundButtonColor@;
background: @roundButtonPressedBackground@;
box-shadow: @roundButtonPressedShadow@;
}
notification > button:-moz-focusring {
- box-shadow: @focusRingShadow@, @roundButtonShadow@;
+ box-shadow: var(--focus-ring-box-shadow), @roundButtonShadow@;
}
notification > button:active:hover:-moz-focusring {
- box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
+ box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
}
notification > button > .button-box > .button-text {
margin: 0 !important;
}
popupnotificationcontent {
margin-top: .5em;
--- a/toolkit/themes/osx/global/tree.css
+++ b/toolkit/themes/osx/global/tree.css
@@ -10,17 +10,17 @@ tree {
color: -moz-DialogText;
background-color: #FFFFFF;
-moz-appearance: listbox;
}
/* ::::: tree focusring ::::: */
.focusring > .tree-stack > .tree-rows > .tree-bodybox {
- border: 1px solid transparent;
+ border: 1px solid transparent;
}
.focusring:focus > .tree-stack > .tree-rows > .tree-bodybox {
border: 1px solid -moz-mac-focusring;
}
/* ::::: tree rows ::::: */
@@ -158,17 +158,17 @@ treechildren::-moz-tree-progressmeter {
treechildren::-moz-tree-cell-text(progressmeter) {
margin: 2px 4px;
-moz-appearance: progressbar;
}
/* ::::: tree columns ::::: */
treecol,
-treecolpicker {
+treecolpicker {
-moz-appearance: treeheadercell;
-moz-box-align: center;
-moz-box-pack: center;
border: 2px solid;
-moz-border-top-colors: ThreeDHighlight ThreeDLightShadow;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-left-colors: ThreeDHighlight ThreeDLightShadow;
@@ -273,17 +273,17 @@ treechildren.gridlines::-moz-tree-row {
border: none;
}
/* ::::: editable tree ::::: */
.tree-input {
-moz-appearance: none;
border-width: 0;
- box-shadow: @focusRingShadow@;
+ box-shadow: var(--focus-ring-box-shadow);
margin: 0;
margin-inline-start: -2px;
padding: 2px 1px 1px;
}
treechildren::-moz-tree-cell(active, selected, focus, editing),
tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus, editing),
tree[seltype="text"] > treechildren::-moz-tree-cell(active, selected, focus, editing) {