]>
Commit | Line | Data |
---|---|---|
63c4db6d C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | ||
bf64ed41 RK |
4 | .videos-header { |
5 | display: flex; | |
6 | justify-content: space-between; | |
bf64ed41 RK |
7 | margin: 20px 0 50px; |
8 | ||
9 | input[type=text] { | |
10 | @include peertube-input-text(300px); | |
11 | } | |
12 | } | |
13 | ||
693263e9 C |
14 | .action-button-delete-selection { |
15 | display: inline-block; | |
ce0e281d | 16 | |
693263e9 C |
17 | @include peertube-button; |
18 | @include orange-button; | |
19 | @include button-with-icon(21px); | |
ce0e281d | 20 | |
693263e9 C |
21 | my-global-icon { |
22 | @include apply-svg-color(#fff); | |
b2731bff | 23 | } |
d2cc03aa | 24 | } |
9b7d1c72 | 25 | |
31174a27 | 26 | ::ng-deep { |
8a3183e5 K |
27 | .video { |
28 | flex-wrap: wrap; | |
29 | } | |
30 | ||
31174a27 RK |
31 | .action-button span { |
32 | white-space: nowrap; | |
33 | } | |
34 | ||
35 | .video-miniature { | |
36 | &.display-as-row { | |
37 | // width: min-content !important; | |
38 | width: 100% !important; | |
39 | ||
40 | .video-bottom .video-miniature-information { | |
41 | width: max-content !important; | |
42 | min-width: unset !important; | |
43 | } | |
44 | } | |
45 | ||
46 | .video-bottom { | |
47 | max-width: 350px; | |
48 | } | |
49 | } | |
50 | } | |
51 | ||
8a3183e5 K |
52 | .action-button { |
53 | display: flex; | |
54 | margin-left: 55px; | |
55 | margin-top: 10px; | |
56 | align-self: flex-end; | |
57 | } | |
58 | ||
693263e9 C |
59 | my-delete-button, |
60 | my-edit-button { | |
61 | margin-right: 10px; | |
9b7d1c72 | 62 | } |
4682468d K |
63 | |
64 | @media screen and (max-width: $small-view) { | |
65 | .videos-header { | |
66 | flex-direction: column; | |
67 | } | |
68 | ||
8a3183e5 K |
69 | .action-button { |
70 | flex-direction: column; | |
71 | align-self: center; | |
72 | margin-left: 0px; | |
73 | } | |
74 | ||
4682468d K |
75 | ::ng-deep { |
76 | .video-miniature { | |
77 | align-items: center; | |
78 | ||
79 | .video-bottom, | |
80 | .video-bottom .video-miniature-information { | |
81 | /* same width than a.video-thumbnail */ | |
e66883b3 | 82 | max-width: $video-thumbnail-width !important; |
4682468d K |
83 | } |
84 | } | |
85 | } | |
86 | ||
87 | my-delete-button, | |
88 | my-edit-button { | |
89 | margin-right: 0px; | |
90 | ||
91 | ::ng-deep { | |
92 | span, a { | |
93 | margin-right: 0px; | |
94 | } | |
95 | } | |
96 | } | |
97 | ||
98 | my-delete-button, | |
99 | my-edit-button, | |
100 | my-button { | |
101 | margin-top: 15px; | |
102 | width: 100%; | |
103 | text-align: center; | |
104 | ||
105 | ::ng-deep { | |
106 | .action-button { | |
107 | /* same width than a.video-thumbnail */ | |
e66883b3 | 108 | width: $video-thumbnail-width; |
4682468d K |
109 | } |
110 | } | |
111 | } | |
112 | } | |
8a3183e5 K |
113 | |
114 | // Adapt my-video-miniature on small screens with menu | |
115 | @media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) { | |
116 | :host-context(.main-col:not(.expanded)) { | |
117 | ::ng-deep { | |
118 | .video-miniature { | |
119 | flex-direction: column; | |
120 | ||
121 | .video-miniature-name { | |
e66883b3 | 122 | max-width: $video-thumbnail-width; |
8a3183e5 K |
123 | } |
124 | } | |
125 | } | |
126 | } | |
127 | } |