]>
Commit | Line | Data |
---|---|---|
1 | @use 'sass:math'; | |
2 | @use '_variables' as *; | |
3 | @use '_mixins' as *; | |
4 | @use './_player-variables' as *; | |
5 | ||
6 | .video-js.vjs-peertube-skin { | |
7 | ||
8 | .peertube-dock { | |
9 | --avatarSize: 48px; | |
10 | ||
11 | @include padding-right(60px); | |
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; | |
24 | padding: $dock-padding; | |
25 | background: linear-gradient(to bottom, rgba(20, 20, 20, .7) 0, rgba(20, 20, 20, 0)); | |
26 | } | |
27 | ||
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 { | |
43 | font-weight: $font-semibold; | |
44 | letter-spacing: 1px; | |
45 | line-height: normal; | |
46 | min-width: 0; | |
47 | } | |
48 | ||
49 | .peertube-dock-title, | |
50 | .peertube-dock-description { | |
51 | @include ellipsis; | |
52 | ||
53 | text-shadow: 0 1px 3px rgba(0, 0, 0, .5); | |
54 | } | |
55 | ||
56 | .peertube-dock-title + .peertube-dock-description { | |
57 | margin-top: 3px; | |
58 | } | |
59 | ||
60 | .peertube-dock-description { | |
61 | font-size: 11px; | |
62 | line-height: 1.5; | |
63 | ||
64 | .text::before { | |
65 | @include margin-right(4px); | |
66 | } | |
67 | ||
68 | .text::after { | |
69 | @include margin-left(4px); | |
70 | transform: scale(-1, 1); | |
71 | } | |
72 | } | |
73 | ||
74 | @media screen and (max-width: $screen-width-750) { | |
75 | .peertube-dock-avatar { | |
76 | --avatarSize: 40px; | |
77 | } | |
78 | ||
79 | .peertube-dock { | |
80 | font-size: 16px; | |
81 | } | |
82 | ||
83 | .peertube-dock-description { | |
84 | font-size: 9px; | |
85 | } | |
86 | } | |
87 | ||
88 | @media screen and (max-width: $screen-width-570) { | |
89 | .peertube-dock-avatar { | |
90 | --avatarSize: 35px; | |
91 | } | |
92 | ||
93 | .peertube-dock { | |
94 | font-size: 14px; | |
95 | } | |
96 | } | |
97 | ||
98 | @media screen and (max-width: $screen-width-350) { | |
99 | .peertube-dock-avatar { | |
100 | --avatarSize: 30px; | |
101 | } | |
102 | ||
103 | .peertube-dock { | |
104 | font-size: 13px; | |
105 | } | |
106 | } | |
107 | ||
108 | &.vjs-playing.vjs-user-inactive .peertube-dock { | |
109 | opacity: 0; | |
110 | transition: opacity 1s; | |
111 | } | |
112 | } |