aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player/dock.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-03-08 16:26:30 +0100
committerChocobozzz <me@florianbigard.com>2022-03-08 16:36:08 +0100
commit01dd04cd5ab7b55d2a9af7d0ebf405bee9579b09 (patch)
treeb7096d36dbf9607ae1977685e3088a340902a3f8 /client/src/sass/player/dock.scss
parent383386d8e25b5734f8b7ea7277c1a1a118cc488a (diff)
downloadPeerTube-01dd04cd5ab7b55d2a9af7d0ebf405bee9579b09.tar.gz
PeerTube-01dd04cd5ab7b55d2a9af7d0ebf405bee9579b09.tar.zst
PeerTube-01dd04cd5ab7b55d2a9af7d0ebf405bee9579b09.zip
Display avatar in embed poster
Diffstat (limited to 'client/src/sass/player/dock.scss')
-rw-r--r--client/src/sass/player/dock.scss73
1 files changed, 64 insertions, 9 deletions
diff --git a/client/src/sass/player/dock.scss b/client/src/sass/player/dock.scss
index 4fa1ebd54..4939ea3e5 100644
--- a/client/src/sass/player/dock.scss
+++ b/client/src/sass/player/dock.scss
@@ -4,24 +4,62 @@
4@use './_player-variables' as *; 4@use './_player-variables' as *;
5 5
6.video-js.vjs-peertube-skin { 6.video-js.vjs-peertube-skin {
7 .vjs-dock-text { 7
8 .peertube-dock {
9 --avatarSize: 48px;
10
8 @include padding-right(60px); 11 @include padding-right(60px);
9 12
13 transition: opacity 0.1s;
14
15 display: flex;
16 align-items: center;
17 pointer-events: none;
18 position: absolute;
19 top: 0;
20 left: 0;
21 width: 100%;
22
23 font-size: 23px;
10 padding: $dock-padding; 24 padding: $dock-padding;
11 background: linear-gradient(to bottom, rgba(20, 20, 20, .7) 0, rgba(20, 20, 20, 0)); 25 background: linear-gradient(to bottom, rgba(20, 20, 20, .7) 0, rgba(20, 20, 20, 0));
12 } 26 }
13 27
14 .vjs-dock-title { 28 .peertube-dock-avatar {
29 border-radius: 50%;
30 margin-right: 10px;
31 min-width: var(--avatarSize);
32 min-height: var(--avatarSize);
33 max-height: var(--avatarSize);
34 max-height: var(--avatarSize);
35 }
36
37 .peertube-dock-title-description {
38 // For ellipsis
39 min-width: 0;
40 }
41
42 .peertube-dock-title {
15 font-weight: $font-semibold; 43 font-weight: $font-semibold;
44 letter-spacing: 1px;
45 line-height: normal;
46 min-width: 0;
16 } 47 }
17 48
18 .vjs-dock-title, 49 .peertube-dock-title,
19 .vjs-dock-description { 50 .peertube-dock-description {
51 @include ellipsis;
52
20 text-shadow: 0 1px 3px rgba(0, 0, 0, .5); 53 text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
21 } 54 }
22 55
23 .vjs-dock-description { 56 .peertube-dock-title + .peertube-dock-description {
57 margin-top: 3px;
58 }
59
60 .peertube-dock-description {
24 font-size: 11px; 61 font-size: 11px;
62 line-height: 1.5;
25 63
26 .text::before { 64 .text::before {
27 @include margin-right(4px); 65 @include margin-right(4px);
@@ -34,24 +72,41 @@
34 } 72 }
35 73
36 @media screen and (max-width: $screen-width-750) { 74 @media screen and (max-width: $screen-width-750) {
37 .vjs-dock-text { 75 .peertube-dock-avatar {
76 --avatarSize: 40px;
77 }
78
79 .peertube-dock {
38 font-size: 16px; 80 font-size: 16px;
39 } 81 }
40 82
41 .vjs-dock-description { 83 .peertube-dock-description {
42 font-size: 9px; 84 font-size: 9px;
43 } 85 }
44 } 86 }
45 87
46 @media screen and (max-width: $screen-width-570) { 88 @media screen and (max-width: $screen-width-570) {
47 .vjs-dock-text { 89 .peertube-dock-avatar {
90 --avatarSize: 35px;
91 }
92
93 .peertube-dock {
48 font-size: 14px; 94 font-size: 14px;
49 } 95 }
50 } 96 }
51 97
52 @media screen and (max-width: $screen-width-350) { 98 @media screen and (max-width: $screen-width-350) {
53 .vjs-dock-text { 99 .peertube-dock-avatar {
100 --avatarSize: 30px;
101 }
102
103 .peertube-dock {
54 font-size: 13px; 104 font-size: 13px;
55 } 105 }
56 } 106 }
107
108 &.vjs-playing.vjs-user-inactive {
109 opacity: 0;
110 transition: opacity 1s;
111 }
57} 112}