better calendar styling

bar/modules/calendar.py

@@ -191,13 +191,14 @@ class CalendarPopup(Window):
 
         if not events:
             logger.info("[Calendar] No events, showing 'no events' message")
-            no_events_label = Label("No upcoming events today", name="no-events")
+            no_events_label = Label("No events today", name="no-events")
             self.events_box.add(no_events_label)
             return
 
-        # Check current time for determining past vs upcoming
+        # Check current time for time indicator placement
         now = datetime.now()
         current_time = now.strftime("%H:%M")
+        current_time_added = False
 
         for i, event in enumerate(events):
             logger.info(f"[Calendar] Processing event {i+1} for display")
@@ -206,8 +207,10 @@ class CalendarPopup(Window):
             end_time = event.get("end", "").split()[1] if event.get("end") else ""
             location = event.get("location", "")
 
-            # Determine if event is in the past
+            # Check if we should add current time indicator before this event
-            is_past = end_time and end_time <= current_time
+            if not current_time_added and start_time and start_time > current_time:
+                self.add_current_time_indicator(current_time)
+                current_time_added = True
 
             # Format time display
             time_str = ""
@@ -216,17 +219,14 @@ class CalendarPopup(Window):
             elif start_time:
                 time_str = start_time
 
-            logger.info(
+            logger.info(f"[Calendar] Creating widget for: {title} ({time_str})")
-                f"[Calendar] Creating widget for: {title} ({time_str}) - {'Past' if is_past else 'Upcoming'}"
-            )
 
             # Create event item with horizontal layout - time on left, content on right
-            event_status = "past" if is_past else "upcoming"
             event_box = Box(
                 name="event-item",
                 orientation="h",  # Horizontal layout
                 spacing=12,
-                style_classes=[f"event-item", event_status],
+                style_classes=["event-item"],
             )
 
             # Left side: Time display (fixed width for alignment)
@@ -234,7 +234,7 @@ class CalendarPopup(Window):
             time_label = Label(
                 time_display,
                 name="event-time",
-                style_classes=["event-time", event_status],
+                style_classes=["event-time"],
                 style="min-width: 100px;"  # Fixed width for consistent alignment
             )
 
@@ -245,12 +245,11 @@ class CalendarPopup(Window):
                 spacing=2
             )
 
-            # Title with status prefix
+            # Title (no more status prefix)
-            title_prefix = "✓ " if is_past else ""
             title_label = Label(
-                f"{title_prefix}{title}",
+                title,
                 name="event-title",
-                style_classes=["event-title", event_status],
+                style_classes=["event-title"],
             )
             content_box.add(title_label)
 
@@ -258,7 +257,7 @@ class CalendarPopup(Window):
                 location_label = Label(
                     f"📍 {location}",
                     name="event-location",
-                    style_classes=["event-location", event_status],
+                    style_classes=["event-location"],
                 )
                 content_box.add(location_label)
 
@@ -269,10 +268,44 @@ class CalendarPopup(Window):
             self.events_box.add(event_box)
             logger.info(f"[Calendar] Added event widget to events_box")
 
+        # Add current time indicator at the end if not added yet
+        if not current_time_added:
+            self.add_current_time_indicator(current_time)
+
         # Force refresh the popup display
         self.events_box.show_all()
         logger.info(f"[Calendar] Finished updating popup")
 
+    def add_current_time_indicator(self, current_time):
+        """Add a current time indicator to the events list"""
+        time_indicator = Box(
+            name="current-time-indicator",
+            orientation="h",
+            spacing=8,
+            style_classes=["current-time-indicator"],
+        )
+
+        # Current time label
+        time_label = Label(
+            current_time,
+            name="current-time-label",
+            style_classes=["current-time-label"],
+            style="min-width: 100px; font-weight: bold;"
+        )
+
+        # Line indicator
+        line_label = Label(
+            "━━━ NOW",
+            name="current-time-line",
+            style_classes=["current-time-line"],
+        )
+
+        time_indicator.add(time_label)
+        time_indicator.add(line_label)
+
+        self.events_box.add(time_indicator)
+        logger.info(f"[Calendar] Added current time indicator at {current_time}")
+
 
 class CalendarWidget(Button):
     def __init__(self, **kwargs):

bar/styles/calendar.css

@@ -1,4 +1,4 @@
-/* Calendar widget styling (fallback when Stylix is disabled) */
+/* Calendar widget styling */
 
 /* Date time button */
 #date-time-button {
@@ -9,10 +9,17 @@
     box-shadow: none;
 }
 
+#date-time {
+    color: var(--foreground);
+    background-color: var(--module-bg);
+    padding: 4px 8px;
+    border-radius: 12px;
+}
+
 /* Calendar popup */
 #calendar-popup {
-    background-color: var(--background-alt);
+    background-color: var(--window-bg);
-    border: solid 2px var(--surface);
+    border: solid 2px var(--border-color);
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     animation: slide-down 200ms ease-out;
@@ -32,20 +39,18 @@
 #calendar-title {
     color: var(--foreground);
     font-weight: bold;
-    font-size: 1.1em;
     margin-bottom: 8px;
 }
 
 #events-box {
-    background-color: var(--background-alt);
+    background-color: var(--window-bg);
-    border: solid 1px var(--surface);
+    border: none; /* Remove outline */
     border-radius: 8px;
     padding: 16px;
 }
 
 #no-events {
-    color: var(--muted);
+    color: var(--light-grey);
-    font-size: 0.85em;
     padding: 4px;
 }
 
@@ -54,6 +59,8 @@
     border-radius: 6px;
     padding: 8px 12px;
     margin: 4px 0px;
+    background-color: var(--module-bg);
+    border: none; /* Remove outline */
     transition: background-color 0.15s ease;
 }
 
@@ -61,49 +68,31 @@
     margin-left: 8px;
 }
 
-.event-item.upcoming {
-    background-color: var(--surface);
-}
-
-.event-item.past {
-    background-color: var(--surface);
-    opacity: 0.6;
-}
-
 .event-title {
     font-weight: bold;
-    font-size: 1em;
-}
-
-.event-title.upcoming {
     color: var(--foreground);
 }
 
-.event-title.past {
-    color: var(--muted);
-}
-
 .event-time {
-    font-size: 0.85em;
+    color: var(--dark-fg);
-}
-
-.event-time.upcoming {
-    color: var(--muted);
-}
-
-.event-time.past {
-    color: var(--muted-dark);
 }
 
 .event-location {
-    font-size: 0.85em;
+    color: var(--light-grey);
 }
 
-.event-location.upcoming {
+/* Current time indicator */
-    color: var(--muted-dark);
+.current-time-indicator {
+    margin: 8px 0px;
+    padding: 4px 0px;
 }
 
-.event-location.past {
+#current-time-label {
-    color: var(--muted-dark);
+    color: var(--blue);
-    opacity: 0.8;
+    font-weight: bold;
+}
+
+#current-time-line {
+    color: var(--blue);
+    font-weight: bold;
 }

example-stylix-dev.yaml

@@ -30,7 +30,7 @@ stylix:
         serif: "Times New Roman"
         monospace: "JetBrains Mono"
         sizes:
-            desktop: 14
+            desktop: 16
             applications: 14
             terminal: 16
             popups: 14