]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/shared/shared-video-miniature/video-miniature.component.scss
Square channel avatar consistency
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-miniature / video-miniature.component.scss
1 @import '_variables';
2 @import '_mixins';
3 @import '_miniature';
4
5 $more-button-width: 40px;
6 $more-margin-right: 15px;
7
8 .video-miniature {
9 display: inline-flex;
10 flex-direction: column;
11 padding-bottom: $video-miniature-margin-bottom;
12 vertical-align: top;
13
14 .video-bottom {
15 display: flex;
16
17 .video-miniature-information {
18 width: $video-miniature-width - $more-button-width - $more-margin-right;
19 line-height: normal;
20
21 .avatar {
22 margin: 10px 10px 0 0;
23
24 img:not(.channel) {
25 @include avatar(40px);
26 }
27
28 img.channel {
29 @include channel-avatar(40px);
30 }
31 }
32
33 .video-miniature-name {
34 @include miniature-name;
35 width: calc(100% - #{$more-button-width});
36 }
37
38 .video-miniature-meta {
39 width: calc(100% + #{$more-button-width});
40 overflow: hidden;
41 }
42
43 .video-miniature-created-at-views {
44 display: block;
45 font-size: 13px;
46 }
47
48 .video-miniature-account,
49 .video-miniature-channel {
50 @include disable-default-a-behaviour;
51 @include ellipsis;
52
53 display: block;
54 font-size: 13px;
55 color: pvar(--greyForegroundColor);
56
57 &:hover {
58 color: $grey-foreground-hover-color;
59 }
60 }
61
62 .video-info-privacy,
63 .video-info-blocked .blocked-label,
64 .video-info-nsfw {
65 font-weight: $font-semibold;
66 }
67
68 .video-info-blocked {
69 color: red;
70
71 .blocked-reason::before {
72 content: ' - ';
73 }
74 }
75
76 .video-info-nsfw {
77 color: red;
78 }
79 }
80
81 .video-actions {
82 margin-top: 3px;
83 width: $more-button-width;
84 height: 30px;
85
86 ::ng-deep .dropdown-root:not(.show) {
87 opacity: 0;
88 }
89
90 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
91 opacity: 1;
92 }
93
94 ::ng-deep .more-icon {
95 opacity: .6;
96
97 &:hover {
98 opacity: 1;
99 }
100 }
101 }
102
103 @media screen and (max-width: $small-view) {
104 .video-miniature-information {
105 margin: 0 10px;
106 }
107
108 .video-actions {
109 margin: 0;
110 top: -3px;
111
112 ::ng-deep .dropdown-root {
113 opacity: 1 !important;
114 }
115 }
116 }
117 }
118
119 &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
120 &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
121 opacity: 1;
122 }
123
124 &.fit-width {
125 width: 100%;
126
127 .video-bottom {
128 width: 100% !important;
129
130 .video-miniature-information {
131 width: calc(100% - #{$more-button-width}) !important;
132 }
133 }
134
135 my-video-thumbnail {
136 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
137 }
138 }
139
140 &.display-as-row {
141 flex-direction: row;
142 padding-bottom: 0;
143 height: auto;
144 display: flex;
145 flex-grow: 1;
146
147 my-video-thumbnail {
148 margin-right: 10px;
149 }
150
151 .video-bottom {
152 .video-miniature-information {
153 @media screen and (min-width: $small-view) {
154 width: auto;
155 min-width: 500px;
156 }
157
158 .video-miniature-name {
159 @include ellipsis-multiline(1.3em, 2);
160
161 margin-top: 2px;
162 margin-bottom: 5px;
163 }
164
165 .video-miniature-created-at-views,
166 .video-miniature-account,
167 .video-miniature-channel {
168 font-size: 95%;
169 width: fit-content;
170 }
171
172 .video-miniature-created-at-views + .video-miniature-channel {
173 margin-top: 5px;
174 }
175
176 .video-info-privacy {
177 margin-top: 5px;
178 }
179
180 .video-info-blocked {
181 margin-top: 3px;
182 }
183 }
184
185 .video-actions {
186 margin: 0;
187 top: -3px;
188 }
189 }
190
191 @media screen and (max-width: $small-view) {
192 flex-direction: column;
193 height: auto;
194
195 my-video-thumbnail {
196 margin-right: 0;
197 }
198
199 .video-miniature-information {
200 min-width: initial;
201 }
202 }
203 }
204 }