aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.github/CONTRIBUTING.md8
-rw-r--r--client/angular.json18
-rw-r--r--client/proxy.config.json4
-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
-rw-r--r--client/src/sass/application.scss34
-rw-r--r--client/src/sass/bootstrap.scss29
-rw-r--r--client/src/sass/include/_actor.scss3
-rw-r--r--client/src/sass/include/_miniature.scss11
-rw-r--r--client/src/sass/include/_mixins.scss95
-rw-r--r--client/src/sass/ng-select.scss6
-rw-r--r--client/src/sass/player/bezels.scss3
-rw-r--r--client/src/sass/player/context-menu.scss5
-rw-r--r--client/src/sass/player/peertube-skin.scss41
-rw-r--r--client/src/sass/player/settings-menu.scss16
-rw-r--r--client/src/sass/player/stats.scss2
-rw-r--r--client/src/sass/player/upnext.scss6
-rw-r--r--client/src/sass/primeng-custom.scss43
-rw-r--r--client/src/standalone/videos/test-embed.scss11
-rwxr-xr-xscripts/dev/client.sh8
-rwxr-xr-xscripts/dev/index.sh2
99 files changed, 634 insertions, 368 deletions
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 7c480c52f..a37159fa8 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -163,6 +163,14 @@ and the web server is automatically restarted.
163$ npm run dev 163$ npm run dev
164``` 164```
165 165
166### RTL layout
167
168To test RTL layout using `ar` locale:
169
170```
171$ npm run dev -- --ar-locale
172```
173
166### Testing 174### Testing
167 175
168Your code contributions must pass the tests before they can be merged. Tests ensure most of the application behaves 176Your code contributions must pass the tests before they can be merged. Tests ensure most of the application behaves
diff --git a/client/angular.json b/client/angular.json
index 39fe7aa51..251161579 100644
--- a/client/angular.json
+++ b/client/angular.json
@@ -202,6 +202,21 @@
202 } 202 }
203 ] 203 ]
204 }, 204 },
205 "ar-locale": {
206 "localize": ["ar"],
207 "budgets": [
208 {
209 "type": "anyComponentStyle",
210 "maximumWarning": "6kb"
211 }
212 ],
213 "fileReplacements": [
214 {
215 "replace": "src/environments/environment.ts",
216 "with": "src/environments/environment.hmr.ts"
217 }
218 ]
219 },
205 "hmr": { 220 "hmr": {
206 "localize": false, 221 "localize": false,
207 "budgets": [ 222 "budgets": [
@@ -247,6 +262,9 @@
247 "hmr": { 262 "hmr": {
248 "browserTarget": "PeerTube:build:hmr" 263 "browserTarget": "PeerTube:build:hmr"
249 }, 264 },
265 "ar-locale": {
266 "browserTarget": "PeerTube:build:ar-locale"
267 },
250 "e2e": { 268 "e2e": {
251 "browserTarget": "PeerTube:build:e2e", 269 "browserTarget": "PeerTube:build:e2e",
252 "proxyConfig": "e2e/proxy.config.json" 270 "proxyConfig": "e2e/proxy.config.json"
diff --git a/client/proxy.config.json b/client/proxy.config.json
index e9c6c4aff..0681066be 100644
--- a/client/proxy.config.json
+++ b/client/proxy.config.json
@@ -28,6 +28,10 @@
28 "target": "http://localhost:9000", 28 "target": "http://localhost:9000",
29 "secure": false 29 "secure": false
30 }, 30 },
31 "/client/locales": {
32 "target": "http://localhost:9000",
33 "secure": false
34 },
31 "/!(client)**": { 35 "/!(client)**": {
32 "target": "http://localhost:3000/client/index.html", 36 "target": "http://localhost:3000/client/index.html",
33 "secure": false, 37 "secure": false,
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
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ae511aa02..799b8c881 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -65,6 +65,9 @@ body {
65 // Allow to disable the scrollbar instead of hide it when the content fit the body 65 // Allow to disable the scrollbar instead of hide it when the content fit the body
66 // And not move the content and header horizontally sticked to right when the content is updating 66 // And not move the content and header horizontally sticked to right when the content is updating
67 overflow-y: scroll; 67 overflow-y: scroll;
68
69 // Fix "reboot" style that set text-align: left
70 text-align: start;
68} 71}
69 72
70::selection { 73::selection {
@@ -130,8 +133,7 @@ my-input-toggle-hidden ::ng-deep input {
130 133
131.full-width { 134.full-width {
132 width: 100%; 135 width: 100%;
133 margin-left: auto; 136 margin: 0 auto;
134 margin-right: auto;
135 max-width: initial; 137 max-width: initial;
136} 138}
137 139
@@ -144,13 +146,13 @@ my-input-toggle-hidden ::ng-deep input {
144} 146}
145 147
146.main-col { 148.main-col {
147 margin-left: $menu-width; 149 @include margin-left($menu-width);
150
148 width: calc(100% - #{$menu-width}); 151 width: calc(100% - #{$menu-width});
149 outline: none; 152 outline: none;
150 153
151 .margin-content { 154 .margin-content {
152 margin-left: pvar(--horizontalMarginContent); 155 margin: 0 pvar(--horizontalMarginContent);
153 margin-right: pvar(--horizontalMarginContent);
154 flex-grow: 1; 156 flex-grow: 1;
155 } 157 }
156 158
@@ -159,8 +161,7 @@ my-input-toggle-hidden ::ng-deep input {
159 width: 100%; 161 width: 100%;
160 display: flex; 162 display: flex;
161 align-items: center; 163 align-items: center;
162 padding-left: pvar(--horizontalMarginContent); 164 padding: 0 pvar(--horizontalMarginContent);
163 padding-right: pvar(--horizontalMarginContent);
164 height: $sub-menu-height; 165 height: $sub-menu-height;
165 margin-bottom: $sub-menu-margin-bottom; 166 margin-bottom: $sub-menu-margin-bottom;
166 overflow-x: auto; 167 overflow-x: auto;
@@ -182,7 +183,7 @@ my-input-toggle-hidden ::ng-deep input {
182 --horizontalMarginContent: #{$expanded-horizontal-margins}; 183 --horizontalMarginContent: #{$expanded-horizontal-margins};
183 --mainColWidth: 100vw; 184 --mainColWidth: 100vw;
184 185
185 margin-left: 0; 186 @include margin-left(0);
186 width: 100%; 187 width: 100%;
187 } 188 }
188 189
@@ -199,12 +200,12 @@ my-input-toggle-hidden ::ng-deep input {
199 200
200.title-page { 201.title-page {
201 @include disable-default-a-behaviour; 202 @include disable-default-a-behaviour;
203 @include margin-right(55px);
202 204
203 opacity: 0.6; 205 opacity: 0.6;
204 color: pvar(--mainForegroundColor); 206 color: pvar(--mainForegroundColor);
205 font-size: 16px; 207 font-size: 16px;
206 display: inline-block; 208 display: inline-block;
207 margin-right: 55px;
208 font-weight: $font-semibold; 209 font-weight: $font-semibold;
209 border-bottom: 2px solid transparent; 210 border-bottom: 2px solid transparent;
210 211
@@ -237,7 +238,7 @@ my-input-toggle-hidden ::ng-deep input {
237 } 238 }
238 239
239 @media screen and (max-width: $mobile-view) { 240 @media screen and (max-width: $mobile-view) {
240 margin-right: 15px; 241 @include margin-left(15px);
241 } 242 }
242} 243}
243 244
@@ -365,8 +366,7 @@ ngx-loading-bar {
365 --horizontalMarginContent: #{$expanded-horizontal-margins / 3}; 366 --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
366 367
367 .sub-menu { 368 .sub-menu {
368 padding-left: 50px; 369 padding: 0 50px;
369 padding-right: 50px;
370 370
371 .title-page { 371 .title-page {
372 font-size: 17px; 372 font-size: 17px;
@@ -386,12 +386,11 @@ ngx-loading-bar {
386 .main-col.expanded { 386 .main-col.expanded {
387 --horizontalMarginContent: 15px; 387 --horizontalMarginContent: 15px;
388 388
389 margin-left: 0; 389 @include margin-left(0);
390 390
391 .sub-menu { 391 .sub-menu {
392 width: 100vw; 392 width: 100vw;
393 padding-left: 15px; 393 padding: 0 15px;
394 padding-right: 15px;
395 margin-bottom: $sub-menu-margin-bottom-small-view; 394 margin-bottom: $sub-menu-margin-bottom-small-view;
396 overflow-x: auto; 395 overflow-x: auto;
397 } 396 }
@@ -405,7 +404,8 @@ ngx-loading-bar {
405 flex-direction: column; 404 flex-direction: column;
406 405
407 .form-sub-title { 406 .form-sub-title {
408 margin-right: 0 !important; 407 @include margin-right(0 !important);
408
409 margin-bottom: 10px; 409 margin-bottom: 10px;
410 text-align: center; 410 text-align: center;
411 } 411 }
@@ -419,7 +419,7 @@ ngx-loading-bar {
419 width: 100%; 419 width: 100%;
420 420
421 a { 421 a {
422 margin-left: 5px; 422 @include margin-left(5px);
423 } 423 }
424 } 424 }
425 } 425 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 548e55e1e..501587eb2 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -62,7 +62,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
62 font-size: 15px; 62 font-size: 15px;
63 63
64 .dropdown-header { 64 .dropdown-header {
65 padding-left: 1rem; 65 @include padding-left(1rem);
66 } 66 }
67 67
68 .dropdown-item { 68 .dropdown-item {
@@ -105,7 +105,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
105 } 105 }
106 106
107 .modal-dialog { 107 .modal-dialog {
108 text-align: left; 108 text-align: start;
109 109
110 &:not(.modal-lg):not(.modal-xl) { 110 &:not(.modal-lg):not(.modal-xl) {
111 min-width: 500px; 111 min-width: 500px;
@@ -153,10 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
153 153
154 .inputs { 154 .inputs {
155 margin-bottom: 0; 155 margin-bottom: 0;
156 text-align: right; 156 text-align: end;
157 157
158 > .peertube-button:not(:first-child) { 158 > .peertube-button:not(:first-child) {
159 margin-left: 10px; 159 @include margin-left(10px);
160 } 160 }
161 } 161 }
162} 162}
@@ -342,7 +342,7 @@ ngb-tooltip-window {
342 position: relative; 342 position: relative;
343 343
344 input { 344 input {
345 padding-right: 1.5rem !important; 345 @include padding-right(1.5rem !important);
346 } 346 }
347 347
348 .form-control-clear { 348 .form-control-clear {
@@ -392,3 +392,22 @@ ngb-tooltip-window {
392 border-left-color: pvar(--mainColor); 392 border-left-color: pvar(--mainColor);
393 } 393 }
394} 394}
395
396// Override these properties for Bidi support
397@each $size, $length in $spacers {
398 .ml-#{$size} {
399 @include margin-left($length);
400 }
401
402 .mr-#{$size} {
403 @include margin-right($length);
404 }
405
406 .pl-#{$size} {
407 @include padding-left($length);
408 }
409
410 .pr-#{$size} {
411 @include padding-right($length);
412 }
413}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 372e7bd24..ab2038dde 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -30,7 +30,8 @@
30 } 30 }
31 31
32 > div { 32 > div {
33 margin-left: $img-margin; 33 @include margin-left($img-margin);
34
34 min-width: 1px; 35 min-width: 1px;
35 } 36 }
36 37
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 070aa3398..f782d374a 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -14,8 +14,9 @@
14 } 14 }
15 15
16 &.blur-filter { 16 &.blur-filter {
17 @include padding-left(4px);
18
17 filter: blur(3px); 19 filter: blur(3px);
18 padding-left: 4px;
19 } 20 }
20} 21}
21 22
@@ -102,11 +103,11 @@
102 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)}; 103 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
103 104
104 @if $margin { 105 @if $margin {
105 margin-left: var(--gridVideosMiniatureMargins) !important; 106 @include margin-left(var(--gridVideosMiniatureMargins) !important);
106 margin-right: var(--gridVideosMiniatureMargins) !important; 107 @include margin-right(var(--gridVideosMiniatureMargins) !important);
107 } @else { 108 } @else {
108 padding-left: var(--gridVideosMiniatureMargins) !important; 109 @include padding-left(var(--gridVideosMiniatureMargins) !important);
109 padding-right: var(--gridVideosMiniatureMargins) !important; 110 @include padding-right(var(--gridVideosMiniatureMargins) !important);
110 } 111 }
111 112
112 @media screen and (max-width: $mobile-view) { 113 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4f2421aea..19454cdb2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -84,6 +84,7 @@
84} 84}
85 85
86@mixin peertube-input-text($width) { 86@mixin peertube-input-text($width) {
87 padding: 0 15px;
87 display: inline-block; 88 display: inline-block;
88 height: $button-height; 89 height: $button-height;
89 width: $width; 90 width: $width;
@@ -91,8 +92,6 @@
91 background-color: pvar(--inputBackgroundColor); 92 background-color: pvar(--inputBackgroundColor);
92 border: 1px solid #C6C6C6; 93 border: 1px solid #C6C6C6;
93 border-radius: 3px; 94 border-radius: 3px;
94 padding-left: 15px;
95 padding-right: 15px;
96 font-size: 15px; 95 font-size: 15px;
97 96
98 &::placeholder { 97 &::placeholder {
@@ -257,6 +256,8 @@
257} 256}
258 257
259@mixin peertube-button { 258@mixin peertube-button {
259 @include padding(0, 17px, 0, 13px);
260
260 border: 0; 261 border: 0;
261 font-weight: $font-semibold; 262 font-weight: $font-semibold;
262 font-size: 15px; 263 font-size: 15px;
@@ -265,7 +266,6 @@
265 // FIXME: because of primeng that redefines border-radius of all input[type="..."] 266 // FIXME: because of primeng that redefines border-radius of all input[type="..."]
266 border-radius: 3px !important; 267 border-radius: 3px !important;
267 text-align: center; 268 text-align: center;
268 padding: 0 17px 0 13px;
269 cursor: pointer; 269 cursor: pointer;
270} 270}
271 271
@@ -290,9 +290,10 @@
290 line-height: normal !important; 290 line-height: normal !important;
291 291
292 my-global-icon { 292 my-global-icon {
293 @include margin-right($margin-right);
294
293 position: relative; 295 position: relative;
294 width: $width; 296 width: $width;
295 margin-right: $margin-right;
296 top: $top; 297 top: $top;
297 } 298 }
298} 299}
@@ -310,7 +311,7 @@
310 width: 100%; 311 width: 100%;
311 height: 100%; 312 height: 100%;
312 font-size: 100px; 313 font-size: 100px;
313 text-align: right; 314 text-align: end;
314 filter: alpha(opacity=0); 315 filter: alpha(opacity=0);
315 opacity: 0; 316 opacity: 0;
316 outline: none; 317 outline: none;
@@ -428,6 +429,8 @@
428 cursor: pointer; 429 cursor: pointer;
429 430
430 &::before { 431 &::before {
432 @include margin-right(10px);
433
431 position: relative; 434 position: relative;
432 top: -2px; 435 top: -2px;
433 content: ''; 436 content: '';
@@ -440,7 +443,6 @@
440 vertical-align: middle; 443 vertical-align: middle;
441 cursor: pointer; 444 cursor: pointer;
442 text-align: center; 445 text-align: center;
443 margin-right: 10px;
444 } 446 }
445 } 447 }
446 448
@@ -500,9 +502,10 @@
500 } 502 }
501 503
502 + span + span { 504 + span + span {
505 @include margin-left(5px);
506
503 font-size: 15px; 507 font-size: 15px;
504 font-weight: $font-regular; 508 font-weight: $font-regular;
505 margin-left: 5px;
506 cursor: pointer; 509 cursor: pointer;
507 display: inline; 510 display: inline;
508 } 511 }
@@ -635,10 +638,10 @@
635 padding: 6px 15px; 638 padding: 6px 15px;
636 639
637 my-global-icon { 640 my-global-icon {
641 @include margin-right(10px);
642
638 width: 22px; 643 width: 22px;
639 opacity: .7; 644 opacity: .7;
640
641 margin-right: 10px;
642 position: relative; 645 position: relative;
643 top: -2px; 646 top: -2px;
644 } 647 }
@@ -705,10 +708,12 @@
705 } 708 }
706 709
707 + .breadcrumb-item { 710 + .breadcrumb-item {
708 padding-left: 0.5rem; 711 @include padding-left(0.5rem);
712
709 &::before { 713 &::before {
714 @include padding-right(0.5rem);
715
710 display: inline-block; 716 display: inline-block;
711 padding-right: 0.5rem;
712 color: #6c757d; 717 color: #6c757d;
713 content: '/'; 718 content: '/';
714 } 719 }
@@ -822,8 +827,8 @@
822 } 827 }
823 828
824 my-actor-avatar { 829 my-actor-avatar {
825 margin-left: -.4rem; 830 @include margin-left(-.4rem);
826 margin-right: .2rem; 831 @include margin-right(.2rem);
827 } 832 }
828 833
829 &.two-lines { 834 &.two-lines {
@@ -836,11 +841,11 @@
836 } 841 }
837 842
838 div { 843 div {
844 margin: 0 .1rem;
845
839 display: flex; 846 display: flex;
840 flex-direction: column; 847 flex-direction: column;
841 height: $avatar-height; 848 height: $avatar-height;
842 margin-left: .1rem;
843 margin-right: .1rem;
844 justify-content: center; 849 justify-content: center;
845 } 850 }
846 } 851 }
@@ -875,14 +880,14 @@
875 880
876 > span > my-global-icon, 881 > span > my-global-icon,
877 > my-global-icon { 882 > my-global-icon {
878 margin-right: 10px; 883 @include margin-right(10px);
879 width: 24px; 884 width: 24px;
880 height: 24px; 885 height: 24px;
881 vertical-align: top; 886 vertical-align: top;
882 } 887 }
883 888
884 .badge { 889 .badge {
885 margin-left: 7px; 890 @include margin-left(7px);
886 vertical-align: top; 891 vertical-align: top;
887 } 892 }
888 } 893 }
@@ -930,3 +935,59 @@
930 } 935 }
931 } 936 }
932} 937}
938
939@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
940 @include margin-left($inline-start);
941 @include margin-right($inline-end);
942
943 margin-top: $block-start;
944 margin-bottom: $block-end;
945}
946
947@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
948 @include padding-left($inline-start);
949 @include padding-right($inline-end);
950
951 padding-top: $block-start;
952 padding-bottom: $block-end;
953}
954
955@mixin margin-left ($value) {
956 @supports (margin-inline-start: $value) {
957 margin-inline-start: $value;
958 }
959
960 @supports not (margin-inline-start: $value) {
961 margin-left: $value;
962 }
963}
964
965@mixin margin-right ($value) {
966 @supports (margin-inline-end: $value) {
967 margin-inline-end: $value;
968 }
969
970 @supports not (margin-inline-end: $value) {
971 margin-right: $value;
972 }
973}
974
975@mixin padding-left ($value) {
976 @supports (padding-inline-start: $value) {
977 padding-inline-start: $value;
978 }
979
980 @supports not (padding-inline-start: $value) {
981 padding-left: $value;
982 }
983}
984
985@mixin padding-right ($value) {
986 @supports (padding-inline-end: $value) {
987 padding-inline-end: $value;
988 }
989
990 @supports not (padding-inline-end: $value) {
991 padding-right: $value;
992 }
993}
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 13b2012b2..ecd33babe 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -31,7 +31,7 @@ $ng-select-value-font-size: 15px;
31 } 31 }
32 32
33 .ng-arrow-wrapper { 33 .ng-arrow-wrapper {
34 padding-right: 12px; 34 @include padding-right(12px);
35 } 35 }
36 36
37 &.ng-select-single .ng-value-container .ng-value { 37 &.ng-select-single .ng-value-container .ng-value {
@@ -44,10 +44,10 @@ $ng-select-value-font-size: 15px;
44 } 44 }
45 45
46 &.ng-select-multiple .ng-select-container .ng-value-container { 46 &.ng-select-multiple .ng-select-container .ng-value-container {
47 padding-left: 12px; 47 @include padding-left(12px);
48 48
49 .ng-value { /* stylelint-disable-line */ 49 .ng-value { /* stylelint-disable-line */
50 margin-left: 3px; 50 @include margin-left(12px);
51 } 51 }
52 } 52 }
53} 53}
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index 853a030a3..b8c3325d0 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -9,13 +9,14 @@
9} 9}
10 10
11.vjs-bezel { 11.vjs-bezel {
12 @include margin-left(-26px);
13
12 position: absolute; 14 position: absolute;
13 left: 50%; 15 left: 50%;
14 top: 50%; 16 top: 50%;
15 width: 52px; 17 width: 52px;
16 height: 52px; 18 height: 52px;
17 z-index: 19; 19 z-index: 19;
18 margin-left: -26px;
19 margin-top: -26px; 20 margin-top: -26px;
20 background: rgba(0, 0, 0, .5); 21 background: rgba(0, 0, 0, .5);
21 border-radius: 26px; 22 border-radius: 26px;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 1653dd2c4..501c68ffd 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -25,7 +25,7 @@ $context-menu-width: 350px;
25 cursor: pointer; 25 cursor: pointer;
26 font-size: 1em; 26 font-size: 1em;
27 padding: 8px 16px; 27 padding: 8px 16px;
28 text-align: left; 28 text-align: start;
29 text-transform: none; 29 text-transform: none;
30 30
31 &:hover { 31 &:hover {
@@ -35,6 +35,8 @@ $context-menu-width: 350px;
35 [class^='vjs-icon-'] { 35 [class^='vjs-icon-'] {
36 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; 36 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
37 37
38 @include margin-right(0.8rem !important);
39
38 display: inline-flex; 40 display: inline-flex;
39 position: relative; 41 position: relative;
40 top: 2px; 42 top: 2px;
@@ -43,7 +45,6 @@ $context-menu-width: 350px;
43 height: 14px; 45 height: 14px;
44 background-color: #fff; 46 background-color: #fff;
45 mask-size: cover; 47 mask-size: cover;
46 margin-right: 0.8rem !important;
47 48
48 @each $icon in $icons { 49 @each $icon in $icons {
49 &[class$="-#{$icon}"] { 50 &[class$="-#{$icon}"] {
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index c010f7297..148992089 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -20,8 +20,9 @@ body {
20 color: pvar(--embedForegroundColor); 20 color: pvar(--embedForegroundColor);
21 21
22 .vjs-dock-text { 22 .vjs-dock-text {
23 @include padding-right(60px);
24
23 padding: $dock-padding; 25 padding: $dock-padding;
24 padding-right: 60px;
25 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%); 26 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
26 } 27 }
27 28
@@ -34,11 +35,11 @@ body {
34 font-size: 11px; 35 font-size: 11px;
35 36
36 .text::before { 37 .text::before {
37 margin-right: 4px; 38 @include margin-right(4px);
38 } 39 }
39 40
40 .text::after { 41 .text::after {
41 margin-left: 4px; 42 @include margin-left(4px);
42 transform: scale(-1, 1); 43 transform: scale(-1, 1);
43 } 44 }
44 } 45 }
@@ -55,6 +56,8 @@ body {
55 $big-play-width: 1.2em; 56 $big-play-width: 1.2em;
56 $big-play-height: 1.2em; 57 $big-play-height: 1.2em;
57 58
59 @include margin-left(-($big-play-width / 2));
60
58 outline: 0; 61 outline: 0;
59 font-size: 6em; 62 font-size: 6em;
60 63
@@ -66,7 +69,6 @@ body {
66 width: $big-play-width; 69 width: $big-play-width;
67 height: $big-play-height; 70 height: $big-play-height;
68 line-height: $big-play-height; 71 line-height: $big-play-height;
69 margin-left: -($big-play-width / 2);
70 margin-top: -($big-play-height / 2); 72 margin-top: -($big-play-height / 2);
71 transition: 0.4s opacity; 73 transition: 0.4s opacity;
72 74
@@ -157,7 +159,7 @@ body {
157 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); 159 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
158 160
159 > button:first-child { 161 > button:first-child {
160 margin-left: $first-control-bar-element-margin-left; 162 @include margin-left($first-control-bar-element-margin-left);
161 } 163 }
162 164
163 .vjs-progress-control, 165 .vjs-progress-control,
@@ -188,11 +190,12 @@ body {
188 } 190 }
189 191
190 .vjs-progress-control { 192 .vjs-progress-control {
193 @include margin-left($progress-margin);
194
191 position: absolute; 195 position: absolute;
192 z-index: 100; // On top of the progress bar 196 z-index: 100; // On top of the progress bar
193 bottom: 29px; 197 bottom: 29px;
194 width: calc(100% - (2 * #{$progress-margin})); 198 width: calc(100% - (2 * #{$progress-margin}));
195 margin-left: $progress-margin;
196 height: 14px; 199 height: 14px;
197 200
198 .vjs-slider { 201 .vjs-slider {
@@ -261,17 +264,19 @@ body {
261 line-height: inherit; 264 line-height: inherit;
262 265
263 &.vjs-current-time { 266 &.vjs-current-time {
267 @include margin-left(.5em);
268
264 font-size: $font-size; 269 font-size: $font-size;
265 display: inline-block; 270 display: inline-block;
266 padding: 0; 271 padding: 0;
267 margin-left: .5em;
268 272
269 .vjs-current-time-display { 273 .vjs-current-time-display {
270 line-height: calc(#{$control-bar-height} - 1px); 274 line-height: calc(#{$control-bar-height} - 1px);
271 275
272 &::after { 276 &::after {
277 @include margin(0, 1px, 0, 2px);
278
273 content: '/'; 279 content: '/';
274 margin: 0 1px 0 2px;
275 } 280 }
276 } 281 }
277 } 282 }
@@ -298,10 +303,11 @@ body {
298 } 303 }
299 304
300 .vjs-peertube { 305 .vjs-peertube {
306 @include margin-right(6px);
307
301 width: 100%; 308 width: 100%;
302 line-height: $control-bar-height; 309 line-height: $control-bar-height;
303 text-align: right; 310 text-align: end;
304 margin-right: 6px;
305 overflow: hidden; 311 overflow: hidden;
306 312
307 .vjs-peertube-displayed { 313 .vjs-peertube-displayed {
@@ -323,7 +329,7 @@ body {
323 .upload-speed-text, 329 .upload-speed-text,
324 .peers-text, 330 .peers-text,
325 .http-fallback { 331 .http-fallback {
326 margin-right: 15px; 332 @include margin-right(15px);
327 } 333 }
328 334
329 .icon { 335 .icon {
@@ -340,7 +346,7 @@ body {
340 .vjs-next-video, 346 .vjs-next-video,
341 .vjs-previous-video { 347 .vjs-previous-video {
342 line-height: $control-bar-height; 348 line-height: $control-bar-height;
343 text-align: right; 349 text-align: end;
344 350
345 .icon { 351 .icon {
346 &.icon-next, 352 &.icon-next,
@@ -415,8 +421,9 @@ body {
415 } 421 }
416 422
417 .vjs-volume-control { 423 .vjs-volume-control {
424 @include margin(0, 5px, 0, 0);
425
418 width: 30px; 426 width: 30px;
419 margin: 0 5px 0 0;
420 } 427 }
421 428
422 .vjs-volume-bar { 429 .vjs-volume-bar {
@@ -490,9 +497,9 @@ body {
490 497
491 .vjs-theater-control { 498 .vjs-theater-control {
492 @include disable-outline; 499 @include disable-outline;
500 @include margin-right(1px);
493 501
494 width: 37px; 502 width: 37px;
495 margin-right: 1px;
496 cursor: pointer; 503 cursor: pointer;
497 504
498 .vjs-icon-placeholder { 505 .vjs-icon-placeholder {
@@ -512,9 +519,9 @@ body {
512 519
513 .vjs-fullscreen-control { 520 .vjs-fullscreen-control {
514 @include disable-outline; 521 @include disable-outline;
522 @include margin-left($first-control-bar-element-margin-left);
515 523
516 width: 37px; 524 width: 37px;
517 margin-right: $first-control-bar-element-margin-left;
518 525
519 .vjs-icon-placeholder { 526 .vjs-icon-placeholder {
520 display: inline-block; 527 display: inline-block;
@@ -641,12 +648,12 @@ body {
641 648
642 .vjs-control-bar { 649 .vjs-control-bar {
643 > button:first-child { 650 > button:first-child {
644 margin-left: $first-control-bar-element-margin-left-small-width; 651 @include margin-left($first-control-bar-element-margin-left-small-width);
645 } 652 }
646 } 653 }
647 654
648 .vjs-fullscreen-control { 655 .vjs-fullscreen-control {
649 margin-right: $first-control-bar-element-margin-left-small-width; 656 @include margin-right($first-control-bar-element-margin-left-small-width);
650 } 657 }
651 658
652 &.vjs-live { 659 &.vjs-live {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 74eee7d64..2183a7dbc 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -56,13 +56,13 @@ $setting-transition-easing: ease-out;
56 } 56 }
57 57
58 .vjs-settings-sub-menu-title { 58 .vjs-settings-sub-menu-title {
59 text-align: left; 59 text-align: start;
60 font-weight: $font-semibold; 60 font-weight: $font-semibold;
61 } 61 }
62 62
63 .vjs-settings-sub-menu-value { 63 .vjs-settings-sub-menu-value {
64 width: 100%; 64 width: 100%;
65 text-align: right; 65 text-align: end;
66 66
67 small { 67 small {
68 font-size: 0.85em; 68 font-size: 0.85em;
@@ -132,7 +132,7 @@ $setting-transition-easing: ease-out;
132 .vjs-settings-sub-menu-value::after { 132 .vjs-settings-sub-menu-value::after {
133 @include chevron-right(9px, 2px); 133 @include chevron-right(9px, 2px);
134 134
135 margin-left: 5px; 135 @include margin-left(5px);
136 } 136 }
137 } 137 }
138 138
@@ -142,7 +142,7 @@ $setting-transition-easing: ease-out;
142 .vjs-menu-item { 142 .vjs-menu-item {
143 outline: 0; 143 outline: 0;
144 font-weight: $font-semibold; 144 font-weight: $font-semibold;
145 text-align: right; 145 text-align: end;
146 padding: 5px 8px; 146 padding: 5px 8px;
147 147
148 &.vjs-back-button { 148 &.vjs-back-button {
@@ -150,12 +150,12 @@ $setting-transition-easing: ease-out;
150 padding: 8px 8px 13px 12px; 150 padding: 8px 8px 13px 12px;
151 margin-bottom: 5px; 151 margin-bottom: 5px;
152 border-bottom: 1px solid #808080; 152 border-bottom: 1px solid #808080;
153 text-align: left; 153 text-align: start;
154 154
155 &::before { 155 &::before {
156 @include chevron-left(9px, 2px); 156 @include chevron-left(9px, 2px);
157 157
158 margin-right: 5px; 158 @include margin-right(5px);
159 } 159 }
160 } 160 }
161 161
@@ -182,10 +182,10 @@ $setting-transition-easing: ease-out;
182 width: 200px; 182 width: 200px;
183 183
184 .vjs-menu-item { 184 .vjs-menu-item {
185 text-align: left; 185 text-align: start;
186 186
187 .vjs-menu-item-text { 187 .vjs-menu-item-text {
188 margin-left: 25px; 188 @include margin-left(25px);
189 text-transform: capitalize; 189 text-transform: capitalize;
190 } 190 }
191 } 191 }
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 6fcbcd969..c6388ed13 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -34,7 +34,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
34 display: inline-block; 34 display: inline-block;
35 font-weight: 600; 35 font-weight: 600;
36 padding: 0 .5em; 36 padding: 0 .5em;
37 text-align: right; 37 text-align: end;
38 width: 11.5em; 38 width: 11.5em;
39 white-space: nowrap; 39 white-space: nowrap;
40 } 40 }
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 8c9a6f784..922a9674d 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -23,19 +23,17 @@ $browser-context: 16;
23 } 23 }
24 24
25 .vjs-upnext-top { 25 .vjs-upnext-top {
26 margin: 0 auto;
26 width: 100%; 27 width: 100%;
27 position: absolute; 28 position: absolute;
28 margin-left: auto;
29 margin-right: auto;
30 bottom: 50%; 29 bottom: 50%;
31 margin-bottom: 60px; 30 margin-bottom: 60px;
32 } 31 }
33 32
34 .vjs-upnext-bottom { 33 .vjs-upnext-bottom {
34 margin: 0 auto;
35 width: 100%; 35 width: 100%;
36 position: absolute; 36 position: absolute;
37 margin-left: auto;
38 margin-right: auto;
39 top: 50%; 37 top: 50%;
40 margin-top: 52px; 38 margin-top: 52px;
41 } 39 }
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 6a4d89dff..4cd27bea8 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -139,7 +139,8 @@ body .p-paginator .p-paginator-pages .p-paginator-page:focus {
139 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest); 139 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
140} 140}
141body .p-paginator .p-dropdown { 141body .p-paginator .p-dropdown {
142 margin-left: 0.5em; 142 @include margin-left(0.5em);
143
143 height: 2.286em; 144 height: 2.286em;
144 min-width: auto; 145 min-width: auto;
145} 146}
@@ -161,7 +162,7 @@ body .p-dropdown:not(.p-disabled).p-focus {
161 border-color: pvar(--mainColor); 162 border-color: pvar(--mainColor);
162} 163}
163body .p-dropdown .p-dropdown-label { 164body .p-dropdown .p-dropdown-label {
164 padding-right: 2em; 165 @include padding-right(2em);
165} 166}
166body .p-dropdown .p-dropdown-trigger { 167body .p-dropdown .p-dropdown-trigger {
167 background-color: #ffffff; 168 background-color: #ffffff;
@@ -175,7 +176,7 @@ body .p-dropdown .p-dropdown-clear-icon {
175 color: #848484; 176 color: #848484;
176} 177}
177body .p-dropdown.p-dropdown-clearable .p-dropdown-label { 178body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
178 padding-right: 4em; 179 @include padding-right(4em);
179} 180}
180body .p-dropdown-panel { 181body .p-dropdown-panel {
181 padding: 0; 182 padding: 0;
@@ -191,8 +192,9 @@ body .p-dropdown-panel .p-dropdown-filter-container {
191 margin: 0; 192 margin: 0;
192} 193}
193body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter { 194body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
195 @include padding-right(2em);
196
194 width: 100%; 197 width: 100%;
195 padding-right: 2em;
196} 198}
197body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon { 199body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
198 top: 50%; 200 top: 50%;
@@ -368,17 +370,18 @@ body .p-datepicker.p-datepicker-timeonly .p-timepicker {
368 border-top: 0 none; 370 border-top: 0 none;
369} 371}
370body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { 372body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
373 @include padding-right(0.857em);
374 @include padding-left(0.857em);
375
371 border-right: 1px solid #d8dae2; 376 border-right: 1px solid #d8dae2;
372 padding-right: 0.857em;
373 padding-left: 0.857em;
374 padding-top: 0; 377 padding-top: 0;
375 padding-bottom: 0; 378 padding-bottom: 0;
376} 379}
377body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { 380body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
378 padding-left: 0; 381 @include padding-left(0);
379} 382}
380body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { 383body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
381 padding-right: 0; 384 @include padding-right(0);
382 border-right: 0 none; 385 border-right: 0 none;
383} 386}
384body .p-calendar.p-calendar-w-btn .p-inputtext { 387body .p-calendar.p-calendar-w-btn .p-inputtext {
@@ -402,7 +405,7 @@ body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
402 border: 1px solid #a80000; 405 border: 1px solid #a80000;
403} 406}
404body .p-timepicker .p-separator { 407body .p-timepicker .p-separator {
405 margin-left: 0; 408 @include margin-left(0);
406 min-width: 0.75rem; 409 min-width: 0.75rem;
407} 410}
408 411
@@ -514,7 +517,7 @@ p-table {
514 align-items: center; 517 align-items: center;
515 518
516 .left-buttons { 519 .left-buttons {
517 padding-left: 15px; 520 @include padding-left(15px);
518 } 521 }
519 } 522 }
520 } 523 }
@@ -534,7 +537,7 @@ p-table {
534 } 537 }
535 538
536 td { 539 td {
537 padding-left: 15px !important; 540 @include padding-left(15px !important);
538 541
539 &.expand-cell { 542 &.expand-cell {
540 padding: 10px 15px; 543 padding: 10px 15px;
@@ -646,10 +649,10 @@ p-table {
646 my-delete-button, 649 my-delete-button,
647 my-button { 650 my-button {
648 display: inline-block !important; 651 display: inline-block !important;
649 margin-left: 5px; 652 @include margin-left(5px);
650 653
651 &:first-child { 654 &:first-child {
652 margin-left: 0 655 @include margin-left(0)
653 } 656 }
654 } 657 }
655 } 658 }
@@ -714,13 +717,13 @@ p-table {
714 &.p-paginator-prev { 717 &.p-paginator-prev {
715 @extend .glyphicon-chevron-left; 718 @extend .glyphicon-chevron-left;
716 719
717 margin-right: 10px; 720 @include margin-right(10px);
718 } 721 }
719 722
720 &.p-paginator-next { 723 &.p-paginator-next {
721 @extend .glyphicon-chevron-right; 724 @extend .glyphicon-chevron-right;
722 725
723 margin-left: 10px; 726 @include margin-left(10px);
724 } 727 }
725 728
726 &.p-paginator-last { 729 &.p-paginator-last {
@@ -799,7 +802,7 @@ p-calendar .p-datepicker {
799 .p-datepicker-header { 802 .p-datepicker-header {
800 803
801 .p-datepicker-year { 804 .p-datepicker-year {
802 margin-left: 5px; 805 @include margin-left(5px);
803 } 806 }
804 807
805 .p-datepicker-next { 808 .p-datepicker-next {
@@ -807,7 +810,7 @@ p-calendar .p-datepicker {
807 @include glyphicon-light; 810 @include glyphicon-light;
808 811
809 color: #000 !important; 812 color: #000 !important;
810 text-align: right; 813 text-align: end;
811 814
812 .pi.pi-chevron-right { 815 .pi.pi-chevron-right {
813 display: none !important; 816 display: none !important;
@@ -819,7 +822,7 @@ p-calendar .p-datepicker {
819 @include glyphicon-light; 822 @include glyphicon-light;
820 823
821 color: #000 !important; 824 color: #000 !important;
822 text-align: left; 825 text-align: start;
823 826
824 .pi.pi-chevron-left { 827 .pi.pi-chevron-left {
825 display: none !important; 828 display: none !important;
@@ -945,7 +948,7 @@ p-toast {
945 948
946 .message { 949 .message {
947 flex-grow: 1; 950 flex-grow: 1;
948 margin-right: 20px; 951 @include margin-right(20px);
949 952
950 h3 { 953 h3 {
951 font-size: 21px; 954 font-size: 21px;
@@ -959,7 +962,7 @@ p-toast {
959 962
960 .glyphicon { 963 .glyphicon {
961 font-size: 32px; 964 font-size: 32px;
962 margin-right: 5px; 965 @include margin-right(5px);
963 } 966 }
964 } 967 }
965 } 968 }
diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss
index b9ac3e74e..ea01bf800 100644
--- a/client/src/standalone/videos/test-embed.scss
+++ b/client/src/standalone/videos/test-embed.scss
@@ -1,3 +1,5 @@
1@import '_variables';
2@import '_mixins';
1 3
2* { 4* {
3 font-family: sans-serif; 5 font-family: sans-serif;
@@ -30,21 +32,23 @@ aside {
30} 32}
31 33
32.logo { 34.logo {
35 @include margin-right(0.5em);
36
33 font-size: 150%; 37 font-size: 150%;
34 height: 100%; 38 height: 100%;
35 font-weight: bold; 39 font-weight: bold;
36 display: flex; 40 display: flex;
37 flex-direction: row; 41 flex-direction: row;
38 align-items: center; 42 align-items: center;
39 margin-right: 0.5em;
40 43
41 .icon { 44 .icon {
45 @include margin-right(0.5em);
46
42 height: 100%; 47 height: 100%;
43 padding: 0 18px 0 32px; 48 padding: 0 18px 0 32px;
44 background: #fff; 49 background: #fff;
45 display: flex; 50 display: flex;
46 align-items: center; 51 align-items: center;
47 margin-right: 0.5em;
48 } 52 }
49} 53}
50 54
@@ -59,6 +63,8 @@ main {
59} 63}
60 64
61header { 65header {
66 @include padding-right(1em);
67
62 width: 100%; 68 width: 100%;
63 height: 3.2em; 69 height: 3.2em;
64 background-color: #F1680D; 70 background-color: #F1680D;
@@ -71,7 +77,6 @@ header {
71 box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6); 77 box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6);
72 background-size: 50%; 78 background-size: 50%;
73 background-position: top left; 79 background-position: top left;
74 padding-right: 1em;
75 80
76 h1 { 81 h1 {
77 margin: 0; 82 margin: 0;
diff --git a/scripts/dev/client.sh b/scripts/dev/client.sh
index e9cade800..e5b53bae5 100755
--- a/scripts/dev/client.sh
+++ b/scripts/dev/client.sh
@@ -2,7 +2,13 @@
2 2
3set -eu 3set -eu
4 4
5clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration hmr --host 0.0.0.0 --disable-host-check --port 3000" 5clientConfiguration="hmr"
6
7if [ ! -z ${2+x} ] && [ "$2" = "--ar-locale" ]; then
8 clientConfiguration="ar-locale"
9fi
10
11clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration $clientConfiguration --host 0.0.0.0 --disable-host-check --port 3000"
6serverCommand="npm run build:server && NODE_ENV=test node dist/server" 12serverCommand="npm run build:server && NODE_ENV=test node dist/server"
7 13
8if [ ! -z ${1+x} ] && [ "$1" = "--skip-server" ]; then 14if [ ! -z ${1+x} ] && [ "$1" = "--skip-server" ]; then
diff --git a/scripts/dev/index.sh b/scripts/dev/index.sh
index 56addb7fe..beb88606f 100755
--- a/scripts/dev/index.sh
+++ b/scripts/dev/index.sh
@@ -3,5 +3,5 @@
3set -eu 3set -eu
4 4
5NODE_ENV=test npm run concurrently -- -k \ 5NODE_ENV=test npm run concurrently -- -k \
6 "sh scripts/dev/client.sh --skip-server" \ 6 "sh scripts/dev/client.sh --skip-server ${1:-}" \
7 "sh scripts/dev/server.sh --skip-client" 7 "sh scripts/dev/server.sh --skip-client"
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 23:10:25 +0000