80 lines
1.0 KiB
CSS
80 lines
1.0 KiB
CSS
html, body, #player {
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
background: #000000;
|
|
color: #ffffff;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
#screen {
|
|
position: relative;
|
|
}
|
|
|
|
#play {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
z-index: 1;
|
|
}
|
|
|
|
#vid {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
#controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
#controls > * {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
#controls label {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
#stats {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
#stats label {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.buffer {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.buffer .fill {
|
|
position: absolute;
|
|
transition-duration: 0.1s;
|
|
transition-property: left, right, background-color;
|
|
background-color: RebeccaPurple;
|
|
height: 100%;
|
|
text-align: right;
|
|
padding-right: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.buffer .fill.net {
|
|
background-color: Purple;
|
|
}
|