New login css

src/Ombi/ClientApp/src/app/login/login.component.html

@@ -1,10 +1,12 @@
 <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
+    <div class="login-gradient-bar">
+    </div>
 </div>
 <div class="small-middle-container">
     <div *ngIf="form && customizationSettings && authenticationSettings">
 
         <mat-card class="mat-elevation-z8 top-margin login-card">
-            <img mat-card-image *ngIf="!customizationSettings.logo" src="{{baseUrl}}/images/logo.png">
+            <H1 *ngIf="!customizationSettings.logo" class="login_logo">OMBI</H1>
             <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
             <mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
                 <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">

src/Ombi/ClientApp/src/app/login/login.component.scss

@@ -1,19 +1,8 @@
-$primary-colour: #df691a;
-$primary-colour-outline: #ff761b;
-$bg-colour: #333333;
-$bg-colour-disabled: #252424;
-$form-color: #4e5d6c;
-$form-color-lighter: #637689;
-$info-colour: #5bc0de;
-$warning-colour: #f0ad4e;
-$danger-colour: #d9534f;
-$success-colour: #5cb85c;
-$placeholder-colour: #3b3b3b;
+@import "~styles/variables.scss";
 
 body, html {
     height: 100% !important;
     background-repeat: no-repeat !important;
-    background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;
 }
 
 img.center {
@@ -22,6 +11,13 @@ img.center {
     max-width: 100%;
 }
 
+.login-gradient-bar{
+    background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent;
+    height:100%;
+    width:100%;
+    position: absolute;
+}
+
 div.bg {
     background-position: center center;
     background-repeat: no-repeat;
@@ -57,24 +53,6 @@ div.bg {
     user-select: none;
     cursor: default;
 }
-/*
- * Card component
- */
-.card {
-    /*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
-    background-color: $bg-colour;
-    /* just in case there no content*/
-    padding: 20px 25px 30px;
-    margin: 0 auto 25px;
-    margin-top: 50px;
-    /* shadows and rounded borders */
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    /*-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-        -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
-}
 
 .profile-img-custom {
     width: 100%;
@@ -178,32 +156,6 @@ div.bg {
     color: rgb(12, 97, 33);
 }
 
-
-// Placeholders
-
-::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-    color: $placeholder-colour;
-}
-
-:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-    color: $placeholder-colour;
-    opacity: 1;
-}
-
-::-moz-placeholder { /* Mozilla Firefox 19+ */
-    color: $placeholder-colour;
-    opacity: 1;
-}
-
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: $placeholder-colour;
-}
-
-::-ms-input-placeholder { /* Microsoft Edge */
-    color: $placeholder-colour;
-}
-
-
 .full-width {
     width: 100%;
 }
@@ -217,18 +169,34 @@ div.bg {
 @media (min-width: 571px) {
     .small-middle-container{
         margin: auto;
-        width: 25%;
+        width: 35%;
         overflow: auto;
     }
 }
 
-.top-margin {
-    margin-top:10%;
-}
-
 .login-buttons {
     text-align: center;
 }
-.login-card {
-    background: #424242;
+
+::ng-deep button#sign-in{
+    color: $ombi-active-text;
+}
+
+::ng-deep .login-card .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
+    color: $ombi-active;
+}
+
+::ng-deep .login-card .mat-form-field.mat-focused .mat-form-field-label{
+    color: $ombi-active;
 }
+
+::ng-deep .login-card .mat-input-element{
+    caret-color: $ombi-active;
+}
+
+.small-middle-container{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    height:100vh;
+}

src/Ombi/ClientApp/src/app/login/login.component.ts

@@ -94,7 +94,7 @@ export class LoginComponent implements OnDestroy, OnInit {
         this.settingsService.getClientId().subscribe(x => this.clientId = x);
         this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
         this.images.getRandomBackground().subscribe(x => {
-            this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%),url(" + x.url + ")");
+            this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
         });
         this.timer = setInterval(() => {
             this.cycleBackground();
@@ -206,7 +206,7 @@ export class LoginComponent implements OnDestroy, OnInit {
         });
         this.images.getRandomBackground().subscribe(x => {
             this.background = this.sanitizer
-                .bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(" + x.url + ")");
+                .bypassSecurityTrustStyle("url(" + x.url + ")");
         });
     }
 }

src/Ombi/ClientApp/src/styles/material-overrides.scss

@@ -22,16 +22,52 @@ td.mat-cell {
 }
 
 // lighter bg
-.mat-expansion-panel,
+::ng-deep .mat-expansion-panel,
 .mat-card,
 .mat-dialog-container,
 .mat-menu-content,
 .mat-table,
 .mat-paginator {
-    background: $ombi-background-accent !important;
+    background: $ombi-background-accent;
 }
 
 // Dark bg
 .mat-sidenav-container {
     background: $ombi-background-primary;
-}
+}
+
+//Login Screen CSS
+
+.login-card{
+    background-color: rgba(0,0,0,0.6);
+}
+
+.login-card H1.login_logo{
+    display:flex;
+    font-family: Montserrat,sans-serif;
+    text-transform: uppercase;
+    color:$ombi-active;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 10em;
+    width:100%;
+    padding:40px;
+    margin-bottom:50px;
+}
+
+.login-buttons button{
+    margin:1em;
+    &#sign-in{
+        background-color: $ombi-active;
+        color: $ombi-active-text;
+    }
+    &#sign-plex{
+        background-color: #282A2D;
+        color: #E5A00D;
+    }
+}
+
+
+
+// General Buttons CSS

src/Ombi/ClientApp/src/styles/variables.scss

@@ -43,4 +43,5 @@ $warn-dark: mat-color($ombi-dark-app-warn);
 $ombi-active: mat-color($ombi-dark-app-accent);
 $ombi-background-accent: mat-color($ombi-dark-app-primary);
 $ombi-background-primary: #0f171f;
-$ombi-background-primary-accent: #35465c;
+$ombi-background-primary-accent: #35465c;
+$ombi-active-text:#1b242f;