From 27bc95867442c772841fb183a625bbda61dede51 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 7 Jun 2021 17:38:31 +0200 Subject: Bidi support --- client/src/sass/player/bezels.scss | 3 ++- client/src/sass/player/context-menu.scss | 5 ++-- client/src/sass/player/peertube-skin.scss | 41 ++++++++++++++++++------------- client/src/sass/player/settings-menu.scss | 16 ++++++------ client/src/sass/player/stats.scss | 2 +- client/src/sass/player/upnext.scss | 6 ++--- 6 files changed, 40 insertions(+), 33 deletions(-) (limited to 'client/src/sass/player') diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss index 853a030a3..b8c3325d0 100644 --- a/client/src/sass/player/bezels.scss +++ b/client/src/sass/player/bezels.scss @@ -9,13 +9,14 @@ } .vjs-bezel { + @include margin-left(-26px); + position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; z-index: 19; - margin-left: -26px; margin-top: -26px; background: rgba(0, 0, 0, .5); border-radius: 26px; diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index 1653dd2c4..501c68ffd 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -25,7 +25,7 @@ $context-menu-width: 350px; cursor: pointer; font-size: 1em; padding: 8px 16px; - text-align: left; + text-align: start; text-transform: none; &:hover { @@ -35,6 +35,8 @@ $context-menu-width: 350px; [class^='vjs-icon-'] { $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; + @include margin-right(0.8rem !important); + display: inline-flex; position: relative; top: 2px; @@ -43,7 +45,6 @@ $context-menu-width: 350px; height: 14px; background-color: #fff; mask-size: cover; - margin-right: 0.8rem !important; @each $icon in $icons { &[class$="-#{$icon}"] { diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index c010f7297..148992089 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -20,8 +20,9 @@ body { color: pvar(--embedForegroundColor); .vjs-dock-text { + @include padding-right(60px); + padding: $dock-padding; - padding-right: 60px; background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%); } @@ -34,11 +35,11 @@ body { font-size: 11px; .text::before { - margin-right: 4px; + @include margin-right(4px); } .text::after { - margin-left: 4px; + @include margin-left(4px); transform: scale(-1, 1); } } @@ -55,6 +56,8 @@ body { $big-play-width: 1.2em; $big-play-height: 1.2em; + @include margin-left(-($big-play-width / 2)); + outline: 0; font-size: 6em; @@ -66,7 +69,6 @@ body { width: $big-play-width; height: $big-play-height; line-height: $big-play-height; - margin-left: -($big-play-width / 2); margin-top: -($big-play-height / 2); transition: 0.4s opacity; @@ -157,7 +159,7 @@ body { text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); > button:first-child { - margin-left: $first-control-bar-element-margin-left; + @include margin-left($first-control-bar-element-margin-left); } .vjs-progress-control, @@ -188,11 +190,12 @@ body { } .vjs-progress-control { + @include margin-left($progress-margin); + position: absolute; z-index: 100; // On top of the progress bar bottom: 29px; width: calc(100% - (2 * #{$progress-margin})); - margin-left: $progress-margin; height: 14px; .vjs-slider { @@ -261,17 +264,19 @@ body { line-height: inherit; &.vjs-current-time { + @include margin-left(.5em); + font-size: $font-size; display: inline-block; padding: 0; - margin-left: .5em; .vjs-current-time-display { line-height: calc(#{$control-bar-height} - 1px); &::after { + @include margin(0, 1px, 0, 2px); + content: '/'; - margin: 0 1px 0 2px; } } } @@ -298,10 +303,11 @@ body { } .vjs-peertube { + @include margin-right(6px); + width: 100%; line-height: $control-bar-height; - text-align: right; - margin-right: 6px; + text-align: end; overflow: hidden; .vjs-peertube-displayed { @@ -323,7 +329,7 @@ body { .upload-speed-text, .peers-text, .http-fallback { - margin-right: 15px; + @include margin-right(15px); } .icon { @@ -340,7 +346,7 @@ body { .vjs-next-video, .vjs-previous-video { line-height: $control-bar-height; - text-align: right; + text-align: end; .icon { &.icon-next, @@ -415,8 +421,9 @@ body { } .vjs-volume-control { + @include margin(0, 5px, 0, 0); + width: 30px; - margin: 0 5px 0 0; } .vjs-volume-bar { @@ -490,9 +497,9 @@ body { .vjs-theater-control { @include disable-outline; + @include margin-right(1px); width: 37px; - margin-right: 1px; cursor: pointer; .vjs-icon-placeholder { @@ -512,9 +519,9 @@ body { .vjs-fullscreen-control { @include disable-outline; + @include margin-left($first-control-bar-element-margin-left); width: 37px; - margin-right: $first-control-bar-element-margin-left; .vjs-icon-placeholder { display: inline-block; @@ -641,12 +648,12 @@ body { .vjs-control-bar { > button:first-child { - margin-left: $first-control-bar-element-margin-left-small-width; + @include margin-left($first-control-bar-element-margin-left-small-width); } } .vjs-fullscreen-control { - margin-right: $first-control-bar-element-margin-left-small-width; + @include margin-right($first-control-bar-element-margin-left-small-width); } &.vjs-live { diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 74eee7d64..2183a7dbc 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -56,13 +56,13 @@ $setting-transition-easing: ease-out; } .vjs-settings-sub-menu-title { - text-align: left; + text-align: start; font-weight: $font-semibold; } .vjs-settings-sub-menu-value { width: 100%; - text-align: right; + text-align: end; small { font-size: 0.85em; @@ -132,7 +132,7 @@ $setting-transition-easing: ease-out; .vjs-settings-sub-menu-value::after { @include chevron-right(9px, 2px); - margin-left: 5px; + @include margin-left(5px); } } @@ -142,7 +142,7 @@ $setting-transition-easing: ease-out; .vjs-menu-item { outline: 0; font-weight: $font-semibold; - text-align: right; + text-align: end; padding: 5px 8px; &.vjs-back-button { @@ -150,12 +150,12 @@ $setting-transition-easing: ease-out; padding: 8px 8px 13px 12px; margin-bottom: 5px; border-bottom: 1px solid #808080; - text-align: left; + text-align: start; &::before { @include chevron-left(9px, 2px); - margin-right: 5px; + @include margin-right(5px); } } @@ -182,10 +182,10 @@ $setting-transition-easing: ease-out; width: 200px; .vjs-menu-item { - text-align: left; + text-align: start; .vjs-menu-item-text { - margin-left: 25px; + @include margin-left(25px); text-transform: capitalize; } } diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss index 6fcbcd969..c6388ed13 100644 --- a/client/src/sass/player/stats.scss +++ b/client/src/sass/player/stats.scss @@ -34,7 +34,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6); display: inline-block; font-weight: 600; padding: 0 .5em; - text-align: right; + text-align: end; width: 11.5em; white-space: nowrap; } diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss index 8c9a6f784..922a9674d 100644 --- a/client/src/sass/player/upnext.scss +++ b/client/src/sass/player/upnext.scss @@ -23,19 +23,17 @@ $browser-context: 16; } .vjs-upnext-top { + margin: 0 auto; width: 100%; position: absolute; - margin-left: auto; - margin-right: auto; bottom: 50%; margin-bottom: 60px; } .vjs-upnext-bottom { + margin: 0 auto; width: 100%; position: absolute; - margin-left: auto; - margin-right: auto; top: 50%; margin-top: 52px; } -- cgit v1.2.3