/* sass-plugin-1:G:\develop\bvweb-player\node_modules\.pnpm\tippy.js@6.3.7\node_modules\tippy.js\dist\tippy.css */
.tippy-box[data-animation=fade][data-state=hidden] {
opacity: 0;
}
[data-tippy-root] {
max-width: calc(100vw - 10px);
}
.tippy-box {
position: relative;
background-color: #333;
color: #fff;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
white-space: normal;
outline: 0;
transition-property:
transform,
visibility,
opacity;
}
.tippy-box[data-placement^=top] > .tippy-arrow {
bottom: 0;
}
.tippy-box[data-placement^=top] > .tippy-arrow:before {
bottom: -7px;
left: 0;
border-width: 8px 8px 0;
border-top-color: currentColor;
border-top-color: initial;
transform-origin: center top;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow {
top: 0;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
top: -7px;
left: 0;
border-width: 0 8px 8px;
border-bottom-color: currentColor;
border-bottom-color: initial;
transform-origin: center bottom;
}
.tippy-box[data-placement^=left] > .tippy-arrow {
right: 0;
}
.tippy-box[data-placement^=left] > .tippy-arrow:before {
border-width: 8px 0 8px 8px;
border-left-color: currentColor;
border-left-color: initial;
right: -7px;
transform-origin: center left;
}
.tippy-box[data-placement^=right] > .tippy-arrow {
left: 0;
}
.tippy-box[data-placement^=right] > .tippy-arrow:before {
left: -7px;
border-width: 8px 8px 8px 0;
border-right-color: currentColor;
border-right-color: initial;
transform-origin: center right;
}
.tippy-box[data-inertia][data-state=visible] {
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
}
.tippy-arrow {
width: 16px;
height: 16px;
color: #333;
}
.tippy-arrow:before {
content: "";
position: absolute;
border-color: transparent;
border-style: solid;
}
.tippy-content {
position: relative;
padding: 5px 9px;
z-index: 1;
}
/* sass-plugin-1:G:\develop\bvweb-player\node_modules\.pnpm\tippy.js@6.3.7\node_modules\tippy.js\animations\shift-away.css */
.tippy-box[data-animation=shift-away][data-state=hidden] {
opacity: 0;
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] {
transform: translateY(10px);
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] {
transform: translateY(-10px);
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] {
transform: translateX(10px);
}
.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] {
transform: translateX(-10px);
}
/* sass-plugin-1:G:\develop\bvweb-player\src\styles\contextmenu.css */
.cm_container {
position: absolute;
opacity: 0;
transform: scale(0);
transition: transform 0.1s;
transform-origin: top left;
padding: 0;
}
.cm_container.display {
opacity: 1;
transform: scale(1);
}
.cm_container,
.cm_container * {
box-sizing: border-box;
}
.cm_container * {
position: relative;
}
.cm_container ul {
list-style-type: none;
padding: 0;
margin: 0;
color: white;
background-color: rgba(22, 27, 29, 0.8);
font-size: 14px;
box-shadow: 0 0 5px #333;
}
.cm_container li {
padding: 5px 10px;
padding-right: 1.7em;
cursor: pointer;
white-space: nowrap;
}
.cm_container li:hover {
background-color: rgba(85, 87, 88, 0.3);
}
.cm_container li .cm_icon_span {
width: 1.5em;
height: 1.2em;
vertical-align: bottom;
display: inline-block;
border-right: 1px solid #aaa;
margin-right: 5px;
padding-right: 5px;
text-align: center;
}
.cm_container li .cm_sub_span {
width: 1em;
display: inline-block;
text-align: center;
position: absolute;
top: 50%;
right: 0.5em;
transform: translateY(-50%);
}
.cm_container li > ul {
position: absolute;
top: 0;
left: 100%;
opacity: 0;
transition: opacity 0.2s;
visibility: hidden;
}
.cm_container li:hover > ul {
opacity: 1;
visibility: visible;
}
.cm_container li.cm_divider {
border-bottom: 1px solid #aaa;
margin: 5px;
padding: 0;
cursor: default;
}
.cm_container li.cm_divider:hover {
background-color: inherit;
}
.cm_container.cm_border_right > ul ul {
left: unset;
right: 100%;
}
.cm_container.cm_border_bottom > ul ul {
top: unset;
bottom: 0;
}
.cm_container li[disabled=""] {
color: #777;
cursor: default;
}
.cm_container li[disabled=""]:hover {
background-color: inherit;
}
/* sass-plugin-1:G:\develop\bvweb-player\src\styles\main.scss */
.bvplayer-common-flex-space {
display: inline-block;
flex: 1;
}
.tippy-box[data-theme~=bvplayer] {
background-color: #2e3e4e;
color: rgba(255, 255, 255, 0.8);
padding: 0;
margin: 0;
}
.tippy-box[data-theme~=bvplayer] .tippy-content {
font-size: 12px;
}
.tippy-box[data-theme~=bvplayer] .tippy-arrow {
outline: none;
}
.tippy-box[data-theme~=bvplayer][data-placement^=right] .tippy-content {
padding: 0px 5px;
}
.tippy-box[data-theme~=bvplayer][data-placement^=right] .tippy-arrow::before {
transform: translateY(-2px) scale(0.65);
border-right-color: #2e3e4e;
}
.tippy-box[data-theme~=bvplayer][data-placement^=top] .tippy-content {
padding: 3px 5px;
}
.tippy-box[data-theme~=bvplayer][data-placement^=top] .tippy-arrow::before {
border-top-color: #2e3e4e;
}
.bvplayer-icon {
display: inline-block;
height: 22px;
width: 100%;
vertical-align: middle;
}
.bvplayer-icon svg {
height: 100%;
width: 100%;
}
.bvplayer-button {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
outline: none;
border: 0;
line-height: 0;
display: inline-block;
padding: 3px 5px;
border-radius: 5px;
color: inherit;
}
.bvplayer-button .bvplayer-icon {
height: 1em;
}
.bvplayer-button--text {
background: none;
}
.bvplayer-button--default {
outline: none;
}
.bvplayer-button--primary {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(46, 62, 78, 0.6);
}
.bvplayer-input {
font-size: inherit;
font-family: inherit;
padding: 2px 4px;
background-color: #fff;
border: 1px solid #8b8a8b;
border-radius: 3px;
transition: box-shadow 180ms ease-in-out;
}
.bvplayer-input:not(textarea) {
line-height: 1;
}
.bvplayer-input[readonly] {
cursor: not-allowed;
border-style: dotted;
color: #777;
}
.bvplayer-input[disabled] {
border-color: #ccc;
background-color: #eee;
cursor: not-allowed;
}
.bvplayer-input:focus {
border-color: #68747d;
box-shadow: 0 0 3px 1px rgba(213, 217, 220, 0.5);
outline: 1px solid transparent;
}
.bvplayer-modal {
position: absolute;
top: 0;
left: 0;
padding: 12px 16px;
font-size: 14px;
border: 1px solid #2b303b;
border-radius: 3px;
background: rgba(22, 27, 29, 0.8);
color: #ffffff;
box-shadow: 0 0px 20px -6px rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
overflow: hidden;
visibility: hidden;
opacity: 0;
transform: scale(0);
will-change: transform, opacity;
transition: all 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
pointer-events: none;
}
.bvplayer-modal.bvplayer-common-is-visible {
visibility: visible;
opacity: 1;
transform: scale(1);
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.bvplayer-modal--center {
top: 50%;
left: 50%;
margin: auto;
transform: translate(-50%, -50%) scale(0);
}
.bvplayer-modal--center.bvplayer-common-is-visible {
transform: translate(-50%, -50%);
}
.bvplayer-modal_title-bar {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 16px;
}
.bvplayer-modal_title-bar_close {
cursor: pointer;
pointer-events: auto;
}
.bvplayer-modal_body {
padding: 8px;
overflow: hidden;
overflow-y: auto;
}
.bvplayer-spinner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.bvplayer-spinner > span {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
height: 36px;
width: 36px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.bvplayer-spinner > span svg {
height: 100%;
}
.bvplayer-mask {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
align-content: center;
justify-content: center;
place-content: center;
background-color: #000000;
color: #fff;
font-size: 14px;
}
.bvplayer-slider {
cursor: pointer;
position: relative;
width: 100%;
height: 3px;
line-height: 3px;
background: #aaa;
transition: all 0.3s ease-in-out;
}
.bvplayer-slider_inner {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
transition: all 0.1s ease;
background: #fff;
}
.bvplayer-slider_thumb {
cursor: pointer;
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 11px;
width: 11px;
border-radius: 50%;
transition: all 0.3s ease-in-out;
background: #fff;
}
.bvplayer-slider_suffix {
position: absolute;
visibility: visible;
display: inline-block;
width: calc(100% + 28px);
text-align: right;
color: #fff;
opacity: 0.8;
font-size: 12px;
}
.bvplayer-toast {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.bvplayer-toast > span {
display: inline-block;
position: absolute;
left: calc(50% - 100px);
bottom: 72px;
margin: -18px 0 0 0px;
height: 32px;
width: 200px;
line-height: 32px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
text-align: center;
border-radius: 5px;
font-size: 14px;
}
.bvplayer-recordState {
position: absolute;
top: 0;
left: 0;
}
.bvplayer-recordState > span {
display: inline-block;
position: absolute;
left: 10px;
top: 10px;
height: 30px;
line-height: 32px;
font-size: 14px;
background-color: white;
width: 100px;
border-radius: 5px;
}
.bvplayer-video {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.bvplayer-video_screen {
pointer-events: none;
width: 100%;
height: 100%;
}
.bvplayer-controller {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 98px;
color: #fff;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
visibility: hidden;
opacity: 0;
transform: translateY(100%);
will-change:
visibility,
opacity,
transform;
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.bvplayer-controller.bvplayer-common-is-visible {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.bvplayer-controller_mask {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
}
.bvplayer-controller_inner {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 41px;
padding: 0 20px;
display: flex;
align-items: stretch;
justify-content: space-between;
}
.bvplayer-controller_inner_bar {
display: block;
}
.bvplayer-controller_inner_bar * {
vertical-align: middle;
pointer-events: auto;
}
.bvplayer-controller_inner_left {
cursor: default;
}
.bvplayer-controller_inner_right {
cursor: default;
}
.bvplayer-controller_button {
cursor: pointer;
display: inline-block;
-webkit-appearance: none;
appearance: none;
width: 36px;
height: 100%;
border: none;
outline: none;
padding: 0px;
background: none;
color: inherit;
}
.bvplayer-controller_button:not(:last-child) {
margin-right: 8px;
}
.bvplayer-controller_button > * {
transition: all 0.2s ease-in-out;
opacity: 0.8;
}
.bvplayer-controller_button:hover > * {
opacity: 1;
}
.bvplayer-controller_volume {
display: inline-block;
}
.bvplayer-controller_volume--active .bvplayer-slider,
.bvplayer-controller_volume:hover .bvplayer-slider {
width: 45px !important;
}
.bvplayer-controller_volume--active .bvplayer-slider_thumb,
.bvplayer-controller_volume:hover .bvplayer-slider_thumb {
transform: scale(1) !important;
}
.bvplayer-controller_volume--active .bvplayer-slider_suffix,
.bvplayer-controller_volume:hover .bvplayer-slider_suffix {
visibility: visible;
}
.bvplayer-controller_volume .bvplayer-controller_button {
margin-right: 5px;
}
.bvplayer-controller_volume .bvplayer-slider {
display: inline-block;
width: 0;
}
.bvplayer-controller_volume .bvplayer-slider_thumb {
transform: scale(0);
}
.bvplayer-controller_volume .bvplayer-slider_suffix {
visibility: hidden;
}
.bvplayer-ptz {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
}
.bvplayer-ptz.bvplayer-common-is-visible {
visibility: visible;
}
.bvplayer-ptz.bvplayer-common-is-visible .bvplayer-ptz_control {
opacity: 1;
transform: translate(-50%, 0);
}
.bvplayer-ptz-control-button {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
outline: none;
border: 0;
padding: 3px 5px;
border-radius: 3px;
overflow: hidden;
color: rgba(255, 255, 255, 0.8);
opacity: 1;
transform: scale(1);
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.bvplayer-ptz-control-button--press {
transform: scale(0.9);
opacity: 0.8;
}
.bvplayer-ptz-speed-slider {
width: 20px;
height: 100%;
display: inline-block;
-webkit-user-select: none;
user-select: none;
}
.bvplayer-ptz-speed-slider_header,
.bvplayer-ptz-speed-slider_footer {
position: relative;
font-size: 12px;
}
.bvplayer-ptz-speed-slider_header::before,
.bvplayer-ptz-speed-slider_footer::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
transform: scaleX(0.3);
}
.bvplayer-ptz-speed-slider_header::after,
.bvplayer-ptz-speed-slider_footer::after {
content: attr(data-text);
position: absolute;
font-size: 12px;
opacity: 0.8;
}
.bvplayer-ptz-speed-slider_header {
margin-bottom: 1px;
}
.bvplayer-ptz-speed-slider_header::after {
right: -20px;
top: -7px;
}
.bvplayer-ptz-speed-slider_footer {
margin-top: 1px;
}
.bvplayer-ptz-speed-slider_footer::after {
right: -10px;
top: -10px;
}
.bvplayer-ptz-speed-slider_main {
height: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.bvplayer-ptz-speed-slider-track {
display: inline-block;
width: 2px;
height: 100%;
background-color: rgba(255, 255, 255, 0.45);
border-radius: 3px;
}
.bvplayer-ptz-speed-slider-thumb {
cursor: pointer;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
padding: 4px 5px;
border-radius: 2px;
background-color: #2e3e4e;
color: rgba(255, 255, 255, 0.8);
box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px, rgba(0, 0, 0, 0.25) 0px 2px 4px;
}
.bvplayer-ptz-speed-slider-thumb span {
display: inline-block;
height: 4px;
width: 1px;
background-color: white;
}
.bvplayer-ptz-speed-slider-thumb span:not(:last-child) {
margin-right: 3px;
}
.bvplayer-ptz_control {
opacity: 0;
pointer-events: auto;
position: absolute;
left: 50%;
bottom: 40px;
transform: translate(-50%, calc(100% + 40px));
will-change: transform opacity;
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
display: flex;
justify-content: space-between;
height: 30%;
min-height: 110px;
max-height: 150px;
width: 60%;
max-width: 380px;
overflow: hidden;
padding: 8px 12px;
font-size: 12px;
color: #fff;
background: rgba(22, 27, 29, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.7);
}
.bvplayer-ptz_control > :not(:last-child) {
margin-right: 8px;
}
.bvplayer-ptz_control_direction-grid {
position: relative;
display: grid;
grid-template-rows: repeat(3, minmax(25px, 1fr));
grid-template-columns: repeat(3, minmax(25px, 1fr));
grid-gap: 8px;
gap: 8px;
width: 35%;
min-width: 100px;
max-width: 170px;
overflow: hidden;
}
.bvplayer-ptz_control_direction-grid_item {
outline: none;
}
.bvplayer-ptz_control_speed-option {
flex: 1;
overflow: hidden;
text-align: left;
padding: 6px 0;
}
.bvplayer-ptz_control_camera-option {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.bvplayer-ptz_control_camera-option_item {
white-space: nowrap;
}
.bvplayer-ptz_control_camera-option_item:not(:last-child) {
margin-bottom: 4%;
}
.bvplayer-ptz_control_camera-option_item_label {
display: inline-block;
width: 60px;
margin-right: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
text-align-last: justify;
}
.bvplayer-ptz_control_camera-option_item_value {
display: inline-block;
white-space: normal;
word-break: break-all;
}
.bvplayer-ptz_control_camera-option_item_value > :not(:last-child) {
margin-right: 8px;
}
.bvplayer-ptz_control_direction-button {
height: 100%;
width: 100%;
max-width: 60px;
max-height: 60px;
background-color: rgba(46, 62, 78, 0.8);
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.bvplayer-ptz_control_direction-button .bvplayer-icon {
height: 50%;
min-height: 18px;
}
.bvplayer-ptz_control_direction-button.bvplayer-ptz-control-button--press {
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.bvplayer-ptz_control_operator-button {
padding: 2px;
background-color: rgba(46, 62, 78, 0.8);
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.bvplayer-ptz_control_operator-button .bvplayer-icon {
height: 16px;
}
.bvplayer-ptz_control_close-button {
position: absolute;
top: 2px;
right: 2px;
font-size: 16px;
padding: 0;
will-change: transform;
transition: transform 0.3s;
}
.bvplayer-ptz_control_close-button:hover {
transform: scale(1.1);
}
.bvplayer-player {
position: relative;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
.bvplayer-player * {
box-sizing: border-box;
}
.bvplayer-player .bvplayer-video {
position: absolute;
}
.bvplayer-player .bvplayer-modal {
min-width: 120px;
min-height: 100px;
}
.bvplayer-player-fit--contain .bvplayer-video_screen {
-o-object-fit: contain;
object-fit: contain;
}
.bvplayer-player-fit--fill .bvplayer-video_screen {
-o-object-fit: fill;
object-fit: fill;
}
.bvplayer-player-fit--cover .bvplayer-video_screen {
-o-object-fit: cover;
object-fit: cover;
}
.bvplayer-player-fit--scale-down .bvplayer-video_screen {
-o-object-fit: scale-down;
object-fit: scale-down;
}
.bvplayer-player-fit--none .bvplayer-video_screen {
-o-object-fit: none;
object-fit: none;
}
.bvplayer-player_info-modal_content {
width: 280px;
min-height: 180px;
display: flex;
flex-direction: column;
}
.bvplayer-player_info-modal_section:not(:last-child) {
margin-bottom: 16px;
}
.bvplayer-player_info-modal_section_title {
display: inline-block;
font-weight: bold;
font-size: 12px;
margin-bottom: 8px;
margin-left: 16px;
position: absolute;
}
.bvplayer-player_info-modal_section_main {
width: 100%;
display: flex;
flex-direction: column;
align-items: end;
margin-left: 70px;
width: calc(100% - 70px);
}
.bvplayer-player_info-modal_list {
min-width: 210px;
font-size: 12px;
}
.bvplayer-player_info-modal_list_item {
white-space: nowrap;
}
.bvplayer-player_info-modal_list_item:not(:last-child) {
margin-bottom: 8px;
}
.bvplayer-player_info-modal_list_item_label {
display: inline-block;
width: 90px;
margin-right: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.bvplayer-player_info-modal_list_item_value {
display: inline-block;
white-space: normal;
word-break: break-all;
}
.bvplayer-blaybackbar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.bvplayer-blaybackbar .right-options {
position: absolute;
right: 16px;
top: 14px;
}
.bvplayer-blaybackbar .optionsContent {
position: absolute;
right: 85px;
bottom: 30px;
padding: 10px 5px;
border-radius: 5px;
height: 130px;
background-color: white;
color: black;
display: none;
box-sizing: content-box;
}
.bvplayer-blaybackbar .options-item select {
vertical-align: text-bottom;
}
.bvplayer-blaybackbar .options-item {
text-align: center;
padding: 2px 12px;
-webkit-user-select: none;
user-select: none;
}
.bvplayer-blaybackbar .options-item[data-selected=true] {
background-color: #cfcfcf;
}
.bvplayer-blaybackbar .options-item:hover {
cursor: pointer;
background-color: #dfdfdf;
border-radius: 3px;
}
.bvplayer-blaybackbar .svg-sound {
color: white;
cursor: pointer;
display: inline-block;
width: -moz-fit-content;
width: fit-content;
vertical-align: super;
padding: 5px;
padding: 5px 8px;
border-radius: 15px;
}
.bvplayer-blaybackbar .svg-sound .range-input {
width: 0px;
vertical-align: middle;
margin-right: 2px;
transition: width 0.5s;
display: none;
}
.bvplayer-blaybackbar .svg-sound .range-input::-webkit-slider-thumb {
background: #ffffff;
}
.bvplayer-blaybackbar .svg-sound svg {
vertical-align: middle;
}
.bvplayer-blaybackbar .svg-sound:hover {
background-color: rgba(44, 44, 44, 0.61);
}
.bvplayer-blaybackbar .svg-sound:hover .range-input {
display: inline-block;
width: 60px;
margin-right: 10px;
}
.bvplayer-markerhandle {
height: 100%;
}
.bvplayer-markerhandle .mark-timeline-title > span {
width: 25%;
display: inline-block;
text-align: center;
font-weight: bolder;
color: #989898;
font-size: small;
line-height: 32px;
}
.bvplayer-markerhandle .mark-timeline-line {
border-bottom: 1px solid #e0e0e0;
}
.bvplayer-markerhandle .mark-timeline-line-content {
line-height: 40px;
}
.bvplayer-markerhandle .mark-timeline-line-content > span {
color: #858585;
}
.bvplayer-markerhandle .mark-timeline-line-content:hover {
background-color: #ecf5ff;
transition: background 0.3s;
}
.bvplayer-markerhandle .input-handle-marker {
padding-top: 5px;
}
.bvplayer-markerhandle .input-handle-marker .custom_input {
display: flex;
align-items: center;
position: relative;
max-width: 100%;
}
.bvplayer-markerhandle .input-handle-marker .input {
font-size: 12px;
padding: 0px 10px;
margin-right: 5px;
width: calc(100% - 240px);
line-height: 30px;
outline: none;
background: #ffffff;
color: #000000;
border: 1px solid #c4d1eb;
border-radius: 5px;
transition: 0.3s ease;
}
.bvplayer-markerhandle .input-handle-marker .input:focus {
background: #f2f2f2;
border: 1px solid #6e98ec;
border-radius: 5px;
}
.bvplayer-markerhandle .input-handle-marker .input::placeholder {
color: #dddddd;
}
.bvplayer-markerhandle .input-handle-marker .show-wrapper {
vertical-align: middle;
margin-right: 5px;
margin-left: 1px;
cursor: pointer;
}
.bvplayer-markerhandle .testbutton {
cursor: pointer;
font-family: "times new roman";
color: #02050a !important;
font-size: 12px;
text-shadow: 0px 0px 0px #7cacde;
box-shadow: 0px 0px 0px #f5f5f5;
padding: 7px 15px;
border-radius: 3px;
line-height: 16px;
border: 1px solid #c4c4c4;
background: #ffffff;
}
.bvplayer-markerhandle .testbutton:hover {
color: #409eff !important;
background: #ecf5ff;
}
.bvplayer-markerhandle .opt-controls {
z-index: 1;
padding: 5px 0px;
border: 1px solid lightgray;
border-radius: 4px;
top: 36px;
left: 5px;
width: 80px;
color: #bebebe;
}
.bvplayer-markerhandle .testbutton-noborder {
border: 0px;
}
.bvplayer-markerhandle .marker-display-panel {
position: absolute;
top: 0px;
left: 0px;
height: 80%;
width: 100%;
pointer-events: none;
overflow: hidden;
}