aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-07 17:38:31 +0200
committerChocobozzz <me@florianbigard.com>2021-06-07 18:14:05 +0200
commit27bc95867442c772841fb183a625bbda61dede51 (patch)
tree6fe20951f1109c1f5388d9a681f0df0758d463e0 /client/src/app
parent8beea2d37d90e9a12d895f4a9eebc1e532313d8c (diff)
downloadPeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.gz
PeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.zst
PeerTube-27bc95867442c772841fb183a625bbda61dede51.zip
Bidi support
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss6
-rw-r--r--client/src/app/+about/about-peertube/about-peertube-contributors.component.scss3
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss7
-rw-r--r--client/src/app/+accounts/accounts.component.scss4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss6
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.scss2
-rw-r--r--client/src/app/+admin/follows/follows.component.scss3
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss2
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss2
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss5
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss9
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss4
-rw-r--r--client/src/app/+admin/system/logs/logs.component.scss11
-rw-r--r--client/src/app/+admin/system/system.component.scss6
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.scss3
-rw-r--r--client/src/app/+login/login.component.scss17
-rw-r--r--client/src/app/+my-account/my-account-applications/my-account-applications.component.scss5
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss2
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss2
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss12
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.scss6
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.scss5
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss9
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss11
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss10
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.scss16
-rw-r--r--client/src/app/+page-not-found/page-not-found.component.scss12
-rw-r--r--client/src/app/+search/search-filters.component.scss7
-rw-r--r--client/src/app/+search/search.component.scss5
-rw-r--r--client/src/app/+signup/+register/custom-stepper.component.scss4
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss8
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss16
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.scss12
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss9
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html5
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss15
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts22
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.scss24
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comments.component.scss10
-rw-r--r--client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss9
-rw-r--r--client/src/app/+videos/+video-watch/video-avatar-channel.component.scss2
-rw-r--r--client/src/app/+videos/+video-watch/video-watch-playlist.component.scss6
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss51
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss8
-rw-r--r--client/src/app/+videos/video-list/trending/video-trending-header.component.scss7
-rw-r--r--client/src/app/app.component.scss3
-rw-r--r--client/src/app/app.component.ts3
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.scss7
-rw-r--r--client/src/app/header/header.component.scss10
-rw-r--r--client/src/app/header/search-typeahead.component.scss13
-rw-r--r--client/src/app/menu/menu.component.html11
-rw-r--r--client/src/app/menu/menu.component.scss38
-rw-r--r--client/src/app/menu/menu.component.ts1
-rw-r--r--client/src/app/menu/notification.component.scss2
-rw-r--r--client/src/app/modal/welcome-modal.component.scss3
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss8
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss2
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss2
-rw-r--r--client/src/app/shared/shared-forms/input-toggle-hidden.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss20
-rw-r--r--client/src/app/shared/shared-forms/peertube-checkbox.component.scss3
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.scss3
-rw-r--r--client/src/app/shared/shared-forms/select/select-shared.component.scss4
-rw-r--r--client/src/app/shared/shared-instance/instance-features-table.component.scss3
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss2
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.scss4
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.scss3
-rw-r--r--client/src/app/shared/shared-main/users/user-notifications.component.scss14
-rw-r--r--client/src/app/shared/shared-main/users/user-quota.component.scss2
-rw-r--r--client/src/app/shared/shared-moderation/moderation.scss7
-rw-r--r--client/src/app/shared/shared-moderation/report-modals/report.component.scss2
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss6
-rw-r--r--client/src/app/shared/shared-user-subscription/subscribe-button.component.scss10
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss10
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss8
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss5
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-selection.component.scss8
-rw-r--r--client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss19
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss14
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss3
80 files changed, 395 insertions, 262 deletions
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 @@
23 margin-bottom: 20px; 23 margin-bottom: 20px;
24 24
25 .badge { 25 .badge {
26 @include margin-right(5px);
27
26 font-size: 12px; 28 font-size: 12px;
27 font-weight: $font-semibold; 29 font-weight: $font-semibold;
28 margin-right: 5px;
29 30
30 &.category { 31 &.category {
31 background-color: pvar(--mainColor); 32 background-color: pvar(--mainColor);
@@ -66,9 +67,10 @@
66 &:hover, 67 &:hover,
67 &:active { 68 &:active {
68 &::after { 69 &::after {
70 @include margin-left(0.2em);
71
69 content: '#'; 72 content: '#';
70 display: inline-block; 73 display: inline-block;
71 margin-left: 0.2em;
72 } 74 }
73 } 75 }
74 76
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 @@
22 text-align: center; 22 text-align: center;
23 23
24 li { 24 li {
25 @include margin-right(10px);
26
25 display: inline-block; 27 display: inline-block;
26 margin-right: 10px;
27 } 28 }
28 } 29 }
29} 30}
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 @@
29 29
30 my-actor-avatar { 30 my-actor-avatar {
31 @include actor-avatar-size(75px); 31 @include actor-avatar-size(75px);
32 @include margin-right(15px);
32 33
33 grid-column: 1; 34 grid-column: 1;
34 grid-row: 1 / 3; 35 grid-row: 1 / 3;
35 margin-right: 15px;
36 } 36 }
37 37
38 a { 38 a {
@@ -51,13 +51,14 @@
51 } 51 }
52 52
53 .actor-counters { 53 .actor-counters {
54 @include margin-left(15px);
55
54 grid-row: 1; 56 grid-row: 1;
55 grid-column: 3; 57 grid-column: 3;
56 color: pvar(--greyForegroundColor); 58 color: pvar(--greyForegroundColor);
57 font-size: 16px; 59 font-size: 16px;
58 display: flex; 60 display: flex;
59 align-items: center; 61 align-items: center;
60 margin-left: 15px;
61 } 62 }
62 63
63 .actor-counters > *:not(:last-child)::after { 64 .actor-counters > *:not(:last-child)::after {
@@ -92,7 +93,7 @@ my-subscribe-button {
92 overflow: hidden; 93 overflow: hidden;
93 94
94 my-video-miniature { 95 my-video-miniature {
95 margin-right: 15px; 96 @include margin-right(15px);
96 min-width: $video-thumbnail-medium-width; 97 min-width: $video-thumbnail-medium-width;
97 max-width: $video-thumbnail-medium-width; 98 max-width: $video-thumbnail-medium-width;
98 } 99 }
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 @@
23 max-width: $max-channels-width; 23 max-width: $max-channels-width;
24 24
25 simple-search-input { 25 simple-search-input {
26 margin-left: auto; 26 @include margin-left(auto);
27 } 27 }
28} 28}
29 29
30my-user-moderation-dropdown, 30my-user-moderation-dropdown,
31.badge { 31.badge {
32 margin-left: 10px; 32 @include margin-left(10px);
33 33
34 position: relative; 34 position: relative;
35 top: 3px; 35 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 {
14 14
15input[type=text] { 15input[type=text] {
16 @include peertube-input-text($form-base-input-width); 16 @include peertube-input-text($form-base-input-width);
17
17 display: block; 18 display: block;
18} 19}
19 20
@@ -53,13 +54,14 @@ my-select-checkbox {
53input[type=submit] { 54input[type=submit] {
54 @include peertube-button; 55 @include peertube-button;
55 @include orange-button; 56 @include orange-button;
57 @include margin-left(auto);
56 58
57 display: flex; 59 display: flex;
58 margin-left: auto;
59 60
60 + .form-error { 61 + .form-error {
62 @include margin-left(5px);
63
61 display: inline; 64 display: inline;
62 margin-left: 5px;
63 } 65 }
64} 66}
65 67
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 {
18 18
19.action-cell { 19.action-cell {
20 my-button:first-child { 20 my-button:first-child {
21 margin-right: 10px; 21 @include margin-right(10px);
22 } 22 }
23} 23}
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 @@
1@import 'mixins'; 1@import 'mixins';
2 2
3.form-sub-title { 3.form-sub-title {
4 @include margin-right(30px);
5
4 flex-grow: 0; 6 flex-grow: 0;
5 margin-right: 30px;
6} 7}
7 8
8.badge { 9.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 {
25 25
26 .select-filter-block { 26 .select-filter-block {
27 &:not(:last-child) { 27 &:not(:last-child) {
28 margin-right: 10px; 28 @include margin-right(10px);
29 } 29 }
30 30
31 label { 31 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 @@
1@import 'mixins'; 1@import 'mixins';
2 2
3my-feed { 3my-feed {
4 margin-left: 5px; 4 @include margin-left(5px);
5 display: inline-block; 5 display: inline-block;
6 width: 15px; 6 width: 15px;
7} 7}
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 @@
18 margin-bottom: 15px; 18 margin-bottom: 15px;
19 19
20 my-global-icon { 20 my-global-icon {
21 margin-right: 5px; 21 @include margin-right(5px);
22 } 22 }
23} 23}
24 24
25.badge { 25.badge {
26 @include margin-left(15px);
27
26 font-size: 13px; 28 font-size: 13px;
27 font-weight: $font-semibold; 29 font-weight: $font-semibold;
28 margin-left: 15px;
29} 30}
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 @@
12 margin-bottom: 10px; 12 margin-bottom: 10px;
13 13
14 .plugin-name { 14 .plugin-name {
15 @include margin-right(10px);
16
15 font-size: 16px; 17 font-size: 16px;
16 margin-right: 10px;
17 font-weight: $font-semibold; 18 font-weight: $font-semibold;
18 } 19 }
19 20
@@ -22,7 +23,7 @@
22 } 23 }
23 24
24 .plugin-icon { 25 .plugin-icon {
25 margin-left: 10px; 26 @include margin-left(10px);
26 27
27 my-global-icon { 28 my-global-icon {
28 @include apply-svg-color(pvar(--greyForegroundColor)); 29 @include apply-svg-color(pvar(--greyForegroundColor));
@@ -34,11 +35,11 @@
34 } 35 }
35 36
36 .buttons { 37 .buttons {
37 margin-left: auto; 38 @include margin-left(auto);
38 width: max-content; 39 width: max-content;
39 40
40 > *:not(:last-child) { 41 > *:not(:last-child) {
41 margin-right: 10px; 42 @include margin-right(10px);
42 } 43 }
43 } 44 }
44} 45}
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 @@
25 25
26 .select-filter-block { 26 .select-filter-block {
27 &:not(:last-child) { 27 &:not(:last-child) {
28 margin-right: 10px; 28 @include margin-right(10px);
29 } 29 }
30 30
31 label { 31 label {
@@ -43,7 +43,7 @@
43} 43}
44 44
45td .glyphicon { 45td .glyphicon {
46 margin-right: 10px; 46 @include margin-right(10px);
47} 47}
48 48
49pre { 49pre {
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 @@
19 } 19 }
20 20
21 .log-level { 21 .log-level {
22 @include margin-right(5px);
23
22 font-weight: $font-semibold; 24 font-weight: $font-semibold;
23 margin-right: 5px;
24 } 25 }
25 26
26 .log-by { 27 .log-by {
@@ -54,7 +55,7 @@
54 my-button, 55 my-button,
55 .peertube-select-container, 56 .peertube-select-container,
56 ng-select { 57 ng-select {
57 margin-left: 10px; 58 @include margin-left(10px);
58 } 59 }
59} 60}
60 61
@@ -65,8 +66,9 @@
65 .peertube-select-container, 66 .peertube-select-container,
66 ng-select, 67 ng-select,
67 my-button { 68 my-button {
69 @include margin-left(0 !important);
70
68 width: 100% !important; 71 width: 100% !important;
69 margin-left: 0 !important;
70 margin-bottom: 10px !important; 72 margin-bottom: 10px !important;
71 } 73 }
72 74
@@ -84,8 +86,9 @@
84 .peertube-select-container, 86 .peertube-select-container,
85 ng-select, 87 ng-select,
86 my-button { 88 my-button {
89 @include margin-left(0 !important);
90
87 width: 100% !important; 91 width: 100% !important;
88 margin-left: 0 !important;
89 margin-bottom: 10px !important; 92 margin-bottom: 10px !important;
90 } 93 }
91 94
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 @@
1@import '_variables';
2@import '_mixins';
3
1.form-sub-title { 4.form-sub-title {
5 @include margin-right(30px);
6
2 flex-grow: 0; 7 flex-grow: 0;
3 margin-right: 30px;
4} 8}
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 {
24} 24}
25 25
26.user-table-primary-text .glyphicon { 26.user-table-primary-text .glyphicon {
27 @include margin-left(0.1rem);
28
27 font-size: 80%; 29 font-size: 80%;
28 color: #808080; 30 color: #808080;
29 margin-left: 0.1rem;
30} 31}
31 32
32p-tableCheckbox { 33p-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] {
14} 14}
15 15
16.modal-body { 16.modal-body {
17 text-align: left; 17 text-align: start;
18 18
19 .forgot-password-instructions { 19 .forgot-password-instructions {
20 margin-bottom: 20px; 20 margin-bottom: 20px;
@@ -55,13 +55,14 @@ input[type=email] {
55 } 55 }
56 56
57 .login-form-and-externals { 57 .login-form-and-externals {
58 @include margin-left(10px);
59 @include margin-right(10px);
60
58 display: flex; 61 display: flex;
59 flex-wrap: wrap; 62 flex-wrap: wrap;
60 font-size: 15px; 63 font-size: 15px;
61 max-width: 450px; 64 max-width: 450px;
62 margin-bottom: 40px; 65 margin-bottom: 40px;
63 margin-left: 10px;
64 margin-right: 10px;
65 66
66 form { 67 form {
67 margin: 0; 68 margin: 0;
@@ -125,11 +126,12 @@ input[type=email] {
125 } 126 }
126 127
127 .instance-information { 128 .instance-information {
129 @include margin-left(10px);
130 @include margin-right(10px);
131
128 max-width: 600px; 132 max-width: 600px;
129 min-width: 350px; 133 min-width: 350px;
130 margin-bottom: 40px; 134 margin-bottom: 40px;
131 margin-left: 10px;
132 margin-right: 10px;
133 } 135 }
134 136
135 .terms-anchor { 137 .terms-anchor {
@@ -146,9 +148,10 @@ input[type=email] {
146 148
147 .login-form-and-externals, 149 .login-form-and-externals,
148 .instance-information { 150 .instance-information {
151 @include margin-left(0);
152 @include margin-right(0);
153
149 width: 100%; 154 width: 100%;
150 margin-left: 0;
151 margin-right: 0;
152 max-width: 450px; 155 max-width: 450px;
153 min-width: unset; 156 min-width: unset;
154 align-self: center; 157 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 {
17input[type=submit] { 17input[type=submit] {
18 @include peertube-button; 18 @include peertube-button;
19 @include orange-button; 19 @include orange-button;
20 @include margin-left(auto);
20 21
21 display: flex; 22 display: flex;
22 margin-left: auto;
23 23
24 + .form-error { 24 + .form-error {
25 @include margin-left(5px);
26
25 display: inline; 27 display: inline;
26 margin-left: 5px;
27 } 28 }
28} 29}
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 {
38 } 38 }
39 39
40 .peertube-select-container { 40 .peertube-select-container {
41 margin-left: 0 !important; 41 @include margin-left(0 !important);
42 } 42 }
43 } 43 }
44} 44}
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 {
43 &[type=submit] { 43 &[type=submit] {
44 @include peertube-button; 44 @include peertube-button;
45 @include orange-button; 45 @include orange-button;
46 margin-left: auto; 46 @include margin-left(auto);
47 } 47 }
48} 48}
49 49
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] {
15} 15}
16 16
17my-edit-button { 17my-edit-button {
18 margin-right: 10px; 18 @include margin-right(10px);
19} 19}
20 20
21.video-channel { 21.video-channel {
@@ -25,8 +25,7 @@ my-edit-button {
25 25
26 my-actor-avatar { 26 my-actor-avatar {
27 @include actor-avatar-size(80px); 27 @include actor-avatar-size(80px);
28 28 @include margin-right(10px);
29 margin-right: 10px;
30 } 29 }
31} 30}
32 31
@@ -49,9 +48,10 @@ my-edit-button {
49} 48}
50 49
51.video-channel-name { 50.video-channel-name {
51 @include margin-left(5px);
52
52 font-size: 14px; 53 font-size: 14px;
53 color: $grey-actor-name; 54 color: $grey-actor-name;
54 margin-left: 5px;
55} 55}
56 56
57.video-channel-buttons { 57.video-channel-buttons {
@@ -77,7 +77,7 @@ my-edit-button {
77 padding-bottom: 10px; 77 padding-bottom: 10px;
78 78
79 img { 79 img {
80 margin-right: 0; 80 @include margin-right(0);
81 } 81 }
82 82
83 .video-channel-buttons { 83 .video-channel-buttons {
@@ -97,7 +97,7 @@ my-edit-button {
97 } 97 }
98 98
99 .video-channel-name { 99 .video-channel-name {
100 margin-left: 0 !important; 100 @include margin-left(0 !important);
101 } 101 }
102} 102}
103 103
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 @@
24 } 24 }
25 25
26 .history-switch { 26 .history-switch {
27 grid-column: 3; 27 @include margin-left(auto);
28 @include margin-right(15px);
28 29
30 grid-column: 3;
29 display: flex; 31 display: flex;
30 margin-left: auto;
31 margin-right: 15px;
32 32
33 label { 33 label {
34 margin: 0 0 0 5px; 34 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 @@
16 $image-height: 45px; 16 $image-height: 45px;
17 17
18 @include miniature-thumbnail; 18 @include miniature-thumbnail;
19 @include margin-right(0.5rem);
19 20
20 height: $image-height; 21 height: $image-height;
21 width: #{(16/9) * $image-height}; 22 width: #{(16/9) * $image-height};
22 margin-right: 0.5rem;
23 border-radius: 2px; 23 border-radius: 2px;
24 border: 0; 24 border: 0;
25 background: transparent; 25 background: transparent;
@@ -59,9 +59,10 @@
59 line-height: 1rem; 59 line-height: 1rem;
60 60
61 div .glyphicon { 61 div .glyphicon {
62 @include margin-left(0.1rem);
63
62 font-size: 80%; 64 font-size: 80%;
63 color: #808080; 65 color: #808080;
64 margin-left: 0.1rem;
65 } 66 }
66 67
67 div + div { 68 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] {
11 > my-actor-avatar { 11 > my-actor-avatar {
12 @include actor-avatar-size(80px); 12 @include actor-avatar-size(80px);
13 13
14 margin-right: 10px; 14 @include margin-right(10px);
15 } 15 }
16} 16}
17 17
@@ -32,9 +32,10 @@ input[type=text] {
32 } 32 }
33 33
34 .video-channel-name { 34 .video-channel-name {
35 @include margin-left(5px);
36
35 font-size: 14px; 37 font-size: 14px;
36 color: $grey-actor-name; 38 color: $grey-actor-name;
37 margin-left: 5px;
38 } 39 }
39 } 40 }
40} 41}
@@ -50,7 +51,7 @@ input[type=text] {
50 } 51 }
51 52
52 my-actor-avatar { 53 my-actor-avatar {
53 margin-left: 7px; 54 @include margin-left(7px);
54 display: inline-block; 55 display: inline-block;
55 vertical-align: top; 56 vertical-align: top;
56 } 57 }
@@ -78,6 +79,6 @@ input[type=text] {
78 } 79 }
79 80
80 img { 81 img {
81 margin-right: 0; 82 @include margin-right(0);
82 } 83 }
83} 84}
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 @@
8} 8}
9 9
10.playlist-info { 10.playlist-info {
11 @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1));
12
11 grid-column: 1; 13 grid-column: 1;
12 background-color: pvar(--submenuBackgroundColor); 14 background-color: pvar(--submenuBackgroundColor);
13 margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
14 margin-top: -$sub-menu-margin-bottom; 15 margin-top: -$sub-menu-margin-bottom;
15 16
16 padding: 15px; 17 padding: 15px;
@@ -34,7 +35,7 @@
34 @include grey-button; 35 @include grey-button;
35 @include apply-svg-color(pvar(--actionButtonColor)); 36 @include apply-svg-color(pvar(--actionButtonColor));
36 37
37 margin-right: 10px; 38 @include margin-right(10px);
38 } 39 }
39} 40}
40 41
@@ -91,8 +92,8 @@ my-video-playlist-miniature {
91 92
92 my-video-playlist-miniature, 93 my-video-playlist-miniature,
93 .playlist-buttons { 94 .playlist-buttons {
94 margin-left: auto; 95 @include margin-left(auto);
95 margin-right: auto; 96 @include margin-right(auto);
96 } 97 }
97 98
98 ::ng-deep my-video-playlist-element-miniature { 99 ::ng-deep my-video-playlist-element-miniature {
@@ -102,7 +103,7 @@ my-video-playlist-miniature {
102 } 103 }
103 104
104 .position { 105 .position {
105 margin-right: 5px !important; 106 @include margin-right(5px !important);
106 } 107 }
107 } 108 }
108} 109}
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] {
18} 18}
19 19
20.video-playlist-buttons { 20.video-playlist-buttons {
21 @include margin-left(10px);
22
21 display: flex; 23 display: flex;
22 margin-left: 10px;
23 align-self: flex-end; 24 align-self: flex-end;
24} 25}
25 26
@@ -33,7 +34,7 @@ my-video-playlist-miniature {
33} 34}
34 35
35my-delete-button { 36my-delete-button {
36 margin-right: 10px; 37 @include margin-right(10px);
37} 38}
38 39
39@include on-small-main-col { 40@include on-small-main-col {
@@ -46,8 +47,9 @@ my-delete-button {
46 } 47 }
47 48
48 .video-playlist-buttons { 49 .video-playlist-buttons {
50 @include margin-left(auto);
51
49 margin-top: 10px; 52 margin-top: 10px;
50 margin-left: auto;
51 } 53 }
52} 54}
53 55
@@ -62,6 +64,6 @@ my-delete-button {
62 } 64 }
63 65
64 .action-button { 66 .action-button {
65 margin-left: 0; 67 @include margin-left(0);
66 } 68 }
67} 69}
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] {
7 7
8.peertube-select-container { 8.peertube-select-container {
9 @include peertube-select-container(auto); 9 @include peertube-select-container(auto);
10 margin-left: 0.5rem; 10 @include margin-left(0.5rem);
11} 11}
12 12
13h1 { 13h1 {
@@ -20,7 +20,7 @@ h1 {
20 @include button-with-icon(18px, 3px, -1px); 20 @include button-with-icon(18px, 3px, -1px);
21 21
22 &:not(:last-child) { 22 &:not(:last-child) {
23 margin-right: 10px; 23 @include margin-right(10px);
24 } 24 }
25 } 25 }
26} 26}
@@ -38,13 +38,14 @@ h1 {
38} 38}
39 39
40.action-button { 40.action-button {
41 @include margin-left(10px);
42
41 display: flex; 43 display: flex;
42 margin-left: 10px;
43 align-self: flex-end; 44 align-self: flex-end;
44} 45}
45 46
46my-edit-button { 47my-edit-button {
47 margin-right: 10px; 48 @include margin-right(10px);
48} 49}
49 50
50@include on-small-main-col { 51@include on-small-main-col {
@@ -58,8 +59,9 @@ my-edit-button {
58 } 59 }
59 60
60 .action-button { 61 .action-button {
62 @include margin-left(auto);
63
61 margin-top: 10px; 64 margin-top: 10px;
62 margin-left: auto;
63 } 65 }
64} 66}
65 67
@@ -72,11 +74,11 @@ my-edit-button {
72 margin-bottom: 12px; 74 margin-bottom: 12px;
73 } 75 }
74 .peertube-select-container { 76 .peertube-select-container {
75 margin-left: 0; 77 @include margin-left(0);
76 } 78 }
77 } 79 }
78 80
79 .action-button { 81 .action-button {
80 margin-left: 0; 82 @include margin-left(0);
81 } 83 }
82} 84}
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 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.root { 4.root {
5 @include margin-left(auto);
6 @include margin-right(auto);
7
5 height: 100%; 8 height: 100%;
6 margin-left: auto;
7 margin-right: auto;
8 text-align: center; 9 text-align: center;
9 padding-top: 150px; 10 padding-top: 150px;
10 display: flex; 11 display: flex;
@@ -12,20 +13,21 @@
12 flex-direction: column-reverse; 13 flex-direction: column-reverse;
13 14
14 .box { 15 .box {
15 text-align: left; 16 text-align: start;
16 font-size: 120%; 17 font-size: 120%;
17 padding: 0 15px; 18 padding: 0 15px;
18 } 19 }
19 20
20 img { 21 img {
21 margin-left: auto; 22 @include margin-left(auto);
23
22 width: 220px; 24 width: 220px;
23 height: auto; 25 height: auto;
24 } 26 }
25 27
26 @media screen and (max-width: $mobile-view) { 28 @media screen and (max-width: $mobile-view) {
27 img { 29 img {
28 margin-right: auto; 30 @include margin-right(auto);
29 } 31 }
30 } 32 }
31 33
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 {
12 12
13.peertube-radio-container { 13.peertube-radio-container {
14 @include peertube-radio-container; 14 @include peertube-radio-container;
15 @include margin-right(30px);
15 16
16 display: inline-block; 17 display: inline-block;
17 margin-right: 30px;
18} 18}
19 19
20.peertube-select-container { 20.peertube-select-container {
@@ -38,19 +38,18 @@ input[type=submit] {
38} 38}
39 39
40.submit-button { 40.submit-button {
41 text-align: right; 41 text-align: end;
42} 42}
43 43
44.reset-button { 44.reset-button {
45 @include peertube-button; 45 @include peertube-button;
46 @include margin-right(1rem);
46 47
47 font-weight: $font-semibold; 48 font-weight: $font-semibold;
48 display: inline-block; 49 display: inline-block;
49 padding: 0 10px; 50 padding: 0 10px;
50 white-space: nowrap; 51 white-space: nowrap;
51 background: transparent; 52 background: transparent;
52
53 margin-right: 1rem;
54} 53}
55 54
56.reset-button-small { 55.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 @@
37 37
38 .icon.icon-filter { 38 .icon.icon-filter {
39 @include icon(20px); 39 @include icon(20px);
40 @include margin-right(5px);
40 41
41 position: relative; 42 position: relative;
42 top: -1px; 43 top: -1px;
43 margin-right: 5px;
44 background-image: url('../../assets/images/feather/filter.svg'); 44 background-image: url('../../assets/images/feather/filter.svg');
45 } 45 }
46 } 46 }
@@ -78,9 +78,10 @@
78} 78}
79 79
80.video-channel-name { 80.video-channel-name {
81 @include margin-left(5px);
82
81 font-size: $video-miniature-row-info-font-size; 83 font-size: $video-miniature-row-info-font-size;
82 color: pvar(--greyForegroundColor); 84 color: pvar(--greyForegroundColor);
83 margin-left: 5px;
84} 85}
85 86
86// Use the same breakpoints than in video-miniature 87// 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;
5$index-block-height: 32px; 5$index-block-height: 32px;
6 6
7.container { 7.container {
8 padding-left: 0; 8 @include padding-left(0);
9 padding-right: 0; 9 @include padding-right(0);
10 max-width: unset !important; 10 max-width: unset !important;
11} 11}
12 12
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 @@
8 justify-content: center; 8 justify-content: center;
9 9
10 .playlist-wrapper { 10 .playlist-wrapper {
11 margin-right: 15px; 11 @include margin-right(15px);
12 padding-bottom: 15px; 12 padding-bottom: 15px;
13 } 13 }
14} 14}
@@ -24,9 +24,9 @@
24 } 24 }
25 25
26 .playlists { 26 .playlists {
27 justify-content: left; 27 @include margin-left(pvar(--horizontalMarginContent) !important);
28 @include margin-right(pvar(--horizontalMarginContent) !important);
28 29
29 margin-left: pvar(--horizontalMarginContent) !important; 30 justify-content: left;
30 margin-right: pvar(--horizontalMarginContent) !important;
31 } 31 }
32} 32}
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 @@
71 flex-wrap: wrap; 71 flex-wrap: wrap;
72 72
73 > *:not(:last-child) { 73 > *:not(:last-child) {
74 margin-right: 15px; 74 @include margin-right(15px);
75 } 75 }
76} 76}
77 77
78.channel-buttons.right { 78.channel-buttons.right {
79 margin-left: 45px; 79 @include margin-left(45px);
80} 80}
81 81
82// Only used by mobile 82// Only used by mobile
@@ -85,7 +85,7 @@
85} 85}
86 86
87.owner-card { 87.owner-card {
88 margin-left: 105px; 88 @include margin-left(105px);
89 grid-column: 2; 89 grid-column: 2;
90 // Takes all the column 90 // Takes all the column
91 grid-row: 1 / 3; 91 grid-row: 1 / 3;
@@ -112,7 +112,7 @@
112 } 112 }
113 113
114 .actor-info { 114 .actor-info {
115 margin-left: 15px; 115 @include margin-left(15px);
116 } 116 }
117 117
118 h4 { 118 h4 {
@@ -160,8 +160,9 @@
160 } 160 }
161 161
162 .owner-card { 162 .owner-card {
163 @include margin-left(60px);
164
163 grid-row: 2; 165 grid-row: 2;
164 margin-left: 60px;
165 } 166 }
166} 167}
167 168
@@ -215,8 +216,9 @@
215 padding: 0; 216 padding: 0;
216 217
217 .avatar-row { 218 .avatar-row {
219 @include margin-right(30px);
220
218 grid-column: 1; 221 grid-column: 1;
219 margin-right: 30px;
220 } 222 }
221 223
222 .owner-description { 224 .owner-description {
@@ -233,7 +235,7 @@
233 235
234 .view-account.complete { 236 .view-account.complete {
235 display: block; 237 display: block;
236 text-align: right; 238 text-align: end;
237 margin-top: 10px; 239 margin-top: 10px;
238 color: pvar(--mainColor); 240 color: pvar(--mainColor);
239 } 241 }
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 {
52} 52}
53 53
54.captions-header { 54.captions-header {
55 text-align: right; 55 text-align: end;
56 margin-bottom: 1rem; 56 margin-bottom: 1rem;
57} 57}
58 58
@@ -77,10 +77,10 @@ my-peertube-checkbox {
77 } 77 }
78 78
79 .caption-entry-label { 79 .caption-entry-label {
80 @include margin-right(20px);
81
80 font-size: 15px; 82 font-size: 15px;
81 font-weight: bold; 83 font-weight: bold;
82
83 margin-right: 20px;
84 width: 150px; 84 width: 150px;
85 } 85 }
86 86
@@ -108,12 +108,12 @@ my-peertube-checkbox {
108} 108}
109 109
110.submit-container { 110.submit-container {
111 text-align: right; 111 text-align: end;
112 112
113 .message-submit { 113 .message-submit {
114 display: inline-block; 114 @include margin-right(25px);
115 margin-right: 25px;
116 115
116 display: inline-block;
117 color: pvar(--greyForegroundColor); 117 color: pvar(--greyForegroundColor);
118 font-size: 15px; 118 font-size: 15px;
119 } 119 }
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 @@
23 23
24 .progress { 24 .progress {
25 @include progressbar; 25 @include progressbar;
26
26 flex-grow: 1; 27 flex-grow: 1;
27 height: 30px; 28 height: 30px;
28 font-size: 14px; 29 font-size: 14px;
@@ -31,12 +32,13 @@
31 .progress-bar { 32 .progress-bar {
32 background-color: $green; 33 background-color: $green;
33 line-height: 30px; 34 line-height: 30px;
34 text-align: left; 35 text-align: start;
35 font-weight: $font-semibold; 36 font-weight: $font-semibold;
36 37
37 span { 38 span {
39 @include margin-left(13px);
40
38 color: pvar(--mainBackgroundColor); 41 color: pvar(--mainBackgroundColor);
39 margin-left: 13px;
40 } 42 }
41 } 43 }
42 } 44 }
@@ -44,7 +46,6 @@
44 input { 46 input {
45 @include peertube-button; 47 @include peertube-button;
46 @include grey-button; 48 @include grey-button;
47 49 @include margin-left(10px);
48 margin-left: 10px;
49 } 50 }
50} 51}
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 @@
10 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea> 10 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
11 </textarea> 11 </textarea>
12 12
13 <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"> 13 <my-help
14 [ngClass]="{ 'is-rtl': isRTL() }" class="markdown-guide" helpType="custom" iconName="markdown"
15 tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"
16 >
14 <ng-template ptTemplate="customHtml"> 17 <ng-template ptTemplate="customHtml">
15 <span i18n>Markdown compatible that supports:</span> 18 <span i18n>Markdown compatible that supports:</span>
16 19
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 {
14 margin-bottom: 10px; 14 margin-bottom: 10px;
15 15
16 my-actor-avatar { 16 my-actor-avatar {
17 margin-right: 10px; 17 @include margin-right(10px);
18 } 18 }
19 19
20 .form-group { 20 .form-group {
@@ -26,12 +26,12 @@ form {
26 textarea { 26 textarea {
27 @include peertube-textarea(100%, $peertube-textarea-height); 27 @include peertube-textarea(100%, $peertube-textarea-height);
28 @include button-focus(pvar(--mainColorLightest)); 28 @include button-focus(pvar(--mainColorLightest));
29 @include padding-right($markdown-icon-width + 15px !important);
29 30
30 min-height: calc(#{$peertube-textarea-height} - 15px * 2); 31 min-height: calc(#{$peertube-textarea-height} - 15px * 2);
31 padding-right: $markdown-icon-width + 15px !important;
32 32
33 @media screen and (max-width: 600px) { 33 @media screen and (max-width: 600px) {
34 padding-right: $markdown-icon-width + 19px !important; 34 @include padding-right($markdown-icon-width + 19px !important);
35 } 35 }
36 36
37 &:focus::placeholder { 37 &:focus::placeholder {
@@ -45,6 +45,12 @@ form {
45 top: 5px; 45 top: 5px;
46 right: 9px; 46 right: 9px;
47 47
48 // inset-inline is not well supported by web browsers
49 &.is-rtl {
50 right: unset;
51 left: 9px;
52 }
53
48 ::ng-deep .help-tooltip-button { 54 ::ng-deep .help-tooltip-button {
49 my-global-icon { 55 my-global-icon {
50 height: $markdown-icon-height; 56 height: $markdown-icon-height;
@@ -86,9 +92,10 @@ form {
86 flex: 1; 92 flex: 1;
87 93
88 code { 94 code {
95 @include margin-left(5px);
96
89 display: inline-block; 97 display: inline-block;
90 vertical-align: middle; 98 vertical-align: middle;
91 margin-left: 5px;
92 } 99 }
93 } 100 }
94} 101}
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 @@
1import { Observable } from 'rxjs' 1import { Observable } from 'rxjs'
2import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' 2import { getLocaleDirection } from '@angular/common'
3import {
4 Component,
5 ElementRef,
6 EventEmitter,
7 Inject,
8 Input,
9 LOCALE_ID,
10 OnChanges,
11 OnInit,
12 Output,
13 SimpleChanges,
14 ViewChild
15} from '@angular/core'
3import { Router } from '@angular/router' 16import { Router } from '@angular/router'
4import { Notifier, User } from '@app/core' 17import { Notifier, User } from '@app/core'
5import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators' 18import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
@@ -37,7 +50,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
37 private notifier: Notifier, 50 private notifier: Notifier,
38 private videoCommentService: VideoCommentService, 51 private videoCommentService: VideoCommentService,
39 private modalService: NgbModal, 52 private modalService: NgbModal,
40 private router: Router 53 private router: Router,
54 @Inject(LOCALE_ID) private localeId: string
41 ) { 55 ) {
42 super() 56 super()
43 } 57 }
@@ -153,6 +167,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
153 this.form.value['text'] = this.textareaElement.nativeElement.value = '' 167 this.form.value['text'] = this.textareaElement.nativeElement.value = ''
154 } 168 }
155 169
170 isRTL () {
171 return getLocaleDirection(this.localeId) === 'rtl'
172 }
173
156 private addCommentReply (commentCreate: VideoCommentCreate) { 174 private addCommentReply (commentCreate: VideoCommentCreate) {
157 return this.videoCommentService 175 return this.videoCommentService
158 .addCommentReply(this.video.id, this.parentComment.id, commentCreate) 176 .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 @@
6 display: flex; 6 display: flex;
7 7
8 .left { 8 .left {
9 @include margin-right(10px);
10
9 display: flex; 11 display: flex;
10 flex-direction: column; 12 flex-direction: column;
11 align-items: center; 13 align-items: center;
12 margin-right: 10px;
13 14
14 .vertical-border { 15 .vertical-border {
15 width: 2px; 16 width: 2px;
@@ -51,6 +52,9 @@ my-actor-avatar {
51} 52}
52 53
53.video-author { 54.video-author {
55 @include padding-right(6px);
56 @include padding-left(6px);
57
54 height: 20px; 58 height: 20px;
55 background-color: #888888; 59 background-color: #888888;
56 border-radius: 12px; 60 border-radius: 12px;
@@ -60,8 +64,6 @@ my-actor-avatar {
60 flex-direction: row; 64 flex-direction: row;
61 align-items: center; 65 align-items: center;
62 display: inline-flex; 66 display: inline-flex;
63 padding-right: 6px;
64 padding-left: 6px;
65 color: #fff !important; 67 color: #fff !important;
66} 68}
67 69
@@ -86,9 +88,10 @@ my-actor-avatar {
86} 88}
87 89
88.comment-date { 90.comment-date {
91 @include margin-left(5px);
92
89 font-size: 90%; 93 font-size: 90%;
90 color: pvar(--greyForegroundColor); 94 color: pvar(--greyForegroundColor);
91 margin-left: 5px;
92 text-decoration: none; 95 text-decoration: none;
93 96
94 &:hover { 97 &:hover {
@@ -129,9 +132,10 @@ my-actor-avatar {
129 132
130 ::ng-deep .dropdown-toggle, 133 ::ng-deep .dropdown-toggle,
131 .comment-action-reply { 134 .comment-action-reply {
135 @include margin-right(10px);
136
132 color: pvar(--greyForegroundColor); 137 color: pvar(--greyForegroundColor);
133 cursor: pointer; 138 cursor: pointer;
134 margin-right: 10px;
135 139
136 &:hover, 140 &:hover,
137 &:active, 141 &:active,
@@ -162,25 +166,25 @@ my-video-comment-add {
162 } 166 }
163 167
164 .left { 168 .left {
165 margin-right: 6px; 169 @include margin-right(6px);
166 } 170 }
167} 171}
168 172
169@media screen and (max-width: 1200px) { 173@media screen and (max-width: 1200px) {
170 .children { 174 .children {
171 margin-left: -10px; 175 @include margin-left(-10px);
172 } 176 }
173} 177}
174 178
175@media screen and (max-width: 600px) { 179@media screen and (max-width: 600px) {
176 .children { 180 .children {
177 margin-left: -20px; 181 @include margin-left(-20px);
178 182
179 .left { 183 .left {
180 align-items: flex-start; 184 align-items: flex-start;
181 185
182 .vertical-border { 186 .vertical-border {
183 margin-left: 2px; 187 @include margin-left(2px);
184 } 188 }
185 } 189 }
186 } 190 }
@@ -189,7 +193,7 @@ my-video-comment-add {
189 flex-direction: column; 193 flex-direction: column;
190 194
191 .comment-date { 195 .comment-date {
192 margin-left: 0; 196 @include margin-left(0);
193 } 197 }
194 } 198 }
195} 199}
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 @@
13 13
14.glyphicon, 14.glyphicon,
15.comment-thread-loading { 15.comment-thread-loading {
16 margin-right: 5px; 16 @include margin-right(5px);
17
17 display: inline-block; 18 display: inline-block;
18 font-size: 13px; 19 font-size: 13px;
19} 20}
20 21
21.title-block { 22.title-block {
22 .title-page { 23 .title-page {
23 margin-right: 0; 24 @include margin-right(0);
24 } 25 }
25 26
26 my-feed { 27 my-feed {
28 @include margin-left(5px);
29
27 display: inline-block; 30 display: inline-block;
28 margin-left: 5px;
29 opacity: 0; 31 opacity: 0;
30 transition: ease-in .2s opacity; 32 transition: ease-in .2s opacity;
31 width: 12px; 33 width: 12px;
@@ -47,7 +49,7 @@
47 49
48@media screen and (max-width: 600px) { 50@media screen and (max-width: 600px) {
49 .view-replies { 51 .view-replies {
50 margin-left: 46px; 52 @include margin-left(46px);
51 } 53 }
52} 54}
53 55
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 @@
10 10
11 .title-page.active, 11 .title-page.active,
12 .title-page.title-page-single { 12 .title-page.title-page-single {
13 @include margin-right(.5rem !important);
14
13 margin-bottom: unset; 15 margin-bottom: unset;
14 margin-right: .5rem !important;
15 } 16 }
16} 17}
17 18
@@ -20,14 +21,16 @@
20} 21}
21 22
22.title-page-autoplay { 23.title-page-autoplay {
24 @include margin-left(auto);
25
23 display: flex; 26 display: flex;
24 width: max-content; 27 width: max-content;
25 height: max-content; 28 height: max-content;
26 align-items: center; 29 align-items: center;
27 margin-left: auto;
28 30
29 span { 31 span {
30 margin-right: 0.3rem; 32 @include margin-right(0.3rem);
33
31 text-transform: uppercase; 34 text-transform: uppercase;
32 font-size: 85%; 35 font-size: 85%;
33 font-weight: 600; 36 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 @@
15 15
16.wrapper { 16.wrapper {
17 @include actor-avatar-size(35px); 17 @include actor-avatar-size(35px);
18 @include margin-right(5px);
18 19
19 position: relative; 20 position: relative;
20 margin-right: 5px;
21 margin-bottom: 5px; 21 margin-bottom: 5px;
22 22
23 &.generic-channel { 23 &.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 @@
26 display: flex; 26 display: flex;
27 27
28 .playlist-by { 28 .playlist-by {
29 margin-right: 5px; 29 @include margin-right(5px);
30 } 30 }
31 31
32 .playlist-index span:first-child::after { 32 .playlist-index span:first-child::after {
@@ -40,7 +40,7 @@
40 margin: 10px 0; 40 margin: 10px 0;
41 41
42 my-global-icon:not(:last-child) { 42 my-global-icon:not(:last-child) {
43 margin-right: .5rem; 43 @include margin-right(.5rem);
44 } 44 }
45 45
46 my-global-icon { 46 my-global-icon {
@@ -59,7 +59,7 @@
59 ::ng-deep { 59 ::ng-deep {
60 .video { 60 .video {
61 .position { 61 .position {
62 margin-right: 0; 62 @include margin-right(0);
63 } 63 }
64 64
65 .video-info { 65 .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;
152 .video-info-name { 152 .video-info-name {
153 @include peertube-word-wrap; 153 @include peertube-word-wrap;
154 154
155 margin-right: 30px; 155 @include margin-right(30px);
156 min-height: 40px; // Align with the action buttons 156 min-height: 40px; // Align with the action buttons
157 font-size: 27px; 157 font-size: 27px;
158 font-weight: $font-semibold; 158 font-weight: $font-semibold;
@@ -167,9 +167,10 @@ $video-info-margin-left: 44px;
167 } 167 }
168 168
169 .video-info-date-views { 169 .video-info-date-views {
170 align-self: start; 170 @include margin-right(10px);
171
171 margin-bottom: 10px; 172 margin-bottom: 10px;
172 margin-right: 10px; 173 align-self: start;
173 font-size: 1em; 174 font-size: 1em;
174 } 175 }
175 176
@@ -209,15 +210,19 @@ $video-info-margin-left: 44px;
209 } 210 }
210 211
211 my-subscribe-button { 212 my-subscribe-button {
212 margin-left: 5px; 213 @include margin-left(5px);
213 } 214 }
214 } 215 }
215 216
216 .video-actions-rates { 217 .video-actions-rates {
217 margin: 0 0 10px; 218 @include margin-left(auto);
219 @include margin-right(0);
220
221 margin-top: 0;
222 margin-bottom: 10px;
223
218 align-items: start; 224 align-items: start;
219 width: max-content; 225 width: max-content;
220 margin-left: auto;
221 226
222 .video-actions { 227 .video-actions {
223 height: 40px; // Align with the title 228 height: 40px; // Align with the title
@@ -227,7 +232,7 @@ $video-info-margin-left: 44px;
227 .action-button:not(:first-child), 232 .action-button:not(:first-child),
228 .action-dropdown, 233 .action-dropdown,
229 my-video-actions-dropdown { 234 my-video-actions-dropdown {
230 margin-left: 5px; 235 @include margin-left(5px);
231 } 236 }
232 237
233 ::ng-deep.action-button { 238 ::ng-deep.action-button {
@@ -305,7 +310,7 @@ $video-info-margin-left: 44px;
305 } 310 }
306 311
307 .icon-text { 312 .icon-text {
308 margin-left: 3px; 313 @include margin-left(3px);
309 } 314 }
310 } 315 }
311 } 316 }
@@ -341,8 +346,11 @@ $video-info-margin-left: 44px;
341 } 346 }
342 347
343 .video-info-description { 348 .video-info-description {
344 margin: 20px 0; 349 @include margin-left($video-info-margin-left);
345 margin-left: $video-info-margin-left; 350 @include margin-right(0);
351
352 margin-top: 20px;
353 margin-bottom: 20px;
346 font-size: 15px; 354 font-size: 15px;
347 355
348 .video-info-description-html { 356 .video-info-description-html {
@@ -355,7 +363,7 @@ $video-info-margin-left: 44px;
355 363
356 .glyphicon, 364 .glyphicon,
357 .description-loading { 365 .description-loading {
358 margin-left: 3px; 366 @include margin-left(3px);
359 } 367 }
360 368
361 .description-loading { 369 .description-loading {
@@ -376,7 +384,7 @@ $video-info-margin-left: 44px;
376 } 384 }
377 385
378 .video-attributes { 386 .video-attributes {
379 margin-left: $video-info-margin-left; 387 @include margin-left($video-info-margin-left);
380 } 388 }
381 389
382 .video-attributes .video-attribute { 390 .video-attributes .video-attribute {
@@ -385,8 +393,9 @@ $video-info-margin-left: 44px;
385 margin-bottom: 12px; 393 margin-bottom: 12px;
386 394
387 .video-attribute-label { 395 .video-attribute-label {
396 @include padding-right(5px);
397
388 min-width: 142px; 398 min-width: 142px;
389 padding-right: 5px;
390 display: inline-block; 399 display: inline-block;
391 color: pvar(--greyForegroundColor); 400 color: pvar(--greyForegroundColor);
392 font-weight: $font-bold; 401 font-weight: $font-bold;
@@ -413,8 +422,9 @@ $video-info-margin-left: 44px;
413} 422}
414 423
415my-recommended-videos { 424my-recommended-videos {
425 @include padding-left(15px);
426
416 display: block; 427 display: block;
417 padding-left: 15px;
418 min-width: 250px; 428 min-width: 250px;
419} 429}
420 430
@@ -432,14 +442,15 @@ my-video-comments {
432 442
433@media screen and (max-width: $small-view) { 443@media screen and (max-width: $small-view) {
434 .privacy-concerns { 444 .privacy-concerns {
435 margin-left: $menu-width - 15px; // Menu is absolute 445 @include margin-left($menu-width - 15px); // Menu is absolute
436 } 446 }
437} 447}
438 448
439:host-context(.expanded) { 449:host-context(.expanded) {
440 .privacy-concerns { 450 .privacy-concerns {
451 @include margin-left(-15px);
452
441 width: 100%; 453 width: 100%;
442 margin-left: -15px;
443 } 454 }
444} 455}
445 456
@@ -473,8 +484,9 @@ my-video-comments {
473 } 484 }
474 485
475 .privacy-concerns-button { 486 .privacy-concerns-button {
487 @include margin-left(auto);
488
476 padding: 5px 8px 5px 7px; 489 padding: 5px 8px 5px 7px;
477 margin-left: auto;
478 border-radius: 3px; 490 border-radius: 3px;
479 white-space: nowrap; 491 white-space: nowrap;
480 cursor: pointer; 492 cursor: pointer;
@@ -487,8 +499,9 @@ my-video-comments {
487 } 499 }
488 500
489 .privacy-concerns-okay { 501 .privacy-concerns-okay {
502 @include margin-left(10px);
503
490 background-color: pvar(--mainColor); 504 background-color: pvar(--mainColor);
491 margin-left: 10px;
492 } 505 }
493} 506}
494 507
@@ -525,7 +538,7 @@ my-video-comments {
525 } 538 }
526 539
527 my-recommended-videos { 540 my-recommended-videos {
528 padding-left: 0; 541 @include padding-left(0);
529 } 542 }
530} 543}
531 544
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 @@
53 53
54 my-actor-avatar { 54 my-actor-avatar {
55 @include actor-avatar-size(28px); 55 @include actor-avatar-size(28px);
56 @include margin-right(8px);
56 57
57 font-size: initial; 58 font-size: initial;
58 margin-right: 8px;
59 } 59 }
60 } 60 }
61 61
62 .followers { 62 .followers {
63 @include margin-left(10px);
64
63 color: pvar(--greyForegroundColor); 65 color: pvar(--greyForegroundColor);
64 font-weight: normal; 66 font-weight: normal;
65 font-size: 14px; 67 font-size: 14px;
66 margin-left: 10px;
67 position: relative; 68 position: relative;
68 top: 2px; 69 top: 2px;
69 } 70 }
@@ -87,8 +88,9 @@
87 overflow: initial; 88 overflow: initial;
88 89
89 .section-title { 90 .section-title {
91 @include margin-left(10px);
92
90 font-size: 17px; 93 font-size: 17px;
91 margin-left: 10px;
92 } 94 }
93 } 95 }
94} 96}
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 @@
1@import '_mixins';
2
1.btn-group label { 3.btn-group label {
2 border: 1px solid transparent; 4 border: 1px solid transparent;
3 border-radius: 9999px !important; 5 border-radius: 9999px !important;
@@ -5,13 +7,14 @@
5 opacity: .8; 7 opacity: .8;
6 8
7 &:not(:first-child) { 9 &:not(:first-child) {
8 margin-left: .5rem; 10 @include margin-left(.5rem);
9 } 11 }
10 12
11 my-global-icon { 13 my-global-icon {
14 @include margin-right(.1rem);
15
12 position: relative; 16 position: relative;
13 top: -2px; 17 top: -2px;
14 height: 1rem; 18 height: 1rem;
15 margin-right: .1rem;
16 } 19 }
17} 20}
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 @@
83 } 83 }
84 84
85 .icon.icon-logo { 85 .icon.icon-logo {
86 @include margin-right(0.5rem);
87
86 display: inline-block; 88 display: inline-block;
87 width: 23px; 89 width: 23px;
88 height: 24px; 90 height: 24px;
89 margin-right: 0.5rem;
90 } 91 }
91} 92}
92 93
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 @@
1import { Hotkey, HotkeysService } from 'angular2-hotkeys' 1import { Hotkey, HotkeysService } from 'angular2-hotkeys'
2import { filter, map, pairwise, switchMap } from 'rxjs/operators' 2import { filter, map, pairwise, switchMap } from 'rxjs/operators'
3import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common' 3import { DOCUMENT, getLocaleDirection, PlatformLocation, ViewportScroller } from '@angular/common'
4import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core' 4import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
5import { DomSanitizer, SafeHtml } from '@angular/platform-browser' 5import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
6import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router' 6import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router'
@@ -107,6 +107,7 @@ export class AppComponent implements OnInit, AfterViewInit {
107 this.openModalsIfNeeded() 107 this.openModalsIfNeeded()
108 108
109 this.document.documentElement.lang = getShortLocale(this.localeId) 109 this.document.documentElement.lang = getShortLocale(this.localeId)
110 this.document.documentElement.dir = getLocaleDirection(this.localeId)
110 } 111 }
111 112
112 ngAfterViewInit () { 113 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 @@
51 51
52.cfp-hotkeys-keys { 52.cfp-hotkeys-keys {
53 padding: 5px; 53 padding: 5px;
54 text-align: right; 54 text-align: end;
55} 55}
56 56
57.cfp-hotkeys-key { 57.cfp-hotkeys-key {
58 @include margin-right(5px);
59
58 display: inline-block; 60 display: inline-block;
59 color: #fff; 61 color: #fff;
60 background-color: #333; 62 background-color: #333;
61 border: 1px solid #333; 63 border: 1px solid #333;
62 border-radius: 5px; 64 border-radius: 5px;
63 text-align: center; 65 text-align: center;
64 margin-right: 5px;
65 box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb; 66 box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
66 padding: 5px 9px; 67 padding: 5px 9px;
67 font-size: 1em; 68 font-size: 1em;
68} 69}
69 70
70.cfp-hotkeys-text { 71.cfp-hotkeys-text {
71 padding-left: 10px; 72 @include padding-left(10px);
72 font-size: 1em; 73 font-size: 1em;
73} 74}
74 75
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 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4my-search-typeahead { 4my-search-typeahead {
5 margin-right: 15px; 5 @include margin-right(15px);
6} 6}
7 7
8.publish-button { 8.publish-button {
9 @include peertube-button-link; 9 @include peertube-button-link;
10 @include orange-button; 10 @include orange-button;
11 @include button-with-icon(22px, 3px, -1px); 11 @include button-with-icon(22px, 3px, -1px);
12 12 @include margin-right(25px);
13 margin-right: 25px;
14 13
15 @media screen and (max-width: 600px) { 14 @media screen and (max-width: 600px) {
16 margin-right: 10px; 15 @include margin-right(10px);
16
17 padding: 0 10px; 17 padding: 0 10px;
18 18
19 .icon.icon-upload { 19 .icon.icon-upload {
20 margin-right: 0; 20 @include margin-right(0);
21 } 21 }
22 22
23 .publish-button-label { 23 .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 @@
6#search-video { 6#search-video {
7 @include peertube-input-text($search-input-width); 7 @include peertube-input-text($search-input-width);
8 8
9 padding-left: 10px; 9 @include padding-left(10px);
10 padding-right: 40px; // For the search icon 10 @include padding-right(40px); // For the search icon
11
11 font-size: 14px; 12 font-size: 14px;
12 13
13 &::placeholder { 14 &::placeholder {
@@ -17,11 +18,12 @@
17 18
18.icon-search { 19.icon-search {
19 @include icon(25px); 20 @include icon(25px);
21 @include margin-left(-35px);
22
20 height: 18px; 23 height: 18px;
21 24
22 // yolo 25 // yolo
23 position: absolute; 26 position: absolute;
24 margin-left: -35px;
25 margin-top: 3.5px; 27 margin-top: 3.5px;
26 right: 10px; 28 right: 10px;
27} 29}
@@ -65,8 +67,9 @@ li.suggestion {
65 margin-bottom: .5rem; 67 margin-bottom: .5rem;
66 68
67 em { 69 em {
70 @include margin-right(0.2rem);
71
68 font-weight: 600; 72 font-weight: 600;
69 margin-right: 0.2rem;
70 font-style: normal; 73 font-style: normal;
71 } 74 }
72 } 75 }
@@ -81,7 +84,7 @@ li.suggestion {
81 } 84 }
82 85
83 @media screen and (min-width: $mobile-view) { 86 @media screen and (min-width: $mobile-view) {
84 margin-left: 10px; 87 @include margin-left(10px);
85 } 88 }
86 89
87 @media screen and (max-width: $small-view) { 90 @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 @@
3 <div class="top-menu"> 3 <div class="top-menu">
4 <div *ngIf="isLoggedIn" class="logged-in-block"> 4 <div *ngIf="isLoggedIn" class="logged-in-block">
5 <div> 5 <div>
6 <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"> 6 <div
7 class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
8 [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
9 >
7 <div ngbDropdownToggle> 10 <div ngbDropdownToggle>
8 <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar> 11 <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar>
9 <div class="logged-in-info"> 12 <div class="logged-in-info">
@@ -18,8 +21,10 @@
18 </div> 21 </div>
19 22
20 <div ngbDropdownMenu> 23 <div ngbDropdownMenu>
21 <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]" 24 <a
22 #profile (click)="onActiveLinkScrollToAnchor(profile)"> 25 *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
26 #profile (click)="onActiveLinkScrollToAnchor(profile)"
27 >
23 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container> 28 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
24 </a> 29 </a>
25 30
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;
7 7
8.menu-link { 8.menu-link {
9 @include disable-default-a-behaviour; 9 @include disable-default-a-behaviour;
10 @include padding-left($menu-lateral-padding);
11 @include padding-right(20px);
10 12
11 display: flex; 13 display: flex;
12 align-items: center; 14 align-items: center;
13 padding-left: $menu-lateral-padding; 15
14 color: pvar(--menuForegroundColor); 16 color: pvar(--menuForegroundColor);
15 cursor: pointer; 17 cursor: pointer;
16 font-size: 16px; 18 font-size: 16px;
17 white-space: normal; 19 white-space: normal;
18 word-break: break-word; 20 word-break: break-word;
19 padding-right: 20px;
20 transition: background-color .1s ease-in-out; 21 transition: background-color .1s ease-in-out;
21 line-height: $line-height-normal; 22 line-height: $line-height-normal;
22 23
@@ -31,11 +32,11 @@ $footer-links-base-opacity: .8;
31 32
32 my-global-icon { 33 my-global-icon {
33 @include apply-svg-color(#808080); 34 @include apply-svg-color(#808080);
35 @include margin-right($menu-link-icon-margin-right);
34 36
35 display: flex; 37 display: flex;
36 width: $menu-link-icon-size; 38 width: $menu-link-icon-size;
37 height: $menu-link-icon-size; 39 height: $menu-link-icon-size;
38 margin-right: $menu-link-icon-margin-right;
39 } 40 }
40} 41}
41 42
@@ -99,8 +100,8 @@ menu {
99} 100}
100 101
101my-notification { 102my-notification {
102 margin-left: auto; 103 @include margin-left(auto);
103 margin-right: 15px; 104 @include margin-right(15px);
104} 105}
105 106
106.logged-in-more { 107.logged-in-more {
@@ -111,16 +112,18 @@ my-notification {
111 .dropdown-toggle-indicator { 112 .dropdown-toggle-indicator {
112 display: inherit !important; 113 display: inherit !important;
113 } 114 }
115
114 .dropdown-toggle:first-child { 116 .dropdown-toggle:first-child {
115 padding-right: 30px !important; 117 @include padding-left(30px !important);
116 } 118 }
117 } 119 }
118 } 120 }
119 121
120 $main-radius: 25px; 122 $main-radius: 25px;
121 123
124 @include margin-left(13px);
125
122 flex: 1; 126 flex: 1;
123 margin-left: 13px;
124 border-radius: $main-radius; 127 border-radius: $main-radius;
125 transition: all .1s ease-in-out; 128 transition: all .1s ease-in-out;
126 cursor: pointer; 129 cursor: pointer;
@@ -180,7 +183,7 @@ my-notification {
180} 183}
181 184
182my-actor-avatar { 185my-actor-avatar {
183 margin-right: 10px; 186 @include margin-right(10px);
184} 187}
185 188
186.logged-in-info { 189.logged-in-info {
@@ -224,11 +227,11 @@ my-actor-avatar {
224 min-height: 35px; 227 min-height: 35px;
225 228
226 my-global-icon { 229 my-global-icon {
230 // Keep aligned with other icons
231 @include margin-left($additional-margin);
232
227 width: $icon-size; 233 width: $icon-size;
228 height: $icon-size; 234 height: $icon-size;
229
230 // Keep aligned with other icons
231 margin-left: $additional-margin;
232 } 235 }
233 236
234 &.active, 237 &.active,
@@ -246,7 +249,7 @@ my-actor-avatar {
246 border-left: $border-left-width solid var(--mainColor); 249 border-left: $border-left-width solid var(--mainColor);
247 250
248 my-global-icon { 251 my-global-icon {
249 margin-left: $additional-margin - $border-left-width; 252 @include margin-left($additional-margin - $border-left-width);
250 } 253 }
251 } 254 }
252 } 255 }
@@ -280,13 +283,13 @@ my-actor-avatar {
280 283
281 .block-title { 284 .block-title {
282 @include ellipsis; 285 @include ellipsis;
286 @include margin-left(26px);
287 @include margin-right(30px);
283 288
284 text-transform: uppercase; 289 text-transform: uppercase;
285 font-weight: $font-bold; // Bold 290 font-weight: $font-bold; // Bold
286 font-size: 13px; 291 font-size: 13px;
287 margin-bottom: 25px; 292 margin-bottom: 25px;
288 margin-left: 26px;
289 margin-right: 30px;
290 } 293 }
291 294
292 a { 295 a {
@@ -314,6 +317,8 @@ my-actor-avatar {
314 317
315 a, 318 a,
316 span[role=button] { 319 span[role=button] {
320 @include margin-right(8px);
321
317 display: inline-block; 322 display: inline-block;
318 text-decoration: none; 323 text-decoration: none;
319 color: pvar(--menuForegroundColor); 324 color: pvar(--menuForegroundColor);
@@ -322,7 +327,6 @@ my-actor-avatar {
322 font-size: 90%; 327 font-size: 90%;
323 font-weight: 500; 328 font-weight: 500;
324 line-height: 1.4rem; 329 line-height: 1.4rem;
325 margin-right: 8px;
326 } 330 }
327} 331}
328 332
@@ -397,10 +401,10 @@ my-actor-avatar {
397 401
398my-global-icon { 402my-global-icon {
399 &[iconName=playlists] { 403 &[iconName=playlists] {
404 @include margin-right(16px);
405
400 height: 24px; 406 height: 24px;
401 width: 24px; 407 width: 24px;
402
403 margin-right: 16px;
404 } 408 }
405 409
406 &[iconName=videos] { 410 &[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 {
94 this.htmlServerConfig = this.serverService.getHTMLConfig() 94 this.htmlServerConfig = this.serverService.getHTMLConfig()
95 this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage() 95 this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
96 96
97 this.isLoggedIn = this.authService.isLoggedIn()
97 this.updateUserState() 98 this.updateUserState()
98 this.buildMenuSections() 99 this.buildMenuSections()
99 100
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 @@
141 position: relative; 141 position: relative;
142 142
143 .unread-notifications { 143 .unread-notifications {
144 margin-left: 20px; 144 @include margin-left(20px);
145 } 145 }
146 146
147 .unread-notifications { 147 .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 @@
17} 17}
18 18
19.mascot { 19.mascot {
20 @include margin-right(2rem);
21
20 display: block; 22 display: block;
21 min-width: 170px; 23 min-width: 170px;
22 margin-right: 2rem;
23} 24}
24 25
25.subtitle { 26.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 @@
1@import '_mixins';
2@import '_variables';
3
1.comment-flagged-account, 4.comment-flagged-account,
2.account-flagged-handle { 5.account-flagged-handle {
3 font-size: 11px; 6 font-size: 11px;
@@ -5,13 +8,14 @@
5} 8}
6 9
7.abuse-states .glyphicon-comment { 10.abuse-states .glyphicon-comment {
8 margin-left: 0.5rem; 11 @include margin-left(0.5rem);
9} 12}
10 13
11.abuse-messages { 14.abuse-messages {
12 my-global-icon { 15 my-global-icon {
16 @include margin-left(3px);
17
13 width: 22px; 18 width: 22px;
14 margin-left: 3px;
15 position: relative; 19 position: relative;
16 top: -2px; 20 top: -2px;
17 } 21 }
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 @@
5 display: flex; 5 display: flex;
6 6
7 my-actor-avatar { 7 my-actor-avatar {
8 margin-right: 15px; 8 @include margin-right(15px);
9 } 9 }
10 10
11 .actor-info { 11 .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 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4my-video-miniature { 4my-video-miniature {
5 margin-right: 15px; 5 @include margin-right(15px);
6 display: inline-block; 6 display: inline-block;
7 min-width: $video-thumbnail-width; 7 min-width: $video-thumbnail-width;
8 max-width: $video-thumbnail-width; 8 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 @@
3 3
4input { 4input {
5 @include peertube-input-text(auto); 5 @include peertube-input-text(auto);
6 @include padding-left(15px !important);
7 @include padding-right(15px !important);
6 8
7 // set again properties of peertube-input-text that are overriden by .input-group 9 // set again properties of peertube-input-text that are overriden by .input-group
8 font-size: 15px !important; 10 font-size: 15px !important;
9 padding-left: 15px !important;
10 padding-right: 15px !important;
11} 11}
12 12
13.eye-button { 13.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;
24 } 24 }
25 25
26 .nav-preview { 26 .nav-preview {
27 @include padding-left(10px);
28 @include padding-right(10px);
29
27 display: block; 30 display: block;
28 text-align: right; 31 text-align: end;
29 padding-top: 10px; 32 padding-top: 10px;
30 padding-bottom: 10px; 33 padding-bottom: 10px;
31 padding-left: 10px;
32 padding-right: 10px;
33 border-top: 1px dashed $input-border-color; 34 border-top: 1px dashed $input-border-color;
34 border-left: 1px solid $input-border-color; 35 border-left: 1px solid $input-border-color;
35 border-right: 1px solid $input-border-color; 36 border-right: 1px solid $input-border-color;
@@ -77,7 +78,7 @@ $input-border-radius: 3px;
77 border-bottom: 2px solid pvar(--mainColor); 78 border-bottom: 2px solid pvar(--mainColor);
78 79
79 :first-child { 80 :first-child {
80 margin-left: auto; 81 @include margin-left(auto);
81 } 82 }
82 83
83 ::ng-deep { 84 ::ng-deep {
@@ -91,7 +92,7 @@ $input-border-radius: 3px;
91 } 92 }
92 93
93 .maximize-button { 94 .maximize-button {
94 margin-left: 5px; 95 @include margin-left(5px);
95 } 96 }
96 } 97 }
97} 98}
@@ -120,10 +121,11 @@ $input-border-radius: 3px;
120 121
121 .nav-preview { 122 .nav-preview {
122 @include nav-preview-medium(); 123 @include nav-preview-medium();
124 @include padding-right(0);
125 @include padding-left(0);
126
123 padding-top: #{$nav-preview-vertical-padding / 2}; 127 padding-top: #{$nav-preview-vertical-padding / 2};
124 padding-bottom: #{$nav-preview-vertical-padding / 2}; 128 padding-bottom: #{$nav-preview-vertical-padding / 2};
125 padding-left: 0;
126 padding-right: 0;
127 position: absolute; 129 position: absolute;
128 background-color: pvar(--mainBackgroundColor); 130 background-color: pvar(--mainBackgroundColor);
129 width: 100% !important; 131 width: 100% !important;
@@ -132,7 +134,7 @@ $input-border-radius: 3px;
132 border-right: 0; 134 border-right: 0;
133 135
134 :last-child { 136 :last-child {
135 margin-right: pvar(--horizontalMarginContent); 137 @include margin-right(pvar(--horizontalMarginContent));
136 } 138 }
137 } 139 }
138 140
@@ -181,11 +183,11 @@ $input-border-radius: 3px;
181 .nav-preview { 183 .nav-preview {
182 ::ng-deep .nav-link { 184 ::ng-deep .nav-link {
183 @include ellipsis(); 185 @include ellipsis();
186 @include margin-right(10px !important);
184 187
185 display: block !important; 188 display: block !important;
186 max-width: 45% !important; 189 max-width: 45% !important;
187 padding: 5px 0 !important; 190 padding: 5px 0 !important;
188 margin-right: 10px !important;
189 text-align: center; 191 text-align: center;
190 192
191 &:not(.active) { 193 &: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 @@
36 } 36 }
37 37
38 .recommended { 38 .recommended {
39 margin-left: .5rem; 39 @include margin-left(.5rem);
40
40 align-self: baseline; 41 align-self: baseline;
41 display: inline-block; 42 display: inline-block;
42 padding: 4px 6px; 43 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 @@
16 } 16 }
17 17
18 .filename { 18 .filename {
19 @include margin-left(5px);
20
19 font-weight: $font-semibold; 21 font-weight: $font-semibold;
20 margin-left: 5px;
21 } 22 }
22} 23}
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 {
43my-select-options + input { 43my-select-options + input {
44 @include peertube-input-text($form-base-input-width); 44 @include peertube-input-text($form-base-input-width);
45 45
46 margin-left: 5px; 46 @include margin-left(5px);
47 display: block; 47 display: block;
48} 48}
49 49
50.input-suffix { 50.input-suffix {
51 margin-left: 5px; 51 @include margin-left(5px);
52} 52}
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 {
12 } 12 }
13 13
14 &.sub-label { 14 &.sub-label {
15 @include padding-left(30px);
16
15 font-weight: $font-regular; 17 font-weight: $font-regular;
16 padding-left: 30px;
17 } 18 }
18 19
19 .more-info { 20 .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 {
24a[class$=-button], 24a[class$=-button],
25span[class$=-button] { 25span[class$=-button] {
26 > span { 26 > span {
27 margin-left: 5px; 27 @include margin-left(5px);
28 } 28 }
29} 29}
30 30
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 @@
24 24
25 .popover-body { 25 .popover-body {
26 font-family: $main-fonts; 26 font-family: $main-fonts;
27 text-align: left; 27 text-align: start;
28 padding: 10px; 28 padding: 10px;
29 font-size: 13px; 29 font-size: 13px;
30 background-color: pvar(--mainBackgroundColor); 30 background-color: pvar(--mainBackgroundColor);
@@ -36,7 +36,7 @@
36 } 36 }
37 37
38 ul { 38 ul {
39 padding-left: 20px; 39 @include padding-left(20px);
40 margin-bottom: 0; 40 margin-bottom: 0;
41 } 41 }
42 } 42 }
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 @@
6} 6}
7 7
8my-global-icon { 8my-global-icon {
9 @include margin-left(10px);
10
9 height: 28px; 11 height: 28px;
10 width: 28px; 12 width: 28px;
11 margin-left: 10px;
12 cursor: pointer; 13 cursor: pointer;
13 14
14 &:hover { 15 &: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 @@
22 22
23 my-global-icon { 23 my-global-icon {
24 @include apply-svg-color(#333); 24 @include apply-svg-color(#333);
25 @include margin-right(11px);
26 @include margin-left(3px);
25 27
26 width: 24px; 28 width: 24px;
27 margin-right: 11px;
28 margin-left: 3px;
29 } 29 }
30 30
31 .avatar { 31 .avatar {
32 @include margin-right(10px);
33
32 width: 30px; 34 width: 30px;
33 height: 30px; 35 height: 30px;
34 min-width: 30px; 36 min-width: 30px;
35 min-height: 30px; 37 min-height: 30px;
36 border-radius: 5px; 38 border-radius: 5px;
37 margin-right: 10px;
38 } 39 }
39 40
40 .message { 41 .message {
@@ -46,11 +47,12 @@
46 } 47 }
47 48
48 .from-date { 49 .from-date {
50 @include padding-left(5px);
51 @include margin-left(auto);
52
49 font-size: 0.85em; 53 font-size: 0.85em;
50 color: pvar(--greyForegroundColor); 54 color: pvar(--greyForegroundColor);
51 padding-left: 5px;
52 min-width: 70px; 55 min-width: 70px;
53 text-align: right; 56 text-align: end;
54 margin-left: auto;
55 } 57 }
56} 58}
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 {
8 8
9.user-quota { 9.user-quota {
10 label { 10 label {
11 margin-right: 5px; 11 @include margin-right(5px);
12 } 12 }
13 13
14 &, 14 &,
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 @@
9 font-weight: $font-semibold; 9 font-weight: $font-semibold;
10 display: inline-block; 10 display: inline-block;
11 vertical-align: top; 11 vertical-align: top;
12 text-align: right; 12 text-align: end;
13 } 13 }
14 14
15 .moderation-expanded-text { 15 .moderation-expanded-text {
@@ -79,10 +79,10 @@ my-action-dropdown.show {
79 $image-height: 45px; 79 $image-height: 45px;
80 80
81 @include miniature-thumbnail; 81 @include miniature-thumbnail;
82 @include margin-right(0.5rem);
82 83
83 height: $image-height; 84 height: $image-height;
84 width: #{(16/9) * $image-height}; 85 width: #{(16/9) * $image-height};
85 margin-right: 0.5rem;
86 border-radius: 2px; 86 border-radius: 2px;
87 border: 0; 87 border: 0;
88 background: transparent; 88 background: transparent;
@@ -121,9 +121,10 @@ my-action-dropdown.show {
121 line-height: 1rem; 121 line-height: 1rem;
122 122
123 div .glyphicon { 123 div .glyphicon {
124 @include margin-left(0.1rem);
125
124 font-size: 80%; 126 font-size: 80%;
125 color: #808080; 127 color: #808080;
126 margin-left: 0.1rem;
127 } 128 }
128 129
129 div + div { 130 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 {
16 align-items: center; 16 align-items: center;
17 17
18 my-timestamp-input { 18 my-timestamp-input {
19 margin-left: 10px; 19 @include margin-left(10px);
20 } 20 }
21} 21}
22 22
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 {
50 cursor: pointer; 50 cursor: pointer;
51 51
52 .glyphicon { 52 .glyphicon {
53 margin-right: 5px; 53 @include margin-right(5px);
54 } 54 }
55 } 55 }
56 56
@@ -66,7 +66,7 @@ my-input-toggle-hidden {
66 align-items: center; 66 align-items: center;
67 67
68 .peertube-select-container { 68 .peertube-select-container {
69 margin-left: 10px; 69 @include margin-left(10px);
70 } 70 }
71 } 71 }
72 72
@@ -77,7 +77,7 @@ my-input-toggle-hidden {
77 align-items: center; 77 align-items: center;
78 78
79 my-timestamp-input { 79 my-timestamp-input {
80 margin-left: 10px; 80 @include margin-left(10px);
81 } 81 }
82 } 82 }
83} 83}
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 @@
38 38
39 // Unlogged 39 // Unlogged
40 > .dropdown > .dropdown-toggle span { 40 > .dropdown > .dropdown-toggle span {
41 padding-right: 3px; 41 @include padding-right(3px);
42 } 42 }
43 43
44 // Logged 44 // Logged
45 > .btn { 45 > .btn {
46 padding-right: 4px; 46 @include padding-right(4px);
47 47
48 + .dropdown > button { 48 + .dropdown > button {
49 padding-left: 2px; 49 @include padding-left(2px);
50 50
51 &::after { 51 &::after {
52 position: relative; 52 position: relative;
@@ -62,7 +62,7 @@
62 } 62 }
63 63
64 span.followers-count { 64 span.followers-count {
65 padding-left: 5px; 65 @include padding-left(5px);
66 } 66 }
67 } 67 }
68 &.unsubscribe-button { 68 &.unsubscribe-button {
@@ -108,6 +108,6 @@
108 108
109 span:not(:first-child) { 109 span:not(:first-child) {
110 font-size: 60%; 110 font-size: 60%;
111 text-align: left; 111 text-align: start;
112 } 112 }
113} 113}
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;
21 } 21 }
22 22
23 .moderation-block { 23 .moderation-block {
24 margin-left: .4rem; 24 @include margin-left(.4rem);
25
25 display: flex; 26 display: flex;
26 justify-content: flex-end; 27 justify-content: flex-end;
27 align-items: center; 28 align-items: center;
@@ -54,8 +55,8 @@ $icon-size: 16px;
54} 55}
55 56
56.display-as-row.videos { 57.display-as-row.videos {
57 margin-left: pvar(--horizontalMarginContent); 58 @include margin-left(pvar(--horizontalMarginContent));
58 margin-right: pvar(--horizontalMarginContent); 59 @include margin-right(pvar(--horizontalMarginContent));
59 60
60 .video-wrapper { 61 .video-wrapper {
61 margin-bottom: 15px; 62 margin-bottom: 15px;
@@ -70,8 +71,9 @@ $icon-size: 16px;
70 margin-bottom: 10px; 71 margin-bottom: 10px;
71 72
72 .title-page { 73 .title-page {
74 @include margin-right(0);
75
73 margin-bottom: 10px; 76 margin-bottom: 10px;
74 margin-right: 0;
75 } 77 }
76 } 78 }
77} 79}
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 @@
19 } 19 }
20 20
21 .glyphicon { 21 .glyphicon {
22 margin-right: 5px; 22 @include margin-right(5px);
23 } 23 }
24} 24}
25 25
@@ -46,9 +46,9 @@
46 46
47 .peertube-radio-container { 47 .peertube-radio-container {
48 @include peertube-radio-container; 48 @include peertube-radio-container;
49 @include margin-right(30px);
49 50
50 display: inline-block; 51 display: inline-block;
51 margin-right: 30px;
52 } 52 }
53} 53}
54 54
@@ -66,8 +66,9 @@
66 margin-bottom: 12px; 66 margin-bottom: 12px;
67 67
68 .metadata-attribute-label { 68 .metadata-attribute-label {
69 @include padding-right(5px);
70
69 min-width: 142px; 71 min-width: 142px;
70 padding-right: 5px;
71 display: inline-block; 72 display: inline-block;
72 color: pvar(--greyForegroundColor); 73 color: pvar(--greyForegroundColor);
73 font-weight: $font-bold; 74 font-weight: $font-bold;
@@ -75,6 +76,7 @@
75 76
76 a.metadata-attribute-value { 77 a.metadata-attribute-value {
77 @include disable-default-a-behaviour; 78 @include disable-default-a-behaviour;
79
78 color: pvar(--mainForegroundColor); 80 color: pvar(--mainForegroundColor);
79 81
80 &:hover { 82 &: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;
13} 13}
14 14
15my-actor-avatar { 15my-actor-avatar {
16 margin: 10px 10px 0 0; 16 @include margin(10px, 10px, 0, 0);
17} 17}
18 18
19.video-miniature-created-at-views { 19.video-miniature-created-at-views {
@@ -155,10 +155,11 @@ my-actor-avatar {
155 } 155 }
156 156
157 my-video-thumbnail { 157 my-video-thumbnail {
158 @include margin-right(10px);
159
158 min-width: var(--rowThumbnailWidth); 160 min-width: var(--rowThumbnailWidth);
159 max-width: var(--rowThumbnailWidth); 161 max-width: var(--rowThumbnailWidth);
160 height: var(--rowThumbnailHeight); 162 height: var(--rowThumbnailHeight);
161 margin-right: 10px;
162 } 163 }
163 164
164 .video-miniature-name { 165 .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 @@
11 position: fixed; 11 position: fixed;
12 12
13 .action-button { 13 .action-button {
14 @include margin-left(55px);
15
14 display: block; 16 display: block;
15 margin-left: 55px;
16 } 17 }
17} 18}
18 19
@@ -29,10 +30,11 @@
29 } 30 }
30 31
31 .checkbox-container { 32 .checkbox-container {
33 @include margin-right(20px);
34 @include margin-left(12px);
35
32 display: flex; 36 display: flex;
33 align-items: center; 37 align-items: center;
34 margin-right: 20px;
35 margin-left: 12px;
36 } 38 }
37 39
38 my-video-miniature { 40 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;
44 } 44 }
45 45
46 > .optional-rows { 46 > .optional-rows {
47 padding-left: 24px; 47 @include padding-left(24px);
48 } 48 }
49 49
50 &.has-optional-row:hover { 50 &.has-optional-row:hover {
@@ -57,7 +57,7 @@ $timestamp-margin-right: 10px;
57 display: flex; 57 display: flex;
58 58
59 my-peertube-checkbox { 59 my-peertube-checkbox {
60 margin-right: 10px; 60 @include margin-right(10px);
61 align-self: center; 61 align-self: center;
62 } 62 }
63 63
@@ -78,15 +78,15 @@ $timestamp-margin-right: 10px;
78 78
79 my-global-icon { 79 my-global-icon {
80 @include apply-svg-color(#333); 80 @include apply-svg-color(#333);
81 @include margin-right(0);
81 82
82 width: 19px; 83 width: 19px;
83 height: 19px; 84 height: 19px;
84 margin-right: 0;
85 } 85 }
86 } 86 }
87 87
88 my-timestamp-input { 88 my-timestamp-input {
89 margin-right: $timestamp-margin-right; 89 @include margin-right($timestamp-margin-right);
90 90
91 ::ng-deep .ui-inputtext { 91 ::ng-deep .ui-inputtext {
92 padding: 0; 92 padding: 0;
@@ -101,20 +101,23 @@ $timestamp-margin-right: 10px;
101 } 101 }
102 102
103 my-peertube-checkbox { 103 my-peertube-checkbox {
104 @include margin-right(0 !important);
105
104 display: block; 106 display: block;
105 width: $optional-rows-checkbox-width; 107 width: $optional-rows-checkbox-width;
106 margin-right: 0 !important;
107 } 108 }
108 109
109 .labels { 110 .labels {
110 margin-left: $optional-rows-checkbox-width; 111 @include margin-left($optional-rows-checkbox-width);
112
111 font-size: 13px; 113 font-size: 13px;
112 color: pvar(--greyForegroundColor); 114 color: pvar(--greyForegroundColor);
113 padding-top: 5px; 115 padding-top: 5px;
114 padding-bottom: 0; 116 padding-bottom: 0;
115 117
116 div { 118 div {
117 margin-right: $timestamp-margin-right; 119 @include margin-right($timestamp-margin-right);
120
118 width: $timestamp-width; 121 width: $timestamp-width;
119 } 122 }
120 } 123 }
@@ -131,11 +134,11 @@ $timestamp-margin-right: 10px;
131 134
132 my-global-icon { 135 my-global-icon {
133 @include apply-svg-color(#333); 136 @include apply-svg-color(#333);
137 @include margin-right(4px);
134 138
135 position: relative; 139 position: relative;
136 left: -1px; 140 left: -1px;
137 top: -1px; 141 top: -1px;
138 margin-right: 4px;
139 width: 21px; 142 width: 21px;
140 height: 21px; 143 height: 21px;
141 } 144 }
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 {
17 17
18my-video-thumbnail, 18my-video-thumbnail,
19.fake-thumbnail { 19.fake-thumbnail {
20 @include margin-right(10px);
21
20 display: flex; // Avoids an issue with line-height that adds space below the element 22 display: flex; // Avoids an issue with line-height that adds space below the element
21 margin-right: 10px;
22} 23}
23 24
24.video { 25.video {
@@ -60,8 +61,9 @@ my-video-thumbnail,
60 cursor: pointer; 61 cursor: pointer;
61 62
62 .position { 63 .position {
64 @include margin-right(10px);
65
63 font-weight: $font-semibold; 66 font-weight: $font-semibold;
64 margin-right: 10px;
65 color: pvar(--greyForegroundColor); 67 color: pvar(--greyForegroundColor);
66 min-width: 25px; 68 min-width: 25px;
67 69
@@ -101,8 +103,9 @@ my-video-thumbnail,
101 103
102 .more, 104 .more,
103 my-edit-button { 105 my-edit-button {
106 @include margin-left(auto);
107
104 justify-self: flex-end; 108 justify-self: flex-end;
105 margin-left: auto;
106 cursor: pointer; 109 cursor: pointer;
107 min-width: 24px; 110 min-width: 24px;
108 } 111 }
@@ -135,8 +138,9 @@ my-video-thumbnail,
135 } 138 }
136 139
137 .timestamp-options { 140 .timestamp-options {
141 @include padding-left(35px);
142
138 padding-top: 0; 143 padding-top: 0;
139 padding-left: 35px;
140 margin-bottom: 15px; 144 margin-bottom: 15px;
141 145
142 > div { 146 > div {
@@ -146,7 +150,7 @@ my-video-thumbnail,
146 } 150 }
147 151
148 my-peertube-checkbox { 152 my-peertube-checkbox {
149 margin-right: 5px; 153 @include margin-right(5px);
150 } 154 }
151 155
152 input { 156 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 @@
88 display: flex; 88 display: flex;
89 89
90 .miniature-thumbnail { 90 .miniature-thumbnail {
91 @include margin-right(10px);
92
91 width: var(--rowThumbnailWidth); 93 width: var(--rowThumbnailWidth);
92 height: var(--rowThumbnailHeight); 94 height: var(--rowThumbnailHeight);
93 margin-right: 10px;
94 } 95 }
95} 96}
96 97
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 16:40:35 +0000