From b4797365f53f233f236f8c93e15ce96263221754 Mon Sep 17 00:00:00 2001 From: Colin Kallemein Date: Fri, 3 May 2024 20:47:37 +0200 Subject: [PATCH] Crisis averted Also changed the styling for Login --- package-lock.json | 70 ++++++++--------- src/assets/login.scss | 124 +++++++++++++++---------------- src/assets/main.scss | 5 ++ src/components/screens/Login.vue | 53 +++++++------ 4 files changed, 132 insertions(+), 120 deletions(-) diff --git a/package-lock.json b/package-lock.json index 854a915..706617d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1867,13 +1867,13 @@ } }, "node_modules/@vitest/expect": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.5.3.tgz", - "integrity": "sha512-y+waPz31pOFr3rD7vWTbwiLe5+MgsMm40jTZbQE8p8/qXyBX3CQsIXRx9XK12IbY7q/t5a5aM/ckt33b4PxK2g==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz", + "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==", "dev": true, "dependencies": { - "@vitest/spy": "1.5.3", - "@vitest/utils": "1.5.3", + "@vitest/spy": "1.6.0", + "@vitest/utils": "1.6.0", "chai": "^4.3.10" }, "funding": { @@ -1881,12 +1881,12 @@ } }, "node_modules/@vitest/runner": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.5.3.tgz", - "integrity": "sha512-7PlfuReN8692IKQIdCxwir1AOaP5THfNkp0Uc4BKr2na+9lALNit7ub9l3/R7MP8aV61+mHKRGiqEKRIwu6iiQ==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz", + "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==", "dev": true, "dependencies": { - "@vitest/utils": "1.5.3", + "@vitest/utils": "1.6.0", "p-limit": "^5.0.0", "pathe": "^1.1.1" }, @@ -1922,9 +1922,9 @@ } }, "node_modules/@vitest/snapshot": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.5.3.tgz", - "integrity": "sha512-K3mvIsjyKYBhNIDujMD2gfQEzddLe51nNOAf45yKRt/QFJcUIeTQd2trRvv6M6oCBHNVnZwFWbQ4yj96ibiDsA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz", + "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==", "dev": true, "dependencies": { "magic-string": "^0.30.5", @@ -1936,9 +1936,9 @@ } }, "node_modules/@vitest/spy": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.5.3.tgz", - "integrity": "sha512-Llj7Jgs6lbnL55WoshJUUacdJfjU2honvGcAJBxhra5TPEzTJH8ZuhI3p/JwqqfnTr4PmP7nDmOXP53MS7GJlg==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz", + "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==", "dev": true, "dependencies": { "tinyspy": "^2.2.0" @@ -1948,9 +1948,9 @@ } }, "node_modules/@vitest/utils": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.5.3.tgz", - "integrity": "sha512-rE9DTN1BRhzkzqNQO+kw8ZgfeEBCLXiHJwetk668shmNBpSagQxneT5eSqEBLP+cqSiAeecvQmbpFfdMyLcIQA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz", + "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==", "dev": true, "dependencies": { "diff-sequences": "^29.6.3", @@ -3039,9 +3039,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.755", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.755.tgz", - "integrity": "sha512-9nop+3jZxSHIxe1EzEUcjDXzK+3qOv3fY5w0sE88nIZUntbv1aXWmoxGWlklX5XSO4txCpLssWkUSh8RQPovBg==", + "version": "1.4.756", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz", + "integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==", "dev": true }, "node_modules/emoji-regex": { @@ -6011,9 +6011,9 @@ } }, "node_modules/vite-node": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.5.3.tgz", - "integrity": "sha512-axFo00qiCpU/JLd8N1gu9iEYL3xTbMbMrbe5nDp9GL0nb6gurIdZLkkFogZXWnE8Oyy5kfSLwNVIcVsnhE7lgQ==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz", + "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==", "dev": true, "dependencies": { "cac": "^6.7.14", @@ -6105,16 +6105,16 @@ } }, "node_modules/vitest": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.5.3.tgz", - "integrity": "sha512-2oM7nLXylw3mQlW6GXnRriw+7YvZFk/YNV8AxIC3Z3MfFbuziLGWP9GPxxu/7nRlXhqyxBikpamr+lEEj1sUEw==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz", + "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==", "dev": true, "dependencies": { - "@vitest/expect": "1.5.3", - "@vitest/runner": "1.5.3", - "@vitest/snapshot": "1.5.3", - "@vitest/spy": "1.5.3", - "@vitest/utils": "1.5.3", + "@vitest/expect": "1.6.0", + "@vitest/runner": "1.6.0", + "@vitest/snapshot": "1.6.0", + "@vitest/spy": "1.6.0", + "@vitest/utils": "1.6.0", "acorn-walk": "^8.3.2", "chai": "^4.3.10", "debug": "^4.3.4", @@ -6128,7 +6128,7 @@ "tinybench": "^2.5.1", "tinypool": "^0.8.3", "vite": "^5.0.0", - "vite-node": "1.5.3", + "vite-node": "1.6.0", "why-is-node-running": "^2.2.2" }, "bin": { @@ -6143,8 +6143,8 @@ "peerDependencies": { "@edge-runtime/vm": "*", "@types/node": "^18.0.0 || >=20.0.0", - "@vitest/browser": "1.5.3", - "@vitest/ui": "1.5.3", + "@vitest/browser": "1.6.0", + "@vitest/ui": "1.6.0", "happy-dom": "*", "jsdom": "*" }, diff --git a/src/assets/login.scss b/src/assets/login.scss index 2dc48f8..884eeaa 100644 --- a/src/assets/login.scss +++ b/src/assets/login.scss @@ -12,90 +12,88 @@ height: 100vh; display: flex; align-items: center; - justify-content: center; + justify-content: space-between; flex-direction: column; - position: relative; - .login-form { - position: absolute; - bottom: 9rem; - width: 100%; - - form { - display: grid; - gap: 1.5rem; + .content-elements { + margin: 5rem 0; + width: inherit; + display: flex; + flex-direction: column; + gap: 1.5rem; + .login-form { width: inherit; - .form-field { - display: flex; - flex-direction: column; - background-color: rgba(255, 255, 255, 0.5); - border-radius: 3px; - width: 30%; - margin: 0 auto; + form { + display: grid; + gap: 1rem; + width: inherit; - label { - color: #000; + .form-field { + display: flex; + flex-direction: column; background-color: rgba(255, 255, 255, 0.5); - padding: 0.15rem 0.5rem; - } - input { - background-color: transparent; - border: none; - padding: 0.25rem 0.25rem; - font-size: 16px; + border-radius: 3px; + min-width: 25rem; + margin: 0 auto; + + label { + color: #000; + background-color: rgba(255, 255, 255, 0.5); + padding: 0.25rem 0.5rem; + font-weight: 600; + font-size: 0.875rem; + } + input { + background-color: transparent; + border: none; + padding: 0.3rem 0.25rem; + font-size: 0.875rem; + + &:focus-visible { + outline: none; + } + } } } } - } - .row-buttons { - display: flex; - gap: 0.5rem; - position: absolute; - bottom: 5rem; + .row-buttons { + display: flex; + justify-content: center; + gap: 0.5rem; - .button { - padding: 1rem 0; - min-width: 6rem; - text-align: center; - position: relative; - font-size: 10px; + .button { + padding: 0.875rem 0; + min-width: 6.25rem; + text-align: center; + position: relative; + font-size: 0.875rem; - &.button-1 { - background-image: url('/assets/Button_1.png'); - } - &.button-2 { - background-image: url('/assets/Button_2.png'); - } - &.button-3 { - background-image: url('/assets/Button_3.png'); - } - &.button-4 { - background-image: url('/assets/Button_4.png'); - } + p { + margin: auto; + } - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 100%; - border: none; - cursor: pointer; - overflow: hidden; - outline: none; - color:white; + img { + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: -1; + } - &:hover { - filter: brightness(60%); + &:hover { + filter: brightness(60%); + cursor: pointer; + } } } } } .main-title { - position: absolute; + margin-top: 7rem; text-align: center; - top: 40%; font-size: 3rem; color: #FFF; text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray; diff --git a/src/assets/main.scss b/src/assets/main.scss index d2df235..d4e17b1 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -15,6 +15,11 @@ p, a, li, label { color: #FFF; } +button { + background-color: transparent; + border: none; +} + a { text-decoration: none; } diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue index 6aaf5b2..cc290d3 100644 --- a/src/components/screens/Login.vue +++ b/src/components/screens/Login.vue @@ -4,30 +4,39 @@

NEW QUEST

- +
+ +