The 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;
*/
:root {
/* The following colours provide a little more contrast than the defaults, and for stripes defines a colour, angle and background size */
--available: #43BF43;
--available-hover: #14951F;
--yourbooking: #F9BE4F;
--yourbookingalt: #AA8A60; /* for CSS stripes */
--stripeAngle: 45deg;
--backgroundSize: 100%;
--stripeThickness: 1%; /* CSS stripe thickness */
--unavailablepadding: #7A0814; /* darker hues may be more semantic */
}
/* Add stripes to Your booking with https://css-tricks.com/stripes-css/ and https://css-tricks.com/while-you-werent-looking-css-gradients-got-better/ */
.s-lc-eq-pending, .label-eq-pending, .s-lc-eq-period-pending {
border-color: var(--yourbooking) !important;
background:
repeating-linear-gradient(
var(--stripeAngle, 45deg),
var(--yourbooking, #F9BE4F) 0 var(--stripeThickness, 1%),
var(--yourbookingalt, #AA8A60) 0 calc(2 * var(--stripeThickness, 1%))
);
background-size: var(--backgroundSize, 100%);
}
/* 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;
}
Alternate page for screen reader Users
Skip to Main Content
