vfowler/fix-the-libcal-interface-with-stripes-for-your-booking.markdown

## fix-the-libcal-interface-with-stripes-for-your-booking.markdown

      
    Raw
  

              fix-the-libcal-interface-with-stripes-for-your-booking.markdown
            
          
    Fix the LibCal interface with stripes for Your Booking

A Pen by Vernon Fowler on CodePen.
License.

  
## style.css
/* overcome LibCal accessibility shortcoming of relying on being able to distinguish certain colour combinations to convey different states of room availability */

/*
The CSS below can be added in the <head> via LibCal Look and feel settings https://your_library_subdomain.libcal.com/admin_look.php?action=0
As instructed under Code Customizations, do not forget to wrap <style> tags, ie <style>... all this good stuff ...</style>
*/

:root {
  /* These default colors are available via Reset to System Defaults https://your_library_subdomain.libcal.com/admin/equipment/settings
  --available: #14951F;
  --available-hover: #095212;
  --yourbooking: #F59F16;
  --unavailablepadding: #C91908;
  */
  /* The following colours provide a little more contrast than the defaults and define a colour for stripes */
  --available: #43BF43;
  --available-hover: #14951F;
  --yourbooking: #F9BE4F;
  --yourbookingalt: #AA8A60; /* for CSS stripes */
  --unavailablepadding: #7A0814; /* darker hues may be more semantic */
}

/* Add stripes only for Your booking https://css-tricks.com/stripes-css/ */
.s-lc-eq-pending, .label-eq-pending, .s-lc-eq-period-pending {
  border-color: var(--yourbooking) !important;
  background: repeating-linear-gradient( 45deg, var(--yourbooking), var(--yourbooking) 5px, var(--yourbookingalt) 5px, var(--yourbookingalt) 10px );
}
/* Zero the left and right borders for stripes to cover the maximum width of the cell  */
.fc-timeline-event {
  border-width: 1px 0;
}

/* Tweak the solid colour for unavailable / padding */
.s-lc-eq-checkout, .label-eq-unavailable, .s-lc-eq-period-booked {
    background-color: var(--unavailablepadding) !important;
    border-color: var(--unavailablepadding) !important;
}

/* Tweak the solid colour for available */
.s-lc-eq-avail, .label-eq-avail, .s-lc-eq-period-available {
    background-color: var(--available) !important;
    border-color: var(--available) !important;
}
/* Tweak the solid colour for hover on available */
.s-lc-eq-avail:hover, .s-lc-eq-period-available:hover {
    background-color: var(--available-hover) !important;
    border-color: var(--available-hover) !important;
}
	/* overcome LibCal accessibility shortcoming of relying on being able to distinguish certain colour combinations to convey different states of room availability */

	/*
	The CSS below can be added in the <head> via LibCal Look and feel settings https://your_library_subdomain.libcal.com/admin_look.php?action=0
	As instructed under Code Customizations, do not forget to wrap <style> tags, ie <style>... all this good stuff ...</style>
	*/

	:root {
	/* These default colors are available via Reset to System Defaults https://your_library_subdomain.libcal.com/admin/equipment/settings
	--available: #14951F;
	--available-hover: #095212;
	--yourbooking: #F59F16;
	--unavailablepadding: #C91908;
	*/
	/* The following colours provide a little more contrast than the defaults and define a colour for stripes */
	--available: #43BF43;
	--available-hover: #14951F;
	--yourbooking: #F9BE4F;
	--yourbookingalt: #AA8A60; /* for CSS stripes */
	--unavailablepadding: #7A0814; /* darker hues may be more semantic */
	}

	/* Add stripes only for Your booking https://css-tricks.com/stripes-css/ */
	.s-lc-eq-pending, .label-eq-pending, .s-lc-eq-period-pending {
	border-color: var(--yourbooking) !important;
	background: repeating-linear-gradient( 45deg, var(--yourbooking), var(--yourbooking) 5px, var(--yourbookingalt) 5px, var(--yourbookingalt) 10px );
	}
	/* Zero the left and right borders for stripes to cover the maximum width of the cell */
	.fc-timeline-event {
	border-width: 1px 0;
	}

	/* Tweak the solid colour for unavailable / padding */
	.s-lc-eq-checkout, .label-eq-unavailable, .s-lc-eq-period-booked {
	background-color: var(--unavailablepadding) !important;
	border-color: var(--unavailablepadding) !important;
	}

	/* Tweak the solid colour for available */
	.s-lc-eq-avail, .label-eq-avail, .s-lc-eq-period-available {
	background-color: var(--available) !important;
	border-color: var(--available) !important;
	}
	/* Tweak the solid colour for hover on available */
	.s-lc-eq-avail:hover, .s-lc-eq-period-available:hover {
	background-color: var(--available-hover) !important;
	border-color: var(--available-hover) !important;
	}