1
0
peddlers-of-ketran/client/src/MediaControl.css
James Ketrenos 33144cb267 Started implementing draggable video feeds
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
2022-03-24 13:28:22 -07:00

100 lines
1.7 KiB
CSS

.MediaControlSpacer {
display: flex;
width: 5rem;
min-width: 5rem;
height: 3.75rem;
min-height: 3.75rem;
background-color: #444;
border-radius: 0.25rem;
}
.MediaControl {
display: flex;
position: fixed;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 5rem;
height: 3.75rem;
min-width: 5rem;
min-height: 3.75rem;
z-index: 50000;
}
.MediaControl .Video {
position: relative;
width: 100%;
height: 100%;
/*
width: 5rem;
height: 3.75rem;
/*
max-width: 5rem;
max-height: 3.75rem;
*/
background-color: #444;
border-radius: 0.25rem;
border: 1px solid black;
}
.MediaControl.Medium .Video {
/*
display: flex;
width: 11.5em;
height: 8.625em;
min-width: 11.5em;
min-height: 8.625em;
/* width: 9.75rem;
height: 7.3125rem;
max-width: 9.75rem;
max-height: 7.3125rem;*/
background-color: #444;
border-radius: 0.25rem;
border: 1px solid black;
}
.MediaControl > div {
display: flex;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 0.25rem;
}
.MediaControl .Controls {
display: flex;
position: absolute;
left: 0.5em;
bottom: 0.5em;
justify-content: flex-end;
z-index: 1;
}
.MediaControl.Small .Controls {
left: 0;
bottom: unset;
justify-content: center;
}
.MediaControl .Controls > div {
display: flex;
border-radius: 0.25em;
cursor: pointer;
padding: 0.25em;
}
.MediaControl .Controls > div:hover {
background-color: #d0d0d0;
}
.moveable-control-box {
border: none;
--moveable-color: unset !important;
}
.moveable-control-box .moveable-direction {
border: none !important;
}