aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-07 17:38:31 +0200
committerChocobozzz <me@florianbigard.com>2021-06-07 18:14:05 +0200
commit27bc95867442c772841fb183a625bbda61dede51 (patch)
tree6fe20951f1109c1f5388d9a681f0df0758d463e0 /client
parent8beea2d37d90e9a12d895f4a9eebc1e532313d8c (diff)
downloadPeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.gz
PeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.zst
PeerTube-27bc95867442c772841fb183a625bbda61dede51.zip
Bidi support
Diffstat (limited to 'client')
-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
96 files changed, 618 insertions, 366 deletions
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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 19:28:30 +0000