views: sync header labels' style

The Week view exposed a bug where we had different
CSS selectors for the exact same label. This made
them look inconsistent, with different colors and
paddings.

Fix that by ensuring they all use the same style
class. The Year view drawing code needed to be
reworked a little.

https://bugzilla.gnome.org/show_bug.cgi?id=778391

data/theme/gtk-styles.css

@@ -7,16 +7,17 @@
 
 /* nav-bar labels */
 .start-header {
-    font-size: 18pt;
+    font-size: 16pt;
     font-weight: bold;
     color: @theme_selected_bg_color;
     padding: 12px;
 }
 
 .end-header {
-    font-size: 18pt;
+    font-size: 16pt;
     font-weight: bold;
     padding: 12px;
+    color: alpha(@theme_fg_color, 0.55);
 }
 
 calendar-view {
@@ -25,7 +26,9 @@ calendar-view {
 }
 
 calendar-view.header {
+    font-size: 10pt;
     font-weight: bold;
+    color: alpha(@theme_fg_color, 0.55);
 }
 
 calendar-view.current,
@@ -53,20 +56,6 @@ calendar-view.lines {
     color: alpha(@theme_fg_color, 0.4);
 }
 
-calendar-view .first-view-header {
-    font-size: 16pt;
-    font-weight: bold;
-    color: @theme_selected_bg_color;
-    padding: 12px;
-}
-
-calendar-view .second-view-header {
-    font-size: 16pt;
-    font-weight: bold;
-    padding: 12px;
-    color: alpha(@theme_fg_color, 0.55);
-}
-
 /* Year View CSS */
 .year-view {
     padding: 0px;
@@ -75,9 +64,9 @@ calendar-view .second-view-header {
 /* Header the padding if for sizing, on drawing the spacing between cells,
  * and the padding will be automatically calculated
  * Because of year-view widget internals, the color property should be the same
- * of .calendar-view.first-view-header selector */
+ * of .start-header selector */
 .year-navigator {
-    padding: 6px 12px;
+    padding: 12px;
     color: @theme_selected_bg_color;
 }
 

data/ui/week-header.ui

@@ -17,7 +17,7 @@
             <property name="label">Month</property>
             <property name="yalign">0</property>
             <style>
-              <class name="month-name" />
+              <class name="start-header" />
             </style>
           </object>
         </child>
@@ -29,7 +29,7 @@
             <property name="yalign">0</property>
             <property name="label">Week</property>
             <style>
-              <class name="week-number" />
+              <class name="end-header" />
             </style>
           </object>
         </child>
@@ -39,7 +39,7 @@
             <property name="label">Year</property>
             <property name="yalign">0</property>
             <style>
-              <class name="week-number" />
+              <class name="end-header" />
             </style>
           </object>
         </child>