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