diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss')
| -rw-r--r-- | client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss | 58 |
1 files changed, 31 insertions, 27 deletions
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss index 5c3453e4b..0f0ac1979 100644 --- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss +++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss | |||
| @@ -15,43 +15,47 @@ | |||
| 15 | .playlist-info { | 15 | .playlist-info { |
| 16 | padding: 5px 30px; | 16 | padding: 5px 30px; |
| 17 | background-color: pvar(--greyBackgroundColor); | 17 | background-color: pvar(--greyBackgroundColor); |
| 18 | } | ||
| 19 | |||
| 20 | .playlist-display-name { | ||
| 21 | font-size: 18px; | ||
| 22 | font-weight: $font-semibold; | ||
| 23 | margin-bottom: 5px; | ||
| 18 | 24 | ||
| 19 | .playlist-display-name { | 25 | .pt-badge { |
| 20 | font-size: 18px; | 26 | @include margin-left(5px); |
| 21 | font-weight: $font-semibold; | ||
| 22 | margin-bottom: 5px; | ||
| 23 | } | 27 | } |
| 28 | } | ||
| 24 | 29 | ||
| 25 | .playlist-by-index { | 30 | .playlist-by-index { |
| 26 | color: pvar(--greyForegroundColor); | 31 | color: pvar(--greyForegroundColor); |
| 27 | display: flex; | 32 | display: flex; |
| 28 | 33 | ||
| 29 | .playlist-by { | 34 | .playlist-by { |
| 30 | @include margin-right(5px); | 35 | @include margin-right(5px); |
| 31 | } | 36 | } |
| 32 | 37 | ||
| 33 | .playlist-index span:first-child::after { | 38 | .playlist-index span:first-child::after { |
| 34 | content: '/'; | 39 | content: '/'; |
| 35 | margin: 0 3px; | 40 | margin: 0 3px; |
| 36 | } | ||
| 37 | } | 41 | } |
| 42 | } | ||
| 38 | 43 | ||
| 39 | .playlist-controls { | 44 | .playlist-controls { |
| 40 | display: flex; | 45 | display: flex; |
| 41 | margin: 10px 0; | 46 | margin: 10px 0; |
| 42 | 47 | ||
| 43 | my-global-icon:not(:last-child) { | 48 | my-global-icon:not(:last-child) { |
| 44 | @include margin-right(.5rem); | 49 | @include margin-right(.5rem); |
| 45 | } | 50 | } |
| 46 | 51 | ||
| 47 | my-global-icon { | 52 | my-global-icon { |
| 48 | &:not(.active) { | 53 | &:not(.active) { |
| 49 | opacity: .5; | 54 | opacity: .5; |
| 50 | } | 55 | } |
| 51 | 56 | ||
| 52 | ::ng-deep { | 57 | ::ng-deep { |
| 53 | cursor: pointer; | 58 | cursor: pointer; |
| 54 | } | ||
| 55 | } | 59 | } |
| 56 | } | 60 | } |
| 57 | } | 61 | } |