wip

src/app/pages/login/login.component.scss

@@ -1,53 +1,109 @@
+/* Algemene layout */
+.container {
+  max-width: 100%;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: repeating-conic-gradient(
+      from 30deg,
+      #0000 0 120deg,
+      #3c3c3c 0 180deg
+  ) calc(0.5 * 200px) calc(0.5 * 200px * 0.577),
+  repeating-conic-gradient(
+      from 30deg,
+      #1d1d1d 0 60deg,
+      #4e4f51 0 120deg,
+      #3c3c3c 0 180deg
+  );
+  background-size: 200px calc(200px * 0.577);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+/* Centraal form container */
 .center-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  /* Adjust as needed */
-}
-
-tui-error {
-  text-align: center;
-}
-
-p{
-  text-align: center;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 28px;
-  max-width: 300px;
-  max-height: 300px;
-}
-
-::ng-deep button.custom-button {
-  background-color: #222222 !important;
-  /* Pas kleur aan */
-  color: white !important;
-  /* Tekstkleur aanpassen */
-  width: 300px;
-}
-
-.container {
-  max-width: 100%;
   width: 100%;
-  height: 100%;
-  --s: 200px; /* control the size */
-  --c1: #1d1d1d;
-  --c2: #4e4f51;
-  --c3: #3c3c3c;
-
-  background: repeating-conic-gradient(
-      from 30deg,
-      #0000 0 120deg,
-      var(--c3) 0 180deg
-  ) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
-  repeating-conic-gradient(
-      from 30deg,
-      var(--c1) 0 60deg,
-      var(--c2) 0 120deg,
-      var(--c3) 0 180deg
-  );
-  background-size: var(--s) calc(var(--s) * 0.577);
+  max-width: 100%;
+}
+
+/* Het formulier zelf */
+form[tuiForm] {
+  background: white;
+  border-radius: 24px;
+  padding: 2rem;
+  max-width: 32rem; /* 512px */
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+}
+
+/* Logo */
+.header {
+  display: block;
+  margin: 0 auto 1.75rem auto;
+  max-width: 100%;
+  width: 200px;
+  height: auto;
+}
+
+/* Invoervelden */
+tui-textfield {
+  display: block;
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+/* Foutmelding */
+tui-error {
+  display: block;
+  margin-top: 0.5rem;
+  color: #ff3b30;
+  font-size: 0.9rem;
+}
+
+/* Inlogknop */
+button.custom-button {
+  background-color: #222222 !important;
+  color: white !important;
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border-radius: 12px;
+  margin-top: 1rem;
+}
+
+/* Versie info */
+p {
+  text-align: center;
+  font-size: 0.9rem;
+  color: #333;
+  margin-top: 1.25rem;
+}
+
+/* Responsiveness */
+@media (max-width: 600px) {
+  form[tuiForm] {
+    padding: 1.5rem 1rem;
+    max-width: 100%;
+  }
+
+  .header {
+    width: 150px;
+    margin-bottom: 1.25rem;
+  }
+
+  button.custom-button {
+    font-size: 0.95rem;
+  }
+
+  .container {
+    background-size: 150px calc(150px * 0.577);
+    opacity: 0.9; /* minder druk op mobiel */
+  }
 }

src/styles.scss

@@ -1,8 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 .container {
   max-width: 70vw;
-  margin: 0 auto;
-  padding: 20px;
+  //margin: 0 auto;
 }
 
 .heading {
@@ -16,3 +15,6 @@
   overflow-y: scroll;
   max-height: 70vh;
 }
+
+html, body{
+}