]>
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 | ||
7c1f3e73 C |
9 | h4, |
10 | .fake-element { | |
11 | flex: 1; | |
12 | } | |
13 | ||
bf64ed41 RK |
14 | input[type=text] { |
15 | @include peertube-input-text(300px); | |
16 | } | |
17 | } | |
18 | ||
693263e9 C |
19 | .action-button-delete-selection { |
20 | display: inline-block; | |
ce0e281d | 21 | |
693263e9 C |
22 | @include peertube-button; |
23 | @include orange-button; | |
24 | @include button-with-icon(21px); | |
ce0e281d | 25 | |
693263e9 C |
26 | my-global-icon { |
27 | @include apply-svg-color(#fff); | |
b2731bff | 28 | } |
d2cc03aa | 29 | } |
9b7d1c72 | 30 | |
31174a27 | 31 | ::ng-deep { |
8a3183e5 K |
32 | .video { |
33 | flex-wrap: wrap; | |
34 | } | |
35 | ||
31174a27 RK |
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 | ||
8a3183e5 K |
57 | .action-button { |
58 | display: flex; | |
59 | margin-left: 55px; | |
60 | margin-top: 10px; | |
61 | align-self: flex-end; | |
62 | } | |
63 | ||
693263e9 C |
64 | my-delete-button, |
65 | my-edit-button { | |
66 | margin-right: 10px; | |
9b7d1c72 | 67 | } |
4682468d K |
68 | |
69 | @media screen and (max-width: $small-view) { | |
70 | .videos-header { | |
71 | flex-direction: column; | |
72 | } | |
73 | ||
8a3183e5 K |
74 | .action-button { |
75 | flex-direction: column; | |
76 | align-self: center; | |
77 | margin-left: 0px; | |
78 | } | |
79 | ||
4682468d K |
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 | } | |
8a3183e5 K |
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 | } |