You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

75 lines
1.3 KiB
CSS

6 years ago
body {
overflow: hidden;
}
#content {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
display: grid;
grid-template-columns: 20px 1fr 512px 512px 20px;
grid-template-rows: 80px 1fr 288px 20px;
}
#scansdiv {
grid-column: 1 / span 5;
grid-row: 1 / span 4;
z-index: 1;
}
#titlesdiv {
grid-column: 3;
grid-row: 3;
z-index: 2;
/*background: white;*/
box-sizing: border-box;
/*display: none;*/
}
#titlesdiv.hidden {
/*display: none;*/
z-index: 0;
}
#videodiv {
grid-column: 4;
grid-row: 3;
z-index: 2;
box-sizing: border-box;
position: relative;
}
#textcontroldiv {
grid-column: 4;
grid-row: 4;
position: relative;
z-index: 3;
}
#textcontroldiv img {
position: absolute;
width: 40px;
height: 40px;
left: -54px;
top: -40px;
cursor: pointer;
}
@media (orientation: portrait) {
#content {
grid-template-columns: 20px 1fr 512px 20px;
grid-template-rows: 80px 1fr 288px 288px 20px;
}
#scansdiv {
grid-column: 1 / span 4;
grid-row: 1 / span 5;
z-index: 1;
}
#titlesdiv {
grid-column: 3;
grid-row: 3;
}
#videodiv {
grid-column: 3;
grid-row: 4;
}
}
#videodiv video {}
.fill {
width: 100%;
height: 100%;
border: none;
}