Finish base header

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css

@@ -1,13 +1,94 @@
 .account-setting-content {
     overflow: hidden;
-    display: flex;
-    flex-direction: column;
     border-radius: var(--big-radius);
     position: fixed;
     animation-name: fade-in;
-    animation-duration: 0.4s
+    animation-duration: 0.4s;
+    border: 2px solid var(--light-grey);
+    background: var(--black);
+    right: 10px;
+    margin-top: 4px;
 }
 
 .invisible {
     display: none;
 }
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    padding: 20px 6px;
+    gap: 20px;
+    max-width: 400px;
+}
+
+.login-field {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: fit-content;
+}
+
+::deep .input-text {
+    background: var(--light-grey);
+    border: 2px solid rgb(255, 255, 255, 0.3);
+    border-radius: var(--small-radius);
+    padding: 6px;
+    color: var(--white);
+}
+
+    ::deep .input-text:focus-visible {
+        border: 2px solid var(--violet) !important;
+    }
+
+.login-button {
+    background: var(--violet);
+    border: none;
+    border-radius: 100px;
+    height: 32px;
+    color: var(--white);
+    font-weight: bold;
+}
+
+    .login-button:hover {
+        background: var(--violet-selected);
+        cursor:pointer;
+    }
+
+    .login-button:disabled {
+        background: var(--violet-selected);
+        cursor: wait;
+    }
+
+.loading {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 3px solid var(--line-black);
+    border-top-color: var(--white);
+    animation: loading 1s linear infinite;
+    justify-self: center;
+}
+
+.settings-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.line {
+    margin: 0 6px;
+    border-bottom: 2px solid var(--light-grey);
+}
+
+.settings-element {
+    max-width: 140px;
+    height: 40px;
+    padding: 0 26px;
+    align-content: center;
+}
+
+    .settings-element:hover {
+        background: var(--light-grey)
+    }
+
+