diff options
Diffstat (limited to 'client/src/app/+my-library/my-videos')
-rw-r--r-- | client/src/app/+my-library/my-videos/my-videos.component.scss | 68 |
1 files changed, 9 insertions, 59 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 index 57473896b..a03baa056 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.scss +++ b/client/src/app/+my-library/my-videos/my-videos.component.scss | |||
@@ -32,36 +32,9 @@ h1 { | |||
32 | } | 32 | } |
33 | } | 33 | } |
34 | 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 { | 35 | .action-button { |
62 | display: flex; | 36 | display: flex; |
63 | margin-left: 55px; | 37 | margin-left: 10px; |
64 | margin-top: 10px; | ||
65 | align-self: flex-end; | 38 | align-self: flex-end; |
66 | } | 39 | } |
67 | 40 | ||
@@ -69,7 +42,7 @@ my-edit-button { | |||
69 | margin-right: 10px; | 42 | margin-right: 10px; |
70 | } | 43 | } |
71 | 44 | ||
72 | @media screen and (max-width: $small-view) { | 45 | @include on-small-main-col { |
73 | h1 { | 46 | h1 { |
74 | flex-direction: column; | 47 | flex-direction: column; |
75 | 48 | ||
@@ -80,39 +53,12 @@ my-edit-button { | |||
80 | } | 53 | } |
81 | 54 | ||
82 | .action-button { | 55 | .action-button { |
83 | flex-direction: column; | 56 | margin-top: 10px; |
84 | align-self: center; | 57 | margin-left: auto; |
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 | } | 58 | } |
113 | } | 59 | } |
114 | 60 | ||
115 | @media screen and (max-width: $mobile-view) { | 61 | @include on-mobile-main-col { |
116 | .videos-header { | 62 | .videos-header { |
117 | flex-direction: column; | 63 | flex-direction: column; |
118 | 64 | ||
@@ -120,4 +66,8 @@ my-edit-button { | |||
120 | width: 100% !important; | 66 | width: 100% !important; |
121 | } | 67 | } |
122 | } | 68 | } |
69 | |||
70 | .action-button { | ||
71 | margin-left: 0; | ||
72 | } | ||
123 | } | 73 | } |