diff options
| -rw-r--r-- | src/app/components/login/login.component.css | 28 | ||||
| -rw-r--r-- | src/app/components/login/login.component.html | 27 | ||||
| -rw-r--r-- | src/styles.css | 164 |
3 files changed, 84 insertions, 135 deletions
diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css index 103f5c0..3cd7198 100644 --- a/src/app/components/login/login.component.css +++ b/src/app/components/login/login.component.css @@ -1,32 +1,8 @@ -form { - width: 100%; -} - -#content hr { - width: 100%; - border: 1px solid black; - box-sizing: border-box; -} - -.submit-btn { - transition: 0.2s; -} - -.input-selection:nth-of-type(1) { - margin-top: 1.2em; -} - -.submit-btn { - margin-bottom: .2em; +.input-selection:first-of-type { + margin-top: 0.5em; } .redirect-to-register { color: var(--focus-color); - background-color: var(--bg-color); border-color: var(--focus-color); } - -.redirect-to-register:hover { - border-color: black !important; - color: black; -} diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 9f74faa..5ed1ac8 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,30 +1,25 @@ -<main id="content"> - <summary class="title">Login</summary> +<main class="centered-content flex-col flex-center-align-items flex-justify-center full-height"> + <summary class="title card full-width no-margin padding-small">Login</summary> - <form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()"> - <hr> - - <section class="input-selection"> - <input type="text" placeholder="Username" class="input-field" formControlName="username" required> - <label class="input-field-label">Username</label> + <app-error-bar class="full-width margin-top-normal"></app-error-bar> + <form class="full-width card padding-big" [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()"> + <section class="input-selection full-width"> + <input type="text" placeholder="Username" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="username" required> + <label class="fancy-input-label full-width">Username</label> <div class="input-errors"> <label *ngIf="loginUserFormGroup.get('username')?.errors?.required" class="error">*Required</label> </div> </section> - <section class="input-selection"> - <input type="password" placeholder="Password" class="input-field" formControlName="password" required> - <label class="input-field-label">Password</label> - + <input type="password" placeholder="Password" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="password" required> + <label class="fancy-input-label full-width">Password</label> <div class="input-errors"> <label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label> </div> </section> - <hr> - <button class="submit-btn" type="submit">Submit</button> - <app-error-bar></app-error-bar> + <button class="faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width" type="submit">Submit</button> </form> - <button class="submit-btn redirect-to-register" (click)="onRedirectRegister()">New to DevHive? Register instead</button> + <button class="focus-fg-color faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width margin-top-normal" (click)="onRedirectRegister()">New to DevHive? Register instead</button> </main> diff --git a/src/styles.css b/src/styles.css index c06a9bd..93ed57b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -5,10 +5,10 @@ --max-width: 40rem; --bg-color: #18191a; --fg-color: #ffeede; - --focus-color: forestgreen; + --focus-color: #669908; --card-bg: #303030; --card-padding: 0.5em; - --success: forestgreen; + --success: #669908; --failure: indianred; --faded-color: #696969; --navbar-height: 2.6em; @@ -53,21 +53,6 @@ input[type=file]::file-selector-button { visibility: hidden; } -#content { - /* Used for the login and register pages */ - height: 100%; - max-width: var(--max-width); - box-sizing: border-box; - border: 0.5em solid var(--bg-color); - - margin: 0 auto; - - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - .rounded-border { border: 2px solid black; border-radius: 0.6em; @@ -82,6 +67,7 @@ input[type=file]::file-selector-button { .title { font-size: 2em; font-weight: bold; + text-align: center; } .error { @@ -115,6 +101,44 @@ input[type=file]::file-selector-button { width: fit-content; } +/* Cards */ + +.card { + margin: 0.5em auto; + box-sizing: border-box; + padding: var(--card-padding); + background-color: var(--card-bg); + position: relative; +} + +@media screen and (max-width: 30rem) { + .card { + font-size: 0.8em; + } + + .card button { + font-size: 0.9em; + } + + .title { + font-size: 1.5em; + } + + .input-selection:first-child { + margin-top: 1.2em !important; + } + + :not(card) button { + font-size: 0.7em; + } +} + +.card-hr { + width: calc(100% - 1em); + border: 1px solid var(--fg-color); + background-color: var(--fg-color); +} + /* General flex */ .flex-row, .flex-col { @@ -205,7 +229,7 @@ input[type=file]::file-selector-button { } .border-radius-normal, .card { - border-radius: 0.5em; + border-radius: 0.5rem; } .border-radius-smaller { @@ -224,6 +248,14 @@ input[type=file]::file-selector-button { /* General padding */ +.padding-big { + padding: 0.6em; +} + +.padding-bigger { + padding: 0.5em; +} + .padding-normal { padding: 0.4em; } @@ -252,6 +284,14 @@ input[type=file]::file-selector-button { /* Margin */ +.no-margin { + margin: 0; +} + +.margin-top-normal { + margin-top: 0.4em; +} + .margin-top-bot-small { margin-top: 0.2em; margin-bottom: 0.2em; @@ -261,32 +301,6 @@ input[type=file]::file-selector-button { margin-right: 0.2em; } -/* Cards */ - -.card { - margin: 0.5em auto; - box-sizing: border-box; - padding: var(--card-padding); - background-color: var(--card-bg); - position: relative; -} - -@media screen and (max-width: 30rem) { - .card { - font-size: 0.8em; - } - - .card button { - font-size: 0.9em; - } -} - -.card-hr { - width: calc(100% - 1em); - border: 1px solid var(--fg-color); - background-color: var(--fg-color); -} - /* Effects */ .lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover { @@ -311,6 +325,10 @@ input[type=file]::file-selector-button { /* Misc */ +.full-height { + height: 100%; +} + .full-width { width: 100%; } @@ -325,39 +343,34 @@ input[type=file]::file-selector-button { height: calc(100% - var(--navbar-height)) !important; } -/* Inputs, the type found in login and register */ +.focus-fg-color { + color: var(--focus-color); + border-color: var(--focus-color); +} -.input-field { - width: 100%; - background-color: var(--bg-color); +/* Inputs, the type found in login and register */ - border: 0; - border-bottom: 1px solid grey; +.fancy-input { box-sizing: border-box; - margin-bottom: 0.5em; padding: 0.4em; padding-left: 0; - - font-size: inherit; } -.input-field-label { +.fancy-input-label { width: inherit; height: inherit; position: absolute; left: 0; margin-top: 0.4em; - color: grey; - transition: 0.2s; scale: 1em; } .input-selection { position: relative; - margin-top: 0.7em; + margin-top: 0.5em; } .input-selection input::placeholder { @@ -406,7 +419,7 @@ input[type=file]::file-selector-button { top: 0; } -/* Move the errors above the input when + /* Move the errors above the input when * using the site on a small screen and * add some space for them above the input */ @@ -431,41 +444,6 @@ input[type=file]::file-selector-button { opacity: 0; } -/* Submit button */ - -.submit-btn { - width: 100%; - color: white; - background-color: black; - - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - - font-size: 0.8em; - text-align: center; - - margin-top: 0.5em; - padding: 0.3em; -} - -.submit-btn:hover { - cursor: pointer; - color: var(--focus-color); - background-color: white; - border-color: var(--focus-color) !important; -} - -.submit-btn:active { - transition: 0s !important; - transform: scale(0.9); -} - -.delete-btn:hover { - color: indianred; - border-color: indianred !important; -} - /* Form attachments (the ones that are shown while creating and editing a post) */ .form-attachments { |