Bug 1317581 - DateTimePicker should support high contrast mode on Windows. r?dao
MozReview-Commit-ID: DEBBjcgHIyH
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -134,14 +134,8 @@
}
:root:not([accessibilitymode]) .accessibility-indicator,
:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {
display: none;
}
/* End private browsing and accessibility indicators */
-
-/* Force background for datepicker popup to white so themes don't override it */
-#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowbox,
-#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowcontent {
- --arrowpanel-background: #fff;
-}
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -10,43 +10,43 @@
--spinner-item-margin-bottom: 0.1rem;
--spinner-button-height: 1.2rem;
--colon-width: 2rem;
--day-period-spacing-width: 1rem;
--calendar-width: 23.1rem;
--date-picker-item-height: 2.5rem;
--date-picker-item-width: 3.3rem;
- --border: 0.1rem solid #D6D6D6;
+ --border: 0.1rem solid ThreeDLightShadow;
--border-radius: 0.3rem;
- --border-active-color: #B1B1B1;
+ --border-active-color: ActiveBorder;
- --font-color: #191919;
- --fill-color: #EBEBEB;
+ --font-color: var(--arrowpanel-color);
+ --fill-color: ThreeDFace;
- --today-fill-color: rgb(212, 212, 212);
+ --today-fill-color: ThreeDShadow;
- --selected-font-color: #FFFFFF;
- --selected-fill-color: #0996F8;
+ --selected-font-color: HighlightText;
+ --selected-fill-color: Highlight;
- --button-font-color: #858585;
- --button-font-color-hover: #4D4D4D;
- --button-font-color-active: #191919;
- --button-fill-color-active: #D4D4D4;
+ --button-font-color: ButtonText;
+ --button-font-color-hover: ButtonText;
+ --button-font-color-active: ButtonText;
+ --button-fill-color-active: ButtonFace;
- --weekday-header-font-color: #6C6C6C;
- --weekend-header-font-color: rgb(218, 78, 68);
+ --weekday-header-font-color: var(--arrowpanel-color);
+ --weekend-header-font-color: -moz-activehyperlinktext;
- --weekend-font-color: rgb(218, 78, 68);
- --weekday-outside-font-color: rgb(153, 153, 153);
- --weekend-outside-font-color: rgb(255, 152, 143);
+ --weekend-font-color: -moz-activehyperlinktext;
+ --weekday-outside-font-color: var(--arrowpanel-color);
+ --weekend-outside-font-color: -moz-activehyperlinktext;
- --weekday-disabled-font-color: rgba(25, 25, 25, 0.2);
- --weekend-disabled-font-color: rgba(218, 78, 68, 0.2);
- --disabled-fill-color: rgba(235, 235, 235, 0.8);
+ --weekday-disabled-font-color: var(--arrowpanel-color);
+ --weekend-disabled-font-color: var(--arrowpanel-color);
+ --disabled-fill-color: ButtonShadow;
--disabled-opacity: 0.2;
}
html {
font-size: 10px;
}
@@ -69,26 +69,29 @@ button {
height: 2.4rem;
margin-bottom: 0.8rem;
justify-content: space-between;
}
.nav > button {
width: 3rem;
height: var(--date-picker-item-height);
- -moz-context-properties: fill;
+ -moz-context-properties: fill, fill-opacity;
fill: var(--button-font-color);
+ fill-opacity: .5;
}
.nav > button:hover {
fill: var(--button-font-color-hover);
+ fill-opacity: .8;
}
.nav > button.active {
fill: var(--button-font-color-active);
+ fill-opacity: 1;
}
.nav > button.prev,
.nav > button.next:dir(rtl) {
background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%;
}
.nav > button.next,
@@ -129,18 +132,19 @@ button.month-year.active {
}
button.month-year::after {
position: absolute;
content: "";
width: 2.6rem;
height: 1.6rem;
background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
- -moz-context-properties: fill;
+ -moz-context-properties: fill, fill-opacity;
fill: var(--button-font-color);
+ fill-opacity: .5;
}
button.month-year.active::after {
background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
}
.month-year-view {
position: absolute;
@@ -204,16 +208,17 @@ button.month-year.active::after {
}
.week-header {
display: flex;
}
.week-header > div {
color: var(--weekday-header-font-color);
+ opacity: .5;
}
.week-header > div.weekend {
color: var(--weekend-header-font-color);
}
.days-viewport {
height: 15rem;
@@ -235,24 +240,26 @@ button.month-year.active::after {
height: var(--date-picker-item-height);
position: relative;
justify-content: center;
width: var(--date-picker-item-width);
}
.days-view > .outside {
color: var(--weekday-outside-font-color);
+ opacity: .5;
}
.days-view > .weekend {
color: var(--weekend-font-color);
}
.days-view > .weekend.outside {
color: var(--weekend-outside-font-color);
+ opacity: .5;
}
.days-view > .out-of-range,
.days-view > .off-step {
color: var(--weekday-disabled-font-color);
background: var(--disabled-fill-color);
}
@@ -289,26 +296,29 @@ button.month-year.active::after {
.spinner-container {
display: flex;
flex-direction: column;
width: var(--spinner-width);
}
.spinner-container > button {
height: var(--spinner-button-height);
- -moz-context-properties: fill;
+ -moz-context-properties: fill, fill-opacity;
fill: var(--button-font-color);
+ fill-opacity: .5;
}
.spinner-container > button:hover {
fill: var(--button-font-color-hover);
+ fill-opacity: .8;
}
.spinner-container > button.active {
fill: var(--button-font-color-active);
+ fill-opacity: 1;
}
.spinner-container > button.up {
background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
}
.spinner-container > button.down {
background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
--- a/toolkit/themes/shared/icons/calendar-arrow-left.svg
+++ b/toolkit/themes/shared/icons/calendar-arrow-left.svg
@@ -1,7 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
width="14" height="14" viewBox="0 0 14 14">
- <path fill="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
+ <path fill-opacity="context-fill-opacity" fill="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
</svg>
--- a/toolkit/themes/shared/icons/calendar-arrow-right.svg
+++ b/toolkit/themes/shared/icons/calendar-arrow-right.svg
@@ -1,7 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
width="14" height="14" viewBox="0 0 14 14">
- <path fill="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
+ <path fill-opacity="context-fill-opacity" fill="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
</svg>
--- a/toolkit/themes/shared/icons/spinner-arrow-down.svg
+++ b/toolkit/themes/shared/icons/spinner-arrow-down.svg
@@ -1,7 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
width="10" height="6" viewBox="0 0 10 6">
- <path fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
+ <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
</svg>
--- a/toolkit/themes/shared/icons/spinner-arrow-up.svg
+++ b/toolkit/themes/shared/icons/spinner-arrow-up.svg
@@ -1,7 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg"
width="10" height="6" viewBox="0 0 10 6">
- <path fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
+ <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
</svg>