X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fplayer%2Fpeertube-skin.scss;h=4bf48a5704d546b077b6e47d23056a9f1958565d;hb=8d5e65349deebd499c0be10fe02d535a77d58ddb;hp=75c6a0e5cbcd4b859367ced6d3934c41acd4c287;hpb=4555697f216e894e5651d8f6d3d971e7d0c17d17;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 75c6a0e5c..4bf48a570 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -2,6 +2,12 @@ @import '_mixins'; @import './_player-variables'; +body { + --embedForegroundColor: #{$primary-foreground-color}; + + --embedBigPlayBackgroundColor: #{$primary-background-color}; +} + @mixin big-play-button-triangle-size($triangle-size) { width: $triangle-size; height: $triangle-size; @@ -10,9 +16,8 @@ } .video-js.vjs-peertube-skin { - font-size: $font-size; - color: $primary-foreground-color; + color: var(--embedForegroundColor); .vjs-dock-text { padding-right: 10px; @@ -21,16 +26,11 @@ .vjs-dock-description { font-size: 11px; - &::before, &::after { - display: inline-block; - content: '\1F308'; - } - - &::before { + .text::before { margin-right: 4px; } - &::after { + .text::after { margin-left: 4px; transform: scale(-1, 1); } @@ -55,7 +55,7 @@ $big-play-width: 1.2em; $big-play-height: 1.2em; - border: 6px solid #fff; + border: 4px solid #fff; border-radius: 100%; left: 50%; @@ -114,7 +114,7 @@ .vjs-control-bar, .vjs-big-play-button, .vjs-settings-dialog { - background-color: rgba($primary-background-color, 0.5); + background-color: var(--embedBigPlayBackgroundColor); } .vjs-poster { @@ -139,7 +139,8 @@ .vjs-theater-control, .vjs-settings { - color: $primary-foreground-color !important; + color: var(--embedForegroundColor) !important; + opacity: $primary-foreground-opacity; transition: opacity .1s; @@ -151,7 +152,7 @@ .vjs-current-time, .vjs-duration, .vjs-peertube { - color: $primary-foreground-color; + color: var(--embedForegroundColor); opacity: $primary-foreground-opacity; } @@ -171,7 +172,7 @@ transition: none; .vjs-play-progress { - background: $primary-foreground-color; + background: var(--embedForegroundColor); // Not display the circle if the progress is not hovered &::before { @@ -196,7 +197,7 @@ } .vjs-progress-control:hover .vjs-slider, - .vjs-slider.vjs-sliding { + .vjs-progress-control .vjs-slider.vjs-sliding { height: 5px; .vjs-play-progress::before { @@ -258,11 +259,11 @@ display: none; } - .download-speed-number, .upload-speed-number, .peers-number { + .download-speed-number, .upload-speed-number, .peers-number, .http-fallback { font-weight: $font-semibold; } - .download-speed-text, .upload-speed-text, .peers-text { + .download-speed-text, .upload-speed-text, .peers-text, .http-fallback { margin-right: 15px; } @@ -350,6 +351,11 @@ max-height: 14px; height: 100%; } + + &:focus { + text-shadow: none; + box-shadow: none; + } } .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, @@ -401,6 +407,7 @@ width: 37px; margin-right: 1px; + cursor: pointer; .vjs-icon-placeholder { transition: transform 0.2s ease; @@ -477,7 +484,7 @@ .vjs-big-play-button { font-size: 5em; - border-width: 5px; + border-width: 3px; .vjs-icon-placeholder::before { @include big-play-button-triangle-size(32px); @@ -492,17 +499,13 @@ .vjs-big-play-button { font-size: 4.5em; - border-width: 4.5px; + border-width: 2.5px; .vjs-icon-placeholder::before { @include big-play-button-triangle-size(27px); } } - .vjs-playback-rate { - display: none; - } - .vjs-peertube { padding: 0 !important; @@ -519,7 +522,7 @@ .vjs-big-play-button { font-size: 3em; - border-width: 3px; + border-width: 2px; .vjs-icon-placeholder::before { @include big-play-button-triangle-size(20px); @@ -603,4 +606,4 @@ .vjs-error-display { display: block; } -} \ No newline at end of file +}