aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-17 16:49:33 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-17 16:49:33 +0100
commit3bcb4fd74190aecb22c39a88772e80b223a87472 (patch)
treeea57f42187dd8e5106908bd9e5503d73fe3ddf64 /client/src/sass
parentd6ed9ccc819eba813b3bf8e1f8829117d43382b2 (diff)
downloadPeerTube-3bcb4fd74190aecb22c39a88772e80b223a87472.tar.gz
PeerTube-3bcb4fd74190aecb22c39a88772e80b223a87472.tar.zst
PeerTube-3bcb4fd74190aecb22c39a88772e80b223a87472.zip
add 'up next' screen on autoplay
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/player/index.scss3
-rw-r--r--client/src/sass/player/upnext.scss108
2 files changed, 110 insertions, 1 deletions
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index e4a315d1f..886a76536 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -2,4 +2,5 @@
2@import './mobile'; 2@import './mobile';
3@import './context-menu'; 3@import './context-menu';
4@import './settings-menu'; 4@import './settings-menu';
5@import './spinner'; \ No newline at end of file 5@import './spinner';
6@import './upnext'; \ No newline at end of file
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
new file mode 100644
index 000000000..ecce22aa8
--- /dev/null
+++ b/client/src/sass/player/upnext.scss
@@ -0,0 +1,108 @@
1$browser-context: 16;
2
3@function em($pixels, $context: $browser-context) {
4 @return #{$pixels/$context}em;
5}
6
7@mixin transition($string: $transition--default) {
8 transition: $string;
9}
10
11.video-js {
12
13 .vjs-upnext-content {
14 font-size: 1.8em;
15 pointer-events: auto;
16 position: absolute;
17 top: 0;
18 bottom: 0;
19 background: rgba(0,0,0,0.6);
20 width: 100%;
21
22 @include transition(opacity 0.1s);
23 }
24
25 .vjs-upnext-top {
26 width: 100%;
27 position: absolute;
28 margin-left: auto;
29 margin-right: auto;
30 bottom: 50%;
31 margin-bottom: 60px;
32 }
33
34 .vjs-upnext-bottom {
35 width: 100%;
36 position: absolute;
37 margin-left: auto;
38 margin-right: auto;
39 top: 50%;
40 margin-top: 52px;
41 }
42
43 .vjs-upnext-cancel {
44 display: block;
45 float: none;
46 text-align: center;
47 }
48
49 .vjs-upnext-headtext {
50 display: block;
51 font-size: 14px;
52 text-align: center;
53 padding-bottom: 7px;
54 }
55
56 .vjs-upnext-title {
57 display: block;
58 padding: 10px 10px 2px;
59 text-align: center;
60 font-size: 22px;
61 font-weight: 600;
62 overflow: hidden;
63 white-space: nowrap;
64 word-wrap: normal;
65 text-overflow: ellipsis;
66 }
67
68 .vjs-upnext-cancel-button {
69 cursor: pointer;
70 display: inline-block;
71 float: none;
72 padding: 10px !important;
73 font-size: 16px !important;
74 border: none;
75 }
76
77 .vjs-upnext-cancel-button,
78 .vjs-upnext-cancel-button:focus {
79 outline: 0;
80 }
81
82 .vjs-upnext-cancel-button:hover {
83 background-color: rgba(255,255,255,0.25);
84 border-radius: 2px;
85 }
86
87 &.vjs-no-flex .vjs-upnext-content {
88 padding-bottom: 1em;
89 }
90
91 .vjs-upnext-autoplay-icon {
92 position: absolute;
93 top: 50%;
94 left: 50%;
95 width: 98px;
96 height: 98px;
97 margin: -49px 0 0 -49px;
98 transition: stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1);
99 cursor: pointer;
100 }
101
102}
103
104.video-js.vjs-upnext--showing {
105 .vjs-control-bar {
106 z-index: 1;
107 }
108}