month-cell: Add month separators

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>