Completed initial login functionality

1 files changed, 79 insertions, 0 deletions

diff --git a/Pages/Component/Titlebar.razor.css b/Pages/Component/Titlebar.razor.css
new file mode 100644
index 0000000..ea10740
--- /dev/null
+++ b/Pages/Component/Titlebar.razor.css
@@ -0,0 +1,79 @@
+div#navbar {
+    align-items:   center;
+    background:    var(--col-navbar-bg);
+    box-shadow:    rgba(0, 0, 0, 0.5) 0px 10px 10px;
+    display:       flex;
+    height:        59px;
+    z-index:       100;
+}
+
+div#navbar > h2 {
+    margin-left: 20px;
+}
+
+div#navbar > a {
+    align-items: center;
+    color:       white;
+    display:     flex;
+    height:      100%;
+    padding:     0 20px 0 20px;
+}
+
+div#navbar > a:hover {
+    background: rgba(255, 255, 255, 0.4);
+    filter:     none;
+}
+
+div#navbar > a:active {
+    background: #fff;
+    color:      var(--col-navbar-bg);
+}
+
+p#nsfw-label {
+    align-self:  center;
+    font-size:   9pt;
+    margin-left: auto;
+}
+
+div#nsfw-switch {
+    align-self:  center;
+    margin-left: 10px;
+}
+
+form {
+    display:   flex;
+    margin:    0 20px 0 20px;
+    min-width: 30%;
+}
+
+form.login {
+    margin-left: auto;
+}
+
+form.login.bad-login {
+    animation-iteration-count: 3;
+    animation-timing-function: linear;
+    animation:                 bad-login 0.2s;
+}
+
+@keyframes bad-login {
+      0% { transform: translateX(0);     }
+     33% { transform: translateX(-20px); }
+     66% { transform: translateX(+20px); }
+    100% { transform: translateX(0);     }
+}
+
+input[type="text"], input[type="password"] {
+    align-self:    center;
+    background:    var(--col-bg);
+    border-radius: 0;
+    color:         white;
+    font-size:     12pt;
+    height:        40px !important;
+    margin:        0;
+    width:         100%;
+}
+
+input[type="password"] {
+    margin-left: 20px;
+}