month-cell: Add month separators

src/gui/views/gcal-month-cell.c

@@ -97,6 +97,26 @@ update_style_flags (GcalMonthCell *self)
     gtk_widget_remove_css_class (GTK_WIDGET (self), "workday");
 }
 
+static void
+add_month_separators (GcalMonthCell *self)
+{
+  gint day_of_month;
+
+  gtk_widget_remove_css_class (GTK_WIDGET (self), "separator-top");
+  gtk_widget_remove_css_class (GTK_WIDGET (self), "separator-side");
+
+  day_of_month = g_date_time_get_day_of_month (self->date);
+  if (day_of_month > 1 && day_of_month <= 7)
+    {
+      gtk_widget_add_css_class (GTK_WIDGET (self), "separator-top");
+    }
+  else if (day_of_month == 1)
+    {
+      gtk_widget_add_css_class (GTK_WIDGET (self), "separator-side");
+      gtk_widget_add_css_class (GTK_WIDGET (self), "separator-top");
+    }
+}
+
 static void
 move_event (GcalMonthCell         *self,
             GcalEvent             *event,
@@ -433,6 +453,7 @@ gcal_month_cell_set_date (GcalMonthCell *self,
 
   gtk_label_set_text (self->day_label, text);
   update_style_flags (self);
+  add_month_separators (self);
 
   /* Month name */
   day_of_month = g_date_time_get_day_of_month (date);

src/theme/style-dark.css

@@ -40,3 +40,29 @@ monthcell:not(.workday):selected:hover {
     background-color: alpha(@accent_bg_color, 0.2);
     transition: background-color 200ms;
 }
+
+/* Separators */
+monthcell.separator-top,
+monthcell.separator-top:selected {
+    border-top: 1px solid #6b6b6b;
+}
+
+monthcell.separator-side:dir(ltr),
+monthcell.separator-side:selected:dir(ltr) {
+    border-left: 1px solid #6b6b6b;
+}
+
+monthcell:nth-child(7n + 1):dir(ltr),
+monthcell:nth-child(7n + 1):selected:dir(ltr) {
+    border-left-width: 0;
+}
+
+monthcell.separator-side:dir(rtl),
+monthcell.separator-side:selected:dir(rtl) {
+    border-right: 1px solid #6b6b6b;
+}
+
+monthcell:nth-child(7n + 1):dir(rtl),
+monthcell:nth-child(7n + 1):selected:dir(rtl) {
+    border-right-width: 0;
+}

src/theme/style-hc-dark.css

@@ -0,0 +1,25 @@
+/* Separators */
+monthcell.separator-top,
+monthcell.separator-top:selected {
+    border-top: 1px solid white;
+}
+
+monthcell.separator-side:dir(ltr),
+monthcell.separator-side:selected:dir(ltr) {
+    border-left: 1px solid white;
+}
+
+monthcell:nth-child(7n + 1):dir(ltr),
+monthcell:nth-child(7n + 1):selected:dir(ltr) {
+    border-left-width: 0;
+}
+
+monthcell.separator-side:dir(rtl),
+monthcell.separator-side:selected:dir(rtl) {
+    border-right: 1px solid white;
+}
+
+monthcell:nth-child(7n + 1):dir(rtl),
+monthcell:nth-child(7n + 1):selected:dir(rtl) {
+    border-right-width: 0;
+}

src/theme/style-hc.css

@@ -8,3 +8,28 @@ datechooser .weeknum{
     background-color: alpha(@theme_fg_color, 0.05);
     border: 1px solid alpha(currentColor, 0.5);
 }
+
+monthcell.separator-top,
+monthcell.separator-top:selected {
+    border-top: 1px solid black;
+}
+
+monthcell.separator-side:dir(ltr),
+monthcell.separator-side:selected:dir(ltr) {
+    border-left: 1px solid black;
+}
+
+monthcell:nth-child(7n + 1):dir(ltr),
+monthcell:nth-child(7n + 1):selected:dir(ltr) {
+    border-left-width: 0;
+}
+
+monthcell.separator-side:dir(rtl),
+monthcell.separator-side:selected:dir(rtl) {
+    border-right: 1px solid black;
+}
+
+monthcell:nth-child(7n + 1):dir(rtl),
+monthcell:nth-child(7n + 1):selected:dir(rtl) {
+    border-right-width: 0;
+}

src/theme/style.css

@@ -322,7 +322,6 @@ monthcell:hover {
     transition: background-color 200ms;
 }
 
-
 /* Today */
 monthcell.today { background-color: alpha(@accent_bg_color, 0.15); }
 monthcell.today:hover { background-color: alpha(@accent_bg_color, 0.25); }
@@ -340,7 +339,6 @@ monthcell.today label.day-label {
 
 /* Out of Month */
 monthcell.out-of-month {
-    border-color: alpha(@borders, 0.3);
     background-color: alpha(@theme_fg_color, 0.03);
 }
 
@@ -356,9 +354,6 @@ monthcell.out-of-month:not(.today):hover {
 
 monthcell.out-of-month label { color: alpha(@theme_fg_color, 0.4); }
 
-/* Weekend */
-monthcell:nth-child(7n + 1) { border-left-width: 0; }
-
 monthcell:not(.workday) {
     background-color: alpha(@theme_fg_color, 0.01);
 }
@@ -399,6 +394,32 @@ monthcell button {
     border-right: none;
 }
 
+/* Separators */
+monthcell.separator-top,
+monthcell.separator-top:selected {
+    border-top: 1px solid #a4a4a4;
+}
+
+monthcell.separator-side:dir(ltr),
+monthcell.separator-side:selected:dir(ltr) {
+    border-left: 1px solid #a4a4a4;
+}
+
+monthcell:nth-child(7n + 1):dir(ltr),
+monthcell:nth-child(7n + 1):selected:dir(ltr) {
+    border-left-width: 0;
+}
+
+monthcell.separator-side:dir(rtl),
+monthcell.separator-side:selected:dir(rtl) {
+    border-right: 1px solid #a4a4a4;
+}
+
+monthcell:nth-child(7n + 1):dir(rtl),
+monthcell:nth-child(7n + 1):selected:dir(rtl) {
+    border-right-width: 0;
+}
+
 /*
  * Month row
  */

src/theme/theme.gresource.xml

@@ -4,5 +4,6 @@
     <file>style.css</file>
     <file>style-dark.css</file>
     <file>style-hc.css</file>
+    <file>style-hc-dark.css</file>
   </gresource>
 </gresources>