diff options
Diffstat (limited to 'client/src/app/+my-library/my-videos/my-videos.component.scss')
-rw-r--r-- | client/src/app/+my-library/my-videos/my-videos.component.scss | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss new file mode 100644 index 000000000..59fc5fe80 --- /dev/null +++ b/client/src/app/+my-library/my-videos/my-videos.component.scss | |||
@@ -0,0 +1,138 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | input[type=text] { | ||
5 | @include peertube-input-text(300px); | ||
6 | } | ||
7 | |||
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 | |||
23 | .action-button-delete-selection { | ||
24 | display: inline-block; | ||
25 | |||
26 | @include peertube-button; | ||
27 | @include orange-button; | ||
28 | @include button-with-icon(21px); | ||
29 | |||
30 | my-global-icon { | ||
31 | @include apply-svg-color(#fff); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | ::ng-deep { | ||
36 | .video { | ||
37 | flex-wrap: wrap; | ||
38 | } | ||
39 | |||
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 | |||
61 | .action-button { | ||
62 | display: flex; | ||
63 | margin-left: 55px; | ||
64 | margin-top: 10px; | ||
65 | align-self: flex-end; | ||
66 | } | ||
67 | |||
68 | my-edit-button { | ||
69 | margin-right: 10px; | ||
70 | } | ||
71 | |||
72 | @media screen and (max-width: $small-view) { | ||
73 | h1 { | ||
74 | flex-direction: column; | ||
75 | |||
76 | > span, | ||
77 | .button-link { | ||
78 | margin-bottom: 10px; | ||
79 | } | ||
80 | } | ||
81 | |||
82 | .action-button { | ||
83 | flex-direction: column; | ||
84 | align-self: center; | ||
85 | align-items: center; | ||
86 | margin-left: 0px; | ||
87 | } | ||
88 | |||
89 | my-edit-button { | ||
90 | margin: 15px 0 5px 0; | ||
91 | width: 100%; | ||
92 | text-align: center; | ||
93 | |||
94 | ::ng-deep { | ||
95 | .action-button { | ||
96 | /* same width than a.video-thumbnail */ | ||
97 | width: $video-thumbnail-width; | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | |||
102 | ::ng-deep { | ||
103 | .video-miniature { | ||
104 | align-items: center; | ||
105 | |||
106 | .video-bottom, | ||
107 | .video-bottom .video-miniature-information { | ||
108 | /* same width than a.video-thumbnail */ | ||
109 | max-width: $video-thumbnail-width !important; | ||
110 | } | ||
111 | } | ||
112 | } | ||
113 | } | ||
114 | |||
115 | // Adapt my-video-miniature on small screens with menu | ||
116 | @media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) { | ||
117 | :host-context(.main-col:not(.expanded)) { | ||
118 | ::ng-deep { | ||
119 | .video-miniature { | ||
120 | flex-direction: column; | ||
121 | |||
122 | .video-miniature-name { | ||
123 | max-width: $video-thumbnail-width; | ||
124 | } | ||
125 | } | ||
126 | } | ||
127 | } | ||
128 | } | ||
129 | |||
130 | @media screen and (max-width: $mobile-view) { | ||
131 | .videos-header { | ||
132 | flex-direction: column; | ||
133 | |||
134 | input[type=text] { | ||
135 | width: 100% !important; | ||
136 | } | ||
137 | } | ||
138 | } | ||