From c775072e7e86b779a0bf2c776438081c62ad2824 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rave=20=7C=20=E5=9B=B3=E6=9B=B8=E9=A4=A8=E7=8C=AB?= Date: Wed, 1 Jun 2022 18:25:37 +0200 Subject: [PATCH] Realign & adjust player icons (#1621) --- ui/scss/component/_button.scss | 5 ++- ui/scss/component/_content.scss | 2 +- ui/scss/component/_file-render.scss | 53 ++++++++++++++++++++++------- ui/scss/component/_videojs.scss | 26 +++++++++----- 4 files changed, 64 insertions(+), 22 deletions(-) diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 9bd2ddc10..08ebaded8 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -179,6 +179,9 @@ a.button--alt { order: 1; background-repeat: no-repeat; background-position: center; + transform: scale(1.4); + margin-top: -4px; + margin-left: var(--spacing-xs); 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"); } @@ -234,7 +237,7 @@ a.button--alt { // // TEMP: for now, just hardcode the left-right margin so that it looks // equally spaced compared to its siblings. - margin: auto 0.5rem auto 0.7rem; + margin: 9px 0.5rem auto 0.7rem; order: 1; width: 24px; diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss index 73c697644..f145dd5ae 100644 --- a/ui/scss/component/_content.scss +++ b/ui/scss/component/_content.scss @@ -132,7 +132,7 @@ .vjs-icon-placeholder { &::before { - font-size: 1.8em !important; + font-size: 2.2em !important; line-height: 32px !important; background-size: 60%; } diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index 308746b90..d72c5979b 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -538,7 +538,7 @@ $control-bar-height: 2.5rem; $control-bar-font-size: 0.8rem; $control-bar-popup-font-size: 0.8rem; -$control-bar-icon-size: 0.8rem; +$control-bar-icon-size: 2rem; .video-js-parent { height: 100%; @@ -563,8 +563,22 @@ $control-bar-icon-size: 0.8rem; // control-bar: time .vjs-control-bar { + .vjs-volume-panel { + .vjs-volume-horizontal { + margin-top: 0 !important; + height: $control-bar-height !important; + } + &:hover { + .vjs-volume-horizontal { + margin-top: 0; + height: $control-bar-height !important; + } + } + } + .vjs-time-control { - line-height: $control-bar-height; + margin-left: var(--spacing-xs); + line-height: $control-bar-icon-size; font-size: $control-bar-font-size; display: flex; } @@ -600,27 +614,31 @@ $control-bar-icon-size: 0.8rem; } .vjs-icon-placeholder { - font-size: $control-bar-icon-size; // videojs icon font + // font-size: $control-bar-icon-size; // videojs icon font line-height: $control-bar-height; } .vjs-icon-placeholder::before { - line-height: $control-bar-height; + font-size: $control-bar-icon-size; + line-height: $control-bar-icon-size; } .vjs-quality-selector { + margin-top: -5px; .vjs-icon-placeholder { font-size: $control-bar-font-size; span { display: block; margin-left: 24%; margin-right: 24%; - font-size: var(--font-xxxsmall); + font-size: 0.6rem; background: var(--color-primary); font-weight: var(--font-weight-bold); - border-radius: var(--border-radius); + border-radius: 4px; margin-top: -1px; - padding-top: 1px; + //padding-top: 1px; + padding-top: 0; + line-height: 14px; } } } @@ -629,20 +647,27 @@ $control-bar-icon-size: 0.8rem; .vjs-fullscreen-control { .vjs-icon-placeholder { // Compensate: these icons in Font VideoJs are smaller than their peers. - font-size: calc(#{$control-bar-icon-size} * 1.2); + &:before { + font-size: calc(#{$control-bar-icon-size} * 1.2); + } } } .vjs-playback-rate { + margin-left: var(--spacing-xs); .vjs-playback-rate-value { font-size: $control-bar-font-size; - line-height: $control-bar-height; + line-height: $control-bar-icon-size; } .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. } + + @media (max-width: $breakpoint-small) { + margin-right: calc(var(--spacing-s) * -1) !important; + } } .vjs-chapters-button { @@ -659,8 +684,10 @@ $control-bar-icon-size: 0.8rem; .vjs-chromecast-button, .vjs-airplay-button { + margin-top: -3px; + margin-left: var(--spacing-xs); .vjs-icon-placeholder { - $chromecast-icon-size: 21px; + $chromecast-icon-size: 30px; width: $chromecast-icon-size; height: $chromecast-icon-size; } @@ -671,14 +698,16 @@ $control-bar-icon-size: 0.8rem; .vjs-control-bar { .vjs-button--play-previous:first-child, .vjs-play-control:first-child { - margin-left: var(--spacing-xs); + margin-left: var(--spacing-s); + margin-right: var(--spacing-xs); @media (max-width: $breakpoint-small) { margin-left: 0; } } .vjs-fullscreen-control { - margin-right: var(--spacing-xs); + margin-right: var(--spacing-s); + margin-left: var(--spacing-xs); @media (max-width: $breakpoint-small) { margin-right: 0; } diff --git a/ui/scss/component/_videojs.scss b/ui/scss/component/_videojs.scss index 7fd47a242..b1fcab315 100644 --- a/ui/scss/component/_videojs.scss +++ b/ui/scss/component/_videojs.scss @@ -32,6 +32,15 @@ $control-bar-icon-size: 0.8rem; } } } + @media (max-width: $breakpoint-small) { + .vjs-control { + margin-left: 0 !important; + margin-right: 0 !important; + } + .vjs-time-control { + padding-left: 0 !important; + } + } // Progress Bar .vjs-progress-control.vjs-control { @@ -126,7 +135,7 @@ $control-bar-icon-size: 0.8rem; .vjs-volume-control.vjs-volume-horizontal { transition: 0.1s; - margin-top: 2px; + margin-top: -2px !important; } } } @@ -195,7 +204,7 @@ $control-bar-icon-size: 0.8rem; border-radius: var(--border-radius); border: 2px solid var(--color-header-background); max-height: 20em; - margin-bottom: calc(var(--spacing-xxs) * -1); // Prevents accidental dismissal when the gap is hovered. + margin-bottom: -2px; // Prevents accidental dismissal when the gap is hovered. li { font-size: $control-bar-popup-font-size; @@ -366,10 +375,6 @@ button.vjs-big-play-button { .vjs-playback-rate { order: 13 !important; } -.vjs-chromecast-button, -.vjs-airplay-button { - order: 13 !important; -} .vjs-quality-selector { order: 14 !important; display: flex; @@ -379,12 +384,17 @@ button.vjs-big-play-button { line-height: 1rem !important; } } -.vjs-button--theater-mode { +.vjs-chromecast-button, +.vjs-airplay-button { order: 15 !important; } -.vjs-fullscreen-control { + +.vjs-button--theater-mode { order: 16 !important; } +.vjs-fullscreen-control { + order: 17 !important; +} // livestream player .livestreamPlayer {