thsf.net/build/lib/thsf/static/css/planning.css
2023-04-09 18:40:48 +11:00

201 lines
3.5 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,
.slot_info_buttons {
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_buttons > .button,
.metadata > .slot_info_buttons > .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 {
position: relative;
display: inline-block;
}
.speaker .details {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
text-align: left;
padding: 1em;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
transform: translateX(-2em) translateY(102%);
max-width: 30em;
overflow-y: auto;
border-style: solid;
border-color: var(--alt-main-color);
border-width: 1px;
}
.speaker .details::after {
content: "";
position: relative;
margin-left: -5px;
border-width: 5px;
}
.speaker:hover .details {
visibility: visible;
opacity: 1;
font-size: 0.7em;
padding: 0.2em;
}
.speaker > .details > img,
.abstract > img {
max-width: 200px;
max-height: 200px;
float: left;
margin: 0 0.5em 0.5em 0;
}
.speaker > .details > p {
text-align: justify;
font-size: 0.5em;
}
.slot_info {
position: relative;
display: inline-block;
}
.slot_info .details {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
text-align: left;
padding: 1em;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
transform: translateX(-2em) translateY(102%);
max-width: 30em;
overflow-y: auto;
border-style: solid;
border-color: var(--alt-main-color);
border-width: 1px;
}
.slot_info .details > .description {
margin-top: 1em;
}
.slot_info .details::after {
content: "";
position: relative;
margin-left: -5px;
border-width: 5px;
}
.slot_info:hover .details {
visibility: visible;
opacity: 1;
font-size: 0.7em;
padding: 0.2em;
}
.slot_info > .details > img,
.abstract > img {
max-width: 200px;
max-height: 200px;
float: left;
margin: 0 0.5em 0.5em 0;
}
.slot_info > .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);
}