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