From f707d0658013504f71545c2a95d415824f96ac35 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 2 Mar 2021 18:02:33 +0200 Subject: Renamed login-page to cool inputs, cleaned out design, improved compatibility --- login-page/README.md | 1 - login-page/preview.gif | Bin 251714 -> 0 bytes login-page/src/index.html | 28 ---------- login-page/src/styles.css | 135 ---------------------------------------------- 4 files changed, 164 deletions(-) delete mode 100644 login-page/README.md delete mode 100644 login-page/preview.gif delete mode 100644 login-page/src/index.html delete mode 100644 login-page/src/styles.css (limited to 'login-page') diff --git a/login-page/README.md b/login-page/README.md deleted file mode 100644 index ee66bcf..0000000 --- a/login-page/README.md +++ /dev/null @@ -1 +0,0 @@ -![](./preview.gif) diff --git a/login-page/preview.gif b/login-page/preview.gif deleted file mode 100644 index 8907a8c..0000000 Binary files a/login-page/preview.gif and /dev/null differ diff --git a/login-page/src/index.html b/login-page/src/index.html deleted file mode 100644 index 51e896a..0000000 --- a/login-page/src/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - DevHive - Login - - -
-
- Login -
-
-
-
- - -
-
- - -
-
- -
-
- - diff --git a/login-page/src/styles.css b/login-page/src/styles.css deleted file mode 100644 index 6640059..0000000 --- a/login-page/src/styles.css +++ /dev/null @@ -1,135 +0,0 @@ -/* Global */ - -:root { - --focus-color: forestgreen; -} - -html, body { - height: 100%; - margin: 0; -} - -body { - font: 21px sans-serif; -} - -form { - width: 100%; -} - -/* Styling of simple elements */ - -#content { - height: 100%; - max-width: 20em; - margin-left: auto; - margin-right: auto; - - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -#title { - font-size: 2em; - font-weight: bold; -} - -#content input { - border: 0; - border-bottom: 1px solid grey; - padding: 0.4em; - padding-left: 0; - width: 100%; - box-sizing: border-box; - font-size: inherit; - margin-bottom: 0.5em; -} - -#content #submit-btn { - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - width: 100%; - margin-top: 0.5em; - font-size: 0.8em; - padding: 0.3em; -} - -input:focus, button:focus { - outline: 0; -} - -#content hr { - width: 100%; - border: 1px solid black; - box-sizing: border-box; -} - -/* Where the magic happens */ - -#submit-btn { - transition: 0.2s; - background-color: black; - color: white; - text-align: center; -} - -#submit-btn:hover { - cursor: pointer; - border-color: var(--focus-color) !important; - color: var(--focus-color); - background-color: white; -} - -#submit-btn:active { - transition: 0s; - transform: scale(0.9); -} - -.input-selection { - position: relative; - margin-top: 0.7em; -} - -.input-selection label { - transition: 0.2s; - width: inherit; - height: inherit; - position: absolute; - margin-top: 0.4em; - scale: 1em; - color: grey; - left: 0; -} - -.input-selection input::-webkit-input-placeholder { - /* Don't show the placeholder when the label is on top */ - opacity: 0; -} - -.input-selection:hover > label, -.input-selection > input:not(:placeholder-shown) + label, -.input-selection > input:focus + label { - /* When hovering, typing or having typed something in an input, - * make the label smaller, color it and then move it up - */ - font-size: 0.7em; - color: var(--focus-color); - transform: translate(0, -1.2em); -} - -.input-selection:hover > input::-webkit-input-placeholder, -.input-selection > input:focus::-webkit-input-placeholder { - opacity: 1; -} - -.input-selection:hover > input, -.input-selection > input:focus { - border-color: var(--focus-color) !important; - caret-color: var(--focus-color); - border-width: 2px !important; - margin-top: -1px !important; -} - -- cgit v1.2.3