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/app/shared/video-playlist/video-playlist-element-miniature.component.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/app/shared/video-playlist/video-playlist-element-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss index 649272c52..afd775b25 100644 --- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | |||
@@ -24,7 +24,7 @@ my-video-thumbnail, | |||
24 | .video { | 24 | .video { |
25 | display: flex; | 25 | display: flex; |
26 | align-items: center; | 26 | align-items: center; |
27 | background-color: var(--mainBackgroundColor); | 27 | background-color: pvar(--mainBackgroundColor); |
28 | padding: 10px; | 28 | padding: 10px; |
29 | border-bottom: 1px solid $separator-border-color; | 29 | border-bottom: 1px solid $separator-border-color; |
30 | 30 | ||
@@ -49,7 +49,7 @@ my-video-thumbnail, | |||
49 | a { | 49 | a { |
50 | @include disable-default-a-behaviour; | 50 | @include disable-default-a-behaviour; |
51 | 51 | ||
52 | color: var(--mainForegroundColor); | 52 | color: pvar(--mainForegroundColor); |
53 | display: flex; | 53 | display: flex; |
54 | min-width: 0; | 54 | min-width: 0; |
55 | align-items: center; | 55 | align-items: center; |
@@ -58,11 +58,11 @@ my-video-thumbnail, | |||
58 | .position { | 58 | .position { |
59 | font-weight: $font-semibold; | 59 | font-weight: $font-semibold; |
60 | margin-right: 10px; | 60 | margin-right: 10px; |
61 | color: var(--greyForegroundColor); | 61 | color: pvar(--greyForegroundColor); |
62 | min-width: 25px; | 62 | min-width: 25px; |
63 | 63 | ||
64 | my-global-icon { | 64 | my-global-icon { |
65 | @include apply-svg-color(var(--greyForegroundColor)); | 65 | @include apply-svg-color(pvar(--greyForegroundColor)); |
66 | 66 | ||
67 | width: 17px; | 67 | width: 17px; |
68 | position: relative; | 68 | position: relative; |
@@ -81,7 +81,7 @@ my-video-thumbnail, | |||
81 | } | 81 | } |
82 | 82 | ||
83 | .video-info-account, .video-info-timestamp { | 83 | .video-info-account, .video-info-timestamp { |
84 | color: var(--greyForegroundColor); | 84 | color: pvar(--greyForegroundColor); |
85 | } | 85 | } |
86 | } | 86 | } |
87 | } | 87 | } |
@@ -109,7 +109,7 @@ my-video-thumbnail, | |||
109 | } | 109 | } |
110 | 110 | ||
111 | .icon-more { | 111 | .icon-more { |
112 | @include apply-svg-color(var(--greyForegroundColor)); | 112 | @include apply-svg-color(pvar(--greyForegroundColor)); |
113 | 113 | ||
114 | display: flex; | 114 | display: flex; |
115 | 115 | ||