diff --git a/data/theme/gtk-styles.css b/data/theme/gtk-styles.css
index 2e403ca3..a514f7aa 100644
--- a/data/theme/gtk-styles.css
+++ b/data/theme/gtk-styles.css
@@ -285,15 +285,25 @@ event-widget.color-light:backdrop {
     border-radius: 0;
     border-top-style: none;
     border-bottom-style: none;
-    -gtk-icon-effect: none;
 }
 
 .sources-button:hover:not(:backdrop) {
     background-image: none;
     text-shadow: none;
-    -gtk-icon-shadow: 0 1px alpha(black, 0.1);
 }
 
-.sources-button:not(:backdrop) {
+/* defeats the ugly hover effect of the calendar color dot on buttons */
+.calendar-color-image {
+    -gtk-icon-effect: none;
+}
+
+/* adds a subtle shadow to the calendar color dot when it makes sense */
+button:active:not(:backdrop) .calendar-color-image,
+button:checked:not(:backdrop) .calendar-color-image,
+.calendars-list modelbutton image:dir(ltr):first-child:not(:backdrop):not(:disabled),
+.calendars-list modelbutton image:dir(ltr):last-child:not(:backdrop):not(:disabled),
+.calendars-list row image:dir(ltr):first-child:not(:backdrop):not(:disabled),
+.calendars-list row image:dir(ltr):last-child:not(:backdrop):not(:disabled),
+.sources-button:not(:backdrop):not(:disabled) .calendar-color-image {
     -gtk-icon-shadow: 0 1px alpha(black, 0.1);
 }