From 03652b3179b7d3d2959b68318fdc5e00f94eb95f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 24 Jul 2019 16:12:35 +0200 Subject: [PATCH] Use ::ng-deep instead of /deep/ --- .../plugin-list-installed.component.scss | 2 +- .../plugins/shared/toggle-plugin-type.scss | 2 +- .../my-account-video-channels.component.scss | 2 +- .../my-account-video-playlists.component.scss | 4 ++-- .../+signup/+register/register.component.scss | 2 +- .../menu/avatar-notification.component.scss | 4 ++-- client/src/app/menu/menu.component.scss | 2 +- client/src/app/search/search.component.scss | 2 +- .../buttons/action-dropdown.component.scss | 2 +- .../app/shared/buttons/button.component.scss | 2 +- .../forms/markdown-textarea.component.scss | 2 +- .../forms/timestamp-input.component.scss | 2 +- .../shared/images/global-icon.component.scss | 2 +- .../menu/top-menu-dropdown.component.scss | 4 ++-- client/src/app/shared/misc/help.component.scss | 2 +- .../subscribe-button.component.scss | 2 +- .../video-actions-dropdown.component.scss | 2 +- .../video/video-miniature.component.scss | 8 ++++---- .../shared/video-edit.component.scss | 4 ++-- .../video-upload.component.scss | 4 ++-- .../+video-edit/video-add.component.scss | 4 ++-- .../comment/video-comment.component.scss | 2 +- .../video-watch-playlist.component.scss | 2 +- .../+video-watch/video-watch.component.scss | 18 +++++++++--------- client/src/sass/include/_miniature.scss | 4 ++-- client/src/sass/include/_mixins.scss | 2 +- 26 files changed, 44 insertions(+), 44 deletions(-) diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss index 0b54ffda3..9376e38b0 100644 --- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss +++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss @@ -1,6 +1,6 @@ @import '_variables'; @import '_mixins'; -.update-button[disabled="true"] /deep/ .action-button { +.update-button[disabled="true"] ::ng-deep .action-button { cursor: default !important; } diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss index ea2eda28c..7e2c40aae 100644 --- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss +++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss @@ -7,7 +7,7 @@ margin-bottom: 30px; p-selectButton { - /deep/ { + ::ng-deep { .ui-button-text { font-size: 15px; } diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index 77fce138b..20582e478 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -5,7 +5,7 @@ @include create-button; } -/deep/ .action-button { +::ng-deep .action-button { &.action-button-delete { margin-right: 10px; } diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss index f648c33e4..dd5712c06 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss @@ -5,7 +5,7 @@ @include create-button; } -/deep/ .action-button { +::ng-deep .action-button { &.action-button-delete { margin-right: 10px; } @@ -17,7 +17,7 @@ .miniature-wrapper { flex-grow: 1; - /deep/ .miniature { + ::ng-deep .miniature { display: flex; .miniature-info { diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss index 8d14992e7..9405b5293 100644 --- a/client/src/app/+signup/+register/register.component.scss +++ b/client/src/app/+signup/+register/register.component.scss @@ -70,7 +70,7 @@ button { my-loader { margin-bottom: 20px; - /deep/ .loader div { + ::ng-deep .loader div { border-color: var(--mainColor) transparent transparent transparent; } diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index 201668b6e..5e09225df 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -1,7 +1,7 @@ @import '_variables'; @import '_mixins'; -/deep/ { +::ng-deep { .popover-notifications.popover { max-width: none; @@ -99,7 +99,7 @@ } @media screen and (max-width: $mobile-view) { - /deep/ { + ::ng-deep { .popover-notifications.popover .popover-body { width: 400px; } diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 06baa52d3..76e73155c 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -82,7 +82,7 @@ menu { border: none; } - /deep/ { + ::ng-deep { @include apply-svg-color(var(--menuForegroundColor)); } } diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 3343a276d..d4d8bbcf7 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -115,7 +115,7 @@ my-video-thumbnail { margin-right: 0 !important; - /deep/ .video-thumbnail { + ::ng-deep .video-thumbnail { width: 100%; height: auto; diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss index 7c2b0db71..2f7e848d5 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/buttons/action-dropdown.component.scss @@ -33,7 +33,7 @@ .more-icon { width: 21px; - /deep/ { + ::ng-deep { @include apply-svg-color(var(--mainForegroundColor)); } } diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss index 4cc2b0573..2a8cfc748 100644 --- a/client/src/app/shared/buttons/button.component.scss +++ b/client/src/app/shared/buttons/button.component.scss @@ -1,7 +1,7 @@ @import '_variables'; @import '_mixins'; -my-small-loader /deep/ .root { +my-small-loader ::ng-deep .root { display: inline-block; margin: 0 3px 0 0; width: 20px; diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss index 118b38b91..eacaf36a2 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.scss +++ b/client/src/app/shared/forms/markdown-textarea.component.scss @@ -16,7 +16,7 @@ flex-grow: 1; } - /deep/ { + ::ng-deep { .nav-link { display: flex !important; align-items: center; diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss index 7115777fd..e7dbcd997 100644 --- a/client/src/app/shared/forms/timestamp-input.component.scss +++ b/client/src/app/shared/forms/timestamp-input.component.scss @@ -1,5 +1,5 @@ p-inputmask { - /deep/ input { + ::ng-deep input { width: 80px; font-size: 15px; diff --git a/client/src/app/shared/images/global-icon.component.scss b/client/src/app/shared/images/global-icon.component.scss index 6805fb6f7..32fb9badb 100644 --- a/client/src/app/shared/images/global-icon.component.scss +++ b/client/src/app/shared/images/global-icon.component.scss @@ -1,4 +1,4 @@ -/deep/ svg { +::ng-deep svg { width: inherit; height: inherit; } diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss index d7c7de957..1be699a88 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.scss +++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss @@ -11,12 +11,12 @@ } } -/deep/ .dropdown-toggle::after { +::ng-deep .dropdown-toggle::after { position: relative; top: 2px; } -/deep/ .dropdown-menu { +::ng-deep .dropdown-menu { margin-top: 0 !important; } diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index 3898f3cda..84e176b34 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -15,7 +15,7 @@ } } -/deep/ { +::ng-deep { .help-popover { max-width: 300px; diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss index 15fb83c05..92a28aad9 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss @@ -61,7 +61,7 @@ padding-left: 1rem; } - /deep/ form { + ::ng-deep form { padding: 0.25rem 1rem; } diff --git a/client/src/app/shared/video/video-actions-dropdown.component.scss b/client/src/app/shared/video/video-actions-dropdown.component.scss index 7ffdce822..67d7ee86a 100644 --- a/client/src/app/shared/video/video-actions-dropdown.component.scss +++ b/client/src/app/shared/video/video-actions-dropdown.component.scss @@ -7,6 +7,6 @@ } } -/deep/ .icon-playlist-add { +::ng-deep .icon-playlist-add { left: 2px; } diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index d665ce021..dac178bde 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -68,16 +68,16 @@ $more-margin-right: 10px; width: $more-button-width; height: 30px; - /deep/ .dropdown-root:not(.show) { + ::ng-deep .dropdown-root:not(.show) { opacity: 0; } - /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { + ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { opacity: 1; } } - &:hover .video-actions /deep/ .dropdown-root { + &:hover .video-actions ::ng-deep .dropdown-root { opacity: 1; } @@ -90,7 +90,7 @@ $more-margin-right: 10px; margin: 0; top: -3px; - /deep/ .dropdown-root { + ::ng-deep .dropdown-root { opacity: 1 !important; } } diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index bb775cb0a..9479c588a 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -122,7 +122,7 @@ my-peertube-checkbox { p-calendar { display: block; - /deep/ { + ::ng-deep { input, .ui-calendar { width: 100%; @@ -135,7 +135,7 @@ p-calendar { } } -/deep/ { +::ng-deep { .root-tabset > .nav { margin-bottom: 15px; } diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss index 684342f09..b5628e276 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss @@ -25,7 +25,7 @@ p-progressBar { flex-grow: 1; - /deep/ .ui-progressbar { + ::ng-deep .ui-progressbar { font-size: 15px !important; height: 30px !important; border-radius: 3px !important; @@ -45,7 +45,7 @@ } &.processing { - /deep/ .ui-progressbar-label { + ::ng-deep .ui-progressbar-label { // Same color as background to hide "100%" color: rgba(11, 204, 41, 0.16) !important; diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss index dd97b79ee..da711ec5b 100644 --- a/client/src/app/videos/+video-edit/video-add.component.scss +++ b/client/src/app/videos/+video-edit/video-add.component.scss @@ -5,7 +5,7 @@ $border-width: 3px; $border-type: solid; $border-color: #EAEAEA; -/deep/ .root-tabset.video-add-tabset { +::ng-deep .root-tabset.video-add-tabset { &.hide-nav > .nav { display: none !important; } @@ -52,4 +52,4 @@ $border-color: #EAEAEA; justify-content: center; align-items: center; } -} \ No newline at end of file +} diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index 731ecbf8f..c3ab1ab01 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -50,7 +50,7 @@ @include peertube-word-wrap; // Mentions - /deep/ a { + ::ng-deep a { &:not(.linkified-url) { @include disable-default-a-behaviour; diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss index 5da55c2f8..eeb763bd9 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss @@ -37,7 +37,7 @@ } my-video-playlist-element-miniature { - /deep/ { + ::ng-deep { .video { .position { margin-right: 0; diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 35ea0fffd..5dc79c6b7 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -31,14 +31,14 @@ $player-factor: 1.7; // 16/9 width: 100%; } - /deep/ .video-js { + ::ng-deep .video-js { $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); height: $height; width: 100%; } - my-video-watch-playlist /deep/ .playlist { + my-video-watch-playlist ::ng-deep .playlist { @include playlist-below-player; } } @@ -81,7 +81,7 @@ $player-factor: 1.7; // 16/9 } } - /deep/ .video-js { + ::ng-deep .video-js { width: getPlayerWidth(66vh); height: 66vh; @@ -94,7 +94,7 @@ $player-factor: 1.7; // 16/9 @media screen and (max-width: 600px) { .remote-server-down, - /deep/ .video-js { + ::ng-deep .video-js { width: 100vw; height: getPlayerHeight(100vw) } @@ -344,7 +344,7 @@ $player-factor: 1.7; // 16/9 } } - /deep/ .other-videos { + ::ng-deep .other-videos { padding-left: 15px; flex-basis: $other-videos-width; min-width: $other-videos-width; @@ -456,7 +456,7 @@ my-video-comments { flex-direction: column; justify-content: center; - my-video-watch-playlist /deep/ .playlist { + my-video-watch-playlist ::ng-deep .playlist { @include playlist-below-player; } } @@ -464,10 +464,10 @@ my-video-comments { .video-bottom { flex-direction: column; - /deep/ .other-videos { + ::ng-deep .other-videos { padding-left: 0 !important; - /deep/ .video-miniature { + ::ng-deep .video-miniature { flex-direction: row; width: auto; } @@ -492,7 +492,7 @@ my-video-comments { } } - /deep/ .other-videos .video-miniature { + ::ng-deep .other-videos .video-miniature { flex-direction: column; } diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 0c2ee2d0d..26c327956 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -95,7 +95,7 @@ $play-overlay-width: 18px; } @mixin thumbnail-size-component ($width, $height) { - /deep/ .video-thumbnail { + ::ng-deep .video-thumbnail { width: $width; height: $height; } @@ -110,7 +110,7 @@ $play-overlay-width: 18px; @mixin video-miniature-small-screen { text-align: center; - /deep/ .video-miniature { + ::ng-deep .video-miniature { padding-right: 0; height: auto; width: 100%; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index caa79bf04..abbc137b2 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -54,7 +54,7 @@ } @mixin apply-svg-color ($color) { - /deep/ svg { + ::ng-deep svg { path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"], -- 2.41.0