From bc4c9cc1d75d591c217d61ab22a107b7f1044c76 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 7 May 2021 11:25:47 +0200 Subject: Fix mask-image property Needed by chrome --- client/src/sass/application.scss | 21 ++++++++++++- client/src/sass/include/_mixins.scss | 49 +++++++------------------------ client/src/sass/player/context-menu.scss | 1 + client/src/sass/player/peertube-skin.scss | 2 ++ client/src/sass/player/playlist.scss | 8 +++-- 5 files changed, 40 insertions(+), 41 deletions(-) (limited to 'client/src/sass') 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 { } .admin-sub-header { - @include admin-sub-header-responsive; + flex-direction: column; + + .form-sub-title { + margin-right: 0 !important; + margin-bottom: 10px; + text-align: center; + } + + .admin-sub-nav { + display: block; + overflow-x: auto; + white-space: nowrap; + height: 50px; + padding: 10px 0; + width: 100%; + + a { + margin-left: 5px; + } + } } 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 @@ cursor: pointer; } -@mixin select-arrow-down { - top: 50%; - right: calc(0% + 15px); - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border: 5px solid rgba(0, 0, 0, 0); - border-top-color: #000; - margin-top: -2px; - z-index: 100; -} - @mixin responsive-width ($width) { width: $width; @@ -381,7 +367,17 @@ } &::after { - @include select-arrow-down; + top: 50%; + right: calc(0% + 15px); + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border: 5px solid rgba(0, 0, 0, 0); + border-top-color: #000; + margin-top: -2px; + z-index: 100; } select { @@ -849,29 +845,6 @@ } } -@mixin admin-sub-header-responsive { - flex-direction: column; - - .form-sub-title { - margin-right: 0 !important; - margin-bottom: 10px; - text-align: center; - } - - .admin-sub-nav { - display: block; - overflow-x: auto; - white-space: nowrap; - height: 50px; - padding: 10px 0; - width: 100%; - - a { - margin-left: 5px; - } - } -} - // applies ratio (default to 16:9) to a child element (using $selector) only using // an immediate's parent size. This allows to set a ratio without explicit // 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; @each $icon in $icons { &[class$="-#{$icon}"] { mask-image: url('#{$assets-path}/player/images/#{$icon}.svg'); + -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg'); } } 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 { &.icon-next, &.icon-previous { mask-image: url('#{$assets-path}/player/images/next.svg'); + -webkit-mask-image: url('#{$assets-path}/player/images/next.svg'); + background-color: #fff; mask-size: cover; 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; } .cross { + mask-image: url('#{$assets-path}/images/feather/x.svg'); + -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg'); + cursor: pointer; width: 20px; height: 20px; - mask-image: url('#{$assets-path}/images/feather/x.svg'); background-color: #fff; mask-size: cover; } @@ -85,9 +87,11 @@ $playlist-menu-width: 350px; } .vjs-playlist-icon { + mask-image: url('#{$assets-path}/images/feather/list.svg'); + -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg'); + width: 22px; height: 22px; - mask-image: url('#{$assets-path}/images/feather/list.svg'); background-color: #fff; mask-size: cover; margin-bottom: 3px; -- cgit v1.2.3 From cb4bab61c19f2be7858f9cc6e8e234f04b1d504f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 14 May 2021 14:17:53 +0200 Subject: Fix logger warning level --- client/src/sass/player/context-menu.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'client/src/sass') diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index 1738f486d..1653dd2c4 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -12,6 +12,7 @@ $context-menu-width: 350px; padding: 8px 0; border-radius: 4px; width: $context-menu-width; + z-index: 105; // On top of the progress bar .vjs-menu-content { opacity: $primary-foreground-opacity; -- cgit v1.2.3 From b45afe12f90c654aef8098e55bedfa81ca73b1f4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 26 May 2021 16:00:09 +0200 Subject: Fix UI overflows --- client/src/sass/include/_actor.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'client/src/sass') diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index 38bd90ae6..372e7bd24 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss @@ -44,6 +44,8 @@ } .actor-display-name { + @include peertube-word-wrap; + display: flex; flex-wrap: wrap; } -- cgit v1.2.3