day_views.css

/* common (day/months day) - careful here */

.day-events h4,
.day-events h5 {
  font-weight: normal;
}

/** hour */

.day-events {
  display: block;
  box-shadow: none;
}

.day-events > .hour {
  height: 6rem;
  padding-left: 1.5rem;
  position: relative;
  border-bottom: 0.1rem solid #D0D0D0;
}

.day-events > .hour.hour-allday {
  min-height: 6rem;
  height: auto;
}


.day-events .hour-allday .events {
  height: auto;
}

.day-events > .hour h4 {
  position: absolute;
  width: 6rem;
  padding-top: 1.4rem;
  color: #000;
  font-size: 1.4rem;
  font-weight: 400;
}

/** events */

.day-events .events {
  -moz-user-select: none;
  position: relative;
  width: calc(100% - 7.4rem);
  height: 6rem;
  margin-left: 7.4rem;
  border-left: 0.1rem solid #bbb;
}

.day-events .event {
  position: absolute;
  height: 6rem;
  top: 0;
  z-index: 10;
}

.day-events .hour-allday .event {
  position: relative;
}

.day-events .container {
  /* turn off calendar color bg */
  background: white !important;
  border-width: 0.1rem;
  border-style: solid;
  border-left-width: 0.6rem;
  height: 100%;
  padding: 0.8rem 1rem 2.2rem;
}

.day-events .event.has-alarms .container {
  background: #FFF url(/style/icons/alarm.png) no-repeat top right / 3rem !important;
}

.day-events .hour .display-hour {
  display: block;
  text-transform: uppercase;
  overflow: hidden;
  height: 100%;
  vertical-align: top;
}

.day-events .event h5 {
  width: calc(100% - 1rem - 0.6rem);
  min-height: 2.2rem;
  padding-top: 0.6rem;
  font-size: 1.9rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.day-events .event .details {
  display: block;
  top: 2.8rem;
  width: calc(100% - 1rem - 0.6rem);
  min-height: 2.1rem;
  padding-top: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5b5b5b;
  font-size: 1.5rem;
}

.day-events .event.partial-hour .details {
  display: none;
}

.attendee {
  padding-right: 0.3rem;
}

/* overlap */

.event[data-overlaps="1"] { padding-left: 0.6rem; z-index: 11; }
.event[data-overlaps="2"] { padding-left: 1.2rem; z-index: 12; }
.event[data-overlaps="3"] { padding-left: 1.8rem; z-index: 13; }
.event[data-overlaps="4"] { padding-left: 2.4rem; z-index: 14; }
.event[data-overlaps="5"] { padding-left: 3rem; z-index: 15; }
.event[data-overlaps="6"] { padding-left: 3.6rem; z-index: 16; }
.event[data-overlaps="7"] { padding-left: 4.2rem; z-index: 17; }
.event[data-overlaps="8"] { padding-left: 4.8rem; z-index: 18; }
.event[data-overlaps="9"] { padding-left: 5.4rem; z-index: 19; }
.event[data-overlaps="10"] { padding-left: 6rem; z-index: 20; }

/* months day view */

#months-day-view .day-events {
  height: -moz-calc(100% - 3rem);
  overflow-x: hidden;
  overflow-y: auto;
}

/* day view */

#day-view > section {
  top: 4.9rem;
  overflow: hidden;
  height: calc(100% - 6.9rem);
  position: absolute;
  width: 100%;
  border-left: 0.1rem solid #AAA;
  border-right: 0.1rem solid #AAA;
  display: none;
}

#day-view h4 {
  font-size: 1.3rem;
}

#day-view > section.active {
  display: block;
}

#day-view .day-events {
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100% - 7.9rem);
}

#day-view .day-events.allday {
  height: 6rem;
  box-shadow: 0px 5px 5px 0px rgba(1, 1, 1, 0.2);
  position: relative;
  z-index: 11;
}