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.
programme/source/stylesheets/site.css.scss

268 lines
3.7 KiB

* {
box-sizing: border-box;
}
$line-height: 150px;
$background: #212121;
//$background: #000;
//$event-talk: #3F51B5;
//$event-workshop: #f44336;
//$event-concert: #4CAF50;
//$event-round-table: #FFC107;
//$event-misc: #673AB7;
//$event-talk: #2962FF;
//$event-workshop: #DD2C00;
//$event-concert: #00C853;
//$event-round-table: #FF6D00;
//$event-misc: #6200EA;
$event-talk: #2980b9;
$event-workshop: #c0392b;
$event-concert: #27ae60;
$event-round-table: #FFC107;
$event-misc: #673AB7;
@mixin event($color) {
background-color: $color;
border-bottom: 5px solid darken($color, 15%);
}
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-o-transition: $args;
transition: $args;
}
body {
background-color: $background;
color: #fff;
font-size: 10pt;
}
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;
}
svg {
width: 30px;
height: 30px;
}
}
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;
cursor: pointer;
text-align: justify;
overflow: hidden;
&.half {
height: $line-height/2;
}
&.double {
height: 2*$line-height;
}
}
}
}
.hidden {
display: none;
}
.description {
display: none;
}
}
}
ul.legend {
list-style-type: none;
li {
display: inline;
span {
display: inline-block;
width: 25px;
}
}
}
.time {
font-size: 0.75em;
}
.title {
font-weight: bold;
}
.author {
text-align: right;
}
.talk {
@include event($event-talk);
}
.workshop {
@include event($event-workshop);
}
.concert {
@include event($event-concert);
}
.round-table {
@include event($event-round-table);
}
.misc {
@include event($event-misc);
}
.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: 30px;
height: 30px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
&::before {
-webkit-transform: translateX(-50%) translateY(-50%);
background-position: center;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23000%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
background-size: 20px 20px;
background-repeat: no-repeat;
}
}
.modal {
position: absolute;
background-color: #fff;
display: flex;
&.hidden {
display: none;
}
.header {
height: 100%;
padding: 10px;
text-align: justify;
}
.body {
color: #000;
height: 100%;
padding: 30px 30px 30px 10px;
flex-grow: 1;
background-color: #fff;
text-align: justify;
overflow-x: auto;
p {
margin: 0;
}
}
&.transition {
&, .header, .body {
@include transition(all 500ms ease-in-out);
}
.body {
padding: 0;
}
}
.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);
}
}
.giggity {
& .logo {
cursor: pointer;
}
& .qrcode {
position: absolute;
z-index: 3;
opacity: 1;
@include transition(all 500ms ease-in-out);
&.hidden {
opacity: 0;
}
}
}