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