-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Creating all the necessary stylization
- Loading branch information
1 parent
af1adac
commit ed6ad24
Showing
9 changed files
with
233 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,4 @@ | |
|
|
||
| # local files | ||
| trash-code.txt | ||
| .temp | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,215 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap'); | ||
|
|
||
| * { | ||
| border: 1px solid #00f; | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
|
|
||
| box-sizing: border-box; | ||
| } | ||
| :root { | ||
| --black: #000; | ||
| --white: #FFF; | ||
|
|
||
| --gray-50: #FEFEFE; | ||
| --cian-100: #76C7F3; | ||
| --green-100: #A3FE47; | ||
| --yellow-100: #FCCB38; | ||
| --purple-100: #6746A4; | ||
|
|
||
| --background: var(--purple-100); | ||
| --text: var(--gray-50); | ||
|
|
||
| --black-50p: rgb(0 0 0 / 50%); | ||
| --white-50p: rgb(255 255 255 / 50%); | ||
| --gray-50-10p: rgb(254 254 254 / 10%); | ||
| --gray-50-20p: rgb(254 254 254 / 20%); | ||
| --gray-50-70p: rgb(254 254 254 / 70%); | ||
|
|
||
| --green-100-80p: #A3FE47CC; | ||
| } | ||
|
|
||
| /* ------- Body -------- */ | ||
| body { | ||
| width: calc(100vw - 2px); | ||
| height: calc(100vh - 2px); | ||
| background-color: #242424; | ||
| color: #fff; | ||
| font-family: 'Roboto', sans-serif; | ||
| width: 100vw; | ||
| height: 100vh; | ||
|
|
||
| background-image: url("/public/assets/background.jpg"); | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: cover; | ||
| background-color: var(--background); | ||
| color: var(--text); | ||
| font-family: 'Montserrat', sans-serif; | ||
| font-weight: 400; | ||
| font-size: 1rem; | ||
| text-rendering: optimizeLegibility; | ||
|
|
||
| display: flex; | ||
| /* flex-direction: column; */ | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| ::selection { | ||
| background-color: var(--cian-100); | ||
| color: var(--black); | ||
| } | ||
|
|
||
| /* ------- Text -------- */ | ||
| h1, h2 { | ||
| text-align: center; | ||
| text-transform: uppercase; | ||
| font-weight: 600; | ||
| margin: 1em 0; | ||
| } | ||
| h1 { letter-spacing: 0.419em; } | ||
| h2 { font-size: 1em; } | ||
|
|
||
| /* ------- Main -------- */ | ||
| main { | ||
| width: 20em; | ||
| background-color: #f00; | ||
| width: 18em; | ||
|
|
||
| background: linear-gradient(114deg, rgb(255 255 255 / 40%) 0%, rgb(103 70 164 / 10%) 70.86%); | ||
| box-shadow: -0.313em 0.313em 1.5em 0.313em rgb(0 0 0 / 20%); | ||
| border: 1px solid rgb(255 255 255 / 50%); | ||
| border-radius: 1em; | ||
|
|
||
| position: relative; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| backdrop-filter: blur(0.625em); | ||
| } | ||
| main img#logo-icon { | ||
| position: absolute; | ||
| top: -2.5em; | ||
| right: -2em; | ||
|
|
||
| transition: 0.5s ease; | ||
| } | ||
| main img#logo-icon.slide-left { | ||
| top: -2.8em; | ||
| right: 15.5em; | ||
| } | ||
| section { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: #0f0; | ||
| margin: 1em; | ||
| height: 16.563em; | ||
|
|
||
| display: inline-flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| transition: 0.3s height ease; | ||
|
|
||
| overflow: hidden; | ||
| } | ||
| section#section-login-voucher { height: 0; } | ||
|
|
||
| /* ------- Form -------- */ | ||
| form { | ||
| padding: 0em 1em; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| align-self: stretch; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 1em; | ||
| } | ||
| section#section-login-voucher { | ||
| height: 0; | ||
| .email-container, | ||
| .password-container, | ||
| .voucher-container { | ||
| width: 100%; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| label, input { letter-spacing: -0.0175rem; } | ||
| input { | ||
| width: 100%; | ||
|
|
||
| background: var(--gray-50-10p); | ||
| color: var(--gray-50-70p); | ||
| border-radius: 0.5em; | ||
| font-family: Montserrat; | ||
| font-size: 0.875rem; | ||
| font-weight: 500; | ||
|
|
||
| padding: 0.5rem 1rem; | ||
| } | ||
| input#password-input { padding-right: 3rem; } | ||
| input:hover, | ||
| input:valid { box-shadow: inset 0 0 0 0.125rem var(--gray-50-20p); } | ||
| input::placeholder { color: var(--gray-50-20p); } | ||
| input:-webkit-autofill { | ||
| -webkit-text-fill-color: var(--gray-50-70p) !important; | ||
| -webkit-box-shadow: 0 0 0 0.125rem rgb(255 255 255 / 20%) inset, 0 0 0 2rem var(--black-50p) inset; | ||
| } | ||
| input:-webkit-autofill::selection{ -webkit-text-fill-color: var(--black) !important; } | ||
| .password-eye-container { position: relative; } | ||
| .password-eye { | ||
| width: 1em; | ||
| height: 1em; | ||
| background-color: #00f; | ||
| padding: 0.2em; | ||
| position: relative; | ||
| top: 0.5em; | ||
| width: 2em; | ||
| height: 2em; | ||
|
|
||
| color: var(--gray-50-20p); | ||
|
|
||
| position: absolute; | ||
| top: 0; | ||
| right: 0.5em; | ||
|
|
||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| cursor: pointer; | ||
| } | ||
| .password-eye.hidden { color: var(--gray-50-70p); } | ||
|
|
||
| /* ------- Button -------- */ | ||
| button { | ||
| font-family: Montserrat; | ||
| font-size: 0.875em; | ||
|
|
||
| display: flex; | ||
| align-self: stretch; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| cursor: pointer; | ||
| } | ||
| } | ||
| button[type='submit'] { | ||
| background-color: var(--green-100); | ||
| border-radius: 0.5em; | ||
| color: var(--black-50p); | ||
| font-weight: 500; | ||
|
|
||
| padding: 0.5rem 1rem; | ||
| margin-bottom: 1rem; | ||
|
|
||
| transition: background-color 0.2s ease-in-out | ||
| } | ||
| button[type='submit']:hover { background-color: var(--green-100-80p); } | ||
| button[type='submit']:active { box-shadow: inset 0 0 0 0.125rem rgb(0 0 0 / 20%); } | ||
|
|
||
| button#toggle-login-type { | ||
| height: 3rem; | ||
|
|
||
| background-color: var(--purple-100); | ||
| color: var(--gray-50-70p); | ||
| border: 0.125rem dashed var(--purple-100); | ||
| border-radius: 0 0 1em 1em; | ||
| font-weight: 600; | ||
| letter-spacing: 0.04375rem; | ||
|
|
||
| padding: 0.5rem 1.25rem; | ||
|
|
||
| justify-content: space-between; | ||
|
|
||
| transition: border-radius 0.3s ease; | ||
| } | ||
| button#toggle-login-type:hover, | ||
| button#toggle-login-type:active { border-color: var(--gray-50-70p); } | ||
| button#toggle-login-type.type-login-voucher { border-radius: 1em 1em 0 0; } | ||
| button#toggle-login-type.type-login-voucher img { transform: rotate(180deg); } |