diff options
author | Chocobozzz <me@florianbigard.com> | 2020-06-23 14:10:17 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-06-23 16:00:49 +0200 |
commit | 67ed6552b831df66713bac9e672738796128d33f (patch) | |
tree | 59c97d41e0b49d75a90aa3de987968ab9b1ff447 /client/src/app/shared/shared-video-miniature/video-miniature.component.scss | |
parent | 0c4bacbff53bc732f5a2677d62a6ead7752e2405 (diff) | |
download | PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.gz PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.zst PeerTube-67ed6552b831df66713bac9e672738796128d33f.zip |
Reorganize client shared modules
Diffstat (limited to 'client/src/app/shared/shared-video-miniature/video-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/shared-video-miniature/video-miniature.component.scss | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss new file mode 100644 index 000000000..38cac5b6e --- /dev/null +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss | |||
@@ -0,0 +1,200 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | @import '_miniature'; | ||
4 | |||
5 | $more-button-width: 40px; | ||
6 | $more-margin-right: 15px; | ||
7 | |||
8 | .video-miniature { | ||
9 | display: inline-flex; | ||
10 | flex-direction: column; | ||
11 | padding-bottom: $video-miniature-margin-bottom; | ||
12 | vertical-align: top; | ||
13 | |||
14 | .video-bottom { | ||
15 | display: flex; | ||
16 | |||
17 | .video-miniature-information { | ||
18 | width: $video-miniature-width - $more-button-width - $more-margin-right; | ||
19 | line-height: normal; | ||
20 | |||
21 | .avatar { | ||
22 | margin: 10px 10px 0 0; | ||
23 | |||
24 | img { | ||
25 | @include avatar(40px); | ||
26 | } | ||
27 | } | ||
28 | |||
29 | .video-miniature-name { | ||
30 | @include miniature-name; | ||
31 | width: calc(100% - #{$more-button-width}); | ||
32 | } | ||
33 | |||
34 | .video-miniature-meta { | ||
35 | width: calc(100% + #{$more-button-width}); | ||
36 | overflow: hidden; | ||
37 | } | ||
38 | |||
39 | .video-miniature-created-at-views { | ||
40 | display: block; | ||
41 | font-size: 13px; | ||
42 | } | ||
43 | |||
44 | .video-miniature-account, | ||
45 | .video-miniature-channel { | ||
46 | @include disable-default-a-behaviour; | ||
47 | @include ellipsis; | ||
48 | |||
49 | display: block; | ||
50 | font-size: 13px; | ||
51 | color: pvar(--greyForegroundColor); | ||
52 | |||
53 | &:hover { | ||
54 | color: $grey-foreground-hover-color; | ||
55 | } | ||
56 | } | ||
57 | |||
58 | .video-info-privacy, | ||
59 | .video-info-blocked .blocked-label, | ||
60 | .video-info-nsfw { | ||
61 | font-weight: $font-semibold; | ||
62 | } | ||
63 | |||
64 | .video-info-blocked { | ||
65 | color: red; | ||
66 | |||
67 | .blocked-reason::before { | ||
68 | content: ' - '; | ||
69 | } | ||
70 | } | ||
71 | |||
72 | .video-info-nsfw { | ||
73 | color: red; | ||
74 | } | ||
75 | } | ||
76 | |||
77 | .video-actions { | ||
78 | margin-top: 3px; | ||
79 | width: $more-button-width; | ||
80 | height: 30px; | ||
81 | |||
82 | ::ng-deep .dropdown-root:not(.show) { | ||
83 | opacity: 0; | ||
84 | } | ||
85 | |||
86 | ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { | ||
87 | opacity: 1; | ||
88 | } | ||
89 | |||
90 | ::ng-deep .more-icon { | ||
91 | opacity: .6; | ||
92 | |||
93 | &:hover { | ||
94 | opacity: 1; | ||
95 | } | ||
96 | } | ||
97 | } | ||
98 | |||
99 | @media screen and (max-width: $small-view) { | ||
100 | .video-miniature-information { | ||
101 | margin: 0 10px; | ||
102 | } | ||
103 | |||
104 | .video-actions { | ||
105 | margin: 0; | ||
106 | top: -3px; | ||
107 | |||
108 | ::ng-deep .dropdown-root { | ||
109 | opacity: 1 !important; | ||
110 | } | ||
111 | } | ||
112 | } | ||
113 | } | ||
114 | |||
115 | &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay, | ||
116 | &:hover .video-bottom .video-actions ::ng-deep .dropdown-root { | ||
117 | opacity: 1; | ||
118 | } | ||
119 | |||
120 | &.fit-width { | ||
121 | width: 100%; | ||
122 | |||
123 | .video-bottom { | ||
124 | width: 100% !important; | ||
125 | |||
126 | .video-miniature-information { | ||
127 | width: calc(100% - #{$more-button-width}) !important; | ||
128 | } | ||
129 | } | ||
130 | |||
131 | my-video-thumbnail { | ||
132 | @include large-screen-ratio($selector: '::ng-deep .video-thumbnail'); | ||
133 | } | ||
134 | } | ||
135 | |||
136 | &.display-as-row { | ||
137 | flex-direction: row; | ||
138 | padding-bottom: 0; | ||
139 | height: auto; | ||
140 | display: flex; | ||
141 | flex-grow: 1; | ||
142 | |||
143 | my-video-thumbnail { | ||
144 | margin-right: 10px; | ||
145 | } | ||
146 | |||
147 | .video-bottom { | ||
148 | .video-miniature-information { | ||
149 | @media screen and (min-width: $small-view) { | ||
150 | width: auto; | ||
151 | min-width: 500px; | ||
152 | } | ||
153 | |||
154 | .video-miniature-name { | ||
155 | @include ellipsis-multiline(1.3em, 2); | ||
156 | |||
157 | margin-top: 2px; | ||
158 | margin-bottom: 5px; | ||
159 | } | ||
160 | |||
161 | .video-miniature-created-at-views, | ||
162 | .video-miniature-account, | ||
163 | .video-miniature-channel { | ||
164 | font-size: 95%; | ||
165 | width: fit-content; | ||
166 | } | ||
167 | |||
168 | .video-miniature-created-at-views + .video-miniature-channel { | ||
169 | margin-top: 5px; | ||
170 | } | ||
171 | |||
172 | .video-info-privacy { | ||
173 | margin-top: 5px; | ||
174 | } | ||
175 | |||
176 | .video-info-blocked { | ||
177 | margin-top: 3px; | ||
178 | } | ||
179 | } | ||
180 | |||
181 | .video-actions { | ||
182 | margin: 0; | ||
183 | top: -3px; | ||
184 | } | ||
185 | } | ||
186 | |||
187 | @media screen and (max-width: $small-view) { | ||
188 | flex-direction: column; | ||
189 | height: auto; | ||
190 | |||
191 | my-video-thumbnail { | ||
192 | margin-right: 0; | ||
193 | } | ||
194 | |||
195 | .video-miniature-information { | ||
196 | min-width: initial; | ||
197 | } | ||
198 | } | ||
199 | } | ||
200 | } | ||