jiti-meet/css/modals/video-quality/_video-quality.scss

196 lines
4.4 KiB
SCSS

.video-quality-dialog {
.hide-warning {
height: 0;
visibility: hidden;
}
.video-quality-dialog-title {
margin-bottom: 10px;
}
.video-quality-dialog-contents {
align-items: center;
display: flex;
flex-direction: column;
padding: 10px;
min-width: 250px;
.video-quality-dialog-slider-container {
width: 100%;
text-align: center;
}
.video-quality-dialog-slider {
width: calc(100% - 5px);
@mixin sliderTrackStyles() {
height: 15px;
border-radius: 10px;
background: rgb(14, 22, 36);
}
&::-ms-track {
@include sliderTrackStyles();
}
&::-moz-range-track {
@include sliderTrackStyles();
}
&::-webkit-slider-runnable-track {
@include sliderTrackStyles();
}
@mixin sliderThumbStyles() {
top: 50%;
border: none;
position: relative;
opacity: 0;
}
&::-ms-thumb {
@include sliderThumbStyles();
}
&::-moz-range-thumb {
@include sliderThumbStyles();
}
&::-webkit-slider-thumb {
@include sliderThumbStyles();
}
}
.video-quality-dialog-labels {
box-sizing: border-box;
display: flex;
margin-top: 5px;
position: relative;
width: 90%;
}
.video-quality-dialog-label-container {
position: absolute;
text-align: center;
transform: translate(-50%, 0%);
&::before {
content: '';
border-radius: 50%;
left: 0;
height: 6px;
margin: 0 auto;
pointer-events: none;
position: absolute;
right: 0;
top: -16px;
width: 6px;
}
}
.video-quality-dialog-label-container.active {
color: $videoQualityActive;
&::before {
background: $videoQualityActive;
height: 12px;
top: -19px;
width: 12px;
}
}
.video-quality-dialog-label-container:first-child {
position: relative;
}
.video-quality-dialog-label {
display: table-caption;
word-spacing: unset;
}
}
&.video-not-supported {
.video-quality-dialog-labels {
color: gray;
}
.video-quality-dialog-slider {
@mixin sliderTrackDisabledStyles() {
background: rgba(14, 22, 36, 0.1);
}
&::-ms-track {
@include sliderTrackDisabledStyles();
}
&::-moz-range-track {
@include sliderTrackDisabledStyles();
}
&::-webkit-slider-runnable-track {
@include sliderTrackDisabledStyles();
}
}
}
}
.video-state-indicator {
background: $videoStateIndicatorBackground;
cursor: default;
font-size: 13px;
height: $videoStateIndicatorSize;
line-height: 20px;
text-align: left;
min-width: $videoStateIndicatorSize;
border-radius: 50%;
position: absolute;
box-sizing: border-box;
i {
line-height: $videoStateIndicatorSize;
}
/**
* Give the label padding so it has more volume and can be easily clicked.
*/
.video-quality-label-status {
line-height: $videoStateIndicatorSize;
min-width: $videoStateIndicatorSize;
text-align: center;
}
}
.centeredVideoLabel.moveToCorner {
z-index: $tooltipsZ;
}
#videoResolutionLabel {
z-index: #{$tooltipsZ + 1};
}
.centeredVideoLabel {
bottom: 45%;
border-radius: 2px;
display: none;
padding: 10px;
transform: translate(-50%, 0);
z-index: $centeredVideoLabelZ;
&.moveToCorner {
bottom: auto;
transform: none;
-webkit-transition: all 2s 2s linear;
transition: all 2s 2s linear;
}
}
.moveToCorner {
position: absolute;
top: 30px;
right: 30px;
}
.moveToCorner + .moveToCorner {
right: 80px;
}