diff options
| author | David Yip <yipdw@member.fsf.org> | 2018-11-27 15:27:21 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-11-27 15:27:21 -0600 |
| commit | 74a281475a96be66bfa6a14ed9108f41ac451856 (patch) | |
| tree | 4b5725bf510692851cf182133c29ab42947e3d5b /app/javascript/flavours/glitch/styles | |
| parent | 33be091f506242b136b0d4a65cf06a0babc4d757 (diff) | |
| parent | 3b707bdc12cd6d727e712cbd8a0055fad0ea50e8 (diff) | |
Merge pull request #829 from ThibG/glitch-soc/features/volume-sliders
[Glitch] Volume sliders for videos
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/media.scss | 57 |
1 files changed, 56 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 40a144de4..e8011bde9 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -277,6 +277,19 @@ z-index: 100; } +.detailed, +.fullscreen { + .video-player__volume__current, + .video-player__volume::before { + bottom: 27px; + } + + .video-player__volume__handle { + bottom: 23px; + } + +} + .video-player { overflow: hidden; position: relative; @@ -432,7 +445,7 @@ &__time-current { color: $white; - margin-left: 10px; + margin-left: 60px; } &__time-sep { @@ -445,6 +458,48 @@ color: $white; } + &__volume { + cursor: pointer; + height: 24px; + display: inline; + + &::before { + content: ""; + width: 50px; + background: rgba($white, 0.35); + border-radius: 4px; + display: block; + position: absolute; + height: 4px; + left: 70px; + bottom: 20px; + } + + &__current { + display: block; + position: absolute; + height: 4px; + border-radius: 4px; + left: 70px; + bottom: 20px; + background: lighten($ui-highlight-color, 8%); + } + + &__handle { + position: absolute; + z-index: 3; + border-radius: 50%; + width: 12px; + height: 12px; + bottom: 16px; + left: 70px; + transition: opacity .1s ease; + background: lighten($ui-highlight-color, 8%); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + pointer-events: none; + } + } + &__seek { cursor: pointer; height: 24px; |