aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-18 20:20:04 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-18 20:20:11 +0100
commit62ab565d1c772764c77dec0df75ce64b19c57119 (patch)
tree0b30fd73f78ad38ed54736212f9cc5e16bb074fb /client/src/sass
parent2a5518a667ef219e560214cdecd03a45d96aa6b1 (diff)
downloadPeerTube-62ab565d1c772764c77dec0df75ce64b19c57119.tar.gz
PeerTube-62ab565d1c772764c77dec0df75ce64b19c57119.tar.zst
PeerTube-62ab565d1c772764c77dec0df75ce64b19c57119.zip
Add play/pause bezels to the video player
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/player/bezels.scss42
-rw-r--r--client/src/sass/player/index.scss3
-rw-r--r--client/src/sass/player/upnext.scss3
3 files changed, 46 insertions, 2 deletions
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
new file mode 100644
index 000000000..f1b1dcb4a
--- /dev/null
+++ b/client/src/sass/player/bezels.scss
@@ -0,0 +1,42 @@
1@keyframes bezels-fadeout {
2 from {
3 opacity: 1;
4 }
5 to {
6 opacity: 0;
7 transform: scale(2);
8 }
9}
10
11.vjs-bezel {
12 position: absolute;
13 left: 50%;
14 top: 50%;
15 width: 52px;
16 height: 52px;
17 z-index: 19;
18 margin-left: -26px;
19 margin-top: -26px;
20 background: rgba(0,0,0,.5);
21 border-radius: 26px;
22 animation: bezels-fadeout .5s linear 1 normal forwards;
23 pointer-events: none;
24}
25
26.vjs-bezel-icon {
27 width: 36px;
28 height: 36px;
29 margin: 8px;
30
31 svg .vjs-svg-fill {
32 fill: #fff;
33 }
34}
35
36.video-js {
37
38 .vjs-bezel-content {
39
40 }
41
42} \ No newline at end of file
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 886a76536..58ce3ac96 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -3,4 +3,5 @@
3@import './context-menu'; 3@import './context-menu';
4@import './settings-menu'; 4@import './settings-menu';
5@import './spinner'; 5@import './spinner';
6@import './upnext'; \ No newline at end of file 6@import './upnext';
7@import './bezels.scss'; \ No newline at end of file
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index ecce22aa8..f1f2e0fe2 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -95,8 +95,9 @@ $browser-context: 16;
95 width: 98px; 95 width: 98px;
96 height: 98px; 96 height: 98px;
97 margin: -49px 0 0 -49px; 97 margin: -49px 0 0 -49px;
98 transition: stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1);
99 cursor: pointer; 98 cursor: pointer;
99
100 @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
100 } 101 }
101 102
102} 103}