2 @use '_variables' as *;
4 @use './_player-variables' as *;
6 .video-js.vjs-peertube-skin {
11 @include padding-right(60px);
13 transition: opacity 0.1s;
24 padding: $dock-padding;
25 background: linear-gradient(to bottom, rgba(20, 20, 20, .7) 0, rgba(20, 20, 20, 0));
28 .peertube-dock-avatar {
31 min-width: var(--avatarSize);
32 min-height: var(--avatarSize);
33 max-height: var(--avatarSize);
34 max-height: var(--avatarSize);
37 .peertube-dock-title-description {
42 .peertube-dock-title {
43 font-weight: $font-semibold;
50 .peertube-dock-description {
53 text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
56 .peertube-dock-title + .peertube-dock-description {
60 .peertube-dock-description {
65 @include margin-right(4px);
69 @include margin-left(4px);
70 transform: scale(-1, 1);
74 @media screen and (max-width: $screen-width-750) {
75 .peertube-dock-avatar {
83 .peertube-dock-description {
88 @media screen and (max-width: $screen-width-570) {
89 .peertube-dock-avatar {
98 @media screen and (max-width: $screen-width-350) {
99 .peertube-dock-avatar {
108 &.vjs-playing.vjs-user-inactive .peertube-dock {
110 transition: opacity 1s;