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
75 lines
1.3 KiB
CSS
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;
|
|
}
|