diff options
Diffstat (limited to 'login-page/src/styles.css')
| -rw-r--r-- | login-page/src/styles.css | 135 |
1 files changed, 0 insertions, 135 deletions
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; -} - |
