initial commit

1 files changed, 118 insertions, 0 deletions

diff --git a/src/web/components/login/Login.css b/src/web/components/login/Login.css
new file mode 100644
index 0000000..1be8f84
--- /dev/null
+++ b/src/web/components/login/Login.css
@@ -0,0 +1,118 @@
+.screenCenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--login-z-index);
+
+    position: fixed;
+    inset: 0;
+    visibility: hidden;
+}
+
+.darken {
+    z-index: calc(var(--login-z-index) - 1);
+}
+.login {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 0 1 100%;
+
+    position: relative;
+    padding: 4em 2em 2em;
+    margin: 0em 3em;
+    max-width: 25em;
+
+    color: var(--black-98);
+    visibility: visible;
+    border-radius: 2em;
+
+    translate: 100vw;
+    transition: translate var(--transition-time) ease-in-out;
+}
+.loginActive {
+    translate: initial;
+    visibility: initial;
+}
+
+.formContainer {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.login .formContainer h1 {
+    font-size: 2em;
+    font-weight: bolder;
+    text-align: center;
+    color: white;
+    margin-bottom: 2rem;
+}
+.login .formContainer h2 {
+    font-size: 1.5em;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+.login .formContainer p {
+    text-align: center;
+    line-height: 1.25em;
+}
+
+.promptContainer {
+    min-height: 5em;
+    display: flex;
+    justify-content: space-between;
+}
+
+.login .formContainer button {
+    height: 2.25rem;
+    font-size: 1.25em;
+    margin-bottom: 1.25rem;
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 2.5rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.loading {
+    font-size: 1.65rem;
+    filter: invert(95%);
+}
+
+.formContainer a {
+    display: block;
+    text-align: center;
+    text-decoration: underline;
+    cursor: pointer;
+    min-height: 3em;
+    color: inherit;
+}
+
+.promptContainer input {
+    margin: 0 0.25em 0 0;
+}
+
+.cardError {
+    display: none;
+    position: absolute;
+    inset: 0 0 auto 0;
+    min-height: 2em;
+    margin: 1em;
+
+    justify-content: center;
+    align-items: center;
+
+    color: white;
+    border-radius: 2em;
+    font-weight: normal;
+    font-style: italic;
+    text-transform: uppercase;
+}
+.cardErrorActive {
+    display: flex;
+}
\ No newline at end of file