aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared')
-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
23 files changed, 92 insertions, 50 deletions
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 }