/** * @provides phui-calendar-month-css */ .phui-calendar-view { width: 100%; border-collapse: collapse; background: #fff; } tr.phui-calendar-day-of-week-header th { text-align: center; font-size: 13px; padding: 3px; color: {$lightbluetext}; background: {$lightgreybackground}; } tr.phui-calendar-day-of-week-header th.weekend-day-header { background: {$greybackground}; } .device tr.phui-calendar-day-of-week-header th .long-weekday-name { display: none; } tr.phui-calendar-day-of-week-header th .short-weekday-name { display: none; } .device tr.phui-calendar-day-of-week-header th .short-weekday-name { display: inline; } table.phui-calendar-view td { border: solid #dfdfdf; border-width: 1px 0 0; width: 14.2857%; /* This is one seventh, approximately. */ } table.phui-calendar-view td + td { border-left-width: 1px; } table.phui-calendar-view td.phui-calendar-month-number { border-top-width: 0; } .phui-calendar-month-cell-div { position: relative; } .phui-calendar-month-event-list .phui-calendar-month-cell-div { min-height: 125px; } .device .phui-calendar-month-event-list .phui-calendar-month-cell-div { min-height: 32px; } .device table.phui-calendar-view .phui-calendar-event-list { display: none; } .phui-calendar-month-event-count { display: none; } .device .phui-calendar-month-event-count { display: block; text-align: center; padding-top: 8px; } .phui-calendar-month-event-count .phui-calendar-month-count-badge { border: 1px solid {$lightgreyborder}; color: {$lightgreytext}; width: 20px; height: 20px; border-radius: 50%; text-align: center; vertical-align: middle; padding: 4px 2px 0px 2px; margin: 0 auto; } .phui-calendar-month-count-badge.viewer-invited-day-badge { border-color: {$green}; color: {$green}; } table.phui-calendar-view a.phui-calendar-week-number { color: {$lightgreyborder}; padding: 4px; display: inline-block; width: 16px; text-align: center; float: left; } table.phui-calendar-view a.phui-calendar-date-number { color: {$lightgreytext}; padding: 4px; display: inline-block; width: 16px; text-align: center; } .device table.phui-calendar-view a.phui-calendar-week-number, .device table.phui-calendar-view a.phui-calendar-date-number { width: 12px; } table.phui-calendar-view td.phui-calendar-month-number { font-weight: normal; color: {$lightgreytext}; text-align: right; } .phui-calendar-today-slot { display: block; height: 4px; position: absolute; left: 0; right: -1px; bottom: 0; } .phui-calendar-today-slot.last-weekday { right: 0px; } .phui-calendar-this-week .phui-calendar-today-slot { background-color: {$blue}; } .phui-calendar-today .phui-calendar-today-slot, .phui-calendar-today .phui-calendar-date-number { background-color: {$sky}; } table.phui-calendar-view .phui-calendar-today a.phui-calendar-date-number { color: #ffffff; } .phui-calendar-event-empty { border-color: transparent; background: transparent; } .phui-calendar-view .phui-calendar-list, .phui-calendar-view .phui-calendar-month-list { padding: 1px; width: auto; } .phui-calendar-list-item.all-day span { padding: 0; margin: 0; } .phui-calendar-view .phui-calendar-list li.phui-calendar-list-item.all-day { height: 20px; background-color: {$bluebackground}; display: block; float: none; } .phui-calendar-view .phui-calendar-list li.phui-calendar-viewer-invited.all-day { background-color: {$lightgreen}; } .phui-calendar-view .phui-calendar-list li { padding: 0px 4px; } .phui-calendar-view .phui-calendar-list li a { display: block; overflow: hidden; position: relative; height: 18px; } .phui-calendar-view li.phui-calendar-list-item { white-space: nowrap; width: auto; } .phui-calendar-list-item-icon { display: block; left: 0px; } .phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-title { width: auto; position: absolute; left: 16px; right: 60px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-time { position: absolute; top: 0; right: 0px; padding: 0; width: 60px; color: {$lightgreytext}; text-align: right; } td.phui-calendar-month-day, td.phui-calendar-month-number { cursor: pointer; } .device-desktop td.phui-calendar-month-day.calendar-hover, .device-desktop td.phui-calendar-month-number.calendar-hover { background: {$lightblue}; }