Add scrollbox and feathered edges (List layout)

CSS Codes Event Calendar
1

This code will create a scrollbox for your event calendar list and feather the top and bottom edges. It should be added to the Custom CSS field on the Style tab of your widget’s setting:

/* Scrollbox w/ feathered edges */
.eapp-events-calendar-events-calendar-layout {
  max-height: 800px;
  overflow-y: auto;
  padding: 20px 0;
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      /* Top edge starts fully transparent */
      black 20px,
      /* Fade transitions to fully opaque after 20px */
      black calc(100% - 20px),
      /* Stays opaque until 20px from the bottom */
      transparent 100%);
      /* Bottom edge transitions to fully transparent */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 20px,
      black calc(100% - 20px),
      transparent 100%);
}
2 Likes