html {
font-family: sans-serif;
}
body {
margin: 0;
overflow: hidden;
color: white;
background: black;
}
:not(input):not(textarea),
:not(input):not(textarea)::after,
:not(input):not(textarea)::before {
-webkit-user-select: none;
user-select: none;
cursor: default;
}
input, button, textarea, :focus {
outline: none; // You should add some other style for :focus to help UX/a11y
}
#player {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 6rem;
}
#player video {
width: 100%;
height: 100%;
object-fit: contain;
}
.button {
border-radius: 3px;
padding: .4em;
vertical-align: middle;
}
.controls-wrapper button, .right-menu button, .left-menu button, .controls-wrapper input {
background: white;
border-radius: .3em;
color: rgba(0, 0, 0, 0.7);
font-size: 13px;
vertical-align: middle;
padding: 0 .5em;
margin: 0 3px;
border: none;
height: 18px;
box-sizing: border-box;
font-family: inherit;
}
.controls-wrapper button:active, .right-menu button:active, .left-menu button:active {
background: #ccc;
}
.right-menu {
position: absolute;
right: 0;
bottom: 0;
padding: .3em;
}
.left-menu {
position: absolute;
left: 0;
bottom: 0;
padding: .3em;
}
.controls-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5.75rem;
background: #6b6b6b;
text-align: center;
}
#current-time-display {
text-align: center;
color: rgba(255, 255, 255, 0.8);
padding: .5em;
}
.timeline-wrapper {
width: 100%;
position: relative;
background-color: #444;
}
.timeline-wrapper .current-time, .timeline-wrapper .cut-section, .timeline-wrapper .cut-time-marker {
position: absolute;
bottom: 0;
top: 0;
}
.timeline-wrapper .cut-section {
z-index: 1;
}
.timeline-wrapper .cut-time-marker {
z-index: 2;
box-sizing: border-box;
}
.timeline-wrapper .current-time {
z-index: 3;
background-color: rgba(255, 255, 255, 1);
width: 1px;
}
#drag-drop-field {
padding: 15vw 0;
border: 2vw dashed #252525;
color: #303030;
margin: 7vw;
text-align: center;
white-space: nowrap;
}
.help-sheet {
background: #525252;
color: white;
padding: 1em 2em;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
}
.help-sheet h1 {
font-size: 1em;
text-transform: uppercase;
}
.help-sheet kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
.dragging-helper-class {
color: rgba(0,0,0,0.5);
}