From 4d3b3fe8e68e2985678dfab1d1d19dc1eddf7636 Mon Sep 17 00:00:00 2001 From: Richard Marti Date: Tue, 24 Nov 2020 12:27:01 +0200 Subject: [PATCH] Bug 1655543 - Apply the dark variable values to calendar with the dark Linux system theme. r=aleca --- .../base/themes/common/calendar-unifinder.css | 9 +++------ .../base/themes/common/calendar-views.css | 19 +++++++++++-------- calendar/base/themes/common/today-pane.css | 14 ++++++++------ .../common/widgets/calendar-widgets.css | 6 ++++-- .../base/themes/common/widgets/minimonth.css | 17 +++++++++-------- 5 files changed, 35 insertions(+), 30 deletions(-) diff --git a/calendar/base/themes/common/calendar-unifinder.css b/calendar/base/themes/common/calendar-unifinder.css index b2329c7a5d..764bc51c53 100644 --- a/calendar/base/themes/common/calendar-unifinder.css +++ b/calendar/base/themes/common/calendar-unifinder.css @@ -29,13 +29,10 @@ margin: 0; } -:root[lwt-tree] #unifinder-searchBox { +:root[lwt-tree] #unifinder-searchBox, +:root[lwt-tree-brighttext] #unifinder-searchBox { background-color: var(--toolbar-bgcolor); background-image: none; color: var(--toolbar-color); - border-bottom-color: var(--sidebar-border-color, hsla(0,0%,60%,.4)); -} - -:root[lwt-tree-brighttext] #unifinder-searchBox { - border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2)); + border-bottom-color: var(--sidebar-border-color, var(--splitter-color)); } diff --git a/calendar/base/themes/common/calendar-views.css b/calendar/base/themes/common/calendar-views.css index fe9afca323..ae6c0401ae 100644 --- a/calendar/base/themes/common/calendar-views.css +++ b/calendar/base/themes/common/calendar-views.css @@ -44,10 +44,11 @@ --viewDropshadowBackground: #ffa47d; } -:root[lwt-tree] { +:root[lwt-tree], +:root[lwt-tree-brighttext] { --viewColor: var(--sidebar-text-color); - --viewBackground: var(--sidebar-background-color); - --viewBorderColor: var(--sidebar-border-color); + --viewBackground: var(--sidebar-background-color, Field); + --viewBorderColor: var(--sidebar-border-color, var(--splitter-color)); --viewTodayColor: var(--sidebar-highlight-text-color, HighlightText); --viewTodayBackground: var(--sidebar-highlight-background-color, Highlight); --viewTodayLabelColor: var(--sidebar-highlight-text-color, HighlightText); @@ -56,11 +57,11 @@ --viewMonthCurrentBackground: rgba(0, 0, 0, 0.1); --viewMonthDayOtherLabelBackground: rgba(0, 0, 0, 0.2); --viewMonthOtherBackground: rgba(0, 0, 0, 0.1); - --viewMonthDayBoxLabelColor: var(--sidebar-text-color); - --viewMonthDayBoxWeekLabel: var(--sidebar-text-color); + --viewMonthDayBoxLabelColor: var(--sidebar-text-color, FieldText); + --viewMonthDayBoxWeekLabel: var(--sidebar-text-color, FieldText); --viewMonthDayOtherBackground: rgba(0, 0, 0, 0.2); --viewOffTimeBackground: rgba(0, 0, 0, 0.15); - --viewTimeBoxColor: var(--sidebar-text-color); + --viewTimeBoxColor: var(--sidebar-text-color, FieldText); } :root[lwt-tree-brighttext] { @@ -1114,14 +1115,16 @@ radio.calview:not([selected=true]):hover { font-size: 14px; } -:root[lwt-tree] .today-navigation-button { +:root[lwt-tree] .today-navigation-button, +:root[lwt-tree-brighttext] .today-navigation-button { appearance: none; -moz-user-focus: normal; border: 1px solid transparent; border-radius: var(--toolbarbutton-border-radius); } -:root[lwt-tree] .today-navigation-button:not([disabled="true"]):hover { +:root[lwt-tree] .today-navigation-button:not([disabled="true"]):hover, +:root[lwt-tree-brighttext] .today-navigation-button:not([disabled="true"]):hover { background: var(--toolbarbutton-hover-background); border-color: var(--toolbarbutton-hover-bordercolor); box-shadow: var(--toolbarbutton-hover-boxshadow); diff --git a/calendar/base/themes/common/today-pane.css b/calendar/base/themes/common/today-pane.css index fe3d184bba..020cb3591b 100644 --- a/calendar/base/themes/common/today-pane.css +++ b/calendar/base/themes/common/today-pane.css @@ -75,20 +75,22 @@ } .today-pane-cycler:hover { - background-color: hsla(0,0%,0%,.1); + background-color: hsla(0, 0%, 0%, 0.1); color: inherit; } .today-pane-cycler:hover:active { - background-color: hsla(0,0%,0%,.2); + background-color: hsla(0, 0%, 0%, 0.2); } -.today-pane-cycler:-moz-lwtheme-brighttext:hover { - background-color: hsla(0,0%,100%,.2); +.today-pane-cycler:-moz-lwtheme-brighttext:hover, +:root[lwt-tree-brighttext] .today-pane-cycler:hover { + background-color: hsla(0, 0%, 100%, 0.1); } -.today-pane-cycler:-moz-lwtheme-brighttext:hover:active { - background-color: hsla(0,0%,100%,.3); +.today-pane-cycler:-moz-lwtheme-brighttext:hover:active, +:root[lwt-tree-brighttext] .today-pane-cycler:hover:active { + background-color: hsla(0, 0%, 100%, 0.2); } .today-pane-cycler[dir="prev"]:-moz-locale-dir(ltr) > .toolbarbutton-icon, diff --git a/calendar/base/themes/common/widgets/calendar-widgets.css b/calendar/base/themes/common/widgets/calendar-widgets.css index c57a86ee8a..727bcfbde2 100644 --- a/calendar/base/themes/common/widgets/calendar-widgets.css +++ b/calendar/base/themes/common/widgets/calendar-widgets.css @@ -70,14 +70,16 @@ checkbox.treenode-checkbox > .checkbox-label-center-box > .checkbox-label-box > -moz-user-focus: normal; } -:root[lwt-tree] .view-navigation-button { +:root[lwt-tree] .view-navigation-button, +:root[lwt-tree-brighttext] .view-navigation-button { appearance: none; -moz-user-focus: normal; border: 1px solid transparent; border-radius: var(--toolbarbutton-border-radius); } -:root[lwt-tree] .view-navigation-button:not([disabled="true"]):hover { +:root[lwt-tree] .view-navigation-button:not([disabled="true"]):hover, +:root[lwt-tree-brighttext] .view-navigation-button:not([disabled="true"]):hover { background: var(--toolbarbutton-hover-background); border-color: var(--toolbarbutton-hover-bordercolor); box-shadow: var(--toolbarbutton-hover-boxshadow); diff --git a/calendar/base/themes/common/widgets/minimonth.css b/calendar/base/themes/common/widgets/minimonth.css index 76c97552ce..3735e48d16 100644 --- a/calendar/base/themes/common/widgets/minimonth.css +++ b/calendar/base/themes/common/widgets/minimonth.css @@ -26,20 +26,21 @@ calendar-minimonth { --mmDaySelectedTodayBorderColor: #67acd8; } -:root[lwt-tree] calendar-minimonth { - --mmMainColor: var(--sidebar-text-color); - --mmMainBackground: var(--sidebar-background-color); +:root[lwt-tree] calendar-minimonth, +:root[lwt-tree-brighttext] calendar-minimonth { + --mmMainColor: var(--sidebar-text-color, FieldText); + --mmMainBackground: var(--sidebar-background-color, Field); --mmHighlightColor: var(--sidebar-highlight-text-color, HighlightText); --mmHighlightBackground: var(--sidebar-highlight-background-color, Highlight); --mmHighlightBorderColor: var(--sidebar-highlight-background-color, Highlight); - --mmBoxBackground: var(--sidebar-background-color); - --mmBoxBorderColor: var(--sidebar-background-color); + --mmBoxBackground: var(--sidebar-background-color, Field); + --mmBoxBorderColor: var(--sidebar-background-color, Field); --mmDayTodayColor: var(--sidebar-highlight-text-color, HighlightText); --mmDayTodayBackground: var(--sidebar-highlight-background-color, Highlight); --mmDayTodayBorderColor: var(--sidebar-highlight-text-color, HighlightText); - --mmDayColor: var(--sidebar-text-color); - --mmDayBorderColor: var(--sidebar-background-color); - --mmDayOtherColor: var(--sidebar-text-color); + --mmDayColor: var(--sidebar-text-color, FieldText); + --mmDayBorderColor: var(--sidebar-background-color, Field); + --mmDayOtherColor: var(--sidebar-text-color, FieldText); --mmDayOtherBackground: rgba(0, 0, 0, 0.1); --mmDayOtherBorderColor: Transparent; }