event-widget: Style overhaul

This reworks the style of the event widgets to make them match the
latest designs. This also supports the light and dark theme preferences
and fixes some spacing inconsistencies and errors.
- The orientation of events only affects how their content is laid out,
  not their style.
- Events are fully colored accordingly to their calendar's color.
- Timed events have a semi-transparent background and a kind of opaque
  knob on their left.
- Timed events have their text colored according to the theme.
- Lasting events are fully opaque, with no knob.
- Lasting events have their text colored according to their calendar's
  color.

This purposefully leaves the indentation broken to help reviewing the
changes.

src/theme/style-dark.css

@@ -0,0 +1,8 @@
+/*
+ * Event widget
+ */
+
+event.timed {
+    color: @light_1;
+    outline-color: rgba(0, 0, 0, 0.3);
+}

src/theme/style.css

@@ -1,5 +1,3 @@
-@define-color event_shadow_color alpha(black, 0.2);
-
 /* Header labels */
 label.primary-label {
     font-size: 16pt;
@@ -69,47 +67,50 @@ popover.events button {
  */
 
 event {
-    border-radius: 2px;
-    margin: 0 1px 1px 2px;
+    margin: 1px;
     font-size: 0.9rem;
 }
 
-event squeezer {
-  margin: 1px 4px 1px 6px;
+event widget.content {
+    margin: 4px;
 }
 
-event.horizontal.timed squeezer {
-  margin: 1px 2px 1px 0px;
+event.timed,
+event:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: 2.5px;
 }
 
-event.vertical.timed {
-  padding: 3px 6px;
+event.timed widget.edge {
+    border-radius: 2.5px;
+    min-width: 5px;
 }
 
-event.color-dark.horizontal.timed,
-event.color-light.horizontal.timed {
-    margin-bottom: 0;
-    border-radius: 0;
-    color: inherit;
+event.slanted,
+event.slanted-start,
+event.slanted-end:dir(rtl) {
+    padding-left: 16px;
+    border-radius: 0 2.5px 2.5px 0;
 }
 
-event.color-dark {
+event.slanted,
+event.slanted-end,
+event.slanted-start:dir(rtl) {
+    padding-right: 16px;
+    border-radius: 2.5px 0 0 2.5px;
+}
+
+event:not(.timed).color-dark {
+    /* Keep in symc with the dark style's event.timed colors */
     color: @light_1;
     outline-color: rgba(0, 0, 0, 0.3);
 }
 
-event.color-dark:backdrop {
-    color: @light_3;
-}
-
-event.color-light {
+event.timed,
+event:not(.timed).color-light {
     color: alpha(@dark_5, 0.8);
     outline-color: rgba(255, 255, 255, 0.5);
 }
 
-event.color-light:backdrop {
-    color: @dark_3;
-}
 
 /* Event Popover */
 popover.event-popover,

src/theme/theme.gresource.xml

@@ -2,5 +2,6 @@
 <gresources>
   <gresource prefix="/org/gnome/calendar">
     <file>style.css</file>
+    <file>style-dark.css</file>
   </gresource>
 </gresources>