aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
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
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')
-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
-rw-r--r--client/src/sass/application.scss24
-rw-r--r--client/src/sass/bootstrap.scss30
-rw-r--r--client/src/sass/include/_miniature.scss55
-rw-r--r--client/src/sass/include/_mixins.scss86
-rw-r--r--client/src/sass/include/_variables.scss2
-rw-r--r--client/src/sass/loading-bar.scss4
-rw-r--r--client/src/sass/player/context-menu.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss10
-rw-r--r--client/src/sass/player/settings-menu.scss2
-rw-r--r--client/src/sass/primeng-custom.scss70
65 files changed, 355 insertions, 294 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
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 16e7ea5ca..d5763527e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -47,21 +47,21 @@ body {
47 47
48 --actionButtonColor: #{$grey-foreground-color}; 48 --actionButtonColor: #{$grey-foreground-color};
49 --supportButtonBackgroundColor: #{transparent}; 49 --supportButtonBackgroundColor: #{transparent};
50 --supportButtonColor: #{var(--actionButtonColor)}; 50 --supportButtonColor: #{pvar(--actionButtonColor)};
51 --supportButtonHeartColor: #{$support-button-heart}; 51 --supportButtonHeartColor: #{$support-button-heart};
52 52
53 --activatedActionButtonColor: #{$activated-action-button-color}; 53 --activatedActionButtonColor: #{$activated-action-button-color};
54 54
55 font-family: $main-fonts; 55 font-family: $main-fonts;
56 font-weight: $font-regular; 56 font-weight: $font-regular;
57 color: var(--mainForegroundColor); 57 color: pvar(--mainForegroundColor);
58 background-color: var(--mainBackgroundColor); 58 background-color: pvar(--mainBackgroundColor);
59 font-size: 14px; 59 font-size: 14px;
60} 60}
61 61
62::selection { 62::selection {
63 color: var(--mainBackgroundColor); 63 color: pvar(--mainBackgroundColor);
64 background-color: var(--mainHoverColor); 64 background-color: pvar(--mainHoverColor);
65} 65}
66 66
67#incompatible-browser { 67#incompatible-browser {
@@ -78,12 +78,12 @@ strong {
78 78
79input.readonly { 79input.readonly {
80 /* Force blank on readonly inputs */ 80 /* Force blank on readonly inputs */
81 background-color: var(--inputBackgroundColor) !important; 81 background-color: pvar(--inputBackgroundColor) !important;
82} 82}
83 83
84input, textarea { 84input, textarea {
85 outline: none; 85 outline: none;
86 color: var(--mainForegroundColor); 86 color: pvar(--mainForegroundColor);
87} 87}
88 88
89label { 89label {
@@ -128,7 +128,7 @@ label {
128 } 128 }
129 129
130 .sub-menu { 130 .sub-menu {
131 background-color: var(--submenuColor); 131 background-color: pvar(--submenuColor);
132 width: 100%; 132 width: 100%;
133 height: 81px; 133 height: 81px;
134 margin-bottom: $sub-menu-margin-bottom; 134 margin-bottom: $sub-menu-margin-bottom;
@@ -166,7 +166,7 @@ label {
166} 166}
167 167
168.title-page { 168.title-page {
169 color: var(--mainForegroundColor); 169 color: pvar(--mainForegroundColor);
170 font-size: 16px; 170 font-size: 16px;
171 display: inline-block; 171 display: inline-block;
172 margin-right: 55px; 172 margin-right: 55px;
@@ -180,7 +180,7 @@ label {
180 180
181 &.active { 181 &.active {
182 font-weight: $font-bold; 182 font-weight: $font-bold;
183 border-bottom: 2px solid var(--mainColor); 183 border-bottom: 2px solid pvar(--mainColor);
184 } 184 }
185 185
186 &.title-page-single { 186 &.title-page-single {
@@ -188,7 +188,7 @@ label {
188 } 188 }
189 189
190 &:hover, &:active, &:focus { 190 &:hover, &:active, &:focus {
191 color: var(--mainForegroundColor); 191 color: pvar(--mainForegroundColor);
192 } 192 }
193 193
194 @media screen and (max-width: $mobile-view) { 194 @media screen and (max-width: $mobile-view) {
@@ -220,7 +220,7 @@ label {
220 @include disable-default-a-behaviour; 220 @include disable-default-a-behaviour;
221 221
222 font-size: 16px; 222 font-size: 16px;
223 color: var(--mainForegroundColor); 223 color: pvar(--mainForegroundColor);
224 padding: 5px 15px; 224 padding: 5px 15px;
225 border-radius: 0.25rem; 225 border-radius: 0.25rem;
226 226
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 7985472ed..0dc58a7c9 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -51,8 +51,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
51 padding: 3px 15px; 51 padding: 3px 15px;
52 52
53 &.active { 53 &.active {
54 color: var(--mainBackgroundColor) !important; 54 color: pvar(--mainBackgroundColor) !important;
55 background-color: var(--mainHoverColor); 55 background-color: pvar(--mainHoverColor);
56 opacity: .9; 56 opacity: .9;
57 } 57 }
58 58
@@ -94,7 +94,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
94 text-align: center; 94 text-align: center;
95 95
96 .modal-content { 96 .modal-content {
97 background-color: var(--mainBackgroundColor); 97 background-color: pvar(--mainBackgroundColor);
98 } 98 }
99 99
100 .modal-header { 100 .modal-header {
@@ -161,7 +161,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
161 a { 161 a {
162 @include disable-default-a-behaviour; 162 @include disable-default-a-behaviour;
163 163
164 color: var(--mainForegroundColor); 164 color: pvar(--mainForegroundColor);
165 } 165 }
166} 166}
167 167
@@ -170,7 +170,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
170 .nav-link { 170 .nav-link {
171 @include disable-default-a-behaviour; 171 @include disable-default-a-behaviour;
172 172
173 color: var(--mainForegroundColor) !important; 173 color: pvar(--mainForegroundColor) !important;
174 } 174 }
175} 175}
176 176
@@ -180,9 +180,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
180 } 180 }
181 &.active { 181 &.active {
182 font-weight: $font-semibold; 182 font-weight: $font-semibold;
183 background-color: var(--mainBackgroundColor) !important; 183 background-color: pvar(--mainBackgroundColor) !important;
184 border: none; 184 border: none;
185 border-bottom: 2px solid var(--mainColor); 185 border-bottom: 2px solid pvar(--mainColor);
186 } 186 }
187 &:hover { 187 &:hover {
188 border-top-color: transparent; 188 border-top-color: transparent;
@@ -192,7 +192,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
192} 192}
193 193
194.card { 194.card {
195 background-color: var(--mainBackgroundColor); 195 background-color: pvar(--mainBackgroundColor);
196 border-color: #dee2e6; 196 border-color: #dee2e6;
197} 197}
198 198
@@ -240,27 +240,27 @@ ngb-tooltip-window {
240} 240}
241 241
242.btn-outline-tertiary { 242.btn-outline-tertiary {
243 color: var(--secondaryColor); 243 color: pvar(--secondaryColor);
244 border-color: var(--secondaryColor); 244 border-color: pvar(--secondaryColor);
245 245
246 &:focus-within, 246 &:focus-within,
247 &:focus, 247 &:focus,
248 &:hover { 248 &:hover {
249 color: var(--mainBackgroundColor); 249 color: pvar(--mainBackgroundColor);
250 background-color: var(--secondaryColor); 250 background-color: pvar(--secondaryColor);
251 } 251 }
252} 252}
253 253
254// input box-shadow on focus 254// input box-shadow on focus
255.form-control { 255.form-control {
256 font-size: 15px; 256 font-size: 15px;
257 color: var(--mainForegroundColor); 257 color: pvar(--mainForegroundColor);
258 background-color: var(--inputBackgroundColor); 258 background-color: pvar(--inputBackgroundColor);
259 outline: none; 259 outline: none;
260 260
261 &:focus-within, 261 &:focus-within,
262 &:focus { 262 &:focus {
263 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 263 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
264 264
265 &.input-error { 265 &.input-error {
266 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)}; 266 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index d0ee1e2f0..d89d6f9ff 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -6,7 +6,7 @@
6 6
7 transition: color 0.2s; 7 transition: color 0.2s;
8 font-weight: $font-semibold; 8 font-weight: $font-semibold;
9 color: var(--mainForegroundColor); 9 color: pvar(--mainForegroundColor);
10 margin-top: 10px; 10 margin-top: 10px;
11 margin-bottom: 5px; 11 margin-bottom: 5px;
12 12
@@ -80,7 +80,7 @@ $play-overlay-width: 18px;
80 } 80 }
81 81
82 &.focus-visible { 82 &.focus-visible {
83 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 83 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
84 outline: none; 84 outline: none;
85 } 85 }
86 86
@@ -168,7 +168,7 @@ $play-overlay-width: 18px;
168 outline: none; 168 outline: none;
169 } 169 }
170 170
171 color: var(--mainForegroundColor); 171 color: pvar(--mainForegroundColor);
172 } 172 }
173 } 173 }
174 174
@@ -187,7 +187,7 @@ $play-overlay-width: 18px;
187 } 187 }
188 188
189 .followers { 189 .followers {
190 color: var(--greyForegroundColor); 190 color: pvar(--greyForegroundColor);
191 font-weight: normal; 191 font-weight: normal;
192 font-size: 14px; 192 font-size: 14px;
193 margin-left: 10px; 193 margin-left: 10px;
@@ -203,7 +203,7 @@ $play-overlay-width: 18px;
203 display: inline-block; 203 display: inline-block;
204 font-size: 16px; 204 font-size: 16px;
205 text-transform: uppercase; 205 text-transform: uppercase;
206 color: var(--greyForegroundColor); 206 color: pvar(--greyForegroundColor);
207 margin-bottom: 10px; 207 margin-bottom: 10px;
208 font-weight: $font-semibold; 208 font-weight: $font-semibold;
209 text-decoration: none; 209 text-decoration: none;
@@ -221,32 +221,37 @@ $play-overlay-width: 18px;
221 } 221 }
222} 222}
223 223
224@mixin adapt-margin-content-width { 224@mixin adapt-margin-content-width($fluid: false) {
225 width: $video-miniature-width * 6; 225 @if $fluid {
226 margin: auto !important; 226 margin-left: 3vw !important;
227 margin-right: 3vw !important;
228 } @else {
229 width: $video-miniature-width * 6;
230 margin: auto !important;
227 231
228 @media screen and (max-width: 1800px) { 232 @media screen and (max-width: 1800px) {
229 width: $video-miniature-width * 5; 233 width: $video-miniature-width * 5;
230 } 234 }
231 235
232 @media screen and (max-width: 1800px - $video-miniature-width) { 236 @media screen and (max-width: 1800px - $video-miniature-width) {
233 width: $video-miniature-width * 4; 237 width: $video-miniature-width * 4;
234 } 238 }
235 239
236 @media screen and (max-width: 1800px - (2* $video-miniature-width)) { 240 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
237 width: $video-miniature-width * 3; 241 width: $video-miniature-width * 3;
238 } 242 }
239 243
240 @media screen and (max-width: 1800px - (3* $video-miniature-width)) { 244 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
241 width: $video-miniature-width * 2; 245 width: $video-miniature-width * 2;
242 } 246 }
243 247
244 @media screen and (max-width: $mobile-view) { 248 @media screen and (max-width: $mobile-view) {
245 width: auto; 249 width: auto;
246 margin: 0 !important; 250 margin: 0 !important;
247 251
248 .videos { 252 .videos {
249 @include video-miniature-small-screen; 253 @include video-miniature-small-screen;
254 }
250 } 255 }
251 } 256 }
252} 257}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0b558a3f5..5971bb72a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -90,8 +90,8 @@
90 display: inline-block; 90 display: inline-block;
91 height: $button-height; 91 height: $button-height;
92 width: $width; 92 width: $width;
93 color: var(--inputForegroundColor); 93 color: pvar(--inputForegroundColor);
94 background-color: var(--inputBackgroundColor); 94 background-color: pvar(--inputBackgroundColor);
95 border: 1px solid #C6C6C6; 95 border: 1px solid #C6C6C6;
96 border-radius: 3px; 96 border-radius: 3px;
97 padding-left: 15px; 97 padding-left: 15px;
@@ -99,7 +99,7 @@
99 font-size: 15px; 99 font-size: 15px;
100 100
101 &::placeholder { 101 &::placeholder {
102 color: var(--inputPlaceholderColor); 102 color: pvar(--inputPlaceholderColor);
103 } 103 }
104 104
105 @media screen and (max-width: $width) { 105 @media screen and (max-width: $width) {
@@ -122,24 +122,24 @@
122@mixin peertube-textarea ($width, $height) { 122@mixin peertube-textarea ($width, $height) {
123 @include peertube-input-text($width); 123 @include peertube-input-text($width);
124 124
125 color: var(--textareaForegroundColor); 125 color: pvar(--textareaForegroundColor);
126 background-color: var(--textareaBackgroundColor); 126 background-color: pvar(--textareaBackgroundColor);
127 height: $height; 127 height: $height;
128 padding: 5px 15px; 128 padding: 5px 15px;
129 font-size: 15px; 129 font-size: 15px;
130} 130}
131 131
132@mixin orange-button { 132@mixin orange-button {
133 @include button-focus(var(--mainColorLightest)); 133 @include button-focus(pvar(--mainColorLightest));
134 134
135 &, &:active, &:focus { 135 &, &:active, &:focus {
136 color: #fff; 136 color: #fff;
137 background-color: var(--mainColor); 137 background-color: pvar(--mainColor);
138 } 138 }
139 139
140 &:hover { 140 &:hover {
141 color: #fff; 141 color: #fff;
142 background-color: var(--mainHoverColor); 142 background-color: pvar(--mainHoverColor);
143 } 143 }
144 144
145 &[disabled], &.disabled { 145 &[disabled], &.disabled {
@@ -156,7 +156,7 @@
156@mixin tertiary-button { 156@mixin tertiary-button {
157 @include button-focus($grey-button-outline-color); 157 @include button-focus($grey-button-outline-color);
158 158
159 color: var(--greyForegroundColor); 159 color: pvar(--greyForegroundColor);
160 background-color: transparent; 160 background-color: transparent;
161 161
162 &[disabled], &.disabled { 162 &[disabled], &.disabled {
@@ -173,11 +173,11 @@
173 173
174 &, &:active, &:focus { 174 &, &:active, &:focus {
175 background-color: $grey-background-color; 175 background-color: $grey-background-color;
176 color: var(--greyForegroundColor); 176 color: pvar(--greyForegroundColor);
177 } 177 }
178 178
179 &:hover, &:active, &:focus, &[disabled], &.disabled { 179 &:hover, &:active, &:focus, &[disabled], &.disabled {
180 color: var(--greyForegroundColor); 180 color: pvar(--greyForegroundColor);
181 background-color: $grey-background-hover-color; 181 background-color: $grey-background-hover-color;
182 } 182 }
183 183
@@ -186,7 +186,7 @@
186 } 186 }
187 187
188 my-global-icon { 188 my-global-icon {
189 @include apply-svg-color(var(--greyForegroundColor)) 189 @include apply-svg-color(pvar(--greyForegroundColor))
190 } 190 }
191} 191}
192 192
@@ -283,8 +283,8 @@
283 margin: 0; 283 margin: 0;
284 width: $width; 284 width: $width;
285 border-radius: 3px; 285 border-radius: 3px;
286 color: var(--inputForegroundColor); 286 color: pvar(--inputForegroundColor);
287 background: var(--inputBackgroundColor); 287 background: pvar(--inputBackgroundColor);
288 position: relative; 288 position: relative;
289 font-size: 15px; 289 font-size: 15px;
290 290
@@ -315,7 +315,7 @@
315 cursor: pointer; 315 cursor: pointer;
316 height: $button-height; 316 height: $button-height;
317 text-overflow: ellipsis; 317 text-overflow: ellipsis;
318 color: var(--mainForegroundColor); 318 color: pvar(--mainForegroundColor);
319 319
320 &:focus { 320 &:focus {
321 outline: none; 321 outline: none;
@@ -375,7 +375,7 @@
375 position: absolute; 375 position: absolute;
376 376
377 &:focus + span { 377 &:focus + span {
378 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 378 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
379 } 379 }
380 380
381 & + span { 381 & + span {
@@ -404,7 +404,7 @@
404 404
405 &:checked + span { 405 &:checked + span {
406 border-color: transparent; 406 border-color: transparent;
407 background: var(--mainColor); 407 background: pvar(--mainColor);
408 animation: jelly 0.6s ease; 408 animation: jelly 0.6s ease;
409 409
410 &:after { 410 &:after {
@@ -464,14 +464,14 @@
464 464
465@mixin in-content-small-title { 465@mixin in-content-small-title {
466 text-transform: uppercase; 466 text-transform: uppercase;
467 color: var(--mainColor); 467 color: pvar(--mainColor);
468 font-weight: $font-bold; 468 font-weight: $font-bold;
469 font-size: 13px; 469 font-size: 13px;
470} 470}
471 471
472@mixin settings-big-title { 472@mixin settings-big-title {
473 text-transform: uppercase; 473 text-transform: uppercase;
474 color: var(--mainColor); 474 color: pvar(--mainColor);
475 font-weight: $font-bold; 475 font-weight: $font-bold;
476 font-size: 110%; 476 font-size: 110%;
477 margin-bottom: 10px; 477 margin-bottom: 10px;
@@ -482,7 +482,7 @@
482 482
483 font-size: 13px; 483 font-size: 13px;
484 margin-top: 4px; 484 margin-top: 4px;
485 color: var(--mainForegroundColor); 485 color: pvar(--mainForegroundColor);
486 486
487 span:hover { 487 span:hover {
488 opacity: 0.8; 488 opacity: 0.8;
@@ -612,8 +612,8 @@
612 border-radius: 0.25rem; 612 border-radius: 0.25rem;
613 613
614 .progress-bar { 614 .progress-bar {
615 color: var(--mainBackgroundColor); 615 color: pvar(--mainBackgroundColor);
616 background-color: var(--mainColor); 616 background-color: pvar(--mainColor);
617 display: flex; 617 display: flex;
618 flex-direction: column; 618 flex-direction: column;
619 justify-content: center; 619 justify-content: center;
@@ -622,7 +622,7 @@
622 transition: width 0.6s ease; 622 transition: width 0.6s ease;
623 623
624 &.secondary { 624 &.secondary {
625 background-color: var(--secondaryColor); 625 background-color: pvar(--secondaryColor);
626 } 626 }
627 } 627 }
628} 628}
@@ -633,14 +633,14 @@
633 padding: 0.75rem 1rem; 633 padding: 0.75rem 1rem;
634 margin-bottom: 1rem; 634 margin-bottom: 1rem;
635 list-style: none; 635 list-style: none;
636 background-color: var(--submenuColor); 636 background-color: pvar(--submenuColor);
637 border-radius: 0.25rem; 637 border-radius: 0.25rem;
638 638
639 .breadcrumb-item { 639 .breadcrumb-item {
640 display: flex; 640 display: flex;
641 641
642 a { 642 a {
643 color: var(--mainColor); 643 color: pvar(--mainColor);
644 } 644 }
645 645
646 & + .breadcrumb-item { 646 & + .breadcrumb-item {
@@ -688,7 +688,7 @@
688 & > a, 688 & > a,
689 & > div { 689 & > div {
690 padding: 20px; 690 padding: 20px;
691 background: var(--submenuColor); 691 background: pvar(--submenuColor);
692 border-radius: 4px; 692 border-radius: 4px;
693 box-sizing: border-box; 693 box-sizing: border-box;
694 height: 100%; 694 height: 100%;
@@ -699,14 +699,14 @@
699 text-align: center; 699 text-align: center;
700 font-size: 130%; 700 font-size: 130%;
701 line-height: 21px; 701 line-height: 21px;
702 color: var(--mainForegroundColor); 702 color: pvar(--mainForegroundColor);
703 line-height: 30px; 703 line-height: 30px;
704 margin-bottom: 20px; 704 margin-bottom: 20px;
705 } 705 }
706 706
707 .dashboard-label { 707 .dashboard-label {
708 font-size: 90%; 708 font-size: 90%;
709 color: var(--inputPlaceholderColor); 709 color: pvar(--inputPlaceholderColor);
710 text-align: center; 710 text-align: center;
711 } 711 }
712} 712}
@@ -726,7 +726,7 @@
726 height: max-content; 726 height: max-content;
727 727
728 &:focus-within { 728 &:focus-within {
729 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 729 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
730 } 730 }
731 } 731 }
732 732
@@ -735,8 +735,8 @@
735 height: 30px !important; 735 height: 30px !important;
736 font-size: 12px !important; 736 font-size: 12px !important;
737 737
738 background-color: var(--mainBackgroundColor) !important; 738 background-color: pvar(--mainBackgroundColor) !important;
739 color: var(--mainForegroundColor) !important; 739 color: pvar(--mainForegroundColor) !important;
740 } 740 }
741 } 741 }
742 742
@@ -769,7 +769,7 @@
769 vertical-align: middle !important; 769 vertical-align: middle !important;
770 770
771 path { 771 path {
772 fill: var(--greyForegroundColor) !important; 772 fill: pvar(--greyForegroundColor) !important;
773 } 773 }
774 } 774 }
775 775
@@ -780,7 +780,7 @@
780 } 780 }
781} 781}
782 782
783@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) { 783@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
784 width: 95%; 784 width: 95%;
785 border-top: .05rem solid $color; 785 border-top: .05rem solid $color;
786 height: .05rem; 786 height: .05rem;
@@ -810,7 +810,7 @@
810 border-radius: 5rem; 810 border-radius: 5rem;
811 display: inline-flex; 811 display: inline-flex;
812 font-size: 90%; 812 font-size: 90%;
813 color: var(--mainForegroundColor); 813 color: pvar(--mainForegroundColor);
814 height: $avatar-height; 814 height: $avatar-height;
815 line-height: 1rem; 815 line-height: 1rem;
816 margin: .1rem; 816 margin: .1rem;
@@ -887,3 +887,21 @@
887 } 887 }
888 } 888 }
889} 889}
890
891// applies 16:9 ratio to a child element (using $selector) only using
892// an immediate's parent size. This allows 16:9 ratio without explicit
893// dimensions, as width/height cannot be computed from each other.
894@mixin large-screen-ratio ($selector: 'div') {
895 position: relative;
896 height: 0;
897 width: 100%;
898 padding-top: 56%;
899
900 #{$selector} {
901 position: absolute;
902 width: 100%;
903 height: 100%;
904 top: 0;
905 @content;
906 }
907}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 11561e268..14f1ae76c 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -116,7 +116,7 @@ $variables: (
116 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 116 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
117); 117);
118 118
119@function var($variable) { 119@function pvar($variable) {
120 @return map-get($variables, $variable); 120 @return map-get($variables, $variable);
121} 121}
122 122
diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss
index d584b7c67..d7c308911 100644
--- a/client/src/sass/loading-bar.scss
+++ b/client/src/sass/loading-bar.scss
@@ -10,7 +10,7 @@
10 -moz-transition: 350ms linear all; 10 -moz-transition: 350ms linear all;
11 -o-transition: 350ms linear all; 11 -o-transition: 350ms linear all;
12 transition: 350ms linear all; 12 transition: 350ms linear all;
13 color: var(--mainColor); 13 color: pvar(--mainColor);
14} 14}
15 15
16#loading-bar .bar { 16#loading-bar .bar {
@@ -19,7 +19,7 @@
19 -o-transition: width 350ms; 19 -o-transition: width 350ms;
20 transition: width 350ms; 20 transition: width 350ms;
21 21
22 background: var(--mainColor); 22 background: pvar(--mainColor);
23 position: fixed; 23 position: fixed;
24 z-index: z(loadbar); 24 z-index: z(loadbar);
25 top: 0; 25 top: 0;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index eeab0ccdf..f3a28ead0 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -14,7 +14,7 @@ $context-menu-width: 350px;
14 14
15 .vjs-menu-content { 15 .vjs-menu-content {
16 opacity: $primary-foreground-opacity; 16 opacity: $primary-foreground-opacity;
17 color: var(--embedForegroundCsolor); 17 color: pvar(--embedForegroundCsolor);
18 font-size: $font-size !important; 18 font-size: $font-size !important;
19 font-weight: $font-semibold; 19 font-weight: $font-semibold;
20 } 20 }
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 836be23cc..92923a129 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -17,7 +17,7 @@ body {
17 17
18.video-js.vjs-peertube-skin { 18.video-js.vjs-peertube-skin {
19 font-size: $font-size; 19 font-size: $font-size;
20 color: var(--embedForegroundColor); 20 color: pvar(--embedForegroundColor);
21 21
22 .vjs-dock-text { 22 .vjs-dock-text {
23 padding-right: 10px; 23 padding-right: 10px;
@@ -132,7 +132,7 @@ body {
132 .vjs-control-bar, 132 .vjs-control-bar,
133 .vjs-big-play-button, 133 .vjs-big-play-button,
134 .vjs-settings-dialog { 134 .vjs-settings-dialog {
135 background-color: var(--embedBigPlayBackgroundColor); 135 background-color: pvar(--embedBigPlayBackgroundColor);
136 } 136 }
137 137
138 .vjs-poster { 138 .vjs-poster {
@@ -157,7 +157,7 @@ body {
157 .vjs-theater-control, 157 .vjs-theater-control,
158 .vjs-settings 158 .vjs-settings
159 { 159 {
160 color: var(--embedForegroundColor) !important; 160 color: pvar(--embedForegroundColor) !important;
161 161
162 opacity: $primary-foreground-opacity; 162 opacity: $primary-foreground-opacity;
163 transition: opacity .1s; 163 transition: opacity .1s;
@@ -170,7 +170,7 @@ body {
170 .vjs-current-time, 170 .vjs-current-time,
171 .vjs-duration, 171 .vjs-duration,
172 .vjs-peertube { 172 .vjs-peertube {
173 color: var(--embedForegroundColor); 173 color: pvar(--embedForegroundColor);
174 opacity: $primary-foreground-opacity; 174 opacity: $primary-foreground-opacity;
175 } 175 }
176 176
@@ -190,7 +190,7 @@ body {
190 transition: none; 190 transition: none;
191 191
192 .vjs-play-progress { 192 .vjs-play-progress {
193 background: var(--embedForegroundColor); 193 background: pvar(--embedForegroundColor);
194 194
195 // Not display the circle if the progress is not hovered 195 // Not display the circle if the progress is not hovered
196 &::before { 196 &::before {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 83407b445..09c872ef7 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -38,7 +38,7 @@ $setting-transition-easing: ease-out;
38 position: absolute; 38 position: absolute;
39 right: .5em; 39 right: .5em;
40 bottom: 3.5em; 40 bottom: 3.5em;
41 color: var(--embedForegroundColor); 41 color: pvar(--embedForegroundColor);
42 opacity: $primary-foreground-opacity; 42 opacity: $primary-foreground-opacity;
43 margin: 0 auto; 43 margin: 0 auto;
44 font-size: $font-size !important; 44 font-size: $font-size !important;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 056b88fc1..a9a950dc0 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -7,7 +7,7 @@
7@mixin glyphicon-light { 7@mixin glyphicon-light {
8 font-family: 'Glyphicons Halflings'; 8 font-family: 'Glyphicons Halflings';
9 text-decoration: none !important; 9 text-decoration: none !important;
10 color: var(--mainForegroundColor) !important; 10 color: pvar(--mainForegroundColor) !important;
11 font-display: swap; 11 font-display: swap;
12} 12}
13 13
@@ -19,14 +19,14 @@ my-button {
19 19
20// focus box-shadow for primeng 20// focus box-shadow for primeng
21.ui-inputtext:enabled:focus:not(.ui-state-error) { 21.ui-inputtext:enabled:focus:not(.ui-state-error) {
22 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; 22 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
23} 23}
24 24
25// data table customizations 25// data table customizations
26p-table { 26p-table {
27 .ui-table-caption { 27 .ui-table-caption {
28 border: none !important; 28 border: none !important;
29 background-color: var(--mainBackgroundColor) !important; 29 background-color: pvar(--mainBackgroundColor) !important;
30 30
31 .caption { 31 .caption {
32 height: 40px; 32 height: 40px;
@@ -41,14 +41,14 @@ p-table {
41 } 41 }
42 42
43 th { 43 th {
44 background-color: var(--mainBackgroundColor) !important; 44 background-color: pvar(--mainBackgroundColor) !important;
45 outline: 0; 45 outline: 0;
46 } 46 }
47 47
48 td, th { 48 td, th {
49 font-family: $main-fonts; 49 font-family: $main-fonts;
50 font-size: 15px !important; 50 font-size: 15px !important;
51 color: var(--mainForegroundColor) !important; 51 color: pvar(--mainForegroundColor) !important;
52 } 52 }
53 53
54 td { 54 td {
@@ -63,14 +63,14 @@ p-table {
63 63
64 tr { 64 tr {
65 outline: 0; 65 outline: 0;
66 background-color: var(--mainBackgroundColor) !important; 66 background-color: pvar(--mainBackgroundColor) !important;
67 height: 46px; 67 height: 46px;
68 68
69 &.ui-state-highlight { 69 &.ui-state-highlight {
70 background-color: var(--submenuColor) !important; 70 background-color: pvar(--submenuColor) !important;
71 71
72 td, td > a { 72 td, td > a {
73 color: var(--mainForegroundColor) !important; 73 color: pvar(--mainForegroundColor) !important;
74 } 74 }
75 } 75 }
76 } 76 }
@@ -78,7 +78,7 @@ p-table {
78 .ui-table-tbody { 78 .ui-table-tbody {
79 tr { 79 tr {
80 &:hover { 80 &:hover {
81 background-color: var(--submenuColor) !important; 81 background-color: pvar(--submenuColor) !important;
82 82
83 .action-cell { 83 .action-cell {
84 .dropdown-root, 84 .dropdown-root,
@@ -113,16 +113,16 @@ p-table {
113 th { 113 th {
114 border: none !important; 114 border: none !important;
115 border-bottom: 1px solid !important; 115 border-bottom: 1px solid !important;
116 border-color: var(--submenuColor) !important; 116 border-color: pvar(--submenuColor) !important;
117 text-align: left !important; 117 text-align: left !important;
118 padding: 5px 0 5px 15px !important; 118 padding: 5px 0 5px 15px !important;
119 font-weight: $font-semibold !important; 119 font-weight: $font-semibold !important;
120 color: var(--mainForegroundColor) !important; 120 color: pvar(--mainForegroundColor) !important;
121 121
122 &.ui-sortable-column:hover { 122 &.ui-sortable-column:hover {
123 background-color: var(--submenuColor) !important; 123 background-color: pvar(--submenuColor) !important;
124 border: 1px solid !important; 124 border: 1px solid !important;
125 border-color: var(--submenuColor) !important; 125 border-color: pvar(--submenuColor) !important;
126 border-width: 0 1px !important; 126 border-width: 0 1px !important;
127 127
128 &:first-child { 128 &:first-child {
@@ -131,7 +131,7 @@ p-table {
131 } 131 }
132 132
133 &.ui-state-highlight { 133 &.ui-state-highlight {
134 background-color: var(--submenuColor) !important; 134 background-color: pvar(--submenuColor) !important;
135 135
136 .pi { 136 .pi {
137 @extend .glyphicon; 137 @extend .glyphicon;
@@ -143,13 +143,13 @@ p-table {
143 &.pi-sort-amount-up-alt { 143 &.pi-sort-amount-up-alt {
144 @extend .glyphicon-triangle-top; 144 @extend .glyphicon-triangle-top;
145 145
146 color: var(--mainForegroundColor) !important; 146 color: pvar(--mainForegroundColor) !important;
147 } 147 }
148 148
149 &.pi-sort-amount-down { 149 &.pi-sort-amount-down {
150 @extend .glyphicon-triangle-bottom; 150 @extend .glyphicon-triangle-bottom;
151 151
152 color: var(--mainForegroundColor) !important; 152 color: pvar(--mainForegroundColor) !important;
153 } 153 }
154 } 154 }
155 } 155 }
@@ -184,11 +184,11 @@ p-table {
184 184
185 p-paginator { 185 p-paginator {
186 .ui-paginator-bottom { 186 .ui-paginator-bottom {
187 background-color: var(--mainBackgroundColor) !important; 187 background-color: pvar(--mainBackgroundColor) !important;
188 position: relative; 188 position: relative;
189 border: none; 189 border: none;
190 border-top: 1px solid !important; 190 border-top: 1px solid !important;
191 border-color: var(--submenuColor) !important; 191 border-color: pvar(--submenuColor) !important;
192 height: 40px; 192 height: 40px;
193 display: flex; 193 display: flex;
194 justify-content: center; 194 justify-content: center;
@@ -200,18 +200,18 @@ p-table {
200 left: 0; 200 left: 0;
201 201
202 &.ui-state-focus { 202 &.ui-state-focus {
203 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 203 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
204 } 204 }
205 205
206 .ui-dropdown-label { 206 .ui-dropdown-label {
207 color: var(--inputPlaceholderColor); 207 color: pvar(--inputPlaceholderColor);
208 } 208 }
209 } 209 }
210 210
211 .ui-paginator-current { 211 .ui-paginator-current {
212 position: absolute; 212 position: absolute;
213 right: 0; 213 right: 0;
214 color: var(--inputPlaceholderColor); 214 color: pvar(--inputPlaceholderColor);
215 } 215 }
216 216
217 .ui-paginator-first, 217 .ui-paginator-first,
@@ -227,7 +227,7 @@ p-table {
227 227
228 &.focus-within, 228 &.focus-within,
229 &:focus { 229 &:focus {
230 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 230 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
231 } 231 }
232 232
233 &.ui-state-disabled:hover { 233 &.ui-state-disabled:hover {
@@ -261,12 +261,12 @@ p-table {
261 .ui-paginator-page { 261 .ui-paginator-page {
262 &.focus-within, 262 &.focus-within,
263 &:focus { 263 &:focus {
264 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; 264 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
265 } 265 }
266 } 266 }
267 267
268 a { 268 a {
269 color: var(--mainForegroundColor) !important; 269 color: pvar(--mainForegroundColor) !important;
270 font-weight: $font-semibold !important; 270 font-weight: $font-semibold !important;
271 margin: 0 5px !important; 271 margin: 0 5px !important;
272 outline: 0 !important; 272 outline: 0 !important;
@@ -278,7 +278,7 @@ p-table {
278 &.ui-state-active { 278 &.ui-state-active {
279 &, &:hover, &:active, &:focus { 279 &, &:hover, &:active, &:focus {
280 color: #fff !important; 280 color: #fff !important;
281 background-color: var(--mainColor) !important; 281 background-color: pvar(--mainColor) !important;
282 } 282 }
283 } 283 }
284 } 284 }
@@ -328,7 +328,7 @@ p-multiselect {
328 328
329 &:focus, 329 &:focus,
330 &.ui-state-focus { 330 &.ui-state-focus {
331 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 331 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
332 } 332 }
333 } 333 }
334 } 334 }
@@ -368,11 +368,11 @@ p-multiselect {
368 } 368 }
369 369
370 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight { 370 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
371 background-color: var(--mainColorLighter); 371 background-color: pvar(--mainColorLighter);
372 } 372 }
373 373
374 .ui-inputtext:enabled:focus:not(.ui-state-error) { 374 .ui-inputtext:enabled:focus:not(.ui-state-error) {
375 border-color: var(--mainColorLighter) !important; 375 border-color: pvar(--mainColorLighter) !important;
376 box-shadow: none; 376 box-shadow: none;
377 } 377 }
378} 378}
@@ -445,8 +445,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
445 445
446 .ui-chkbox-box { 446 .ui-chkbox-box {
447 &.ui-state-active { 447 &.ui-state-active {
448 border-color: var(--mainColor) !important; 448 border-color: pvar(--mainColor) !important;
449 background-color: var(--mainColor) !important; 449 background-color: pvar(--mainColor) !important;
450 } 450 }
451 451
452 .ui-chkbox-icon { 452 .ui-chkbox-icon {
@@ -462,8 +462,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
462 height: 12px; 462 height: 12px;
463 opacity: 0; 463 opacity: 0;
464 transform: rotate(45deg) scale(0); 464 transform: rotate(45deg) scale(0);
465 border-right: 2px solid var(--mainBackgroundColor); 465 border-right: 2px solid pvar(--mainBackgroundColor);
466 border-bottom: 2px solid var(--mainBackgroundColor); 466 border-bottom: 2px solid pvar(--mainBackgroundColor);
467 } 467 }
468 468
469 &.pi-check:after { 469 &.pi-check:after {
@@ -478,7 +478,7 @@ p-inputswitch {
478 height: 26px; 478 height: 26px;
479 479
480 .ui-inputswitch-checked .ui-inputswitch-slider { 480 .ui-inputswitch-checked .ui-inputswitch-slider {
481 background-color: var(--mainColor) !important; 481 background-color: pvar(--mainColor) !important;
482 } 482 }
483 483
484 &.small { 484 &.small {
@@ -520,8 +520,8 @@ p-toast {
520 520
521 .ui-toast-message { 521 .ui-toast-message {
522 font-family: $main-fonts; 522 font-family: $main-fonts;
523 background-color: var(--mainBackgroundColor) !important; 523 background-color: pvar(--mainBackgroundColor) !important;
524 color: var(--mainForegroundColor) !important; 524 color: pvar(--mainForegroundColor) !important;
525 border-radius: 5px; 525 border-radius: 5px;
526 box-sizing: border-box; 526 box-sizing: border-box;
527 border: 1px solid #EBEEF5 !important; 527 border: 1px solid #EBEEF5 !important;
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-11 15:14:34 +0000