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

Follow-up tweaks for 'Videojs css fix (#445)'

Browse source 
- More css consolidation.
- More size and padding restoration (it wasn't 445's main intention to change sizes).
- Handle padding for mobile to hopefully make everything fit, especially for Playlists. We'll need an overflow menu to truely fix this for all screens.
This commit is contained in:
infinite-persistence 2021-12-09 16:12:33 +08:00
parent a9e1308151
commit dc91bcad9c
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
3 changed files with 70 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/scss/component/_button.scss
View file

@ -120,7 +120,7 @@
order: 1; order: 1;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");
} }
&:focus:not(:focus-visible) { &:focus:not(:focus-visible) {
@ -128,7 +128,7 @@
// see: https://github.com/lbryio/lbry-desktop/pull/5549#discussion_r580406932 // see: https://github.com/lbryio/lbry-desktop/pull/5549#discussion_r580406932
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-monitor'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='21' x2='16' y2='21'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='21'%3E%3C/line%3E%3C/svg%3E");
} }
} }
@ -148,21 +148,21 @@
.vjs-button--play-next.vjs-button { .vjs-button--play-next.vjs-button {
order: 0; order: 0;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e"); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e");
&:focus:not(:focus-visible) { &:focus:not(:focus-visible) {
order: 0; order: 0;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e"); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e");
} }
} }
.vjs-button--play-previous.vjs-button { .vjs-button--play-previous.vjs-button {
order: 0; order: 0;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e"); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e");
&:focus:not(:focus-visible) { &:focus:not(:focus-visible) {
order: 0; order: 0;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e"); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3e%3cpolygon points='19 20 9 12 19 4 19 20'%3e%3c/polygon%3e%3cline x1='5' y1='19' x2='5' y2='5'%3e%3c/line%3e%3c/svg%3e");
} }
} }

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

@ -379,10 +379,10 @@
// **************************************************************************** // ****************************************************************************
// DRY: we'll soon move vjs items to videojs.scss, so just duplicate these for now. // DRY: we'll soon move vjs items to videojs.scss, so just duplicate these for now.
$control-bar-height: 2.1rem; $control-bar-height: 2.5rem;
$control-bar-font-size: 0.8rem; $control-bar-font-size: 0.8rem;
$control-bar-popup-font-size: 0.8rem; $control-bar-popup-font-size: 0.8rem;
$control-bar-icon-size: 0.7rem; $control-bar-icon-size: 0.8rem;
.video-js-parent { .video-js-parent {
height: 100%; height: 100%;
@ -405,35 +405,39 @@ $control-bar-icon-size: 0.7rem;
pointer-events: none; pointer-events: none;
} }
// control-bar: time
.vjs-control-bar { .vjs-control-bar {
// background-color: rgba(0, 0, 0, 0.8);
.vjs-remaining-time {
display: none;
}
.vjs-time-control { .vjs-time-control {
line-height: $control-bar-height; line-height: $control-bar-height;
font-size: $control-bar-font-size; font-size: $control-bar-font-size;
display: flex;
} }
.vjs-current-time { .vjs-current-time {
display: flex; padding-right: 0;
margin-right: 0.4rem; margin-right: 0.4rem;
@media (max-width: $breakpoint-small) {
margin-right: 0.2rem;
}
} }
.vjs-time-divider { .vjs-time-divider {
display: flex;
min-width: unset; min-width: unset;
padding: 0; padding: 0;
z-index: 0; // solves the grayed-out divider z-index: 0; // solves the grayed-out divider
} }
.vjs-duration { .vjs-duration {
display: flex; padding-left: 0;
margin-left: 0.4rem; margin-left: 0.4rem;
@media (max-width: $breakpoint-small) {
margin-left: 0.2rem;
}
} }
}
// control-bar: menu, button and icon
.vjs-control-bar {
.vjs-menu-button { .vjs-menu-button {
font-size: $control-bar-font-size; font-size: $control-bar-font-size;
line-height: $control-bar-height; line-height: $control-bar-height;
@ -450,16 +454,55 @@ $control-bar-icon-size: 0.7rem;
.vjs-quality-selector { .vjs-quality-selector {
.vjs-icon-placeholder { .vjs-icon-placeholder {
font-size: $control-bar-font-size; // quality selector uses regular text font font-size: $control-bar-font-size;
} }
} }
.vjs-play-control { .vjs-play-control,
.vjs-fullscreen-control {
.vjs-icon-placeholder { .vjs-icon-placeholder {
// The play icon in font VideoJs is smaller than its peers. Compensate to match the height. // Compensate: these icons in Font VideoJs are smaller than their peers.
font-size: calc(#{$control-bar-icon-size} * 1.2); font-size: calc(#{$control-bar-icon-size} * 1.2);
} }
} }
.vjs-playback-rate {
.vjs-playback-rate-value {
font-size: $control-bar-font-size;
line-height: $control-bar-height;
}
.vjs-menu {
width: 10em; // Extend the width to prevent a potential scrollbar from blocking the text.
left: -3em; // Center the popup on top of the button that invoked it.
}
}
}
// control-bar: general padding
.vjs-control-bar {
.vjs-button--play-previous:first-child,
.vjs-play-control:first-child {
margin-left: var(--spacing-xs);
@media (max-width: $breakpoint-small) {
margin-left: 0;
}
}
.vjs-fullscreen-control {
margin-right: var(--spacing-xs);
@media (max-width: $breakpoint-small) {
margin-right: 0;
}
}
.vjs-button--play-previous,
.vjs-button--play-next,
.vjs-mute-control {
@media (max-width: $breakpoint-small) {
width: 2.25rem;
}
}
} }
.vjs-picture-in-picture-control { .vjs-picture-in-picture-control {
@ -589,13 +632,9 @@ video::-internal-media-controls-overlay-cast-button {
} }
} }
// --- Adjust spacing --- // --- Hide unwanted ---
.vjs-current-time { .vjs-remaining-time {
padding-right: 0; display: none;
}
.vjs-duration {
padding-left: 0;
} }
} }

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

@ -1,7 +1,7 @@
$control-bar-height: 2.1rem; $control-bar-height: 2.5rem;
$control-bar-font-size: 0.8rem; $control-bar-font-size: 0.8rem;
$control-bar-popup-font-size: 0.8rem; $control-bar-popup-font-size: 0.8rem;
$control-bar-icon-size: 0.7rem; $control-bar-icon-size: 0.8rem;
.video-js { .video-js {
font-size: 12px; font-size: 12px;
@ -85,22 +85,10 @@ $control-bar-icon-size: 0.7rem;
position: absolute !important; position: absolute !important;
}*/ }*/
// Playback Rate
.vjs-playback-rate {
.vjs-playback-rate-value {
font-size: $control-bar-font-size; // Reduce the gigantic font a bit. Default was 1.5em.
line-height: $control-bar-height; // Vertically center the text.
}
.vjs-menu {
width: 10em; // Extend the width to prevent a potential scrollbar from blocking the text.
left: -3em; // Center the popup on top of the button that invoked it.
}
}
// Volume slider // Volume slider
.vjs-volume-panel { .vjs-volume-panel {
margin-right: -8px; margin-left: var(--spacing-xxs);
margin-right: calc(var(--spacing-xxs) * -1);
&.vjs-control { &.vjs-control {
transition: 0.2s; transition: 0.2s;