aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-15 13:43:50 +0200
committerChocobozzz <me@florianbigard.com>2021-04-15 13:43:50 +0200
commitf1ac63488c0050fec1c4d713d74db4f4ea944395 (patch)
treefbb3a33152bef18bac501c1a4c3f46ae9b586bb6
parentfe88ca697d4c43b24cdc2462f5e4e83548776a51 (diff)
downloadPeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.gz
PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.zst
PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.zip
Refactor menu css
-rw-r--r--client/src/app/+login/login.component.scss13
-rw-r--r--client/src/app/header/search-typeahead.component.scss3
-rw-r--r--client/src/app/menu/menu.component.html39
-rw-r--r--client/src/app/menu/menu.component.scss225
-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
7 files changed, 194 insertions, 234 deletions
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index f605cbb7a..eddaff542 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -21,13 +21,6 @@ input[type=email] {
21 } 21 }
22} 22}
23 23
24.modal-footer.inputs {
25 .action-button.action-button-cancel {
26 width: auto !important;
27 display: inline-block;
28 }
29}
30
31@media screen and (max-width: #{map-get($container-max-widths, sm)}) { 24@media screen and (max-width: #{map-get($container-max-widths, sm)}) {
32 .modal-body { 25 .modal-body {
33 #forgot-password-email { 26 #forgot-password-email {
@@ -35,10 +28,8 @@ input[type=email] {
35 } 28 }
36 } 29 }
37 30
38 .modal-footer.inputs { 31 .modal-footer .grey-button {
39 .action-button.action-button-cancel { 32 display: none;
40 display: none;
41 }
42 } 33 }
43} 34}
44 35
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index a60aa38d6..c754a99d1 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -5,6 +5,7 @@
5 5
6#search-video { 6#search-video {
7 @include peertube-input-text($search-input-width); 7 @include peertube-input-text($search-input-width);
8
8 padding-left: 10px; 9 padding-left: 10px;
9 padding-right: 40px; // For the search icon 10 padding-right: 40px; // For the search icon
10 font-size: 14px; 11 font-size: 14px;
@@ -14,7 +15,7 @@
14 } 15 }
15} 16}
16 17
17.icon.icon-search { 18.icon-search {
18 @include icon(25px); 19 @include icon(25px);
19 height: 18px; 20 height: 18px;
20 21
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index a0777660f..df5c7971d 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -40,9 +40,10 @@
40 40
41 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings" 41 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
42 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy 42 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
43 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"> 43 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"
44 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon> 44 >
45 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon> 45 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
46 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
46 <span i18n>Sensitive:</span> 47 <span i18n>Sensitive:</span>
47 <span class="ml-auto text-muted">{{ nsfwPolicy }}</span> 48 <span class="ml-auto text-muted">{{ nsfwPolicy }}</span>
48 </a> 49 </a>
@@ -72,17 +73,17 @@
72 </div> 73 </div>
73 74
74 <div class="logged-in-menu"> 75 <div class="logged-in-menu">
75 <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)"> 76 <a class="menu-link" routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)">
76 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> 77 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
77 <ng-container i18n>My account</ng-container> 78 <ng-container i18n>My account</ng-container>
78 </a> 79 </a>
79 80
80 <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)"> 81 <a class="menu-link" routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
81 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> 82 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
82 <ng-container i18n>My library</ng-container> 83 <ng-container i18n>My library</ng-container>
83 </a> 84 </a>
84 85
85 <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active"> 86 <a class="menu-link" *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
86 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> 87 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
87 <ng-container i18n>Administration</ng-container> 88 <ng-container i18n>Administration</ng-container>
88 </a> 89 </a>
@@ -90,29 +91,29 @@
90 </div> 91 </div>
91 92
92 <div *ngIf="!isLoggedIn" class="login-buttons-block"> 93 <div *ngIf="!isLoggedIn" class="login-buttons-block">
93 <a i18n routerLink="/login" class="login-button">Login</a> 94 <a i18n routerLink="/login" class="peertube-button-link orange-button">Login</a>
94 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a> 95 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link">Create an account</a>
95 </div> 96 </div>
96 97
97 <div *ngIf="isLoggedIn" class="in-my-library"> 98 <div *ngIf="isLoggedIn" class="in-my-library">
98 <div i18n class="block-title">IN MY LIBRARY</div> 99 <div i18n class="block-title">IN MY LIBRARY</div>
99 100
100 <a *ngIf="user.canSeeVideosLink" routerLink="/my-library/videos" routerLinkActive="active"> 101 <a *ngIf="user.canSeeVideosLink" class="menu-link" routerLink="/my-library/videos" routerLinkActive="active">
101 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> 102 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
102 <ng-container i18n>Videos</ng-container> 103 <ng-container i18n>Videos</ng-container>
103 </a> 104 </a>
104 105
105 <a routerLink="/my-library/video-playlists" routerLinkActive="active"> 106 <a class="menu-link" routerLink="/my-library/video-playlists" routerLinkActive="active">
106 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> 107 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
107 <ng-container i18n>Playlists</ng-container> 108 <ng-container i18n>Playlists</ng-container>
108 </a> 109 </a>
109 110
110 <a routerLink="/videos/subscriptions" routerLinkActive="active"> 111 <a class="menu-link" routerLink="/videos/subscriptions" routerLinkActive="active">
111 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> 112 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
112 <ng-container i18n>Subscriptions</ng-container> 113 <ng-container i18n>Subscriptions</ng-container>
113 </a> 114 </a>
114 115
115 <a routerLink="/my-library/history/videos" routerLinkActive="active"> 116 <a class="menu-link" routerLink="/my-library/history/videos" routerLinkActive="active">
116 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon> 117 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
117 <ng-container i18n>History</ng-container> 118 <ng-container i18n>History</ng-container>
118 </a> 119 </a>
@@ -122,22 +123,22 @@
122 <div class="on-instance"> 123 <div class="on-instance">
123 <div i18n class="block-title">ON {{instanceName}}</div> 124 <div i18n class="block-title">ON {{instanceName}}</div>
124 125
125 <a routerLink="/videos/overview" routerLinkActive="active"> 126 <a class="menu-link" routerLink="/videos/overview" routerLinkActive="active">
126 <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon> 127 <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
127 <ng-container i18n>Discover</ng-container> 128 <ng-container i18n>Discover</ng-container>
128 </a> 129 </a>
129 130
130 <a routerLink="/videos/trending" routerLinkActive="active"> 131 <a class="menu-link" routerLink="/videos/trending" routerLinkActive="active">
131 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon> 132 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
132 <ng-container i18n>Trending</ng-container> 133 <ng-container i18n>Trending</ng-container>
133 </a> 134 </a>
134 135
135 <a routerLink="/videos/recently-added" routerLinkActive="active"> 136 <a class="menu-link" routerLink="/videos/recently-added" routerLinkActive="active">
136 <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon> 137 <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon>
137 <ng-container i18n>Recently added</ng-container> 138 <ng-container i18n>Recently added</ng-container>
138 </a> 139 </a>
139 140
140 <a routerLink="/videos/local" routerLinkActive="active"> 141 <a class="menu-link" routerLink="/videos/local" routerLinkActive="active">
141 <my-global-icon iconName="home" aria-hidden="true"></my-global-icon> 142 <my-global-icon iconName="home" aria-hidden="true"></my-global-icon>
142 <ng-container i18n>Local videos</ng-container> 143 <ng-container i18n>Local videos</ng-container>
143 </a> 144 </a>
@@ -146,18 +147,18 @@
146 147
147 <div class="footer"> 148 <div class="footer">
148 <div class="footer-block"> 149 <div class="footer-block">
149 <a *ngIf="!isLoggedIn" (click)="openQuickSettings()"> 150 <a *ngIf="!isLoggedIn" class="menu-link" (click)="openQuickSettings()">
150 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> 151 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
151 <ng-container i18n>My settings</ng-container> 152 <ng-container i18n>My settings</ng-container>
152 </a> 153 </a>
153 154
154 <a routerLink="/about" routerLinkActive="active"> 155 <a class="menu-link" routerLink="/about" routerLinkActive="active">
155 <my-global-icon iconName="help" aria-hidden="true"></my-global-icon> 156 <my-global-icon iconName="help" aria-hidden="true"></my-global-icon>
156 <ng-container i18n>About</ng-container> 157 <ng-container i18n>About</ng-container>
157 </a> 158 </a>
158 </div> 159 </div>
159 160
160 <div class="bottom-links"> 161 <div class="footer-bottom">
161 162
162 <div class="footer-links"> 163 <div class="footer-links">
163 <div *ngIf="isLoggedIn === false"> 164 <div *ngIf="isLoggedIn === false">
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 729dbc6ee..00d1a1f69 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -5,7 +5,9 @@ $menu-link-icon-size: 22px;
5$menu-link-icon-margin-right: 18px; 5$menu-link-icon-margin-right: 18px;
6$footer-links-base-opacity: .8; 6$footer-links-base-opacity: .8;
7 7
8@mixin menu-link { 8.menu-link {
9 @include disable-default-a-behaviour;
10
9 display: flex; 11 display: flex;
10 align-items: center; 12 align-items: center;
11 padding-left: $menu-lateral-padding; 13 padding-left: $menu-lateral-padding;
@@ -91,32 +93,15 @@ menu {
91 display: flex; 93 display: flex;
92 align-items: center; 94 align-items: center;
93 justify-content: left; 95 justify-content: left;
94
95 my-notification {
96 margin-left: auto;
97 margin-right: 15px;
98 }
99 } 96 }
100} 97}
101 98
102.logged-in-more { 99my-notification {
103 $main-radius: 25px; 100 margin-left: auto;
104 101 margin-right: 15px;
105 flex: 1; 102}
106 margin-left: 13px;
107 border-radius: $main-radius;
108 transition: all .1s ease-in-out;
109 cursor: pointer;
110
111 *, & {
112 line-height: 1;
113 }
114
115 &.show {
116 background-color: rgba(255, 255, 255, 0.20);
117 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
118 }
119 103
104.logged-in-more {
120 @mixin display-hints($is-mobile: false) { 105 @mixin display-hints($is-mobile: false) {
121 background-color: rgba(255, 255, 255, 0.15); 106 background-color: rgba(255, 255, 255, 0.15);
122 107
@@ -130,6 +115,20 @@ menu {
130 } 115 }
131 } 116 }
132 117
118 $main-radius: 25px;
119
120 flex: 1;
121 margin-left: 13px;
122 border-radius: $main-radius;
123 transition: all .1s ease-in-out;
124 cursor: pointer;
125 line-height: 1;
126
127 &.show {
128 background-color: rgba(255, 255, 255, 0.20);
129 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
130 }
131
133 &:hover { 132 &:hover {
134 @include display-hints; 133 @include display-hints;
135 } 134 }
@@ -140,13 +139,14 @@ menu {
140 139
141 /* fill space when on mobile */ 140 /* fill space when on mobile */
142 max-width: calc(100% - 80px); 141 max-width: calc(100% - 80px);
142
143 .dropdown-toggle { 143 .dropdown-toggle {
144 max-width: 100%; 144 max-width: 100%;
145 } 145 }
146
146 .logged-in-info { 147 .logged-in-info {
147 max-width: calc(100% - 45px) !important; 148 max-width: calc(100% - 45px) !important;
148 } 149 }
149
150 } 150 }
151 151
152 .dropdown-toggle-indicator { 152 .dropdown-toggle-indicator {
@@ -175,35 +175,35 @@ menu {
175 padding: 5px 7px; 175 padding: 5px 7px;
176 border-radius: $main-radius; 176 border-radius: $main-radius;
177 } 177 }
178}
178 179
179 my-account-avatar { 180my-account-avatar {
180 margin-right: 10px; 181 margin-right: 10px;
181 }
182} 182}
183 183
184.logged-in-info { 184.logged-in-info {
185 max-width: 105px; 185 max-width: 105px;
186 186
187 flex-grow: 1; 187 flex-grow: 1;
188}
188 189
189 .logged-in-display-name, 190.logged-in-display-name,
190 .logged-in-username { 191.logged-in-username {
191 @include ellipsis; 192 @include ellipsis;
192 } 193}
193 194
194 .logged-in-display-name { 195.logged-in-display-name {
195 font-size: 16px; 196 font-size: 16px;
196 font-weight: $font-semibold; 197 font-weight: $font-semibold;
197 color: pvar(--menuForegroundColor); 198 color: pvar(--menuForegroundColor);
198 199
199 @include disable-default-a-behaviour; 200 @include disable-default-a-behaviour;
200 } 201}
201 202
202 .logged-in-username { 203.logged-in-username {
203 font-size: 13px; 204 font-size: 13px;
204 color: #C6C6C6; 205 color: #C6C6C6;
205 margin-top: 3px; 206 margin-top: 3px;
206 }
207} 207}
208 208
209.logged-in-menu { 209.logged-in-menu {
@@ -214,9 +214,6 @@ menu {
214 line-height: $line-height-normal; 214 line-height: $line-height-normal;
215 215
216 a { 216 a {
217 @include menu-link;
218 @include disable-default-a-behaviour;
219
220 $icon-size: 13px; 217 $icon-size: 13px;
221 $additional-margin: ($menu-link-icon-size - $icon-size) / 2; 218 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
222 219
@@ -230,10 +227,6 @@ menu {
230 227
231 // Keep aligned with other icons 228 // Keep aligned with other icons
232 margin-left: $additional-margin; 229 margin-left: $additional-margin;
233
234 &[iconName="channel"] {
235 margin-top: -2px;
236 }
237 } 230 }
238 231
239 &.active, 232 &.active,
@@ -260,27 +253,22 @@ menu {
260.login-buttons-block { 253.login-buttons-block {
261 margin: 30px 25px 35px 25px; 254 margin: 30px 25px 35px 25px;
262 255
263 .login-button { 256 > a {
264 @include peertube-button-link;
265 @include orange-button;
266
267 display: block; 257 display: block;
268 width: 100%; 258 width: 100%;
269 margin-bottom: 10px;
270 }
271 259
272 .create-account-button { 260 :not(:last-child) {
273 @include peertube-button-link; 261 margin-bottom: 10px;
274 262 }
275 display: block; 263 }
276 width: 100%; 264}
277 265
278 color: #fff; 266.create-account-button {
279 background-color: rgba(255, 255, 255, 0.25); 267 color: #fff;
268 background-color: rgba(255, 255, 255, 0.25);
280 269
281 &:hover { 270 &:hover {
282 background-color: rgba(255, 255, 255, 0.28); 271 background-color: rgba(255, 255, 255, 0.28);
283 }
284 } 272 }
285} 273}
286 274
@@ -290,48 +278,30 @@ menu {
290 margin-bottom: 15px; 278 margin-bottom: 15px;
291 279
292 .block-title { 280 .block-title {
281 @include ellipsis;
282
293 text-transform: uppercase; 283 text-transform: uppercase;
294 font-weight: $font-bold; // Bold 284 font-weight: $font-bold; // Bold
295 font-size: 13px; 285 font-size: 13px;
296 margin-bottom: 25px; 286 margin-bottom: 25px;
297 margin-left: 26px; 287 margin-left: 26px;
298
299 @include ellipsis;
300
301 margin-right: 30px; 288 margin-right: 30px;
302 } 289 }
303 290
304 a { 291 a {
305 @include menu-link;
306 @include disable-default-a-behaviour;
307
308 min-height: 40px; 292 min-height: 40px;
309
310 my-global-icon {
311 &[iconName="playlists"] {
312 height: 24px;
313 width: 24px;
314
315 margin-right: 16px;
316 }
317
318 &[iconName="videos"] {
319 position: relative;
320 right: -1px;
321 }
322 }
323 } 293 }
324} 294}
325 295
326.footer { 296.footer {
327 width: $menu-width; 297 width: $menu-width;
328 padding-bottom: 15px; 298 padding-bottom: 15px;
299}
329 300
330 .bottom-links { 301.footer-bottom {
331 display: flex; 302 display: flex;
332 flex-direction: column; 303 flex-direction: column;
333 padding: 0 $menu-lateral-padding; 304 padding: 0 $menu-lateral-padding;
334 }
335} 305}
336 306
337.footer-links { 307.footer-links {
@@ -340,7 +310,8 @@ menu {
340 flex-wrap: wrap; 310 flex-wrap: wrap;
341 } 311 }
342 312
343 a, span[role=button] { 313 a,
314 span[role=button] {
344 display: inline-block; 315 display: inline-block;
345 text-decoration: none; 316 text-decoration: none;
346 color: pvar(--menuForegroundColor); 317 color: pvar(--menuForegroundColor);
@@ -350,22 +321,6 @@ menu {
350 font-weight: 500; 321 font-weight: 500;
351 line-height: 1.4rem; 322 line-height: 1.4rem;
352 margin-right: 8px; 323 margin-right: 8px;
353
354 &.inline-global-icon {
355 display: inline-flex;
356 align-items: center;
357 white-space: nowrap;
358 height: 1.4rem;
359
360 my-global-icon {
361 @include apply-svg-color(pvar(--menuForegroundColor));
362
363 display: flex;
364 width: auto;
365 height: 90%;
366 margin-right: .2rem;
367 }
368 }
369 } 324 }
370} 325}
371 326
@@ -395,32 +350,13 @@ menu {
395 opacity: .4; 350 opacity: .4;
396 } 351 }
397 352
398 my-global-icon {
399 &[iconName="cog"],
400 &[iconName="sign-out"] {
401 position: relative;
402 right: -2px;
403 height: 20px;
404 width: 20px;
405 }
406 }
407
408 my-global-icon.not-displayed {
409 display: none;
410 }
411
412 &:hover { 353 &:hover {
413 my-global-icon.hover-display-toggle.not-displayed { 354 .hover-display-toggle {
414 display: inherit;
415 }
416 my-global-icon.hover-display-toggle {
417 display: none; 355 display: none;
418 } 356 }
419 357
420 &.settings-sensitive { 358 .hover-display-toggle[hidden] {
421 my-global-icon ::ng-deep svg { 359 display: inherit !important;
422 margin-top: 2px !important;
423 }
424 } 360 }
425 } 361 }
426} 362}
@@ -440,7 +376,8 @@ menu {
440 } 376 }
441 } 377 }
442 378
443 .top-menu, .footer { 379 .top-menu,
380 .footer {
444 width: 100% !important; 381 width: 100% !important;
445 } 382 }
446 383
@@ -448,9 +385,35 @@ menu {
448 width: calc(100vw - 30px); 385 width: calc(100vw - 30px);
449 } 386 }
450 387
451 .dropdown-item:hover, .dropdown-item:active { 388 .dropdown-item:hover,
389 .dropdown-item:active {
452 &.settings-sensitive my-global-icon ::ng-deep svg { 390 &.settings-sensitive my-global-icon ::ng-deep svg {
453 margin-top: 0px !important; 391 margin-top: 0px !important;
454 } 392 }
455 } 393 }
456} 394}
395
396my-global-icon {
397 &[iconName="playlists"] {
398 height: 24px;
399 width: 24px;
400
401 margin-right: 16px;
402 }
403
404 &[iconName="videos"] {
405 position: relative;
406 right: -1px;
407 }
408
409 &[iconName="channel"] {
410 margin-top: -2px;
411 }
412
413 &[iconName="sign-out"] {
414 position: relative;
415 right: -2px;
416 height: 20px;
417 width: 20px;
418 }
419}
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