diff options
Diffstat (limited to 'client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss new file mode 100644 index 000000000..afd775b25 --- /dev/null +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss | |||
@@ -0,0 +1,224 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | @import '_miniature'; | ||
4 | |||
5 | $thumbnail-width: 130px; | ||
6 | $thumbnail-height: 72px; | ||
7 | |||
8 | my-video-thumbnail { | ||
9 | @include thumbnail-size-component($thumbnail-width, $thumbnail-height); | ||
10 | } | ||
11 | |||
12 | .fake-thumbnail { | ||
13 | width: $thumbnail-width; | ||
14 | height: $thumbnail-height; | ||
15 | background-color: #ececec; | ||
16 | } | ||
17 | |||
18 | my-video-thumbnail, | ||
19 | .fake-thumbnail { | ||
20 | display: flex; // Avoids an issue with line-height that adds space below the element | ||
21 | margin-right: 10px; | ||
22 | } | ||
23 | |||
24 | .video { | ||
25 | display: flex; | ||
26 | align-items: center; | ||
27 | background-color: pvar(--mainBackgroundColor); | ||
28 | padding: 10px; | ||
29 | border-bottom: 1px solid $separator-border-color; | ||
30 | |||
31 | &:hover { | ||
32 | background-color: rgba(0, 0, 0, 0.05); | ||
33 | |||
34 | .more { | ||
35 | opacity: 1; | ||
36 | } | ||
37 | } | ||
38 | |||
39 | @media not all and (hover: hover) and (pointer: fine) { | ||
40 | .more { | ||
41 | opacity: 1 !important; | ||
42 | } | ||
43 | } | ||
44 | |||
45 | &.playing { | ||
46 | background-color: rgba(0, 0, 0, 0.02); | ||
47 | } | ||
48 | |||
49 | a { | ||
50 | @include disable-default-a-behaviour; | ||
51 | |||
52 | color: pvar(--mainForegroundColor); | ||
53 | display: flex; | ||
54 | min-width: 0; | ||
55 | align-items: center; | ||
56 | cursor: pointer; | ||
57 | |||
58 | .position { | ||
59 | font-weight: $font-semibold; | ||
60 | margin-right: 10px; | ||
61 | color: pvar(--greyForegroundColor); | ||
62 | min-width: 25px; | ||
63 | |||
64 | my-global-icon { | ||
65 | @include apply-svg-color(pvar(--greyForegroundColor)); | ||
66 | |||
67 | width: 17px; | ||
68 | position: relative; | ||
69 | left: -2px; | ||
70 | } | ||
71 | } | ||
72 | |||
73 | .video-info { | ||
74 | display: flex; | ||
75 | flex-direction: column; | ||
76 | align-self: flex-start; | ||
77 | min-width: 0; | ||
78 | |||
79 | a { | ||
80 | width: auto; | ||
81 | } | ||
82 | |||
83 | .video-info-account, .video-info-timestamp { | ||
84 | color: pvar(--greyForegroundColor); | ||
85 | } | ||
86 | } | ||
87 | } | ||
88 | |||
89 | .video-info-name { | ||
90 | font-size: 18px; | ||
91 | font-weight: $font-semibold; | ||
92 | display: inline-block; | ||
93 | |||
94 | @include ellipsis; | ||
95 | } | ||
96 | |||
97 | .more, my-edit-button { | ||
98 | justify-self: flex-end; | ||
99 | margin-left: auto; | ||
100 | cursor: pointer; | ||
101 | min-width: 24px; | ||
102 | } | ||
103 | |||
104 | .more { | ||
105 | opacity: 0; | ||
106 | |||
107 | &.show { | ||
108 | opacity: 1; | ||
109 | } | ||
110 | |||
111 | .icon-more { | ||
112 | @include apply-svg-color(pvar(--greyForegroundColor)); | ||
113 | |||
114 | display: flex; | ||
115 | |||
116 | &::after { | ||
117 | border: none; | ||
118 | } | ||
119 | } | ||
120 | |||
121 | .dropdown-item { | ||
122 | @include dropdown-with-icon-item; | ||
123 | } | ||
124 | |||
125 | .timestamp-options { | ||
126 | padding-top: 0; | ||
127 | padding-left: 35px; | ||
128 | margin-bottom: 15px; | ||
129 | |||
130 | > div { | ||
131 | display: flex; | ||
132 | align-items: center; | ||
133 | } | ||
134 | |||
135 | input { | ||
136 | @include peertube-button; | ||
137 | @include orange-button; | ||
138 | |||
139 | margin-top: 10px; | ||
140 | } | ||
141 | } | ||
142 | } | ||
143 | } | ||
144 | |||
145 | @mixin more-dropdown-control { | ||
146 | .video { | ||
147 | my-edit-button { | ||
148 | display: none; | ||
149 | |||
150 | + .more { | ||
151 | display: inline-flex; | ||
152 | } | ||
153 | } | ||
154 | } | ||
155 | } | ||
156 | |||
157 | @mixin edit-button-control { | ||
158 | .video { | ||
159 | my-edit-button { | ||
160 | display: none; | ||
161 | } | ||
162 | |||
163 | &.playing { | ||
164 | my-edit-button { | ||
165 | display: inline-flex; | ||
166 | height: max-content; | ||
167 | } | ||
168 | } | ||
169 | |||
170 | my-edit-button + .more { | ||
171 | display: none; | ||
172 | } | ||
173 | } | ||
174 | } | ||
175 | |||
176 | @mixin edit-button-in-mobile-view { | ||
177 | .video { | ||
178 | my-edit-button { | ||
179 | ::ng-deep .action-button-edit { | ||
180 | padding: 0 13px; | ||
181 | |||
182 | .button-label { | ||
183 | display: none; | ||
184 | } | ||
185 | } | ||
186 | } | ||
187 | } | ||
188 | } | ||
189 | |||
190 | @media screen and (min-width: $small-view) { | ||
191 | :host-context(.expanded) { | ||
192 | @include more-dropdown-control(); | ||
193 | } | ||
194 | } | ||
195 | |||
196 | @media screen and (max-width: $small-view) { | ||
197 | :host-context(.expanded) { | ||
198 | @include edit-button-control(); | ||
199 | } | ||
200 | } | ||
201 | |||
202 | @media screen and (max-width: $mobile-view) { | ||
203 | :host-context(.expanded) { | ||
204 | @include edit-button-in-mobile-view(); | ||
205 | } | ||
206 | } | ||
207 | |||
208 | @media screen and (min-width: #{$small-view + $menu-width}) { | ||
209 | :host-context(.main-col:not(.expanded)) { | ||
210 | @include more-dropdown-control(); | ||
211 | } | ||
212 | } | ||
213 | |||
214 | @media screen and (max-width: #{$small-view + $menu-width}) { | ||
215 | :host-context(.main-col:not(.expanded)) { | ||
216 | @include edit-button-control(); | ||
217 | } | ||
218 | } | ||
219 | |||
220 | @media screen and (max-width: #{$mobile-view + $menu-width}) { | ||
221 | :host-context(.main-col:not(.expanded)) { | ||
222 | @include edit-button-in-mobile-view(); | ||
223 | } | ||
224 | } | ||