theme: calendar fixups

- pager button
- day of week
- top date label
- FIXME: current date needs non-uniform border colors

data/theme/_common.scss

@@ -526,6 +526,14 @@ StScrollBar {
   // calendar popover
   .calendar { padding: .4em 1.75em .8em 1.75em; }
 
+    .datemenu-date-label { //topmost date label
+      padding: .4em 1.7em;
+      text-align: center;
+      color: $fg_color;
+      font-weight: bold;
+      font-size: 110%;
+    }
+
     .calendar-vertical-separator {
       width: .3em;
       -stipple-width: 1px;
@@ -539,22 +547,23 @@ StScrollBar {
       &:focus {}
     }
 
+    .pager-button {
+      color: white;
+      background-color: transparent;
+      width: 32px;
+      background-position: center;
+      boder-radius: 4px;
+      &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
+      &:active { background-color: transparentize($bg_color,0.95); }
+    }
+
       .calendar-change-month-back { //arrow back
-      &:rtl {}
+        background-image: url("calendar-arrow-left.svg");
-      &:hover, &:focus {}
+        &:rtl { background-image: url("calendar-arrow-right.svg"); }
-      &:active {}
       }
       .calendar-change-month-forward { //arrow foreward
-      &:rtl {}
+        background-image: url("calendar-arrow-right.svg");
-      &:hover, &:focus {}
+        &:rtl { background-image: url("calendar-arrow-left.svg"); }
-      &:active {}
-    }
-    .datemenu-date-label {
-      padding: .4em 1.7em;
-      text-align: center;
-      color: darken($fg_color,10%);
-      font-size: 130%;
-      border-radius: 4px;
       }
 
     .calendar-day-base {
@@ -563,6 +572,11 @@ StScrollBar {
       width: 2.4em; height: 2.4em;
       &:hover,&:focus { background-color: lighten($bg_color,5%); }
       &:active { color: lighten($fg_color,5%); background-color: darken($bg_color,5%);}
+      &.calendar-day-heading {  //day of week heading
+        color: darken($fg_color,40%); 
+        margin-top: 1em;
+        font-size: 90%;
+      }
     }
       .calendar-day { //border collapse hack - see calendar.js
         border: 1px solid $borders_color;
@@ -576,7 +590,7 @@ StScrollBar {
         font-weight: bold;
         color: lighten($fg_color,10%);
         border-bottom-width: 2px;
-        border-color: $selected_bg_color; //FIXME sadly can't have a color per side.
+        border-bottom-color: $selected_bg_color; //FIXME sadly can't have a color per side.
       }
       .calendar-day-with-events {
         color: white;
@@ -588,7 +602,7 @@ StScrollBar {
         opacity: 0.5;
       }
 
-    .events-table {
+    .events-table { //right hand side
       width: 15em;
       spacing-columns: 1em;
       padding: 0 1.4em;

data/theme/gnome-shell-high-contrast.css

@@ -988,6 +988,13 @@ StScrollBar {
 .calendar {
   padding: .4em 1.75em .8em 1.75em; }
 
+.datemenu-date-label {
+  padding: .4em 1.7em;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  font-size: 110%; }
+
 .calendar-vertical-separator {
   width: .3em;
   -stipple-width: 1px;
@@ -998,12 +1005,26 @@ StScrollBar {
   font-weight: bold;
   padding: 8px 0; }
 
-.datemenu-date-label {
+.pager-button {
-  padding: .4em 1.7em;
+  color: white;
-  text-align: center;
+  background-color: transparent;
-  color: #e6e6e6;
+  width: 32px;
-  font-size: 130%;
+  background-position: center;
-  border-radius: 4px; }
+  boder-radius: 4px; }
+  .pager-button:hover, .pager-button:focus {
+    background-color: rgba(255, 255, 255, 0.05); }
+  .pager-button:active {
+    background-color: rgba(0, 0, 0, 0.05); }
+
+.calendar-change-month-back {
+  background-image: url("calendar-arrow-left.svg"); }
+  .calendar-change-month-back:rtl {
+    background-image: url("calendar-arrow-right.svg"); }
+
+.calendar-change-month-forward {
+  background-image: url("calendar-arrow-right.svg"); }
+  .calendar-change-month-forward:rtl {
+    background-image: url("calendar-arrow-left.svg"); }
 
 .calendar-day-base {
   font-size: 80%;
@@ -1015,6 +1036,10 @@ StScrollBar {
   .calendar-day-base:active {
     color: white;
     background-color: black; }
+  .calendar-day-base.calendar-day-heading {
+    color: #999999;
+    margin-top: 1em;
+    font-size: 90%; }
 
 .calendar-day {
   border: 1px solid black;
@@ -1035,7 +1060,7 @@ StScrollBar {
   font-weight: bold;
   color: white;
   border-bottom-width: 2px;
-  border-color: #215d9c; }
+  border-bottom-color: #215d9c; }
 
 .calendar-day-with-events {
   color: white;

data/theme/gnome-shell.css

@@ -985,6 +985,13 @@ StScrollBar {
 .calendar {
   padding: .4em 1.75em .8em 1.75em; }
 
+.datemenu-date-label {
+  padding: .4em 1.7em;
+  text-align: center;
+  color: #eeeeec;
+  font-weight: bold;
+  font-size: 110%; }
+
 .calendar-vertical-separator {
   width: .3em;
   -stipple-width: 1px;
@@ -995,12 +1002,26 @@ StScrollBar {
   font-weight: bold;
   padding: 8px 0; }
 
-.datemenu-date-label {
+.pager-button {
-  padding: .4em 1.7em;
+  color: white;
-  text-align: center;
+  background-color: transparent;
-  color: #d6d6d1;
+  width: 32px;
-  font-size: 130%;
+  background-position: center;
-  border-radius: 4px; }
+  boder-radius: 4px; }
+  .pager-button:hover, .pager-button:focus {
+    background-color: rgba(238, 238, 236, 0.05); }
+  .pager-button:active {
+    background-color: rgba(57, 63, 63, 0.05); }
+
+.calendar-change-month-back {
+  background-image: url("calendar-arrow-left.svg"); }
+  .calendar-change-month-back:rtl {
+    background-image: url("calendar-arrow-right.svg"); }
+
+.calendar-change-month-forward {
+  background-image: url("calendar-arrow-right.svg"); }
+  .calendar-change-month-forward:rtl {
+    background-image: url("calendar-arrow-left.svg"); }
 
 .calendar-day-base {
   font-size: 80%;
@@ -1012,6 +1033,10 @@ StScrollBar {
   .calendar-day-base:active {
     color: #fafaf9;
     background-color: #2d3232; }
+  .calendar-day-base.calendar-day-heading {
+    color: #8e8e80;
+    margin-top: 1em;
+    font-size: 90%; }
 
 .calendar-day {
   border: 1px solid #1c1f1f;
@@ -1032,7 +1057,7 @@ StScrollBar {
   font-weight: bold;
   color: white;
   border-bottom-width: 2px;
-  border-color: #215d9c; }
+  border-bottom-color: #215d9c; }
 
 .calendar-day-with-events {
   color: white;

js/ui/calendar.js

@@ -456,7 +456,7 @@ const Calendar = new Lang.Class({
         this._topBox = new St.BoxLayout();
         layout.attach(this._topBox, 0, 0, offsetCols + 7, 1);
 
-        this._backButton = new St.Button({ style_class: 'calendar-change-month-back',
+        this._backButton = new St.Button({ style_class: 'calendar-change-month-back pager-button',
                                            accessible_name: _("Previous month"),
                                            can_focus: true });
         this._topBox.add(this._backButton);
@@ -466,7 +466,7 @@ const Calendar = new Lang.Class({
                                          can_focus: true });
         this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
 
-        this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward',
+        this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward pager-button',
                                               accessible_name: _("Next month"),
                                               can_focus: true });
         this._topBox.add(this._forwardButton);