X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-video-playlist%2Fvideo-playlist-element-miniature.component.scss;h=c476b3ac19a4a646d681f05381a686d6ef8755fa;hb=8cbc40b2fe9d36ef0505b9441276ca561342e9e9;hp=572f7d7a88e905aea17f5b5aabdd5dd2cc6b6915;hpb=da2516fde1ad8f049c99ba5fd98c37425f379199;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss index 572f7d7a8..c476b3ac1 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss @@ -1,6 +1,6 @@ -@import '_variables'; -@import '_mixins'; -@import '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; $thumbnail-width: 130px; $thumbnail-height: 72px; @@ -17,8 +17,9 @@ my-video-thumbnail { my-video-thumbnail, .fake-thumbnail { + @include margin-right(10px); + display: flex; // Avoids an issue with line-height that adds space below the element - margin-right: 10px; } .video { @@ -60,8 +61,9 @@ my-video-thumbnail, cursor: pointer; .position { + @include margin-right(10px); + font-weight: $font-semibold; - margin-right: 10px; color: pvar(--greyForegroundColor); min-width: 25px; @@ -84,23 +86,26 @@ my-video-thumbnail, width: auto; } - .video-info-account, .video-info-timestamp { + .video-info-account, + .video-info-timestamp { color: pvar(--greyForegroundColor); } } } .video-info-name { + @include ellipsis; + font-size: 18px; font-weight: $font-semibold; display: inline-block; - - @include ellipsis; } - .more, my-edit-button { + .more, + my-edit-button { + @include margin-left(auto); + justify-self: flex-end; - margin-left: auto; cursor: pointer; min-width: 24px; } @@ -118,7 +123,7 @@ my-video-thumbnail, display: flex; &::after { - border: none; + border: 0; } } } @@ -133,8 +138,9 @@ my-video-thumbnail, } .timestamp-options { + @include padding-left(35px); + padding-top: 0; - padding-left: 35px; margin-bottom: 15px; > div { @@ -144,7 +150,7 @@ my-video-thumbnail, } my-peertube-checkbox { - margin-right: 5px; + @include margin-right(5px); } input {