arrobefr-jquery-calendar/src/css/jquery-calendar.css

A responsive jquery calendar scheduler built with bootstrap and moment.js

/*!
 * @class Calendar ~jquery-calendar plugin~ (https://github.com/ArrobeFr/jquery-calendar)
 * @author Developped by Arrobe (https://www.arrobe.fr)
 * @license Licensed under MIT (https://github.com/ArrobeFr/jquery-calendar/blob/master/LICENSE)
 */

.calendar {
position:relative
}

.calendar-events>ul,.calendar-timeline>ul,.calendar-events-day>ul,.calendar-month-day-header>ul,.calendar-month-events-day>ul {
list-style-type:none;
padding:0
}

.calendar-timeline>ul>li:after {
position: absolute;
content: '';
border-bottom: 1px solid rgb(234,234,234);
}

.calendar-event {
overflow:hidden
}

.calendar-categories {
margin-bottom:10px;
overflow-x:auto;
width:100%;
z-index:10
}

li.calendar-event>a {
text-decoration:none
}

em.event-name,em.event-content {
font-style:normal
}

.calendar .calendar-timeline {
display:block;
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}

.calendar .calendar-timeline li {
position:relative
}

.calendar .calendar-timeline li::after {
background:#EAEAEA;
bottom:0;
height:1px;
left:60px;
position:absolute;
width:calc(100% - 60px)
}

.calendar .calendar-timeline li:last-of-type::after {
display:none
}

.calendar .calendar-timeline li span {
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
display:inline-block;
transform:translateY(-50%)
}

.calendar .calendar-events {
float:left;
margin-left:60px;
position:relative;
width:calc(100% - 60px);
z-index:1
}

.calendar-events-day, .calendar-month-day-header {
overflow: hidden;
border:1px solid #EAEAEA;
float:left;
margin-bottom:0
}

.calendar .calendar-events .calendar-day-header, .calendar-month-day-header>div {
border-bottom:1px solid #EAEAEA;
display:table;
padding:0;
width:100%
}

.calendar .calendar-events .calendar-day-header > span {
display:table-cell;
font-weight:700;
line-height:1.2;
margin-bottom:0;
padding:0 .5em;
text-align:center;
vertical-align:middle
}

.calendar-events-day > ul, .calendar-month-day-header > ul {
-webkit-overflow-scrolling:touch;
display:block;
overflow:auto;
overflow-x:hidden;
padding:0;
position:relative
}

.calendar-events-day > ul::after, .calendar-month-day-header > ul::after {
clear:both;
color:transparent;
display:none;
height:100%;
opacity:0;
width:1px
}

.calendar .calendar-events .calendar-event {
-ms-flex-negative:1;
-webkit-transition:opacity .2s,background .2s;
border-radius:2px;
box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2);
box-shadow:0 10px 20px rgba(0,0,0,0.1),inset 0 -3px 0 rgba(0,0,0,0.2);
flex-shrink:1;
float:left;
height:auto;
left:-1px;
margin-right:0;
max-width:none;
position:absolute;
transition:opacity .2s,background .2s;
width:calc(100% + 2px);
z-index:3
}

.calendar-month-event {
-ms-flex-negative:1;
-webkit-transition:opacity .2s,background .2s;
border-radius:2px;
box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2);
flex-shrink:1;
float:left;
left:-1px;
margin-right:0;
max-width:none;
position:absolute;
transition:opacity .2s,background .2s;
width:calc(100% + 2px);
z-index:3
}

.calendar .calendar-events .calendar-event:last-of-type {
margin-right:0
}

.calendar .calendar-events .calendar-event a {
display:block;
height:100%;
padding:2px
}

.calendar-events-day:not(:first-of-type), .calendar-month-day-header:not(:first-of-type) {
border-left-width:0
}

.calendar .calendar-events .calendar-event.selected-event {
visibility:hidden
}

.calendar.loading .calendar-events .calendar-event {
opacity:0
}

.calendar .event-name,.calendar .event-date {
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
color:#fff;
display:block;
font-weight:700
}

.calendar .event-content {
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
color:#fff;
display:block
}

.calendar-daynote .event-name,.calendar-daynote .event-date, .calendar-daynote .event-content, .calendar-label-daynote {
color:#000;
}

.calendar .event-name {
font-size:1.8rem;
}

.calendar .event-date {
font-size:1.4rem;
line-height:1.2;
margin-bottom:.2em;
opacity:.7
}

.calendar-month {
  font-weight: bold;
  border: 1px solid #EAEAEA;
  border-bottom: none;
}

.calendar-month-day-header>div {
  text-align: center;
  font-weight: bold;
}

.calendar-month-events-day>span {
  color: #BDBDBD ;
}

.weektoday, .monthtoweek, .daytoweek, .weektomonth {
  cursor: pointer;
}

.weektoday:hover, .monthtoweek:hover, .daytoweek:hover, .weektomonth:hover {
  background-color: #F5F5F5;
}