TueIT_App/components/LoginForm.vue

<template>
  <form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
    <div class="title-field">
      <span class="title-icon" id="logo-icon">
        <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
      </span>
      <pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
    </div>
    <div class="login-field">
      <div class="form-field" id="username-field">
        <label for="username-input" id="username-label">
          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
            <img loading="lazy" src="../icons/Mail-Icon.svg" />
          </span>
          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
        </label>
        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
          <input type="text" id="username-input" placeholder="user@example.com">
        </div>
      </div>
      <div class="form-field" id="password-field">
        <label for="password-input" id="password-label">
          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
            <img loading="lazy" src="../icons/Lock-Icon.svg" />
          </span>
          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
        </label>
        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
          <input type="text" id="password-input" placeholder="*******">
          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
            value="Show">
        </div>
      </div>
    </div>
    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login">
  </form>
</template>


<script setup>
import { ref } from 'vue';

const darkMode = ref(true)
</script>

<script>
export default {
  name: "LoginForm",
};
</script> 
  

<style scoped>
* {
  box-sizing: border-box;
}


.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 31.25rem;
  height: 31.25rem;
  border-radius: 0.625rem;
  padding: 2.5rem 1.875rem;
  gap: 1.875rem;
}

.form-darkmode {
  border: 0.0625rem solid #000;
  background-color: #2c2c2c;
}

.form-lightmode {
  border: 0.0625rem solid #8e8e8e;
  background-color: #fff;
}

.title-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.title-icon {
  justify-content: center;
  align-items: center;
  width: 3.125rem;
  height: 3.125rem;
}

.title-icon>img {
  width: 3.125rem;
  height: 3.125rem;
  object-fit: contain;
  object-position: center;
  overflow: hidden;
}

.title {
  margin: 0;
  letter-spacing: 5%;
  white-space: nowrap;
  font: 400 1.875rem/1.875rem Overpass, sans-serif;
}

.pre-darkmode,
.title-darkmode {
  color: #fff;
}

.pre-lightmode,
.title-lightmode {
  color: #000;
}

.login-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 25rem;
  height: 5rem;
  padding: 0.625rem;
  gap: 0.625rem;
}

label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: fit-content;
  height: 1.875rem;
  gap: 0.625rem;
}

.icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
}

.icon>img {
  object-fit: contain;
  object-position: center;
  overflow: hidden;
}

.icon-darkmode>img {
  filter: invert(100%);
}

.icon-lightmode>img {
  filter: invert(0%);
}

#username-icon>img {
  width: auto;
  height: 0.9375rem;
}

#password-icon>img {
  width: 0.9375rem;
  height: auto;
}

.label {
  letter-spacing: 2%;
  font: 400 0.9375rem/1.875rem Overpass, sans-serif;
}

.label-darkmode {
  color: #fff;
}

.label-lightmode {
  color: #000;
}

.input-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  align-self: stretch;
  width: 100%;
  height: 1.875rem;
  border-radius: 0.3125rem;
  padding: 0.1875rem 0.625rem;
  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
}

.input-darkmode {
  background-color: #212121;
}

.input-lightmode {
  background-color: #EBEBEB;
}

input[type=text] {
  width: 100%;
  height: 100%;
  background-color: #00000000;
  border: none;
  color: #8e8e8e;
  letter-spacing: 5%;
  white-space: nowrap;
  font: 100 0.75rem/1.25rem Overpass, sans-serif;
}

input[type=button] {
  width: fit-content;
  align-self: flex-end;
  background-color: #00000000;
  border: none;
  letter-spacing: 5%;
  white-space: nowrap;
  font: 300 0.75rem/1.25rem Overpass, sans-serif;
}

.button-darkmode {
  color: #fff;
}

.button-lightmode {
  color: #000;
}

#login-button {
  width: 13.75rem;
  height: 4.375rem;
  padding: 0.625rem;
  border-radius: 0.625rem;
  align-self: center;
  border: none;
  color: #000;
  background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
  letter-spacing: 2%;
  white-space: nowrap;
  font: 600 1.25rem/1.875rem Overpass, sans-serif;
}
</style>