aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/app.component.scss2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss13
-rw-r--r--client/src/sass/include/_mixins.scss27
-rw-r--r--client/src/sass/include/_variables.scss2
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;