diff options
Diffstat (limited to 'client/src/app')
-rw-r--r-- | client/src/app/shared/video/video-miniature.component.scss | 155 | ||||
-rw-r--r-- | client/src/app/videos/video-list/video-overview.component.scss | 9 |
2 files changed, 90 insertions, 74 deletions
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index fa2739f00..80d6c4fda 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss | |||
@@ -10,79 +10,84 @@ | |||
10 | height: 195px; | 10 | height: 195px; |
11 | vertical-align: top; | 11 | vertical-align: top; |
12 | 12 | ||
13 | .video-miniature-information { | 13 | .video-bottom { |
14 | width: 200px; | 14 | display: flex; |
15 | line-height: normal; | ||
16 | 15 | ||
17 | .video-miniature-name { | 16 | .video-miniature-information { |
18 | @include miniature-name; | 17 | width: 200px; |
19 | } | 18 | line-height: normal; |
20 | 19 | ||
21 | .video-miniature-created-at-views { | 20 | .video-miniature-name { |
22 | display: block; | 21 | @include miniature-name; |
23 | font-size: 13px; | 22 | } |
24 | } | ||
25 | 23 | ||
26 | .video-miniature-account, | 24 | .video-miniature-created-at-views { |
27 | .video-miniature-channel { | 25 | display: block; |
28 | @include disable-default-a-behaviour; | 26 | font-size: 13px; |
29 | @include ellipsis; | 27 | } |
30 | 28 | ||
31 | display: block; | 29 | .video-miniature-account, |
32 | font-size: 13px; | 30 | .video-miniature-channel { |
33 | color: $grey-foreground-color; | 31 | @include disable-default-a-behaviour; |
32 | @include ellipsis; | ||
34 | 33 | ||
35 | &:hover { | 34 | display: block; |
36 | color: $grey-foreground-hover-color; | 35 | font-size: 13px; |
36 | color: $grey-foreground-color; | ||
37 | |||
38 | &:hover { | ||
39 | color: $grey-foreground-hover-color; | ||
40 | } | ||
37 | } | 41 | } |
38 | } | ||
39 | 42 | ||
40 | .video-info-privacy, | 43 | .video-info-privacy, |
41 | .video-info-blacklisted .blacklisted-label, | 44 | .video-info-blacklisted .blacklisted-label, |
42 | .video-info-nsfw { | 45 | .video-info-nsfw { |
43 | font-weight: $font-semibold; | 46 | font-weight: $font-semibold; |
44 | } | 47 | } |
45 | 48 | ||
46 | .video-info-blacklisted { | 49 | .video-info-blacklisted { |
47 | color: red; | 50 | color: red; |
48 | 51 | ||
49 | .blacklisted-reason::before { | 52 | .blacklisted-reason::before { |
50 | content: ' - '; | 53 | content: ' - '; |
54 | } | ||
51 | } | 55 | } |
52 | } | ||
53 | 56 | ||
54 | .video-info-nsfw { | 57 | .video-info-nsfw { |
55 | color: red; | 58 | color: red; |
59 | } | ||
56 | } | 60 | } |
57 | } | ||
58 | |||
59 | .video-bottom { | ||
60 | display: flex; | ||
61 | 61 | ||
62 | .video-actions { | 62 | .video-actions { |
63 | margin-top: 3px; | 63 | margin-top: 3px; |
64 | margin-right: 10px; | 64 | margin-right: 10px; |
65 | } | ||
66 | 65 | ||
67 | /deep/ .dropdown-root:not(.show) { | 66 | /deep/ .dropdown-root:not(.show) { |
68 | display: none; | 67 | display: none; |
69 | } | 68 | } |
70 | 69 | ||
71 | &:hover /deep/ .dropdown-root { | 70 | /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { |
72 | display: block; | 71 | display: block; |
72 | } | ||
73 | } | 73 | } |
74 | 74 | ||
75 | /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { | 75 | &:hover .video-actions /deep/ .dropdown-root { |
76 | display: block; | 76 | display: block; |
77 | } | 77 | } |
78 | 78 | ||
79 | @media screen and (max-width: $small-view) { | 79 | @media screen and (max-width: $small-view) { |
80 | .video-actions { | 80 | .video-miniature-information .video-miniature-name { |
81 | margin-right: 0; | 81 | margin-top: 0; |
82 | } | 82 | } |
83 | 83 | ||
84 | /deep/ .dropdown-root { | 84 | .video-actions { |
85 | display: block !important; | 85 | margin: 0; |
86 | top: -3px; | ||
87 | |||
88 | /deep/ .dropdown-root { | ||
89 | display: block !important; | ||
90 | } | ||
86 | } | 91 | } |
87 | } | 92 | } |
88 | } | 93 | } |
@@ -97,38 +102,40 @@ | |||
97 | margin-right: 10px; | 102 | margin-right: 10px; |
98 | } | 103 | } |
99 | 104 | ||
100 | .video-miniature-information { | 105 | .video-bottom { |
101 | width: auto; | 106 | .video-miniature-information { |
102 | min-width: 500px; | 107 | width: auto; |
103 | 108 | min-width: 500px; | |
104 | .video-miniature-name { | 109 | |
105 | @include ellipsis-multiline(1.3em, 2); | 110 | .video-miniature-name { |
106 | 111 | @include ellipsis-multiline(1.3em, 2); | |
107 | margin-top: 2px; | 112 | |
108 | margin-bottom: 5px; | 113 | margin-top: 2px; |
109 | } | 114 | margin-bottom: 5px; |
110 | 115 | } | |
111 | .video-miniature-created-at-views, | 116 | |
112 | .video-miniature-account, | 117 | .video-miniature-created-at-views, |
113 | .video-miniature-channel { | 118 | .video-miniature-account, |
114 | font-size: 14px; | 119 | .video-miniature-channel { |
115 | width: fit-content; | 120 | font-size: 14px; |
116 | } | 121 | width: fit-content; |
117 | 122 | } | |
118 | .video-info-privacy { | 123 | |
119 | margin-top: 5px; | 124 | .video-info-privacy { |
125 | margin-top: 5px; | ||
126 | } | ||
127 | |||
128 | .video-info-blacklisted { | ||
129 | margin-top: 3px; | ||
130 | } | ||
120 | } | 131 | } |
121 | 132 | ||
122 | .video-info-blacklisted { | 133 | .video-actions { |
123 | margin-top: 3px; | 134 | margin: 0; |
135 | top: -3px; | ||
124 | } | 136 | } |
125 | } | 137 | } |
126 | 138 | ||
127 | .video-bottom .video-actions { | ||
128 | margin: 0; | ||
129 | top: -3px; | ||
130 | } | ||
131 | |||
132 | @media screen and (max-width: $small-view) { | 139 | @media screen and (max-width: $small-view) { |
133 | flex-direction: column; | 140 | flex-direction: column; |
134 | height: auto; | 141 | height: auto; |
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss index 42b542233..a24766783 100644 --- a/client/src/app/videos/video-list/video-overview.component.scss +++ b/client/src/app/videos/video-list/video-overview.component.scss | |||
@@ -3,6 +3,8 @@ | |||
3 | @import '_miniature'; | 3 | @import '_miniature'; |
4 | 4 | ||
5 | .section { | 5 | .section { |
6 | max-height: 500px; // 2 rows max | ||
7 | overflow: hidden; | ||
6 | padding-top: 10px; | 8 | padding-top: 10px; |
7 | 9 | ||
8 | &:first-child { | 10 | &:first-child { |
@@ -44,11 +46,18 @@ | |||
44 | } | 46 | } |
45 | 47 | ||
46 | @media screen and (max-width: 500px) { | 48 | @media screen and (max-width: 500px) { |
49 | .margin-content { | ||
50 | margin: 0 !important; | ||
51 | } | ||
52 | |||
47 | .section-title { | 53 | .section-title { |
48 | font-size: 17px; | 54 | font-size: 17px; |
49 | } | 55 | } |
50 | 56 | ||
51 | .section { | 57 | .section { |
58 | max-height: initial; | ||
59 | overflow: initial; | ||
60 | |||
52 | @include video-miniature-small-screen; | 61 | @include video-miniature-small-screen; |
53 | } | 62 | } |
54 | } | 63 | } |