LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix player button alignment

Browse source
This commit is contained in:
Raphael Wickihalder 2022-06-01 19:38:58 +02:00
parent eeda485bb4
commit 1efa54c121
No known key found for this signature in database
GPG key ID: 05179BB92383243D
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ui/scss/component/_file-render.scss
View file

@ -538,7 +538,7 @@
$control-bar-height: 2.5rem; $control-bar-height: 2.5rem;
$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: 2rem; $control-bar-icon-size: 1.9rem;
.video-js-parent { .video-js-parent {
height: 100%; height: 100%;
@ -625,7 +625,7 @@ $control-bar-icon-size: 2rem;
} }
.vjs-quality-selector { .vjs-quality-selector {
margin-top: -5px; margin-top: -6px;
.vjs-icon-placeholder { .vjs-icon-placeholder {
font-size: $control-bar-font-size; font-size: $control-bar-font-size;
span { span {
@ -639,7 +639,7 @@ $control-bar-icon-size: 2rem;
margin-top: -1px; margin-top: -1px;
//padding-top: 1px; //padding-top: 1px;
padding-top: 0; padding-top: 0;
line-height: 14px; line-height: 13px;
} }
} }
} }
@ -649,7 +649,7 @@ $control-bar-icon-size: 2rem;
.vjs-icon-placeholder { .vjs-icon-placeholder {
// Compensate: these icons in Font VideoJs are smaller than their peers. // Compensate: these icons in Font VideoJs are smaller than their peers.
&:before { &:before {
font-size: calc(#{$control-bar-icon-size} * 1.2); font-size: calc(#{$control-bar-icon-size} * 1.1);
} }
} }
} }
@ -685,10 +685,10 @@ $control-bar-icon-size: 2rem;
.vjs-chromecast-button, .vjs-chromecast-button,
.vjs-airplay-button { .vjs-airplay-button {
margin-top: -3px; margin-top: -4px;
margin-left: var(--spacing-xs); margin-left: var(--spacing-xs);
.vjs-icon-placeholder { .vjs-icon-placeholder {
$chromecast-icon-size: 30px; $chromecast-icon-size: 25px;
width: $chromecast-icon-size; width: $chromecast-icon-size;
height: $chromecast-icon-size; height: $chromecast-icon-size;
} }
@ -717,6 +717,9 @@ $control-bar-icon-size: 2rem;
.vjs-button--play-previous, .vjs-button--play-previous,
.vjs-button--play-next, .vjs-button--play-next,
.vjs-mute-control { .vjs-mute-control {
.vjs-icon-placeholder::before {
font-size: 1.7rem;
}
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
width: 2.25rem; width: 2.25rem;
} }
@ -724,7 +727,7 @@ $control-bar-icon-size: 2rem;
.vjs-button--play-previous, .vjs-button--play-previous,
.vjs-button--play-next { .vjs-button--play-next {
margin-top: -4px; margin-top: -3px;
} }
.vjs-button--play-next { .vjs-button--play-next {
margin-left: var(--spacing-xs); margin-left: var(--spacing-xs);

2
ui/scss/component/_videojs.scss
View file

@ -330,7 +330,7 @@ button.vjs-big-play-button {
.vjs-seek-to-live-control { .vjs-seek-to-live-control {
margin-top: -4px !important; margin-top: -4px !important;
margin-left: var(--spacing-xs) !important; margin-left: calc(var(--spacing-s) + 4px) !important;
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
padding-left: 0 !important; padding-left: 0 !important;
} }