From 27bc95867442c772841fb183a625bbda61dede51 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 7 Jun 2021 17:38:31 +0200 Subject: Bidi support --- .../about-instance/about-instance.component.scss | 6 +- .../about-peertube-contributors.component.scss | 3 +- .../account-video-channels.component.scss | 7 +- client/src/app/+accounts/accounts.component.scss | 4 +- .../edit-custom-config.component.scss | 6 +- .../followers-list/followers-list.component.scss | 2 +- .../src/app/+admin/follows/follows.component.scss | 3 +- .../video-redundancies-list.component.scss | 2 +- .../video-comment-list.component.scss | 2 +- .../plugin-search/plugin-search.component.scss | 5 +- .../plugins/shared/plugin-list.component.scss | 9 +- .../src/app/+admin/system/jobs/jobs.component.scss | 4 +- .../src/app/+admin/system/logs/logs.component.scss | 11 ++- client/src/app/+admin/system/system.component.scss | 6 +- .../users/user-list/user-list.component.scss | 3 +- client/src/app/+login/login.component.scss | 17 ++-- .../my-account-applications.component.scss | 5 +- .../my-account-notifications.component.scss | 2 +- .../my-video-channel-edit.component.scss | 2 +- .../my-video-channels.component.scss | 12 +-- .../my-history/my-history.component.scss | 6 +- .../my-ownership/my-ownership.component.scss | 5 +- .../my-subscriptions.component.scss | 9 +- .../my-video-playlist-elements.component.scss | 11 +-- .../my-video-playlists.component.scss | 10 ++- .../+my-library/my-videos/my-videos.component.scss | 16 ++-- .../+page-not-found/page-not-found.component.scss | 12 +-- .../src/app/+search/search-filters.component.scss | 7 +- client/src/app/+search/search.component.scss | 5 +- .../+register/custom-stepper.component.scss | 4 +- .../video-channel-playlists.component.scss | 8 +- .../+video-channels/video-channels.component.scss | 16 ++-- .../+video-edit/shared/video-edit.component.scss | 12 +-- .../video-upload.component.scss | 9 +- .../comment/video-comment-add.component.html | 5 +- .../comment/video-comment-add.component.scss | 15 +++- .../comment/video-comment-add.component.ts | 22 ++++- .../comment/video-comment.component.scss | 24 +++--- .../comment/video-comments.component.scss | 10 ++- .../recommended-videos.component.scss | 9 +- .../video-avatar-channel.component.scss | 2 +- .../video-watch-playlist.component.scss | 6 +- .../+video-watch/video-watch.component.scss | 51 +++++++----- .../overview/video-overview.component.scss | 8 +- .../trending/video-trending-header.component.scss | 7 +- client/src/app/app.component.scss | 3 +- client/src/app/app.component.ts | 3 +- client/src/app/core/hotkeys/hotkeys.component.scss | 7 +- client/src/app/header/header.component.scss | 10 +-- .../src/app/header/search-typeahead.component.scss | 13 +-- client/src/app/menu/menu.component.html | 11 ++- client/src/app/menu/menu.component.scss | 38 +++++---- client/src/app/menu/menu.component.ts | 1 + client/src/app/menu/notification.component.scss | 2 +- client/src/app/modal/welcome-modal.component.scss | 3 +- .../abuse-list-table.component.scss | 8 +- .../actor-avatar-edit.component.scss | 2 +- .../videos-list-markup.component.scss | 2 +- .../input-toggle-hidden.component.scss | 4 +- .../shared-forms/markdown-textarea.component.scss | 20 +++-- .../shared-forms/peertube-checkbox.component.scss | 3 +- .../shared-forms/reactive-file.component.scss | 3 +- .../select/select-shared.component.scss | 4 +- .../instance-features-table.component.scss | 3 +- .../shared-main/buttons/button.component.scss | 2 +- .../shared/shared-main/misc/help.component.scss | 4 +- .../misc/simple-search-input.component.scss | 3 +- .../users/user-notifications.component.scss | 14 ++-- .../shared-main/users/user-quota.component.scss | 2 +- .../app/shared/shared-moderation/moderation.scss | 7 +- .../report-modals/report.component.scss | 2 +- .../shared-share-modal/video-share.component.scss | 6 +- .../subscribe-button.component.scss | 10 +-- .../abstract-video-list.scss | 10 ++- .../video-download.component.scss | 8 +- .../video-miniature.component.scss | 5 +- .../videos-selection.component.scss | 8 +- .../video-add-to-playlist.component.scss | 19 +++-- ...video-playlist-element-miniature.component.scss | 14 ++-- .../video-playlist-miniature.component.scss | 3 +- client/src/sass/application.scss | 34 ++++---- client/src/sass/bootstrap.scss | 29 +++++-- client/src/sass/include/_actor.scss | 3 +- client/src/sass/include/_miniature.scss | 11 +-- client/src/sass/include/_mixins.scss | 95 ++++++++++++++++++---- client/src/sass/ng-select.scss | 6 +- client/src/sass/player/bezels.scss | 3 +- client/src/sass/player/context-menu.scss | 5 +- client/src/sass/player/peertube-skin.scss | 41 ++++++---- client/src/sass/player/settings-menu.scss | 16 ++-- client/src/sass/player/stats.scss | 2 +- client/src/sass/player/upnext.scss | 6 +- client/src/sass/primeng-custom.scss | 43 +++++----- client/src/standalone/videos/test-embed.scss | 11 ++- 94 files changed, 596 insertions(+), 366 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss index 9886bdfef..defc83203 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -23,9 +23,10 @@ margin-bottom: 20px; .badge { + @include margin-right(5px); + font-size: 12px; font-weight: $font-semibold; - margin-right: 5px; &.category { background-color: pvar(--mainColor); @@ -66,9 +67,10 @@ &:hover, &:active { &::after { + @include margin-left(0.2em); + content: '#'; display: inline-block; - margin-left: 0.2em; } } diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss index 61b46dcbd..daff00df5 100644 --- a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss +++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss @@ -22,8 +22,9 @@ text-align: center; li { + @include margin-right(10px); + display: inline-block; - margin-right: 10px; } } } diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index 2dfb057e7..da3751b47 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -29,10 +29,10 @@ my-actor-avatar { @include actor-avatar-size(75px); + @include margin-right(15px); grid-column: 1; grid-row: 1 / 3; - margin-right: 15px; } a { @@ -51,13 +51,14 @@ } .actor-counters { + @include margin-left(15px); + grid-row: 1; grid-column: 3; color: pvar(--greyForegroundColor); font-size: 16px; display: flex; align-items: center; - margin-left: 15px; } .actor-counters > *:not(:last-child)::after { @@ -92,7 +93,7 @@ my-subscribe-button { overflow: hidden; my-video-miniature { - margin-right: 15px; + @include margin-right(15px); min-width: $video-thumbnail-medium-width; max-width: $video-thumbnail-medium-width; } diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index 2e99fe8a5..1a1ad1b53 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -23,13 +23,13 @@ max-width: $max-channels-width; simple-search-input { - margin-left: auto; + @include margin-left(auto); } } my-user-moderation-dropdown, .badge { - margin-left: 10px; + @include margin-left(10px); position: relative; top: 3px; diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index cc2a98a17..b99a779a1 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -14,6 +14,7 @@ form { input[type=text] { @include peertube-input-text($form-base-input-width); + display: block; } @@ -53,13 +54,14 @@ my-select-checkbox { input[type=submit] { @include peertube-button; @include orange-button; + @include margin-left(auto); display: flex; - margin-left: auto; + .form-error { + @include margin-left(5px); + display: inline; - margin-left: 5px; } } diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss index 35f38aae0..8a120bd61 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss @@ -18,6 +18,6 @@ a { .action-cell { my-button:first-child { - margin-right: 10px; + @include margin-right(10px); } } diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index 1ed0d925f..55256c273 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -1,8 +1,9 @@ @import 'mixins'; .form-sub-title { + @include margin-right(30px); + flex-grow: 0; - margin-right: 30px; } .badge { diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss index 30b9f2147..ff9a83fea 100644 --- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss +++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss @@ -25,7 +25,7 @@ a { .select-filter-block { &:not(:last-child) { - margin-right: 10px; + @include margin-right(10px); } label { diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss index a6f931e3b..39e54c315 100644 --- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss @@ -1,7 +1,7 @@ @import 'mixins'; my-feed { - margin-left: 5px; + @include margin-left(5px); display: inline-block; width: 15px; } diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss index 20f169e13..7e532f931 100644 --- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss +++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss @@ -18,12 +18,13 @@ margin-bottom: 15px; my-global-icon { - margin-right: 5px; + @include margin-right(5px); } } .badge { + @include margin-left(15px); + font-size: 13px; font-weight: $font-semibold; - margin-left: 15px; } diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss index 47cb1e6e5..0ca49aef4 100644 --- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss +++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss @@ -12,8 +12,9 @@ margin-bottom: 10px; .plugin-name { + @include margin-right(10px); + font-size: 16px; - margin-right: 10px; font-weight: $font-semibold; } @@ -22,7 +23,7 @@ } .plugin-icon { - margin-left: 10px; + @include margin-left(10px); my-global-icon { @include apply-svg-color(pvar(--greyForegroundColor)); @@ -34,11 +35,11 @@ } .buttons { - margin-left: auto; + @include margin-left(auto); width: max-content; > *:not(:last-child) { - margin-right: 10px; + @include margin-right(10px); } } } diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss index 65ee6ec5f..6698646cd 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.scss +++ b/client/src/app/+admin/system/jobs/jobs.component.scss @@ -25,7 +25,7 @@ .select-filter-block { &:not(:last-child) { - margin-right: 10px; + @include margin-right(10px); } label { @@ -43,7 +43,7 @@ } td .glyphicon { - margin-right: 10px; + @include margin-right(10px); } pre { diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index 1a7c3be75..e2e5a5932 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss @@ -19,8 +19,9 @@ } .log-level { + @include margin-right(5px); + font-weight: $font-semibold; - margin-right: 5px; } .log-by { @@ -54,7 +55,7 @@ my-button, .peertube-select-container, ng-select { - margin-left: 10px; + @include margin-left(10px); } } @@ -65,8 +66,9 @@ .peertube-select-container, ng-select, my-button { + @include margin-left(0 !important); + width: 100% !important; - margin-left: 0 !important; margin-bottom: 10px !important; } @@ -84,8 +86,9 @@ .peertube-select-container, ng-select, my-button { + @include margin-left(0 !important); + width: 100% !important; - margin-left: 0 !important; margin-bottom: 10px !important; } diff --git a/client/src/app/+admin/system/system.component.scss b/client/src/app/+admin/system/system.component.scss index 766d7853b..3ffcb67c0 100644 --- a/client/src/app/+admin/system/system.component.scss +++ b/client/src/app/+admin/system/system.component.scss @@ -1,4 +1,8 @@ +@import '_variables'; +@import '_mixins'; + .form-sub-title { + @include margin-right(30px); + flex-grow: 0; - margin-right: 30px; } diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index db4979a51..f004775c0 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -24,9 +24,10 @@ tr.banned > td { } .user-table-primary-text .glyphicon { + @include margin-left(0.1rem); + font-size: 80%; color: #808080; - margin-left: 0.1rem; } p-tableCheckbox { diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index 62ae722c3..6154980c6 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss @@ -14,7 +14,7 @@ input[type=email] { } .modal-body { - text-align: left; + text-align: start; .forgot-password-instructions { margin-bottom: 20px; @@ -55,13 +55,14 @@ input[type=email] { } .login-form-and-externals { + @include margin-left(10px); + @include margin-right(10px); + display: flex; flex-wrap: wrap; font-size: 15px; max-width: 450px; margin-bottom: 40px; - margin-left: 10px; - margin-right: 10px; form { margin: 0; @@ -125,11 +126,12 @@ input[type=email] { } .instance-information { + @include margin-left(10px); + @include margin-right(10px); + max-width: 600px; min-width: 350px; margin-bottom: 40px; - margin-left: 10px; - margin-right: 10px; } .terms-anchor { @@ -146,9 +148,10 @@ input[type=email] { .login-form-and-externals, .instance-information { + @include margin-left(0); + @include margin-right(0); + width: 100%; - margin-left: 0; - margin-right: 0; max-width: 450px; min-width: unset; align-self: center; diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss index c1e1f2432..7a5e7cbeb 100644 --- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss +++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss @@ -17,12 +17,13 @@ label { input[type=submit] { @include peertube-button; @include orange-button; + @include margin-left(auto); display: flex; - margin-left: auto; + .form-error { + @include margin-left(5px); + display: inline; - margin-left: 5px; } } diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss index abf52504a..346d20e20 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss @@ -38,7 +38,7 @@ my-user-notifications { } .peertube-select-container { - margin-left: 0 !important; + @include margin-left(0 !important); } } } diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss index 667726c22..0b366716d 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss @@ -43,7 +43,7 @@ input { &[type=submit] { @include peertube-button; @include orange-button; - margin-left: auto; + @include margin-left(auto); } } diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss index 191c5169d..c236f322f 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss @@ -15,7 +15,7 @@ input[type=text] { } my-edit-button { - margin-right: 10px; + @include margin-right(10px); } .video-channel { @@ -25,8 +25,7 @@ my-edit-button { my-actor-avatar { @include actor-avatar-size(80px); - - margin-right: 10px; + @include margin-right(10px); } } @@ -49,9 +48,10 @@ my-edit-button { } .video-channel-name { + @include margin-left(5px); + font-size: 14px; color: $grey-actor-name; - margin-left: 5px; } .video-channel-buttons { @@ -77,7 +77,7 @@ my-edit-button { padding-bottom: 10px; img { - margin-right: 0; + @include margin-right(0); } .video-channel-buttons { @@ -97,7 +97,7 @@ my-edit-button { } .video-channel-name { - margin-left: 0 !important; + @include margin-left(0 !important); } } diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss index 28b809f71..1451cf415 100644 --- a/client/src/app/+my-library/my-history/my-history.component.scss +++ b/client/src/app/+my-library/my-history/my-history.component.scss @@ -24,11 +24,11 @@ } .history-switch { - grid-column: 3; + @include margin-left(auto); + @include margin-right(15px); + grid-column: 3; display: flex; - margin-left: auto; - margin-right: 15px; label { margin: 0 0 0 5px; diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss index dfc8fc99e..62763045d 100644 --- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss @@ -16,10 +16,10 @@ $image-height: 45px; @include miniature-thumbnail; + @include margin-right(0.5rem); height: $image-height; width: #{(16/9) * $image-height}; - margin-right: 0.5rem; border-radius: 2px; border: 0; background: transparent; @@ -59,9 +59,10 @@ line-height: 1rem; div .glyphicon { + @include margin-left(0.1rem); + font-size: 80%; color: #808080; - margin-left: 0.1rem; } div + div { diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss index 6c1ddf716..d02f9ed27 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss @@ -11,7 +11,7 @@ input[type=text] { > my-actor-avatar { @include actor-avatar-size(80px); - margin-right: 10px; + @include margin-right(10px); } } @@ -32,9 +32,10 @@ input[type=text] { } .video-channel-name { + @include margin-left(5px); + font-size: 14px; color: $grey-actor-name; - margin-left: 5px; } } } @@ -50,7 +51,7 @@ input[type=text] { } my-actor-avatar { - margin-left: 7px; + @include margin-left(7px); display: inline-block; vertical-align: top; } @@ -78,6 +79,6 @@ input[type=text] { } img { - margin-right: 0; + @include margin-right(0); } } diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss index 67587a58a..f09500682 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss @@ -8,9 +8,10 @@ } .playlist-info { + @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1)); + grid-column: 1; background-color: pvar(--submenuBackgroundColor); - margin-left: calc(#{pvar(--horizontalMarginContent)} * -1); margin-top: -$sub-menu-margin-bottom; padding: 15px; @@ -34,7 +35,7 @@ @include grey-button; @include apply-svg-color(pvar(--actionButtonColor)); - margin-right: 10px; + @include margin-right(10px); } } @@ -91,8 +92,8 @@ my-video-playlist-miniature { my-video-playlist-miniature, .playlist-buttons { - margin-left: auto; - margin-right: auto; + @include margin-left(auto); + @include margin-right(auto); } ::ng-deep my-video-playlist-element-miniature { @@ -102,7 +103,7 @@ my-video-playlist-miniature { } .position { - margin-right: 5px !important; + @include margin-right(5px !important); } } } diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss index 94187efd4..f84b733a6 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss @@ -18,8 +18,9 @@ input[type=text] { } .video-playlist-buttons { + @include margin-left(10px); + display: flex; - margin-left: 10px; align-self: flex-end; } @@ -33,7 +34,7 @@ my-video-playlist-miniature { } my-delete-button { - margin-right: 10px; + @include margin-right(10px); } @include on-small-main-col { @@ -46,8 +47,9 @@ my-delete-button { } .video-playlist-buttons { + @include margin-left(auto); + margin-top: 10px; - margin-left: auto; } } @@ -62,6 +64,6 @@ my-delete-button { } .action-button { - margin-left: 0; + @include margin-left(0); } } diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss index 57623c36f..57d27aa8e 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.scss +++ b/client/src/app/+my-library/my-videos/my-videos.component.scss @@ -7,7 +7,7 @@ input[type=text] { .peertube-select-container { @include peertube-select-container(auto); - margin-left: 0.5rem; + @include margin-left(0.5rem); } h1 { @@ -20,7 +20,7 @@ h1 { @include button-with-icon(18px, 3px, -1px); &:not(:last-child) { - margin-right: 10px; + @include margin-right(10px); } } } @@ -38,13 +38,14 @@ h1 { } .action-button { + @include margin-left(10px); + display: flex; - margin-left: 10px; align-self: flex-end; } my-edit-button { - margin-right: 10px; + @include margin-right(10px); } @include on-small-main-col { @@ -58,8 +59,9 @@ my-edit-button { } .action-button { + @include margin-left(auto); + margin-top: 10px; - margin-left: auto; } } @@ -72,11 +74,11 @@ my-edit-button { margin-bottom: 12px; } .peertube-select-container { - margin-left: 0; + @include margin-left(0); } } .action-button { - margin-left: 0; + @include margin-left(0); } } diff --git a/client/src/app/+page-not-found/page-not-found.component.scss b/client/src/app/+page-not-found/page-not-found.component.scss index 06c1d758e..a997dd9d7 100644 --- a/client/src/app/+page-not-found/page-not-found.component.scss +++ b/client/src/app/+page-not-found/page-not-found.component.scss @@ -2,9 +2,10 @@ @import '_mixins'; .root { + @include margin-left(auto); + @include margin-right(auto); + height: 100%; - margin-left: auto; - margin-right: auto; text-align: center; padding-top: 150px; display: flex; @@ -12,20 +13,21 @@ flex-direction: column-reverse; .box { - text-align: left; + text-align: start; font-size: 120%; padding: 0 15px; } img { - margin-left: auto; + @include margin-left(auto); + width: 220px; height: auto; } @media screen and (max-width: $mobile-view) { img { - margin-right: auto; + @include margin-right(auto); } } diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss index cfb7a1d98..b0c09e6aa 100644 --- a/client/src/app/+search/search-filters.component.scss +++ b/client/src/app/+search/search-filters.component.scss @@ -12,9 +12,9 @@ form { .peertube-radio-container { @include peertube-radio-container; + @include margin-right(30px); display: inline-block; - margin-right: 30px; } .peertube-select-container { @@ -38,19 +38,18 @@ input[type=submit] { } .submit-button { - text-align: right; + text-align: end; } .reset-button { @include peertube-button; + @include margin-right(1rem); font-weight: $font-semibold; display: inline-block; padding: 0 10px; white-space: nowrap; background: transparent; - - margin-right: 1rem; } .reset-button-small { diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss index a8002ba88..2a19e369a 100644 --- a/client/src/app/+search/search.component.scss +++ b/client/src/app/+search/search.component.scss @@ -37,10 +37,10 @@ .icon.icon-filter { @include icon(20px); + @include margin-right(5px); position: relative; top: -1px; - margin-right: 5px; background-image: url('../../assets/images/feather/filter.svg'); } } @@ -78,9 +78,10 @@ } .video-channel-name { + @include margin-left(5px); + font-size: $video-miniature-row-info-font-size; color: pvar(--greyForegroundColor); - margin-left: 5px; } // Use the same breakpoints than in video-miniature diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss index 3b4791d08..5ae1037ed 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.scss +++ b/client/src/app/+signup/+register/custom-stepper.component.scss @@ -5,8 +5,8 @@ $grey-color: #9CA3AB; $index-block-height: 32px; .container { - padding-left: 0; - padding-right: 0; + @include padding-left(0); + @include padding-right(0); max-width: unset !important; } diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss index c6ef15ba5..1e82ac765 100644 --- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss +++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss @@ -8,7 +8,7 @@ justify-content: center; .playlist-wrapper { - margin-right: 15px; + @include margin-right(15px); padding-bottom: 15px; } } @@ -24,9 +24,9 @@ } .playlists { - justify-content: left; + @include margin-left(pvar(--horizontalMarginContent) !important); + @include margin-right(pvar(--horizontalMarginContent) !important); - margin-left: pvar(--horizontalMarginContent) !important; - margin-right: pvar(--horizontalMarginContent) !important; + justify-content: left; } } diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 470f64878..3e66ac147 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -71,12 +71,12 @@ flex-wrap: wrap; > *:not(:last-child) { - margin-right: 15px; + @include margin-right(15px); } } .channel-buttons.right { - margin-left: 45px; + @include margin-left(45px); } // Only used by mobile @@ -85,7 +85,7 @@ } .owner-card { - margin-left: 105px; + @include margin-left(105px); grid-column: 2; // Takes all the column grid-row: 1 / 3; @@ -112,7 +112,7 @@ } .actor-info { - margin-left: 15px; + @include margin-left(15px); } h4 { @@ -160,8 +160,9 @@ } .owner-card { + @include margin-left(60px); + grid-row: 2; - margin-left: 60px; } } @@ -215,8 +216,9 @@ padding: 0; .avatar-row { + @include margin-right(30px); + grid-column: 1; - margin-right: 30px; } .owner-description { @@ -233,7 +235,7 @@ .view-account.complete { display: block; - text-align: right; + text-align: end; margin-top: 10px; color: pvar(--mainColor); } 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 c1c7c686d..b7b4400c1 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 @@ -52,7 +52,7 @@ my-peertube-checkbox { } .captions-header { - text-align: right; + text-align: end; margin-bottom: 1rem; } @@ -77,10 +77,10 @@ my-peertube-checkbox { } .caption-entry-label { + @include margin-right(20px); + font-size: 15px; font-weight: bold; - - margin-right: 20px; width: 150px; } @@ -108,12 +108,12 @@ my-peertube-checkbox { } .submit-container { - text-align: right; + text-align: end; .message-submit { - display: inline-block; - margin-right: 25px; + @include margin-right(25px); + display: inline-block; color: pvar(--greyForegroundColor); font-size: 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 d9f348a70..435dd36fa 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 @@ -23,6 +23,7 @@ .progress { @include progressbar; + flex-grow: 1; height: 30px; font-size: 14px; @@ -31,12 +32,13 @@ .progress-bar { background-color: $green; line-height: 30px; - text-align: left; + text-align: start; font-weight: $font-semibold; span { + @include margin-left(13px); + color: pvar(--mainBackgroundColor); - margin-left: 13px; } } } @@ -44,7 +46,6 @@ input { @include peertube-button; @include grey-button; - - margin-left: 10px; + @include margin-left(10px); } } diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html index 42adfed8d..3ee818c8b 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html @@ -10,7 +10,10 @@ (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> - + Markdown compatible that supports: diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss index 7743bd41d..5c97fb13c 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss @@ -14,7 +14,7 @@ form { margin-bottom: 10px; my-actor-avatar { - margin-right: 10px; + @include margin-right(10px); } .form-group { @@ -26,12 +26,12 @@ form { textarea { @include peertube-textarea(100%, $peertube-textarea-height); @include button-focus(pvar(--mainColorLightest)); + @include padding-right($markdown-icon-width + 15px !important); min-height: calc(#{$peertube-textarea-height} - 15px * 2); - padding-right: $markdown-icon-width + 15px !important; @media screen and (max-width: 600px) { - padding-right: $markdown-icon-width + 19px !important; + @include padding-right($markdown-icon-width + 19px !important); } &:focus::placeholder { @@ -45,6 +45,12 @@ form { top: 5px; right: 9px; + // inset-inline is not well supported by web browsers + &.is-rtl { + right: unset; + left: 9px; + } + ::ng-deep .help-tooltip-button { my-global-icon { height: $markdown-icon-height; @@ -86,9 +92,10 @@ form { flex: 1; code { + @include margin-left(5px); + display: inline-block; vertical-align: middle; - margin-left: 5px; } } } diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts index 0e1362ad3..c926d8d70 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts @@ -1,5 +1,18 @@ import { Observable } from 'rxjs' -import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' +import { getLocaleDirection } from '@angular/common' +import { + Component, + ElementRef, + EventEmitter, + Inject, + Input, + LOCALE_ID, + OnChanges, + OnInit, + Output, + SimpleChanges, + ViewChild +} from '@angular/core' import { Router } from '@angular/router' import { Notifier, User } from '@app/core' import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators' @@ -37,7 +50,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges, private notifier: Notifier, private videoCommentService: VideoCommentService, private modalService: NgbModal, - private router: Router + private router: Router, + @Inject(LOCALE_ID) private localeId: string ) { super() } @@ -153,6 +167,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges, this.form.value['text'] = this.textareaElement.nativeElement.value = '' } + isRTL () { + return getLocaleDirection(this.localeId) === 'rtl' + } + private addCommentReply (commentCreate: VideoCommentCreate) { return this.videoCommentService .addCommentReply(this.video.id, this.parentComment.id, commentCreate) 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 a4d2e237c..7868991ba 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 @@ -6,10 +6,11 @@ display: flex; .left { + @include margin-right(10px); + display: flex; flex-direction: column; align-items: center; - margin-right: 10px; .vertical-border { width: 2px; @@ -51,6 +52,9 @@ my-actor-avatar { } .video-author { + @include padding-right(6px); + @include padding-left(6px); + height: 20px; background-color: #888888; border-radius: 12px; @@ -60,8 +64,6 @@ my-actor-avatar { flex-direction: row; align-items: center; display: inline-flex; - padding-right: 6px; - padding-left: 6px; color: #fff !important; } @@ -86,9 +88,10 @@ my-actor-avatar { } .comment-date { + @include margin-left(5px); + font-size: 90%; color: pvar(--greyForegroundColor); - margin-left: 5px; text-decoration: none; &:hover { @@ -129,9 +132,10 @@ my-actor-avatar { ::ng-deep .dropdown-toggle, .comment-action-reply { + @include margin-right(10px); + color: pvar(--greyForegroundColor); cursor: pointer; - margin-right: 10px; &:hover, &:active, @@ -162,25 +166,25 @@ my-video-comment-add { } .left { - margin-right: 6px; + @include margin-right(6px); } } @media screen and (max-width: 1200px) { .children { - margin-left: -10px; + @include margin-left(-10px); } } @media screen and (max-width: 600px) { .children { - margin-left: -20px; + @include margin-left(-20px); .left { align-items: flex-start; .vertical-border { - margin-left: 2px; + @include margin-left(2px); } } } @@ -189,7 +193,7 @@ my-video-comment-add { flex-direction: column; .comment-date { - margin-left: 0; + @include margin-left(0); } } } diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss index a7e858069..29a00ee3f 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss @@ -13,19 +13,21 @@ .glyphicon, .comment-thread-loading { - margin-right: 5px; + @include margin-right(5px); + display: inline-block; font-size: 13px; } .title-block { .title-page { - margin-right: 0; + @include margin-right(0); } my-feed { + @include margin-left(5px); + display: inline-block; - margin-left: 5px; opacity: 0; transition: ease-in .2s opacity; width: 12px; @@ -47,7 +49,7 @@ @media screen and (max-width: 600px) { .view-replies { - margin-left: 46px; + @include margin-left(46px); } } diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss index 5e0373afc..89d44c067 100644 --- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss +++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss @@ -10,8 +10,9 @@ .title-page.active, .title-page.title-page-single { + @include margin-right(.5rem !important); + margin-bottom: unset; - margin-right: .5rem !important; } } @@ -20,14 +21,16 @@ } .title-page-autoplay { + @include margin-left(auto); + display: flex; width: max-content; height: max-content; align-items: center; - margin-left: auto; span { - margin-right: 0.3rem; + @include margin-right(0.3rem); + text-transform: uppercase; font-size: 85%; font-weight: 600; diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss index 20e32240c..f269398cb 100644 --- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss +++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss @@ -15,9 +15,9 @@ .wrapper { @include actor-avatar-size(35px); + @include margin-right(5px); position: relative; - margin-right: 5px; margin-bottom: 5px; &.generic-channel { 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 b3f93b83c..d1a0f97f7 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 @@ -26,7 +26,7 @@ display: flex; .playlist-by { - margin-right: 5px; + @include margin-right(5px); } .playlist-index span:first-child::after { @@ -40,7 +40,7 @@ margin: 10px 0; my-global-icon:not(:last-child) { - margin-right: .5rem; + @include margin-right(.5rem); } my-global-icon { @@ -59,7 +59,7 @@ ::ng-deep { .video { .position { - margin-right: 0; + @include margin-right(0); } .video-info { 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 af807a208..4a2e05c62 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -152,7 +152,7 @@ $video-info-margin-left: 44px; .video-info-name { @include peertube-word-wrap; - margin-right: 30px; + @include margin-right(30px); min-height: 40px; // Align with the action buttons font-size: 27px; font-weight: $font-semibold; @@ -167,9 +167,10 @@ $video-info-margin-left: 44px; } .video-info-date-views { - align-self: start; + @include margin-right(10px); + margin-bottom: 10px; - margin-right: 10px; + align-self: start; font-size: 1em; } @@ -209,15 +210,19 @@ $video-info-margin-left: 44px; } my-subscribe-button { - margin-left: 5px; + @include margin-left(5px); } } .video-actions-rates { - margin: 0 0 10px; + @include margin-left(auto); + @include margin-right(0); + + margin-top: 0; + margin-bottom: 10px; + align-items: start; width: max-content; - margin-left: auto; .video-actions { height: 40px; // Align with the title @@ -227,7 +232,7 @@ $video-info-margin-left: 44px; .action-button:not(:first-child), .action-dropdown, my-video-actions-dropdown { - margin-left: 5px; + @include margin-left(5px); } ::ng-deep.action-button { @@ -305,7 +310,7 @@ $video-info-margin-left: 44px; } .icon-text { - margin-left: 3px; + @include margin-left(3px); } } } @@ -341,8 +346,11 @@ $video-info-margin-left: 44px; } .video-info-description { - margin: 20px 0; - margin-left: $video-info-margin-left; + @include margin-left($video-info-margin-left); + @include margin-right(0); + + margin-top: 20px; + margin-bottom: 20px; font-size: 15px; .video-info-description-html { @@ -355,7 +363,7 @@ $video-info-margin-left: 44px; .glyphicon, .description-loading { - margin-left: 3px; + @include margin-left(3px); } .description-loading { @@ -376,7 +384,7 @@ $video-info-margin-left: 44px; } .video-attributes { - margin-left: $video-info-margin-left; + @include margin-left($video-info-margin-left); } .video-attributes .video-attribute { @@ -385,8 +393,9 @@ $video-info-margin-left: 44px; margin-bottom: 12px; .video-attribute-label { + @include padding-right(5px); + min-width: 142px; - padding-right: 5px; display: inline-block; color: pvar(--greyForegroundColor); font-weight: $font-bold; @@ -413,8 +422,9 @@ $video-info-margin-left: 44px; } my-recommended-videos { + @include padding-left(15px); + display: block; - padding-left: 15px; min-width: 250px; } @@ -432,14 +442,15 @@ my-video-comments { @media screen and (max-width: $small-view) { .privacy-concerns { - margin-left: $menu-width - 15px; // Menu is absolute + @include margin-left($menu-width - 15px); // Menu is absolute } } :host-context(.expanded) { .privacy-concerns { + @include margin-left(-15px); + width: 100%; - margin-left: -15px; } } @@ -473,8 +484,9 @@ my-video-comments { } .privacy-concerns-button { + @include margin-left(auto); + padding: 5px 8px 5px 7px; - margin-left: auto; border-radius: 3px; white-space: nowrap; cursor: pointer; @@ -487,8 +499,9 @@ my-video-comments { } .privacy-concerns-okay { + @include margin-left(10px); + background-color: pvar(--mainColor); - margin-left: 10px; } } @@ -525,7 +538,7 @@ my-video-comments { } my-recommended-videos { - padding-left: 0; + @include padding-left(0); } } diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss index 8fbac1b46..cb3ae2b9b 100644 --- a/client/src/app/+videos/video-list/overview/video-overview.component.scss +++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss @@ -53,17 +53,18 @@ my-actor-avatar { @include actor-avatar-size(28px); + @include margin-right(8px); font-size: initial; - margin-right: 8px; } } .followers { + @include margin-left(10px); + color: pvar(--greyForegroundColor); font-weight: normal; font-size: 14px; - margin-left: 10px; position: relative; top: 2px; } @@ -87,8 +88,9 @@ overflow: initial; .section-title { + @include margin-left(10px); + font-size: 17px; - margin-left: 10px; } } } diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss index 6daacc78e..df127e1cb 100644 --- a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss +++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss @@ -1,3 +1,5 @@ +@import '_mixins'; + .btn-group label { border: 1px solid transparent; border-radius: 9999px !important; @@ -5,13 +7,14 @@ opacity: .8; &:not(:first-child) { - margin-left: .5rem; + @include margin-left(.5rem); } my-global-icon { + @include margin-right(.1rem); + position: relative; top: -2px; height: 1rem; - margin-right: .1rem; } } diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 6b1f7f8f1..472245411 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -83,10 +83,11 @@ } .icon.icon-logo { + @include margin-right(0.5rem); + display: inline-block; width: 23px; height: 24px; - margin-right: 0.5rem; } } diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 2056d6669..c1e296182 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Hotkey, HotkeysService } from 'angular2-hotkeys' import { filter, map, pairwise, switchMap } from 'rxjs/operators' -import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common' +import { DOCUMENT, getLocaleDirection, PlatformLocation, ViewportScroller } from '@angular/common' import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core' import { DomSanitizer, SafeHtml } from '@angular/platform-browser' import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router' @@ -107,6 +107,7 @@ export class AppComponent implements OnInit, AfterViewInit { this.openModalsIfNeeded() this.document.documentElement.lang = getShortLocale(this.localeId) + this.document.documentElement.dir = getLocaleDirection(this.localeId) } ngAfterViewInit () { diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss index b39ffa98d..e0bc34727 100644 --- a/client/src/app/core/hotkeys/hotkeys.component.scss +++ b/client/src/app/core/hotkeys/hotkeys.component.scss @@ -51,24 +51,25 @@ .cfp-hotkeys-keys { padding: 5px; - text-align: right; + text-align: end; } .cfp-hotkeys-key { + @include margin-right(5px); + display: inline-block; color: #fff; background-color: #333; border: 1px solid #333; border-radius: 5px; text-align: center; - margin-right: 5px; box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb; padding: 5px 9px; font-size: 1em; } .cfp-hotkeys-text { - padding-left: 10px; + @include padding-left(10px); font-size: 1em; } diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 7364ab50b..45cef7b9a 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -2,22 +2,22 @@ @import '_mixins'; my-search-typeahead { - margin-right: 15px; + @include margin-right(15px); } .publish-button { @include peertube-button-link; @include orange-button; @include button-with-icon(22px, 3px, -1px); - - margin-right: 25px; + @include margin-right(25px); @media screen and (max-width: 600px) { - margin-right: 10px; + @include margin-right(10px); + padding: 0 10px; .icon.icon-upload { - margin-right: 0; + @include margin-right(0); } .publish-button-label { diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index 3e0350ba0..ed7f3bd65 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss @@ -6,8 +6,9 @@ #search-video { @include peertube-input-text($search-input-width); - padding-left: 10px; - padding-right: 40px; // For the search icon + @include padding-left(10px); + @include padding-right(40px); // For the search icon + font-size: 14px; &::placeholder { @@ -17,11 +18,12 @@ .icon-search { @include icon(25px); + @include margin-left(-35px); + height: 18px; // yolo position: absolute; - margin-left: -35px; margin-top: 3.5px; right: 10px; } @@ -65,8 +67,9 @@ li.suggestion { margin-bottom: .5rem; em { + @include margin-right(0.2rem); + font-weight: 600; - margin-right: 0.2rem; font-style: normal; } } @@ -81,7 +84,7 @@ li.suggestion { } @media screen and (min-width: $mobile-view) { - margin-left: 10px; + @include margin-left(10px); } @media screen and (max-width: $small-view) { diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 16c79efc1..46dd807ec 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -3,7 +3,10 @@
-
+
@@ -18,8 +21,10 @@
- + Public profile diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index daaed2d32..8e9c02b23 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -7,16 +7,17 @@ $footer-links-base-opacity: .8; .menu-link { @include disable-default-a-behaviour; + @include padding-left($menu-lateral-padding); + @include padding-right(20px); display: flex; align-items: center; - padding-left: $menu-lateral-padding; + color: pvar(--menuForegroundColor); cursor: pointer; font-size: 16px; white-space: normal; word-break: break-word; - padding-right: 20px; transition: background-color .1s ease-in-out; line-height: $line-height-normal; @@ -31,11 +32,11 @@ $footer-links-base-opacity: .8; my-global-icon { @include apply-svg-color(#808080); + @include margin-right($menu-link-icon-margin-right); display: flex; width: $menu-link-icon-size; height: $menu-link-icon-size; - margin-right: $menu-link-icon-margin-right; } } @@ -99,8 +100,8 @@ menu { } my-notification { - margin-left: auto; - margin-right: 15px; + @include margin-left(auto); + @include margin-right(15px); } .logged-in-more { @@ -111,16 +112,18 @@ my-notification { .dropdown-toggle-indicator { display: inherit !important; } + .dropdown-toggle:first-child { - padding-right: 30px !important; + @include padding-left(30px !important); } } } $main-radius: 25px; + @include margin-left(13px); + flex: 1; - margin-left: 13px; border-radius: $main-radius; transition: all .1s ease-in-out; cursor: pointer; @@ -180,7 +183,7 @@ my-notification { } my-actor-avatar { - margin-right: 10px; + @include margin-right(10px); } .logged-in-info { @@ -224,11 +227,11 @@ my-actor-avatar { min-height: 35px; my-global-icon { + // Keep aligned with other icons + @include margin-left($additional-margin); + width: $icon-size; height: $icon-size; - - // Keep aligned with other icons - margin-left: $additional-margin; } &.active, @@ -246,7 +249,7 @@ my-actor-avatar { border-left: $border-left-width solid var(--mainColor); my-global-icon { - margin-left: $additional-margin - $border-left-width; + @include margin-left($additional-margin - $border-left-width); } } } @@ -280,13 +283,13 @@ my-actor-avatar { .block-title { @include ellipsis; + @include margin-left(26px); + @include margin-right(30px); text-transform: uppercase; font-weight: $font-bold; // Bold font-size: 13px; margin-bottom: 25px; - margin-left: 26px; - margin-right: 30px; } a { @@ -314,6 +317,8 @@ my-actor-avatar { a, span[role=button] { + @include margin-right(8px); + display: inline-block; text-decoration: none; color: pvar(--menuForegroundColor); @@ -322,7 +327,6 @@ my-actor-avatar { font-size: 90%; font-weight: 500; line-height: 1.4rem; - margin-right: 8px; } } @@ -397,10 +401,10 @@ my-actor-avatar { my-global-icon { &[iconName=playlists] { + @include margin-right(16px); + height: 24px; width: 24px; - - margin-right: 16px; } &[iconName=videos] { diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index fa104cc43..be6e8af51 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -94,6 +94,7 @@ export class MenuComponent implements OnInit { this.htmlServerConfig = this.serverService.getHTMLConfig() this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage() + this.isLoggedIn = this.authService.isLoggedIn() this.updateUserState() this.buildMenuSections() diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss index 554c20ca9..23d7181d0 100644 --- a/client/src/app/menu/notification.component.scss +++ b/client/src/app/menu/notification.component.scss @@ -141,7 +141,7 @@ position: relative; .unread-notifications { - margin-left: 20px; + @include margin-left(20px); } .unread-notifications { diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss index 5e9e3dc51..f469164db 100644 --- a/client/src/app/modal/welcome-modal.component.scss +++ b/client/src/app/modal/welcome-modal.component.scss @@ -17,9 +17,10 @@ } .mascot { + @include margin-right(2rem); + display: block; min-width: 170px; - margin-right: 2rem; } .subtitle { diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss index 5da624963..cb42fe46b 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss @@ -1,3 +1,6 @@ +@import '_mixins'; +@import '_variables'; + .comment-flagged-account, .account-flagged-handle { font-size: 11px; @@ -5,13 +8,14 @@ } .abuse-states .glyphicon-comment { - margin-left: 0.5rem; + @include margin-left(0.5rem); } .abuse-messages { my-global-icon { + @include margin-left(3px); + width: 22px; - margin-left: 3px; position: relative; top: -2px; } diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss index 08e80c3b4..a296cd173 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss @@ -5,7 +5,7 @@ display: flex; my-actor-avatar { - margin-right: 15px; + @include margin-right(15px); } .actor-info { diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss index dcd931090..d8796e12e 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss @@ -2,7 +2,7 @@ @import '_mixins'; my-video-miniature { - margin-right: 15px; + @include margin-right(15px); display: inline-block; min-width: $video-thumbnail-width; max-width: $video-thumbnail-width; diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss index d2f68e2a4..e03e9b19f 100644 --- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss +++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss @@ -3,11 +3,11 @@ input { @include peertube-input-text(auto); + @include padding-left(15px !important); + @include padding-right(15px !important); // set again properties of peertube-input-text that are overriden by .input-group font-size: 15px !important; - padding-left: 15px !important; - padding-right: 15px !important; } .eye-button { diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss index 1f72dbc32..a34d9ebea 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss @@ -24,12 +24,13 @@ $input-border-radius: 3px; } .nav-preview { + @include padding-left(10px); + @include padding-right(10px); + display: block; - text-align: right; + text-align: end; padding-top: 10px; padding-bottom: 10px; - padding-left: 10px; - padding-right: 10px; border-top: 1px dashed $input-border-color; border-left: 1px solid $input-border-color; border-right: 1px solid $input-border-color; @@ -77,7 +78,7 @@ $input-border-radius: 3px; border-bottom: 2px solid pvar(--mainColor); :first-child { - margin-left: auto; + @include margin-left(auto); } ::ng-deep { @@ -91,7 +92,7 @@ $input-border-radius: 3px; } .maximize-button { - margin-left: 5px; + @include margin-left(5px); } } } @@ -120,10 +121,11 @@ $input-border-radius: 3px; .nav-preview { @include nav-preview-medium(); + @include padding-right(0); + @include padding-left(0); + padding-top: #{$nav-preview-vertical-padding / 2}; padding-bottom: #{$nav-preview-vertical-padding / 2}; - padding-left: 0; - padding-right: 0; position: absolute; background-color: pvar(--mainBackgroundColor); width: 100% !important; @@ -132,7 +134,7 @@ $input-border-radius: 3px; border-right: 0; :last-child { - margin-right: pvar(--horizontalMarginContent); + @include margin-right(pvar(--horizontalMarginContent)); } } @@ -181,11 +183,11 @@ $input-border-radius: 3px; .nav-preview { ::ng-deep .nav-link { @include ellipsis(); + @include margin-right(10px !important); display: block !important; max-width: 45% !important; padding: 5px 0 !important; - margin-right: 10px !important; text-align: center; &:not(.active) { diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss index 203b82d0b..54479fed7 100644 --- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss +++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss @@ -36,7 +36,8 @@ } .recommended { - margin-left: .5rem; + @include margin-left(.5rem); + align-self: baseline; display: inline-block; padding: 4px 6px; diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss index 84c23c1d6..a23b28147 100644 --- a/client/src/app/shared/shared-forms/reactive-file.component.scss +++ b/client/src/app/shared/shared-forms/reactive-file.component.scss @@ -16,7 +16,8 @@ } .filename { + @include margin-left(5px); + font-weight: $font-semibold; - margin-left: 5px; } } diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss index 7006adab1..9a796f545 100644 --- a/client/src/app/shared/shared-forms/select/select-shared.component.scss +++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss @@ -43,10 +43,10 @@ ng-select ::ng-deep { my-select-options + input { @include peertube-input-text($form-base-input-width); - margin-left: 5px; + @include margin-left(5px); display: block; } .input-suffix { - margin-left: 5px; + @include margin-left(5px); } diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss index 11cf11616..c8609a4c0 100644 --- a/client/src/app/shared/shared-instance/instance-features-table.component.scss +++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss @@ -12,8 +12,9 @@ table { } &.sub-label { + @include padding-left(30px); + font-weight: $font-regular; - padding-left: 30px; } .more-info { diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss index 22b24c853..25a979ac9 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.scss +++ b/client/src/app/shared/shared-main/buttons/button.component.scss @@ -24,7 +24,7 @@ my-small-loader ::ng-deep .root { a[class$=-button], span[class$=-button] { > span { - margin-left: 5px; + @include margin-left(5px); } } diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss index 68d7ad48f..51a105498 100644 --- a/client/src/app/shared/shared-main/misc/help.component.scss +++ b/client/src/app/shared/shared-main/misc/help.component.scss @@ -24,7 +24,7 @@ .popover-body { font-family: $main-fonts; - text-align: left; + text-align: start; padding: 10px; font-size: 13px; background-color: pvar(--mainBackgroundColor); @@ -36,7 +36,7 @@ } ul { - padding-left: 20px; + @include padding-left(20px); margin-bottom: 0; } } diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss index 5ae48f81b..be712979b 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss @@ -6,9 +6,10 @@ } my-global-icon { + @include margin-left(10px); + height: 28px; width: 28px; - margin-left: 10px; cursor: pointer; &:hover { diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss index b69d4b5d6..58dc88c38 100644 --- a/client/src/app/shared/shared-main/users/user-notifications.component.scss +++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss @@ -22,19 +22,20 @@ my-global-icon { @include apply-svg-color(#333); + @include margin-right(11px); + @include margin-left(3px); width: 24px; - margin-right: 11px; - margin-left: 3px; } .avatar { + @include margin-right(10px); + width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-radius: 5px; - margin-right: 10px; } .message { @@ -46,11 +47,12 @@ } .from-date { + @include padding-left(5px); + @include margin-left(auto); + font-size: 0.85em; color: pvar(--greyForegroundColor); - padding-left: 5px; min-width: 70px; - text-align: right; - margin-left: auto; + text-align: end; } } diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss index c06cafe29..3ca611b9f 100644 --- a/client/src/app/shared/shared-main/users/user-quota.component.scss +++ b/client/src/app/shared/shared-main/users/user-quota.component.scss @@ -8,7 +8,7 @@ label { .user-quota { label { - margin-right: 5px; + @include margin-right(5px); } &, diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss index b13d06f03..7c6dc9b72 100644 --- a/client/src/app/shared/shared-moderation/moderation.scss +++ b/client/src/app/shared/shared-moderation/moderation.scss @@ -9,7 +9,7 @@ font-weight: $font-semibold; display: inline-block; vertical-align: top; - text-align: right; + text-align: end; } .moderation-expanded-text { @@ -79,10 +79,10 @@ my-action-dropdown.show { $image-height: 45px; @include miniature-thumbnail; + @include margin-right(0.5rem); height: $image-height; width: #{(16/9) * $image-height}; - margin-right: 0.5rem; border-radius: 2px; border: 0; background: transparent; @@ -121,9 +121,10 @@ my-action-dropdown.show { line-height: 1rem; div .glyphicon { + @include margin-left(0.1rem); + font-size: 80%; color: #808080; - margin-left: 0.1rem; } div + div { diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss index 0567330f5..5decd36c2 100644 --- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss +++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss @@ -16,7 +16,7 @@ textarea { align-items: center; my-timestamp-input { - margin-left: 10px; + @include margin-left(10px); } } diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss index a18e3f5fc..7e4dafc91 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.scss +++ b/client/src/app/shared/shared-share-modal/video-share.component.scss @@ -50,7 +50,7 @@ my-input-toggle-hidden { cursor: pointer; .glyphicon { - margin-right: 5px; + @include margin-right(5px); } } @@ -66,7 +66,7 @@ my-input-toggle-hidden { align-items: center; .peertube-select-container { - margin-left: 10px; + @include margin-left(10px); } } @@ -77,7 +77,7 @@ my-input-toggle-hidden { align-items: center; my-timestamp-input { - margin-left: 10px; + @include margin-left(10px); } } } diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss index 897ee7799..1b0cc8c64 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss @@ -38,15 +38,15 @@ // Unlogged > .dropdown > .dropdown-toggle span { - padding-right: 3px; + @include padding-right(3px); } // Logged > .btn { - padding-right: 4px; + @include padding-right(4px); + .dropdown > button { - padding-left: 2px; + @include padding-left(2px); &::after { position: relative; @@ -62,7 +62,7 @@ } span.followers-count { - padding-left: 5px; + @include padding-left(5px); } } &.unsubscribe-button { @@ -108,6 +108,6 @@ span:not(:first-child) { font-size: 60%; - text-align: left; + text-align: start; } } diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss index d9cf7a14f..dd9ab18a8 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss @@ -21,7 +21,8 @@ $icon-size: 16px; } .moderation-block { - margin-left: .4rem; + @include margin-left(.4rem); + display: flex; justify-content: flex-end; align-items: center; @@ -54,8 +55,8 @@ $icon-size: 16px; } .display-as-row.videos { - margin-left: pvar(--horizontalMarginContent); - margin-right: pvar(--horizontalMarginContent); + @include margin-left(pvar(--horizontalMarginContent)); + @include margin-right(pvar(--horizontalMarginContent)); .video-wrapper { margin-bottom: 15px; @@ -70,8 +71,9 @@ $icon-size: 16px; margin-bottom: 10px; .title-page { + @include margin-right(0); + margin-bottom: 10px; - margin-right: 0; } } } diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss index b689b1046..b0d80e530 100644 --- a/client/src/app/shared/shared-video-miniature/video-download.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss @@ -19,7 +19,7 @@ } .glyphicon { - margin-right: 5px; + @include margin-right(5px); } } @@ -46,9 +46,9 @@ .peertube-radio-container { @include peertube-radio-container; + @include margin-right(30px); display: inline-block; - margin-right: 30px; } } @@ -66,8 +66,9 @@ margin-bottom: 12px; .metadata-attribute-label { + @include padding-right(5px); + min-width: 142px; - padding-right: 5px; display: inline-block; color: pvar(--greyForegroundColor); font-weight: $font-bold; @@ -75,6 +76,7 @@ a.metadata-attribute-value { @include disable-default-a-behaviour; + color: pvar(--mainForegroundColor); &:hover { diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index 0bbdff1e6..8f632edb4 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -13,7 +13,7 @@ $more-button-width: 40px; } my-actor-avatar { - margin: 10px 10px 0 0; + @include margin(10px, 10px, 0, 0); } .video-miniature-created-at-views { @@ -155,10 +155,11 @@ my-actor-avatar { } my-video-thumbnail { + @include margin-right(10px); + min-width: var(--rowThumbnailWidth); max-width: var(--rowThumbnailWidth); height: var(--rowThumbnailHeight); - margin-right: 10px; } .video-miniature-name { diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss index a2939d521..fa751eeca 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss @@ -11,8 +11,9 @@ position: fixed; .action-button { + @include margin-left(55px); + display: block; - margin-left: 55px; } } @@ -29,10 +30,11 @@ } .checkbox-container { + @include margin-right(20px); + @include margin-left(12px); + display: flex; align-items: center; - margin-right: 20px; - margin-left: 12px; } my-video-miniature { diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss index cb1168196..5f0798e3c 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss @@ -44,7 +44,7 @@ $timestamp-margin-right: 10px; } > .optional-rows { - padding-left: 24px; + @include padding-left(24px); } &.has-optional-row:hover { @@ -57,7 +57,7 @@ $timestamp-margin-right: 10px; display: flex; my-peertube-checkbox { - margin-right: 10px; + @include margin-right(10px); align-self: center; } @@ -78,15 +78,15 @@ $timestamp-margin-right: 10px; my-global-icon { @include apply-svg-color(#333); + @include margin-right(0); width: 19px; height: 19px; - margin-right: 0; } } my-timestamp-input { - margin-right: $timestamp-margin-right; + @include margin-right($timestamp-margin-right); ::ng-deep .ui-inputtext { padding: 0; @@ -101,20 +101,23 @@ $timestamp-margin-right: 10px; } my-peertube-checkbox { + @include margin-right(0 !important); + display: block; width: $optional-rows-checkbox-width; - margin-right: 0 !important; } .labels { - margin-left: $optional-rows-checkbox-width; + @include margin-left($optional-rows-checkbox-width); + font-size: 13px; color: pvar(--greyForegroundColor); padding-top: 5px; padding-bottom: 0; div { - margin-right: $timestamp-margin-right; + @include margin-right($timestamp-margin-right); + width: $timestamp-width; } } @@ -131,11 +134,11 @@ $timestamp-margin-right: 10px; my-global-icon { @include apply-svg-color(#333); + @include margin-right(4px); position: relative; left: -1px; top: -1px; - margin-right: 4px; width: 21px; height: 21px; } diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss index 9ccd03912..1fe28a682 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss @@ -17,8 +17,9 @@ my-video-thumbnail { my-video-thumbnail, .fake-thumbnail { + @include margin-right(10px); + display: flex; // Avoids an issue with line-height that adds space below the element - margin-right: 10px; } .video { @@ -60,8 +61,9 @@ my-video-thumbnail, cursor: pointer; .position { + @include margin-right(10px); + font-weight: $font-semibold; - margin-right: 10px; color: pvar(--greyForegroundColor); min-width: 25px; @@ -101,8 +103,9 @@ my-video-thumbnail, .more, my-edit-button { + @include margin-left(auto); + justify-self: flex-end; - margin-left: auto; cursor: pointer; min-width: 24px; } @@ -135,8 +138,9 @@ my-video-thumbnail, } .timestamp-options { + @include padding-left(35px); + padding-top: 0; - padding-left: 35px; margin-bottom: 15px; > div { @@ -146,7 +150,7 @@ my-video-thumbnail, } my-peertube-checkbox { - margin-right: 5px; + @include margin-right(5px); } input { diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index a46a6e475..95bf469ac 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss @@ -88,9 +88,10 @@ display: flex; .miniature-thumbnail { + @include margin-right(10px); + width: var(--rowThumbnailWidth); height: var(--rowThumbnailHeight); - margin-right: 10px; } } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index ae511aa02..799b8c881 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -65,6 +65,9 @@ body { // Allow to disable the scrollbar instead of hide it when the content fit the body // And not move the content and header horizontally sticked to right when the content is updating overflow-y: scroll; + + // Fix "reboot" style that set text-align: left + text-align: start; } ::selection { @@ -130,8 +133,7 @@ my-input-toggle-hidden ::ng-deep input { .full-width { width: 100%; - margin-left: auto; - margin-right: auto; + margin: 0 auto; max-width: initial; } @@ -144,13 +146,13 @@ my-input-toggle-hidden ::ng-deep input { } .main-col { - margin-left: $menu-width; + @include margin-left($menu-width); + width: calc(100% - #{$menu-width}); outline: none; .margin-content { - margin-left: pvar(--horizontalMarginContent); - margin-right: pvar(--horizontalMarginContent); + margin: 0 pvar(--horizontalMarginContent); flex-grow: 1; } @@ -159,8 +161,7 @@ my-input-toggle-hidden ::ng-deep input { width: 100%; display: flex; align-items: center; - padding-left: pvar(--horizontalMarginContent); - padding-right: pvar(--horizontalMarginContent); + padding: 0 pvar(--horizontalMarginContent); height: $sub-menu-height; margin-bottom: $sub-menu-margin-bottom; overflow-x: auto; @@ -182,7 +183,7 @@ my-input-toggle-hidden ::ng-deep input { --horizontalMarginContent: #{$expanded-horizontal-margins}; --mainColWidth: 100vw; - margin-left: 0; + @include margin-left(0); width: 100%; } @@ -199,12 +200,12 @@ my-input-toggle-hidden ::ng-deep input { .title-page { @include disable-default-a-behaviour; + @include margin-right(55px); opacity: 0.6; color: pvar(--mainForegroundColor); font-size: 16px; display: inline-block; - margin-right: 55px; font-weight: $font-semibold; border-bottom: 2px solid transparent; @@ -237,7 +238,7 @@ my-input-toggle-hidden ::ng-deep input { } @media screen and (max-width: $mobile-view) { - margin-right: 15px; + @include margin-left(15px); } } @@ -365,8 +366,7 @@ ngx-loading-bar { --horizontalMarginContent: #{$expanded-horizontal-margins / 3}; .sub-menu { - padding-left: 50px; - padding-right: 50px; + padding: 0 50px; .title-page { font-size: 17px; @@ -386,12 +386,11 @@ ngx-loading-bar { .main-col.expanded { --horizontalMarginContent: 15px; - margin-left: 0; + @include margin-left(0); .sub-menu { width: 100vw; - padding-left: 15px; - padding-right: 15px; + padding: 0 15px; margin-bottom: $sub-menu-margin-bottom-small-view; overflow-x: auto; } @@ -405,7 +404,8 @@ ngx-loading-bar { flex-direction: column; .form-sub-title { - margin-right: 0 !important; + @include margin-right(0 !important); + margin-bottom: 10px; text-align: center; } @@ -419,7 +419,7 @@ ngx-loading-bar { width: 100%; a { - margin-left: 5px; + @include margin-left(5px); } } } diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 548e55e1e..501587eb2 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -62,7 +62,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; font-size: 15px; .dropdown-header { - padding-left: 1rem; + @include padding-left(1rem); } .dropdown-item { @@ -105,7 +105,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } .modal-dialog { - text-align: left; + text-align: start; &:not(.modal-lg):not(.modal-xl) { min-width: 500px; @@ -153,10 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .inputs { margin-bottom: 0; - text-align: right; + text-align: end; > .peertube-button:not(:first-child) { - margin-left: 10px; + @include margin-left(10px); } } } @@ -342,7 +342,7 @@ ngb-tooltip-window { position: relative; input { - padding-right: 1.5rem !important; + @include padding-right(1.5rem !important); } .form-control-clear { @@ -392,3 +392,22 @@ ngb-tooltip-window { border-left-color: pvar(--mainColor); } } + +// Override these properties for Bidi support +@each $size, $length in $spacers { + .ml-#{$size} { + @include margin-left($length); + } + + .mr-#{$size} { + @include margin-right($length); + } + + .pl-#{$size} { + @include padding-left($length); + } + + .pr-#{$size} { + @include padding-right($length); + } +} diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index 372e7bd24..ab2038dde 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss @@ -30,7 +30,8 @@ } > div { - margin-left: $img-margin; + @include margin-left($img-margin); + min-width: 1px; } diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 070aa3398..f782d374a 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -14,8 +14,9 @@ } &.blur-filter { + @include padding-left(4px); + filter: blur(3px); - padding-left: 4px; } } @@ -102,11 +103,11 @@ --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)}; @if $margin { - margin-left: var(--gridVideosMiniatureMargins) !important; - margin-right: var(--gridVideosMiniatureMargins) !important; + @include margin-left(var(--gridVideosMiniatureMargins) !important); + @include margin-right(var(--gridVideosMiniatureMargins) !important); } @else { - padding-left: var(--gridVideosMiniatureMargins) !important; - padding-right: var(--gridVideosMiniatureMargins) !important; + @include padding-left(var(--gridVideosMiniatureMargins) !important); + @include padding-right(var(--gridVideosMiniatureMargins) !important); } @media screen and (max-width: $mobile-view) { diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 4f2421aea..19454cdb2 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -84,6 +84,7 @@ } @mixin peertube-input-text($width) { + padding: 0 15px; display: inline-block; height: $button-height; width: $width; @@ -91,8 +92,6 @@ background-color: pvar(--inputBackgroundColor); border: 1px solid #C6C6C6; border-radius: 3px; - padding-left: 15px; - padding-right: 15px; font-size: 15px; &::placeholder { @@ -257,6 +256,8 @@ } @mixin peertube-button { + @include padding(0, 17px, 0, 13px); + border: 0; font-weight: $font-semibold; font-size: 15px; @@ -265,7 +266,6 @@ // FIXME: because of primeng that redefines border-radius of all input[type="..."] border-radius: 3px !important; text-align: center; - padding: 0 17px 0 13px; cursor: pointer; } @@ -290,9 +290,10 @@ line-height: normal !important; my-global-icon { + @include margin-right($margin-right); + position: relative; width: $width; - margin-right: $margin-right; top: $top; } } @@ -310,7 +311,7 @@ width: 100%; height: 100%; font-size: 100px; - text-align: right; + text-align: end; filter: alpha(opacity=0); opacity: 0; outline: none; @@ -428,6 +429,8 @@ cursor: pointer; &::before { + @include margin-right(10px); + position: relative; top: -2px; content: ''; @@ -440,7 +443,6 @@ vertical-align: middle; cursor: pointer; text-align: center; - margin-right: 10px; } } @@ -500,9 +502,10 @@ } + span + span { + @include margin-left(5px); + font-size: 15px; font-weight: $font-regular; - margin-left: 5px; cursor: pointer; display: inline; } @@ -635,10 +638,10 @@ padding: 6px 15px; my-global-icon { + @include margin-right(10px); + width: 22px; opacity: .7; - - margin-right: 10px; position: relative; top: -2px; } @@ -705,10 +708,12 @@ } + .breadcrumb-item { - padding-left: 0.5rem; + @include padding-left(0.5rem); + &::before { + @include padding-right(0.5rem); + display: inline-block; - padding-right: 0.5rem; color: #6c757d; content: '/'; } @@ -822,8 +827,8 @@ } my-actor-avatar { - margin-left: -.4rem; - margin-right: .2rem; + @include margin-left(-.4rem); + @include margin-right(.2rem); } &.two-lines { @@ -836,11 +841,11 @@ } div { + margin: 0 .1rem; + display: flex; flex-direction: column; height: $avatar-height; - margin-left: .1rem; - margin-right: .1rem; justify-content: center; } } @@ -875,14 +880,14 @@ > span > my-global-icon, > my-global-icon { - margin-right: 10px; + @include margin-right(10px); width: 24px; height: 24px; vertical-align: top; } .badge { - margin-left: 7px; + @include margin-left(7px); vertical-align: top; } } @@ -930,3 +935,59 @@ } } } + +@mixin margin ($block-start, $inline-end, $block-end, $inline-start) { + @include margin-left($inline-start); + @include margin-right($inline-end); + + margin-top: $block-start; + margin-bottom: $block-end; +} + +@mixin padding ($block-start, $inline-end, $block-end, $inline-start) { + @include padding-left($inline-start); + @include padding-right($inline-end); + + padding-top: $block-start; + padding-bottom: $block-end; +} + +@mixin margin-left ($value) { + @supports (margin-inline-start: $value) { + margin-inline-start: $value; + } + + @supports not (margin-inline-start: $value) { + margin-left: $value; + } +} + +@mixin margin-right ($value) { + @supports (margin-inline-end: $value) { + margin-inline-end: $value; + } + + @supports not (margin-inline-end: $value) { + margin-right: $value; + } +} + +@mixin padding-left ($value) { + @supports (padding-inline-start: $value) { + padding-inline-start: $value; + } + + @supports not (padding-inline-start: $value) { + padding-left: $value; + } +} + +@mixin padding-right ($value) { + @supports (padding-inline-end: $value) { + padding-inline-end: $value; + } + + @supports not (padding-inline-end: $value) { + padding-right: $value; + } +} diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss index 13b2012b2..ecd33babe 100644 --- a/client/src/sass/ng-select.scss +++ b/client/src/sass/ng-select.scss @@ -31,7 +31,7 @@ $ng-select-value-font-size: 15px; } .ng-arrow-wrapper { - padding-right: 12px; + @include padding-right(12px); } &.ng-select-single .ng-value-container .ng-value { @@ -44,10 +44,10 @@ $ng-select-value-font-size: 15px; } &.ng-select-multiple .ng-select-container .ng-value-container { - padding-left: 12px; + @include padding-left(12px); .ng-value { /* stylelint-disable-line */ - margin-left: 3px; + @include margin-left(12px); } } } diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss index 853a030a3..b8c3325d0 100644 --- a/client/src/sass/player/bezels.scss +++ b/client/src/sass/player/bezels.scss @@ -9,13 +9,14 @@ } .vjs-bezel { + @include margin-left(-26px); + position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; z-index: 19; - margin-left: -26px; margin-top: -26px; background: rgba(0, 0, 0, .5); border-radius: 26px; diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index 1653dd2c4..501c68ffd 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -25,7 +25,7 @@ $context-menu-width: 350px; cursor: pointer; font-size: 1em; padding: 8px 16px; - text-align: left; + text-align: start; text-transform: none; &:hover { @@ -35,6 +35,8 @@ $context-menu-width: 350px; [class^='vjs-icon-'] { $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; + @include margin-right(0.8rem !important); + display: inline-flex; position: relative; top: 2px; @@ -43,7 +45,6 @@ $context-menu-width: 350px; height: 14px; background-color: #fff; mask-size: cover; - margin-right: 0.8rem !important; @each $icon in $icons { &[class$="-#{$icon}"] { diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index c010f7297..148992089 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -20,8 +20,9 @@ body { color: pvar(--embedForegroundColor); .vjs-dock-text { + @include padding-right(60px); + padding: $dock-padding; - padding-right: 60px; background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%); } @@ -34,11 +35,11 @@ body { font-size: 11px; .text::before { - margin-right: 4px; + @include margin-right(4px); } .text::after { - margin-left: 4px; + @include margin-left(4px); transform: scale(-1, 1); } } @@ -55,6 +56,8 @@ body { $big-play-width: 1.2em; $big-play-height: 1.2em; + @include margin-left(-($big-play-width / 2)); + outline: 0; font-size: 6em; @@ -66,7 +69,6 @@ body { width: $big-play-width; height: $big-play-height; line-height: $big-play-height; - margin-left: -($big-play-width / 2); margin-top: -($big-play-height / 2); transition: 0.4s opacity; @@ -157,7 +159,7 @@ body { text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); > button:first-child { - margin-left: $first-control-bar-element-margin-left; + @include margin-left($first-control-bar-element-margin-left); } .vjs-progress-control, @@ -188,11 +190,12 @@ body { } .vjs-progress-control { + @include margin-left($progress-margin); + position: absolute; z-index: 100; // On top of the progress bar bottom: 29px; width: calc(100% - (2 * #{$progress-margin})); - margin-left: $progress-margin; height: 14px; .vjs-slider { @@ -261,17 +264,19 @@ body { line-height: inherit; &.vjs-current-time { + @include margin-left(.5em); + font-size: $font-size; display: inline-block; padding: 0; - margin-left: .5em; .vjs-current-time-display { line-height: calc(#{$control-bar-height} - 1px); &::after { + @include margin(0, 1px, 0, 2px); + content: '/'; - margin: 0 1px 0 2px; } } } @@ -298,10 +303,11 @@ body { } .vjs-peertube { + @include margin-right(6px); + width: 100%; line-height: $control-bar-height; - text-align: right; - margin-right: 6px; + text-align: end; overflow: hidden; .vjs-peertube-displayed { @@ -323,7 +329,7 @@ body { .upload-speed-text, .peers-text, .http-fallback { - margin-right: 15px; + @include margin-right(15px); } .icon { @@ -340,7 +346,7 @@ body { .vjs-next-video, .vjs-previous-video { line-height: $control-bar-height; - text-align: right; + text-align: end; .icon { &.icon-next, @@ -415,8 +421,9 @@ body { } .vjs-volume-control { + @include margin(0, 5px, 0, 0); + width: 30px; - margin: 0 5px 0 0; } .vjs-volume-bar { @@ -490,9 +497,9 @@ body { .vjs-theater-control { @include disable-outline; + @include margin-right(1px); width: 37px; - margin-right: 1px; cursor: pointer; .vjs-icon-placeholder { @@ -512,9 +519,9 @@ body { .vjs-fullscreen-control { @include disable-outline; + @include margin-left($first-control-bar-element-margin-left); width: 37px; - margin-right: $first-control-bar-element-margin-left; .vjs-icon-placeholder { display: inline-block; @@ -641,12 +648,12 @@ body { .vjs-control-bar { > button:first-child { - margin-left: $first-control-bar-element-margin-left-small-width; + @include margin-left($first-control-bar-element-margin-left-small-width); } } .vjs-fullscreen-control { - margin-right: $first-control-bar-element-margin-left-small-width; + @include margin-right($first-control-bar-element-margin-left-small-width); } &.vjs-live { diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 74eee7d64..2183a7dbc 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -56,13 +56,13 @@ $setting-transition-easing: ease-out; } .vjs-settings-sub-menu-title { - text-align: left; + text-align: start; font-weight: $font-semibold; } .vjs-settings-sub-menu-value { width: 100%; - text-align: right; + text-align: end; small { font-size: 0.85em; @@ -132,7 +132,7 @@ $setting-transition-easing: ease-out; .vjs-settings-sub-menu-value::after { @include chevron-right(9px, 2px); - margin-left: 5px; + @include margin-left(5px); } } @@ -142,7 +142,7 @@ $setting-transition-easing: ease-out; .vjs-menu-item { outline: 0; font-weight: $font-semibold; - text-align: right; + text-align: end; padding: 5px 8px; &.vjs-back-button { @@ -150,12 +150,12 @@ $setting-transition-easing: ease-out; padding: 8px 8px 13px 12px; margin-bottom: 5px; border-bottom: 1px solid #808080; - text-align: left; + text-align: start; &::before { @include chevron-left(9px, 2px); - margin-right: 5px; + @include margin-right(5px); } } @@ -182,10 +182,10 @@ $setting-transition-easing: ease-out; width: 200px; .vjs-menu-item { - text-align: left; + text-align: start; .vjs-menu-item-text { - margin-left: 25px; + @include margin-left(25px); text-transform: capitalize; } } diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss index 6fcbcd969..c6388ed13 100644 --- a/client/src/sass/player/stats.scss +++ b/client/src/sass/player/stats.scss @@ -34,7 +34,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6); display: inline-block; font-weight: 600; padding: 0 .5em; - text-align: right; + text-align: end; width: 11.5em; white-space: nowrap; } diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss index 8c9a6f784..922a9674d 100644 --- a/client/src/sass/player/upnext.scss +++ b/client/src/sass/player/upnext.scss @@ -23,19 +23,17 @@ $browser-context: 16; } .vjs-upnext-top { + margin: 0 auto; width: 100%; position: absolute; - margin-left: auto; - margin-right: auto; bottom: 50%; margin-bottom: 60px; } .vjs-upnext-bottom { + margin: 0 auto; width: 100%; position: absolute; - margin-left: auto; - margin-right: auto; top: 50%; margin-top: 52px; } diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 6a4d89dff..4cd27bea8 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -139,7 +139,8 @@ body .p-paginator .p-paginator-pages .p-paginator-page:focus { box-shadow: 0 0 0 0.2em pvar(--mainColorLightest); } body .p-paginator .p-dropdown { - margin-left: 0.5em; + @include margin-left(0.5em); + height: 2.286em; min-width: auto; } @@ -161,7 +162,7 @@ body .p-dropdown:not(.p-disabled).p-focus { border-color: pvar(--mainColor); } body .p-dropdown .p-dropdown-label { - padding-right: 2em; + @include padding-right(2em); } body .p-dropdown .p-dropdown-trigger { background-color: #ffffff; @@ -175,7 +176,7 @@ body .p-dropdown .p-dropdown-clear-icon { color: #848484; } body .p-dropdown.p-dropdown-clearable .p-dropdown-label { - padding-right: 4em; + @include padding-right(4em); } body .p-dropdown-panel { padding: 0; @@ -191,8 +192,9 @@ body .p-dropdown-panel .p-dropdown-filter-container { margin: 0; } body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter { + @include padding-right(2em); + width: 100%; - padding-right: 2em; } body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon { top: 50%; @@ -368,17 +370,18 @@ body .p-datepicker.p-datepicker-timeonly .p-timepicker { border-top: 0 none; } body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { + @include padding-right(0.857em); + @include padding-left(0.857em); + border-right: 1px solid #d8dae2; - padding-right: 0.857em; - padding-left: 0.857em; padding-top: 0; padding-bottom: 0; } body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { - padding-left: 0; + @include padding-left(0); } body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { - padding-right: 0; + @include padding-right(0); border-right: 0 none; } body .p-calendar.p-calendar-w-btn .p-inputtext { @@ -402,7 +405,7 @@ body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border: 1px solid #a80000; } body .p-timepicker .p-separator { - margin-left: 0; + @include margin-left(0); min-width: 0.75rem; } @@ -514,7 +517,7 @@ p-table { align-items: center; .left-buttons { - padding-left: 15px; + @include padding-left(15px); } } } @@ -534,7 +537,7 @@ p-table { } td { - padding-left: 15px !important; + @include padding-left(15px !important); &.expand-cell { padding: 10px 15px; @@ -646,10 +649,10 @@ p-table { my-delete-button, my-button { display: inline-block !important; - margin-left: 5px; + @include margin-left(5px); &:first-child { - margin-left: 0 + @include margin-left(0) } } } @@ -714,13 +717,13 @@ p-table { &.p-paginator-prev { @extend .glyphicon-chevron-left; - margin-right: 10px; + @include margin-right(10px); } &.p-paginator-next { @extend .glyphicon-chevron-right; - margin-left: 10px; + @include margin-left(10px); } &.p-paginator-last { @@ -799,7 +802,7 @@ p-calendar .p-datepicker { .p-datepicker-header { .p-datepicker-year { - margin-left: 5px; + @include margin-left(5px); } .p-datepicker-next { @@ -807,7 +810,7 @@ p-calendar .p-datepicker { @include glyphicon-light; color: #000 !important; - text-align: right; + text-align: end; .pi.pi-chevron-right { display: none !important; @@ -819,7 +822,7 @@ p-calendar .p-datepicker { @include glyphicon-light; color: #000 !important; - text-align: left; + text-align: start; .pi.pi-chevron-left { display: none !important; @@ -945,7 +948,7 @@ p-toast { .message { flex-grow: 1; - margin-right: 20px; + @include margin-right(20px); h3 { font-size: 21px; @@ -959,7 +962,7 @@ p-toast { .glyphicon { font-size: 32px; - margin-right: 5px; + @include margin-right(5px); } } } diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss index b9ac3e74e..ea01bf800 100644 --- a/client/src/standalone/videos/test-embed.scss +++ b/client/src/standalone/videos/test-embed.scss @@ -1,3 +1,5 @@ +@import '_variables'; +@import '_mixins'; * { font-family: sans-serif; @@ -30,21 +32,23 @@ aside { } .logo { + @include margin-right(0.5em); + font-size: 150%; height: 100%; font-weight: bold; display: flex; flex-direction: row; align-items: center; - margin-right: 0.5em; .icon { + @include margin-right(0.5em); + height: 100%; padding: 0 18px 0 32px; background: #fff; display: flex; align-items: center; - margin-right: 0.5em; } } @@ -59,6 +63,8 @@ main { } header { + @include padding-right(1em); + width: 100%; height: 3.2em; background-color: #F1680D; @@ -71,7 +77,6 @@ header { box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6); background-size: 50%; background-position: top left; - padding-right: 1em; h1 { margin: 0; -- cgit v1.2.3