From f1ac63488c0050fec1c4d713d74db4f4ea944395 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 15 Apr 2021 13:43:50 +0200 Subject: Refactor menu css --- .../video-thumbnail.component.scss | 122 ++++++++++----------- 1 file changed, 61 insertions(+), 61 deletions(-) (limited to 'client/src/app/shared/shared-thumbnail') diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index 2b723a15a..ea59ab346 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -4,82 +4,82 @@ .video-thumbnail { @include miniature-thumbnail; +} - .progress-bar { - height: 3px; - width: 100%; - position: absolute; - bottom: 0; - background-color: rgba(0, 0, 0, 0.20); +.progress-bar { + height: 3px; + width: 100%; + position: absolute; + bottom: 0; + background-color: rgba(0, 0, 0, 0.20); - div { - height: 100%; - background-color: pvar(--mainColor); - } + div { + height: 100%; + background-color: pvar(--mainColor); } +} - .video-thumbnail-watch-later-overlay, - .video-thumbnail-label-overlay, - .video-thumbnail-duration-overlay, - .video-thumbnail-live-overlay { - @include static-thumbnail-overlay; +.video-thumbnail-watch-later-overlay, +.video-thumbnail-label-overlay, +.video-thumbnail-duration-overlay, +.video-thumbnail-live-overlay { + @include static-thumbnail-overlay; - border-radius: 3px; - font-size: 12px; - font-weight: $font-semibold; - line-height: 1.1; - z-index: z(miniature); - } + border-radius: 3px; + font-size: 12px; + font-weight: $font-semibold; + line-height: 1.1; + z-index: z(miniature); +} - .video-thumbnail-label-overlay { - position: absolute; - padding: 0 5px; - left: 5px; - top: 5px; - font-weight: $font-bold; +.video-thumbnail-label-overlay { + position: absolute; + padding: 0 5px; + left: 5px; + top: 5px; + font-weight: $font-bold; - &.warning { background-color: orange; } - &.danger { background-color: red; } - } + &.warning { background-color: orange; } + &.danger { background-color: red; } +} - .video-thumbnail-duration-overlay, - .video-thumbnail-live-overlay { - position: absolute; - padding: 0 3px; - right: 5px; - bottom: 5px; - } +.video-thumbnail-duration-overlay, +.video-thumbnail-live-overlay { + position: absolute; + padding: 0 3px; + right: 5px; + bottom: 5px; +} - .video-thumbnail-live-overlay { - font-weight: $font-semibold; - color: #fff; +.video-thumbnail-live-overlay { + font-weight: $font-semibold; + color: #fff; - &:not(.live-ended) { - background-color: rgba(224, 8, 8, 0.7); - } + &:not(.live-ended) { + background-color: rgba(224, 8, 8, 0.7); } +} - .video-thumbnail-actions-overlay { - position: absolute; - display: flex; - flex-direction: column; - right: 5px; - top: 5px; - opacity: 0; +.video-thumbnail-actions-overlay { + position: absolute; + display: flex; + flex-direction: column; + right: 5px; + top: 5px; + opacity: 0; - div:not(:first-child) { - margin-top: 2px; - } + div:not(:first-child) { + margin-top: 2px; + } +} - .video-thumbnail-watch-later-overlay { - padding: 3px; +.video-thumbnail-watch-later-overlay { + padding: 3px; - my-global-icon { - width: 22px; - height: 22px; + my-global-icon { + width: 22px; + height: 22px; - @include apply-svg-color(#fff); - } - } + @include apply-svg-color(#fff); } } -- cgit v1.2.3