aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-07 11:25:47 +0200
committerChocobozzz <me@florianbigard.com>2021-05-07 11:26:09 +0200
commitbc4c9cc1d75d591c217d61ab22a107b7f1044c76 (patch)
treebd308af1530ff45702b3ac548ec59fc6215350ca /client
parent52fe9526420b98df78f922ff3680a04ec0f7784e (diff)
downloadPeerTube-bc4c9cc1d75d591c217d61ab22a107b7f1044c76.tar.gz
PeerTube-bc4c9cc1d75d591c217d61ab22a107b7f1044c76.tar.zst
PeerTube-bc4c9cc1d75d591c217d61ab22a107b7f1044c76.zip
Fix mask-image property
Needed by chrome
Diffstat (limited to 'client')
-rw-r--r--client/.stylelintrc.json8
-rw-r--r--client/src/app/app.component.scss4
-rw-r--r--client/src/sass/application.scss21
-rw-r--r--client/src/sass/include/_mixins.scss49
-rw-r--r--client/src/sass/player/context-menu.scss1
-rw-r--r--client/src/sass/player/peertube-skin.scss2
-rw-r--r--client/src/sass/player/playlist.scss8
7 files changed, 50 insertions, 43 deletions
diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json
index 25f0b1002..6a322da62 100644
--- a/client/.stylelintrc.json
+++ b/client/.stylelintrc.json
@@ -24,6 +24,12 @@
24 "rule-empty-line-before": null, 24 "rule-empty-line-before": null,
25 "selector-max-id": null, 25 "selector-max-id": null,
26 "scss/at-function-pattern": null, 26 "scss/at-function-pattern": null,
27 "function-parentheses-space-inside": "never-single-line" 27 "function-parentheses-space-inside": "never-single-line",
28 "property-no-vendor-prefix": [
29 true,
30 {
31 "ignoreProperties": [ "mask-image" ]
32 }
33 ]
28 } 34 }
29} 35}
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e21ada0f1..0543564b4 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -40,8 +40,10 @@
40 } 40 }
41 41
42 .icon-menu { 42 .icon-menu {
43 background-color: pvar(--mainForegroundColor);
44 mask-image: url('../assets/images/misc/menu.svg'); 43 mask-image: url('../assets/images/misc/menu.svg');
44 -webkit-mask-image: url('../assets/images/misc/menu.svg');
45
46 background-color: pvar(--mainForegroundColor);
45 margin: 0 18px 0 20px; 47 margin: 0 18px 0 20px;
46 48
47 @media screen and (max-width: $mobile-view) { 49 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 89b6f0c4c..ae511aa02 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -402,7 +402,26 @@ ngx-loading-bar {
402 } 402 }
403 403
404 .admin-sub-header { 404 .admin-sub-header {
405 @include admin-sub-header-responsive; 405 flex-direction: column;
406
407 .form-sub-title {
408 margin-right: 0 !important;
409 margin-bottom: 10px;
410 text-align: center;
411 }
412
413 .admin-sub-nav {
414 display: block;
415 overflow-x: auto;
416 white-space: nowrap;
417 height: 50px;
418 padding: 10px 0;
419 width: 100%;
420
421 a {
422 margin-left: 5px;
423 }
424 }
406 } 425 }
407 426
408 my-markdown-textarea { 427 my-markdown-textarea {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b2083e516..06e55532a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -336,20 +336,6 @@
336 cursor: pointer; 336 cursor: pointer;
337} 337}
338 338
339@mixin select-arrow-down {
340 top: 50%;
341 right: calc(0% + 15px);
342 content: ' ';
343 height: 0;
344 width: 0;
345 position: absolute;
346 pointer-events: none;
347 border: 5px solid rgba(0, 0, 0, 0);
348 border-top-color: #000;
349 margin-top: -2px;
350 z-index: 100;
351}
352
353@mixin responsive-width ($width) { 339@mixin responsive-width ($width) {
354 width: $width; 340 width: $width;
355 341
@@ -381,7 +367,17 @@
381 } 367 }
382 368
383 &::after { 369 &::after {
384 @include select-arrow-down; 370 top: 50%;
371 right: calc(0% + 15px);
372 content: ' ';
373 height: 0;
374 width: 0;
375 position: absolute;
376 pointer-events: none;
377 border: 5px solid rgba(0, 0, 0, 0);
378 border-top-color: #000;
379 margin-top: -2px;
380 z-index: 100;
385 } 381 }
386 382
387 select { 383 select {
@@ -849,29 +845,6 @@
849 } 845 }
850} 846}
851 847
852@mixin admin-sub-header-responsive {
853 flex-direction: column;
854
855 .form-sub-title {
856 margin-right: 0 !important;
857 margin-bottom: 10px;
858 text-align: center;
859 }
860
861 .admin-sub-nav {
862 display: block;
863 overflow-x: auto;
864 white-space: nowrap;
865 height: 50px;
866 padding: 10px 0;
867 width: 100%;
868
869 a {
870 margin-left: 5px;
871 }
872 }
873}
874
875// applies ratio (default to 16:9) to a child element (using $selector) only using 848// applies ratio (default to 16:9) to a child element (using $selector) only using
876// an immediate's parent size. This allows to set a ratio without explicit 849// an immediate's parent size. This allows to set a ratio without explicit
877// dimensions, as width/height cannot be computed from each other. 850// dimensions, as width/height cannot be computed from each other.
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 45cee3e77..1738f486d 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -47,6 +47,7 @@ $context-menu-width: 350px;
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 -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
50 } 51 }
51 } 52 }
52 53
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 8fe2e054d..c010f7297 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -346,6 +346,8 @@ body {
346 &.icon-next, 346 &.icon-next,
347 &.icon-previous { 347 &.icon-previous {
348 mask-image: url('#{$assets-path}/player/images/next.svg'); 348 mask-image: url('#{$assets-path}/player/images/next.svg');
349 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
350
349 background-color: #fff; 351 background-color: #fff;
350 mask-size: cover; 352 mask-size: cover;
351 width: 11px; 353 width: 11px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index 8558fc837..3279bd263 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -40,10 +40,12 @@ $playlist-menu-width: 350px;
40 } 40 }
41 41
42 .cross { 42 .cross {
43 mask-image: url('#{$assets-path}/images/feather/x.svg');
44 -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
45
43 cursor: pointer; 46 cursor: pointer;
44 width: 20px; 47 width: 20px;
45 height: 20px; 48 height: 20px;
46 mask-image: url('#{$assets-path}/images/feather/x.svg');
47 background-color: #fff; 49 background-color: #fff;
48 mask-size: cover; 50 mask-size: cover;
49 } 51 }
@@ -85,9 +87,11 @@ $playlist-menu-width: 350px;
85} 87}
86 88
87.vjs-playlist-icon { 89.vjs-playlist-icon {
90 mask-image: url('#{$assets-path}/images/feather/list.svg');
91 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
92
88 width: 22px; 93 width: 22px;
89 height: 22px; 94 height: 22px;
90 mask-image: url('#{$assets-path}/images/feather/list.svg');
91 background-color: #fff; 95 background-color: #fff;
92 mask-size: cover; 96 mask-size: cover;
93 margin-bottom: 3px; 97 margin-bottom: 3px;