Follow-up tweaks for 'Videojs css fix (#445)'
- 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:
parent
a9e1308151
commit
dc91bcad9c
3 changed files with 70 additions and 43 deletions
|
@ -120,7 +120,7 @@
|
|||
order: 1;
|
||||
background-repeat: no-repeat;
|
||||
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) {
|
||||
|
@ -128,7 +128,7 @@
|
|||
// see: https://github.com/lbryio/lbry-desktop/pull/5549#discussion_r580406932
|
||||
background-repeat: no-repeat;
|
||||
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 {
|
||||
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) {
|
||||
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 {
|
||||
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) {
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -379,10 +379,10 @@
|
|||
// ****************************************************************************
|
||||
|
||||
// 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-popup-font-size: 0.8rem;
|
||||
$control-bar-icon-size: 0.7rem;
|
||||
$control-bar-icon-size: 0.8rem;
|
||||
|
||||
.video-js-parent {
|
||||
height: 100%;
|
||||
|
@ -405,35 +405,39 @@ $control-bar-icon-size: 0.7rem;
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
// control-bar: time
|
||||
.vjs-control-bar {
|
||||
// background-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
.vjs-remaining-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vjs-time-control {
|
||||
line-height: $control-bar-height;
|
||||
font-size: $control-bar-font-size;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vjs-current-time {
|
||||
display: flex;
|
||||
padding-right: 0;
|
||||
margin-right: 0.4rem;
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-time-divider {
|
||||
display: flex;
|
||||
min-width: unset;
|
||||
padding: 0;
|
||||
z-index: 0; // solves the grayed-out divider
|
||||
}
|
||||
|
||||
.vjs-duration {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
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 {
|
||||
font-size: $control-bar-font-size;
|
||||
line-height: $control-bar-height;
|
||||
|
@ -450,16 +454,55 @@ $control-bar-icon-size: 0.7rem;
|
|||
|
||||
.vjs-quality-selector {
|
||||
.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 {
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
@ -589,13 +632,9 @@ video::-internal-media-controls-overlay-cast-button {
|
|||
}
|
||||
}
|
||||
|
||||
// --- Adjust spacing ---
|
||||
.vjs-current-time {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.vjs-duration {
|
||||
padding-left: 0;
|
||||
// --- Hide unwanted ---
|
||||
.vjs-remaining-time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
$control-bar-height: 2.1rem;
|
||||
$control-bar-height: 2.5rem;
|
||||
$control-bar-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 {
|
||||
font-size: 12px;
|
||||
|
@ -85,22 +85,10 @@ $control-bar-icon-size: 0.7rem;
|
|||
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
|
||||
.vjs-volume-panel {
|
||||
margin-right: -8px;
|
||||
margin-left: var(--spacing-xxs);
|
||||
margin-right: calc(var(--spacing-xxs) * -1);
|
||||
|
||||
&.vjs-control {
|
||||
transition: 0.2s;
|
||||
|
|
Loading…
Reference in a new issue