diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/src/app/app.component.scss | 2 | ||||
-rw-r--r-- | client/src/app/shared/video/video-miniature.component.scss | 13 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 27 | ||||
-rw-r--r-- | client/src/sass/include/_variables.scss | 2 |
4 files changed, 38 insertions, 6 deletions
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index ded45b5f7..e772e3a37 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss | |||
@@ -14,7 +14,7 @@ | |||
14 | position: fixed; | 14 | position: fixed; |
15 | top: 0; | 15 | top: 0; |
16 | width: 100%; | 16 | width: 100%; |
17 | background-color: #fff; | 17 | background-color: $bg-color; |
18 | z-index: 1000; | 18 | z-index: 1000; |
19 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); | 19 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); |
20 | display: flex; | 20 | display: flex; |
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index 6883650f4..cc643f9d9 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss | |||
@@ -14,14 +14,17 @@ | |||
14 | line-height: normal; | 14 | line-height: normal; |
15 | 15 | ||
16 | .video-miniature-name { | 16 | .video-miniature-name { |
17 | display: block; | 17 | @include ellipsis-multiline( |
18 | overflow: hidden; | 18 | $font-size: 1rem, |
19 | text-overflow: ellipsis; | 19 | $line-height: 1, |
20 | white-space: nowrap; | 20 | $lines-to-show: 2 |
21 | ); | ||
21 | transition: color 0.2s; | 22 | transition: color 0.2s; |
22 | font-size: 16px; | 23 | font-size: 16px; |
23 | font-weight: $font-semibold; | 24 | font-weight: $font-semibold; |
24 | color: #000; | 25 | color: $fg-color; |
26 | margin-top: 5px; | ||
27 | margin-bottom: 5px; | ||
25 | 28 | ||
26 | &:hover { | 29 | &:hover { |
27 | text-decoration: none; | 30 | text-decoration: none; |
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index aafe478f9..99225e4e5 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -16,6 +16,33 @@ | |||
16 | } | 16 | } |
17 | } | 17 | } |
18 | 18 | ||
19 | /** | ||
20 | * This mixin will crop text in block for needed amount of lines and put ellipsis at the end | ||
21 | * | ||
22 | * @param $font-size font-size property | ||
23 | * @param $line-height line-height property | ||
24 | * @param $lines-to-show amount of lines to show | ||
25 | */ | ||
26 | @mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) { | ||
27 | display: block; | ||
28 | /* Fallback for non-webkit */ | ||
29 | display: -webkit-box; | ||
30 | max-height: $font-size*$line-height*$lines-to-show; | ||
31 | /* Fallback for non-webkit */ | ||
32 | font-size: $font-size; | ||
33 | line-height: $line-height; | ||
34 | -webkit-line-clamp: $lines-to-show; | ||
35 | -webkit-box-orient: vertical; | ||
36 | overflow: hidden; | ||
37 | text-overflow: ellipsis; | ||
38 | } | ||
39 | |||
40 | @mixin prefix($property, $parameters...) { | ||
41 | @each $prefix in -webkit-, -moz-, -ms-, -o-, "" { | ||
42 | #{$prefix}#{$property}: $parameters; | ||
43 | } | ||
44 | } | ||
45 | |||
19 | @mixin peertube-word-wrap { | 46 | @mixin peertube-word-wrap { |
20 | word-break: normal; | 47 | word-break: normal; |
21 | word-wrap: break-word; | 48 | word-wrap: break-word; |
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index ba7abeef1..7fd178c3b 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss | |||
@@ -10,6 +10,8 @@ $orange-hoover-color: #F97D46; | |||
10 | 10 | ||
11 | $black-background: #000; | 11 | $black-background: #000; |
12 | $grey-background: #f6f2f2; | 12 | $grey-background: #f6f2f2; |
13 | $bg-color: #fff; | ||
14 | $fg-color: #000; | ||
13 | 15 | ||
14 | $red: #FF0000; | 16 | $red: #FF0000; |
15 | $green: #39CC0B; | 17 | $green: #39CC0B; |