diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-06-09 09:33:28 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-09 09:33:28 +0200 |
commit | e66883b37ae0796256b3aba550670a2d76cfc98a (patch) | |
tree | 3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/sass/include/_miniature.scss | |
parent | 6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff) | |
download | PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip |
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list
* normalize timestamp display on miniatures
* use grid for abstract-video-list
- refactor scss function var to pvar to avoid overriding css variables
- move fluid-grid margins to adapt-margin-content-width mixin for maintainability
- fix video-miniature-name margin-top on small screen
* move sceenratio function in a mixin
* display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/sass/include/_miniature.scss')
-rw-r--r-- | client/src/sass/include/_miniature.scss | 55 |
1 files changed, 30 insertions, 25 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index d0ee1e2f0..d89d6f9ff 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss | |||
@@ -6,7 +6,7 @@ | |||
6 | 6 | ||
7 | transition: color 0.2s; | 7 | transition: color 0.2s; |
8 | font-weight: $font-semibold; | 8 | font-weight: $font-semibold; |
9 | color: var(--mainForegroundColor); | 9 | color: pvar(--mainForegroundColor); |
10 | margin-top: 10px; | 10 | margin-top: 10px; |
11 | margin-bottom: 5px; | 11 | margin-bottom: 5px; |
12 | 12 | ||
@@ -80,7 +80,7 @@ $play-overlay-width: 18px; | |||
80 | } | 80 | } |
81 | 81 | ||
82 | &.focus-visible { | 82 | &.focus-visible { |
83 | box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); | 83 | box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); |
84 | outline: none; | 84 | outline: none; |
85 | } | 85 | } |
86 | 86 | ||
@@ -168,7 +168,7 @@ $play-overlay-width: 18px; | |||
168 | outline: none; | 168 | outline: none; |
169 | } | 169 | } |
170 | 170 | ||
171 | color: var(--mainForegroundColor); | 171 | color: pvar(--mainForegroundColor); |
172 | } | 172 | } |
173 | } | 173 | } |
174 | 174 | ||
@@ -187,7 +187,7 @@ $play-overlay-width: 18px; | |||
187 | } | 187 | } |
188 | 188 | ||
189 | .followers { | 189 | .followers { |
190 | color: var(--greyForegroundColor); | 190 | color: pvar(--greyForegroundColor); |
191 | font-weight: normal; | 191 | font-weight: normal; |
192 | font-size: 14px; | 192 | font-size: 14px; |
193 | margin-left: 10px; | 193 | margin-left: 10px; |
@@ -203,7 +203,7 @@ $play-overlay-width: 18px; | |||
203 | display: inline-block; | 203 | display: inline-block; |
204 | font-size: 16px; | 204 | font-size: 16px; |
205 | text-transform: uppercase; | 205 | text-transform: uppercase; |
206 | color: var(--greyForegroundColor); | 206 | color: pvar(--greyForegroundColor); |
207 | margin-bottom: 10px; | 207 | margin-bottom: 10px; |
208 | font-weight: $font-semibold; | 208 | font-weight: $font-semibold; |
209 | text-decoration: none; | 209 | text-decoration: none; |
@@ -221,32 +221,37 @@ $play-overlay-width: 18px; | |||
221 | } | 221 | } |
222 | } | 222 | } |
223 | 223 | ||
224 | @mixin adapt-margin-content-width { | 224 | @mixin adapt-margin-content-width($fluid: false) { |
225 | width: $video-miniature-width * 6; | 225 | @if $fluid { |
226 | margin: auto !important; | 226 | margin-left: 3vw !important; |
227 | margin-right: 3vw !important; | ||
228 | } @else { | ||
229 | width: $video-miniature-width * 6; | ||
230 | margin: auto !important; | ||
227 | 231 | ||
228 | @media screen and (max-width: 1800px) { | 232 | @media screen and (max-width: 1800px) { |
229 | width: $video-miniature-width * 5; | 233 | width: $video-miniature-width * 5; |
230 | } | 234 | } |
231 | 235 | ||
232 | @media screen and (max-width: 1800px - $video-miniature-width) { | 236 | @media screen and (max-width: 1800px - $video-miniature-width) { |
233 | width: $video-miniature-width * 4; | 237 | width: $video-miniature-width * 4; |
234 | } | 238 | } |
235 | 239 | ||
236 | @media screen and (max-width: 1800px - (2* $video-miniature-width)) { | 240 | @media screen and (max-width: 1800px - (2* $video-miniature-width)) { |
237 | width: $video-miniature-width * 3; | 241 | width: $video-miniature-width * 3; |
238 | } | 242 | } |
239 | 243 | ||
240 | @media screen and (max-width: 1800px - (3* $video-miniature-width)) { | 244 | @media screen and (max-width: 1800px - (3* $video-miniature-width)) { |
241 | width: $video-miniature-width * 2; | 245 | width: $video-miniature-width * 2; |
242 | } | 246 | } |
243 | 247 | ||
244 | @media screen and (max-width: $mobile-view) { | 248 | @media screen and (max-width: $mobile-view) { |
245 | width: auto; | 249 | width: auto; |
246 | margin: 0 !important; | 250 | margin: 0 !important; |
247 | 251 | ||
248 | .videos { | 252 | .videos { |
249 | @include video-miniature-small-screen; | 253 | @include video-miniature-small-screen; |
254 | } | ||
250 | } | 255 | } |
251 | } | 256 | } |
252 | } | 257 | } |