aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-09 09:33:28 +0200
committerGitHub <noreply@github.com>2020-06-09 09:33:28 +0200
commite66883b37ae0796256b3aba550670a2d76cfc98a (patch)
tree3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/app
parent6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff)
downloadPeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list * normalize timestamp display on miniatures * use grid for abstract-video-list - refactor scss function var to pvar to avoid overriding css variables - move fluid-grid margins to adapt-margin-content-width mixin for maintainability - fix video-miniature-name margin-top on small screen * move sceenratio function in a mixin * display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss2
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html1
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.scss4
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.scss4
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss4
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss4
-rw-r--r--client/src/app/+admin/moderation/moderation.component.scss20
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss6
-rw-r--r--client/src/app/+admin/plugins/shared/toggle-plugin-type.scss8
-rw-r--r--client/src/app/+admin/system/logs/logs.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss6
-rw-r--r--client/src/app/+signup/+register/custom-stepper.component.scss10
-rw-r--r--client/src/app/+signup/+register/register.component.scss4
-rw-r--r--client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts4
-rw-r--r--client/src/app/app.component.scss7
-rw-r--r--client/src/app/header/search-typeahead.component.scss10
-rw-r--r--client/src/app/header/suggestion.component.scss12
-rw-r--r--client/src/app/login/login.component.scss4
-rw-r--r--client/src/app/menu/avatar-notification.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss22
-rw-r--r--client/src/app/modal/welcome-modal.component.scss2
-rw-r--r--client/src/app/search/search.component.scss4
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.scss2
-rw-r--r--client/src/app/shared/channel/avatar.component.scss4
-rw-r--r--client/src/app/shared/forms/markdown-textarea.component.scss12
-rw-r--r--client/src/app/shared/forms/peertube-checkbox.component.scss2
-rw-r--r--client/src/app/shared/forms/timestamp-input.component.scss2
-rw-r--r--client/src/app/shared/images/preview-upload.component.scss2
-rw-r--r--client/src/app/shared/instance/instance-features-table.component.scss2
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.scss4
-rw-r--r--client/src/app/shared/misc/help.component.scss6
-rw-r--r--client/src/app/shared/misc/list-overflow.component.scss6
-rw-r--r--client/src/app/shared/misc/utils.ts4
-rw-r--r--client/src/app/shared/users/user-notifications.component.scss2
-rw-r--r--client/src/app/shared/video-playlist/video-add-to-playlist.component.scss2
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss12
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-miniature.component.scss4
-rw-r--r--client/src/app/shared/video/abstract-video-list.html1
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss25
-rw-r--r--client/src/app/shared/video/feed.component.scss2
-rw-r--r--client/src/app/shared/video/modals/video-download.component.scss4
-rw-r--r--client/src/app/shared/video/video-miniature.component.html2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss33
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts1
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss8
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss4
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss2
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss10
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss12
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.scss4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss32
-rw-r--r--client/src/app/videos/video-list/video-overview.component.html6
55 files changed, 201 insertions, 163 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 909ae5c21..154031939 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -27,7 +27,7 @@
27 margin-right: 5px; 27 margin-right: 5px;
28 28
29 &.category { 29 &.category {
30 background-color: var(--mainColor); 30 background-color: pvar(--mainColor);
31 } 31 }
32 } 32 }
33} 33}
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 8f1ff21a5..b45ca58da 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -19,6 +19,7 @@
19 <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div> 19 <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
20 20
21 <my-video-miniature 21 <my-video-miniature
22 class="pr-2"
22 *ngFor="let video of getVideosOf(videoChannel)" 23 *ngFor="let video of getVideosOf(videoChannel)"
23 [video]="video" [user]="user" [displayVideoActions]="true" 24 [video]="video" [user]="user" [displayVideoActions]="true"
24 ></my-video-miniature> 25 ></my-video-miniature>
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 14189ff11..f2d752eb5 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
@@ -14,12 +14,12 @@ a {
14 display: inline-block; 14 display: inline-block;
15 15
16 &, &:hover { 16 &, &:hover {
17 color: var(--mainForegroundColor); 17 color: pvar(--mainForegroundColor);
18 } 18 }
19 19
20 span { 20 span {
21 font-size: 80%; 21 font-size: 80%;
22 color: var(--inputPlaceholderColor); 22 color: pvar(--inputPlaceholderColor);
23 } 23 }
24} 24}
25 25
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index 563f8d2bc..b108218b8 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -6,12 +6,12 @@ a {
6 display: inline-block; 6 display: inline-block;
7 7
8 &, &:hover { 8 &, &:hover {
9 color: var(--mainForegroundColor); 9 color: pvar(--mainForegroundColor);
10 } 10 }
11 11
12 span { 12 span {
13 font-size: 80%; 13 font-size: 80%;
14 color: var(--inputPlaceholderColor); 14 color: pvar(--inputPlaceholderColor);
15 } 15 }
16} 16}
17 17
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 dc43e4007..adcf2037e 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
@@ -6,12 +6,12 @@ a {
6 display: inline-block; 6 display: inline-block;
7 7
8 &, &:hover { 8 &, &:hover {
9 color: var(--mainForegroundColor); 9 color: pvar(--mainForegroundColor);
10 } 10 }
11 11
12 span { 12 span {
13 font-size: 80%; 13 font-size: 80%;
14 color: var(--inputPlaceholderColor); 14 color: pvar(--inputPlaceholderColor);
15 } 15 }
16} 16}
17 17
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
index c6c71587f..c1f66116b 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
@@ -6,12 +6,12 @@ a {
6 display: inline-block; 6 display: inline-block;
7 7
8 &, &:hover { 8 &, &:hover {
9 color: var(--mainForegroundColor); 9 color: pvar(--mainForegroundColor);
10 } 10 }
11 11
12 span { 12 span {
13 font-size: 80%; 13 font-size: 80%;
14 color: var(--inputPlaceholderColor); 14 color: pvar(--inputPlaceholderColor);
15 } 15 }
16} 16}
17 17
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 26c2a30d4..404eb0504 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -47,29 +47,19 @@
47} 47}
48 48
49.screenratio { 49.screenratio {
50 position: relative;
51 width: 100%;
52 height: 0;
53 padding-bottom: 56%;
54
55 div { 50 div {
56 @include miniature-thumbnail; 51 @include miniature-thumbnail;
57 position: absolute;
58 height: 100%;
59 width: 100%;
60 display: inline-flex; 52 display: inline-flex;
61 justify-content: center; 53 justify-content: center;
62 align-items: center; 54 align-items: center;
63 color: var(--inputPlaceholderColor); 55 color: pvar(--inputPlaceholderColor);
64 } 56 }
65 57
66 ::ng-deep iframe { 58 @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
67 position: absolute;
68 width: 100% !important; 59 width: 100% !important;
69 height: 100% !important; 60 height: 100% !important;
70 left: 0; 61 left: 0;
71 top: 0; 62 };
72 }
73} 63}
74 64
75.chip { 65.chip {
@@ -115,7 +105,7 @@ my-action-dropdown.show {
115 } 105 }
116 106
117 span { 107 span {
118 color: var(--inputPlaceholderColor); 108 color: pvar(--inputPlaceholderColor);
119 } 109 }
120 110
121 .video-table-video-image-label { 111 .video-table-video-image-label {
@@ -135,7 +125,7 @@ my-action-dropdown.show {
135 flex-direction: column; 125 flex-direction: column;
136 justify-content: center; 126 justify-content: center;
137 font-size: 90%; 127 font-size: 90%;
138 color: var(--mainForegroundColor); 128 color: pvar(--mainForegroundColor);
139 line-height: 1rem; 129 line-height: 1rem;
140 130
141 div .glyphicon { 131 div .glyphicon {
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 1daa7b741..83030b7e0 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -3,7 +3,7 @@
3 3
4.plugin { 4.plugin {
5 margin: 15px 0; 5 margin: 15px 0;
6 background-color: var(--submenuColor); 6 background-color: pvar(--submenuColor);
7} 7}
8 8
9.first-row { 9.first-row {
@@ -25,10 +25,10 @@
25 margin-left: 10px; 25 margin-left: 10px;
26 26
27 my-global-icon { 27 my-global-icon {
28 @include apply-svg-color(var(--greyForegroundColor)); 28 @include apply-svg-color(pvar(--greyForegroundColor));
29 29
30 &[iconName="npm"] { 30 &[iconName="npm"] {
31 @include fill-svg-color(var(--greyForegroundColor)); 31 @include fill-svg-color(pvar(--greyForegroundColor));
32 } 32 }
33 } 33 }
34 } 34 }
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
index 56ea91d0b..b653abfaa 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -19,12 +19,12 @@
19 } 19 }
20 20
21 .ui-button.ui-state-active { 21 .ui-button.ui-state-active {
22 background-color: var(--mainColor); 22 background-color: pvar(--mainColor);
23 border-color: var(--mainColor); 23 border-color: pvar(--mainColor);
24 24
25 &:hover { 25 &:hover {
26 background-color: var(--mainHoverColor); 26 background-color: pvar(--mainHoverColor);
27 border-color: var(--mainHoverColor); 27 border-color: pvar(--mainHoverColor);
28 } 28 }
29 } 29 }
30 30
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index 087155254..6b92f4d0b 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -28,7 +28,7 @@
28 } 28 }
29 29
30 .warn { 30 .warn {
31 color: var(--mainColor); 31 color: pvar(--mainColor);
32 } 32 }
33 33
34 .error { 34 .error {
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
index ba8d56689..dd990c42b 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -19,7 +19,7 @@
19 width: fit-content; 19 width: fit-content;
20 display: flex; 20 display: flex;
21 align-items: baseline; 21 align-items: baseline;
22 color: var(--mainForegroundColor); 22 color: pvar(--mainForegroundColor);
23 23
24 .video-channel-display-name { 24 .video-channel-display-name {
25 font-weight: $font-semibold; 25 font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 144c2440b..76fb2cde0 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -30,7 +30,7 @@
30 width: fit-content; 30 width: fit-content;
31 display: flex; 31 display: flex;
32 align-items: baseline; 32 align-items: baseline;
33 color: var(--mainForegroundColor); 33 color: pvar(--mainForegroundColor);
34 34
35 .video-channel-display-name { 35 .video-channel-display-name {
36 font-weight: $font-semibold; 36 font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index d47810566..3f2c345d2 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -3,7 +3,7 @@
3@import '_miniature'; 3@import '_miniature';
4 4
5.playlist-info { 5.playlist-info {
6 background-color: var(--submenuColor); 6 background-color: pvar(--submenuColor);
7 margin-left: -15px; 7 margin-left: -15px;
8 margin-top: -$sub-menu-margin-bottom; 8 margin-top: -$sub-menu-margin-bottom;
9 9
@@ -14,7 +14,7 @@
14 14
15 /* fix ellipsis dots background color */ 15 /* fix ellipsis dots background color */
16 ::ng-deep .miniature-name::after { 16 ::ng-deep .miniature-name::after {
17 background-color: var(--submenuColor) !important; 17 background-color: pvar(--submenuColor) !important;
18 } 18 }
19} 19}
20 20
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index a3422c239..67a58d8d5 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -84,7 +84,7 @@ my-edit-button {
84 .video-bottom, 84 .video-bottom,
85 .video-bottom .video-miniature-information { 85 .video-bottom .video-miniature-information {
86 /* same width than a.video-thumbnail */ 86 /* same width than a.video-thumbnail */
87 max-width: 223px !important; 87 max-width: $video-thumbnail-width !important;
88 } 88 }
89 } 89 }
90 } 90 }
@@ -110,7 +110,7 @@ my-edit-button {
110 ::ng-deep { 110 ::ng-deep {
111 .action-button { 111 .action-button {
112 /* same width than a.video-thumbnail */ 112 /* same width than a.video-thumbnail */
113 width: 223px; 113 width: $video-thumbnail-width;
114 } 114 }
115 } 115 }
116 } 116 }
@@ -124,7 +124,7 @@ my-edit-button {
124 flex-direction: column; 124 flex-direction: column;
125 125
126 .video-miniature-name { 126 .video-miniature-name {
127 max-width: 223px; 127 max-width: $video-thumbnail-width;
128 } 128 }
129 } 129 }
130 } 130 }
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 2371c8ae5..cc1591ee8 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -28,7 +28,7 @@ header {
28 margin-bottom: 10px; 28 margin-bottom: 10px;
29 29
30 my-global-icon { 30 my-global-icon {
31 @include apply-svg-color(var(--mainBackgroundColor)); 31 @include apply-svg-color(pvar(--mainBackgroundColor));
32 32
33 width: 22px; 33 width: 22px;
34 height: 22px; 34 height: 22px;
@@ -42,13 +42,13 @@ header {
42 &.active, 42 &.active,
43 &.completed { 43 &.completed {
44 .step-index { 44 .step-index {
45 border-color: var(--mainColor); 45 border-color: pvar(--mainColor);
46 background-color: var(--mainColor); 46 background-color: pvar(--mainColor);
47 color: var(--mainBackgroundColor); 47 color: pvar(--mainBackgroundColor);
48 } 48 }
49 49
50 .step-label { 50 .step-label {
51 color: var(--mainColor); 51 color: pvar(--mainColor);
52 } 52 }
53 } 53 }
54 54
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index e135b5cb4..6a7e361e3 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -39,7 +39,7 @@
39 ngb-accordion ::ng-deep { 39 ngb-accordion ::ng-deep {
40 .btn { 40 .btn {
41 font-weight: $font-semibold !important; 41 font-weight: $font-semibold !important;
42 color: var(--mainForegroundColor) !important; 42 color: pvar(--mainForegroundColor) !important;
43 } 43 }
44 } 44 }
45 } 45 }
@@ -94,7 +94,7 @@ button {
94 margin-bottom: 20px; 94 margin-bottom: 20px;
95 95
96 ::ng-deep .loader div { 96 ::ng-deep .loader div {
97 border-color: var(--mainColor) transparent transparent transparent; 97 border-color: pvar(--mainColor) transparent transparent transparent;
98 } 98 }
99 99
100 & + div { 100 & + div {
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 9eaa3ba32..6df47d11c 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -47,6 +47,10 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
47 super() 47 super()
48 48
49 this.titlePage = this.i18n('Published videos') 49 this.titlePage = this.i18n('Published videos')
50 this.displayOptions = {
51 ...this.displayOptions,
52 avatar: false
53 }
50 } 54 }
51 55
52 ngOnInit () { 56 ngOnInit () {
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 27fd69c8d..a2180e19d 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -13,7 +13,7 @@
13 13
14.sub-header-container { 14.sub-header-container {
15 margin-top: $header-height; 15 margin-top: $header-height;
16 background-color: var(--mainBackgroundColor); 16 background-color: pvar(--mainBackgroundColor);
17 width: 100%; 17 width: 100%;
18} 18}
19 19
@@ -22,7 +22,7 @@
22 position: fixed; 22 position: fixed;
23 top: 0; 23 top: 0;
24 width: 100%; 24 width: 100%;
25 background-color: var(--mainBackgroundColor); 25 background-color: pvar(--mainBackgroundColor);
26 z-index: z(header); 26 z-index: z(header);
27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); 27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
28 display: flex; 28 display: flex;
@@ -38,7 +38,7 @@
38 @include icon(24px); 38 @include icon(24px);
39 39
40 &.icon-menu { 40 &.icon-menu {
41 background-color: var(--mainForegroundColor); 41 background-color: pvar(--mainForegroundColor);
42 mask-image: url('../assets/images/header/menu.svg'); 42 mask-image: url('../assets/images/header/menu.svg');
43 margin: 0 18px 0 20px; 43 margin: 0 18px 0 20px;
44 } 44 }
@@ -65,6 +65,7 @@
65 background: url('../assets/images/logo.svg') no-repeat; 65 background: url('../assets/images/logo.svg') no-repeat;
66 width: 23px; 66 width: 23px;
67 height: 24px; 67 height: 24px;
68 margin-right: .5rem;
68 } 69 }
69 } 70 }
70 71
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 33b88825f..0a30ebd55 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -10,7 +10,7 @@
10 font-size: 14px; 10 font-size: 14px;
11 11
12 &::placeholder { 12 &::placeholder {
13 color: var(--inputPlaceholderColor); 13 color: pvar(--inputPlaceholderColor);
14 } 14 }
15} 15}
16 16
@@ -18,7 +18,7 @@
18 @include icon(25px); 18 @include icon(25px);
19 height: 21px; 19 height: 21px;
20 20
21 background-color: var(--mainForegroundColor); 21 background-color: pvar(--mainForegroundColor);
22 mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%; 22 mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
23 23
24 // yolo 24 // yolo
@@ -37,10 +37,10 @@
37#typeahead-help, 37#typeahead-help,
38#typeahead-instructions, 38#typeahead-instructions,
39my-suggestions ::ng-deep ul { 39my-suggestions ::ng-deep ul {
40 border: 1px solid var(--mainBackgroundColor); 40 border: 1px solid pvar(--mainBackgroundColor);
41 border-bottom-right-radius: 3px; 41 border-bottom-right-radius: 3px;
42 border-bottom-left-radius: 3px; 42 border-bottom-left-radius: 3px;
43 background: var(--mainBackgroundColor); 43 background: pvar(--mainBackgroundColor);
44 transition: .3s ease; 44 transition: .3s ease;
45 transition-property: box-shadow; 45 transition-property: box-shadow;
46} 46}
@@ -67,7 +67,7 @@ my-suggestions ::ng-deep ul {
67 67
68#typeahead-container { 68#typeahead-container {
69 input { 69 input {
70 border: 1px solid var(--mainBackgroundColor) !important; 70 border: 1px solid pvar(--mainBackgroundColor) !important;
71 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; 71 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
72 flex-grow: 1; 72 flex-grow: 1;
73 transition: box-shadow .3s ease, width .2s ease; 73 transition: box-shadow .3s ease, width .2s ease;
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 1de2f43bd..692a81daa 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -5,21 +5,21 @@ a {
5 width: 100%; 5 width: 100%;
6 6
7 &, &:hover { 7 &, &:hover {
8 color: var(--mainForegroundColor); 8 color: pvar(--mainForegroundColor);
9 9
10 &.focus-visible { 10 &.focus-visible {
11 background-color: var(--mainHoverColor); 11 background-color: pvar(--mainHoverColor);
12 color: var(--mainBackgroundColor); 12 color: pvar(--mainBackgroundColor);
13 } 13 }
14 } 14 }
15} 15}
16 16
17.bg-gray { 17.bg-gray {
18 background-color: var(--mainBackgroundColor); 18 background-color: pvar(--mainBackgroundColor);
19} 19}
20 20
21.text-gray-light { 21.text-gray-light {
22 color: var(--mainForegroundColor); 22 color: pvar(--mainForegroundColor);
23} 23}
24 24
25my-global-icon { 25my-global-icon {
@@ -28,5 +28,5 @@ my-global-icon {
28 top: -2px; 28 top: -2px;
29 margin: 5px; 29 margin: 5px;
30 30
31 @include apply-svg-color(var(--mainForegroundColor)); 31 @include apply-svg-color(pvar(--mainForegroundColor));
32} 32}
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index db9f78f7c..fde6cc15e 100644
--- a/client/src/app/login/login.component.scss
+++ b/client/src/app/login/login.component.scss
@@ -18,7 +18,7 @@ input[type=submit] {
18} 18}
19 19
20.create-an-account, .forgot-password-button { 20.create-an-account, .forgot-password-button {
21 color: var(--mainForegroundColor); 21 color: pvar(--mainForegroundColor);
22 cursor: pointer; 22 cursor: pointer;
23 transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1); 23 transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
24 24
@@ -50,7 +50,7 @@ input[type=submit] {
50 cursor: pointer; 50 cursor: pointer;
51 border: 1px solid #d1d7e0; 51 border: 1px solid #d1d7e0;
52 border-radius: 5px; 52 border-radius: 5px;
53 color: var(--mainForegroundColor); 53 color: pvar(--mainForegroundColor);
54 margin: 10px 10px 0 0; 54 margin: 10px 10px 0 0;
55 display: flex; 55 display: flex;
56 justify-content: center; 56 justify-content: center;
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index ebb2a5424..88f2b6296 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -106,8 +106,8 @@
106 align-items: center; 106 align-items: center;
107 justify-content: center; 107 justify-content: center;
108 108
109 background-color: var(--mainColor); 109 background-color: pvar(--mainColor);
110 color: var(#fff); 110 color: #fff;
111 font-size: 10px; 111 font-size: 10px;
112 font-weight: $font-semibold; 112 font-weight: $font-semibold;
113 113
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 5bff0c328..8f8c31417 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -7,18 +7,18 @@
7 padding: 0; 7 padding: 0;
8 width: $menu-width; 8 width: $menu-width;
9 z-index: z(menu); 9 z-index: z(menu);
10 scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor); 10 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
11} 11}
12 12
13menu { 13menu {
14 @include ellipsis; 14 @include ellipsis;
15 15
16 background-color: var(--menuBackgroundColor); 16 background-color: pvar(--menuBackgroundColor);
17 margin: 0; 17 margin: 0;
18 padding: 0; 18 padding: 0;
19 height: 100%; 19 height: 100%;
20 overflow-x: hidden; 20 overflow-x: hidden;
21 color: var(--menuForegroundColor); 21 color: pvar(--menuForegroundColor);
22 display: flex; 22 display: flex;
23 flex-direction: column; 23 flex-direction: column;
24 width: 100%; 24 width: 100%;
@@ -62,7 +62,7 @@ menu {
62 .logged-in-display-name { 62 .logged-in-display-name {
63 font-size: 16px; 63 font-size: 16px;
64 font-weight: $font-semibold; 64 font-weight: $font-semibold;
65 color: var(--menuForegroundColor); 65 color: pvar(--menuForegroundColor);
66 cursor: pointer; 66 cursor: pointer;
67 67
68 @include disable-default-a-behaviour; 68 @include disable-default-a-behaviour;
@@ -89,7 +89,7 @@ menu {
89 } 89 }
90 90
91 ::ng-deep { 91 ::ng-deep {
92 @include apply-svg-color(var(--menuForegroundColor)); 92 @include apply-svg-color(pvar(--menuForegroundColor));
93 } 93 }
94 } 94 }
95 } 95 }
@@ -139,7 +139,7 @@ menu {
139 display: flex; 139 display: flex;
140 align-items: center; 140 align-items: center;
141 padding-left: $menu-lateral-padding; 141 padding-left: $menu-lateral-padding;
142 color: var(--menuForegroundColor); 142 color: pvar(--menuForegroundColor);
143 cursor: pointer; 143 cursor: pointer;
144 min-height: 40px; 144 min-height: 40px;
145 font-size: 16px; 145 font-size: 16px;
@@ -206,7 +206,7 @@ menu {
206 a, span[role=button] { 206 a, span[role=button] {
207 display: inline-block; 207 display: inline-block;
208 text-decoration: none; 208 text-decoration: none;
209 color: var(--mainBackgroundColor); 209 color: pvar(--mainBackgroundColor);
210 opacity: $footer-links-base-opacity; 210 opacity: $footer-links-base-opacity;
211 white-space: nowrap; 211 white-space: nowrap;
212 font-size: 90%; 212 font-size: 90%;
@@ -221,7 +221,7 @@ menu {
221 height: 1.4rem; 221 height: 1.4rem;
222 222
223 my-global-icon { 223 my-global-icon {
224 @include apply-svg-color(var(--mainBackgroundColor)); 224 @include apply-svg-color(pvar(--mainBackgroundColor));
225 225
226 display: flex; 226 display: flex;
227 width: auto; 227 width: auto;
@@ -235,7 +235,7 @@ menu {
235 .footer-copyleft small a { 235 .footer-copyleft small a {
236 @include disable-default-a-behaviour; 236 @include disable-default-a-behaviour;
237 237
238 color: var(--mainBackgroundColor); 238 color: pvar(--mainBackgroundColor);
239 opacity: $footer-links-base-opacity - .2; 239 opacity: $footer-links-base-opacity - .2;
240 } 240 }
241 } 241 }
@@ -323,7 +323,7 @@ label {
323 left: 3px; 323 left: 3px;
324 width: 14px; 324 width: 14px;
325 height: 14px; 325 height: 14px;
326 background: var(--mainBackgroundColor); 326 background: pvar(--mainBackgroundColor);
327 border-radius: 50%; 327 border-radius: 50%;
328 transition: 0.3s ease-out; 328 transition: 0.3s ease-out;
329 } 329 }
@@ -334,7 +334,7 @@ label {
334} 334}
335 335
336input:checked + label { 336input:checked + label {
337 background: var(--mainColor); 337 background: pvar(--mainColor);
338 338
339 &:after { 339 &:after {
340 left: calc(100% - 3px); 340 left: calc(100% - 3px);
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index c04772546..a93dbcef9 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -51,7 +51,7 @@ li {
51 .link-block { 51 .link-block {
52 @include disable-default-a-behaviour; 52 @include disable-default-a-behaviour;
53 53
54 color: var(--mainForegroundColor); 54 color: pvar(--mainForegroundColor);
55 padding: 10px; 55 padding: 10px;
56 transition: background-color 0.2s ease-in; 56 transition: background-color 0.2s ease-in;
57 flex-basis: 33%; 57 flex-basis: 33%;
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 78749cf20..6e59adb60 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -62,7 +62,7 @@
62 62
63 display: flex; 63 display: flex;
64 align-items: baseline; 64 align-items: baseline;
65 color: var(--mainForegroundColor); 65 color: pvar(--mainForegroundColor);
66 width: fit-content; 66 width: fit-content;
67 67
68 .video-channel-display-name { 68 .video-channel-display-name {
@@ -111,7 +111,7 @@
111 111
112 // Override the min-width: 500px to not break screen 112 // Override the min-width: 500px to not break screen
113 ::ng-deep .video-miniature-information { 113 ::ng-deep .video-miniature-information {
114 min-width: 223px !important; 114 min-width: $video-thumbnail-width !important;
115 } 115 }
116 } 116 }
117 117
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 7a030f32c..724a04efc 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -34,7 +34,7 @@
34 width: 21px; 34 width: 21px;
35 35
36 ::ng-deep { 36 ::ng-deep {
37 @include apply-svg-color(var(--actionButtonColor)); 37 @include apply-svg-color(pvar(--actionButtonColor));
38 } 38 }
39 } 39 }
40 40
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
index 77b90c579..4bf8fcd21 100644
--- a/client/src/app/shared/channel/avatar.component.scss
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -30,9 +30,9 @@
30 a:nth-of-type(2) img { 30 a:nth-of-type(2) img {
31 height: 60%; 31 height: 60%;
32 width: 60%; 32 width: 60%;
33 border: 2px solid var(--mainBackgroundColor); 33 border: 2px solid pvar(--mainBackgroundColor);
34 transform: translateX(15%); 34 transform: translateX(15%);
35 position: relative; 35 position: relative;
36 background-color: var(--mainBackgroundColor); 36 background-color: pvar(--mainBackgroundColor);
37 } 37 }
38} 38}
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 33f52fa6e..f2c76f7a1 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -14,7 +14,7 @@ $input-border-radius: 3px;
14 textarea { 14 textarea {
15 @include peertube-textarea(100%, 150px); 15 @include peertube-textarea(100%, 150px);
16 16
17 background-color: var(--markdownTextareaBackgroundColor); 17 background-color: pvar(--markdownTextareaBackgroundColor);
18 18
19 font-family: monospace; 19 font-family: monospace;
20 font-size: 13px; 20 font-size: 13px;
@@ -61,7 +61,7 @@ $input-border-radius: 3px;
61 flex-grow: 1; 61 flex-grow: 1;
62 border-bottom-left-radius: unset; 62 border-bottom-left-radius: unset;
63 border-bottom-right-radius: unset; 63 border-bottom-right-radius: unset;
64 border-bottom: 2px solid var(--mainColor); 64 border-bottom: 2px solid pvar(--mainColor);
65 65
66 :first-child { 66 :first-child {
67 margin-left: auto; 67 margin-left: auto;
@@ -112,7 +112,7 @@ $input-border-radius: 3px;
112 padding-left: 0px; 112 padding-left: 0px;
113 padding-right: 0px; 113 padding-right: 0px;
114 position: absolute; 114 position: absolute;
115 background-color: var(--mainBackgroundColor); 115 background-color: pvar(--mainBackgroundColor);
116 width: 100% !important; 116 width: 100% !important;
117 border-top: none; 117 border-top: none;
118 border-left: none; 118 border-left: none;
@@ -125,8 +125,8 @@ $input-border-radius: 3px;
125 125
126 ::ng-deep .tab-content { 126 ::ng-deep .tab-content {
127 @include content-preview-base(); 127 @include content-preview-base();
128 background-color: var(--mainBackgroundColor); 128 background-color: pvar(--mainBackgroundColor);
129 scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor); 129 scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
130 } 130 }
131 131
132 textarea, 132 textarea,
@@ -214,7 +214,7 @@ $input-border-radius: 3px;
214 padding: $base-padding; 214 padding: $base-padding;
215 border-right: 1px dashed $input-border-color !important; 215 border-right: 1px dashed $input-border-color !important;
216 resize: none; 216 resize: none;
217 scrollbar-color: var(--actionButtonColor) var(--markdownTextareaBackgroundColor); 217 scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
218 218
219 &:focus { 219 &:focus {
220 box-shadow: none; 220 box-shadow: none;
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index c1233e8a5..cf8540dc3 100644
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -45,7 +45,7 @@
45 font-size: 12px; 45 font-size: 12px;
46 line-height: 12px; 46 line-height: 12px;
47 font-weight: 500; 47 font-weight: 500;
48 color: var(--inputPlaceholderColor); 48 color: pvar(--inputPlaceholderColor);
49 background-color: rgba(217,225,232,.1); 49 background-color: rgba(217,225,232,.1);
50 border: 1px solid rgba(217,225,232,.5); 50 border: 1px solid rgba(217,225,232,.5);
51 } 51 }
diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
index 9671cc65f..8092b095b 100644
--- a/client/src/app/shared/forms/timestamp-input.component.scss
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -9,7 +9,7 @@ p-inputmask {
9 9
10 &:focus-within, 10 &:focus-within,
11 &:focus { 11 &:focus {
12 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 12 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
13 } 13 }
14 } 14 }
15} 15}
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss
index 8f3522115..88eccd5f7 100644
--- a/client/src/app/shared/images/preview-upload.component.scss
+++ b/client/src/app/shared/images/preview-upload.component.scss
@@ -22,7 +22,7 @@
22 22
23 &.no-image { 23 &.no-image {
24 border: 2px solid grey; 24 border: 2px solid grey;
25 background-color: var(--mainBackgroundColor); 25 background-color: pvar(--mainBackgroundColor);
26 } 26 }
27 } 27 }
28 } 28 }
diff --git a/client/src/app/shared/instance/instance-features-table.component.scss b/client/src/app/shared/instance/instance-features-table.component.scss
index 67f2b6c84..47c064265 100644
--- a/client/src/app/shared/instance/instance-features-table.component.scss
+++ b/client/src/app/shared/instance/instance-features-table.component.scss
@@ -3,7 +3,7 @@
3 3
4table { 4table {
5 font-size: 14px; 5 font-size: 14px;
6 color: var(--mainForegroundColor); 6 color: pvar(--mainForegroundColor);
7 7
8 .label, 8 .label,
9 .sub-label { 9 .sub-label {
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 5f90dcf80..84dd7dce3 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -48,8 +48,8 @@
48 width: 100%; 48 width: 100%;
49 49
50 &.active { 50 &.active {
51 color: var(--mainBackgroundColor) !important; 51 color: pvar(--mainBackgroundColor) !important;
52 background-color: var(--mainHoverColor); 52 background-color: pvar(--mainHoverColor);
53 opacity: .9; 53 opacity: .9;
54 } 54 }
55 } 55 }
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 3c8b66cd5..43f33a53a 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -11,7 +11,7 @@
11 top: -2px; 11 top: -2px;
12 margin: 5px; 12 margin: 5px;
13 13
14 @include apply-svg-color(var(--mainForegroundColor)) 14 @include apply-svg-color(pvar(--mainForegroundColor))
15 } 15 }
16} 16}
17 17
@@ -25,8 +25,8 @@
25 text-align: left; 25 text-align: left;
26 padding: 10px; 26 padding: 10px;
27 font-size: 13px; 27 font-size: 13px;
28 background-color: var(--mainBackgroundColor); 28 background-color: pvar(--mainBackgroundColor);
29 color: var(--mainForegroundColor); 29 color: pvar(--mainForegroundColor);
30 border-radius: 3px; 30 border-radius: 3px;
31 31
32 p { 32 p {
diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
index 1e5fe4c10..1ec044489 100644
--- a/client/src/app/shared/misc/list-overflow.component.scss
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -24,7 +24,7 @@ button {
24 &.routeActive { 24 &.routeActive {
25 &::after { 25 &::after {
26 display: inherit; 26 display: inherit;
27 border: 2px solid var(--mainColor); 27 border: 2px solid pvar(--mainColor);
28 position: relative; 28 position: relative;
29 right: 95%; 29 right: 95%;
30 top: 50%; 30 top: 50%;
@@ -53,8 +53,8 @@ button {
53 width: 100%; 53 width: 100%;
54 54
55 &.active { 55 &.active {
56 color: var(--mainBackgroundColor) !important; 56 color: pvar(--mainBackgroundColor) !important;
57 background-color: var(--mainHoverColor); 57 background-color: pvar(--mainHoverColor);
58 opacity: .9; 58 opacity: .9;
59 } 59 }
60 } 60 }
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 3d1e906a2..bc3ab85b3 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -59,7 +59,9 @@ function durationToString (duration: number) {
59 const secondsPadding = seconds >= 10 ? '' : '0' 59 const secondsPadding = seconds >= 10 ? '' : '0'
60 const displayedHours = hours > 0 ? hours.toString() + ':' : '' 60 const displayedHours = hours > 0 ? hours.toString() + ':' : ''
61 61
62 return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString() 62 return (
63 displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
64 ).replace(/^0/, '')
63} 65}
64 66
65function immutableAssign <A, B> (target: A, source: B) { 67function immutableAssign <A, B> (target: A, source: B) {
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index ddd7abe8a..5166bd559 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -44,7 +44,7 @@
44 44
45 .from-date { 45 .from-date {
46 font-size: 0.85em; 46 font-size: 0.85em;
47 color: var(--greyForegroundColor); 47 color: pvar(--greyForegroundColor);
48 padding-left: 5px; 48 padding-left: 5px;
49 min-width: 70px; 49 min-width: 70px;
50 text-align: right; 50 text-align: right;
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index f572dd902..47baa997b 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -68,7 +68,7 @@
68 68
69 .timestamp-info { 69 .timestamp-info {
70 font-size: 0.9em; 70 font-size: 0.9em;
71 color: var(--greyForegroundColor); 71 color: pvar(--greyForegroundColor);
72 margin-left: 5px; 72 margin-left: 5px;
73 } 73 }
74 } 74 }
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index 649272c52..afd775b25 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -24,7 +24,7 @@ my-video-thumbnail,
24.video { 24.video {
25 display: flex; 25 display: flex;
26 align-items: center; 26 align-items: center;
27 background-color: var(--mainBackgroundColor); 27 background-color: pvar(--mainBackgroundColor);
28 padding: 10px; 28 padding: 10px;
29 border-bottom: 1px solid $separator-border-color; 29 border-bottom: 1px solid $separator-border-color;
30 30
@@ -49,7 +49,7 @@ my-video-thumbnail,
49 a { 49 a {
50 @include disable-default-a-behaviour; 50 @include disable-default-a-behaviour;
51 51
52 color: var(--mainForegroundColor); 52 color: pvar(--mainForegroundColor);
53 display: flex; 53 display: flex;
54 min-width: 0; 54 min-width: 0;
55 align-items: center; 55 align-items: center;
@@ -58,11 +58,11 @@ my-video-thumbnail,
58 .position { 58 .position {
59 font-weight: $font-semibold; 59 font-weight: $font-semibold;
60 margin-right: 10px; 60 margin-right: 10px;
61 color: var(--greyForegroundColor); 61 color: pvar(--greyForegroundColor);
62 min-width: 25px; 62 min-width: 25px;
63 63
64 my-global-icon { 64 my-global-icon {
65 @include apply-svg-color(var(--greyForegroundColor)); 65 @include apply-svg-color(pvar(--greyForegroundColor));
66 66
67 width: 17px; 67 width: 17px;
68 position: relative; 68 position: relative;
@@ -81,7 +81,7 @@ my-video-thumbnail,
81 } 81 }
82 82
83 .video-info-account, .video-info-timestamp { 83 .video-info-account, .video-info-timestamp {
84 color: var(--greyForegroundColor); 84 color: pvar(--greyForegroundColor);
85 } 85 }
86 } 86 }
87 } 87 }
@@ -109,7 +109,7 @@ my-video-thumbnail,
109 } 109 }
110 110
111 .icon-more { 111 .icon-more {
112 @include apply-svg-color(var(--greyForegroundColor)); 112 @include apply-svg-color(pvar(--greyForegroundColor));
113 113
114 display: flex; 114 display: flex;
115 115
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index 527993496..1b16dbb01 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
53 @include disable-default-a-behaviour; 53 @include disable-default-a-behaviour;
54 54
55 display: block; 55 display: block;
56 color: var(--greyForegroundColor); 56 color: pvar(--greyForegroundColor);
57 } 57 }
58 58
59 .privacy-date { 59 .privacy-date {
@@ -72,7 +72,7 @@
72 72
73 .video-info-description { 73 .video-info-description {
74 margin-top: 10px; 74 margin-top: 10px;
75 color: var(--greyForegroundColor); 75 color: pvar(--greyForegroundColor);
76 } 76 }
77 } 77 }
78} 78}
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index a811fc0a8..cd8a5b840 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -36,6 +36,7 @@
36 </div> 36 </div>
37 37
38 <my-video-miniature 38 <my-video-miniature
39 [fitWidth]="true"
39 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType" 40 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
40 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 41 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
41 (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 42 (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 4149c9109..2aab40ea8 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,6 +1,24 @@
1@import '_bootstrap-variables';
2@import '_variables';
1@import '_mixins'; 3@import '_mixins';
2@import '_miniature'; 4@import '_miniature';
3 5
6.videos {
7 display: grid;
8 column-gap: calc(10px + .2%);
9 grid-template-columns: repeat(
10 auto-fill,
11 minmax(
12 var(--miniature-min-width, #{$video-thumbnail-width}),
13 1fr
14 )
15 );
16
17 @media screen and (min-width: #{breakpoint(xxl)}) {
18 --miniature-min-width: 300px;
19 }
20}
21
4.videos-header { 22.videos-header {
5 display: flex; 23 display: flex;
6 justify-content: space-between; 24 justify-content: space-between;
@@ -45,13 +63,16 @@
45 margin-top: -10px; 63 margin-top: -10px;
46 padding-top: 20px; 64 padding-top: 20px;
47 65
66 // make the element span a full grid row within .videos grid
67 grid-column: 1 / -1;
68
48 &:not(:first-child) { 69 &:not(:first-child) {
49 border-top: 1px solid $separator-border-color; 70 border-top: 1px solid $separator-border-color;
50 } 71 }
51} 72}
52 73
53.margin-content { 74:host-context(.main-col:not(.expanded)) .margin-content {
54 @include adapt-margin-content-width; 75 @include adapt-margin-content-width($fluid: true);
55} 76}
56 77
57@media screen and (max-width: $mobile-view) { 78@media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index f39e409a3..34dd0e937 100644
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -15,6 +15,6 @@
15 position: relative; 15 position: relative;
16 top: -2px; 16 top: -2px;
17 17
18 @include apply-svg-color(var(--mainForegroundColor)) 18 @include apply-svg-color(pvar(--mainForegroundColor))
19 } 19 }
20} 20}
diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index 7e2dd7d2f..b09078bea 100644
--- a/client/src/app/shared/video/modals/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -41,13 +41,13 @@
41 min-width: 142px; 41 min-width: 142px;
42 padding-right: 5px; 42 padding-right: 5px;
43 display: inline-block; 43 display: inline-block;
44 color: var(--greyForegroundColor); 44 color: pvar(--greyForegroundColor);
45 font-weight: $font-bold; 45 font-weight: $font-bold;
46 } 46 }
47 47
48 a.metadata-attribute-value { 48 a.metadata-attribute-value {
49 @include disable-default-a-behaviour; 49 @include disable-default-a-behaviour;
50 color: var(--mainForegroundColor); 50 color: pvar(--mainForegroundColor);
51 51
52 &:hover { 52 &:hover {
53 opacity: 0.9; 53 opacity: 0.9;
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index c9ac97762..d354a2930 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,4 +1,4 @@
1<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()"> 1<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
2 <my-video-thumbnail 2 <my-video-thumbnail
3 [video]="video" [nsfw]="isVideoBlur" 3 [video]="video" [nsfw]="isVideoBlur"
4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)" 4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 23d918d00..849bd54bb 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -6,7 +6,6 @@ $more-button-width: 41px;
6$more-margin-right: 15px; 6$more-margin-right: 15px;
7 7
8.video-miniature { 8.video-miniature {
9 width: $video-miniature-width;
10 display: inline-flex; 9 display: inline-flex;
11 flex-direction: column; 10 flex-direction: column;
12 margin-bottom: $video-miniature-margin-bottom; 11 margin-bottom: $video-miniature-margin-bottom;
@@ -19,14 +18,16 @@ $more-margin-right: 15px;
19 .video-miniature-information { 18 .video-miniature-information {
20 width: $video-miniature-width - $more-button-width - $more-margin-right; 19 width: $video-miniature-width - $more-button-width - $more-margin-right;
21 line-height: normal; 20 line-height: normal;
21 font-size: 13px;
22 22
23 .video-miniature-name { 23 .video-miniature-name {
24 @include miniature-name; 24 @include miniature-name;
25 font-size: 110%;
25 } 26 }
26 27
27 .video-miniature-created-at-views { 28 .video-miniature-created-at-views {
28 display: block; 29 display: block;
29 font-size: 13px; 30 font-size: 95%;
30 } 31 }
31 32
32 .video-miniature-account, 33 .video-miniature-account,
@@ -35,8 +36,8 @@ $more-margin-right: 15px;
35 @include ellipsis; 36 @include ellipsis;
36 37
37 display: block; 38 display: block;
38 font-size: 13px; 39 font-size: 95%;
39 color: var(--greyForegroundColor); 40 color: pvar(--greyForegroundColor);
40 41
41 &:hover { 42 &:hover {
42 color: $grey-foreground-hover-color; 43 color: $grey-foreground-hover-color;
@@ -87,10 +88,6 @@ $more-margin-right: 15px;
87 @media screen and (max-width: $small-view) { 88 @media screen and (max-width: $small-view) {
88 .video-miniature-information { 89 .video-miniature-information {
89 margin: 0 10px; 90 margin: 0 10px;
90
91 .video-miniature-name {
92 margin-top: 0;
93 }
94 } 91 }
95 92
96 .video-actions { 93 .video-actions {
@@ -109,6 +106,24 @@ $more-margin-right: 15px;
109 opacity: 1; 106 opacity: 1;
110 } 107 }
111 108
109 &.fit-width {
110 width: 100%;
111 height: unset;
112 margin-bottom: $video-miniature-margin-bottom / 2;
113
114 .video-bottom {
115 width: 100% !important;
116
117 .video-miniature-information {
118 width: calc(100% - 40px) !important;
119 }
120 }
121
122 my-video-thumbnail {
123 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
124 }
125 }
126
112 &.display-as-row { 127 &.display-as-row {
113 flex-direction: row; 128 flex-direction: row;
114 margin-bottom: 0; 129 margin-bottom: 0;
@@ -137,7 +152,7 @@ $more-margin-right: 15px;
137 .video-miniature-created-at-views, 152 .video-miniature-created-at-views,
138 .video-miniature-account, 153 .video-miniature-account,
139 .video-miniature-channel { 154 .video-miniature-channel {
140 font-size: 14px; 155 font-size: 95%;
141 width: fit-content; 156 width: fit-content;
142 } 157 }
143 158
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 88b21b3a5..a1d4f0e81 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -55,6 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
55 } 55 }
56 @Input() displayAsRow = false 56 @Input() displayAsRow = false
57 @Input() displayVideoActions = true 57 @Input() displayVideoActions = true
58 @Input() fitWidth = false
58 59
59 @Output() videoBlacklisted = new EventEmitter() 60 @Output() videoBlacklisted = new EventEmitter()
60 @Output() videoUnblacklisted = new EventEmitter() 61 @Output() videoUnblacklisted = new EventEmitter()
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 5fca916f0..feff78a87 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -14,7 +14,7 @@
14 14
15 div { 15 div {
16 height: 100%; 16 height: 100%;
17 background-color: var(--mainColor); 17 background-color: pvar(--mainColor);
18 } 18 }
19 } 19 }
20 20
@@ -25,7 +25,8 @@
25 25
26 border-radius: 3px; 26 border-radius: 3px;
27 font-size: 12px; 27 font-size: 12px;
28 font-weight: $font-bold; 28 font-weight: $font-semibold;
29 line-height: 1.2;
29 z-index: z(miniature); 30 z-index: z(miniature);
30 } 31 }
31 32
@@ -34,6 +35,7 @@
34 padding: 0 5px; 35 padding: 0 5px;
35 left: 5px; 36 left: 5px;
36 top: 5px; 37 top: 5px;
38 font-weight: $font-bold;
37 39
38 &.warning { background-color: orange; } 40 &.warning { background-color: orange; }
39 &.danger { background-color: red; } 41 &.danger { background-color: red; }
@@ -41,7 +43,7 @@
41 43
42 .video-thumbnail-duration-overlay { 44 .video-thumbnail-duration-overlay {
43 position: absolute; 45 position: absolute;
44 padding: 0 5px; 46 padding: 0 3px;
45 right: 5px; 47 right: 5px;
46 bottom: 5px; 48 bottom: 5px;
47 } 49 }
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 0702ebf22..69b907288 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
@@ -17,7 +17,7 @@ label {
17} 17}
18 18
19.title-page a { 19.title-page a {
20 color: var(--mainForegroundColor); 20 color: pvar(--mainForegroundColor);
21 21
22 &:hover { 22 &:hover {
23 text-decoration: none; 23 text-decoration: none;
@@ -122,7 +122,7 @@ my-peertube-checkbox {
122 display: inline-block; 122 display: inline-block;
123 margin-right: 25px; 123 margin-right: 25px;
124 124
125 color: var(--greyForegroundColor); 125 color: pvar(--greyForegroundColor);
126 font-size: 15px; 126 font-size: 15px;
127 } 127 }
128 128
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 3b46475b4..1fef74994 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,7 +3,7 @@
3 3
4.first-step-block { 4.first-step-block {
5 .torrent-or-magnet { 5 .torrent-or-magnet {
6 @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor)); 6 @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
7 7
8 &[data-content] { 8 &[data-content] {
9 margin: 1.5rem 0; 9 margin: 1.5rem 0;
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 1316e09e4..0ad57d897 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -33,10 +33,10 @@ $nav-link-height: 40px;
33 &.active { 33 &.active {
34 border: $border-width $border-type $border-color; 34 border: $border-width $border-type $border-color;
35 border-bottom: none; 35 border-bottom: none;
36 background-color: var(--submenuColor) !important; 36 background-color: pvar(--submenuColor) !important;
37 37
38 span { 38 span {
39 border-bottom: 2px solid var(--mainColor); 39 border-bottom: 2px solid pvar(--mainColor);
40 font-weight: $font-bold; 40 font-weight: $font-bold;
41 } 41 }
42 } 42 }
@@ -47,7 +47,7 @@ $nav-link-height: 40px;
47 border: $border-width $border-type $border-color; 47 border: $border-width $border-type $border-color;
48 border-top: transparent; 48 border-top: transparent;
49 49
50 background-color: var(--submenuColor); 50 background-color: pvar(--submenuColor);
51 border-bottom-left-radius: 3px; 51 border-bottom-left-radius: 3px;
52 border-bottom-right-radius: 3px; 52 border-bottom-right-radius: 3px;
53 width: 100%; 53 width: 100%;
@@ -58,7 +58,7 @@ $nav-link-height: 40px;
58 align-items: center; 58 align-items: center;
59 59
60 &.dragover { 60 &.dragover {
61 border: 3px dashed var(--mainColor); 61 border: 3px dashed pvar(--mainColor);
62 } 62 }
63} 63}
64 64
@@ -72,7 +72,7 @@ $nav-link-height: 40px;
72 /* Hide active tab style to not have a moving tab effect */ 72 /* Hide active tab style to not have a moving tab effect */
73 a.nav-link.active { 73 a.nav-link.active {
74 border: none; 74 border: none;
75 background-color: var(--mainBackgroundColor) !important; 75 background-color: pvar(--mainBackgroundColor) !important;
76 } 76 }
77 } 77 }
78} 78}
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 33204de3b..e7ef79561 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
@@ -70,7 +70,7 @@
70 a { 70 a {
71 @include disable-default-a-behaviour; 71 @include disable-default-a-behaviour;
72 72
73 color: var(--mainForegroundColor); 73 color: pvar(--mainForegroundColor);
74 } 74 }
75 75
76 .comment-account-fid { 76 .comment-account-fid {
@@ -80,7 +80,7 @@
80 80
81 .comment-date { 81 .comment-date {
82 font-size: 90%; 82 font-size: 90%;
83 color: var(--greyForegroundColor); 83 color: pvar(--greyForegroundColor);
84 margin-left: 5px; 84 margin-left: 5px;
85 text-decoration: none; 85 text-decoration: none;
86 } 86 }
@@ -95,7 +95,7 @@
95 &:not(.linkified-url) { 95 &:not(.linkified-url) {
96 @include disable-default-a-behaviour; 96 @include disable-default-a-behaviour;
97 97
98 color: var(--mainForegroundColor); 98 color: pvar(--mainForegroundColor);
99 99
100 font-weight: $font-semibold; 100 font-weight: $font-semibold;
101 } 101 }
@@ -108,7 +108,7 @@
108 } 108 }
109 109
110 &.comment-html-deleted { 110 &.comment-html-deleted {
111 color: var(--greyForegroundColor); 111 color: pvar(--greyForegroundColor);
112 margin-bottom: 1rem; 112 margin-bottom: 1rem;
113 } 113 }
114 } 114 }
@@ -120,12 +120,12 @@
120 ::ng-deep .dropdown-toggle, 120 ::ng-deep .dropdown-toggle,
121 .comment-action-reply, 121 .comment-action-reply,
122 .comment-action-delete { 122 .comment-action-delete {
123 color: var(--greyForegroundColor); 123 color: pvar(--greyForegroundColor);
124 cursor: pointer; 124 cursor: pointer;
125 margin-right: 10px; 125 margin-right: 10px;
126 126
127 &:hover { 127 &:hover {
128 color: var(--mainForegroundColor); 128 color: pvar(--mainForegroundColor);
129 } 129 }
130 } 130 }
131 131
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 db36dcd8b..0b0a2a899 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
@@ -7,7 +7,7 @@
7 min-width: 200px; 7 min-width: 200px;
8 max-width: 470px; 8 max-width: 470px;
9 height: 66vh; 9 height: 66vh;
10 background-color: var(--mainBackgroundColor); 10 background-color: pvar(--mainBackgroundColor);
11 overflow-y: auto; 11 overflow-y: auto;
12 border-bottom: 1px solid $separator-border-color; 12 border-bottom: 1px solid $separator-border-color;
13 13
@@ -22,7 +22,7 @@
22 } 22 }
23 23
24 .playlist-by-index { 24 .playlist-by-index {
25 color: var(--greyForegroundColor); 25 color: pvar(--greyForegroundColor);
26 display: flex; 26 display: flex;
27 27
28 .playlist-by { 28 .playlist-by {
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 431a21039..8be0bab1d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -166,7 +166,7 @@ $video-info-margin-left: 44px;
166 a { 166 a {
167 @include disable-default-a-behaviour; 167 @include disable-default-a-behaviour;
168 168
169 color: var(--mainForegroundColor); 169 color: pvar(--mainForegroundColor);
170 170
171 &:hover { 171 &:hover {
172 opacity: 0.8; 172 opacity: 0.8;
@@ -225,7 +225,7 @@ $video-info-margin-left: 44px;
225 ::ng-deep.action-button { 225 ::ng-deep.action-button {
226 @include peertube-button; 226 @include peertube-button;
227 @include button-with-icon(21px, 0, -1px); 227 @include button-with-icon(21px, 0, -1px);
228 @include apply-svg-color(var(--actionButtonColor)); 228 @include apply-svg-color(pvar(--actionButtonColor));
229 229
230 font-size: 100%; 230 font-size: 100%;
231 font-weight: $font-semibold; 231 font-weight: $font-semibold;
@@ -233,7 +233,7 @@ $video-info-margin-left: 44px;
233 padding: 0 10px 0 10px; 233 padding: 0 10px 0 10px;
234 white-space: nowrap; 234 white-space: nowrap;
235 background-color: transparent !important; 235 background-color: transparent !important;
236 color: var(--actionButtonColor); 236 color: pvar(--actionButtonColor);
237 text-transform: uppercase; 237 text-transform: uppercase;
238 238
239 &::after { 239 &::after {
@@ -255,36 +255,36 @@ $video-info-margin-left: 44px;
255 255
256 &.action-button-like.activated { 256 &.action-button-like.activated {
257 .count { 257 .count {
258 color: var(--activatedActionButtonColor); 258 color: pvar(--activatedActionButtonColor);
259 } 259 }
260 260
261 my-global-icon { 261 my-global-icon {
262 @include apply-svg-color(var(--activatedActionButtonColor)); 262 @include apply-svg-color(pvar(--activatedActionButtonColor));
263 } 263 }
264 } 264 }
265 265
266 &.action-button-dislike.activated { 266 &.action-button-dislike.activated {
267 .count { 267 .count {
268 color: var(--activatedActionButtonColor); 268 color: pvar(--activatedActionButtonColor);
269 } 269 }
270 270
271 my-global-icon { 271 my-global-icon {
272 @include apply-svg-color(var(--activatedActionButtonColor)); 272 @include apply-svg-color(pvar(--activatedActionButtonColor));
273 } 273 }
274 } 274 }
275 275
276 &.action-button-support { 276 &.action-button-support {
277 color: var(--supportButtonColor); 277 color: pvar(--supportButtonColor);
278 278
279 my-global-icon { 279 my-global-icon {
280 @include apply-svg-color(var(--supportButtonColor)); 280 @include apply-svg-color(pvar(--supportButtonColor));
281 } 281 }
282 } 282 }
283 283
284 &.action-button-support { 284 &.action-button-support {
285 my-global-icon { 285 my-global-icon {
286 ::ng-deep path:first-child { 286 ::ng-deep path:first-child {
287 fill: var(--supportButtonHeartColor) !important; 287 fill: pvar(--supportButtonHeartColor) !important;
288 } 288 }
289 } 289 }
290 } 290 }
@@ -325,7 +325,7 @@ $video-info-margin-left: 44px;
325 background-color: #909090; 325 background-color: #909090;
326 326
327 &.liked { 327 &.liked {
328 background-color: var(--activatedActionButtonColor); 328 background-color: pvar(--activatedActionButtonColor);
329 } 329 }
330 } 330 }
331 } 331 }
@@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
356 .video-info-description-more { 356 .video-info-description-more {
357 cursor: pointer; 357 cursor: pointer;
358 font-weight: $font-semibold; 358 font-weight: $font-semibold;
359 color: var(--greyForegroundColor); 359 color: pvar(--greyForegroundColor);
360 font-size: 14px; 360 font-size: 14px;
361 361
362 .glyphicon { 362 .glyphicon {
@@ -379,13 +379,13 @@ $video-info-margin-left: 44px;
379 min-width: 142px; 379 min-width: 142px;
380 padding-right: 5px; 380 padding-right: 5px;
381 display: inline-block; 381 display: inline-block;
382 color: var(--greyForegroundColor); 382 color: pvar(--greyForegroundColor);
383 font-weight: $font-bold; 383 font-weight: $font-bold;
384 } 384 }
385 385
386 a.video-attribute-value { 386 a.video-attribute-value {
387 @include disable-default-a-behaviour; 387 @include disable-default-a-behaviour;
388 color: var(--mainForegroundColor); 388 color: pvar(--mainForegroundColor);
389 389
390 &:hover { 390 &:hover {
391 opacity: 0.9; 391 opacity: 0.9;
@@ -480,7 +480,7 @@ my-video-comments {
480 a { 480 a {
481 @include disable-default-a-behaviour; 481 @include disable-default-a-behaviour;
482 482
483 color: var(--mainColor); 483 color: pvar(--mainColor);
484 transition: color 0.3s; 484 transition: color 0.3s;
485 485
486 &:hover { 486 &:hover {
@@ -503,7 +503,7 @@ my-video-comments {
503 } 503 }
504 504
505 .privacy-concerns-okay { 505 .privacy-concerns-okay {
506 background-color: var(--mainColor); 506 background-color: pvar(--mainColor);
507 margin-left: 10px; 507 margin-left: 10px;
508 } 508 }
509} 509}
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 84999cfb2..72e101558 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -12,7 +12,7 @@
12 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> 12 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
13 </div> 13 </div>
14 14
15 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 15 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
16 </my-video-miniature> 16 </my-video-miniature>
17 </div> 17 </div>
18 18
@@ -21,7 +21,7 @@
21 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> 21 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
22 </div> 22 </div>
23 23
24 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 24 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
25 </my-video-miniature> 25 </my-video-miniature>
26 </div> 26 </div>
27 27
@@ -34,7 +34,7 @@
34 </a> 34 </a>
35 </div> 35 </div>
36 36
37 <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 37 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
38 </my-video-miniature> 38 </my-video-miniature>
39 </div> 39 </div>
40 40