virstellung
Version:
108 lines (85 loc) • 1.83 kB
CSS
.virstellung {
display: block;
/* max-width: 100%;
max-height: 100%; */
width: 99vw;
height: 99vh;
/* margin: auto; */
}
.virstellung > div {
width: 100%;
height: 100%;
/* margin: auto; */
}
.imageContainer {
display: block;
width: 99%;
height: 91%; /* let space for below .virstellung p */
/* margin: auto; */
}
.virstellung img, .virstellung video, .virstellung audio {
object-fit: contain;
height: 100%;
width: 100%;
background-color: transparent;
}
.virstellung pre {
width: 100%;
height: 100%;
margin: 0;
overflow: scroll;
overflow: auto; /* only show scroll if too big */
font-size: 1.4em;
font-family: inherit;
}
.virstellung p {
margin: 0;
height: 8%;
text-align: center;
}
.navbutton {
color: black;
background-color: #eee;
border: solid;
}
.navbutton:hover, .navbutton:focus {
color: black;
background-color: #89ff89;
}
.imageContainer[data-function] {
position: relative;
overflow: hidden;
display: flex;
align-items: center ;
}
.imageContainer[data-function]:hover > .hoverSelect{
background-color: rgba(51, 124, 51, 0.6);
}
.imageContainer.selected > .hoverSelect{
background-color: rgba(25, 68, 25, 0.6);
}
.imageContainer.selected:hover > .hoverSelect{
background-color: rgba(83, 39, 30, 0.6);
}
.imageContainer[data-function]:hover > .hoverSelect,
.imageContainer.selected > .hoverSelect {
transform: translateX(0) rotate(0);
}
.hoverSelect {
transition: transform .086s linear;
color: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
display: flex;
align-items: center;
margin: auto;
padding: auto;
transform: translateY(-100%) rotate(0);
}
.hoverSelect>p {
margin: auto;
}