github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

New login css

Browse source
This commit is contained in:
twanariens 2021-01-23 22:58:24 +01:00
commit 985479f4dc
5 changed files with 77 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Ombi/ClientApp/src/app/login/login.component.html
View file

@ -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)">

94
src/Ombi/ClientApp/src/app/login/login.component.scss
View file

@ -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;
}

4
src/Ombi/ClientApp/src/app/login/login.component.ts
View file

@ -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 + ")");
});
}
}

42
src/Ombi/ClientApp/src/styles/material-overrides.scss
View file

@ -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

3
src/Ombi/ClientApp/src/styles/variables.scss
View file

@ -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;