thsf.net/src/thsf/static/css/planning.css

129 lines
2.3 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-direction: row;
align-items: flex-start;
align-content: flex-start;
margin: 1em;
font-size: 2em;
width: 22em;
}
.metadata, .data {
display: flex;
flex-direction: column;
justify-content: start;
align-items: flex-start;
align-content: flex-start;
padding: 0.5em;
border-style: solid;
height: 8em;
}
.metadata {
width: 7.333em;
border-radius: 10px 0 0 10px;
background-color: var(--alt-bg-color);
color: var(--main-color);
border-color: var(--main-color);
font-family: pfdintextcompprothin;
border-width: 1px 0 0px 1px;
}
.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;
overflow-y: auto;
}
.metadata > .button {
font-size: 1em;
margin-bottom: 1em;
}
.title {
font-family: pfdintextcompprothin;
font-weight: bold;
margin-bottom: 0.2em;
}
.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: translateY(120%);
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, .data > .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;
}
.data > .abstract > p {
text-align: justify;
font-size: 0.8em;
}
.data > .details {
font-family: pfdintextcompprothin;
font-weight: bold;
margin-bottom: 0.2em;
}
.data > .resources > .resource > a {
color: var(--main-bg-color);
}