Bug 1579411 - Make the MiniMonth and the calendar view themeable. r=darktrojan ui-r=aleca
authorRichard Marti <richard.marti@gmail.com>
Sun, 15 Sep 2019 20:01:12 +0200
changeset 36854 3fd7309198014ef59b15a38a0a492329249f10e7
parent 36853 f5158588080a8a143b3a4787b5fca9defa30fc3d
child 36855 95e390183284a38b46ab0e4ad847db6c19503fdc
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersdarktrojan, aleca
bugs1579411
Bug 1579411 - Make the MiniMonth and the calendar view themeable. r=darktrojan ui-r=aleca
calendar/base/themes/common/calendar-views.css
calendar/base/themes/common/widgets/minimonth.css
--- a/calendar/base/themes/common/calendar-views.css
+++ b/calendar/base/themes/common/calendar-views.css
@@ -1,18 +1,19 @@
 /* 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/. */
 
-window {
+:root {
     --viewColor: #000;
     --viewBackground: #fff;
     --viewBorderColor: #d2d2d2;
     --viewHighlightBorderColor: #67acd8;
     --viewTodayBorderColor: #7fb9ee;
+    --viewTodayColor: inherit;
     --viewTodayBackground: #e1f0fd;
     --viewTodayLabelColor: #616163;
     --viewTodayLabelBackground: #d2e3f3;
     --viewTodayLabelSelectedColor: #616163;
     --viewTodayLabelSelectedBackground: #d2e3f3;
     --viewTodayOffBackground: #d7e8f8;
     --viewTodayDayLabelBackground: #d2e3f3;
     --viewTodayWeekendBackground: #e1f0fd;
@@ -35,21 +36,67 @@ window {
     --viewTimeBoxColor: #6a6969;
     --viewDayLabelSelectedColor: #000;
     --viewDayLabelSelectedBackground: #fffabc;
     --viewDragboxColor: -moz-dialogtext;
     --viewDragboxBackground: linear-gradient(#fe4b22, #feb822);
     --viewDropshadowBackground: #ffa47d;
 }
 
-window[systemcolors] {
+:root[lwt-tree] {
+    --viewColor: var(--sidebar-text-color);
+    --viewBackground: var(--sidebar-background-color);
+    --viewBorderColor: var(--sidebar-border-color);
+    --viewTodayColor: var(--sidebar-highlight-text-color, HighlightText);
+    --viewTodayBackground: var(--sidebar-highlight-background-color, Highlight);
+    --viewTodayLabelColor: var(--sidebar-highlight-text-color, HighlightText);
+    --viewTodayLabelBackground: var(--sidebar-highlight-background-color, Highlight);
+    --viewTodayDayLabelBackground: var(--sidebar-highlight-background-color, Highlight);
+    --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);
+    --viewMonthDayOtherBackground: rgba(0, 0, 0, 0.2);
+    --viewOffTimeBackground: rgba(0, 0, 0, 0.15);
+}
+
+:root[lwt-tree-brighttext] {
+    --viewHighlightBorderColor: #9fa3d9;
+    --viewTodayColor: var(--sidebar-highlight-text-color, #fff);
+    --viewTodayBorderColor: var(--sidebar-highlight-text-color, #9fa3d9);
+    --viewTodayBackground: var(--sidebar-highlight-background-color, #5358a4);
+    --viewTodayLabelColor: var(--sidebar-highlight-text-color, #fff);
+    --viewTodayLabelBackground: var(--sidebar-highlight-background-color, #3b3f77);
+    --viewTodayDayLabelBackground: var(--sidebar-highlight-background-color, #393b66);
+    --viewMonthCurrentBackground: rgba(255, 255, 255, 0.2);
+    --viewMonthDayOtherLabelBackground: rgba(255, 255, 255, 0.3);
+    --viewMonthOtherBackground: rgba(255, 255, 255, 0.3);
+    --viewOffTimeBackground: rgba(255, 255, 255, 0.05);
+    --viewTodayOffBackground: #5358a4;
+    --viewTodayWeekendBackground: #5358a4;
+    --viewTodayLabelSelectedColor: #e8e8f9;
+    --viewTodayLabelSelectedBackground: #6d6d8e;
+    --viewWeekendBackground: #646a56;
+    --viewHeaderSelectedBackground: #8b8bbd;
+    --viewDayBoxSelectedBackground: #8b8bbd;
+    --viewDayBoxOffSelectedBackground: #676795;
+    --viewDayBoxOtherSelectedBackground: #fffcd8;
+    --viewMonthDayBoxSelectedColor: #d7d7ec;
+    --viewMonthDayBoxSelectedBackground: #70709f;
+    --viewMonthDayOtherBackground: rgba(255, 255, 255, 0.3);
+    --viewMonthDayOffLabelBackground: #4f5935;
+}
+
+:root[systemcolors] {
     --viewColor: WindowText;
     --viewBackground: -moz-Field;
     --viewBorderColor: ThreeDShadow;
     --viewHighlightBorderColor: Highlight;
+    --viewTodayColor: inherit;
     --viewTodayBorderColor: Highlight;
     --viewTodayBackground: -moz-Field;
     --viewTodayLabelColor: Highlight;
     --viewTodayLabelBackground: rgba(0, 0, 0, .2);
     --viewTodayLabelSelectedColor: HighlightText;
     --viewTodayLabelSelectedBackground: Highlight;
     --viewTodayOffBackground: ButtonFace;
     --viewTodayDayLabelBackground: ButtonFace;
@@ -564,16 +611,17 @@ calendar-day-label[orient="vertical"] {
     background-image: none !important;
     min-width: 100px;
 }
 
 calendar-day-label[relation="today"],
 calendar-day-label[relation="today1day"] {
     background-color: var(--viewTodayDayLabelBackground);
     border: 1px solid var(--viewHighlightBorderColor);
+    color: var(--viewTodayColor);
     margin-inline-end: -1px;
     margin-top: -1px;
     position: relative;
 }
 
 .calendar-day-label-name {
     text-align: center;
 }
@@ -907,16 +955,20 @@ agenda-richlist-item[status="CANCELLED"]
     border-color: var(--sidebar-border-color);
     scrollbar-color: rgba(128,128,128,.5) rgba(230,230,235,.5);
 }
 
 :root[lwt-tree-brighttext] #view-deck {
     scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
 }
 
+:root[systemcolors] #view-deck {
+  background-color: -moz-Field;
+}
+
 .navigation-inner-box {
     border-bottom: 1px solid var(--calview-border-bottom-color);
 }
 
 .navigation-spacer-box {
     min-width: 15px;
     border-bottom: 1px solid var(--calview-border-bottom-color);
 }
--- a/calendar/base/themes/common/widgets/minimonth.css
+++ b/calendar/base/themes/common/widgets/minimonth.css
@@ -10,34 +10,70 @@ calendar-minimonth {
   --mmHighlightBorderColor: Highlight;
   --mmBoxBackground: #f5f5f6;
   --mmBoxBorderColor: #c0c0c0;
   --mmDayColor: #2e4e73;
   --mmDayBorderColor: #fff;
   --mmDayOtherColor: #b2b2b2;
   --mmDayOtherBackground: #f0f0f0;
   --mmDayOtherBorderColor: #f0f0f0;
+  --mmDayTodayColor: #2e4e73;
   --mmDayTodayBackground: #dfeaf4;
   --mmDayTodayBorderColor: #67acd8;
   --mmDaySelectedColor: #2e4e73;
   --mmDaySelectedBackground: #fffabc;
   --mmDaySelectedBorderColor: #d9c585;
   --mmDaySelectedTodayBackground: #f2edb2;
   --mmDaySelectedTodayBorderColor: #67acd8;
 }
 
+:root[lwt-tree] calendar-minimonth {
+  --mmMainColor: var(--sidebar-text-color);
+  --mmMainBackground: var(--sidebar-background-color);
+  --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: rgba(0, 0, 0, 0.3);
+  --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: rgba(0, 0, 0, 0.3);
+  --mmDayOtherColor: var(--sidebar-text-color);
+  --mmDayOtherBackground: rgba(0, 0, 0, 0.1);
+  --mmDayOtherBorderColor: rgba(0, 0, 0, 0.3);
+}
+
+:root[lwt-tree-brighttext] calendar-minimonth {
+  --mmBoxBorderColor: rgba(255, 255, 255, 0.5);
+  --mmDayBorderColor: rgba(255, 255, 255, 0.5);
+  --mmDayOtherBackground: rgba(255, 255, 255, 0.2);
+  --mmDayOtherBorderColor: rgba(255, 255, 255, 0.5);
+  --mmDayTodayColor: var(--sidebar-highlight-text-color, #fff);
+  --mmDayTodayBackground: var(--sidebar-highlight-background-color, #5358a4);
+  --mmDayTodayBorderColor: #d9c585;
+  --mmDaySelectedColor: #fff;
+  --mmDaySelectedBackground: #8b8bbd;
+  --mmDaySelectedBorderColor: #d9c585;
+  --mmDaySelectedTodayBackground: var(--sidebar-highlight-background-color, #5358a4);
+  --mmDaySelectedTodayBorderColor: var(--sidebar-highlight-text-color, #9fa3d9);
+}
+
 :root[systemcolors] calendar-minimonth {
+  --mmMainColor: -moz-DialogText;
   --mmMainBackground: -moz-field;
   --mmBoxBackground: -moz-Dialog;
   --mmBoxBorderColor: ThreeDShadow;
   --mmDayColor: WindowText;
   --mmDayBorderColor: Window;
   --mmDayOtherColor: GrayText;
   --mmDayOtherBackground: ButtonFace;
   --mmDayOtherBorderColor: Transparent;
+  --mmDayTodayColor: -moz-DialogText;
   --mmDayTodayBackground: -moz-field;
   --mmDayTodayBorderColor: Highlight;
   --mmDaySelectedColor: HighlightText;
   --mmDaySelectedBackground: Highlight;
   --mmDaySelectedBorderColor: ButtonFace;
   --mmDaySelectedTodayBackground: Highlight;
   --mmDaySelectedTodayBorderColor: ButtonFace;
 }
@@ -138,37 +174,36 @@ calendar-minimonth[readonly="true"] .min
   border: 1px solid var(--mmDayBorderColor);
   background-color: var(--mmMainBackground);
   min-height: 16px;
 }
 
 .minimonth-row-header-week {
   color: var(--mmDayOtherColor);
   text-align: center;
-  border-right: 1px dotted var(--mmDayOtherColor);
 }
 
 .minimonth-week {
   color: var(--mmDayOtherColor);
   text-align: center;
   border: 1px solid var(--mmDayBorderColor);
-  border-right: 1px dotted var(--mmDayOtherColor);
   background-color: var(--mmMainBackground);
   min-height: 16px;
 }
 
 .minimonth-day[othermonth="true"] {
   color: var(--mmDayOtherColor);
   background-color: var(--mmDayOtherBackground);
   border: 1px solid var(--mmDayOtherBorderColor);
 }
 
 .minimonth-day[today="true"] {
   background-color: var(--mmDayTodayBackground);
   border: 1px solid var(--mmDayTodayBorderColor);
+  color: var(--mmDayTodayColor);
 }
 
 .minimonth-day[selected="true"] {
   background-color: var(--mmDaySelectedBackground);
   color: var(--mmDaySelectedColor);
   border: 1px solid var(--mmDaySelectedBorderColor);
 }