Resolve player icon hover conflict (#1637)
This commit is contained in:
parent
e83d667b25
commit
c146ccc432
3 changed files with 17 additions and 13 deletions
|
@ -179,8 +179,8 @@ a.button--alt {
|
||||||
order: 1;
|
order: 1;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
// background-position: center;
|
// background-position: center;
|
||||||
background-position: center 9.5px;
|
background-position: center 12.5px;
|
||||||
background-size: 28px;
|
background-size: 23px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
opacity: 0.8 !important;
|
opacity: 0.8 !important;
|
||||||
margin-left: var(--spacing-xs);
|
margin-left: var(--spacing-xs);
|
||||||
|
@ -205,7 +205,7 @@ a.button--alt {
|
||||||
display: block;
|
display: block;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: 28px;
|
background-size: 23px;
|
||||||
|
|
||||||
&:focus:not(:focus-visible) {
|
&:focus:not(:focus-visible) {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -214,7 +214,7 @@ a.button--alt {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
background-size: 24px;
|
background-size: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -541,8 +541,7 @@ $control-bar-height-mobile: 44px;
|
||||||
$control-bar-font-size: 0.9rem;
|
$control-bar-font-size: 0.9rem;
|
||||||
$control-bar-popup-font-size: 0.8rem;
|
$control-bar-popup-font-size: 0.8rem;
|
||||||
// $control-bar-icon-size: 1.9rem;
|
// $control-bar-icon-size: 1.9rem;
|
||||||
$control-bar-icon-size: 36px;
|
$control-bar-icon-size: 30px;
|
||||||
$control-bar-icon-size-mobile: 30px;
|
|
||||||
|
|
||||||
.video-js-parent {
|
.video-js-parent {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -636,13 +635,12 @@ $control-bar-icon-size-mobile: 30px;
|
||||||
font-size: $control-bar-icon-size;
|
font-size: $control-bar-icon-size;
|
||||||
line-height: $control-bar-height;
|
line-height: $control-bar-height;
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
font-size: $control-bar-icon-size-mobile !important;
|
|
||||||
line-height: $control-bar-height-mobile !important;
|
line-height: $control-bar-height-mobile !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vjs-quality-selector {
|
.vjs-quality-selector {
|
||||||
// margin-top: -6px;
|
margin-left: var(--spacing-xs);
|
||||||
.vjs-icon-placeholder {
|
.vjs-icon-placeholder {
|
||||||
font-size: $control-bar-font-size;
|
font-size: $control-bar-font-size;
|
||||||
span {
|
span {
|
||||||
|
@ -688,6 +686,8 @@ $control-bar-icon-size-mobile: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.vjs-playback-rate {
|
div.vjs-playback-rate {
|
||||||
|
margin-left: var(--spacing-xs);
|
||||||
|
margin-right: calc(var(--spacing-xs) * -1);
|
||||||
.vjs-playback-rate-value {
|
.vjs-playback-rate-value {
|
||||||
font-size: $control-bar-font-size;
|
font-size: $control-bar-font-size;
|
||||||
line-height: $control-bar-height;
|
line-height: $control-bar-height;
|
||||||
|
@ -732,8 +732,8 @@ $control-bar-icon-size-mobile: 30px;
|
||||||
margin-left: var(--spacing-xs);
|
margin-left: var(--spacing-xs);
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
.vjs-icon-placeholder {
|
.vjs-icon-placeholder {
|
||||||
$chromecast-icon-size: 30.5px;
|
$chromecast-icon-size: 25px;
|
||||||
margin-top: 1.5px;
|
margin-top: 3px;
|
||||||
width: $chromecast-icon-size;
|
width: $chromecast-icon-size;
|
||||||
height: $chromecast-icon-size;
|
height: $chromecast-icon-size;
|
||||||
}
|
}
|
||||||
|
@ -741,8 +741,8 @@ $control-bar-icon-size-mobile: 30px;
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
.vjs-icon-placeholder {
|
.vjs-icon-placeholder {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
width: 23px;
|
width: 26px;
|
||||||
height: 23px;
|
height: 26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -772,7 +772,7 @@ $control-bar-icon-size-mobile: 30px;
|
||||||
.vjs-button--play-next,
|
.vjs-button--play-next,
|
||||||
.vjs-mute-control {
|
.vjs-mute-control {
|
||||||
.vjs-icon-placeholder::before {
|
.vjs-icon-placeholder::before {
|
||||||
// font-size: 1.9rem;
|
font-size: 26px !important;
|
||||||
font-size: $control-bar-icon-size;
|
font-size: $control-bar-icon-size;
|
||||||
}
|
}
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
|
|
|
@ -245,6 +245,10 @@ $control-bar-popup-font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.vjs-slider-horizontal {
|
.vjs-slider-horizontal {
|
||||||
background-color: #474747 !important;
|
background-color: #474747 !important;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue