]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/sass/player/upnext.scss
Fix upnext, refactor avatar menu, add to playlist overflow
[github/Chocobozzz/PeerTube.git] / client / src / sass / player / upnext.scss
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-suspended,
44 .vjs-upnext-cancel {
45 display: block;
46 float: none;
47 text-align: center;
48 }
49
50 .vjs-upnext-suspended {
51 font-size: 50%;
52 margin-top: 1rem;
53 }
54
55 .vjs-upnext-headtext {
56 display: block;
57 font-size: 14px;
58 text-align: center;
59 padding-bottom: 7px;
60 }
61
62 .vjs-upnext-title {
63 display: block;
64 padding: 10px 10px 2px;
65 text-align: center;
66 font-size: 22px;
67 font-weight: 600;
68 overflow: hidden;
69 white-space: nowrap;
70 word-wrap: normal;
71 text-overflow: ellipsis;
72 }
73
74 .vjs-upnext-cancel-button {
75 cursor: pointer;
76 display: inline-block;
77 float: none;
78 padding: 10px !important;
79 font-size: 16px !important;
80 border: none;
81 }
82
83 .vjs-upnext-cancel-button,
84 .vjs-upnext-cancel-button:focus {
85 outline: 0;
86 }
87
88 .vjs-upnext-cancel-button:hover {
89 background-color: rgba(255,255,255,0.25);
90 border-radius: 2px;
91 }
92
93 &.vjs-no-flex .vjs-upnext-content {
94 padding-bottom: 1em;
95 }
96
97 .vjs-upnext-autoplay-icon {
98 position: absolute;
99 top: 50%;
100 left: 50%;
101 width: 98px;
102 height: 98px;
103 margin: -49px 0 0 -49px;
104 cursor: pointer;
105
106 @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
107 }
108
109 }
110
111 .video-js.vjs-upnext--showing {
112 .vjs-control-bar {
113 z-index: 1;
114 }
115 }