aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-28 16:41:07 +0200
committerChocobozzz <me@florianbigard.com>2021-04-28 17:53:57 +0200
commit931d3430184143ebd88e5243def6eb1d7acfdbf4 (patch)
tree909919bafd6fa8563d26d616c6257ebd0211c83c /client/src/sass/player
parent7d026caf683e42fd57a243a3b52a5e4f476fbb4e (diff)
downloadPeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.gz
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.zst
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.zip
Move to stylelint
Diffstat (limited to 'client/src/sass/player')
-rw-r--r--client/src/sass/player/context-menu.scss10
-rw-r--r--client/src/sass/player/index.scss6
-rw-r--r--client/src/sass/player/mobile.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss48
-rw-r--r--client/src/sass/player/playlist.scss12
-rw-r--r--client/src/sass/player/settings-menu.scss2
-rw-r--r--client/src/sass/player/spinner.scss2
-rw-r--r--client/src/sass/player/stats.scss5
-rw-r--r--client/src/sass/player/upnext.scss14
9 files changed, 52 insertions, 49 deletions
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 6bc66af0c..45cee3e77 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -31,26 +31,26 @@ $context-menu-width: 350px;
31 background-color: rgba(255, 255, 255, 0.2); 31 background-color: rgba(255, 255, 255, 0.2);
32 } 32 }
33 33
34 [class^="vjs-icon-"] { 34 [class^='vjs-icon-'] {
35 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
36
35 display: inline-flex; 37 display: inline-flex;
36 position: relative; 38 position: relative;
37 top: 2px; 39 top: 2px;
38 cursor: pointer; 40 cursor: pointer;
39 width: 14px; 41 width: 14px;
40 height: 14px; 42 height: 14px;
41 background-color: white; 43 background-color: #fff;
42 mask-size: cover; 44 mask-size: cover;
43 margin-right: 0.8rem !important; 45 margin-right: 0.8rem !important;
44 46
45 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
46
47 @each $icon in $icons { 47 @each $icon in $icons {
48 &[class$="-#{$icon}"] { 48 &[class$="-#{$icon}"] {
49 mask-image: url('#{$assets-path}/player/images/#{$icon}.svg'); 49 mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
50 } 50 }
51 } 51 }
52 52
53 &[class$="-tick-white"] { 53 &[class$='-tick-white'] {
54 float: right; 54 float: right;
55 margin: 0 !important; 55 margin: 0 !important;
56 } 56 }
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 502ee33ff..e674fa2f6 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -4,6 +4,6 @@
4@import './settings-menu'; 4@import './settings-menu';
5@import './spinner'; 5@import './spinner';
6@import './upnext'; 6@import './upnext';
7@import './bezels.scss'; 7@import './bezels';
8@import './playlist.scss'; 8@import './playlist';
9@import './stats.scss'; 9@import './stats';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index c2fa855ab..26066d218 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -13,4 +13,4 @@
13 } 13 }
14 } 14 }
15 } 15 }
16} \ No newline at end of file 16}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 81aacf1d7..8fe2e054d 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -52,12 +52,12 @@ body {
52 } 52 }
53 53
54 .vjs-big-play-button { 54 .vjs-big-play-button {
55 outline: 0;
56 font-size: 6em;
57
58 $big-play-width: 1.2em; 55 $big-play-width: 1.2em;
59 $big-play-height: 1.2em; 56 $big-play-height: 1.2em;
60 57
58 outline: 0;
59 font-size: 6em;
60
61 border: 2px solid #fff; 61 border: 2px solid #fff;
62 border-radius: 100%; 62 border-radius: 100%;
63 63
@@ -72,7 +72,7 @@ body {
72 72
73 &::-moz-focus-inner { 73 &::-moz-focus-inner {
74 border: 0; 74 border: 0;
75 padding: 0 75 padding: 0;
76 } 76 }
77 77
78 .vjs-icon-placeholder::before { 78 .vjs-icon-placeholder::before {
@@ -82,8 +82,9 @@ body {
82 background-image: url('#{$assets-path}/player/images/big-play-button.svg'); 82 background-image: url('#{$assets-path}/player/images/big-play-button.svg');
83 } 83 }
84 84
85 &.focus-visible, &:hover { 85 &.focus-visible,
86 background-color: var(--mainColor, dimgray); 86 &:hover {
87 background-color: var(--mainColor, #696969);
87 } 88 }
88 89
89 } 90 }
@@ -91,16 +92,19 @@ body {
91 // Small effect when we click on the play button 92 // Small effect when we click on the play button
92 &.vjs-has-big-play-button-clicked { 93 &.vjs-has-big-play-button-clicked {
93 94
94 .vjs-big-play-button, .vjs-poster { 95 .vjs-big-play-button,
96 .vjs-poster {
95 display: block; 97 display: block;
96 visibility: hidden; 98 visibility: hidden;
97 99
98 &.vjs-big-play-button, &.vjs-big-play-button::before { 100 &.vjs-big-play-button,
101 &.vjs-big-play-button::before {
99 opacity: 0; 102 opacity: 0;
100 transition: visibility 0.2s, opacity 0.2s; 103 transition: visibility 0.2s, opacity 0.2s;
101 } 104 }
102 105
103 &.vjs-poster, &.vjs-poster::before { 106 &.vjs-poster,
107 &.vjs-poster::before {
104 opacity: 0; 108 opacity: 0;
105 transition: visibility 0.3s, opacity 0.3s; 109 transition: visibility 0.3s, opacity 0.3s;
106 transition-delay: 0.05s; 110 transition-delay: 0.05s;
@@ -165,8 +169,7 @@ body {
165 .vjs-fullscreen-control, 169 .vjs-fullscreen-control,
166 .vjs-peertube-link, 170 .vjs-peertube-link,
167 .vjs-theater-control, 171 .vjs-theater-control,
168 .vjs-settings 172 .vjs-settings {
169 {
170 color: pvar(--embedForegroundColor) !important; 173 color: pvar(--embedForegroundColor) !important;
171 174
172 opacity: $primary-foreground-opacity; 175 opacity: $primary-foreground-opacity;
@@ -217,7 +220,8 @@ body {
217 } 220 }
218 221
219 .vjs-load-progress { 222 .vjs-load-progress {
220 &, & div { 223 &,
224 div {
221 background: rgba(255, 255, 255, .2); 225 background: rgba(255, 255, 255, .2);
222 } 226 }
223 } 227 }
@@ -266,7 +270,7 @@ body {
266 line-height: calc(#{$control-bar-height} - 1px); 270 line-height: calc(#{$control-bar-height} - 1px);
267 271
268 &::after { 272 &::after {
269 content: "/"; 273 content: '/';
270 margin: 0 1px 0 2px; 274 margin: 0 1px 0 2px;
271 } 275 }
272 } 276 }
@@ -308,11 +312,17 @@ body {
308 display: none; 312 display: none;
309 } 313 }
310 314
311 .download-speed-number, .upload-speed-number, .peers-number, .http-fallback { 315 .download-speed-number,
316 .upload-speed-number,
317 .peers-number,
318 .http-fallback {
312 font-weight: $font-semibold; 319 font-weight: $font-semibold;
313 } 320 }
314 321
315 .download-speed-text, .upload-speed-text, .peers-text, .http-fallback { 322 .download-speed-text,
323 .upload-speed-text,
324 .peers-text,
325 .http-fallback {
316 margin-right: 15px; 326 margin-right: 15px;
317 } 327 }
318 328
@@ -336,10 +346,8 @@ body {
336 &.icon-next, 346 &.icon-next,
337 &.icon-previous { 347 &.icon-previous {
338 mask-image: url('#{$assets-path}/player/images/next.svg'); 348 mask-image: url('#{$assets-path}/player/images/next.svg');
339 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg'); 349 background-color: #fff;
340 background-color: white;
341 mask-size: cover; 350 mask-size: cover;
342 -webkit-mask-size: cover;
343 width: 11px; 351 width: 11px;
344 height: 11px; 352 height: 11px;
345 margin-top: -2px; 353 margin-top: -2px;
@@ -410,7 +418,7 @@ body {
410 } 418 }
411 419
412 .vjs-volume-bar { 420 .vjs-volume-bar {
413 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat; 421 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
414 background-size: 22px 14px; 422 background-size: 22px 14px;
415 height: 100%; 423 height: 100%;
416 width: 100%; 424 width: 100%;
@@ -421,7 +429,7 @@ body {
421 top: 3px; 429 top: 3px;
422 430
423 .vjs-volume-level { 431 .vjs-volume-level {
424 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat; 432 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
425 background-size: 22px 14px; 433 background-size: 22px 14px;
426 max-width: 22px; 434 max-width: 22px;
427 max-height: 14px; 435 max-height: 14px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index ebbed02d9..8558fc837 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -44,10 +44,8 @@ $playlist-menu-width: 350px;
44 width: 20px; 44 width: 20px;
45 height: 20px; 45 height: 20px;
46 mask-image: url('#{$assets-path}/images/feather/x.svg'); 46 mask-image: url('#{$assets-path}/images/feather/x.svg');
47 -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg'); 47 background-color: #fff;
48 background-color: white;
49 mask-size: cover; 48 mask-size: cover;
50 -webkit-mask-size: cover;
51 } 49 }
52 } 50 }
53} 51}
@@ -90,10 +88,8 @@ $playlist-menu-width: 350px;
90 width: 22px; 88 width: 22px;
91 height: 22px; 89 height: 22px;
92 mask-image: url('#{$assets-path}/images/feather/list.svg'); 90 mask-image: url('#{$assets-path}/images/feather/list.svg');
93 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg'); 91 background-color: #fff;
94 background-color: white;
95 mask-size: cover; 92 mask-size: cover;
96 -webkit-mask-size: cover;
97 margin-bottom: 3px; 93 margin-bottom: 3px;
98} 94}
99 95
@@ -133,9 +129,9 @@ $playlist-menu-width: 350px;
133 } 129 }
134 130
135 .item-player { 131 .item-player {
136 display: none;
137
138 @include play-icon(20px, 16px); 132 @include play-icon(20px, 16px);
133
134 display: none;
139 } 135 }
140 136
141 &.vjs-selected { 137 &.vjs-selected {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 09c872ef7..74eee7d64 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -149,7 +149,7 @@ $setting-transition-easing: ease-out;
149 background-color: inherit; 149 background-color: inherit;
150 padding: 8px 8px 13px 12px; 150 padding: 8px 8px 13px 12px;
151 margin-bottom: 5px; 151 margin-bottom: 5px;
152 border-bottom: 1px solid grey; 152 border-bottom: 1px solid #808080;
153 text-align: left; 153 text-align: left;
154 154
155 &::before { 155 &::before {
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index a6af8da33..94f4d1008 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -51,4 +51,4 @@
51 opacity: 1; 51 opacity: 1;
52 } 52 }
53 } 53 }
54} \ No newline at end of file 54}
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 953f6032a..6fcbcd969 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -6,6 +6,8 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
6.video-js { 6.video-js {
7 7
8 .vjs-stats-content { 8 .vjs-stats-content {
9 @include transition(opacity 0.1s);
10
9 position: absolute; 11 position: absolute;
10 background-color: $contextmenu-background-color; 12 background-color: $contextmenu-background-color;
11 padding: 5px 0; 13 padding: 5px 0;
@@ -18,8 +20,6 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
18 z-index: 64; 20 z-index: 64;
19 font-size: 12px; 21 font-size: 12px;
20 line-height: 1.2; 22 line-height: 1.2;
21
22 @include transition(opacity 0.1s);
23 } 23 }
24 24
25 .vjs-stats-close { 25 .vjs-stats-close {
@@ -38,5 +38,4 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
38 width: 11.5em; 38 width: 11.5em;
39 white-space: nowrap; 39 white-space: nowrap;
40 } 40 }
41
42} 41}
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 7614bb3b6..8c9a6f784 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -11,15 +11,15 @@ $browser-context: 16;
11.video-js { 11.video-js {
12 12
13 .vjs-upnext-content { 13 .vjs-upnext-content {
14 @include transition(opacity 0.1s);
15
14 font-size: 1.8em; 16 font-size: 1.8em;
15 pointer-events: auto; 17 pointer-events: auto;
16 position: absolute; 18 position: absolute;
17 top: 0; 19 top: 0;
18 bottom: 0; 20 bottom: 0;
19 background: rgba(0,0,0,0.6); 21 background: rgba(0, 0, 0, 0.6);
20 width: 100%; 22 width: 100%;
21
22 @include transition(opacity 0.1s);
23 } 23 }
24 24
25 .vjs-upnext-top { 25 .vjs-upnext-top {
@@ -77,7 +77,7 @@ $browser-context: 16;
77 float: none; 77 float: none;
78 padding: 10px !important; 78 padding: 10px !important;
79 font-size: 16px !important; 79 font-size: 16px !important;
80 border: none; 80 border: 0;
81 } 81 }
82 82
83 .vjs-upnext-cancel-button, 83 .vjs-upnext-cancel-button,
@@ -86,7 +86,7 @@ $browser-context: 16;
86 } 86 }
87 87
88 .vjs-upnext-cancel-button:hover { 88 .vjs-upnext-cancel-button:hover {
89 background-color: rgba(255,255,255,0.25); 89 background-color: rgba(255, 255, 255, 0.25);
90 border-radius: 2px; 90 border-radius: 2px;
91 } 91 }
92 92
@@ -95,6 +95,8 @@ $browser-context: 16;
95 } 95 }
96 96
97 .vjs-upnext-autoplay-icon { 97 .vjs-upnext-autoplay-icon {
98 @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
99
98 position: absolute; 100 position: absolute;
99 top: 50%; 101 top: 50%;
100 left: 50%; 102 left: 50%;
@@ -102,8 +104,6 @@ $browser-context: 16;
102 height: 98px; 104 height: 98px;
103 margin: -49px 0 0 -49px; 105 margin: -49px 0 0 -49px;
104 cursor: pointer; 106 cursor: pointer;
105
106 @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
107 } 107 }
108 108
109} 109}