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/shared-thumbnail/video-thumbnail.component.scss122
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html10
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss16
3 files changed, 76 insertions, 72 deletions
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index 2b723a15a..ea59ab346 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -4,82 +4,82 @@
4 4
5.video-thumbnail { 5.video-thumbnail {
6 @include miniature-thumbnail; 6 @include miniature-thumbnail;
7}
7 8
8 .progress-bar { 9.progress-bar {
9 height: 3px; 10 height: 3px;
10 width: 100%; 11 width: 100%;
11 position: absolute; 12 position: absolute;
12 bottom: 0; 13 bottom: 0;
13 background-color: rgba(0, 0, 0, 0.20); 14 background-color: rgba(0, 0, 0, 0.20);
14 15
15 div { 16 div {
16 height: 100%; 17 height: 100%;
17 background-color: pvar(--mainColor); 18 background-color: pvar(--mainColor);
18 }
19 } 19 }
20}
20 21
21 .video-thumbnail-watch-later-overlay, 22.video-thumbnail-watch-later-overlay,
22 .video-thumbnail-label-overlay, 23.video-thumbnail-label-overlay,
23 .video-thumbnail-duration-overlay, 24.video-thumbnail-duration-overlay,
24 .video-thumbnail-live-overlay { 25.video-thumbnail-live-overlay {
25 @include static-thumbnail-overlay; 26 @include static-thumbnail-overlay;
26 27
27 border-radius: 3px; 28 border-radius: 3px;
28 font-size: 12px; 29 font-size: 12px;
29 font-weight: $font-semibold; 30 font-weight: $font-semibold;
30 line-height: 1.1; 31 line-height: 1.1;
31 z-index: z(miniature); 32 z-index: z(miniature);
32 } 33}
33 34
34 .video-thumbnail-label-overlay { 35.video-thumbnail-label-overlay {
35 position: absolute; 36 position: absolute;
36 padding: 0 5px; 37 padding: 0 5px;
37 left: 5px; 38 left: 5px;
38 top: 5px; 39 top: 5px;
39 font-weight: $font-bold; 40 font-weight: $font-bold;
40 41
41 &.warning { background-color: orange; } 42 &.warning { background-color: orange; }
42 &.danger { background-color: red; } 43 &.danger { background-color: red; }
43 } 44}
44 45
45 .video-thumbnail-duration-overlay, 46.video-thumbnail-duration-overlay,
46 .video-thumbnail-live-overlay { 47.video-thumbnail-live-overlay {
47 position: absolute; 48 position: absolute;
48 padding: 0 3px; 49 padding: 0 3px;
49 right: 5px; 50 right: 5px;
50 bottom: 5px; 51 bottom: 5px;
51 } 52}
52 53
53 .video-thumbnail-live-overlay { 54.video-thumbnail-live-overlay {
54 font-weight: $font-semibold; 55 font-weight: $font-semibold;
55 color: #fff; 56 color: #fff;
56 57
57 &:not(.live-ended) { 58 &:not(.live-ended) {
58 background-color: rgba(224, 8, 8, 0.7); 59 background-color: rgba(224, 8, 8, 0.7);
59 }
60 } 60 }
61}
61 62
62 .video-thumbnail-actions-overlay { 63.video-thumbnail-actions-overlay {
63 position: absolute; 64 position: absolute;
64 display: flex; 65 display: flex;
65 flex-direction: column; 66 flex-direction: column;
66 right: 5px; 67 right: 5px;
67 top: 5px; 68 top: 5px;
68 opacity: 0; 69 opacity: 0;
69 70
70 div:not(:first-child) { 71 div:not(:first-child) {
71 margin-top: 2px; 72 margin-top: 2px;
72 } 73 }
74}
73 75
74 .video-thumbnail-watch-later-overlay { 76.video-thumbnail-watch-later-overlay {
75 padding: 3px; 77 padding: 3px;
76 78
77 my-global-icon { 79 my-global-icon {
78 width: 22px; 80 width: 22px;
79 height: 22px; 81 height: 22px;
80 82
81 @include apply-svg-color(#fff); 83 @include apply-svg-color(#fff);
82 }
83 }
84 } 84 }
85} 85}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 9c11e7609..bc19127aa 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -10,10 +10,14 @@
10 <div class="video-bottom"> 10 <div class="video-bottom">
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <div class="d-flex video-miniature-meta"> 12 <div class="d-flex video-miniature-meta">
13 <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> 13 <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="channel-avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
14 <img [src]="getAvatarUrl()" alt="" class="channel" /> 14 <img [src]="getAvatarUrl()" alt="" />
15 </a> 15 </a>
16 <my-account-avatar *ngIf="displayOptions.avatar && displayOwnerAccount()" [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel" [title]="channelLinkTitle"></my-account-avatar> 16
17 <my-account-avatar
18 *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
19 [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel"
20 ></my-account-avatar>
17 21
18 <div class="w-100 d-flex flex-column"> 22 <div class="w-100 d-flex flex-column">
19 <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name" 23 <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name"
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index bf52b870c..f6f2925f0 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -13,12 +13,12 @@ $more-button-width: 40px;
13} 13}
14 14
15my-account-avatar, 15my-account-avatar,
16.avatar { 16.channel-avatar {
17 margin: 10px 10px 0 0; 17 margin: 10px 10px 0 0;
18}
18 19
19 img.channel { 20.channel-avatar img{
20 @include channel-avatar(40px); 21 @include channel-avatar(40px);
21 }
22} 22}
23 23
24.video-miniature-created-at-views { 24.video-miniature-created-at-views {
@@ -78,9 +78,9 @@ my-account-avatar,
78 } 78 }
79} 79}
80 80
81.video-miniature { 81.video-miniature:hover {
82 &:hover ::ng-deep .video-thumbnail-actions-overlay, 82 ::ng-deep .video-thumbnail-actions-overlay,
83 &:hover .video-actions ::ng-deep .dropdown-root { 83 .video-actions ::ng-deep .dropdown-root {
84 opacity: 1 !important; 84 opacity: 1 !important;
85 } 85 }
86} 86}
@@ -153,7 +153,7 @@ my-account-avatar,
153 } 153 }
154 154
155 // We don't display avatar in row mode 155 // We don't display avatar in row mode
156 .avatar { 156 .channel-avatar {
157 display: none; 157 display: none;
158 } 158 }
159 159