aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
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
parent7d026caf683e42fd57a243a3b52a5e4f476fbb4e (diff)
downloadPeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.gz
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.zst
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.zip
Move to stylelint
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss57
-rw-r--r--client/src/sass/bootstrap.scss40
-rw-r--r--client/src/sass/include/_actor.scss2
-rw-r--r--client/src/sass/include/_bootstrap.scss2
-rw-r--r--client/src/sass/include/_fonts.scss4
-rw-r--r--client/src/sass/include/_miniature.scss14
-rw-r--r--client/src/sass/include/_mixins.scss116
-rw-r--r--client/src/sass/include/_variables.scss6
-rw-r--r--client/src/sass/ng-select.scss9
-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
-rw-r--r--client/src/sass/primeng-custom.scss3
19 files changed, 200 insertions, 154 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index fa9c0d992..89b6f0c4c 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -8,9 +8,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
8 8
9@import './bootstrap'; 9@import './bootstrap';
10@import './primeng-custom'; 10@import './primeng-custom';
11@import './ng-select.scss'; 11@import './ng-select';
12 12
13@import './classes.scss'; 13@import './classes';
14 14
15[hidden] { 15[hidden] {
16 display: none !important; 16 display: none !important;
@@ -89,14 +89,16 @@ input.readonly {
89 background-color: pvar(--inputBackgroundColor) !important; 89 background-color: pvar(--inputBackgroundColor) !important;
90} 90}
91 91
92input, textarea { 92input,
93textarea {
93 outline: none; 94 outline: none;
94 color: pvar(--inputForegroundColor); 95 color: pvar(--inputForegroundColor);
95} 96}
96 97
97button { 98button {
98 background: unset;
99 @include disable-outline; 99 @include disable-outline;
100
101 background: unset;
100} 102}
101 103
102label { 104label {
@@ -121,12 +123,12 @@ code {
121 margin-top: 5px; 123 margin-top: 5px;
122} 124}
123 125
124.input-error 126.input-error,
125my-input-toggle-hidden ::ng-deep input { 127my-input-toggle-hidden ::ng-deep input {
126 border-color: $red !important; 128 border-color: $red !important;
127} 129}
128 130
129.fullWidth { 131.full-width {
130 width: 100%; 132 width: 100%;
131 margin-left: auto; 133 margin-left: auto;
132 margin-right: auto; 134 margin-right: auto;
@@ -134,7 +136,7 @@ my-input-toggle-hidden ::ng-deep input {
134} 136}
135 137
136.glyphicon-black { 138.glyphicon-black {
137 color: black; 139 color: #000;
138} 140}
139 141
140.row { 142.row {
@@ -184,26 +186,26 @@ my-input-toggle-hidden ::ng-deep input {
184 width: 100%; 186 width: 100%;
185 } 187 }
186 188
187 &.lock-scroll .main-row > router-outlet + * { 189 &.lock-scroll .main-row > router-outlet + * { /* stylelint-disable-line selector-max-compound-selectors */
188 // Lock and hide body scrollbars 190 // Lock and hide body scrollbars
189 position: fixed; 191 position: fixed;
190 192
191 // Lock and hide sub-menu scrollbars 193 // Lock and hide sub-menu scrollbars
192 .sub-menu { 194 .sub-menu { /* stylelint-disable-line */
193 overflow-x: hidden; 195 overflow-x: hidden;
194 } 196 }
195 } 197 }
196} 198}
197 199
198.title-page { 200.title-page {
201 @include disable-default-a-behaviour;
202
199 opacity: 0.6; 203 opacity: 0.6;
200 color: pvar(--mainForegroundColor); 204 color: pvar(--mainForegroundColor);
201 font-size: 16px; 205 font-size: 16px;
202 display: inline-block; 206 display: inline-block;
203 margin-right: 55px; 207 margin-right: 55px;
204 font-weight: $font-semibold; 208 font-weight: $font-semibold;
205 @include disable-default-a-behaviour;
206
207 border-bottom: 2px solid transparent; 209 border-bottom: 2px solid transparent;
208 210
209 &.title-page-single { 211 &.title-page-single {
@@ -219,13 +221,19 @@ my-input-toggle-hidden ::ng-deep input {
219 font-size: 125%; 221 font-size: 125%;
220 } 222 }
221 223
222 &:hover, &:active, &:focus { 224 &:hover,
225 &:active,
226 &:focus {
223 color: pvar(--mainForegroundColor); 227 color: pvar(--mainForegroundColor);
224 } 228 }
225 229
226 &.active, &:hover, &:active, &:focus, &.title-page-single { 230 &.active,
231 &:hover,
232 &:active,
233 &:focus,
234 &.title-page-single {
227 opacity: 1; 235 opacity: 1;
228 outline: 0px hidden !important; 236 outline: 0 hidden !important;
229 } 237 }
230 238
231 @media screen and (max-width: $mobile-view) { 239 @media screen and (max-width: $mobile-view) {
@@ -262,7 +270,10 @@ my-input-toggle-hidden ::ng-deep input {
262 background-color: pvar(--submenuBackgroundColor); 270 background-color: pvar(--submenuBackgroundColor);
263 } 271 }
264 272
265 &.active, &:hover, &:active, &:focus { 273 &.active,
274 &:hover,
275 &:active,
276 &:focus {
266 opacity: 1; 277 opacity: 1;
267 } 278 }
268 } 279 }
@@ -275,8 +286,13 @@ my-input-toggle-hidden ::ng-deep input {
275 286
276// In tables, don't have a hover different background 287// In tables, don't have a hover different background
277table { 288table {
278 .action-button-edit, .action-button-delete { 289 .action-button-edit,
279 &:hover, &:active, &:focus, &[disabled], &.disabled { 290 .action-button-delete {
291 &:hover,
292 &:active,
293 &:focus,
294 &[disabled],
295 &.disabled {
280 background-color: $grey-background-color !important; 296 background-color: $grey-background-color !important;
281 } 297 }
282 } 298 }
@@ -329,15 +345,12 @@ ngx-loading-bar {
329 345
330@media screen and (max-width: #{breakpoint(xxl)}) { 346@media screen and (max-width: #{breakpoint(xxl)}) {
331 .main-col { 347 .main-col {
332 & { 348 --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
333 --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2}; 349 --videosHorizontalMarginContent: 30px;
334 }
335 350
336 &.expanded { 351 &.expanded {
337 --horizontalMarginContent: #{$expanded-horizontal-margins / 2}; 352 --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
338 } 353 }
339
340 --videosHorizontalMarginContent: 30px;
341 } 354 }
342} 355}
343 356
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0ab6230c8..548e55e1e 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -6,7 +6,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
6 6
7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d 7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
8.glyphicon-refresh-animate { 8.glyphicon-refresh-animate {
9 animation: spin .7s infinite linear; 9 animation: spin 0.7s infinite linear;
10} 10}
11 11
12.glyphicon-duplicate { 12.glyphicon-duplicate {
@@ -25,6 +25,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
25 from { 25 from {
26 transform: scale(1) rotate(0deg); 26 transform: scale(1) rotate(0deg);
27 } 27 }
28
28 to { 29 to {
29 transform: scale(1) rotate(360deg); 30 transform: scale(1) rotate(360deg);
30 } 31 }
@@ -70,7 +71,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
70 &.active { 71 &.active {
71 color: pvar(--mainBackgroundColor) !important; 72 color: pvar(--mainBackgroundColor) !important;
72 background-color: pvar(--mainHoverColor); 73 background-color: pvar(--mainHoverColor);
73 opacity: .9; 74 opacity: 0.9;
74 } 75 }
75 76
76 &:active { 77 &:active {
@@ -97,9 +98,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
97} 98}
98 99
99@media screen and (min-width: #{breakpoint(md)}) { 100@media screen and (min-width: #{breakpoint(md)}) {
100 .modal:before { 101 .modal::before {
101 vertical-align: middle; 102 vertical-align: middle;
102 content: " "; 103 content: ' ';
103 height: 100%; 104 height: 100%;
104 } 105 }
105 106
@@ -123,7 +124,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
123 } 124 }
124 125
125 .modal-header { 126 .modal-header {
126 border-bottom: none; 127 border-bottom: 0;
127 margin-bottom: 5px; 128 margin-bottom: 5px;
128 129
129 .modal-title { 130 .modal-title {
@@ -140,10 +141,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
140 141
141 margin: 0; 142 margin: 0;
142 padding: 0; 143 padding: 0;
143 opacity: .5; 144 opacity: 0.5;
144 145
145 &[iconName="cross"] { 146 &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
146 @include icon(16px); 147 @include icon(16px);
148
147 top: -3px; 149 top: -3px;
148 } 150 }
149 } 151 }
@@ -154,7 +156,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
154 text-align: right; 156 text-align: right;
155 157
156 > .peertube-button:not(:first-child) { 158 > .peertube-button:not(:first-child) {
157 margin-left: 10px 159 margin-left: 10px;
158 } 160 }
159 } 161 }
160} 162}
@@ -168,7 +170,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
168 170
169// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll 171// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
170@media (hover: none) and (pointer: coarse) { 172@media (hover: none) and (pointer: coarse) {
171 .modal-open, .menu-open { 173 .modal-open,
174 .menu-open {
172 overflow: hidden !important; 175 overflow: hidden !important;
173 } 176 }
174 177
@@ -176,7 +179,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
176 .menu-open { 179 .menu-open {
177 .main-col { 180 .main-col {
178 &::before { 181 &::before {
179 background-color: black; 182 background-color: #000;
180 width: 100vw; 183 width: 100vw;
181 height: 100vh; 184 height: 100vh;
182 opacity: 0.75; 185 opacity: 0.75;
@@ -204,7 +207,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
204 .nav-link { 207 .nav-link {
205 opacity: 0.6 !important; 208 opacity: 0.6 !important;
206 209
207 &.active, &:hover, &:active, &:focus { 210 &.active,
211 &:hover,
212 &:active,
213 &:focus {
208 opacity: 1 !important; 214 opacity: 1 !important;
209 } 215 }
210 } 216 }
@@ -221,7 +227,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
221 227
222 color: pvar(--mainForegroundColor); 228 color: pvar(--mainForegroundColor);
223 font-weight: $font-semibold; 229 font-weight: $font-semibold;
224 border: none; 230 border: 0;
225 border-bottom: 2px solid transparent; 231 border-bottom: 2px solid transparent;
226 opacity: 0.6; 232 opacity: 0.6;
227 233
@@ -231,7 +237,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
231 border-bottom-color: pvar(--mainColor); 237 border-bottom-color: pvar(--mainColor);
232 } 238 }
233 239
234 &.active, &:hover, &:active, &:focus { 240 &.active,
241 &:hover,
242 &:active,
243 &:focus {
235 opacity: 1; 244 opacity: 1;
236 } 245 }
237} 246}
@@ -314,9 +323,10 @@ ngb-tooltip-window {
314} 323}
315 324
316.input-group { 325.input-group {
317 & > .form-control { 326 > .form-control {
318 flex: initial; 327 flex: initial;
319 } 328 }
329
320 input.form-control { 330 input.form-control {
321 width: unset !important; 331 width: unset !important;
322 flex-grow: 1; 332 flex-grow: 1;
@@ -366,7 +376,7 @@ ngb-tooltip-window {
366 border: 1px solid #eee; 376 border: 1px solid #eee;
367 border-radius: .25rem; 377 border-radius: .25rem;
368 378
369 & > label { 379 > label {
370 position: relative; 380 position: relative;
371 top: -5px; 381 top: -5px;
372 left: -10px; 382 left: -10px;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index ccfd73ecd..38bd90ae6 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -17,7 +17,7 @@
17@mixin show-more-description { 17@mixin show-more-description {
18 color: pvar(--mainColor); 18 color: pvar(--mainColor);
19 cursor: pointer; 19 cursor: pointer;
20 margin: 10px auto 45px auto; 20 margin: 10px auto 45px;
21} 21}
22 22
23@mixin avatar-row-responsive ($img-margin, $grey-font-size) { 23@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index b1a23be6b..d9e5efc02 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,4 +1,4 @@
1@import "./_bootstrap-variables"; 1@import './_bootstrap-variables';
2 2
3@import '~bootstrap/scss/functions'; 3@import '~bootstrap/scss/functions';
4@import '~bootstrap/scss/variables'; 4@import '~bootstrap/scss/variables';
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index 6313736e0..514261d01 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -1,4 +1,4 @@
1@font-face{ 1@font-face {
2 font-family: 'Source Sans Pro'; 2 font-family: 'Source Sans Pro';
3 font-weight: 200 900; 3 font-weight: 200 900;
4 font-style: normal; 4 font-style: normal;
@@ -7,7 +7,7 @@
7 src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2'); 7 src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2');
8} 8}
9 9
10@font-face{ 10@font-face {
11 font-family: 'Source Sans Pro'; 11 font-family: 'Source Sans Pro';
12 font-weight: 200 900; 12 font-weight: 200 900;
13 font-style: italic; 13 font-style: italic;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 3b86f29b4..fb504906c 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -21,12 +21,12 @@
21} 21}
22 22
23@mixin miniature-thumbnail { 23@mixin miniature-thumbnail {
24 @include disable-outline;
25
26 $play-overlay-transition: 0.2s ease; 24 $play-overlay-transition: 0.2s ease;
27 $play-overlay-height: 26px; 25 $play-overlay-height: 26px;
28 $play-overlay-width: 18px; 26 $play-overlay-width: 18px;
29 27
28 @include disable-outline;
29
30 display: flex; 30 display: flex;
31 flex-direction: column; 31 flex-direction: column;
32 position: relative; 32 position: relative;
@@ -47,7 +47,8 @@
47 opacity: 0; 47 opacity: 0;
48 background-color: rgba(0, 0, 0, 0.3); 48 background-color: rgba(0, 0, 0, 0.3);
49 49
50 &, .icon { 50 &,
51 .icon {
51 transition: all $play-overlay-transition; 52 transition: all $play-overlay-transition;
52 } 53 }
53 54
@@ -79,7 +80,7 @@
79 80
80 &.blur-filter { 81 &.blur-filter {
81 filter: blur(20px); 82 filter: blur(20px);
82 transform : scale(1.03); 83 transform: scale(1.03);
83 } 84 }
84 } 85 }
85} 86}
@@ -129,10 +130,7 @@
129 column-gap: 30px; 130 column-gap: 30px;
130 grid-template-columns: repeat( 131 grid-template-columns: repeat(
131 auto-fill, 132 auto-fill,
132 minmax( 133 minmax(var(--miniatureMinWidth), 1fr)
133 var(--miniatureMinWidth),
134 1fr
135 )
136 ); 134 );
137 135
138 .video-wrapper, 136 .video-wrapper,
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index dc6ab8076..718e36f2c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,7 +1,9 @@
1@import '_variables'; 1@import '_variables';
2 2
3@mixin disable-default-a-behaviour { 3@mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active { 4 &:hover,
5 &:focus,
6 &:active {
5 text-decoration: none !important; 7 text-decoration: none !important;
6 outline: none !important; 8 outline: none !important;
7 } 9 }
@@ -22,7 +24,7 @@
22@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { 24@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
23 display: block; 25 display: block;
24 /* Fallback for non-webkit */ 26 /* Fallback for non-webkit */
25 display: -webkit-box; 27 display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
26 -webkit-line-clamp: $number-of-lines; 28 -webkit-line-clamp: $number-of-lines;
27 /* Fallback for non-webkit */ 29 /* Fallback for non-webkit */
28 font-size: $font-size; 30 font-size: $font-size;
@@ -36,7 +38,7 @@
36 position: relative; 38 position: relative;
37 overflow: hidden; 39 overflow: hidden;
38 40
39 &:after { 41 &::after {
40 content: ''; 42 content: '';
41 pointer-events: none; 43 pointer-events: none;
42 width: 100%; 44 width: 100%;
@@ -109,9 +111,9 @@
109 padding-bottom: 0; 111 padding-bottom: 0;
110 flex-wrap: nowrap; 112 flex-wrap: nowrap;
111 113
112 .input-group-text{ 114 .input-group-text {
113 font-size: 14px; 115 font-size: 14px;
114 color: gray; 116 color: #808080;
115 } 117 }
116} 118}
117 119
@@ -128,7 +130,9 @@
128@mixin orange-button { 130@mixin orange-button {
129 @include button-focus(pvar(--mainColorLightest)); 131 @include button-focus(pvar(--mainColorLightest));
130 132
131 &, &:active, &:focus { 133 &,
134 &:active,
135 &:focus {
132 color: #fff; 136 color: #fff;
133 background-color: pvar(--mainColor); 137 background-color: pvar(--mainColor);
134 } 138 }
@@ -138,14 +142,15 @@
138 background-color: pvar(--mainHoverColor); 142 background-color: pvar(--mainHoverColor);
139 } 143 }
140 144
141 &[disabled], &.disabled { 145 &[disabled],
146 &.disabled {
142 cursor: default; 147 cursor: default;
143 color: #fff; 148 color: #fff;
144 background-color: #C6C6C6; 149 background-color: #C6C6C6;
145 } 150 }
146 151
147 my-global-icon { 152 my-global-icon {
148 @include apply-svg-color(#fff) 153 @include apply-svg-color(#fff);
149 } 154 }
150} 155}
151 156
@@ -155,7 +160,9 @@
155 border: 2px solid pvar(--mainColor); 160 border: 2px solid pvar(--mainColor);
156 font-weight: $font-semibold; 161 font-weight: $font-semibold;
157 162
158 &, &:active, &:focus { 163 &,
164 &:active,
165 &:focus {
159 color: pvar(--mainColor); 166 color: pvar(--mainColor);
160 background-color: pvar(--mainBackgroundColor); 167 background-color: pvar(--mainBackgroundColor);
161 } 168 }
@@ -165,14 +172,15 @@
165 background-color: pvar(--mainColorLightest); 172 background-color: pvar(--mainColorLightest);
166 } 173 }
167 174
168 &[disabled], &.disabled { 175 &[disabled],
176 &.disabled {
169 cursor: default; 177 cursor: default;
170 color: pvar(--mainColor); 178 color: pvar(--mainColor);
171 background-color: #C6C6C6; 179 background-color: #C6C6C6;
172 } 180 }
173 181
174 my-global-icon { 182 my-global-icon {
175 @include apply-svg-color(pvar(--mainColor)) 183 @include apply-svg-color(pvar(--mainColor));
176 } 184 }
177} 185}
178 186
@@ -182,12 +190,13 @@
182 color: pvar(--greyForegroundColor); 190 color: pvar(--greyForegroundColor);
183 background-color: transparent; 191 background-color: transparent;
184 192
185 &[disabled], &.disabled { 193 &[disabled],
194 .disabled {
186 cursor: default; 195 cursor: default;
187 } 196 }
188 197
189 my-global-icon { 198 my-global-icon {
190 @include apply-svg-color(transparent) 199 @include apply-svg-color(transparent);
191 } 200 }
192} 201}
193 202
@@ -197,17 +206,22 @@
197 background-color: $grey-background-color; 206 background-color: $grey-background-color;
198 color: pvar(--greyForegroundColor); 207 color: pvar(--greyForegroundColor);
199 208
200 &:hover, &:active, &:focus, &[disabled], &.disabled { 209 &:hover,
210 &:active,
211 &:focus,
212 &[disabled],
213 &.disabled {
201 color: pvar(--greyForegroundColor); 214 color: pvar(--greyForegroundColor);
202 background-color: $grey-background-hover-color; 215 background-color: $grey-background-hover-color;
203 } 216 }
204 217
205 &[disabled], &.disabled { 218 &[disabled],
219 &.disabled {
206 cursor: default; 220 cursor: default;
207 } 221 }
208 222
209 my-global-icon { 223 my-global-icon {
210 @include apply-svg-color(pvar(--greyForegroundColor)) 224 @include apply-svg-color(pvar(--greyForegroundColor));
211 } 225 }
212} 226}
213 227
@@ -216,24 +230,30 @@
216 $text: #fff6f5; 230 $text: #fff6f5;
217 231
218 @include button-focus(scale-color($color, $alpha: -95%)); 232 @include button-focus(scale-color($color, $alpha: -95%));
233
219 background-color: $color; 234 background-color: $color;
220 color: $text; 235 color: $text;
221 236
222 &:hover, &:active, &:focus, &[disabled], &.disabled { 237 &:hover,
238 &:active,
239 &:focus,
240 &[disabled],
241 &.disabled {
223 background-color: lighten($color: $color, $amount: 10); 242 background-color: lighten($color: $color, $amount: 10);
224 } 243 }
225 244
226 &[disabled], &.disabled { 245 &[disabled],
246 &.disabled {
227 cursor: default; 247 cursor: default;
228 } 248 }
229 249
230 my-global-icon { 250 my-global-icon {
231 @include apply-svg-color($text) 251 @include apply-svg-color($text);
232 } 252 }
233} 253}
234 254
235@mixin peertube-button { 255@mixin peertube-button {
236 border: none; 256 border: 0;
237 font-weight: $font-semibold; 257 font-weight: $font-semibold;
238 font-size: 15px; 258 font-size: 15px;
239 height: $button-height; 259 height: $button-height;
@@ -246,18 +266,17 @@
246} 266}
247 267
248@mixin peertube-button-link { 268@mixin peertube-button-link {
249 display: inline-block;
250
251 @include disable-default-a-behaviour; 269 @include disable-default-a-behaviour;
252 @include peertube-button; 270 @include peertube-button;
253}
254 271
255@mixin peertube-button-outline {
256 display: inline-block; 272 display: inline-block;
273}
257 274
275@mixin peertube-button-outline {
258 @include disable-default-a-behaviour; 276 @include disable-default-a-behaviour;
259 @include peertube-button; 277 @include peertube-button;
260 278
279 display: inline-block;
261 border: 1px solid; 280 border: 1px solid;
262} 281}
263 282
@@ -291,17 +310,17 @@
291 filter: alpha(opacity=0); 310 filter: alpha(opacity=0);
292 opacity: 0; 311 opacity: 0;
293 outline: none; 312 outline: none;
294 background: white; 313 background: #fff;
295 cursor: inherit; 314 cursor: inherit;
296 display: block; 315 display: block;
297 } 316 }
298} 317}
299 318
300@mixin peertube-button-file ($width) { 319@mixin peertube-button-file ($width) {
301 width: $width;
302
303 @include peertube-file; 320 @include peertube-file;
304 @include peertube-button; 321 @include peertube-button;
322
323 width: $width;
305} 324}
306 325
307@mixin icon ($size) { 326@mixin icon ($size) {
@@ -317,7 +336,7 @@
317@mixin select-arrow-down { 336@mixin select-arrow-down {
318 top: 50%; 337 top: 50%;
319 right: calc(0% + 15px); 338 right: calc(0% + 15px);
320 content: " "; 339 content: ' ';
321 height: 0; 340 height: 0;
322 width: 0; 341 width: 0;
323 position: absolute; 342 position: absolute;
@@ -358,7 +377,7 @@
358 width: 100%; 377 width: 100%;
359 } 378 }
360 379
361 &:after { 380 &::after {
362 @include select-arrow-down; 381 @include select-arrow-down;
363 } 382 }
364 383
@@ -394,21 +413,21 @@
394 option { 413 option {
395 font-weight: $font-semibold; 414 font-weight: $font-semibold;
396 color: pvar(--greyForegroundColor); 415 color: pvar(--greyForegroundColor);
397 border: none; 416 border: 0;
398 } 417 }
399 } 418 }
400} 419}
401 420
402// Thanks: https://codepen.io/triss90/pen/XNEdRe/ 421// Thanks: https://codepen.io/triss90/pen/XNEdRe/
403@mixin peertube-radio-container { 422@mixin peertube-radio-container {
404 input[type="radio"] { 423 input[type=radio] {
405 display: none; 424 display: none;
406 425
407 & + label { 426 + label {
408 font-weight: $font-regular; 427 font-weight: $font-regular;
409 cursor: pointer; 428 cursor: pointer;
410 429
411 &:before { 430 &::before {
412 position: relative; 431 position: relative;
413 top: -2px; 432 top: -2px;
414 content: ''; 433 content: '';
@@ -425,12 +444,12 @@
425 } 444 }
426 } 445 }
427 446
428 &:checked + label:before { 447 &:checked + label::before {
429 background-color: #000; 448 background-color: #000;
430 box-shadow: inset 0 0 0 4px #fff; 449 box-shadow: inset 0 0 0 4px #fff;
431 } 450 }
432 451
433 &:focus + label:before { 452 &:focus + label::before {
434 outline: none; 453 outline: none;
435 border-color: #000; 454 border-color: #000;
436 } 455 }
@@ -445,7 +464,7 @@
445 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); 464 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
446 } 465 }
447 466
448 & + span { 467 + span {
449 position: relative; 468 position: relative;
450 width: 18px; 469 width: 18px;
451 min-width: 18px; 470 min-width: 18px;
@@ -455,7 +474,7 @@
455 vertical-align: middle; 474 vertical-align: middle;
456 cursor: pointer; 475 cursor: pointer;
457 476
458 &:after { 477 &::after {
459 content: ''; 478 content: '';
460 position: absolute; 479 position: absolute;
461 top: calc(2px - #{$border-width}); 480 top: calc(2px - #{$border-width});
@@ -474,13 +493,13 @@
474 background: pvar(--mainColor); 493 background: pvar(--mainColor);
475 animation: jelly 0.6s ease; 494 animation: jelly 0.6s ease;
476 495
477 &:after { 496 &::after {
478 opacity: 1; 497 opacity: 1;
479 transform: rotate(45deg) scale(1); 498 transform: rotate(45deg) scale(1);
480 } 499 }
481 } 500 }
482 501
483 & + span + span { 502 + span + span {
484 font-size: 15px; 503 font-size: 15px;
485 font-weight: $font-regular; 504 font-weight: $font-regular;
486 margin-left: 5px; 505 margin-left: 5px;
@@ -489,7 +508,7 @@
489 } 508 }
490 509
491 &[disabled] + span, 510 &[disabled] + span,
492 &[disabled] + span + span{ 511 &[disabled] + span + span {
493 opacity: 0.5; 512 opacity: 0.5;
494 cursor: default; 513 cursor: default;
495 } 514 }
@@ -685,13 +704,13 @@
685 color: pvar(--mainColor); 704 color: pvar(--mainColor);
686 } 705 }
687 706
688 & + .breadcrumb-item { 707 + .breadcrumb-item {
689 padding-left: 0.5rem; 708 padding-left: 0.5rem;
690 &::before { 709 &::before {
691 display: inline-block; 710 display: inline-block;
692 padding-right: 0.5rem; 711 padding-right: 0.5rem;
693 color: #6c757d; 712 color: #6c757d;
694 content: "/"; 713 content: '/';
695 } 714 }
696 } 715 }
697 716
@@ -706,13 +725,13 @@
706 flex-wrap: wrap; 725 flex-wrap: wrap;
707 margin: 0 -5px; 726 margin: 0 -5px;
708 727
709 & > div { 728 > div {
710 box-sizing: border-box; 729 box-sizing: border-box;
711 flex: 0 0 percentage(1/3); 730 flex: 0 0 percentage(1/3);
712 padding: 0 5px; 731 padding: 0 5px;
713 margin-bottom: 10px; 732 margin-bottom: 10px;
714 733
715 & > a { 734 > a {
716 @include disable-default-a-behaviour; 735 @include disable-default-a-behaviour;
717 736
718 text-decoration: none; 737 text-decoration: none;
@@ -727,8 +746,8 @@
727 } 746 }
728 } 747 }
729 748
730 & > a, 749 > a,
731 & > div { 750 > div {
732 padding: 20px; 751 padding: 20px;
733 background: pvar(--submenuBackgroundColor); 752 background: pvar(--submenuBackgroundColor);
734 border-radius: 4px; 753 border-radius: 4px;
@@ -737,7 +756,8 @@
737 } 756 }
738 } 757 }
739 758
740 .dashboard-num, .dashboard-text { 759 .dashboard-num,
760 .dashboard-text {
741 text-align: center; 761 text-align: center;
742 font-size: 130%; 762 font-size: 130%;
743 color: pvar(--mainForegroundColor); 763 color: pvar(--mainForegroundColor);
@@ -831,7 +851,7 @@
831 flex-direction: column; 851 flex-direction: column;
832 852
833 .form-sub-title { 853 .form-sub-title {
834 margin-right: 0px !important; 854 margin-right: 0 !important;
835 margin-bottom: 10px; 855 margin-bottom: 10px;
836 text-align: center; 856 text-align: center;
837 } 857 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d2a5d2bd9..d54563df6 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -60,7 +60,7 @@ $max-channels-width: 1200px;
60$footer-height: 30px; 60$footer-height: 30px;
61$footer-margin: 30px; 61$footer-margin: 30px;
62 62
63$separator-border-color: rgba(0, 0, 0, 0.10); 63$separator-border-color: rgba(0, 0, 0, 0.1);
64 64
65$video-miniature-margin-bottom: 15px; 65$video-miniature-margin-bottom: 15px;
66 66
@@ -90,7 +90,7 @@ $markdown-textarea-background-color: $grey-background-hover-color;
90$sub-menu-margin-bottom: 30px; 90$sub-menu-margin-bottom: 30px;
91$sub-menu-margin-bottom-small-view: 10px; 91$sub-menu-margin-bottom-small-view: 10px;
92 92
93$activated-action-button-color: black; 93$activated-action-button-color: #000;
94 94
95$focus-box-shadow-form: 0 0 0 .2rem; 95$focus-box-shadow-form: 0 0 0 .2rem;
96 96
@@ -147,7 +147,7 @@ $variables: (
147 @if map-has-key($variables, $variable) { 147 @if map-has-key($variables, $variable) {
148 @return map-get($variables, $variable); 148 @return map-get($variables, $variable);
149 } @else { 149 } @else {
150 @error "ERROR: Variable #{$variable} does not exist"; 150 @error 'ERROR: Variable #{$variable} does not exist';
151 } 151 }
152} 152}
153 153
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 61da6d266..13b2012b2 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -14,7 +14,7 @@ $ng-select-height: 30px;
14$ng-select-value-padding-left: 15px; 14$ng-select-value-padding-left: 15px;
15$ng-select-value-font-size: 15px; 15$ng-select-value-font-size: 15px;
16 16
17@import "~@ng-select/ng-select/scss/default.theme.scss"; 17@import '~@ng-select/ng-select/scss/default.theme';
18 18
19.ng-select { 19.ng-select {
20 font-size: $ng-select-value-font-size; 20 font-size: $ng-select-value-font-size;
@@ -31,13 +31,13 @@ $ng-select-value-font-size: 15px;
31 } 31 }
32 32
33 .ng-arrow-wrapper { 33 .ng-arrow-wrapper {
34 padding-right: 12px 34 padding-right: 12px;
35 } 35 }
36 36
37 &.ng-select-single .ng-value-container .ng-value { 37 &.ng-select-single .ng-value-container .ng-value {
38 color: pvar(--inputForegroundColor); 38 color: pvar(--inputForegroundColor);
39 39
40 .ng-value-label { 40 .ng-value-label { /* stylelint-disable-line */
41 display: flex; 41 display: flex;
42 align-items: center; 42 align-items: center;
43 } 43 }
@@ -45,7 +45,8 @@ $ng-select-value-font-size: 15px;
45 45
46 &.ng-select-multiple .ng-select-container .ng-value-container { 46 &.ng-select-multiple .ng-select-container .ng-value-container {
47 padding-left: 12px; 47 padding-left: 12px;
48 .ng-value { 48
49 .ng-value { /* stylelint-disable-line */
49 margin-left: 3px; 50 margin-left: 3px;
50 } 51 }
51 } 52 }
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}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 544d0039a..1abcd30e4 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,10 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4/* stylelint-disable */
4@import '~primeng/resources/primeng.css'; 5@import '~primeng/resources/primeng.css';
5 6
6// Override primeng style we don't want 7// Override primeng style we don't want
7input[type="button"] { 8input[type=button] {
8 border-radius: inherit; 9 border-radius: inherit;
9} 10}
10 11