Bug 1899248 - Use light-dark() instead of a media query where possible. Calendar part r=vineet
Differential Revision: https://phabricator.services.mozilla.com/D211826 --HG-- extra : amend_source : 958a885e8fd9f553bc5331766b1f491cf3c77ae6 extra : histedit_source : fbc9422aa2960ca4a203c17a12213d2e71696ec3
This commit is contained in:
Richard Marti
Родитель
83088c6e0c
Коммит
fa7ad94de8
|
|
@ -17,38 +17,44 @@
|
|||
--viewTodayOffBackground: color-mix(in srgb, var(--viewTodayBackground) 95%, black);
|
||||
--viewTodayDayLabelBackground: color-mix(in srgb, var(--selected-item-color) 20%, transparent);
|
||||
--viewTodayWeekendBackground: color-mix(in srgb, var(--color-blue-10) 20%, var(--viewWeekendBackground));
|
||||
--viewWeekendBackground: var(--color-ink-10);
|
||||
--viewHeaderSelectedBackground: var(--selected-item-color);
|
||||
--viewDayBoxSelectedBackground: color-mix(in srgb, var(--selected-item-color) 20%, var(--viewBackground));
|
||||
--viewDayBoxOffSelectedBackground: color-mix(in srgb, var(--selected-item-color) 20%, var(--viewTodayOffBackground));
|
||||
--viewDayBoxOtherSelectedBackground: color-mix(in srgb, var(--selected-item-color) 20%, var(--viewMonthOtherBackground));
|
||||
--viewMonthOtherBackground: var(--layout-background-2);
|
||||
--viewWeekendBackground: light-dark(var(--color-ink-10), color-mix(in srgb, var(--viewBackground) 80%, var(--color-ink-40)));
|
||||
--viewHeaderSelectedBackground: light-dark(var(--selected-item-color),
|
||||
color-mix(in srgb, var(--selected-item-color) 25%, var(--viewBackground)));
|
||||
--viewDayBoxSelectedBackground: light-dark(color-mix(in srgb, var(--selected-item-color) 20%, var(--viewBackground)),
|
||||
color-mix(in srgb, var(--selected-item-color) 25%, var(--viewBackground)));
|
||||
--viewDayBoxOffSelectedBackground: light-dark(color-mix(in srgb, var(--selected-item-color) 20%, var(--viewTodayOffBackground)),
|
||||
color-mix(in srgb, var(--selected-item-color) 15%, var(--viewTodayOffBackground)));
|
||||
--viewDayBoxOtherSelectedBackground: light-dark(color-mix(in srgb, var(--selected-item-color) 20%, var(--viewMonthOtherBackground)),
|
||||
color-mix(in srgb, var(--selected-item-color) 15%, var(--viewMonthOtherBackground)));
|
||||
--viewMonthOtherBackground: light-dark(var(--layout-background-2), var(--layout-background-1));
|
||||
--viewMonthDayBoxSelectedColor: var(--layout-color-1);
|
||||
--viewMonthDayBoxLabelColor: var(--layout-color-1);
|
||||
--viewMonthWeekLabelBackground: var(--color-ink-20);
|
||||
--viewMonthDayOtherBackground: color-mix(in srgb, var(--layout-background-2) 50%, var(--viewWeekendBackground));
|
||||
--viewMonthDayOffLabelBackground: color-mix(in srgb, var(--viewWeekendBackground) 95%, black);
|
||||
--viewOffTimeBackground: color-mix(in srgb, var(--viewBackground) 95%, black);
|
||||
--viewMonthWeekLabelBackground: light-dark(var(--color-ink-20), var(--color-ink-60));
|
||||
--viewMonthDayOtherBackground: light-dark(color-mix(in srgb, var(--layout-background-2) 50%, var(--viewWeekendBackground)),
|
||||
color-mix(in srgb, var(--layout-background-1) 50%, var(--viewWeekendBackground)));
|
||||
--viewMonthDayOffLabelBackground: light-dark(color-mix(in srgb, var(--viewWeekendBackground) 95%, black),
|
||||
color-mix(in srgb, var(--viewWeekendBackground) 95%, var(--color-ink-30)));
|
||||
--viewOffTimeBackground: light-dark(color-mix(in srgb, var(--viewBackground) 95%, black),
|
||||
color-mix(in srgb, var(--viewBackground) 95%, var(--color-ink-30)));
|
||||
--viewTimeBoxColor: var(--layout-color-2);
|
||||
--viewDayLabelSelectedColor: currentColor;
|
||||
--viewDayLabelSelectedBackground: var(--color-blue-50);
|
||||
--viewDragboxColor: currentColor;
|
||||
--viewDragboxBackground: var(--color-blue-50);
|
||||
--viewDropshadowBackground: var(--color-blue-50);
|
||||
--calendar-nav-control-bg-color: var(--color-white);
|
||||
--calendar-nav-control-bg-color-hover: rgba(0, 0, 0, 0.1);
|
||||
--calendar-view-nav-btn-padding: 4px;
|
||||
--calendar-nav-control-padding: 6px;
|
||||
--calendar-view-toggle-label-padding: 3px 15px;
|
||||
--calendar-view-toolbar-gap: 9px;
|
||||
--button-border-radius: 3px;
|
||||
--calendar-view-toggle-background: var(--layout-background-3);
|
||||
--calendar-view-toggle-hover-background: var(--layout-background-2);
|
||||
--calendar-view-toggle-active-background: var(--layout-background-4);
|
||||
--calendar-view-toggle-hover-background: light-dark(var(--layout-background-2), var(--layout-background-4));
|
||||
--calendar-view-toggle-active-background: light-dark(var(--layout-background-4), var(--layout-background-2));
|
||||
--calendar-view-toggle-selected-background: var(--layout-background-1);
|
||||
--calendar-view-toggle-selected-hover-background: var(--layout-background-0);
|
||||
--calendar-view-toggle-border-color: transparent;
|
||||
--calendar-view-toggle-shadow-color: color-mix(in srgb, var(--color-black) 30%, transparent);
|
||||
--calendar-view-toggle-shadow-color: light-dark(color-mix(in srgb, var(--color-black) 30%, transparent),
|
||||
color-mix(in srgb, var(--color-black) 50%, transparent));
|
||||
--calendar-month-day-box-padding: 2px;
|
||||
--today-week-pill-padding-block: 3px;
|
||||
--today-week-pill-padding-inline: 6px;
|
||||
|
|
@ -75,26 +81,6 @@
|
|||
--calendar-nav-gap: 6px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--viewHeaderSelectedBackground: color-mix(in srgb, var(--selected-item-color) 25%, var(--viewBackground));
|
||||
--viewDayBoxSelectedBackground: color-mix(in srgb, var(--selected-item-color) 25%, var(--viewBackground));
|
||||
--viewDayBoxOffSelectedBackground: color-mix(in srgb, var(--selected-item-color) 15%, var(--viewTodayOffBackground));
|
||||
--viewDayBoxOtherSelectedBackground: color-mix(in srgb, var(--selected-item-color) 15%, var(--viewMonthOtherBackground));
|
||||
--viewMonthDayOffLabelBackground: color-mix(in srgb, var(--viewWeekendBackground) 95%, var(--color-ink-30));
|
||||
--viewOffTimeBackground: color-mix(in srgb, var(--viewBackground) 95%, var(--color-ink-30));
|
||||
--viewWeekendBackground: color-mix(in srgb, var(--viewBackground) 80%, var(--color-ink-40));
|
||||
--viewMonthOtherBackground: var(--layout-background-1);
|
||||
--viewMonthWeekLabelBackground: var(--color-ink-60);
|
||||
--viewMonthDayOtherBackground: color-mix(in srgb, var(--layout-background-1) 50%, var(--viewWeekendBackground));
|
||||
--calendar-nav-control-bg-color: var(--color-black);
|
||||
--calendar-nav-control-bg-color-hover: rgba(0, 0, 0, 0.3);
|
||||
--calendar-view-toggle-hover-background: var(--layout-background-4);
|
||||
--calendar-view-toggle-active-background: var(--layout-background-2);
|
||||
--calendar-view-toggle-shadow-color: color-mix(in srgb, var(--color-black) 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
:root:not([lwtheme]) {
|
||||
--calendar-view-toggle-background: transparent;
|
||||
|
|
|
|||
|
|
@ -113,16 +113,10 @@
|
|||
|
||||
/* iMIP notification bar */
|
||||
.calendar-notification-bar {
|
||||
background-color: var(--color-blue-10);
|
||||
background-color: light-dark(var(--color-blue-10), var(--color-purple-40));
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.calendar-notification-bar {
|
||||
background-color: var(--color-purple-40);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
:root:not([lwtheme]) {
|
||||
.calendar-notification-bar {
|
||||
|
|
|
|||
|
|
@ -63,12 +63,12 @@
|
|||
-moz-user-focus: normal;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 0%, 0.1);
|
||||
background-color: light-dark(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 100%, 0.1));
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover:active {
|
||||
background-color: hsla(0, 0%, 0%, 0.2);
|
||||
background-color: light-dark(hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 100%, 0.2));
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -77,16 +77,6 @@
|
|||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 100%, 0.1);
|
||||
}
|
||||
|
||||
&:hover:active {
|
||||
background-color: hsla(0, 0%, 100%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&[dir="prev"]:-moz-locale-dir(ltr) > .toolbarbutton-icon,
|
||||
&[dir="next"]:-moz-locale-dir(rtl) > .toolbarbutton-icon {
|
||||
transform: scaleX(-1);
|
||||
|
|
|
|||
|
|
@ -213,8 +213,7 @@ checkbox.treenode-checkbox > .checkbox-label-center-box > .checkbox-label-box >
|
|||
}
|
||||
|
||||
#calendar-list > li.selected {
|
||||
background-color: -moz-cellhighlight;
|
||||
color: -moz-cellhighlighttext;
|
||||
background-color: color-mix(in srgb, currentColor 10%, transparent);
|
||||
}
|
||||
|
||||
#calendar-list:focus-within > li.selected {
|
||||
|
|
|
|||
|
|
@ -3,27 +3,27 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
calendar-minimonth {
|
||||
--mmMainColor: -moz-DialogText;
|
||||
--mmMainBackground: var(--color-gray-05);
|
||||
--mmMainBorderColor: var(--color-gray-20);
|
||||
--mmMainColor: var(--sidebar-text-color, FieldText);
|
||||
--mmMainBackground: light-dark(var(--color-gray-05), var(--color-gray-70));
|
||||
--mmMainBorderColor: light-dark(var(--color-gray-20), var(--color-gray-50));
|
||||
--mmMainBorderRadius: 6px;
|
||||
--mmHighlightColor: var(--selected-item-text-color);
|
||||
--mmHighlightBackground: var(--selected-item-color);
|
||||
--mmHighlightBorderColor: var(--selected-item-color);
|
||||
--mmBoxBackground: var(--color-gray-20);
|
||||
--mmBoxBorderColor: var(--color-gray-20);
|
||||
--mmHighlightColor: var(--sidebar-highlight-text-color, var(--selected-item-text-color));
|
||||
--mmHighlightBackground: var(--sidebar-highlight-background-color, var(--selected-item-color));
|
||||
--mmHighlightBorderColor: var(--sidebar-highlight-background-color, var(--selected-item-color));
|
||||
--mmBoxBackground: light-dark(var(--color-gray-20), var(--color-gray-50));
|
||||
--mmBoxBorderColor: light-dark(var(--color-gray-20), var(--color-gray-40));
|
||||
--mmBoxPadding: 0;
|
||||
--mmBoxItemColor: var(--color-gray-30);
|
||||
--mmBoxItemColor: light-dark(var(--color-gray-30), var(--color-gray-40));
|
||||
--mmBoxItemBorderColor: transparent;
|
||||
--mmBoxItemPadding: 2px;
|
||||
--mmDayColor: var(--color-gray-70);
|
||||
--mmDayColor: light-dark(var(--color-gray-70), var(--color-gray-10));
|
||||
--mmDayBackground: transparent;
|
||||
--mmDayBorderColor: transparent;
|
||||
--mmDayOtherColor: var(--color-gray-40);
|
||||
--mmDayWeekColor: var(--color-ink-40);
|
||||
--mmDayOtherColor: light-dark(var(--color-gray-40), var(--color-gray-50));
|
||||
--mmDayWeekColor: light-dark(var(--color-ink-40), var(--color-ink-40));
|
||||
--mmDayOtherBackground: transparent;
|
||||
--mmDayOtherBorderColor: transparent;
|
||||
--mmDayTodayColor: var(--color-gray-90);
|
||||
--mmDayTodayColor: light-dark(var(--color-gray-90), var(--color-ink-10));
|
||||
--mmDayTodayBackground: color-mix(in srgb, var(--color-ink-40) 20%, transparent);
|
||||
--mmDayTodayBorderColor: transparent;
|
||||
--mmDaySelectedColor: var(--selected-item-color);
|
||||
|
|
@ -57,30 +57,6 @@ calendar-minimonth {
|
|||
--mmDayOtherBorderColor: transparent;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
calendar-minimonth {
|
||||
--mmMainColor: var(--sidebar-text-color, FieldText);
|
||||
--mmMainBackground: var(--color-gray-70);
|
||||
--mmMainBorderColor: var(--color-gray-50);
|
||||
--mmHighlightColor: var(--sidebar-highlight-text-color, var(--selected-item-text-color));
|
||||
--mmHighlightBackground: var(--sidebar-highlight-background-color, var(--selected-item-color));
|
||||
--mmHighlightBorderColor: var(--sidebar-highlight-background-color, var(--selected-item-color));
|
||||
--mmBoxBackground: var(--color-gray-50);
|
||||
--mmBoxBorderColor: var(--color-gray-40);
|
||||
--mmBoxItemColor: var(--color-gray-40);
|
||||
--mmBoxItemBorderColor: transparent;
|
||||
--mmDayTodayColor: var(--color-ink-10);
|
||||
--mmDayTodayBorderColor: transparent;
|
||||
--mmDayColor: var(--color-gray-10);
|
||||
--mmDayBackground: transparent;
|
||||
--mmDayBorderColor: transparent;
|
||||
--mmDayOtherColor: var(--color-gray-50);
|
||||
--mmDayOtherBackground: transparent;
|
||||
--mmDayOtherBorderColor: transparent;
|
||||
--mmDayWeekColor: var(--color-ink-40);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
:root:not([lwtheme]) calendar-minimonth {
|
||||
--mmMainBackground: transparent;
|
||||
|
|
@ -207,15 +183,15 @@ calendar-minimonth[readonly="true"] .minimonth-readonly-header {
|
|||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button.minimonth-nav-btn:is(:hover, :focus, :active),
|
||||
.button.minimonth-nav-btn:enabled:is(:hover, :focus-visible, :active) {
|
||||
.button.minimonth-nav-btn:is(:hover, :active),
|
||||
.button.minimonth-nav-btn:enabled:is(:hover, :active) {
|
||||
background-color: var(--color-gray-60);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
:root:not([lwtheme]) .button.minimonth-nav-btn:is(:hover, :focus, :active),
|
||||
:root:not([lwtheme]) .button.minimonth-nav-btn:enabled:is(:hover, :focus-visible, :active) {
|
||||
:root:not([lwtheme]) .button.minimonth-nav-btn:is(:hover, :active),
|
||||
:root:not([lwtheme]) .button.minimonth-nav-btn:enabled:is(:hover, :active) {
|
||||
background-color: var(--mmDaySelectedBackground);
|
||||
color: var(--mmDaySelectedColor);
|
||||
stroke: var(--mmDaySelectedColor);
|
||||
|
|
|
|||
|
|
@ -21,11 +21,3 @@
|
|||
#todaypane-new-event-button[disabled="true"] > .toolbarbutton-icon {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root[lwtheme] #agenda {
|
||||
list-style: none;
|
||||
--selected-background: var(--dark-lwt-highlight-color);
|
||||
--selected-foreground: var(--lwt-text-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,10 +20,3 @@
|
|||
.toolbarbutton-icon-end {
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root[lwtheme] #calendar-list > li.selected {
|
||||
background-color: var(--dark-lwt-highlight-color);
|
||||
color: var(--lwt-text-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче