aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-07 17:38:31 +0200
committerChocobozzz <me@florianbigard.com>2021-06-07 18:14:05 +0200
commit27bc95867442c772841fb183a625bbda61dede51 (patch)
tree6fe20951f1109c1f5388d9a681f0df0758d463e0 /client/src/app/shared
parent8beea2d37d90e9a12d895f4a9eebc1e532313d8c (diff)
downloadPeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.gz
PeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.zst
PeerTube-27bc95867442c772841fb183a625bbda61dede51.zip
Bidi support
Diffstat (limited to 'client/src/app/shared')
-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
25 files changed, 97 insertions, 69 deletions
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