Resolve player icon hover conflict (#1637)

This commit is contained in:
Rave | 図書館猫 2022-06-05 15:06:11 +02:00 committed by GitHub
parent e83d667b25
commit c146ccc432
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 13 deletions

View file

@ -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;
} }
} }

View file

@ -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) {

View file

@ -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;
} }