From 45c091238d6206515808cd7f88e9d9d49c6f3aea Mon Sep 17 00:00:00 2001
From: Jamie Rees <jamie.rees@myairops.com>
Date: Tue, 19 May 2020 21:52:26 +0100
Subject: [PATCH] css credits to iCare

---
 .../cast-carousel.component.html              | 50 +++++++-------
 .../cast-carousel.component.scss              | 67 +++++++++++++++++--
 2 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
index 1e0cbea7e..6bd1501a8 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html
@@ -1,29 +1,29 @@
 <mat-card class="mat-elevation-z8  spacing-below">
     <mat-card-header>{{'MediaDetails.Casts.CastTitle' | translate}}</mat-card-header>
     <mat-card-content>
-      <p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
-        <ng-template let-item pTemplate="item">
-          <div class="row justify-content-md-center mat-card mat-card-flat">
-            <div class="col-12">
-              <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
-              <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
-            </a>
-            <a *ngIf="item.character?.image?.medium" [routerLink]="'/discover/actor/' + item.person.id">
-              <img class="cast-profile-img" [src]="item.character.image.medium">
-            </a>
-              <!-- TODO get profile image default -->
-      
-            </div>
-            <div class="col-12">
-              <span *ngIf="!item.character?.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character}}</span>
-              <span *ngIf="item.character.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character.name}}</span>
-            </div>
-            <div class="col-12">
-              <span *ngIf="item.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.name}}</span>
-              <span *ngIf="item.person?.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.person.name}}</span>
-            </div>
-          </div>
-        </ng-template>
-      </p-carousel>
+        <p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
+            <ng-template let-item pTemplate="item">
+                <div class="row justify-content-md-center mat-card mat-card-flat col-12 carousel-item">
+                    <div class="col-12 bottom-space">
+                        <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
+                            <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
+                        </a>
+                        <a *ngIf="item.character?.image?.medium" [routerLink]="'/discover/actor/' + item.person.id">
+                            <img class="cast-profile-img" [src]="item.character.image.medium">
+                        </a>
+                        <!-- TODO get profile image default -->
+
+                    </div>
+                    <div class="col-12">
+                        <span *ngIf="!item.character?.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character}}</span>
+                        <span *ngIf="item.character.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character.name}}</span>
+                    </div>
+                    <div class="col-12">
+                        <span *ngIf="item.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.name}}</span>
+                        <span *ngIf="item.person?.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.person.name}}</span>
+                    </div>
+                </div>
+            </ng-template>
+        </p-carousel>
     </mat-card-content>
-  </mat-card>
\ No newline at end of file
+</mat-card>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
index d9db92e00..6d1402716 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss
@@ -1,7 +1,64 @@
 @import "~@angular/material/theming";
 @import "~styles/variables.scss";
-.actor-background {
-  .dark & {  
-    background: $backgroundTint-dark;
-  }
-} 
+ ::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev,
+body .ui-carousel .ui-carousel-content .ui-carousel-next {
+    background-color: #ffffff;
+    border: solid 1px rgba(178, 193, 205, 0.64);
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    margin: 0.2em;
+    color: #333333;
+    -moz-transition: color 0.2s;
+    -o-transition: color 0.2s;
+    -webkit-transition: color 0.2s;
+    transition: color 0.2s;
+}
+
+::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev:not(.ui-state-disabled):hover,
+body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled):hover {
+    background-color: #ffffff;
+    color: #000;
+    border-color: solid 1px rgba(178, 193, 205, 0.64);
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item>.ui-button {
+    border-color: transparent;
+    background-color: transparent;
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon {
+    width: 20px;
+    height: 6px;
+    background-color: rgba(255, 255, 255, 0.44);
+    margin: 0 0.2em;
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item .ui-carousel-dot-icon::before {
+    content: " ";
+}
+
+::ng-deep body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon {
+    background-color: #FFF;
+}
+
+.carousel-item {
+    text-align: center;
+}
+
+::ng-deep .ui-carousel-next {
+    background-color: #ffffff;
+    border: solid 1px rgba(178, 193, 205, 0.64);
+    border-radius: 50%;
+    margin: 0.2em;
+    color: #333333;
+    transition: color 0.2s;
+}
+
+::ng-deep .ui-carousel-content button:focus {
+    outline: none;
+}
+
+.bottom-space {
+    padding-bottom: 10px;
+}
\ No newline at end of file