From 11ac0e43e8deb3c5fc137a0231383fc3b017b4dc Mon Sep 17 00:00:00 2001
From: Hari Rana <theevilskeleton@riseup.net>
Date: Fri, 20 Jun 2025 23:11:42 -0400
Subject: [PATCH] css: Use box shadow for month cells

This is probably a better approach for getting month separators,
because box shadows don't affect the layout, unlike borders. Since
GtkStyleContext is deprecated, it makes more sense to use properties
that don't have any side effects with physical size.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-calendar/-/merge_requests/601>
---
 src/theme/style.css | 39 +++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/theme/style.css b/src/theme/style.css
index b7c24580..bc769354 100644
--- a/src/theme/style.css
+++ b/src/theme/style.css
@@ -234,10 +234,12 @@ button.week-header-expander:checked image {
 
 monthcell {
   --bg-color: rgb(from var(--window-fg-color) r g b / 0);
-  --separator-color: rgb(from var(--window-fg-color) r g b / calc(var(--border-opacity) + 12.5%));
+  --separator-color: rgb(from var(--border-color) r g b / calc(alpha + 7.5%));
+
+  box-shadow:
+    0 -1px var(--border-color),
+    var(--offset) 0 var(--border-color);
 
-  border: solid 1px rgb(from var(--border-color) r g b / calc(var(--border-opacity) / 1.5));
-  border-width: 1px 0 0 1px;
   transition: background-color 200ms;
   background-color: var(--bg-color);
 }
@@ -288,24 +290,25 @@ monthcell button {
 }
 
 /* Separators */
+monthcell:dir(ltr) {
+  --offset: -1px;
+}
+
+monthcell:dir(rtl) {
+  --offset: 1px;
+}
+
 monthcell.separator-top {
-  border-top: 1px solid var(--separator-color);
+  box-shadow:
+    0 -1px rgb(from var(--separator-color) r g b / calc(alpha * 2)),
+    var(--offset) 0 var(--border-color);
 }
 
-monthcell.separator-side:dir(ltr) {
-  border-left: 1px solid var(--separator-color);
-}
-
-monthcell.separator-side:dir(rtl) {
-  border-right: 1px solid var(--separator-color);
-}
-
-monthcell:nth-child(7n + 1):dir(ltr) {
-  border-left-width: 0;
-}
-
-monthcell:nth-child(7n + 1):dir(rtl) {
-  border-right-width: 0;
+monthcell.separator-top.separator-side {
+  box-shadow:
+    0 -1px var(--separator-color),
+    var(--offset) 0 var(--separator-color),
+    var(--offset) -1px var(--separator-color);
 }
 
 /*