137 lines
2.4 KiB
CSS
137 lines
2.4 KiB
CSS
#schedule {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-items: flex-start;
|
|
align-content: flex-start;
|
|
margin-bottom: 5em;
|
|
}
|
|
|
|
.slot {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
text-align: center;
|
|
flex-direction: row;
|
|
margin: 0.3em;
|
|
font-size: 2em;
|
|
width: 22em;
|
|
}
|
|
|
|
.slot_info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.metadata, .data {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-content: flex-start;
|
|
padding: 0.5em;
|
|
border-style: solid;
|
|
}
|
|
|
|
.metadata {
|
|
width: 7.333em;
|
|
border-radius: 10px 0 0 10px;
|
|
background-color: var(--alt-bg-color);
|
|
color: var(--main-color);
|
|
border-color: var(--alt-bg-color);
|
|
font-family: pfdintextcompprothin;
|
|
border-width: 1px 0 0px 1px;
|
|
text-align: left;
|
|
}
|
|
|
|
.data {
|
|
width: 14.666em;
|
|
background-color: var(--main-color);
|
|
color: var(--alt-main-color);
|
|
border-color: var(--main-color);
|
|
border-width: 1px 1px 1px 0;
|
|
font-family: pfdintextcompprothin;
|
|
text-align: left;
|
|
}
|
|
|
|
.metadata > .slot_info > .button {
|
|
font-size: 1em;
|
|
margin-right: 0.3em;
|
|
}
|
|
|
|
.title {
|
|
font-family: pfdintextcompprothin;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.speakers {
|
|
font-family: pfdintextcompprothin;
|
|
font-weight: bold;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
.speaker_details {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.speaker_details .details {
|
|
visibility: hidden;
|
|
background-color: var(--main-color);
|
|
color: var(--alt-main-color);
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(102%);
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
.speaker_details .details::after {
|
|
content: "";
|
|
position: relative;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
}
|
|
|
|
.speaker_details:hover .details {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
font-size: 0.7em;
|
|
padding: 0.2em;
|
|
}
|
|
|
|
.speaker_details > .details > img,
|
|
.abstract > img {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
float: left;
|
|
margin: 0 0.5em 0.5em 0;
|
|
}
|
|
|
|
.speaker_details > .details > p {
|
|
text-align: justify;
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
.abstract > p {
|
|
text-align: justify;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.data > .details {
|
|
font-family: pfdintextcompprothin;
|
|
font-weight: bold;
|
|
margin-bottom: 0.2em;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.data > .resources > .resource > a {
|
|
color: var(--main-bg-color);
|
|
}
|