You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

203 lines
2.5 KiB

// @import 'bootstrap';
* {
box-sizing: border-box;
}
$line-height: 150px;
$event-color-1: #2980b9; // Smalt Blue
$event-color-2: #c0392b; // Martinique
$event-color-3: #27ae60; // Rajah
@mixin event($color) {
background-color: $color;
border-bottom: 5px solid darken($color, 5%);
}
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-o-transition: $args;
transition: $args;
}
table.timetable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
tr {
th:first-child {
width: 50px;
}
th, td {
padding: 5px;
border: 1px solid #aaa;
}
}
thead {
th, td {
text-align: center;
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
height: $line-height;
& {
margin-top: 5px;
}
}
}
tbody {
th {
font-size: 0.75em;
}
td {
vertical-align: top;
ul {
li {
padding: 10px;
color: #fff;
cursor: pointer;
&.half {
height: $line-height/2;
}
&.double {
height: 2*$line-height;
}
}
}
}
.hidden {
display: none;
}
.description {
display: none;
}
}
}
.time {
font-size: 0.75em;
}
.title {
font-weight: bold;
}
.author {
text-align: right;
}
.hidden {
display: none;
}
.cinema {
@include event($event-color-1);
}
.hall {
@include event($event-color-2);
}
.town {
@include event($event-color-3);
}
.modal {
position: absolute;
background-color: #fff;
display: flex;
&.hidden {
display: none;
}
.header {
height: 100%;
padding: 10px;
color: #fff;
}
.body {
height: 100%;
padding: 30px 30px 30px 10px;
flex-grow: 1;
background-color: #fff;
overflow-x: auto;
}
&.transition {
&, .header, .body {
@include transition(all 500ms ease-in-out);
}
.body {
padding: 0;
}
}
.close {
position: absolute;
top: 0;
right: 0;
color: transparent;
white-space: nowrap;
text-indent: 100%;
height: 30px;
width: 30px;
cursor: pointer;
&::before, &::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 15px;
background: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
&::before {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
&::after {
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
}
.header, .body, .close {
z-index: 3;
}
.cover {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
}
}