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