326 lines
7.0 KiB
CSS
Vendored
326 lines
7.0 KiB
CSS
Vendored
.cd-schedule {
|
|
position: relative;
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.cd-schedule::before {
|
|
/* never visible - this is used in js to check the current MQ */
|
|
content: 'mobile';
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.cd-schedule {
|
|
width: 90%;
|
|
max-width: 1400px;
|
|
margin: 2em auto;
|
|
}
|
|
.cd-schedule::after {
|
|
clear: both;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
.cd-schedule::before {
|
|
content: 'desktop';
|
|
}
|
|
}
|
|
|
|
.cd-schedule .timeline {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.cd-schedule .timeline {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-top: 50px;
|
|
}
|
|
.cd-schedule .timeline li {
|
|
position: relative;
|
|
height: 25px;
|
|
}
|
|
.cd-schedule .timeline li::after {
|
|
/* this is used to create the table horizontal lines */
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10px;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
}
|
|
.cd-schedule .timeline li:last-of-type::after {
|
|
display: none;
|
|
}
|
|
.cd-schedule .timeline li span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1000px) {
|
|
.cd-schedule .timeline li::after {
|
|
width: calc(100% - 60px);
|
|
left: 60px;
|
|
}
|
|
.cd-schedule .timeline li span {
|
|
display: inline-block;
|
|
transform: translateY(-50%);
|
|
}
|
|
.cd-schedule .timeline li:nth-of-type(2n) span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.cd-schedule .events {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cd-schedule .events .events-group {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.cd-schedule .events .top-info {
|
|
width: 100%;
|
|
background: #5C2483;
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 0 5%;
|
|
}
|
|
|
|
.cd-schedule .events .top-info > span {
|
|
display: inline-block;
|
|
line-height: 1.2;
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cd-schedule .events .events-group > ul {
|
|
position: relative;
|
|
padding: 0 5%;
|
|
/* force its children to stay on one line */
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.cd-schedule .events .events-group > ul::after {
|
|
/* never visible - used to add a right padding to .events-group > ul */
|
|
display: inline-block;
|
|
content: '-';
|
|
width: 1px;
|
|
height: 100%;
|
|
opacity: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
.cd-schedule .events .single-event {
|
|
/* force them to stay on one line */
|
|
flex-shrink: 0;
|
|
float: left;
|
|
height: 150px;
|
|
width: 70%;
|
|
max-width: 300px;
|
|
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
|
|
margin-right: 20px;
|
|
transition: opacity .2s, background .2s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cd-schedule .events .single-event:last-of-type {
|
|
margin-right: 5%;
|
|
}
|
|
|
|
.cd-schedule .events .single-event a {
|
|
display: block;
|
|
height: 100%;
|
|
padding: .2em .2em 0 .2em;
|
|
}
|
|
|
|
@media only screen and (min-width: 550px) {
|
|
.cd-schedule .events .single-event {
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.cd-schedule .events {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
.cd-schedule .events .events-group {
|
|
width: 14%;
|
|
float: left;
|
|
border: 1px solid #EAEAEA;
|
|
/* reset style */
|
|
margin-bottom: 0;
|
|
}
|
|
.cd-schedule .events .events-group:not(:first-of-type) {
|
|
border-left-width: 0;
|
|
}
|
|
.cd-schedule .events .top-info {
|
|
/* vertically center its content */
|
|
display: table;
|
|
height: 50px;
|
|
border-bottom: 1px solid #EAEAEA;
|
|
/* reset style */
|
|
padding: 0;
|
|
}
|
|
.cd-schedule .events .top-info > span {
|
|
/* vertically center inside its parent */
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding: 0 .5em;
|
|
text-align: center;
|
|
/* reset style */
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
}
|
|
.cd-schedule .events .events-group > ul {
|
|
/* 19 is the number of list items in the .timeline */
|
|
height: 1200px;
|
|
/* reset style */
|
|
display: block;
|
|
overflow: visible;
|
|
padding: 0;
|
|
}
|
|
.cd-schedule .events .events-group > ul::after {
|
|
clear: both;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
.cd-schedule .events .events-group > ul::after {
|
|
/* reset style */
|
|
display: none;
|
|
}
|
|
.cd-schedule .events .single-event {
|
|
position: absolute;
|
|
z-index: 3;
|
|
/* top position and height will be set using js */
|
|
width: calc(100% + 2px);
|
|
left: -1px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
|
|
/* reset style */
|
|
flex-shrink: 1;
|
|
height: auto;
|
|
max-width: none;
|
|
margin-right: 0;
|
|
}
|
|
.cd-schedule .events .single-event a {
|
|
|
|
}
|
|
.cd-schedule .events .single-event:last-of-type {
|
|
/* reset style */
|
|
margin-right: 0;
|
|
}
|
|
.cd-schedule .events .single-event.selected-event {
|
|
/* the .selected-event class is added when an user select the event */
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1000px) {
|
|
.cd-schedule .events {
|
|
/* 60px is the .timeline element width */
|
|
width: calc(100% - 60px);
|
|
margin-left: 60px;
|
|
}
|
|
}
|
|
|
|
.cd-schedule.loading .events .single-event {
|
|
/* the class .loading is added by default to the .cd-schedule element
|
|
it is removed as soon as the single events are placed in the schedule plan (using javascript) */
|
|
opacity: 0;
|
|
}
|
|
|
|
.cd-schedule .event-name,
|
|
.cd-schedule .event-date {
|
|
display: block;
|
|
font-weight: bold;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.cd-schedule .event-name {
|
|
/*font-size: 2.4rem;*/
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.cd-schedule .event-name {
|
|
/*font-size: 2rem;*/
|
|
}
|
|
}
|
|
|
|
.cd-schedule .event-date {
|
|
/* they are not included in the the HTML but added using JavScript */
|
|
font-size: 1.4rem;
|
|
opacity: .7;
|
|
line-height: 1.2;
|
|
margin-bottom: .2em;
|
|
}
|
|
|
|
.cd-schedule .single-event[data-event="event-normal-even"],
|
|
.cd-schedule [data-event="event-normal-even"] .header-bg {
|
|
background: #DBC153;
|
|
color: white;
|
|
}
|
|
|
|
.cd-schedule .single-event[data-event="event-normal-odd"],
|
|
.cd-schedule [data-event="event-normal-odd"] .header-bg {
|
|
background: #FFE98A;
|
|
color: white;
|
|
}
|
|
|
|
.cd-schedule .single-event[data-event="event-special-even"],
|
|
.cd-schedule [data-event="event-special-even"] .header-bg {
|
|
background: #982323;
|
|
color: white;
|
|
}
|
|
|
|
.cd-schedule .single-event[data-event="event-special-odd"],
|
|
.cd-schedule [data-event="event-special-odd"] .header-bg {
|
|
background: #982323;
|
|
color: white;
|
|
}
|
|
|
|
.cd-schedule .single-event[data-is-current="true"],
|
|
.cd-schedule [data-is-current="true"] .header-bg {
|
|
border: solid 4px #982323;
|
|
}
|
|
|
|
.cd-schedule .single-event[data-event="event-normal-even"]:hover,
|
|
.cd-schedule .single-event[data-event="event-normal-odd"]:hover {
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
.cd-schedule.modal-is-open .body-bg {
|
|
opacity: 1;
|
|
transition: transform .4s;
|
|
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
}
|
|
}
|
|
|
|
.cd-schedule .cover-layer {
|
|
/* layer between the content and the modal window */
|
|
position: fixed;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .4s, visibility .4s;
|
|
}
|
|
|
|
.cd-schedule.modal-is-open .cover-layer {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|