110 lines
2.0 KiB
SCSS
110 lines
2.0 KiB
SCSS
$blockTimes: 800, 900, 1000, 1100, 1200, 1300,
|
|
1400, 1500, 1600, 1700, 1800, 1900, 2000,
|
|
2100;
|
|
$blockLengths: 1, 2, 3, 4;
|
|
|
|
.schedule-container {
|
|
display: grid;
|
|
grid-gap: 0.2rem;
|
|
|
|
grid-template-columns: 5rem repeat(4, 1fr);
|
|
grid-template-rows: repeat(14, 1fr);
|
|
grid-template-areas:
|
|
"time800 stage stage stage stage"
|
|
"time900 stage stage stage stage"
|
|
"time1000 stage stage stage stage"
|
|
"time1100 stage stage stage stage"
|
|
"time1200 stage stage stage stage"
|
|
"time1300 stage stage stage stage"
|
|
"time1400 stage stage stage stage"
|
|
"time1500 stage stage stage stage"
|
|
"time1600 stage stage stage stage"
|
|
"time1700 stage stage stage stage"
|
|
"time1800 stage stage stage stage"
|
|
"time1900 stage stage stage stage"
|
|
"time2000 stage stage stage stage"
|
|
"time2100 stage stage stage stage"
|
|
}
|
|
|
|
/**
|
|
* Time
|
|
*/
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
border-top: thin dotted #ccc;
|
|
height: 100%;
|
|
padding: 0 0.5rem;
|
|
|
|
@each $time in $blockTimes {
|
|
&.start-#{$time} {
|
|
grid-area: time#{$time};
|
|
}
|
|
}
|
|
|
|
&[class*="30"]:not(.start-1300) {
|
|
font-size: 0.8rem;
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Event
|
|
*/
|
|
.event {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding: 0.5rem 1rem;
|
|
background-color: orange;
|
|
border-radius: 0.2rem;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
line-height: 1.4;
|
|
|
|
span {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
@each $time in $blockTimes {
|
|
&.start-#{$time} {
|
|
grid-row-start: time#{$time};
|
|
}
|
|
}
|
|
|
|
@each $time in $blockTimes {
|
|
&.end-#{$time} {
|
|
grid-row-end: time#{$time};
|
|
}
|
|
}
|
|
|
|
@each $length in $blockLengths {
|
|
&.length-#{$length} {
|
|
grid-column-end: span #{$length};
|
|
}
|
|
}
|
|
|
|
&.stage-earth {
|
|
background-color: #ffa726;
|
|
}
|
|
&.stage-mercury {
|
|
background-color: #9ccc65;
|
|
}
|
|
&.stage-venus {
|
|
background-color: #ff8a65;
|
|
}
|
|
&.stage-mars {
|
|
background-color: #b3e5fc;
|
|
}
|
|
&.stage-jupiter {
|
|
background-color: #81d4fa;
|
|
}
|
|
&.stage-saturn {
|
|
background-color: #26c6da;
|
|
}
|
|
}
|