]>
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) { | |
8a3183e5 K |
59 | .action-button { |
60 | flex-direction: column; | |
61 | align-self: center; | |
62 | margin-left: 0px; | |
63 | } | |
64 | ||
4682468d K |
65 | ::ng-deep { |
66 | .video-miniature { | |
67 | align-items: center; | |
68 | ||
69 | .video-bottom, | |
70 | .video-bottom .video-miniature-information { | |
71 | /* same width than a.video-thumbnail */ | |
e66883b3 | 72 | max-width: $video-thumbnail-width !important; |
4682468d K |
73 | } |
74 | } | |
75 | } | |
76 | ||
77 | my-delete-button, | |
78 | my-edit-button { | |
79 | margin-right: 0px; | |
80 | ||
81 | ::ng-deep { | |
82 | span, a { | |
83 | margin-right: 0px; | |
84 | } | |
85 | } | |
86 | } | |
87 | ||
88 | my-delete-button, | |
89 | my-edit-button, | |
90 | my-button { | |
91 | margin-top: 15px; | |
92 | width: 100%; | |
93 | text-align: center; | |
94 | ||
95 | ::ng-deep { | |
96 | .action-button { | |
97 | /* same width than a.video-thumbnail */ | |
e66883b3 | 98 | width: $video-thumbnail-width; |
4682468d K |
99 | } |
100 | } | |
101 | } | |
102 | } | |
8a3183e5 K |
103 | |
104 | // Adapt my-video-miniature on small screens with menu | |
105 | @media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) { | |
106 | :host-context(.main-col:not(.expanded)) { | |
107 | ::ng-deep { | |
108 | .video-miniature { | |
109 | flex-direction: column; | |
110 | ||
111 | .video-miniature-name { | |
e66883b3 | 112 | max-width: $video-thumbnail-width; |
8a3183e5 K |
113 | } |
114 | } | |
115 | } | |
116 | } | |
117 | } | |
d607fc24 | 118 | |
119 | @media screen and (max-width: $mobile-view) { | |
120 | .videos-header { | |
121 | flex-direction: column; | |
122 | ||
123 | input[type=text] { | |
124 | width: 100% !important; | |
125 | } | |
126 | } | |
127 | } |